目录
初识JavaScript
JavaScript是什么
发展历史
JavaScript和HTML和CSS之间的关系
JavaScript运行过程
JavaScript的组成
重要概念: ECMAScript
前置知识
第一个程序
JavaScript的书写形式
行内式
内嵌式
外部式
注释
输入输出
输入：prompt
输出：alert
输出：console.log
重要概念：日志
重要概念：
语法概览
变量的使用
基本用法
使用变量
代码示例：弹框提示用户输入信息, 再弹框显示
理解动态类型
1) JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)
2) 随着程序运行, 变量的类型可能会发生改变.
基本数据类型
number数字类型
数字进制表示
特殊的数字值
string字符串类型
基本规则
转义字符
求长度
字符串拼接
boolean布尔类型
undefined未定义数据类型
null空值类型
运算符
算术运算符
赋值运算符&复合赋值运算符
自增自减运算符
比较运算符
逻辑运算符
位运算
移位运算
条件语句
if语句
基本语法格式
练习案例
代码示例1：判定一个数字是奇数还是偶数
代码示例2：判定一个数字是正数还是负数
代码示例3：判定某一年份是否是闰年
三元表达式
switch
调试技巧
循环语句
while循环
代码示例1：打印1-10
代码示例2：计算5的阶乘
continue
代码示例：找到100-200中所有3的倍数
break
代码示例：找到100-200中第一个3的倍数
for循环
代码示例1：打印1-10的数字
代码示例2：计算5的阶乘
初识JavaScript
JavaScript是什么
JavaScript（简称 JS）
是世界上最流行的编程语言之一
是一个脚本语言，通过解释器运行
主要在客户端（浏览器）上运行，现在也可以基于 node.js 在服务器端运行
JavaScript 最初只是为了完成简单的表单验证（验证数据合法性），结果后来不小心就火了
当前 JavaScript 已经成为了一个通用的编程语言
JavaScript 的能做的事情:
网页开发(更复杂的特效和用户交互)
网页游戏开发
服务器开发(node.js)
桌面程序开发(Electron, VSCode 就是这么来的)
手机 app 开发
发展历史
JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)
曾经的布兰登
发明 JavaScript 之后的布兰登
1995 年, 用 10 天时间完成 JS 的设计 (由于设计时间太短，语言的一些细节考虑得不够严谨，导致后来很长一段时间，Javascript 写出来的程序混乱不堪)
最初在网景公司, 命名为 LiveScript,
一般认为，当时 Netscape 之所以将 LiveScript 命名为 JavaScript，是因为 Java 是当时最流行的编程语言，带有 "Java" 的名字有助于这门新生语言的传播。
其实 Java 和 JavaScript 之间的语法风格相去甚远.
JavaScript 发展历史可以参考阮一峰大神的博客
JavaScript和HTML和CSS之间的关系
HTML: 网页的结构(骨)
CSS: 网页的表现(皮)
JavaScript: 网页的行为(魂)
JavaScript运行过程
编写的代码是保存在文件中的, 也就是存储在硬盘(外存上).
双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存)
浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作)得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
浏览器分成渲染引擎 + JS 引擎.
渲染引擎: 解析 html + CSS, 俗称 "内核"
JS 引擎: 也就是 JS 解释器. 典型的就是 Chrome 中内置的 V8
JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行
JavaScript的组成
ECMAScript(简称 ES): JavaScript 语法
DOM: 页面文档对象模型, 对页面中的元素进行操作
BOM: 浏览器对象模型, 对浏览器窗口进行操作
光有 JS 语法, 只能写一些基础的逻辑流程.
但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么就需要 DOM API 和 BOM API.
这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API,
就不太需要关注 DOM 和 BOM
重要概念: ECMAScript
这是一套 "标准", 无论是啥样的 JS 引擎都要遵守这个标准来实现.
啥叫标准? 车同轨, 书同文. 秦始皇最大的贡献之一, 就是制定了一套标准.
三流公司做产品, 一流公司做标准
前置知识
第一个程序
打开浏览器，按下 F12打开开发者模式后在控制台（Console）直接输入一个JavaScript语句，就能明显见到回应效果👇
<script>
alert("你好!");
</script>
JavaScript 代码可以嵌入到 HTML 的 script 标签中.
JavaScript的书写形式
行内式
直接嵌入到 html 元素内部
<input type="button" value="点我一下" onclick="alert('haha')">
注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.
HTML 中推荐使用双引号, JS 中推荐使用单引号
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="点我一下" onclick="alert('haha')">
</body>
</html>
效果展示👇
注意：在 JavaScript 中可以 单引号和双引号可以切换使用，在上述代码中将单引号和双引号互换位置后，代码效果是一样的
内嵌式
写到 script 标签中
<script>
alert("haha");
</script>
外部式
写到单独的 .js 文件中
<script src="hello.js"></script>
alert("hehe");
注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行).
适合代码多的情况
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./demo02.js"></script>
</body>
</html>
alert("我在学习JavaScript");
效果展示👇
注释
单行注释 // [建议使用]
多行注释 /* */
// 我是单行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/
使用 ctrl + / 切换注释.
多行注释不能嵌套. 形如这种代码就会报错
/*
/*
我是多行注释
我是多行注释
我是多行注释
*/
*/
输入输出
输入：prompt
弹出一个输入框
// 弹出一个输入框
prompt("请输入您的姓名:");
输出：alert
弹出一个警示对话框, 输出结果
// 弹出一个输出框
alert("hello");
输出：console.log
在控制台打印一个日志(供程序员看)
// 向控制台输出日志
console.log("这是一条日志");
注意: 在 VSCode 中直接输入 "log" 再按 tab 键, 就可以快速输入 console.log
需要打开浏览器的开发者工具(F12) => Console 标签页 才能看到结果
这样的输出一般不是给普通用户看的, 而是程序员来看的.
重要概念：日志
日志是程序员调试程序的重要手段
去医院看病, 医生会让患者做各种检查, 血常规, 尿常规, B超, CT等… 此时得到一堆检测结果. 这些结果普通人看不懂, 但是医生能看懂, 并且医生要通过这些信息来诊断病情.
这些检测结果就是医生的 "日志"
PS: 相比于医生来说, 程序猿多一个终极大招, "重启下试试".
重要概念：
console 是一个 js 中的 "对象"
. 表示取对象中的某个属性或者方法. 可以直观理解成 "的"
console.log 就可以理解成: 使用 "控制台" 对象 "的" log 方法
语法概览
JavaScript 虽然一些设计理念和 Java 相去甚远, 但是在基础语法层面上还是有一些相似之处的.
有了 Java 的基础很容易理解 JavaScript 的一些基本语法
变量的使用
基本用法
创建变量(变量定义/变量声明/变量初始化)
var name = 'zhangsan';
var age = 20;
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!– <input type="button" value="点我一下" onclick="alert('haha')"> –>
</body>
<script>
var name="CoderYanger";
console.log(name)
</script>
</html>
打印效果展示👇
var 是 JS 中的关键字, 表示这是一个变量.
= 在 JS 中表示 "赋值", 相当于把数据放到内存的盒子中. = 两侧建议有一个空格
每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上.
注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点.
初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来.
初始化的值如果是数字, 那么直接赋值即可
还有另外一种定义方式：使用 let，代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!– <input type="button" value="点我一下" onclick="alert('haha')"> –>
</body>
<script>
var name="CoderYanger";
console.log(name)
let age=30;
console.log(age)
</script>
</html>
效果展示👇
为什么更加推荐使用 let 代替 var 呢？？
因为 let 比 var 出现的晚，意味着避免了 var 这块定义变量的时候的一些缺陷
如果使用 let 定义变量，此时生命周期、作用域，基本和 Java 是类似的
而且 JS 定义一个变量的时候，不需要对这个变量指定类型~~
你给赋值成字符串，就是字符串，你给赋值数字，那就是数字
同时，在 JS 里面对于数字只有一种类型：数值类型（可以是小数，也可以是整数）
使用变量
console.log(age); // 读取变量内容
age = 30; // 修改变量内容
为啥动漫中的角色都是要先喊出技能名字再真正释放技能?
就是因为变量要先声明才能使用
代码示例：弹框提示用户输入信息, 再弹框显示
var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name);
alert("您的年龄是: " + age);
alert("您的分数是: " + score);
也可以把三个输出内容合并成一次弹框
var name = prompt("请输入姓名:");
var age = prompt("请输入年龄:");
var score = prompt("请输入分数");
alert("您的姓名是: " + name + "\\n" + "您的年龄是: " + age + "\\n" + "您的分数是: " +
score + "\\n");
+ 表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串.
\\n 表示换行
JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似. 用法上的差异此处暂时不讨论.
理解动态类型
答疑
Q1：什么是强类型变量？什么是弱类型变量？
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
a = 1
b = 'b'
b = a
console.log(b)
</script>
</body>
</html>
效果展示👇
我们发现 b = 1，且代码也没有报错，证明 JavaScript 属于弱类型语言，它所定义的变量也就属于弱类型变量~~
Q2：什么是动态类型变量？什么是静态类型变量？
动态类型意味着代码在执行过程中，变量类型可以随时发生变化
静态类型意味着变量定义的时候是什么类型，在运行过程中就是什么类型
我们可以将上述代码稍作修改，观察 a 的类型是否改变，代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
a = 1
console.log(typeof(a))
b = 'b'
a = b
console.log(typeof(a))
</script>
</body>
</html>
效果展示👇
我们发现 a 的类型从 number 转换成了 string
说明 JavaScript 中的变量是一个动态类型变量~~
1) JS 的变量类型是程序运行过程中才确定的(运行到 = 语句才会确定类型)
var a = 10; // 数字
var b = "hehe"; // 字符串
2) 随着程序运行, 变量的类型可能会发生改变.
var a = 10; // 数字
a = "hehe"; // 字符串
这一点和 C Java 这种静态类型语言差异较大.
C, C++, Java, Go 等语言是静态类型语言. 一个变量在创建的时候类型就确定了, 不能在运行时发生改变.
如果尝试改变, 就会直接编译报错
基本数据类型
JS 中内置的几种类型
number: 数字. 不区分整数和小数.
boolean: true 真, false 假.
string: 字符串类型.
undefined: 只有唯一的值 undefined. 表示未定义的值.
null: 只有唯一的值 null. 表示空值
number数字类型
JS 中不区分整数和浮点数, 统一都使用 "数字类型" 来表示
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// a = 1
// console.log(typeof(a))
// b = 'b'
// a = b
// console.log(typeof(a))
let a = 10;
console.log(typeof(a))
a = a / 3
console.log(a)
console.log(typeof(a))
</script>
</body>
</html>
效果展示👇
所以 不管是小数还是整数，统一都是 number 类型
数字进制表示
计算机中都是使用二进制来表示数据, 而人平时都是使用十进制.
因为二进制在使用过程中不太方便(01太多会看花眼).
所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字
var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头
注意:
一个八进制数字对应三个二进制数字
一个十六进制数字对应四个二进制数字. (两个十六进制数字就是一个字节)
各种进制之间的转换, 不需要手工计算, 直接使用计算器即可
特殊的数字值
Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: 表示当前的结果不是一个数字
var max = Number.MAX_VALUE;
// 得到 Infinity
console.log(max * 2);
// 得到 -Infinity
console.log(-max * 2);
// 得到 NaN
console.log('hehe' – 10);
代码展示👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 10
console.log(10/0)
</script>
</body>
</html>
效果展示👇
我们发现，如果是在 Java 中，10 / 0 原本会抛出异常的代码，在 JavaScript 中却是打印出了一个 Infinity
负无穷无非就是在前面加了个” – "，这里就不演示了
下面演示一下 NaN 👇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 10
console.log("hahah"-1)
</script>
</body>
</html>
效果展示👇
注意:
1. 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity
2. 'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.
3. 可以使用 isNaN 函数判定是不是一个非数字.
console.log(isNaN(10)); // false
console.log(isNaN('hehe' – 10)); // true
string字符串类型
基本规则
字符串字面值需要使用引号引起来, 单引号双引号均可
var a = "haha";
var b = 'hehe';
var c = hehe; // 运行出错
如果字符串中本来已经包含引号咋办?
var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \\"zhangsan\\""; // 正确, 使用转义字符. \\" 来表示字符串内部的引号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号
代码展示👇
let a = '哈哈哈'
a = "JS"
a = '哈哈哈"JS"'
alert(a)
效果展示👇
如果单引号和双引号互换位置，再来看👇
let a = '哈哈哈'
a = "JS"
a = "哈哈哈'JS'"
alert(a)
效果展示👇
转义字符
有些字符不方便直接输入, 于是要通过一些特殊方式来表示（与 Java 类似）
\\n
\\\\
\\'
\\"
\\t
求长度
使用 String 的 length 属性即可
var a = 'hehe';
console.log(a.length);
var b = '哈哈';
console.log(b.length);
结果:
4
2
单位为字符的数量
字符串拼接
使用 + 进行拼接
var a = "my name is ";
var b = "CoderYanger";
console.log(a + b);
效果展示👇
注意, 数字和字符串也可以进行拼接
var c = "my score is ";
var d = 100;
console.log(c + d);
效果展示👇
注意, 要认准相加的变量到底是字符串还是数字
console.log(100 + 100); // 200
console.log('100' + 100); // 100100
效果展示👇
可见，效果与 Java 是类似的~~
boolean布尔类型
表示 "真" 和 "假"
boolean 原本是数学中的概念 (布尔代数).
在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断
Boolean 参与运算时当做 1 和 0 来看待
console.log(true + 1);
console.log(false + 1)
这样的操作其实是不科学的. 实际开发中不应该这么写
代码展示👇
let a = true
console.log(typeof(a))
a = a + 1
console.log("a的值等于" + a + ",a的类型" + typeof(a))
效果展示👇
undefined未定义数据类型
如果一个变量没有被初始化过, 未被定义，结果就是 undefined, 是 undefined 类型
let a;
console.log(a)
效果展示👇
undefined 和字符串进行相加, 结果进行字符串拼接
console.log(a + "10"); // undefined10
效果展示👇
undefined 和数字进行相加, 结果为 NaN
console.log(a + 10);//NaN
console.log(a + true);//NaN
效果展示下👇
null空值类型
null 表示当前的变量是一个 "空值".
var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10
效果展示👇
注意:
null 和 undefined 都表示取值非法的情况, 但是侧重点不同.
null 表示当前的值为空. (相当于有一个空的盒子)
undefined 表示当前的变量未定义. (相当于连盒子都没有)
运算符
JavaScript 中的运算符和 Java 用法基本相同. 此处不做详细介绍了.
算术运算符
+
–
*
/
%
赋值运算符&复合赋值运算符
=
+=
-=
*=
/=
%=
自增自减运算符
++: 自增1
–: 自减
比较运算符
<
>
<=
>=
== 比较相等(会进行隐式类型转换)（比较的是变量的内容）
!=
=== 比较相等(不会进行隐式类型转换)（比较的是内容+数据类型）
!==
代码展示👇
let a = 10;
let b = "10";
alert(a==b)
效果展示👇
代码展示👇
let a = 10;
let b = "10";
alert(a===b)
效果展示👇
逻辑运算符
用于计算多个 boolean 表达式的值.
&& 与: 一假则假
|| 或: 一真则真
! 非
位运算
& 按位与
| 按位或
~ 按位取反
^ 按位异或
移位运算
<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)
条件语句
与 Java 都是一样的~~
if语句
基本语法格式
条件表达式为 true, 则执行 if 的 { } 中的代码
// 形式1
if (条件) {
语句
}
// 形式2
if (条件) {
语句1
} else {
语句2
}
// 形式3
if (条件1) {
语句1
} else if (条件2) {
语句2
} else if …. {
语句…
} else {
语句N
}
练习案例
代码示例1：判定一个数字是奇数还是偶数
//判断当前数字是奇数还是偶数
let num = prompt("请输入数字")
if(num%2==0) alert("这个数字是偶数")
else if(num%2==1) alert("这个数字是奇数")
else alert("非法输入")
效果展示👇
注意! 不能写成 num % 2 == 1 就是奇数. 负的奇数 % 2 结果可能是 -1.
代码示例2：判定一个数字是正数还是负数
var num = 10;
if (num > 0) {
console.log("num 是正数");
} else if (num < 0) {
console.log("num 是负数");
} else {
console.log("num 是 0");
}
代码示例3：判定某一年份是否是闰年
var year = 2000;
if (year % 100 == 0) {
// 判定世纪闰年
if (year % 400 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
} else {
// 普通闰年
if (year % 4 == 0) {
console.log("是闰年");
} else {
console.log("不是闰年");
}
}
三元表达式
是 if else 的简化写法.
条件 ? 表达式1 : 表达式2
条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值.
代码展示👇
alert(1 === "1"?true:false)
效果展示👇
注意, 三元表达式的优先级是比较低的.
switch
更适合多分支的场景
switch (表达式) {
case 值1:
语句1;
break;
case 值2:
语句2:
break;
default:
语句N;
}
用户输入一个整数, 提示今天是星期几
var day = prompt("请输入今天星期几: ");//默认是string类型
switch (parseInt(day)) {//此处需要用parseInt()转换成整数，否则是string类型
case 1:
console.log("星期一");
break;
case 2:
console.log("星期二");
break;
case 3:
console.log("星期三");
break;
case 4:
console.log("星期四");
break;
case 5:
console.log("星期五");
break;
case 6:
console.log("星期六");
break;
case 7:
console.log("星期日");
break;
default:
console.log("输入有误");
}
调试技巧
①点击行号=打断点
②刷新页面后，进入 DeBug 调试模式
③快捷键：
F8：继续运行
F10：单步跳过
F11：单步进入
shift+F11：单步跳出，结束调试
循环语句
重复执行某些语句
while循环
while (条件) {
循环体;
}
执行过程:
先执行条件语句
条件为 true, 执行循环体代码.
条件为 false, 直接结束循环
代码示例1：打印1-10
var num = 1;
while (num <= 10) {
console.log(num);
num++;
}
代码示例2：计算5的阶乘
var result = 1;
var i = 1;
while (i <= 5) {
result *= i;
i++;
}
console.log(result)
continue
结束这次循环
吃五个李子, 发现第三个李子里有一只虫子, 于是扔掉这个, 继续吃下一个李子
var i = 1;
while (i <= 5) {
if (i == 3) {
i++;
continue;
}
console.log("我在吃第" + i + "个李子");
i++;
}
我在吃第1个李子
我在吃第2个李子
我在吃第4个李子
我在吃第5个李子
代码示例：找到100-200中所有3的倍数
var num = 100;
while (num <= 200) {
if (num % 3 != 0) {
num++; // 这里的 ++ 不要忘记! 否则会死循环.
continue;
}
console.log("找到了 3 的倍数, 为:" + num);
num++;
}
break
结束整个循环
吃五个李子, 发现第三个李子里有半个虫子, 于是剩下的也不吃了
代码示例：找到100-200中第一个3的倍数
var i = 1;
while (i <= 5) {
if (i == 3) {
break;
}
console.log("我在吃第" + i + "个李子");
i++;
}
我在吃第1个李子
我在吃第2个李子
for循环
for (表达式1; 表达式2; 表达式3) {
循环体
}
表达式1: 用于初始化循环变量.
表达式2: 循环条件
表达式3: 更新循环变量.
执行过程:
先执行表达式1, 初始化循环变量
再执行表达式2, 判定循环条件
如果条件为 false, 结束循环
如果条件为 true, 则执行循环体代码.
执行表达式3 更新循环变量
代码示例1：打印1-10的数字
for (var num = 1; num <= 10; num++) {
console.log(num);
}
代码示例2：计算5的阶乘
var result = 0;
for (var i = 1; i <= 5; i++) {
result *= i;
}
console.log("result = " + result);
代码示例👇
for(i = 100;i <= 200; i++){
if(i%3==0)
break;
}
alert("100~200之间第一个3的倍数是"+i)
效果展示👇
细节：当在 i 前面加上 let 时 i 的作用域就从全局变成局部了，无法正常输出了👇
for(let i = 100;i <= 200; i++){
if(i%3==0)
break;
}
alert("100~200之间第一个3的倍数是"+i)
