教程揭秘 | 动力节点内部Java零基础教学文档第四篇：HTML_CSS_JavaScript（3）

2023-11-01 09:52 作者:动力节点 0人读过 | 我要投稿

接上期后续

本期分享第四章节-JavaScript

第四章都马上分享完了哦，大家都跟上了吗？

跟上的我就不得不说真厉害~

没跟上的要加油了！

但时间还久，后面要学还有很多~

大家需保持耐心慢慢来

争取你们学习的速度！

跟上我更新的速度哦~

今日新篇章

【JavaScript】

1. JavaScript的简介

1.1 JavaScript的诞生

在1995年前后，当时世界上的主流带宽为28.8Kbps，现在世界平均下载带宽为21.9Mbps。当时的网民，每提交一次表单，都需要等待很久才能收到服务器的回应，甚至很可能等了几分钟收到的却是说缺少了某一项。为了改善用户体验，嵌入浏览器客户端的能实现简单表单判断的脚本诞生了，这就是JavaScript。

JavaScript最早是工作于Netscape （网景公司）的 Brendan Eich为即将在1995年发行的NetscapeNavigator 2.0（NN2.0）开发的，当时叫做LiveScript。由于当时是和非常热门的Sun公司合作的，为了赶上当时的潮流——Java语言，这门语言被命名为JavaScript。

1.2 JavaScript跟Java有什么关系？

这也是外行人听到JavaScript的第一反应，也是这门语言被诟病最多的问题之一。

一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript。如同“北大”和“xxxx鸟”的关系。“北大青鸟”就是傍“北大”大牌。

严格的说，没有半毛钱关系。如果非要扯上关系，也许就是两者的部分函数相同、面向对象思想、判断结构、循环语句相同等等等等，但这些显然不是Java的专利，而是编程语言的共识。

1.3 JavaScript的标准化及发展历史

JavaScript推出时，用户体验更好的NN 浏览器主宰了浏览器市场，而微软一直在追赶。在推出IE3的时候，微软发布了VBScript并以JScript为名，实际上和Netscape的JavaScript没有多大区别（用今天的话来讲就是山寨）。面对微软的竞争，Netscape和Sun公司将自己的JavaScript草案提交给ECMA（欧洲计算机制造商协会）对JavaScript进行了标准化，最后形成了ECMAScript 的第一个版本（ECMA-262）。

有意思的是，网景公司在标准化JavaScript之后，内部却出现了问题，JavaScript的研究停滞，而微软则趁机赶超，推出了IE4，内置了第一个遵循ECMA规范的JavaScript引擎，比NN提前了一年。再加上微软系统逐步占领计算机操作系统市场，其预装的IE浏览器市场份额逐渐加大，NN不断被挤占市场。然而，当微软失去了最大的对手后，它就没有了发展的动力，IE6~IE8，无论是界面渲染还是脚本执行，都互不兼容，成为浏览器史上的一朵奇葩，也是前端开发者的噩梦。

1.4 今天的JavaScript

2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能。

2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。

2007年乔布斯发布了iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。
JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，人们越来越重视JavaScript了。

2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。

2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

1.5 JavaScript的概述

JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言，也是世界上最流行的编程语言。javascript的出现使得网页和用户之间实现了一种实时性的，动态性的，交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。同时javascript短小精悍，在客户机上执行，大大提高了网页的浏览速度和交互能力。

JavaScript ，它包含了三大部分：ECMAScript、DOM、BOM

l ECMAScript：ECMAScript是JavaScript这门语言的核心组成，是这门语言的精髓所在。包括变量定义，垃圾回收，语法，作用域等等，需要我们去不断钻研。

l DOM：文档对象模型(document object model)。我们知道标签的嵌套，就产生了父子关系，而DOM，提供了大量的API，让我们可以轻松操作DOM树。使用DOM，我们能动态修改页面内容，调整样式等等，这也是JS多样化的一个体现。

l BOM：浏览器对象模型(brower object model)。和DOM类似，只不过主体变成了浏览器。浏览器同样提供了大量的API，其中部分对JS开放，为我们提供了操作浏览器窗口的方法。

1.6 JavaScript的特点

1. JavaScript是一种脚本语言（脚本语言又被称为扩建的语言，或者动态语言，是一种编程语言，用来控制软件应用程序，脚本通常以文本（如ASCII)保存，只在被调用时进行解释或编译。），它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

2. JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。这是我们在面向对象编程中非常喜欢看见的！

3. 简单性：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型(代码结束后可以不用写分号,区分大小写，只有var一种数据类型)，并未使用严格的数据类型。 int i = 10; var i = 10; boolean flag = true; var flag = true

4. 安全性：它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。（这点体会还不深）

5. 动态性：javascript可以直接对用户或者客户输入做出响应，无须经过Web服务程序。他对用户的反映响应，是采用以事件驱动的方式进行的。也就是当我们按下鼠标，移动窗口，采择菜单等事件发生时响应的。

6. 跨平台性：Javascript是依赖浏览器本身，与操作环境无关，只要能运行浏览的计算机，并支持javascript的浏览器就可以正确执行。

2. 第一个程序

2.1 程序的书写位置

HTML 中的脚本必须位于<script> 与</script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 或 <head> 中。

【示例】：把script标签放在head中

那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

注意：一个文档中可以书写多组script标签。

2.2 javaScript注释

程序中，为了便于理解、教学，我们可以写一些给人看的东西，这些内容就是注释，程序不会运行。

注意：使用多行注释的时候，切记不要相互嵌套。

在WebStorm中，单行注释的快捷键为：Ctrl+/，多行注释的快捷键为：Ctrl+shift+/

2.3 JavaScript输出

2.3.1 控制台输出

console.log控制台输出

<script>
console.log("Hello World!");
</script>

2.3.2 写入文档

通过JS动态的的写入文档

2.4 引用外部JavaScript

外部引用就是引用HTML文件外部的JavaScript文件，这种方式可以使代码更清晰，更容易扩展。

我们可以通过HTML的script标签中的src属性来加载外部的JavaScript文件。

src：指向的是外部JavaScript文件，注意JavaScript文件必须使用js为文件后缀。

如果通过script标签中的src属性来引入外部的JavaScript文件，那么标签<script></script>之间不能添加代码块。

注意：一个文档中可以包含多组script标签，代码的执行是由上到下顺序执行的。

3. variable变量

3.1 声明变量

l 变量名必须以字母(包含大小写字母)、下划线(_)、$和数字组成，变量不能以数字开头；

l 不能使用JavaScript中的关键字作为变量名(var、true等)；

l JavaScript变量名是严格区分大小写的； wangErMaZi

l 变量命名使用“小驼峰”命名法则，第一个单词首字母小写，第二个单词起首字母大写，例如userName。

我们可以在一条语句中声明很多变量。该语句以var开头，并使用逗号分隔变量即可：

<script>
var age, name;

var age =20,name=”李四”;
</script>

3.2 变量赋值

我们可以先声明一个变量，然后再对这个变量赋值。

也可以声明和赋值合在一起写, 建议写法

3.3 变量类型

Java语言属于强类型语言，在强类型语言中，定义变量必须明确变量的数据类型，变量创建成功之后类型就不能改变啦，例如：

JavaScript属于弱类型语言，定义变量的时候，我们只需要使用var关键字修饰即可。变量的类型由赋值的数据决定，我们可以通过 “typeof 变量名”或“typeof(变量名)”来查看变量的类型。

4. 数据类型

JavaScript中的数据类型分为基本数据类型和引用数据类型。

基本数据类型: number、boolean、undefined、null、string

引用数据类型: Object(Array, Function, Object, Date等)，后续再讲。

4.1 基本数据类型

4.1.1 number类型

Number类型，即数值类型, 包含：整数型、浮点型、NaN(not a number)和Infinity（正负无穷大）

定义一个整型:

定义一个浮点型:

注意：因为小数的存储特点，两个小数做运算，得到的结果未必精确。

+-Infinity正无穷大和负无穷大

注意：在java语言中，如果分母为零，则直接抛出算数异常。

NaN全称: NOT A NUMBER。

我们可以通过isNaN()函数来判断某个变量是否为NaN，例如：如果value是NaN，则isNaN(value)返回的结果是true；如果value不是NaN，则isNaN(value)返回的结果是false。

4.1.2 boolean类型

boolean: 布尔类型，布尔类型只有两个值：true 和 false
true: 表示为真或条件成立
false: 表示为假或条件不成立

boolean类型常用于条件判断中，如果条件成立，则返回true；条件不成立，则返回false。

4.1.3 undefined类型

undefined类型只有一个值，就是undefined
表示只声明但未赋值的变量。

4.1.4 string类型

string类型就是字符串，在JavaScript语言中，使用单引号或双引号包裹的内容，我们都称之为字符串。

字符串简单使用：字符串的拼接，可以用“+”来做拼接。

4.1.5 null类型

null类型只有一个值，就是null，从逻辑角度看，null值表示一个空对象指针。

因为null表示的是一个空对象的指针，所以使用typeof操作符检测null会返回object的原因。

本质上这是一个bug，因为当初设计JavaScript这门语言的时候比较仓促，后来发现的时候已经好多开发者在使用了，如果修改这个bug对原有项目的代码改动极大，所以就只能将错就错了。

4.2 数据类型转换

4.2.1 1.强制类型转换

JS中常见的3种强制类型转换

Number(value)——把给定的值转换成数字(可以是整数或浮点数)

Boolean(value)——把给定的值转换成Boolean型

String(value)——把给定的值转换成字符串

4.2.1.1 Number(value)

Number(value)——把给定的值转换成数字(可以是整数或浮点数)，它转换的是整个值，而不是部分值。

4.2.1.2 Boolean(value)

Boolean(value)——把给定的值转换成Boolean型。

当value其值为 0、-0、null、""、false、undefined 或 NaN 时，那么Boolean()转换成Boolean类型的值为 false。

4.2.1.3 String(value)

String(value)——把给定的值转换成字符串

4.2.2 隐式类型转换

我们知道：number类型和number类型可以相加，作为数字类型的加法运算; string类型也可以和string类型相加，相当于拼接字符串。

那么不同的数据类型可以相加吗? 比如string类型和number类型?

因为JavaScript的数据类型是非常弱的，在使用算术运算的时候，JS的引擎在运算之前把number类型悄悄的进行了隐式转换，把number类型隐式转换为string类型，然后做了string类型与string类型的拼接。

通过上面的代码输出结果我们发现，隐式转化其实也是按照我们前一节强制转换的规则来转换的，在我们今后的JavaScript学习过程中，会经常的遇到隐式类型的转换，所以大家一定要记住强制转换之间的规则，尤其是Boolean()的隐式转换。

总结: “+”既可以表示字符串连接，又可以表示算术加，这取决于它的操作数，如果有一个为字符串的，那么就是字符串连接了。

此外，隐士转换在if逻辑分支语句中也是用非常多。

例如：判断一个对象是否存在

思考：以下代码输出值为? 值的类型为?

通过隐式转换,把string转化为number

通过隐式转换,把number转化为string

4.2.3 parseInt和parseFloat函数

4.2.3.1 parseInt函数

parseInt() 函数可解析一个字符串，并返回一个整数。

总结：如果参数第一个字符不是数字，返回NaN；如果参数第一个字符是数字，则返回前面找到的所有的数字字符。

注意: 开头和结尾的空格是允许的。

4.2.3.2 parseFloat函数

parseFloat() 函数可解析一个字符串，并返回一个浮点数。

总结：如果参数的第一个字符不是数字，则返回NaN；如果参数的第一个字符是数字，则返回前面找到的所有的数字字符（包含小数）。

注意:开头和结尾的空格是允许的。

5. 弹出框

5.1 弹出框的分类

警告框 alert, 常用。

询问框 prompt返回提示框中的值。类型为string

确认框 confirm返回true/false 。

5.2 alert警告框

alert(message)的作用是弹出一个提示框或者警告框，纯提示作用

参数描述

message 在window上弹出的对话框中显示的纯文本

示例代码

5.3 prompt询问框

prompt(message)的作用是弹出一个询问框，可以让用户输入一个值。

参数描述

message 输入文字的提示信息

示例代码

因为prompt是window对象的函数，也可以通过window.alert()来调用。

5.4 confirm确认框

confirm(message)的作用是弹出一个提示框或者警告框，纯提示作用。

参数描述

message 确认的提示信息

示例代码

6. 表达式与运算符

6.1 运算符的分类

1，算术运算符(+ - * / % ++ --)

2，赋值运算符(= += *= /= %=)

3，条件运算符(=== == > >= < <= != )

4，字符串运算符(+ +=)

5，逻辑运算符(&& || !)

6，三元运算符( （条件表达式1）？表达式2：表达式3 )

7，运算符优先级

6.2 赋值运算符

= 把右边的值赋值给左边。

6.3 算术运算符

6.3.1 2.1 二元运算符

加减乘除

取余，返回两个数相除之后的余数

【课堂练习】

获取一个三位数的整数的个位、十位和百位

6.3.2 2.2 一元运算符

++ 自增运算符。如num++和++num，都等价于num = num + 1

num++和++num的区别

++num 先自增，后参与运算

num++ 先参与运算，后自增

-- 自减运算符。如num--和--num，都等价于num = num - 1

num--和--num的区别

--num 先自减，后参加运算

num-- 先参与运算，后自减

注意：5++或++5是错误的，想想这是为什么呢？

【课堂练习】

var a = 3, b = 4; 求a++ / 3 + --b * 2 - a-- % 6 + b++ * 3 - ++b的值

6.4 赋值运算符

赋值运算符相对于比较简单，此处就不做过多的讲解。

只需要注意一点：

6.5 比较运算符

比较运算符常用在逻辑语句中使用，以测定变量或值是否相等。

比较运算返回一个boolean类型的值，满足条件返回true，否则返回false。

6.5.1 等于(==)

== 只比较内容，不比较类型。只要内容的值相同，返回true，否则返回false。

6.5.2 全等于(===)

=== 既要比较内容,还要比较类型。只有内容和类型都相同才返回true,否则返回false

注意："="是赋值运算符，"=="或“===”才是比较两个内容是否相等

6.5.3 不等于(!=)

!= 只比较内容，不比较类型。

6.5.4 不全等于(!==)

!== 既要比较内容，还要比较类型。

6.6 逻辑运算符

6.6.1 &&(逻辑与)

&&(逻辑与) 表示“而且”的意思，属于短路运算。

6.6.1.1 当值为boolean类型时

判断第一个参数, 如果第一个参数为true, 则直接返回第二个数。

判断第一个参数, 如果第一个参数为false, 则直接返回第一个数。

总结: 逻辑与对于布尔值，只要有一个false，就返回false。

判断第一个参数, 如果第一个参数为true,，则直接返回第二个数。

判断第一个参数, 如果第一个参数为false,，则直接返回第一个数。

6.6.1.2 当值为非boolean类型时

先判断第一个数, 如果第一个数为true, 则返回第二个数; 如果第一个参数为flase, 则直接返回第一个数。

注意: 值是否为true或false，是根据数值的隐式boolean转换而来的。

【随堂练习】

1、判断一个数是否在4（包含）~6（不包含）之间；

6.6.2 ||(逻辑或)

||(逻辑或) 表示“或者”的意思，属于短路运算。

6.6.2.1 当值为boolean类型时

判断第一个参数, 如果第一个参数为true，则直接返回第一个数

判断第一个参数, 如果第一个参数为false，则直接返回第二个数

总结: 逻辑或对于布尔值，只要有一个为true，就返回true

判断第一个参数, 如果第一个参数为true，则直接返回第一个数

判断第一个参数, 如果第一个参数为false，则直接返回第二个数

6.6.2.2 当值为非boolean类型时

先判断第一个数, 如果第一个数为true, 则返回第一个数; 如果第一个参数为flase, 则直接返回第二个数。

注意: 值是否为true或false，是根据数值的隐式boolean转换而来的。

【随堂练习】

1、判断一个数是否在4（包含）~6（包含）之外；

6.6.3 !(逻辑非)

!(逻辑非) 表示取反的意思

6.6.3.1 当值为boolean类型时

6.6.3.2 当值为非boolean类型时

6.7 三目运算

三目运算语法:

条件表达式 ? 满足条件执行 : 不满足条件执行

找出两个数中的最大值

6.8 操作符优先级

7. 选择结构

7.1 if语句

if…else语句完成了程序流程中的分支功能，如果其中的条件成立，则程序执行相应的语句。

if…else语句的语法如下：

7.2 switch语句

分支语句switch可以根据一个变量的不同取值而采取不同的处理方法，在程序设计中提供不同的分支，这样的语句叫做分支语句。

Switch语句的语法如下：

switch (expression){

case const1:

语句块1

case const1:

语句块2

……

default:

语句块N

}

在同时可以使用switch和if时推荐使用switch以获得更好的效率

8. 循环结构

8.1 for循环

for (初始化部分；条件部分；更新部分){

语句块…

}

for (var i=0;i<=10;i++) {

alert(i);

}

8.2 while循环

while(条件) {

语句块；

}

var i=0;

while(i<=10){

alert(i);

i++;

}

8.3 do-while

do{

语句块；

}while(条件)

var i=0;

do{

alert(i);

i++;

}while(i<=20);

break语句是结束当前的循环，并把程序的控制权交给循环的下一条语句。

这里是结束循环，循环到此为止

continue语句是结束当前的某一次循环，但是并没有跳出整个的循环。

这里是结束一次循环，整个循环还在进行

9. 字符串

string字符串是用来存储一系列的字符的集合, 用于存储和处理文本，在js中属于基本数据类型中的一种。

9.1 字符串的创建

通过字面量来创建字符串

var str1 = "hello world!";
var str2 = 'hello world!';
console.log(str1); // 输出："hello world!"
console.log(str2); // 输出："hello world!"

注意：可以用双引号，也可以用单引号。

通过new String()的方式创建字符串

var str3 = new String("hello powernode");
console.log(str3); // 输出："hello powernode"

9.2 字符串常用的属性

获取字符串的长度

var str1 = "hello world!";
console.log(str1.length);

9.3 字符串常用的方法

9.3.1 获取指定索引的字符

string.charAt(n), n取值从0开始, 取值范围为0~length-1, 超出范围返回空字符串。

var str = "你好,武汉!";
console.log(str.charAt(1)); // 输出："好"
console.log(str.charAt(100)); // 输出：""

9.3.2 字符串截取

9.3.2.1 subStr字符串截取 substring

string.subStr(start, [length])

start: 截取字符串的起始位置 (包含起始位)

length:【可选】截取字符串的长度，不设置长度默认字符串的截取从开始到结束

返回值：成功返回返回指定位置的字符串, 失败返回空字符串

9.3.2.2 slice字符串截取

string.slice(start, [end])

start: 截取字符串的起始位置(包含起始位置)
end:【可选】截取字符串的截止位置(不包含结束位置)，不设置结束位置默认字符串的截取从开始到结束
返回值：成功返回返回指定位置的字符串, 失败返回空字符串

9.3.3 大小写字母转换

9.3.3.1 toLocaleUpperCase()

var str = "hello world!";
console.log(str.toLocaleUpperCase()); // 输出："HELLO WORLD!"

9.3.3.2 toLocaleLowerCase()

var str = "HELLO WORLD!";
console.log(str.toLocaleLowerCase()); // 输出："hello world!"

9.3.4 字符串转化为数组

string.split(value), 根据value来把字符串转化为数组

9.3.5 字符串编码解码

为什么要对字符串进行编码和解码？

只有字母和数字[0-9a-zA-Z]、一些特殊符号“$-_.+!*'(),”[不包括双引号]、以及某些保留字，才可以不经过编码直接用于URL。如果网址路径中包含汉字，那么就需要对中文的字符进行编码

9.3.5.1 编码

encodeURIComponent()返回编码为有效的统一资源标识符 (URI) 的字符串

var url = "http://www.baidu.com/login?username=德玛&password=不告诉你";
var encodeURL = encodeURIComponent(url);

返回值:
http%3A%2F%2Fwww.baidu.com%2Flogin%3Fusername%3D%E5%AE%89%E5%BE%B7%26password%3D%E4%B8%8D%E5%91%8A%E8%AF%89%E4%BD%A0

9.3.5.2 解码

解码跟编码一致，把编码好的字符转化为编码前

console.log(decodeURIComponent(encodeURL));

返回值：

http://www.baidu.com/login?username=安德&password=不告诉你

console.log("encodeURI: "+encodeURI(s4));

console.log("decodeURI: "+decodeURI("http://wwww.baidu.com?txt=java%E7%AE%80%E5%8D%95%E5%90%97"));

//将其他普通字符串编码与解码

var s5 = "哈哈，你是王二麻子";

console.log("escape: "+escape(s5));

console.log("unescape: "+ unescape("%u54C8%u54C8%uFF0C%u4F60%u662F%u738B%u4E8C%u9EBB%u5B50"));

9.3.6 特殊字符处理

如何表示以下字符串呢?

"恩格斯说过："一个民族要想站在科学的高峰，就一刻也不能没有理论思维。""

在 JavaScript 中，字符串使用单引号或者双引号来起始或者结束。
那么以上的字符串将被截为多个字符串, 要解决这个问题那么此处就需要用到转义符了。

在JavaScript 中我们可以使用反斜杠来向文本字符串添加特殊字符。

下面的表格列出了其余的特殊字符，这些特殊字符都可以使用反斜杠来添加到文本字符串中：

代码输出

\' '

\" "

\ \ \

\n 换行符

\t 制表符

9.3.6.1 常见的转义字符

var str = "恩格斯说过：\"一个民族要想站在科学的高峰，就一刻也不能没有理论思维。\"";

输出单引号

console.log('好好\'学习'); // 输出：好好'学习

输出反斜杠

console.log("好好\\学习\\"); // 输出：好好\学习\

9.3.6.2 转义符"\"的妙用

假如我们需要以下的字符串，我们该怎么用字符串去表示呢？

常规的解决方式：

以上方式太麻烦, 我们也可以这样来实现

10. 数组

在程序语言中数组的重要性不言而喻，JavaScript中数组也是最常使用的对象之一，数组是一个有序集合，由于弱类型的原因，JavaScript中数组十分灵活、强大，不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素，JavaScript在同一个数组中可以存放多种类型的元素，而且是长度也是可以动态调整的，可以随着数据增加或减少自动对数组长度做更改。

10.1 数组的创建

通过字面量来创建数组

通过构造函数来创建数组

10.2 数组常用属性

获取数组长度

var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.length); // 输出: 6

如果手动设置数组的length属性值, 当设置的值小于数组的长度的时候,数组会自动删除超出length长度的元素

如果把length设置为大于数组本身长度的时候，数组也会自动扩张，但是并不会为数组添加新元素，只是在尾部追加空空间

10.3 简单操作数组

10.3.1 通过索引访问数组元素

索引index的取值范围为0到length-1之间, 访问index不存在的元素的时候返回undefined

10.3.2 通过索引添加数组元素

10.3.3 通过索引修改数组元素

10.4 数组遍历

10.5 数组常用方法

10.5.1 数组元素的添加

添加一个或多个元素到数组末尾位置, 并返回数组的长度

添加一个或多个元素到数组开始位置, 并返回数组的长度

10.5.2 数组元素的删除

删除最后一个元素, 并返回被删除的元素的值

删除第一个元素,并返回被删除元素的值

10.5.3 Splice

从数组中添加/删除项目，然后返回被删除的项目(如果有的话), 注意该方法会改变原始数组。

array.splice(start, deleteCount, [items])

start:【必须】整数，规定添加/删除项目的位置(包含)，如果使用负数可从数组结尾处规定位置

deleteCount:【必须】要删除的项目数量。如果设置为 0，则不会删除项目。

items:【可选】向数组添加的新项目, 可以为一个元素也可以为多个元素。

指定位置删除元素

指定位置插入元素

插入和删除同时进行

10.5.4 数组转字符串

11. 函数

函数: 就是可被重复调用执行的代码块。

11.1 函数的定义

1、function是一个关键字, 和var、typeof一样, 都是关键字, 后面要加空格;
2、函数名的命名规范和变量命名一样, 只能是字母、数字、下划线、美元符号, 不能以数字开头, 一般采用驼峰式命名大;
3、函数名后的()中放置函数形参, 形参可以为任意多个(意味着可以没有形参), 如有有多个形参用","隔开;
4、函数{}中就是需要执行的代码块。

11.1.1 函数的调用

函数名(实参1, 实参2, ... , 实参3);

1、函数名应和被调用的函数名保持一致;
2、实参和形参可以个数可以不用一一对应;

11.1.2 函数的运用

计算两个数的和

在JavaScript中，我们可以在函数内部中声明函数。

11.2 函数表达式

11.2.1 匿名函数

使用function关键字声明一个函数，但未给函数命名，所以叫匿名函数

11.2.2 函数表达式

使用function关键字声明一个函数，但未给函数命名，最后将匿名函数赋予一个变量，叫函数表达式。

函数也是一种数据类型, 属于Object对象类型中的一种

函数表达式非常重要, 今后我们会经常使用。

11.3 arguments对象

在javascript函数体内，标识符arguments具有特殊含义。它是调用对象的一个特殊属性，用来引用Arguments对象。 Arugments对象就像数组，注意这里只是像但本质上并不是一个数组。

11.3.1 arguments的length属性

判断用户输入，如果只输入两个数，就返回两个数的和，如果返回三个数，就返回三个数的和。

11.3.2 利用arugments对象像数组的特性获取实参

通过arguments查找最大值

11.3.3 arguments的callee属性

arguments.callee在递归中会经常使用, 如果在函数中调用再次调用当前函数强烈建议使用arguments.callee。

实例：不用循环实现计算1*2*3*4...*9*10的值

11.4 变量的作用域

变量按照作用域划分有局部变量和全局变量。

11.4.1 局部变量

在JavaScript函数内部声明的变量(使用var声明的)是局部变量，所以只能在函数内部访问它（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

注意：只要函数运行完毕，局部变量就会被销毁回收。

11.4.2 全局变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

在函数内部没使用var来声明的变量也属于全部变量。

注意: 在函数内部使用某一个变量, 会优先查看函数内部中是有这个变量, 如果函数内部有这个变量, 那么使用的这个变量就是函数内部声明的变量; 反之函数内部没有这个变量, 那么使用的变量就有可能是函数外部的变量(最后如果在全局变量中也没有，那么直接提示错误)）。

11.4.3 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行完毕后被销毁。
全局变量会在页面关闭后被销毁。

11.4.4 扩展

在JavaScript中没有块级作用域, 只有函数作用域。
在C, Java等语言中是有块级作用域的, 块级作用域内的变量为局部变量, 块级作用域意外不能够访问, 而在JavaScript中局部变量只可能存在于函数中。

12. 对象

JavaScript 提供多个内建对象，比如 Object、String、Date、Array 等等，此外 JavaScript 允许自定义对象。

对象只是带有属性和方法的特殊数据类型。

12.1 创建 JavaScript 对象

12.1.1 通过new关键字创建对象

12.1.2 通过字面量创建对象

注意: 属性名字可以加双引号也可以不加双引号。

12.1.3 通过构造函数创建对象

12.2 访问对象的属性

12.2.1 通过点语法访问对象属性

12.2.2 通过中括号法访问对象属性

中括号法可以用变量作为属性名，而点方法不可以；
中括号法可以用数字作为属性名，而点语法不可以。

12.3 访问对象的方法

12.4 this关键字

this是JavaScript语言的一个关键字。

它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。

随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

12.4.1 纯粹的函数调用

这是函数的最通常用法，属于全局性调用，因此this就代表全局对象(Global)。

因为我们使用window.fun()来调用函数，调用函数的那个对象是window，所以this指向的也是window。

12.4.2 作为对象方法的调用

作为对象方法的调用，this 指向当前实例对象。

因为使用point.moveTo()来调用函数，调用函数的那个对象是point，所以this指向的也是point。

12.4.3 作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象(object)，这时this就指这个新对象。

12.5 for...in 循环

for...in 语句用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次，就会对数组的元素或者对象的属性进行一次操作。

【语法格式】

12.6 eval()函数

eval()函数会将传入的字符串当做JavaScript代码进行执行，例如：eval("2+3") 返回的是5。。

把JSON字符串转化为js认识的对象：

注意：eval()是一个危险的函数，从安全性来讲不建议使用！

扩展：JSON(JavaScript Object Notation, JavaScript对象标记) 是一种轻量级的数据交换格式。

13. Math和Date

13.1 Math对象

round 四舍五入获取整数

console.log(Math.round(-1.5)); // 输出：-1

floor 向下取整地板

console.log(Math.floor(1.8)); // 输出：1
console.log(Math.floor(1.3)); // 输出：1
console.log(Math.floor(-1.6)); // 输出：-2

ceil 向上取整天花板

console.log(Math.ceil(1.2)); // 输出：2
console.log(Math.ceil(1.9)); // 输出：2
console.log(Math.ceil(-1.9)); // 输出：-1

abs 取绝对值

console.log(Math.abs(-19)); // 输出：19
console.log(Math.abs(-90.01)); // 输出：90.01

PI 返回圆周率

console.log(Math.PI); // 输出：3.141592653589793

min 返回 x 和 y 中的最小值

console.log(Math.min(20, 30)); // 输出：20

max 返回 x 和 y 中的最大值

console.log(Math.max(20, 30)); // 输出：30

pow 返回 x 的 y 次幂

console.log(Math.pow(2, 4)); // 输出：16

random 返回一个介于 0 和 1 之间的随机数(包括0,不包括1)

console.log(Math.random()); // 输出：0到1之间的随机数

13.2 Date对象

Date 对象用于处理日期和时间。

13.2.1 创建Date对象

13.2.2 Date对象方法

setTime() 以毫秒设置 Date 对象。

13.3 每天日历案例【课堂案例】

知识要点：date对象 + 内容节点

案例需求：显示当天日历信息

14. 定时器

14.1 setInterval()

循环定时器：周而复始的执行(循环执行)，比较常用

语法：

setInterval(code, millisec)

参数描述

code 要调用的函数或要执行的代码串。

millisec 周期性执行或调用 code 之间的时间间隔，以毫秒计。

14.2 setTimeout()

炸弹定时器：用完以后立刻报废(只执行一次)

语法：

setTimeout(code, millisec)

参数描述

code 要调用的函数或要执行的代码串。

millisec 周期性执行或调用 code 之间的时间间隔，以毫秒计。

14.3 清除定时器

clearInterval() 方法可取消由 setInterval() 设置的 timeout。

clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

15. ES6语法

15.1 let关键字

let关键字是用于声明变量的，类似于var，但是他有些特殊的特性。

用let声明的变量不能重复声明：

结果：

块级作用于，var没有作用域之分，就是在块级里面声明的变量，在全局，别的代码块里面也能用，而let不行。代码块指的是 if 、else if、 else、for、while等

不存在变量提升，具体意思是必须在该变量声明之后使用该变量。
var效果：

结果：var声明的变量可以在该变量声明前使用，只是没有赋值undefined。

let效果：

15.2 const关键字

const关键字是用于声明常量的，也就是声明时就要赋值，并且之后再也不能更改。

这里的不能修改是指，如果是基本类型，那么就不能对其值进行修改，如上面的例子，如果是对象或者数组的换，就不能对对象或者数组的引用进行修改，但是可以对其元素进行修改。

块级作用域，跟let一样。

const一般用于声明对象，let用于声明基本数据类型。

15.3 解构赋值

ES6允许按照一定的模式从数组或者对象中提取值，对变量进行赋值，称为解构赋值。

15.4 声明字符串的方式 ``

声明字符串的方式有双引号、单引号。
ES6添加了一个 ``,
特性是可以换行和拼接方式有点不同：
用双引号或者单引号进行字符串定义时，换行会报错。

使用新的方式不会报错：

15.5 对象属性定义的优化

ES在定义对象属性时，如果属性名和属性值对应的变量的字符串是一样时，可以省略属性值。

15.6 箭头函数

ES新增了一种定义函数的语法，箭头函数。

其他特性都在这个代码里面：

结果：配合代码、注释细细品味会大有收获。

箭头函数不能用做构造函数：

箭头函数没有参数列表属性argument：

15.7 ES6允许给函数参数赋默认值

结果：所以一般最后用在最后面。

如果需要多个参数都需要默认值，最好配合解构使用，把解构形参放最后：

15.8 可变参数

ES6引入可变参数rest来代替arguments参数列表。

arguments与rest的区别有：

arguments是隐形注入的参数，rest是显性定义的参数。

arguments是类数组，实际是个对象，rest是个数组。

arguments的值涵盖所有形参，而rest不会涵盖前面定义的形参，如果图，arguments涵盖了a、b形参，而rest没有。

可变参数如果不是最后一个就会报错

15.9 扩展运算符 …

扩展运行符 … 能够将数组转化为逗号分割列表。

结果：

15.10 Set构造函数

ES6新增了一个内置构造函数Set，代表着集合，类似数组，但是他的元素是唯一的，不允许出现重复元素。

结果：

15.11 Map结构

ES6提供了Map结构，类似对象，是键值对的集合，但是键的范围不限于字符串，各种类型，甚至对象都可以当key。

结果:

15.12 Number方法扩展

本章节没有分享完哦~

完整版获取找一下小动~

更多干货我们下期再说！

下期会分享

第五章节

jQuery

相关知识~

下期见！

标签：