Skip to content

JavaScript 基本语法与变量(Day1 2/3) ​

本页对应 Day01_JavaScript,共 7 段视频,约 1 小时 26 分。

学习目标 ​

  • 能正确写出 JS 单行注释和多行注释,并说明两者分别能注释的范围。
  • 能使用分号或换行作为语句结束符编写多条语句,并能在控制台识别缺少结束符导致的语法错误。
  • 能通过示例说明 JS 严格区分大小写,并区分语法错误与运行错误对代码执行的影响。
  • 能使用 alert、document.write、console.log 三种方式输出内容,并说明各自适用场景。
  • 能使用 var 完成变量的声明、赋值、修改和引用,正确区分未赋值变量与未声明变量的使用结果。
  • 能按变量命名规范声明合法变量名,并使用 typeof 判断 number、string、boolean、null、undefined 等数据类型,说明 null 判断为 object 的特殊情况。

知识点 ​

JavaScript 注释:让代码可读,也方便临时停用 ​

为什么需要:代码是写给人看的,注释能解释意图,也能在调试时临时屏蔽代码。怎么想:先分清单行和多行,再注意注释范围。怎么做:

js
// 单行注释,可注释半行
var x = 1; // 本行后面的内容被注释
/*
  多行注释
  可包住多行代码
*/

易错点:// 只作用于本行;多行注释必须有 /* 和 */。转写稿强调,注释作用仍是解释说明或临时停用,不要用注释掩盖错误。

指令结束符:分号或换行至少选一个 ​

为什么需要:JavaScript 一条条语句要有结束标志,否则解析器难以判断。怎么想:分号是结束符,换行也能结束语句;二者至少选一个。怎么做:

js
alert(100); alert(200); alert(300);
// 或
alert(100)
alert(200)
alert(300)

易错点:既不写分号也不换行,VS Code 会标红,浏览器报语法错误;语法错误会导致一行都不执行。转写稿还说明:分号和换行可同时写,团队有规范就按规范;不写分号与写分号更多是习惯之争。

严格区分大小写:Alert 不等于 alert ​

为什么需要:JavaScript 对大小写敏感,写错大小写就找不到对应函数。怎么想:语法上没错,但运行到该句才报“未定义”。怎么做:

js
alert(100);   // 正常
// Alert(100); // 报错:Alert is not defined

易错点:这类错误不是语法错误,VS Code 不一定提前标红;浏览器会先执行前面的代码,执行到错误处才停下。调试时打开 F12 的 Console 看报错。

三种输出:弹框、页面、控制台 ​

为什么需要:计算后要观察结果,调试时尤其需要输出。怎么想:弹框最直接但打扰;写页面会影响原 HTML 结构;控制台对页面影响最小,最推荐调试用。怎么做:

js
alert(250);
document.write(500);
console.log(666);

易错点:非数字内容要用引号包成字符串;document.write 会写入文档流,可能影响原结构;控制台输出主要给开发者调试,不是给用户看的。

变量语法:先创建,再赋值,使用时不加 var ​

为什么需要:变量给数据起名字,方便多次使用并保证数据一致。怎么想:创建变量用 var;赋值用 =;创建并赋值可合二为一;修改变量或把变量赋给另一个变量时,不再写 var。怎么做:

js
var number01;
number01 = 250;

var number02 = 500;
number02 = 600;
number01 = number02;
console.log(number01); // 600
console.log(number02); // 600

易错点:使用未赋值变量得到 undefined;使用从未创建过的变量会报 is not defined,这是运行错误,执行到才停。转写稿提醒:undefined 表示“存在但没值”,不存在变量则是另一回事。

变量命名规范:合法是底线,有意义是建议 ​

为什么需要:名字乱取,代码一多就混乱;不合法则直接语法错误。怎么想:先保证合法,再追求可读。怎么做:变量名可由字母、数字、下划线、美元符组成,不能数字开头,不能是关键字/保留字;建议用有意义词语和小驼峰。

js
var name;
var _hello;
var $price;
var homeAddress; // 推荐小驼峰
// var 23hello;    // 错:数字开头
// var home-address; // 错:短横线

易错点:纯数字、短横线、关键字都不行;homeAddress 比 a1 更可读。转写稿说关键字不用死记,学完语法后自然认识。

数据类型判断:typeof 的结果是字符串 ​

为什么需要:程序收到的数据可能来自用户、后端或同事函数,不能假设类型一定正确。怎么想:先认识五种原始类型:number、string、boolean、null、undefined;再用 typeof 判断。怎么做:

js
var userName = "高小乐";
var age = 176;
var isActive = true;
var address = null;
var phoneNumber;

console.log(typeof userName);    // string
console.log(typeof age);         // number
console.log(typeof isActive);    // boolean
console.log(typeof address);     // object(历史遗留特殊情况)
console.log(typeof phoneNumber); // undefined
console.log(typeof 250);         // number

易错点:typeof 返回的是字符串,如 "number";typeof null 得到 "object" 是作者设计遗留,不能把 null 当普通对象用;控制台里不同类型显示不同颜色,只是 Chrome 调试工具的便利,程序判断仍要用 typeof。转写稿强调:输出不是判断的必要步骤,演示时输出只是让我们看到结果。

注释:先让代码可读 ​

为什么需要:代码一多,过几天自己也会忘;注释用于解释说明,也可临时屏蔽代码。
怎么想:HTML、CSS、JS 的注释写法不同,写在哪段代码里就用哪套注释。
怎么做:JS 有单行注释 // 和多行注释 /* ... */。

js
// 单行注释
var x = 10; // 行尾注释

/*
  多行注释
  可写多行说明
*/

易错点:// 只注释本行后面的内容;多行注释必须有 /* 和 */,不要漏结束标记。

语句结束符:分号或换行 ​

为什么需要:JS 一条条语句需要让浏览器知道到哪里结束。
怎么想:转写里反复说“指令结束符”,更准确叫“语句结束符”。可用分号,也可用换行;不是空格。
怎么做:下面三条都能执行。

js
alert(100);
alert(200);
alert(300)

易错点:三条语句既不加分号也不换行,会变成语法错误;VS Code 会标红,浏览器一条都不执行。控制台会显示语法错误。实际开发中分号加不加常是团队规范和个人习惯,但换行要保留以保证可读性。

严格区分大小写 ​

为什么需要:JS 中 alert 和 Alert 不是同一个东西。
怎么想:HTML/CSS 对大小写相对宽松,JS 很严格;写错大小写不是语法错误,而是运行到那里才发现变量/函数不存在。
怎么做:正确写法是小写 alert。

js
alert(10);   // 正确
// Alert(10); // ReferenceError: Alert is not defined

易错点:语法错误会让整段代码不执行;运行错误会先执行前面的代码,执行到错误处才停下。

输出内容:调试时看结果 ​

为什么需要:JS 写在页面里不会自动显示,需要输出才能看计算结果。
怎么想:常用三种:弹框、写入页面、控制台。调试最推荐控制台,因为它不影响页面结构。
怎么做:

js
alert(250);
document.write("hello");
console.log(666);

易错点:非数字内容要加引号,如 "hello";document.write 会写入文档流,可能影响原页面结构;console.log 需打开 F12 控制台查看。

变量:给数据起名字 ​

为什么需要:数据可能很长、很复杂,多次使用直接写很麻烦;变量还能保证同一数据被多处使用时保持一致。
怎么想:变量可理解为给数据起名字,也可比喻成装数据的杯子。创建用 var,赋值用 =;使用变量时用的是它的值。
怎么做:

js
var number01;
number01 = 250;

var number02 = 500;
number02 = 600;
number01 = number02;

console.log(number01); // 600
console.log(number02); // 600

易错点:创建变量加 var,使用变量不加。使用没有赋值的变量得到 undefined;使用根本没创建过的变量会报 ReferenceError。

js
var number03;
console.log(number03); // undefined
console.log(number04); // ReferenceError: number04 is not defined

变量命名规范:不能乱取 ​

为什么需要:变量名要合法,也要让别人看得懂。
怎么想:强制规范必须遵守;建议规范尽量遵守。
怎么做:变量名可由字母、数字、下划线、美元符组成,不能以数字开头,不能是关键字或保留字;建议用有意义的名字,多个单词用小驼峰。

js
var name;
var number100;
var _hello;
var $price;
var homeAddress;
// var 23hello; // 语法错误
// var var;     // 关键字不能作变量名

易错点:23hello、纯数字、短横线连接都会报语法错误;var 这类关键字不能当变量名。

typeof:判断数据类型 ​

为什么需要:程序里的数据可能来自用户、后端或同事函数,不能总靠眼睛判断。
怎么想:typeof 是运算符,括号里写要判断的数据,结果是表示类型的字符串。
怎么做:

js
var userName = "hello";
var age = 176;
var isActive = true;
var address = null;
var phoneNumber;

console.log(typeof userName);    // string
console.log(typeof age);         // number
console.log(typeof isActive);    // boolean
console.log(typeof address);     // object(历史遗留)
console.log(typeof phoneNumber); // undefined
console.log(typeof "number");    // string

易错点:typeof null 返回 "object",这是历史遗留特点,不代表 null 是对象;typeof 的结果本身是字符串,所以 typeof "number" 得到 "string"。控制台里不同类型显示不同颜色只是浏览器调试工具的便利,不是程序判断依据。

数据类型总览:先分清“原始类型”和“对象类型” ​

为什么需要:写 JS 最终是在处理数据。先知道数据有哪些类型,才能判断一个值能不能运算、该不该转换、输出时是什么样子。
怎么想:转写稿把类型分成两类:原始类型(基本类型)较简单,对象类型(复合类型)较复杂。本节先聚焦五种原始类型:number、string、boolean、null、undefined。对象类型如数组、函数、日期等后续再学。
怎么做:先记住五种原始类型的字面样子,再用 typeof 判断。
易错点:null 和 undefined 都表示“空/没有”的味道,但它们是两个类型;不要一上来把对象类型混进来死记。

直接量与变量:数据可以直接写,也可以起名字 ​

为什么需要:直接写 250、"hello" 能表示数据,但同一个复杂数据多次使用时,反复写很累,也容易不一致。
怎么想:直接量就是“直接把数据表示出来”;变量是“给数据取名字”,以后用名字代表数据。也可以把变量想成装数据的杯子。
怎么做:

js
var x = 400;
console.log(x);        // 400
console.log(156);      // 直接量
console.log("hello");  // 字符串直接量要加引号

创建变量用 var,赋值用 =;修改值、把变量赋给另一个变量时不再写 var。
易错点:变量名不加引号;字符串不加引号会被当成变量名。var number01; 只是创建,没有值;使用未赋值变量得到 undefined,使用根本没创建过的变量会报“is not defined”。

五种原始类型与 typeof 判断 ​

为什么需要:程序里的数据可能来自用户输入、后端接口或同事的函数,不能总靠眼睛看,要用程序判断类型。
怎么想:typeof 是一个运算符,括号里写要判断的数据,计算结果是一个字符串。注意绕脑点:typeof 250 得到 "number",而 "number" 本身是字符串,所以 typeof typeof 250 得到 "string"。
怎么做:

js
var userName = "高乐";
var age = 176;
var isActive = true;
var address = null;
var phoneNumber;

console.log(typeof userName);    // string
console.log(typeof age);         // number
console.log(typeof isActive);    // boolean
console.log(typeof address);     // object(历史遗留特例)
console.log(typeof phoneNumber); // undefined

易错点:typeof null 返回 "object",这是历史遗留问题,不能因此把 null 当对象用;typeof undefined 返回 "undefined"。控制台里不同类型颜色不同,那是调试工具的显示福利,不是程序判断依据。

三种输出方式:弹框、页面、控制台 ​

为什么需要:代码算完要查看结果,调试时必须能把数据输出出来。
怎么想:弹框最直观但打扰用户;写页面会影响原有 HTML 结构;控制台对页面影响最小,最适合调试。
怎么做:

js
alert(250);
document.write(500);
console.log(600);

alert 输出到弹框,document.write 写入文档流,console.log 输出到控制台。
易错点:document.write 会插入页面,不能随便乱用;console.log 里可以写变量、直接量,也可以写 typeof userName 这种表达式整体。

变量命名规范:能用的字符与推荐风格 ​

为什么需要:变量名乱取,代码一多就分不清谁是谁;有些名字还会直接造成语法错误。
怎么想:强制规范先守住:由字母、数字、下划线、$ 组成,不能以数字开头,不能是关键字或保留字。建议规范再用有意义的名字,多个单词用小驼峰。
怎么做:

js
var userName = "高乐";
var homeAddress = "内蒙古";
var number100 = 100;

易错点:23hello、纯数字、home-address 都不行;var 这类关键字不能当变量名。多个单词推荐 homeAddress 这种小驼峰;下划线风格也能用,但团队要统一。

注释与语句结束符:别让语法错误一行都不执行 ​

为什么需要:注释用于解释代码或临时屏蔽代码;语句结束符决定语句边界,写错会直接语法错误。
怎么想:JS 注释有单行 // 和多行 /* */。语句结束常用分号;换行处会触发自动分号插入。转写稿里“空格作结束符”是口误/转写误差,应纠正为“换行”。
怎么做:

js
// 单行注释
/*
  多行注释
*/
alert(100);
alert(200);
alert(300);

易错点:多条语句全挤在一行又不写分号,容易语法错误;语法错误时浏览器可能一条都不执行,VS Code 也会标红。像 Alert(100) 这种大小写写错不是语法错误,而是运行到该行才发现 Alert is not defined,前面的代码仍可能已执行。分号写不写可按团队规范和个人习惯,但同一项目要统一。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>JS 基本语法与三种输出方式</title>
</head>
<body>
  <h1>JavaScript</h1>

  <!-- 行内式:不推荐,代码与元素混在一起 -->
  <!-- <button onclick="alert('行内式')">点我</button> -->

  <!-- 外链式:写了 src 就不会执行标签里的代码 -->
  <!-- <script src="01.js"></script> -->

  <script>
    // 单行注释:只注释本行后面的部分
    /* 多行注释
       可以一次注释多行,有开始 * / 也要有结束 */

    alert(250);              // 输出到弹框,数字直接写
    alert("高乐");           // 非数字(字符串)必须用引号包裹

    document.write(500);     // 输出到页面(写入文档流)
    document.write("高乐");  // 会出现在 h1 之后

    console.log(666);        // 输出到控制台,最推荐
    console.log("老铁双击666");
  </script>

  <p>script 之后的段落</p>
</body>
</html>

要点解释:

  • alert(内容)、document.write(内容)、console.log(内容) 都是把内容写进小括号里,区别只是输出去处:弹框、页面、控制台。
  • 数字可以直接写,字母/中文/标点必须加引号,否则会被当成变量名去找。
  • document.write 是写入文档流,会插在 <h1> 和 <p> 之间,影响原有 HTML 结构;console.log 对页面零影响,所以调试最常用。
  • 易错点:<script src="..."> 和标签内写代码不能合二为一,有 src 时标签内代码不会执行。
  • 易错点:JS 严格区分大小写,写成 Alert(...) 会报 Alert is not defined,这属于运行时错误,前面的代码照常执行,执行到这一行才停。
  • 语句结束符用分号或换行都可以,但三条语句挤在一行且都不写结束符会直接语法错误,整个文件一条都不执行。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>变量的语法</title>
</head>
<body>
  <script>
    // 1. 创建(声明)变量并赋值
    var number01 = 250;

    // 2. 先声明,后赋值(空杯子)
    var number02;
    number02 = 500;          // 赋值时不再加 var

    // 3. 修改变量的值
    number02 = 600;          // 重新赋值,同样不加 var

    // 4. 把一个变量的值赋给另一个变量
    number01 = number02;     // 等号左边是变量,右边是数据

    console.log(number01);       // 600
    console.log(number02);       // 600
    console.log(number02 * 1);   // 1200,变量可以参与运算

    // 5. 使用没有赋值的变量
    var number03;
    console.log(number03);       // undefined,不报错

    // 6. 使用不存在的变量(取消注释会报错,后面代码都不执行)
    // console.log(number04);    // ReferenceError: number04 is not defined

    // 7. 变量命名规范
    var name = "高乐";
    var _hello = 1;
    var $hello = 2;
    var number100 = 3;
    var homeAddress = "北京";    // 小驼峰:第二个单词首字母大写
    // var 23hello = 1;         // 语法错误:不能以数字开头
    // var home-address = "";   // 语法错误:不能出现短横线
    // var var = 1;             // 语法错误:不能是关键字
  </script>
</body>
</html>

要点解释:

  • 创建变量用关键字 var,赋值用等号;判断要不要加 var 的口诀是:变量还不存在时加 var 创建,已经创建过就直接用,甭管是赋值、修改还是输出。
  • var number02; 只是声明没赋值,相当于空杯子,使用时得到 undefined;而 number04 根本没创建过,使用会直接报错,两者是两回事。
  • 变量名只能由数字、字母、下划线、$ 组成,且不能以数字开头、不能是关键字/保留字;23hello、纯数字、home-address 都是最低级的语法错误,VSCode 直接标红,浏览器一行都不执行。
  • 建议用有意义的词(age、address),多个单词用驼峰(homeAddress),不要写 a1、a2 这种。
  • 变量名不能用短横线,home-address 会被当成减法运算而报错。
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>数据类型判断</title>
</head>
<body>
  <script>
    var userName = "高乐";       // string
    var age = 176;               // number
    var isActive = true;         // boolean
    var address = null;          // null
    var phoneNumber;             // undefined

    console.log(typeof userName);     // "string"
    console.log(typeof age);          // "number"
    console.log(typeof isActive);     // "boolean"
    console.log(typeof address);      // "object"  ← 特殊情况
    console.log(typeof phoneNumber);  // "undefined"

    // 小括号里也可以直接写直接量
    console.log(typeof 250);          // "number"
    console.log(typeof "abc");        // "string"
    console.log(typeof false);        // "boolean"

    // typeof 的计算结果本身也是数据,类型是字符串
    console.log(typeof typeof 250);   // "string"
  </script>
</body>
</html>

要点解释:

  • typeof 是一个运算符,把小括号里要判断的数据放进去,整体得到一个结果,结果内容是 "number"、"string"、"boolean"、"object"、"undefined" 这类字符串。
  • 五大原始类型:number、string、boolean、null、undefined;其中 null 只有 null 一个值,undefined 也只有 undefined 一个值。
  • 特殊情况:typeof null 返回 "object",是作者当初设计的失误,现在成了特点,不能把 null 当对象用,面试常考。
  • 易错点:typeof 返回的内容虽然不同,但类型全都是字符串,控制台里显示成黑色就是这个原因;控制台给不同类型显示不同颜色只是 Chrome 调试工具的福利,不是 JS 的功能。
  • 易错点:不要因为自己写的 "高乐" 一眼就能看出是字符串就不用 typeof,实际程序中数据可能来自用户输入、后端接口或别人的函数,必须用程序去判断类型。

常见错误 ​

1. 在 <script src="..."> 里同时写内嵌代码

  • 现象:页面只引入外部文件,标签里自己写的 alert(...) 完全不执行,也无报错。
  • 原因:<script> 一旦带 src 属性,标签体内容被浏览器整体忽略,该标签只承担"外链"单一职责。
  • 修法:拆成两个标签——<script src="x.js"></script> 后面另起一个 <script> 自己的代码 </script>。

2. 语句之间既不加分号也不换行

  • 现象:VS Code 整段标红,浏览器一条指令都不执行,控制台报 SyntaxError。
  • 原因:缺少指令结束符,多条语句粘成一串,属于语法错误;语法错误会让整个脚本块"零执行",即使错误在第 100 行,前 99 行也不跑。
  • 修法:每行一条语句并换行(可读性必须有),分号按个人/团队规范决定加或不加;出错先按 F12 看 Console 里的 SyntaxError 定位。

3. 大小写写错,如 Alert() / Console.log()

  • 现象:页面无弹框,Console 报 xxx is not defined,但错误语句之前的代码照常执行。
  • 原因:JS 严格区分大小写;这是运行期错误,编辑器静态检查发现不了,只有执行到该行才暴露。
  • 修法:统一小写拼写 alert / console.log / document.write;理解"语法错误=一行不跑,运行期错误=跑到才停"的区别。

4. 把未声明变量和已声明未赋值混为一谈

  • 现象:var a; console.log(a) 输出 undefined;console.log(b)(b 从未声明)直接报错并中断。
  • 原因:前者是"空杯子",值为 undefined,属于正常使用;后者变量压根不存在,是运行期错误。
  • 修法:先声明再使用;var 只在创建时写一次,赋值、修改、读取都不再写 var。

5. 变量名踩规范红线

  • 现象:var 23hello、var user-name、var var 都被标红并报语法错误。
  • 原因:变量名只能由字母、数字、_、$ 组成且不能以数字开头;不能是关键字/保留字;不能出现减号。
  • 修法:改成 hello23、userName;见到"符合字符规则仍标红"就立刻怀疑是关键字。

6. 用 typeof 判断 null

  • 现象:typeof null 返回 "object",据此把 null 当对象用,后续操作报错。
  • 原因:早期设计遗留的历史问题,内部类型标记与对象混淆,属于已知特例而非规则。
  • 修法:判空用 x === null;typeof 只用来区分 number/string/boolean/undefined/function/object 大类。

7. 拿 typeof 的结果当类型名比较

  • 现象:if (typeof a === number) 永远为假;typeof typeof 1 结果出乎意料。
  • 原因:typeof 的返回值本身是一个字符串("number"、"string"……),且它也是数据,还能再被 typeof 一次,结果恒为 "string"。
  • 修法:比较时给右侧加引号 typeof a === "number";把 typeof x 整体当成一个数据来看待。

练习 ​

练习 1(注释与结束符) 写一段脚本:用单行注释说明本段用途,用多行注释临时屏蔽两行代码;脚本内包含三条输出语句,要求其中一条故意不写分号但换行,验证仍能执行。

练习 2(三种输出) 分别用弹框、页面、控制台输出同一个变量 score(值为 666),并在 document.write 前后各写一个 HTML 标签,观察输出内容落在页面的什么位置。

练习 3(变量全流程) 用 var 完成:声明 price 并赋值 100 → 再声明 count 并赋值为 price 的两倍 → 把 price 改成 250 → 输出两个变量。回答:count 最后是多少?为什么?

练习 4(命名规范排查) 下列变量名哪些合法、哪些报错、报的是哪一类问题:name、_temp、$btn、1st、user-name、new、userName、homeAddress、home_address。把合法的按小驼峰统一改写一遍。

练习 5(类型判断) 声明五个变量分别存放 100、"100"、true、null、未赋值,用 typeof 逐个输出其类型,并解释哪一个结果"不符合直觉"、正确判空应怎么写。

原视频对照 ​

#视频时长
1JS的注释05:15
2指令结束符09:16
3JS严格区分大小写01:40
4JS中输出内容07:12
5变量的语法21:15
6变量名命名规范11:51
7数据类型判断29:30

小结 ​

  1. <script> 的"内嵌"和"外链"不能合体:带 src 就只做引入,想自己写代码必须另起一个标签。
  2. 语句结束符二选一(分号或换行),但换行不可省——它是可读性底线;分号加不加是习惯与团队规范问题,不是对错问题。
  3. JS 严格区分大小写,且错误分两类:语法错误编辑器可见、整段不执行;运行期错误只有执行到才暴露,前面的代码照跑。
  4. 输出三件套各有用处:alert 弹框最打扰、document.write 会插入文档流影响结构、console.log 无副作用,是调试首选。
  5. 变量 = 给数据取的名字/装数据的杯子;var 只用于创建,赋值、修改、读取、互相赋值一律不再写 var。
  6. 命名有硬规范和软规范:硬规范(字符集、非数字开头、非关键字)违反即语法错误;软规范(有意义、小驼峰)违反只是可维护性差。
  7. 五种原始类型中,前三种是日常主力;null 和 undefined 都表示"啥都没有",区别不大但来源不同,且 typeof null === "object" 是必须记住的特例。
  8. typeof 返回的永远是字符串,内容不同而已——理解"数据有类型,判断结果本身也是数据",是跨进编程思维的第一步。