JavaScript 入门

PPPerryPan2023-10-07techJavaScript Programming

JavaScript 入门

改变HTML内容

getElementById()：查找 id="demo" 的 HTML 元素，并把元素内容（innerHTML）更改为 "Hello JavaScript"：
- PS：部分情况下，单引号和双引号可混用
```
document.getElementById("demo").innerHTML = 'Hello JavaScript';
```

Data() 函数体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS_Date()</title>
</head>
<body>
    <button onclick="document.getElementById('text').innerHTML = Date()">Get System Time</button>

    <p id="text"></p>
</body>
</html>

更改IMG标签的src属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change IMG.src</title>
</head>
<body>
    <button onclick="document.getElementById('light').src='./img/eg_bulbon.gif'">开灯</button>
    <img id="light" src="./img/eg_bulboff.gif">
    <button onclick="document.getElementById('light').src='./img/eg_bulboff.gif'">关灯</button>

</body>
</html>

更改HTML的CSS：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change HTML.CSS</title>
</head>
<body>
    <button onclick="document.getElementById('text').style.fontSize='25px'">Change Font Size</button>
    <button onclick="document.getElementById('text').style.display='none'">Hide Text</button>
    <button onclick="document.getElementById('text').style.display='block'">Display Text</button>
    <p id="text">This is a Text</p>
</body>
</html>

使用方法

在<head>中使用

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use JavaScript</title>
    <script>
        function myfun() {
            document.getElementById("text").innerHTML = "段落被更改";
            document.getElementById("text").style.fontSize = "25px";
            document.getElementById("text").style.color = "red";
        }
    </script>
</head>

<body>
    <button onclick="myfun()">更改段落内容</button>
    <p id="text">段落1</p>
</body>

</html>

在<Body>中使用

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use JavaScript</title>

</head>

<body>
    <button onclick="myfun()">更改段落内容</button>
    <p id="text">段落1</p>

    <script>
        function myfun() {
            document.getElementById("text").innerHTML = "段落被更改";
            document.getElementById("text").style.fontSize = "25px";
            document.getElementById("text").style.color = "red";
        }
    </script>
    
</body>

</html>

外部引用 JavaScript

优势：

分离了 HTML 和代码
使 HTML 和 JavaScript 更易于阅读和维护
已缓存的 JavaScript 文件可加速页面加载

<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Use JavaScript</title>
    <script src="./script/4_Use_JS.js"></script>

</head>

<body>
    <button onclick="myfun()">更改段落内容</button>
    <p id="text">段落1</p>

</body>

</html>

function myfun() {
    document.getElementById("text").innerHTML = "段落被更改";
    document.getElementById("text").style.fontSize = "25px";
    document.getElementById("text").style.color = "red";
}

输出

innerHTML 写入HTML元素

<body>
    <h1>innerHTML</h1>
    <div>Line 1</div>
    <div>Line 2</div>
    <div id="text"></div>
    <script>
        document.getElementById("text").innerHTML = "Line 3";
    </script>
</body>

document.write() 写入HTML输出

<body>
    <h1>document.write</h1>
    <script>
        document.write("Line 1, but not quite Line 1");
    </script>
</body>

**注：**在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ,通常仅用于测试

<body>
    <h1>document.write</h1>
    <script>
        document.write("Line 4, but not quite Line 4");
    </script>
    <br><br><br>
    <button type="button" onclick="document.write(5 + 6)">测试</button>
</body>

console.log() 写入浏览器控制台

<script>
    console.log("这是一条输出，当然 也可以进行计算等操作，如 5 + 6 的结果 如下所示;");
    console.log(5 + 6);
</script>

window.alert() 写入警告框

<button onclick="window.alert('这是一个弹窗, 5 + 6 的结果是：' + (5 + 6) )">弹出警告</button>

语句

构成：值、运算符、表达式、关键词、注释

如，以下语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello World."：

document.getElementById("demo").innerHTML = "Hello World.";

实例：

<script>

var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 11;        // 语句 3
z = x + y;    // 语句 4

document.getElementById("demo").innerHTML =
"z 的值是" + z   

</script>

JavaScript 关键词

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

变量

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

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

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

数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 "Bill Gates"。

在编程中，文本值被称为字符串。

JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。

如果把数值放在引号中，会被视作文本字符串。

变量的声明

关键字：var

<p id="demo"></p>

<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName; 
</script>

一条语句中可以声明多个变量

var person = "Bill Gates", carName = "porsche", price = 15000;

甚至可以跨行

var person = "Bill Gates",
carName = "porsche",
price = 15000;

当变量没有被赋值时，默认值未undefined

如果一个变量被声明了两次，值不会丢失。（特殊情况见下“作用域”）：

var Name = "Perry";
var Name; 
// Name 值为 6

作用域

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

let 和 const 的出现，提供了块作用域（Block Scope）变量（和常量）。

全局作用域：在函数外定义

函数作用域：在函数内定义，只在函数体内有效

块作用域：在 ES2015 之前，JavaScript 是没有块作用域的

通过 var 关键词声明的变量没有块作用域。在块 {} 内声明的变量可以从块之外进行访问。
```
{ 
  var x = 10; 
}
// 此处可以使用 x
```
可以使用 let 关键词声明拥有块作用域的变量，在块 {} 内声明的变量无法从块外访问。
```
{ 
  let x = 10;
}
// 此处不可以使用 x
```

重新声明变量

使用 var 关键字重新声明变量会带来问题。如在块中重新声明变量也将重新声明块外的变量：

var x = 10;
// 此处 x 为 10
{ 
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

循环作用域

在循环中使用 var

var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

在循环中使用 val

let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7

函数作用域

在函数内声明变量时，使用 var 和 let 很相似，具有相同的作用域。

function myFunction() {
  var carName = "porsche";   // 函数作用域
}
function myFunction() {
  let carName = "porsche";   // 函数作用域
}

全局作用域

在块外声明声明， var 和 let 也很相似。具有相同的作用域

var x = 10;       // 全局作用域
let y = 6;       // 全局作用域

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

var Name = "porsche";
// 此处的代码可使用 window.Name

通过 let 关键词定义的全局变量不属于 window 对象：

let carName = "porsche";
// 此处的代码不可使用 window.carName

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

var x = 10;

// 现在，x 为 10
 
var x = 6;

// 现在，x 为 6

不同的作用域或块中，通过 let 重新声明变量是允许的：

let x = 6;       // 允许

{
  let x = 7;   // 允许
}

{
  let x = 8;   // 允许
}

在相同的作用域，或在相同的块中：

不可通过 let 重新声明一个 var 变量：

var x = 10;       // 允许
let x = 6;       // 不允许

{
  var x = 10;   // 允许
  let x = 6;   // 不允许
}

不可通过 var 重新声明一个 let 变量：

let x = 10;       // 允许
var x = 6;       // 不允许

{
  let x = 10;   // 允许
  var x = 6;   // 不允许
}

提升

通过 var 声明的变量会提升到顶端，可以在声明变量之前就使用它：

// 在此处，您可以使用 carName
var carName;

<p>使用 <b>var</b>，您可以在声明之前使用变量：</p>

<p id="text"></p>

<script>
Name = "Perry";										// 在定义前使用
document.getElementById("text").innerHTML = Name;	// 在定义前使用
var Name;
</script>

通过 let 定义的变量不会被提升到顶端。在声明 let 变量之前就使用它会导致 ReferenceError。

变量从块的开头一直处于“暂时死区”，直到声明为止：

// 在此处，您不可以使用 carName
let carName;

Const

Const修饰的变量不可在被二次赋值，且必须要在声明时赋值

const PI = 3.141592653589793;
PI = 3.14;      // 会出错
PI = PI + 10;   // 也会出错

块作用域

块作用域内使用 const 声明的变量与 let 变量相似。

var x = 10;
// 此处，x 为 10
{ 
  const x = 6;
  // 此处，x 为 6
}
// 此处，x 为 10

Const对象可更改

// 您可以创建 const 对象：
const person1 = {sex:"man", tall:"180", weight:"65kg"};

// 您可以更改属性：
person1.tall = "181";

// 您可以添加属性：
person1.name = "John";

但不能为常量对象赋值：

const person1 = {sex:"man", tall:"180", weight:"65kg"};
person1 = {sex:"female", tall:"170", weight:"55kg"};	// Error

常量数组可更改

// 您可以创建常量数组：
const name = ["John", "Kali", "Lisa"];

// 您可以更改元素：
name[0] = "Gill";

// 您可以添加元素：
name.push("Ben");

同样，不能为常量数组赋值

const name = ["John", "Kali", "Lisa"];
name = ["Ben", "Gill", "Li"]	// Error

重新声明

同一作用域或块中：

不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

var x = 2;         // 允许
const x = 2;       // 不允许
{
  let x = 2;     // 允许
  const x = 2;   // 不允许
}

不允许为已有的 const 变量重新声明声明或赋值

const x = 2;       // 允许
const x = 3;       // 不允许
x = 3;             // 不允许
var x = 3;         // 不允许
let x = 3;         // 不允许

{
  const x = 2;   // 允许
  const x = 3;   // 不允许
  x = 3;         // 不允许
  var x = 3;     // 不允许
  let x = 3;     // 不允许
}

在另外的作用域或块中重新声明 const 是允许的：

const x = 2;       // 允许

{
  const x = 3;   // 允许
}

{
  const x = 4;   // 允许
}

提升

通过 const 定义的变量不会被提升到顶端，必须先声明，后使用

Name = "John";    // 您不可以在此处使用 carName
const Name = "John";

运算符

算数运算符

运算符	描述
+	加法
-	减法
*	乘法
**	幂（ES2016open in new window）
/	除法
%	系数
++	递增
--	递减

赋值运算符

运算符	例子	等同于
=	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
>>=	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
**= (ES7)	x **= y	x = x ** y

字符串运算符

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

text1 = "Hello";
text2 = "World";
text3 = txt1 + " " + txt2; 
// 结果： text3 = Hello World

+= 赋值运算符也可用于相加（级联）字符串。

text1 = "Hello ";
text1 += "World!"; 
// 结果： text1 = HelloWorld!

字符和数字相加

x = 7 + 8;
y = "7" + 8;
z = "Hello" + 7;

// 结果：
15
78
Hello7

比较运算符

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

逻辑运算符

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

类型运算符

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

typeof 运算符

typeof ""                  	// 返回 "string"
typeof "Bill"              	// 返回 "string"
typeof "Bill Gates"         // 返回 "string"

typeof 0                   	// 返回 "number"
typeof 314                 	// 返回 "number"
typeof 3.14                	// 返回 "number"
typeof (7)                 	// 返回 "number"
typeof (7 + 8)             	// 返回 "number"

var cars = ["Porsche", "Volvo", "BMW"];
typeof(cars)			   // 返回 "object"，因为在 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

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

详见后面的章节 “JS位运算” 部分

运算符优先级

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)

19	.	成员	person.name
19	[]	成员	person["name"]
19	()	函数调用	myFunction()
19	new	创建	new Date()

17	++	后缀递增	i++
17	--	后缀递减	i--

16	++	前缀递增	++i
16	--	前缀递减	--i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x

15	**	求幂 (ES7)	10 ** 2

14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5

13	+	加	10 + 5
13	-	减	10 - 5

12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2

11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	"PI" in Math
11	instanceof	对象的实例	instanceof Array

10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y

9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	\|	按位或	x \| y
6	&&	逻辑与	x && y
5	\|\|	逻辑否	x \|\| y
4	? :	条件	? "Yes" : "No"

3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	\|=	赋值	x \|= y

2	yield	暂停函数	yield x
1	,	逗号	7 , 8

数据类型

字符串值，数值，布尔值，数组，对象。

var length = 7;                             	// 数字
var lastName = "Gates";                      	// 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};   // 对象

当数值和字符串相加时，JavaScript 将把数值视作字符串

var x = 911 + "Porsche";
// 结果：911Porsche

var x = "Porsche" + 911;
// 结果：Porsche911

JavaScript 从左向右计算表达式。不同的次序会产生不同的结果

var x = 911 + 7 + "Porsche";
// 结果：918Porsche	（ 把 911 和 7 视作数值，直到遇见 "Porsche"）

var x = "Porsche" + 911 + 7;
// 结果：Porsche9117	（由于第一个操作数是字符串，因此所有操作数都被视为字符串。）

动态类型：相同变量可用作不同类型

var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值

数值

JavaScript 只有一种数值类型，写数值时用不用小数点均可：

var x1 = 34.00;     // 带小数点
var x2 = 34;        // 不带小数点

超大或超小的数值可以用科学计数法来写：

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123

布尔值

布尔值只有两个值：true 或 false。

var x = true;
var y = false;

数组

JavaScript 数组用方括号书写，数组的项目由逗号分隔。

var cars = ["Porsche", "Volvo", "BMW"];

对象

JavaScript 对象用花括号来书写，对象属性是 name:value 对，由逗号分隔。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

"空值" , "undefined", “Null”

没有值的变量，其值是 undefined。typeof 也返回 undefined

var person;                  // 值是 undefined，类型是 undefined。

任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。

person = undefined;          // 值是 undefined，类型是 undefined。

但空值与 undefined 不是一回事，空的字符串变量既有值也有类型。

var car = "";                // 值是 ""，类型是 "string"

在 JavaScript 中，null 是 "nothing"。它被看做不存在的事物，不幸的是，在 JavaScript 中，null 的数据类型是对象。

可以通过设置值为 null或undefined 清空对象：

var person = null;           // 值是 null，但是类型仍然是对象
var person = undefined;           // 值是 undefined，类型是 undefined。

注：Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefined
typeof null                   // object
null === undefined            // false
null == undefined             // true

数据类型实例

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (假如 x 没有值)

typeof {name:'Bill', age:62} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object" (并非 "array"，因为在 JavaScript 中，数组即对象)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

JavaScript 入门

ON THIS PAGE