主题
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,前面的代码仍可能已执行。分号写不写可按团队规范和个人习惯,但同一项目要统一。
课堂画面






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