网站

JavaScript 教程

JavaScript | MDN

引入

JavaScript 用来控制网页的交互和逻辑。学习 JS 之前,先要知道它的基础写法,比如语句怎么写、注释怎么写、代码按什么顺序执行。

基础语法不复杂,但它会影响后面写变量、函数、DOM 操作和事件处理。

正文

定义

定义

JS 基础语法就是 JS 代码最基本的书写规则,包括语句、注释、大小写、代码块和执行顺序。

JS 代码通常由一条一条语句组成,浏览器会按照代码出现的顺序从上往下执行。

语句

语句就是 JS 中一条完整的操作。

let name = "Tom";
console.log(name);

这里有两条语句:

  • let name = "Tom";:声明变量并保存数据
  • console.log(name);:在控制台输出变量内容

语句结尾建议写分号 ;,这样结构更清楚,也能减少一些不必要的问题。

注释

注释是写给人看的,浏览器执行代码时会忽略注释。

单行注释

// 这是单行注释
let age = 18;

多行注释

/*
  这是多行注释
  可以写多行说明
*/
let age = 18;

注释适合用来说明代码目的,但不要把每一行都解释一遍。

大小写

JS 是区分大小写的。

let name = "Tom";
let Name = "Jerry";
 
console.log(name);
console.log(Name);

nameName 是两个不同的变量。

常见错误:

let userName = "Tom";
 
console.log(username);

上面代码中,userNameusername 大小写不同,会导致找不到变量。

代码块

代码块通常使用 {} 包起来,表示一组代码。

if (true) {
  console.log("条件成立");
}

以后学习 ifforfunction 时,经常会看到代码块。

执行顺序

JS 默认会按照代码出现顺序,从上往下执行。

console.log("第一步");
console.log("第二步");
console.log("第三步");

输出顺序就是:

  1. 第一步
  2. 第二步
  3. 第三步

如果代码依赖前面创建的变量,就要注意先后顺序。

let title = "学习 JS";
console.log(title);

不能在变量声明之前随便使用它。

console.log(title);
let title = "学习 JS";

这种写法容易报错,因为代码执行到 console.log(title); 时,title 还没有完成声明。

输出内容

学习 JS 时,最常用的调试方式是 console.log()

console.log("Hello JS");
console.log(100);
console.log(true);

console.log() 会把内容输出到浏览器控制台,适合查看变量值和代码执行结果。

配合 HTML 使用

JS 经常和 HTML 一起使用,用来控制页面内容。

<p class="text">原来的内容</p>
const text = document.querySelector(".text");
text.textContent = "修改后的内容";

这段代码的意思是:先找到页面中 classtext 的元素,再修改它的文本内容。

如果 JS 执行太早,HTML 元素还没有加载出来,就可能找不到元素。

常见写法

写法作用
// 注释单行注释
/* 注释 */多行注释
console.log()在控制台输出内容
let name = "Tom";声明变量并保存数据
{}表示一个代码块
;表示一条语句结束

特点

  • JS 代码由一条一条语句组成
  • 语句结尾建议写分号 ;
  • JS 区分大小写
  • 注释不会被浏览器执行
  • {} 通常用来包裹一组代码
  • JS 默认从上往下执行
  • 如果代码依赖页面元素,要注意 HTML 是否已经加载完成

理解

JS 基础语法可以理解为写 JS 的基本规矩。

先知道语句怎么写、注释怎么写、代码怎么执行,后面学习变量、函数、对象、DOM 和事件时才不会混乱。

我理解 JS 的基础写法重点不是背概念,而是养成清楚的代码习惯:名字写对、顺序写对、需要调试时用 console.log() 看结果。

引出

理解了基础语法之后,就可以继续学习 JS 变量,用变量保存和使用数据。

后续再结合 JS 函数JS DOM APIJS 事件,就可以让网页根据用户操作发生变化。