JavaScript学习笔记

JavaScript

目录

• JavaScript
  • • 1 JavaScript 输出
      • 1.1 使用 innerHTML
      • 1.2 使用 document.write()
      • 1.3 使用 window.alert()
      • 1.4 使用 console.log()
      • 1.5 JavaScript 打印
    • 2 JavaScript语句
      • 2.1 分号分隔 JavaScript 语句
      • 2.2 JavaScript 空白字符
      • 2.3 JavaScript 行长度和折行
      • 2.4 JavaScript 代码块
      • 2.5 JavaScript 关键词
    • 3 JavaScript 语法
      • 3.1 值
        • 3.1.1 字面量
        • 3.1.2 变量
      • 3.2 运算符
      • 3.3 表达式
      • 3.4 注释
      • 3.5 标识符
      • 3.6 对大小写敏感
      • 3.7 JavaScript与驼峰式大小写
      • 3.8 字符集
    • 4 JavaScript变量
      • 4.1 用 var 关键字声明变量
      • 4.2 标识符
      • 4.3 数据类型
      • 4.4 一条语句，多个变量
      • 4.5 $ 美元符号
      • 4.6 下划线 (_)
    • 5 JavaScript运算符
      • 5.1 算数运算符
      • 5.2 赋值运算符
      • 5.3 字符串运算符
      • 5.4 字符串和数字的相加
      • 5.5 比较运算符
      • 5.6 逻辑运算符
      • 5.7 类型运算符
      • 5.8 位运算符

1 JavaScript 输出

JavaScript 能够以不同方式"显示"数据：

• 使用 window.alert() 写入警告框
• 使用 document.write() 写入 HTML 输出
• 使用 innerHTML 写入 HTML 元素
• 使用 console.log() 写入浏览器控制台

1.1 使用 innerHTML

如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。

id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：

1.2 使用 document.write()

出于测试目的，使用 document.write() 比较方便：

在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：

创建了一个按钮并定义了一个点击事件。当点击按钮时，会执行document.write(5 + 6)的代码

1.3 使用 window.alert()

您能够使用警告框来显示数据：

可以跳过 window 关键字。在JavaScript中，窗口对象是全局范围对象，默认情况下变量、属性和方法属于窗口对象。这也意味着window关键字是可选的

1.4 使用 console.log()

出于调试目的，您可以在浏览器中调用 console.log() 方法来显示数据。在控制台查看

1.5 JavaScript 打印

JavaScript 没有任何打印对象或打印方法。

无法从 JavaScript 访问打印设备。

唯一的例外是您可以调用 window.print() 方法打印当前窗口的内容。

这段代码是一个HTML按钮元素，点击按钮时触发window.print()函数，用于打印当前页面。

2 JavaScript语句

• <p id="demo"></p>：这是一个<p>标签，它表示一个段落。该段落具有id属性，属性值为"demo"。这个id属性可以用于在JavaScript代码中引用这个段落元素。

JavaScript部分：

• document.getElementById("demo")：这是一个JavaScript的DOM操作，通过getElementById方法获取具有id属性值为"demo"的元素。
• .innerHTML = "Hello Dolly.";：这是将指定元素的innerHTML属性设置为字符串"Hello Dolly."的语句。innerHTML属性允许访问元素的内部HTML内容，并可以修改它。在这种情况下，它将段落元素的内容设置为"Hello Dolly."，所以当被浏览器渲染时，段落中将显示文字内容为"Hello Dolly."。

2.1 分号分隔 JavaScript 语句

请在每条可执行的语句之后添加分号：

`var x, y, z;`  //  表示声明创建x, y, z三个变量

2.2 JavaScript 空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。

var person = "Hege"; 等同于 var person="Hege"; （二者空格数量不同）

好习惯：在运算符旁边（ = + - * / ）添加空格

2.3 JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：

2.4 JavaScript 代码块

JavaScript 语句可以用花括号（{...}）组合在代码块中。

代码块的作用是定义一同执行的语句。

2.5 JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

3 JavaScript 语法

var x, y, z;    // 声明变量   创建变量
x = 5; y = 6;   // 赋值
z = x + y;     // 计算值

3.1 值

JavaScript 语句定义两种类型的值：

• 混合值(被称为字面量（literal）)
• 变量值(被称为变量)

3.1.1 字面量

在编程语言中，一般固定值称为字面量。固定值的两个最重要的语法规则是：

• 写数值有无小数点均可：
• 字符串是文本，由双引号或单引号包围：

3.1.2 变量

在编程语言中，变量用于存储数据值。

• JavaScript 使用 var 关键词来声明变量。
• "="号用于为变量赋值。

3.2 运算符

• JavaScript使用算数运算符（+ - * /）来计算值：
• JavaScript 使用赋值运算符（=）向变量赋值：

3.3 表达式

表达式是值、变量和运算符的组合，计算结果是值。这种计算称为评估。

3.4 注释

• 并非所有 JavaScript 语句都被"执行"。
• 双斜杠 // 或 /* 与 / 之间的代码被视为注释*，不执行。

单行注释：以 // 开头，任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

多行注释：以 /* 开头，以/结尾，任何位于 / 和 */ 之间的文本都会被 JavaScript 忽略。

3.5 标识符

• 标识符是名称。
• 在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
• 在大多数编程语言中，合法名称的规则大多相同。
• 在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
• 连串的字符可以是字母、数字、下划线或美元符号。

3.6 对大小写敏感

• 所有 JavaScript 标识符对大小写敏感。
• 变量 lastName 和 lastname，是两个不同的变量。
• JavaScript 不会把 VAR 或 Var 译作关键词 var

3.7 JavaScript与驼峰式大小写

连字符“-”：

first-name, last-name, master-card, inter-city.

注释： JavaScript 中不能使用连字符。它是为减法预留的。

下划线：

first_name, last_name, master_card, inter_city.

大写字母开头的驼峰:

FirstName, LastName, MasterCard, InterCity.

小写字母开头的驼峰:

JavaScript程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity.

3.8 字符集

• JavaScript 使用 Unicode 字符集。
• Unicode 覆盖世界上几乎所有的字符、标点和符号。

注释：Unicode是一种用于表示和处理文本的国际标准。它定义了字符的编码方案，为世界上几乎所有的语言和符号分配了唯一的数字代码。每个字符都被赋予一个称为"码点"的唯一整数值，并可以通过不同的编码方案进行表示，如UTF-8、UTF-16和UTF-32等。

4 JavaScript变量

4.1 用 var 关键字声明变量

给变量赋值的时候，可以赋数值和字符串。

4.2 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

4.3 数据类型

• JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。
• JavaScript 变量可存放数值，比如 100；以及文本值，比如 "Bill Gates"。
• 在编程中，文本值被称为字符串。字符串被包围在双引号或单引号中
• 数值不用引号。如果把数值放在引号中，会被视作文本字符串。

4.4 一条语句，多个变量

可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "John Doe", carName = "Volvo", price = 200;

声明可横跨多行：

var person = "John Doe",
carName = "Volvo",
price = 200;

Value = undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

变量 carName 在这条语句执行后的值是 undefined：

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 "Volvo"：

4.5 $ 美元符号

JavaScript标识符（名称）必须以以下开头:

• 字母 (A-Z 或 a-z)
• 美元符号 ($)
• 或者下划线 (_)

由于JavaScript将美元符号视为字母，因此包含 $ 的标识符是有效的变量名:

使用 $ 美元符号在JavaScript中并不常见，专业程序员经常将其用作JavaScript库中主函数的别名。

4.6 下划线 (_)

由于 JavaScript 将下划线视为字母，因此包含下划线 (_) 的标识符是有效的变量名:

5 JavaScript运算符

5.1 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
**	Exponentiation (ES2016)
/	除法
%	取模（余数）
++	自增
--	自减

5.2 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
**=	x **= y	x = x ** y

加法赋值运算符（+=）向变量添加一个值。

5.3 字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。

5.4 字符串和数字的相加

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

5.5 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

5.6 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

5.7 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

5.8 位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2