主题
1-1JavaScript快速入门
本页对应 第一章JavaScript基础，共 5 段视频，约 36 分钟。
学习目标
- 能用自己的话说明 JavaScript 是运行在客户端的编程语言，并指出其运行依赖浏览器。
- 能在 HTML 中分别使用内部、外部、行内三种方式编写或引入 JavaScript，并正确将内部/外部脚本放在
</body>前。 - 能说明外部 JavaScript 使用
src引入时，<script>标签中间不应再写代码，否则会被忽略。 - 能正确编写单行注释、多行注释，并说明 JavaScript 结束符分号的写法及统一加或不加的风格要求。
- 能使用
alert()、document.write()、console.log()完成输出，并区分三者的显示位置和典型用途。 - 能使用
prompt()弹出输入框接收用户输入，并说明后续可用变量保存输入数据。
知识点
先搞清楚：JavaScript 是什么
为什么需要： 学 JS 前先要知道它解决什么问题。转写稿里用“两行代码批量点购物车下载图标”说明：JS 能让页面动起来、能控制页面元素，不只是写静态结构。
怎么想： JS 是运行在客户端（浏览器）的编程语言，可创建动态更新内容、控制多媒体、制作图像动画和交互效果。它不能独立运行，要嵌入 HTML，由浏览器执行。
怎么做： 记住两个关键词：浏览器、嵌入 HTML。后面所有代码都围绕“先有 HTML 页面，再由 script 引入/书写 JS”。
易错点： 不要把 JS 当成 CSS；JS 负责行为/交互，CSS 负责样式。转写稿中的“GS”都是“JS”，“ATT马”是“HTML”。
写法一：内部 script
为什么需要： 练习时把 JS 直接写在 HTML 里最方便，能快速看到 alert 等效果。
怎么想： 浏览器从上往下解析，通常先让 HTML 标签加载出来，再用 JS 控制它们，所以内部 script 常放在 </body> 上方。
怎么做：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
alert('嗨，欢迎来传智播学习前端技术！')
</script>
</body>
</html>易错点： alert 后要小括号，文字用英文引号；位置尽量放文档底部。转写稿里“杠胞底/杠包底”指 </body>，“srel/sscript”指 script。
写法二：外部 .js 文件
为什么需要： 代码一多，全塞进 HTML 会乱，也不利于复用。外部 JS 更有序、易维护。
怎么想： 新建以 .js 结尾的文件，把 JS 放进去，再用 script 的 src 属性引入。
怎么做：
javascript
// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>易错点： 一旦 script 用了 src，标签中间的代码会被忽略：
html
<script src="demo.js">
// 此处的代码会被忽略掉！！！！
alert(666);
</script>转写稿调试时就是：外部文件弹出了 alert，但 script 中间的 alert(666) 没执行。记住：有 src 就不要再在中间写代码。
补充：行内写法（了解）
转写稿补充了行内写法，如按钮上写 onclick="alert('点击了')"。它可了解，但当前阶段用得少。易错点： 外层双引号、内层单引号要分清；不要和内部、外部写法混淆。
注释和结束符
为什么需要： 注释用于屏蔽代码或写备注；结束符用于表示语句结束。转写稿里反复演示“加分号、不加分号都能执行”，是为了说明规范。
怎么想： JS 支持单行 // 和多行 /* */；分号 ; 多数情况可省略，由 JS 引擎推断，但团队风格要统一：要么都加，要么都不加。
怎么做：
html
<script>
// 这种是单行注释的语法
// 一次只能注释一行
// 可以重复注释
document.write('嗨，欢迎来传智播学习前端技术！');
</script>html
<script>
/* 这种的是多行注释的语法 */
/*
更常见的多行注释是这种写法
在些可以任意换行
多少行都可以
*/
document.write('嗨，欢迎来传智播学习前端技术！')
</script>html
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>易错点： 单行注释快捷键是 Ctrl + /；多行注释快捷键转写稿说 Shift + Alt + A。不要一句加分号、一句不加，转写稿说这样“不专业”，团队要统一。
输入和输出语句
为什么需要： JS 要和用户交互：用户输入数据，程序处理后再输出结果。转写稿的订单案例就是先 prompt 输入价格、数量、地址，再计算总价并输出。
怎么想： 输出分三种：alert 弹警示框；document.write 向页面 body 输出，能解析标签；console.log 给程序员在控制台调试。输入学 prompt，弹提示框让用户输入。
怎么做：
javascript
// 1. 输出语句
// 1.1 alert 页面弹出警示框
// alert('你好,js')
// 1.2 document.write 向页面文档输入内容 显示到页面body标签之内, 可以正常的解析标签
document.write('今日特价')
document.write('<h4>今日特价</h4>')
// 1.3 console.log 给我们程序员调试使用的 console 控制台
console.log('给我们程序员使用的')html
<script>
// 1. 输入的任意数字，都会以弹窗形式展示
document.write('要输出的内容')
alert('要输出的内容');
// 2. 以弹窗形式提示用户输入姓名，注意这里的文字使用英文的引号
prompt('请输入您的姓名:')
</script>调试过程： document.write('今日特价') 后，页面出现“今日特价”；右击检查，能在 body 里看到文字。改成 document.write('<h4>今日特价</h4>') 后，页面显示为标题，说明它能解析标签。console.log 则要打开检查里的“控制台”才能看到。
易错点： document.write 输出到 body，可写标签；alert、prompt、console.log 不要往里塞 HTML 标签。console 不是 consulter/consl；prompt 不是 Prorunt/Promt；引号要用英文引号。prompt 拿到数据后要保存，需要等下一节变量。
变量是什么：先有“装数据”的容器
为什么需要：转写稿里讲输入语句 prompt 时提到，用户输入的数据当前还“拿不到、保存不下来”，等学完变量才能把输入的数据保存起来。也就是说，程序要处理数据，先得有地方放数据。
怎么想：变量是计算机中用来存储数据的“容器”，变量不是数据本身，它只是用于存储数值的容器，可以理解为一个个用来装东西的纸箱子。
怎么做：声明变量由两部分构成：声明关键字、变量名（标识）。let 是关键字，age 是变量名，也叫标识符。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// let 变量名
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
</script>
</body>
</html>易错点：关键字是 JavaScript 内置的、有特定含义的英文词汇，看到 let 就知道这行在声明变量；let 和 var 都能声明变量，但推荐使用 let。
赋值与变量更新：把数据放进容器
为什么需要：只声明变量只是创造了一个空“容器”，还没有数据。要让变量真正参与输出和计算，必须把数据放进去。
怎么想：声明相当于造空箱子，赋值相当于往箱子里放东西；赋值后还可以给变量一个不同的值来更新它。
怎么做：先声明再赋值，也可以声明和赋值同时进行。下面的代码把 18 存入 age，再用 document.write(age) 输出；同时声明并赋值 str，用 alert(str) 弹出。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 声明和赋值</title>
</head>
<body>
<script>
// 声明(定义)变量有两部分构成：声明关键字、变量名（标识）
// let 即关键字，所谓关键字是系统提供的专门用来声明（定义）变量的词语
// age 即变量的名称，也叫标识符
let age
// 赋值，将 18 这个数据存入了 age 这个“容器”中
age = 18
// 这样 age 的值就成了 18
document.write(age)
// 也可以声明和赋值同时进行
let str = 'hello world!'
alert(str);
</script>
</body>
</html>变量更新可以这样写：
javascript
// 1.更新变量
let age = 18
age = 19
// 注意: 不要多次声明同一个变量
// let age = 19
console.log(age)调试过程：写完 console.log(age) 后，打开浏览器检查工具里的控制台，就能看到变量当前的值；这正是转写稿中说的“代码中间打印一下结果，到控制台看结果对不对”的调试思路。
易错点：不要多次声明同一个变量，例如已经 let age = 18 后，不要再写 let age = 19；更新时直接写 age = 19。
一次声明多个变量：能认出来即可
为什么需要：有时会看到别人把多个变量写在一行，需要能读懂这种简写。
怎么想：多个变量中间用逗号隔开，代码更短，但可读性差，所以不推荐。
怎么做：
javascript
// 2. 一次声明多个变量的简写方式 (了解 能认出来就可以了)
// let uname = 'pink', sex = '男'
let uname = 'pink'
let sex = '男'
console.log(uname, sex)易错点：为了更好的可读性，一般情况下我们一行只声明一个变量；简写方式了解、能认出来即可，不要主动追求一行写很多个。
let 和 var 的区别：统一使用 let
为什么需要：旧程序里可能看到 var，需要知道它和 let 的差异，避免把旧写法当成推荐写法。
怎么想：var 现在开发中一般不再使用，只是可能在老版程序中看到；let 是为了解决 var 的一些问题。
怎么做：笔记给出的 var 不合理之处包括：可以先使用再声明；var 声明过的变量可以重复声明；还有变量提升、全局变量、没有块级作用域等。结论是：以后声明变量统一使用 let。
易错点：不要因为“老代码能跑”就迷恋 var；新写变量时用 let。
变量的本质：内存中的小空间
为什么需要：理解变量本质，才能理解“声明变量”到底发生了什么。
怎么想：内存是计算机中存储数据的地方，相当于一个空间；变量本质是程序在内存中申请的一块用来存放数据的小空间。
怎么做：声明变量时，可以把它理解为向内存申请空间；赋值时，把数据放进这块空间；输出或调试时，再通过变量名取用这块空间里的值。
易错点：变量名不是数据本身，它只是找到那块存储空间的标识；不要把“变量名”和“变量里存的值”混为一谈。
变量名命名规则与规范
为什么需要：变量名要合法，程序才能正常运行；变量名要有意义，代码才容易读。
怎么想：先遵守“规则（法律）”，再遵守“规范（道德）”。
怎么做：规则是：只能是字母、数字、下划线、$，且不能数字开头；字母区分大小写，如 Age 和 age 是不同变量；JavaScript 内部已占用的单词（关键字或保留字）不允许使用；尽量保证变量具有一定语义，见字知义。规范是：起名要有意义；遵守小驼峰命名法，第一个单词首字母小写，后面每个单词首字母大写，例如 userName。
javascript
// 1. 规则(法律)
// 1.1 变量名不能是关键字
// let let = 10
// 1.2 变量名的组成: 英文字母 数字 _ $ ，不能以数字开头
// let 1num = 10 错误
// let num! = 10 错误
// 1.3 js严格区分大小写
// let age = 18
// console.log(Age)
// 2. 规范(道德)
// 2.1 起名要有意义
// let age = 18
// let nl = 19
// 2.2 我们命名建议采取小驼峰命名法
let myName = 'pink'
let myFirstName = 'p'易错点：let let = 10 不行，因为 let 是关键字；1num 不行，因为不能数字开头；num! 不行，因为 ! 不在允许字符内；Age 和 age 不是同一个变量。命名时别用 nl 这类无意义缩写，优先写 age、myName 这种见字知义的名字。
课件图示
代码示例
示例一：内部引入 + 三种输出语句 + 注释
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 内部形式：通过 script 标签包裹 JavaScript 代码 -->
<script>
// 这种是单行注释的语法，快捷键 ctrl + /
/* 这种的是多行注释的语法
快捷键 shift + alt + A */
// 1. 输出语句
// 1.1 alert 页面弹出警示框
alert('嗨，欢迎来传智播学习前端技术！')
// 1.2 document.write 向页面文档输出内容，显示到页面 body 标签之内，可以正常的解析标签
document.write('今日特价')
document.write('<h4>今日特价</h4>')
// 1.3 console.log 给我们程序员调试使用的，console 即控制台
console.log('给我们程序员使用的')
</script>
</body>
</html>关键行与易错点
script标签写在</body>之前（文档底部），因为代码从上往下执行，要等 HTML 标签加载完再用 JS 去控制它。alert()/document.write()/console.log()后面都要跟小括号，括号里的文字要用英文引号包裹，写成中文引号会报错。- 只有
document.write()会把内容写进body里、并且能正常解析标签（所以<h4>会显示为标题）；alert()是弹窗，console.log()是控制台输出，写标签没有意义。 - 注释：单行
//，多行/* */，写法与 less 一致。 - 结束符
;可以省略，但风格要统一：要么每句都加，要么都不加，不能有的加有的不加。
示例二：外部引入（demo.js + index.html）
javascript
// demo.js
document.write('嗨，欢迎来传智播学习前端技术！')html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js">
// 此处的代码会被忽略掉！！！！
alert(666);
</script>
</body>
</html>关键行与易错点
- 外部方式要新建一个以
.js结尾的文件，再通过script标签的src属性引入，路径写成src="demo.js"（同目录）或src="./demo.js"。 - 最大的坑：一旦
script标签使用了src属性，标签内部写的任何代码都会被忽略，alert(666)不会执行，所以script和</script>之间不要写任何代码。 - 引入位置同样放在
</body>之前（HTML 元素下面）。 - 代码多的时候推荐外部写法，代码更有序、也便于复用。
示例三：输入语句 + 变量声明与赋值
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 输入输出与变量</title>
</head>
<body>
<script>
// 1. 输入语句：以弹窗形式提示用户输入，注意文字使用英文引号
prompt('请输入您的姓名:')
// 2. 声明变量：let 是关键字，age 是变量名（标识符）
let age
// 赋值：将 18 这个数据存入了 age 这个“容器”中
age = 18
document.write(age)
// 也可以声明和赋值同时进行
let str = 'hello world!'
alert(str)
// 3. 变量更新：给一个不同的值即可更新
age = 19
console.log(age)
// 4. 一次声明多个变量（了解即可，不推荐）
let uname = 'pink'
let sex = '男'
console.log(uname, sex)
</script>
</body>
</html>关键行与易错点
prompt('请输入您的姓名:')的提示文字必须用英文引号，此时用户输入的数据还拿不到，等学完变量才能保存下来。- 声明变量推荐统一用
let，不要用var（var可以先使用后声明、可以重复声明，是历史遗留问题）。 - 同一个人变量不要重复声明：
let age = 18之后再写let age = 19会报错，更新值直接写age = 19即可。 - 变量命名规则：只能是字母、数字、下划线、
$，不能以数字开头（let 1num错），严格区分大小写（Age和age是两个变量），不能用关键字（let let错）；规范上要有意义并使用小驼峰，如myName。 - 一次声明多个变量虽然可以简写（
let uname = 'pink', sex = '男'），但为可读性一般一行只声明一个。
常见错误
现象：外部引入的
demo.js正常执行，但写在<script src="demo.js">标签内部的代码毫无反应。 原因：src属性一旦存在，标签内的代码会被浏览器直接忽略，不是"覆盖"也不是"后执行"。 修法：一个标签只干一件事——要么只写src，要么只写内嵌代码；需要两者时拆成两个<script>标签，或把代码全部搬进.js文件。现象：
document.write/ 获取元素的代码写在<head>里，页面报错或输出内容跑到奇怪的位置。 原因：浏览器自上而下解析，脚本执行时后面的 HTML 标签还没被创建出来。 修法：把<script>放到</body>之前；确需放头部时用defer属性或等DOMContentLoaded后再执行。现象：写了
console.log('xxx')却"页面上什么都没有"，误以为代码没生效。 原因：三者的输出去处不同——alert是弹窗、document.write是页面 body、console.log是控制台；把调试语句当页面输出用了。 修法：明确目的再选语句：给用户看的走页面/弹窗，给自己看的走控制台；并用 F12 → Console 核对结果。现象：
let age = 18之后再写一次let age = 19，控制台报Identifier 'age' has already been declared。 原因：let禁止同一作用域内重复声明；很多同学是从var的习惯带过来的。 修法：更新值时不加关键字，直接age = 19；确实需要新变量就换名字。现象：变量名写成
1num、my-name、let、userName!，报Invalid or unexpected token或Unexpected token。 原因：标识符规则被破坏——数字开头、出现-和!、占用关键字。 修法：只用字母/数字/_/$，且不以数字开头；避开关键字；多单词改用小驼峰userName。现象：字符串里再嵌引号时，代码突然"断掉"或提示未终止的字符串；中文引号
“”也会引发同样问题。 原因：内外层用了同一种引号，或输入法自动替换成了全角引号。 修法：外层双引号、内层单引号（或反之）；切换英文输入法；必要时用 `` 转义。现象：注释掉一段代码后，后面大片代码连带失效。 原因：多行注释
/*没有闭合，或误用//想注释多行。 修法：多行必须成对写/* ... */；用编辑器快捷键（Ctrl + /、Shift + Alt + A）避免手写失误。
练习
三处输出对照：在同一个页面里分别用
alert、document.write、console.log输出你的姓名和学号，记录三处结果各自出现在哪里；再把document.write的参数换成<h3>姓名</h3>，观察页面与控制台 Elements 面板的差异。引入方式实验：新建
demo.js（内含一句alert），在 HTML 中用<script src="demo.js">引入，同时在标签内部再写一句alert。先运行看结果，再解释为什么少了一个弹窗，最后改成两个独立标签验证修复。变量生命周期：声明
let price = 1999、let count = 2，用console.log一次打印两个变量；然后把price更新为 2999 再打印一次，全程不得重复声明。命名体检：判断以下变量名是否可用并说明理由：
1stName、my-name、$price、class、userName、Age（与已存在的age并存）。把不合法的改成符合小驼峰规范的名称。输入→保存→输出：用
prompt分别提示用户输入商品名和数量，用变量保存，再用alert弹出一句包含这两项信息的提示。要求引号嵌套不出错，且变量名见字知义。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 课程介绍 | 08:15 |
| 2 | 今日内容 | 03:07 |
| 3 | JavaScript是什么以及书写位置 | 10:20 |
| 4 | JavaScript注释和结束符 | 05:09 |
| 5 | JavaScript输入和输出语句 | 09:48 |
小结
<script>的位置不是风格问题而是执行顺序问题：默认放</body>之前，是成本最低的正确做法。src与内嵌代码互斥，这是硬规则而非建议，混写必然"代码消失"。- 三种输出语句按受众选型：用户看弹窗或页面，开发者看控制台，混用是调试效率低下的主因。
- 声明变量统一用
let，把var当作需要读懂的旧代码，而不是可以照抄的写法。 - 命名先过"规则"这关（能不能跑），再过"规范"这关（别人能不能看懂），顺序不能颠倒。
- 结束符要么全加、要么全不加，团队一致性比个人偏好重要。
- 注释是给未来的自己和同事看的，写之前先想清楚"这行代码为什么存在"。
- 变量是后续所有内容的基石——输入的数据拿不到、算出的结果存不住，都是因为还没掌握"容器"这一层。