JavaScript教程

JavaScript 教程

什么是 JavaScript

JavaScript 是一个轻量级的脚本语言。不具备开发操作系统的能力，只是用来编写或控制其他大型应用程序的脚本 ( 在

其他大型程序内部运行的语言 ) 。

JavaScript 简称为 JS ，也是一种嵌入式语言 , 本身提供的核心语法不算很多，只能做一些数学和逻辑运算。 js 本身不提

供任何 I/O( 输入 , 输出 ) 相关的操作。主要靠宿主环境，提供相应的 API( 应该程序功能的接口 ) 。

对于前端， JS 的主要宿主 ( 运行 ) 环境是浏览器。

JS 能做什么

操控浏览器的能 : js 的宿主环境是浏览器，浏览器给 js 提供了很多的 API 可以操作浏览器实现各类交互效果。

HTML5 出现以后，浏览器的本身功能越来越强，浏览器不仅是浏览器网页，可以调用操作系统的相关的功能，

如果本地文件，图片，摄像头，麦克风 , 调用手机的很多功能 ...

利用 Node.js 平台，可以做 web 服务器开发 ( 后端开发 )

数据库操作，如 NoSql( 非关系型数据库 ), 本身基于 js 的 JSON 格式，支持 JS 作为操作语言。

移动平台开发，如果开发 webapp( 把 JS 和 h5 打包到一个容器中 )

内嵌脚本，其他很多应用可以嵌入 js ，使 js 可以操作对应的应用。

h5 游戏，基于 js 的游戏引擎，可以做各类游戏开发。

3D 特效，利用 3D 的 js 库 (D3.JS,three.js) 可以做各类 3D 项目

JS 与 ECMAScript 的关系

Netspace 网景公司为了与微软竞争，把 js 提交了给了 ECMA 组织，使其进行了国际化标准。 ECMA 主要指定了 JS 的语

法 \ 结构 \ 部署环境等相关标准。 JS 与 ECMAScript 指的都是一种语言。

JavaScript 与 java 没有任何关系， Netspace 公司为了让语言更有名气，蹭 java 的热度，取名叫 JavaScript

ECMA 在 2015 年 发布了 ECMAScript 6(ES6) 的版本，正式更名为 ECMAScript 2015 。

由于 ES6 版本相对于之前版本，改动非常大，所以 ES6 是最出名，现在大家所说的 ES6 指的 ES6 及其后面的版本。

ECMA 以后每年都会发布一个版本

JS 的基本语法

写入 js 代码的方法

JS 的宿主环境是浏览器，所以需要把 js 放入 html 标签，通过浏览器运行 html ，解析运行 js

1. 通过 <script> 标签包裹 js 代码 :

script 脚本标签，告诉浏览器这是一个脚本语言 ,js 代码就放入 script 标签之间。

type="text/javascript" 声明脚本的类型 ,h5 可以省略该属性 (h5 默认的脚本就是 js)

script 标签可以放在任意位置 , 可以有多个 script 标签 2. 通过 script 标签的 src 属性引入外部 js 文件 : 把 js 代码写入 .js 的文件中，通过 src="xx.js" 的方式引入外部文件 ,src

可以引入本地文件或者网络路径文件。

在网站的 js 目录创建 main.js 文件，写入以下代码 :

通过在 html 的 head 标签引入 main.js 文件

1. 浏览器遇到 script 标签回去加载对应的 js 文件并运行，如果 js 文件比较大，可能等等的时间比较久。 可以

给 script 标签添加 defer 属性，让 js 代码异步加载 ( 渲染 html 标签的时候同时加载 js 文件， js 不会阻塞 html

渲染 )

2. js 可能会操作 dom(html 标签 ) ，在头部引入可能 js 运行的时候后面的 html 标签都没有渲染，就会出错。

一般的做法是放在 body 的结束标签之前，引入 js ，这样所有的 html 标签都构建了， js 操作 html 标签不会出错。

语句

JS 程序执行的单位是行 , 也就是一行一行的执行代码。一般情况下，每一行都是一个语句。

如果有 ;( 分号 ) ，则是分号前面为 1 个语句，多个分号分割的语句可以写在一行。 ( 多个语句在一行，必须加 ; 区分 )

如果一个语句一行，则不建议加分号

<script type="text/javascript">

// document 表示当前的网页， write() 可以在当前网页打印内容。

document.write("hello js")

</script>

document.write(" 外部文件 ")

<!-- 引入外部的 js 代码 -->

<script src="./js/main.js"></script>

....

<script src="./js/main.js" defer ></script>

</body>

<script>

document.write("a")

document.write("b")

</script>

<script>

document.write("a");document.write("b");

</script> JS 代码执行语句是从上往下执行。

变量

变量有点像数学里面的未知数。变量可以表示一个值，引用变量就相当于引用了值 ( 变量相当于一个盒子，装不同的

内容，拿到盒子的时候就是拿到对应的内容 )

1. 变量 : 变量是对一个具体值的引用

2. 变量创建后需要赋值才能使用 , 如果不给变量赋值，变量默认值是 undefifined( 未定义 )

3. 创建变量后可以直接赋值

4. 变量不用 var 关键词也是可以直接赋值使用，但是用 var 关键有创建变量的语义，可读性更强。

5. 变量没有声明同时也没有赋值，直接使用会报错。 js 代码运行出错，则会停止后面代码的运行。

f12 在 console 控制台能看到 js 报错信息

6. 可以在同一个 var 关键词中声明多个变量

7. 如果 var 声明了一个已经存在的变量，则无效

8. var 创建变量名的规范和 html 的 id 命名类似：

第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（ $ ）和下划

线（ _ ）

第二个字符及后面的字符，除了 Unicode 字母、美元符号和下划线，还可以用数字 0 - 9 。

var name; // var 创建 一个 name 的变量 ( 声明变量 )

name=" 苹果 " // 变量赋值 ( 把苹果赋值给 name 变量 )

document.write(name); // write 可以处一个变量，由于 name 的值是苹果，程序执行的时候会查询 name 变量对应的

值并使用。

var age;

document.write(age)

var sex="man"; // 等于 var sex; sex = "man"

name1="zhangsan"

document.write(x)

var a,b,c;

a=10;b=14;c=21;

var y=1;

var y=2; // 等于 var y; y=2; var y 失效 ,y=2 是有效的。 变量命名一般要有一定的语义，多个单词的变量用小驼峰命名法 ( 小驼峰 : 第二个单词开始，首字母大写。

大驼峰 : 所有单词的首字母大写 )

js 的变量名区分大小写，大写和小写是不一样的变量

变量命名不能用 js 内置的关键词

JavaScript 有一些保留字，不能用作标识符 ( 变量名 ) ： arguments 、 break 、 case 、 catch 、 class 、 const 、

continue 、 debugger 、 default 、 delete 、 do 、 else 、 enum 、 eval 、 export 、 extends 、 false 、 fifinally 、

for 、 function 、 if 、 implements 、 import 、 in 、 instanceof 、 interface 、 let 、 new 、 null 、 package 、

private 、 protected 、 public 、 return 、 static 、 super 、 switch 、 this 、 throw 、 true 、 try 、 typeof 、

var 、 void 、 while 、 with 、 yield 。

JS 输出信息的方式

在网页上打印出 js 的内容

console.log() 在 f12 后的开发工具的 Console( 控制台 ) 输出内容 , 一般调试 js 或者练习 js 输出内容用这个比较多

Console 可以执行 js 代码，并且使可以用当前页面的 js 声明的变量

alert() 提示消息

prompt() 接受用户信息

JS 的注释

// 单行注释 , 只能注释一行 js 代码

/* */ 多行注释 , 可以注释多行代码

var classRoom; // 小驼峰

var ClassRoom; // 大驼峰

document.write(num)

// document.write() 可以输出 html 标签。最简单生成 dom 的方式。

// 双引号里面只能用单引号，或者单引号里面只能用双引号

var str = "<div class='box'>box1</div>"

var str1 = '<h1 class="box">h1</h1>'

document.write(str1)

console.log(num)

// 弹窗显示内容 ( 提示消息 ), 可以暂停后面代码运行，点击确认以后后面代码再执行

// alert("hello js");

// console.log("after")

var num = +prompt() // + 可以把字符串转为 number 类型，如果转换识别会转为 NaN 类型 ,NaN 转为 bool 就是

false

console.log(typeof(num),num) 数据类型

js 的每一个值的，都属于一种数据类型。 JS 有 6 种数据类型 ( 不包含 ES6 新增的数据类型 )

由于值一般赋值给变量，所以数据类型一般指变量的数据类型。

number,string,boolean 合称为 js 的原始数据类

1. 数值类型 (number) 有整数和小数 , 不能用 "" 或者 '' 包裹

2. 字符串 (string) 文本类型 , 必须用 "" 或者 '' 包裹

3. 布尔值 (boolean) 只有两个值，表示真即 true, 表示假即 false 。主要用于逻辑判断

4. undefifined 表示 " 未定义 ", 由于目标没有定义，所以没有任何的值 ( 一般变量声明没有赋值，默认就是 undefifined

类型 )

5. null 表示空值

6. 对象数据类型 , 主要是各种值组成的集合，可以细分为：

狭义的对象 (object), 数组 (array), 函数类型 (function)

7. js 变量的数据类型是动态变化的，根据赋值的值的类型变化。

8. typeof 运算符可以查看变量的类型

9. typeof() 函数可以查看变量的类型，和 typeof 运算符一样

/*

多行注释

*/

var num1 = 100; // 整数

var num2 = 1.1; // 小数

var num3 = +1; // 正数，一般省略 +

var num4 = -1; // 负数 , 不能省略

var name = "zhang san"

var age = "12"

var ok=true

var nook=false

var sex // 创建变量，没有赋值默认就是 undefined

var c=null

console.log(typeof sex) 算术运算符

js 的算术运算符 提供了 10 个算术运算符，用于完成基本的算术运算。

除了加法可以用在字符串上面，其他的算术运算符只能计算 number 类型。

不符合算术运算的规范的时候，计算结果是一个 NaN 的值。

如果有 = 号， js 先运行 = 号右边代码，然后再把结果赋值左边

1. 加法运算符 +

2. 减法运算符 -

3. 可以把值赋值给变量，通过运算符运算变量

4. 乘法运算符 *

5. 除法运算符 /

6. 指数运算符 **

7. 余数运算符 ( 有余数显示余数，没有余数显示的 0)

console.log(typeof(ok))

var result = typeof(ok) // 可以把查看变量的类型赋值给 result 变量

console.log(result)

var r1 = 100 + 20 + 30; // number 类型的加法就是数学加法计算

console.log(r1)

// 1.1 字符串也可以使用加法，这是就是变为拼接显示

var s1 = "1" + "aa"; // + 可以把多个字符串拼接起来

var s2 = 10 + 12 + "1" // 按算术运算顺序计算，先计算 10+12=22 ，再计算 22+"1"==221

console.log(s2)

var s4 = 20 - 10

var s3 = 10 - 5 - "a" // 由于减法不能有字符串，所以结果是一个 NaN

var width = 100

var height = 200

var r2 = width + height

var r3 = 5 * 5

r3 = 10 / 3

r3 = 2 ** 2 8. 自增运算符 ++x 或者 x++ ( 让 x 自动加 1)

9. 自减运算符 --x 和 x--( 自身变量减 1)

10. 赋值运算符简写

11. 数值运算符 +x, 可以表示一个正数，是一个一元运算符，可以把任何数值转为 number 类型

12. 负数值运算 -x ，和 +x 一样可以把任意值转为 number 类型，变成负数 , 前面会变成负号

区块

区块 , 使用 {} 可以把多个相关的语句组合在一起，称为 block( 区块 )

r3 = 10 % 3

var a = 0

// a++;

++a;++a;++a;

// 7.1 ++x 和 x++ 的区别

var b = 1

// var c = ++b // 先运行 ++b=2 , 再把 2 赋值给 c c = 2

var c = b++; // 先把 b 赋值给 c ，在进行 b 变量的递增 (++ 在后是先使用变量，再对变量递增 )

var a1 = 1

--a1

//8.1 --x 和 x-- 的区别

var a2 = a1-- // --x 是先自减再使用， x-- 是先使用变量，再自减。

// console.log(a2)

var a3 = 10

a3 += 10 // 等价于 : a3 = a3 + 10

a3 -= 5 // 等价于 a4 = a4 - 5

a3 *= 5 // a3 = a3 * 5

a3 /= 5 // a3 = a3 / 5

a3 %= 5 // a3 = a3 % 5

a3 **=5 // a3 = a3 ** 5

console.log(+true) // 由于 true 表示真，在计算机二进制里面表示 1 ，所以会转为 number 类型的 1

console.log(+false) // false 表示二进制的 0 ，所以转为 0

console.log(+"4") // 转为 number 类型的 4

console.log(+"a") // 转不了 number 则显示 NaN

console.log(-false)

var c1 = -1

console.log(-c1) // 可以用负负得正把一个负数变为正数 变量提升

JS 是解释型语言 ( 边编译，边执行 ) ，但是在浏览器上，浏览器会对 js 进行编译，然后再运行。 浏览器编译 js 的时候，会

把所有 var 声明变量的提到代码的第一行。

逻辑运算符

逻辑运算符 , 产生的结果是 boolean 类型

1. 等于 x == y 判断符号 x == y ，如果 x 与 y 的值相同 ( 不会判断数据类型 ) 返回真 (true) ，不相等怎返回假 (false) 。由

于不判断数据类型，字符串和 number 的值可能是相同的

2. 全等于 x === y 全等于 , 需要比较值和数据类型 , 一般用全等于比较，严格一点。

3. 不等于 x!=y 只判断值，不判断数据类型。成立返回 true ，不成立返回 false

4. x !== y 全不等于，比较值和数据类型。

5. ! 非运算符，取 boolean 的反值

6. && 与运算 , 与运算左边和右边同时都为 true 则返回 true ，否则都是返回 false

// var 创建的变量受区块的限制，可以跨区块使用

{

var a = 10

var b = 10

console.log(a+b)

}

{

// var 创建的变量受区块的限制，可以跨区块使用

console.log(a*10)

}

{

console.log(c)

var c=10 // var c;c=10;

}

var a = "3"

console.log(a == 3) // 不要写成一个等号 (=) ，一个等号是赋值 , 如果再判断语句永远都是 true

console.log(a === 3)

console.log(a != 3)

console.log(a !== 3) // a 和 3 的数据类型不同，这个条件成立，返回 true

console.log(!true) // true 的反值是 false

console.log(!!false) // !false 是 true ， !true 的值是 false 7. || 或运算 , 左右两边只要有一个 true ，则返回 true 。只有同时都为 false 的情况才返回 false

() 小括号的作用

1. 在算术运算符中 () 可以提供计算的优先级，有括号的先计算

2. () 可以把 js 放在 () 里面，表示一个整体

3. 可以提高逻辑运算符的优先级

if 条件语句

条件语句 : js 提供了 if 结构和 switch 结构，完成条件判断，只有满足预设的条件，才能执行响应的语句。

1. if 结构的小括号里面的 boolean 是 true 则会执行紧挨着 if 的语句 ( 只有一条 )

console.log(true && true) // 两边同时为 true 返回 true ，只要有一个 false 则返回 false

// 一、 && 与逻辑运算符 , 两边都要执行，同时为 true 才返回 true

console.log(false && false)

console.log(1 === 1 && 2 === 3)

var x = 2

var y = 3

// 与逻辑运算符左右量可以写 js 的表达式

// console.log(x === 2 && console.log(" 右边执行 "))

console.log( false || false)

|| 或逻辑运算符，如果左边是 true ，不会执行右边的代码 .

console.log(x === 1 || console.log(" 右边执行 "))

var a = ""

var b = a || 1 // || 逻辑会判断左边是否为 true( 如果左边不是 boolean 类型，会转为 boolean 类型 )

// 0 转为 boolean 的 false ，非 0 则转为 true

// undefined 转为 boolean 是 false

// null 转 boolean 是 false

// NaN 转 boolean 是 false

// "" 空字符串转 boolean 是 false

console.log((3+5)*2)

var a = -(-1)

console.log((false && true) || (false && true))

if (boolean)

语句 if(false)

console.log("is true1") // 如果 if 条件为 true ，则只会执行这一行代码。

// 后面的代码没有挨着 if 语句，不受条件限制。

console.log("is true2")

var x = 10

console.log(x)

2. 如果挨着 if 结构的语句是代码块，如果 boolean 为 true ，则整个代码块都会被执行 , 一般常用该方法。

if(boolean){

....

}

if(false){

console.log("is true1") // 如果 if 条件为 true ，整个 {} 代码块里面的语句都会执行

console.log("is true2")

}

3. if() if 括号里面的条件如果不是 bool 类型，则会自动转 bool 类型。一般 if 结构的条件以逻辑运算符居多

if(1 === 3 || 4 === 4){

console.log("goood")

}

4. else 语句

if(boolean){ // boolean 为 true 执行挨着 if 语句的代码块

...

} else { // boolean 为 false 则执行挨着 else 的语句。 else 必须挨着 if 语句

...

}

var age = 12

// 大于 > , 小于 < , 大于等于 >= , 小于等于 <=

if(age <= 10){

console.log(" 小于等于 10 岁 ")

} else {

console.log(" 大于 10 岁 ")

}

5. 多条件判断语句 else if(boolean){}, else if 必须挨着 if 语句或者 else if 语句 , 多个条件中只会执行一个 , 如果 bolean

为 true ，则会停止后面的条件判断。 switch 条件结构语句

switch 主要是简化多条件判断语句，用 x 去和 case 后面的值做全等于 (===) 比较 , 如果为 true 则会执行 case 里面的

语句， break 是不会执行后面的语句，直接跳出 switch 语句

if(age < 10){

console.log(" 小于 10")

} else if(a < 20){

console.log(" 小于 20")

} else if(a < 30) {

console.log(" 小于 30")

} else { // 如果前面的条件都不成立，则执行 else 语句

console.log(" 大于等于 30")

}

// 需求 : 95-100 完美 , 80-95 优秀， 70-80 良好， 60-70 及格 , 60 以下不及格。根据一个分数，判断是

属于哪个等级。

var score = 75;

if(score <=100 && score > 95){

console.log(" 完美 ")

} else if(score <=95 && score > 80){

console.log(" 优秀 ")

} else if(score <=80 && score > 70){

console.log(" 良好 ")

} else if(score <=70 && score >= 60){

console.log(" 及格 ")

} else {

console.log(" 不及格 ")

}

// 编程语言的最大特点是根据不同的思想有不同的写法，不同的代码写法运行的效率也不一样。

if(score < 60){

console.log(" 不及格 ")

} else if(score <= 70) {

console.log(" 及格 ")

} else if(score <= 80){

console.log(" 良好 ")

} else if(score <= 95) {

console.log(" 优秀 ")

} else {

console.log(" 完美 ")

} 循环语句

主要用于执行重复的某个操作

while 循环语句

switch(x){

case value1:

语句 1;

break;

case value2:

语句 2;

break

default:

语句 3

}

var name = " 张 "

switch(name){

case " 张 ": // 等价于 name === " 张 "

console.log("number1")

break // 执行语句遇到 break 终止后面代码执行，跳出 switch 语句，执行 switch 后面语句

// 如果不加 break ，如果 case 条件为 true 以后，后面的 case 语句都不会在去比较，会直接执行里面的

语句。 switch 语句必须加 break

case " 李 ":

console.log("number2")

break

default: // 执行到 default 运行里面的语句

console.log("number1000")

}

console.log("over")

// 如果排名是 100 名或者 90 名 , 表示中一等奖

// 如果排名是 80 或者 85, 表示二等奖

// 其他的没有奖

var sort = 80

switch(sort){

case 100: // 相同条件 ( 或逻辑 ) ，可以用该写法。

case 90:

console.log(" 一等奖 ")

break

case 80:

case 85:

console.log(" 二等奖 ")

break

default:

console.log(" 没有奖 ")

} for 循环语句

指定循环的其他初始化的一个 number 值，循环的终点到 number 增加到多少 , 终止条件，当终止条件为 true 则循环执

行 for 语句，为 false 则终止循环执行 for 语句后面的语句

while(bool){ // bool 为 true, 则会循环 ( 执行 ) 代码块的语句。执行完成一次后就回到 while 判断 bool ，一直重复下

去。如果 bool 为 false 则不会执行 while 语句，会执行 while 后面的语句。

语句

}

// while 循环环境

var i=0;

while(i < 100){ // 如果 while 的条件一直为 true, 容易进入死循环，当前页面的内存占满，页面会崩溃。 while 一般

需要有结束条件

i++

console.log(i)

}

for(1. 初始化表达式初始化一个 number 变量 ;2. 终止条件为 true 执行 false 则终止 ;3. 递增表达式递增变量 ){

4. 语句

}

第一次 for 循环执行 1,2, 4 执行代码块语句 ,3. 递增

第二次以及后面 : 2,4,3

如果 2 位 false ，则退出 for 循环，执行 for 后面语句

for(i=1;i<=100;i++){

// console.log(i)

}

// 声明变量并初始化变量

for(var j=0;j<=100;j++){

console.log(j)

}

// 输出 100 以内的偶数

for(var k=1;k<=100;k++){

if(k % 2 === 0){

console.log(k)

}

}

// 输出 3 行数字，每行数字都是从 1-10 的排列

for(var y=1;y<=20;y++){

var str = "";

for(var x=1;x<=10;x++){

str +=" " + x

}

str = "<p>"+str+"</p>"

document.write(str)

}

//

for(var a1=1;a1<=5;a1++){

for(var b1=1;b1<=a1;b1++){

document.write("*") do...while 循环语句

和 while 比较类似，都是循环。先执行 do 后面的代码语句，再判断条件是否为 true ， true 则循环执行 do...while 。如果

为 false 则终止循环，执行 while 后面语句

break 语句。

可以跳出循环代码块

1. 跳出 switch

2. 跳出循环语句 for,while ， do...while

continue

终止当前这一次循环，返回循环头部执行后面循环

}

document.write("<br/>")

}

do{

语句

} while( 条件 )

var i=0;

while(i<100){

i++

// 从 100 里面找出等于 10 的数字，找出以后后面不需要再执行循环，可以加 break 跳出当前循环，这样就节

省了 cpu 计算资源。

if(i === 10){

console.log(i)

break

}

}

for(let j=1;j<=100;j++){

if(j===50){

console.log(50)

break

}

}

for(var k=1;k<=10;k++){

if(k===4){

// 终止当前循环 (continue 后面语句不会执行 ) ，继续执行后面的循环

continue

}

console.log(k)

}