JS 语法基础

Javascript 简介

JavaScript 引入方式

内联 JavaScript: 直接在 HTML 文件中通过 <script> 标签编写 JavaScript 代码。

<script>
  // 这里编写 JavaScript 代码
  document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

外部 JavaScript: 在 HTML 文件中通过 <script> 标签的 src 属性引入外部 .js 文件。

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
<script src="path/to/your-script.js"></script>

行内 JavaScript: 在 HTML 标签的事件属性中直接编写小段 JavaScript 代码。
```
<button onclick="alert('Hello World')">点击我</button>
```

Javascript 输出方式

alert() 方法:
使用 alert 弹出一个对话框来显示内容。
```
alert("这是一个警告框！");
```
console.log() 方法:
主要用于调试，它会将内容输出到浏览器的控制台上。
```
console.log("在控制台输出信息");
```
document.write() 方法:
可以直接将内容写入 HTML 文档流中。使用这个方法时，应注意它会覆写整个 HTML 文档的内容，如果在文档加载完成后调用，会导致现有文档的清空。
```
document.write("<h1>这是一个标题</h1>");
```
innerHTML 属性:
通过改变 HTML 元素的 innerHTML 属性来输出内容到页面的指定位置。
```
document.getElementById("demo").innerHTML = "这是新的内容";
```
textContent 属性:
与 innerHTML 类似，但 textContent 仅插入文本内容，而不会解析其中可能含有的 HTML 标签。
```
document.getElementById("demo").textContent = "纯文本内容";
```

JavaScript 语法基础

变量与常量

变量的命名规则：
变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$。
变量的使用：
使用 var, let, const 定义变量与常量。var & let & const 区别
不使用声明关键字（var、let 或 const）创建的变量始终是全局变量，即使它们是在函数内部创建的。
```
var name = "Alice"; // var 声明一个变量
let age = 25; // let 声明的变量有块级作用域
const PI = 3.14159; // const 声明一个常量值
var a=10, b=20, c=30;
```

数据类型

JavaScript has 8 data types: String, Number, Bigint, Boolean, Undefined, Null, Symbol, Object. The object data type can contain: An object, An array, A date.

var str = "Hello, World!"; // String
var num = 100; // Number
var bool = true; // Boolean
var obj = { name: "Alice", age: 25 }; // Object
var array = [1, 2, 3]; // Array
var nothing = null; // null
var undef; // undefined

Strings are written with quotes. You can use single or double quotes.
All JavaScript numbers are stored as decimal numbers (floating point).
Extra large or extra small numbers can be written with scientific (exponential) notation.
All JavaScript numbers are stored in a a 64-bit floating-point format. JavaScript BigInt is a new datatype (ES2020) that can be used to store integer values that are too big to be represented by a normal JavaScript Number.
Any variable can be emptied, by setting the value to undefined. The type will also be undefined.

let y = 123e5; // 12300000
let z = 123e-5; // 0.00123
let x = BigInt("123456789012345678901234567890");
car = undefined; // Value is undefined, type is undefined

运算符

算术运算符：加减乘除、取余、自增自减、求幂、 +、-、*、/、%、++、--、**
赋值运算符：=、+=、-=、*=、/=、%=
比较运算符：==、!=、===、!==、>、<、>=、<=
逻辑运算符：&&、||、!
条件/三目运算符：var a = 条件 ? 表达式1 : 表达式2;

var sum = 10 + 5; // 算术运算符
var x = 10;
x += 5; // 赋值运算符
var isGreater = 10 > 5; // 比较运算符
var and = 5 > 3 && 2 < 4; // 逻辑运算符

补充内容：JS 特殊加法运算符

类型转换

JavaScript 语言是弱类型的，经常需要进行显式或隐式的类型转换。JS 数字与字符串转换

var result = "3" + 2; // 隐式转换，结果为字符串 "32"
var resultNumber = Number("5") + 3; // 显式转换，结果为数字 8

转义字符

在字符串中使用反斜线 (\) 跟随特定的字符表示特定的预定义字符。

var newLine = "第一行\n第二行"; // \n 表示换行
var quote = '他说："你好！"'; // \" 用于在字符串中表示引号

如果是在 document.write() 中换行，则应该用
。
如果是在 alert() 中换行，则应该用\n。

注释

注释使用 // 进行单行注释，/* ... */ 用于多行注释。

// 这是单行注释
var x = 5; // 这后面也是单行注释
/* 这是一个多行注释的例子，
可以覆盖多行。 */

流程控制

if & switch

if / else if / else:

if (condition1) {
  // 当 condition1 为 true 时执行这里的代码
} else if (condition2) {
  // 当 condition1 为 false 且 condition2 为 true 时执行这里的代码
} else {
  // 当上面的条件都不满足时执行这里的代码
}

switch case:

switch (expression) {
  case value1:
    // 当 expression 等于 value1 执行这里的代码
    break;
  case value2:
    // 当 expression 等于 value2 执行这里的代码
    break;
  default:
  // 如果没有 case 匹配，执行这里的代码
}

while & do…while & for

while 循环: 在条件为真时循环执行代码块。

while (condition) {
  // 只要 condition 为 true，就会执行这段代码
}

do…while 循环: 至少执行一次代码块，然后在条件为真时继续执行。
```
do {
  // 这段代码至少执行一次
} while (condition);
```

for 循环:

for (initialization; condition; final - expression) {
  // 当 condition 为 true，执行这里的代码
}

for…in 循环:

var obj = { a: 1, b: 2, c: 3 };
for (var prop in obj) {
  // 对象的每个属性都会执行一次
  console.log("obj." + prop + " = " + obj[prop]);
}

for…of 循环:

var iterable = [10, 20, 30];
for (var value of iterable) {
  // 数组的每个元素都会执行一次
  console.log(value);
}

函数

函数的定义

函数声明:

function greet(name) {
  return "Hello, " + name + "!";
}

函数表达式:

var greet = function (name) {
  return "Hello, " + name + "!";
};

箭头函数:

const greet = (name) => "Hello, " + name + "!";

函数的调用

直接调用:
```
greet("Alice");
```

使用 call/apply/bind 方法调用:

call:
```
greet.call(null, "Alice");
```
apply:
```
greet.apply(null, ["Alice"]);
```

bind:

var boundGreet = greet.bind(null, "Alice");
boundGreet();

嵌套函数

函数内部定义另外的函数

function outer() {
  var outerVar = "I'm outside!";
 
  function inner() {
    console.log(outerVar);
  }
 
  return inner;
}
 
var getInner = outer();
getInner(); // 输出："I'm outside!"

内置函数

Global 函数 (如 parseInt(), parseFloat())JS 内置函数

var number = parseInt("10");
var floatNumber = parseFloat("10.01");

宿主环境提供的函数 (如 alert(), setTimeout())

alert("显示警告框");
setTimeout(function () {
  alert("3秒后显示");
}, 3000);

🪴 Obsidian Publish

探索