JavaScript 学习笔记

dmr · 发表于 2026-6-25 17:46:51

1.JavaScript改变html元素标签值

<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>

复制代码

2.JavaScript改变 HTML 属性值

<button onclick="document.getElementById('myImage').src='/img/bg.gif'">改变状态</button>

复制代码

3.JavaScript改变 HTML 样式 (CSS)

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">点击我！</button>

复制代码

4.JavaScript 显示隐藏的 HTML 元素

<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">点击我！</button>

复制代码

5.JavaScript 使用

①.<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

<script>
document.getElementById("demo").innerHTML = "hello JavaScript!";
</script>

复制代码

②.JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。

③.外部脚本

脚本可放置与外部文件中。

<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>

复制代码

6.JavaScript 输出

JavaScript 显示方案

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

使用 window.alert() 写入警告框

window.alert(5 + 6);//弹出框展示11

复制代码

使用 document.write() 写入 HTML 输出

document.write(5 + 6);//输出11

复制代码

使用 innerHTML 写入 HTML 元素

document.getElementById("demo").innerHTML = 5 + 6;//<span style="background-color: rgb(255, 255, 255);">输出：11</span>

复制代码

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

console.log(5 + 6);

复制代码

JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注意：在 HTML 中，JavaScript 程序由 web 浏览器执行。

avaScript 语句

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty."：

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

复制代码

大多数 JavaScript 程序都包含许多 JavaScript 语句。

这些语句会按照它们被编写的顺序逐一执行。

注意：JavaScript 程序（以及 JavaScript 语句）常被称为 JavaScript 代码。

分号 ;
分号分隔 JavaScript 语句。

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

a = 5;
b = 6;
c = a + b;

复制代码

如果有分号分隔，允许在同一行写多条语句：

a = 5; b = 6; c = a + b;

复制代码

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

JavaScript 代码块

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

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

您会在 JavaScript 中看到成块组合在一起的语句：

实例

function myFunction() {
document.getElementById("demo").innerHTML = "Hello Kitty.";
document.getElementById("myDIV").innerHTML = "How are you?";
}

复制代码

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

下面的表格列出了一部分将在教程中学到的关键词：

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

注意：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

7.JavaScript 语法

JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。

var x, y;       // 如何声明变量
x = 7; y = 8;       // 如何赋值
z = x + y;       // 如何计算值

①.JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。

JavaScript 字面量
书写混合值最重要的规则是：

写数值有无小数点均可：

15.90
10011

复制代码

字符串是文本，由双引号或单引号包围：

"Bill Gates"

'Bill Gates'

②.JavaScript 变量

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

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。

在本例中，x 被定义为变量。然后，x 被赋的值是 7：

var x;

x = 7;

③.JavaScript 运算符

JavaScript 使用算数运算符（+ - * /）来计算值：(7 + 8) * 10

JavaScript 使用赋值运算符（=）向变量赋值：
var x, y;
var x = 7;
var y = 8;

④.JavaScript 表达式
表达式是值、变量和运算符的组合，计算结果是值。

6 * 10

复制代码

表达式也可包含变量值：

x * 10

复制代码

值可以是多种类型，比如数值和字符串。

例如，"Bill" + " " + "Gates"，计算为 "Bill Gates"：

"Bill" + " " + "Gates"

复制代码

⑤.JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量：

var x = 7 + 8;
var y = x * 10;

复制代码

⑥.JavaScript 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

注释会被忽略，不会被执行：

var x = 7; // 会执行
// var x = 8; 不会执行

复制代码

⑦.JavaScript 标识符

标识符是名称。

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。

在大多数编程语言中，合法名称的规则大多相同。

在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。

连串的字符可以是字母、数字、下划线或美元符号。

提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

⑧.JavaScript 对大小写敏感

所有 JavaScript 标识符对大小写敏感。

变量 lastName 和 lastname，是两个不同的变量。

lastName = "Gates";
lastname = "Jobs";

复制代码

JavaScript 不会把 VAR 或 Var 译作关键词 var。

⑨.JavaScript 与驼峰式大小写

历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：

连字符：first-name, last-name, master-card, inter-city

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

下划线：first_name, last_name, master_card, inter_city

驼峰式大小写（Camel Case）：FirstName, LastName, MasterCard, InterCity.camelCase

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

firstName, lastName, masterCard, interCity

⑩.JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

8.JavaScript 注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

①.单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

本例在每条代码行之前使用单行注释：

//

复制代码

本例在每行结尾处使用了单行注释来解释代码：

var x = 5; // 声明 x，为其赋值 5
var y = x + 2; // 声明 y，为其赋值 x + 2

复制代码

②.多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

本例使用多行注释（注释块）来解释代码：

/*
代码段
*/

复制代码

③.使用注释来阻止执行

使用注释来防止代码执行很适合代码测试。

在代码行之前添加 // 会把可执行的代码行更改为注释。

本例使用 // 来阻止代码行的执行：

//document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";

复制代码

本例使用注释块来阻止多行代码的执行：

/*
document.getElementById("myH").innerHTML = "我的第一张页面";
document.getElementById("myP").innerHTML = "我的第一个段落。";
*/

复制代码

9.JavaScript 变量

JavaScript 变量是存储数据值的容器。

在本例中，x、y 和 z 是变量：

var x = 7;
var y = 8;
var z = x + y;

复制代码

从上例中，您可获得：

x 存储值 7
y 存储值 8
z 存储值 15

①.类似代数
在本例中，price1、price2 以及 total 是变量：

var price1 = 7;
var price2 = 8;
var price3 = 12;
var total = price1 + price2 + price3;

复制代码

在编程中，类似代数，我们使用变量（比如 price1）来存放值。

在编程中，类似代数，我们在表达式中使用变量（total = price1 + price2）。

从上例中，您可以算出 total 的值是 27。

提示：JavaScript 变量是存储数据值的容器。

②.JavaScript 标识符

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

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

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

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

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

③.赋值运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。

注意：JavaScript 中的“等于”运算符是 ==。

④.JavaScript 数据类型

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

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

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

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

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

var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';

复制代码

⑤.声明（创建） JavaScript 变量

在 JavaScript 中创建变量被称为“声明”变量。

您可以通过 var 关键词来声明 JavaScript 变量：var carName;

声明之后，变量是没有值的。（技术上，它的值是 undefined。）

如需赋值给变量，请使用等号：

carName = "porsche";
您可以在声明变量时向它赋值：

var carName = "porsche";
在上面的例子中，我们创建了名为 carName 的变量，并向其赋值 "porsche"。

然后，我们在 id="demo" 的 HTML 段落中“输出”该值：

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

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

提示：在脚本的开头声明所有变量是个好习惯！

⑥.一条语句，多个变量

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

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

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

声明可横跨多行：

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

⑦.Value = undefined

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

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

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

实例
var carName;

⑧.重复声明 JavaScript 变量

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

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

实例
var carName = "porsche";
var carName;

⑨.JavaScript 算术
与代数类似，您能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符：

实例:var x = 3 + 5 + 8;

字符串也可以使用加号，但是字符串将被级联：var x = "Bill" + " " + "Gates";

实例
var x = "8" + 3 + 5;//结果是字符串

提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

10.JavaScript Let

ECMAScript 2015
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

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

①.全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

var carName = "porsche";

// 此处的代码可以使用 carName

function myFunction() {
  // 此处的代码也可以使用 carName
}

全局变量可以在 JavaScript 程序中的任何位置访问。

②.函数作用域

局部（函数内）声明的变量拥有函数作用域。

// 此处的代码不可以使用 carName

function myFunction() {
  var carName = "porsche";
  // code here CAN use carName
}

// 此处的代码不可以使用 carName

备注：局部变量只能在它们被声明的函数内访问。

③.JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

{
var x = 10;
}
// 此处可以使用 x

复制代码

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

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

{
let x = 10;
}
// 此处不可以使用 x

复制代码

④.重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：
var x = 10;
// 此处 x 为 10
{
  var x = 6;
  // 此处 x 为 6
}
// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

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

⑤.循环作用域

在循环中使用 var：
var i = 7;
for (var i = 0; i < 10; i++) {
  // 一些语句
}
// 此处，i 为 10

在循环中使用 let：
let i = 7;
for (let i = 0; i < 10; i++) {
  // 一些语句
}
// 此处 i 为 7
在第一个例子中，在循环中使用的变量使用 var 重新声明了循环之外的变量。

在第二个例子中，在循环中使用的变量使用 let 并没有重新声明循环外的变量。

如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。

⑥.函数作用域

在函数内声明变量时，使用 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 carName = "porsche";
// 此处的代码可使用 window.carName

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

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

⑨.重新声明

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

var x = 10;

// 现在，x 为 10

var x = 6;

// 现在，x 为 6
在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：
var x = 10;    // 允许
let x = 6;    // 不允许

{
  var x = 10; // 允许
  let x = 6; // 不允许
}
在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：
let x = 10;    // 允许
let x = 6;    // 不允许

{
  let x = 10; // 允许
  let x = 6; // 不允许
}
在相同的作用域，或在相同的块中，通过 var 重新声明一个 let 变量是不允许的：
let x = 10;    // 允许
var x = 6;    // 不允许

{
  let x = 10; // 允许
  var x = 6; // 不允许
}
在不同的作用域或块中，通过 let 重新声明变量是允许的：
let x = 6;    // 允许

{
  let x = 7; // 允许
}

{
  let x = 8; // 允许
}

⑩.提升

通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting），请学习我们的提升这一章。

您可以在声明变量之前就使用它：

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

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError。

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

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

11.JavaScript Const

ECMAScript 2015
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

通过 const 定义的变量与 let 变量类似，但不能重新赋值：
const PI = 3.141592653589793;
PI = 3.14;    // 会出错
PI = PI + 10; // 也会出错

①.

②.

③.

④.

⑤.

⑥.

⑦.

⑧.

⑨.

⑩.

微信扫一扫，分享更方便