JavaScript笔记

一.初识JavaScript

1.JavaScript简介

JavaScript是什么？

html是超文本标签语言，CSS样式语言，JavaScript属性编程语言

JavaScript是一门运行在浏览器端的脚本语言。

编程语言：C语言， C++语言， PHP， Java,   C#,

通常我们把JavaScript简称为JS

 

对比：

1，和HTML，CSS一样，都可以在浏览器中解析。

2，和HTML， CSS不一样，JavaScript是一门编程语言，html, css不是编程语言。

 

历史...

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

 

JavaScript和java有何关系？

基本上没有任何关系。

雷锋和雷锋塔。

事实上，还是有一点小关系，从商业角度来说。

早期名字是livescript，后来改名成JavaScipt

 

JavaScript可以做什么？

现在你去打开任何一个页面，都可以看到js的身影

可以做什么？

1，可以更好的组织我们的页面的内容，让内容更加有条理

2，提供了用户体验

3，游戏编程

 

2.如何学习JavaScript

a.内容

浏览器端的JavaScript。有三部分组成：

1，ECMAScript: 是js语言的一个标准。是欧洲计算机制造协会制定一套标准。

2，BOM：(Brower Object Model)浏览器对象模型，js访问浏览器的一个接口。

3，DOM：(Document Object Model)（客户端JavaScript）文档对象模型，js访问页面内容的接口。

 

b.版本

95年js诞生， 97年ECMAScript标准确立，99年ES3出现，09年ES5出来了，15年时，出现ECMAScript2015，通常叫它ES6。

我们暂时学习ES5，后期会接触一点ES6。

 

c.心态

由于JS的比较灵活，导致我们学习时，总会和传统和C，C++搞混，学习时要多思考。

如果有其它编程语言基础，学习时，会容易。

 

d.参考书

 

3.页面引入JavaScript

JS是一门运行在浏览器端的脚本语言。

类似于CSS，需要在页面中引入JavaScrpit.

有如下四种方式

ü  行内（内联）

ü  内部

ü  外部

ü  JavaScript协议

a.行内：

作为元素的属性，写在开始标签中，如下：

b.内部：

需要通过script标签来引入

 

注意细节：

1，使用script标签的时候，script标签可以放在页面中任何地方。

2，scrpt标签里面有一个type属性，值是text/javascript, 表示当前方本是纯文本js， 在ES5，script是一个默认的属性，它的默认值就是text/javascript

3，script还有一个属性，叫charset，用来声明文本的字符集，通常不需要。

4，JS代码需要放在script标签中才可以，不放在里面，运行不了

 

c.外部

引入CSS时，内部：style标签，外部：link标签

引入JS时，内部：scritp标签，外部：script标签

 

首先外部引入js，需要先写一个js文件， 如：

其次，需要在页面中通过script标签来引入外部的js,如下图：

 

执行后，如下：

 

注意细节：

1，仍然使用script标签，在标签里面使用src属性来引入js文件

2，引入了外部js，在script标签中的代码就不再执行

3，scrpt标签可以引入多次，意思就是在一个html中，可以有多个script标签。

 

最佳实践：使用外部引入js/位置放在底部

 

 

二.JavaScript基本语法

1.JavaScript词法结构

所谓词法结构是指一套基础性规则，用来描述如何使用这门语言来编写程序，包括如下几项：

ü  字符集unicode

ü  区分大小写（true和TRUE）

ü  忽略空白字符（空格、制表符和换行符）

ü  注释

ü  标识符和关键字（保留字）

字符集unicode

unicode介绍：

js在发明时，使用的是unicode字符集，但是我们在写js程序时，要尽量使用英文，特别是在给文件命名时，尽量使用英文。

 

区分大小写 （true和TRUE）

我们在写js代码时，一定要注意大小写，如果不区分大小写，很容易出错。

 

 

 

忽略空白字符（空格、制表符和换行符）

由于js会忽略空白字符，那么我们在写代码时，就要好好利用这些空白符，使代码更加清晰。

 

注释

注释非常重要，注释在代码中的比重一般是50%。

在js中， 注释分为两种：

单行注释  //

多行注释  /* */

 

注意细节：

1，注释的内容不会执行，是给开发人员看的，不是给计算机看的

2，对于多行注释， 不允许嵌套，如下：

 

标识符和关键字（保留字）

我们在写代码时，会起各种各样的名字，那么就些名字就是标识符，还有一些名字是人家发明js时，就起好的名字，这些名字，我们统称为关键字，还有一种，也是人家起好的名字，但是现在没有使用它，而是保留着以后使用，这类名字，我们叫它保留字。

我们在定js代码时，当我们需要起名字时，不要使用人家事先定义好的关键字或保留字。比如：var  alert .......

关键字如下：

 

在js中，当我们去起一个名字时，通常这个名字我们中它标识符，使用小驼峰命名法。

小驼峰：标识符首字母小写，后面如果还有其它的单词，每个单词的首字母大写。如：

toString

 

最佳实践：标识符（如变量、函数）命名采用小驼峰式命名方法

 

 

2.变量和值

(1).变量概念（变量名和值）

电脑（计算机）刚产生的目的？

电算机刚产生的目的是纯粹为了计算，计算的目的是为了满足某些需要。

 

学编程的目的？

切实解决生活中的问题。

 

现在我有一个生活中的问题：计算一个1+2=?，对于这个问题，我们使用计算机该如何解决？

首先需要让计算机中有两个“容器”，一个保存1， 一个保存2，计算机把这两个容器的值取出来，取出来后，进行一个相加的操作，加完之后，将结果输出。

这个容器在编程语言中叫变量。变量是用于存储信息的"容器"。

 

代码如下：

变量是用来保存某个值的，便于后续使用。最终是为了解决现实中实际的问题。

 

变量有两部分组成：

变量的名称：一般来说，在赋值符号左边。

变量的值：一般来说，出现在赋值运算符的右边。

 

还有些书上说，还有变量类型，变量的地地址等.....

 

 

 

(2).如何声明变量

在js中，声明变量是使用var这个关键字。

var是variable(变化)的简写。

 

a.单独声明

 一次性声明一个变量，每个变量都使用var

 

b.一次性声明多个

只需要一个var关键字，然后可以声明多个变量

 

c.重复声明（了解）

在js中，是允许重复声明变量的，不会出错，如下：

如果重复声明了，后面的值会覆盖前面的值。

实际开发中，一定要避免重复声明。

 

注意，我可以借助console来调试代码，如下：

 

百度首页，通过console.log来发招聘信息：

 

d.遗漏声明（了解）

在js中，是允许遗漏声明，不会出错，如下：

对于这种写法，我们同样也要避免！

(3).全局变量、局部变量

全局和局部是指变量的生效范围，在哪个地方能够起作用。是以函数为界。

数学中有函数

编程中的函数也是模拟数学中的函数，可以这样理解，编程中的函数就是一个功能块。给这个功能块一个[输入], 这个功能块给你一个[输入]

 

打一个比方：

普通话和方言

全局和局部是以函数作为分界线。

全局的变量在函数内部和函数外部都能访问，局部的只能在函数内部访问，不能在函数访问。

小结：全局在函数内外都能访问，局部变量只能在函数内访问。

 

注意：在js中是没有常量

在js中，变量的值是可以改变的，就是它的值是可以变化，如下：

 

常量则是值不能改变的。在js不支持常量。

 

最佳实践：

ü  总是使用var来声明一个变量

ü  变量要先声明后使用 

 

 

 

3.数据类型

变量是一个容器，存储一些信息，信息又分成不同类型的信息。如

姓名, string

年龄，数字

......

 

现实生活中，有很多信息，一定有很多单位，个，条，只， 天，月，年，时， 分........

 

 

(1).什么是数据类型

 

在日常生活中，描述不同的东西，有不同的单位。实际上，编程也是为了解决生活中的问题的，在程序中，是如何描述这些内容？

针对不同的内容，根据其特性，需要添加上不同的单位（类型）加以描述，这就是数据类型的概念。

 

在js, 它的数据类型如下：

(2).数值类型（number）

作用：用来表示数字的，任何数字都可以用数值类型。比如：商品价格，年份，年龄等

 

在C语言中，数值类型分为单精度和双精度。在js，是不区分整数和小数。

我们可以使用typeof运算符来判断，一个变量的数据类型：

 

注意细节：

ü  不区分整数值和浮点数值，都是浮点数

ü  最大值和最小值（Number.MAX_VALUE，Number.MIN_VALUE）

ü  整型的多种表示（十进制、十六进制、八进制）

ü  浮点数的多种写法（3.14，.33333，6.02e3）

ü  JavaScript算术运算的特殊性（溢出、被零整除都不会报错）

ü  特殊的NaN

ü  运算的不精确性

 

不区分整数值和浮点数值，都是浮点数

浮点数就是小数， js是不区分整数和小数。

 

最大值和最小值（Number.MAX_VALUE，Number.MIN_VALUE）

 

整型的多种表示（十进制、十六进制、八进制）

浮点数的多种写法 （3.14，.33333，6.02e3）

 

JavaScript算术运算的特殊性（溢出、被零整除都不会报错）

 

特殊的NaN

NaN: Not a Number 不是一个数值

 

运算的不精确性

针对小数，运算具有不确定性

 

在js中，千万不要去比较两个小数，也就是说，不要去比较两个运算之后是否相等。

 

如何去解决这个不确定性？

先转化成整数后，再判断，如下;

最佳实践：

ü  不要使用八进制

ü  不要试图用==判断两个浮点数是否相等

 

 

(3).字符串类型(string)

由一系列的字符构成的数据

描述某个名称，用户名，密码，籍贯等。

 

在使用字符串类型数据时，需要使用引号：

双引号： “”

单引号： ‘’

 

基本使用：

 

如果没有使用引号，那么js会把它当作变量来对待，如下：

 

双引号和单引号要配对使用，不能混合使用，如下：

 

 

当我们的js代码本身被引号引起来时，怎么办？

错误如下：

 

该怎么解决：

外双内单，或， 外单内双

 

当双引号嵌套时，会发生错误：

 

有时候，需要输入一些符号，js 为我们提供了转义字符，用法如下：

 

js中，常用的转义字符如下：

 

例如：换行的使用

 

还有两个小问题：

在js， 标识符（变量名和函数名）的名称，不能以数字打头，结合字符串来理解：

 

数字可以作为数值类型，也可以作为字符串类型：

 

字符串可以以数组的形式来使用：

 

如果需要获取字符串的类型，使用typeof运算符，如下：

 

 

(4).布尔类型

前面说了，数值类型，它所对应的值有无数个，又说了字符串类型，它所对应的值也有无数个。接着我们学习的布尔类型，它对应的值没有那么多，只有两个，一个是true, 一个是false.

 

true表示真，false表示假

 

在js中严格区分大小写，true, 和Ture，TRUE不一样。

 

布尔类型一般会在判断等语句中使用。

 

严格区分大小写：

 

我们可以使用typeof来判断布尔数据的数据类型，如下：

 

注意细节：

1，在实际开发中，直接使用true和false的情况不多。

2，有一些值会默认转化成false, 其它值都转化成true

ü  undefined

ü  null

ü  0/-0

ü  NaN

ü  “”

(5).undefined和null

在日常生活中，有0这个数字，表示没有。

 

undefined

  undefined: un前缀 + defined defined是定义的意思， undefined未定义的意思

   表示一个变量在声明的时候没有赋初值。它的值就是undefined

 

数值类型：对应无数个值 1, 2, 3...

字符串类型：对应无数个值  “hello”, “h1”....

布尔类开：对应两个值true false

undefined: 对应一个值，这个值也叫undefined

 

用法：

 

对于声明一个变量，只要声明了，它就存在了，就看有没有赋值，如果赋值了，这个容器里面就是对应的值，如果没有赋值，也是有值的，只是这个值是undefined,它的类型也是undefined，换句话说，undefined在js是一种数据类型，它只有一个值，这个值就是undefined.

 

null

   null是英文是空的意思

 

在使用时，需要显式是给它赋为null，才可以。

 

实际上，null在js是用于对象的，如果对象的初始值什么都没有，可以赋为null.或者当你想销毁一个对象时，也可以给它赋nulll.

 

undefined和null有什么区别？

ü  undefined是针对普通变量而言的

ü  null是针对对象而言

 

undefined和null的几乎一样，对它们比较后的结果如下：

 

为什么会有两个东西表示“无”？

答：历史原因（了解）

下去看一看：http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

 

(6).引用类型

引用类型就是对象，既：object

首先，看两个对象：

ü  数组：array

ü  函数：function

 

除了，array和function之外，其余的对象我们大致可以分为3类：

ü  内置对象，ECMAScrpt本身提供的对象

ü  宿主对象，BOM和DOM提供对象

ü  自定义对象

 

基本的使用：

 

(7).类型转换

 

4.运算符

(1).认识运算符

什么是运算符？

表示某种功能的符号，运算符是用于执行程序代码运算的，会针对一个以上的操作数来进行运算。

 

JS都提供了哪些运算符？

(2).如何理解运算符

ü  根据操作数的个数进行分类：一元运算符，二元运算符，三元运算符

ü  优先级：当多个运算符同时进行运算时，优先算哪一个，这就是运算符优先级

ü  结合性：左结合性，右结合性

ü  左值：（了解）

 

如果一个运算符的操作数只有一个，称为一元运算符，或叫单目运算符

如果一个运算符的操作数只有两个，称为两元运算符，或叫双目运算符， 是最多的

如果一个运算符的操作数只有三个，称为三元运算符，或叫三目运算符，js中只有一个

使用如下：

 

优先级的说明：

当多个运算符同时进行运算时，优先算哪一个，这就是运算符优先级

代码如下：

 

如果需要改变优先级，或对于优先级不确定时，可以使用（）：

 

结合性的说明：

根据运算符的顺序，可以分成两种：

左结合性：自左至右

右结合性：自右至左

代码如下：

 

 

左值的说明：

以赋值符号 = 为分界点，能够出现在左边的，称为左值。

 

一般而言，变量可以作左值，字面量（100，‘hello’, true）是不能作左值

(3).算术运算符

ü  +

ü  -

ü  *

ü  /

ü  %

ü  ++

ü  --

 

+ - * /

代码如下：

* / 的优先级是高于+ -

如果优先级相同，具有左结合性。

 

%

取模，取余

 

 

++ 分为前置++ 和 后置++

表示自增

首先，看一个需求，需要将一个数加1，然后赋给其它地方使用：

在js中有很多类似这个的情况，所以js提供了一个++的运算符，专门用来实现+1的操作，如下：

对于++，它只需要一个操作数，所以它是一元运算符，也叫单目运算符。

 

但是++并没有那么简单：

 

++在前，整体表达式的值是一个新值，++在后，整体表达式的值是一个旧值

 

--

表示自减, 和++类似， 道理不多说了。

在实际开发中，++和--用的非常多，尤其在循环中用的最多。

 

最后补充：

+ 和 -  除了可以作为二元运算外，还可以作为一元运算符。

-作为一元运算符时，表示取反操作

+作为一元运算符时，转换成数字

对于一元的+和-，用的不多，但是在某些场合下，也可以使用。

 

 

(4).赋值运算符

在js中，赋值运算符，用=。

大家在读代码时，尽量读作赋值操作，不要读成等于操作

 

注意：等于用==表示，=表示赋值操作

 

赋值运算符是一个二元运算符，需要有两个操作数，赋值运算符的优先级非常低，基本上是最低的。

 

ü  =

ü  +=

ü  -=

ü  *=

ü  /=

ü  %=

 

解释一下，+=，-=等是什么意思 ？

 

重点：

ü  =具备右结合性

ü  =的优先级比较低

ü  =和==的区别

ü  +=可以用于数字或字符串，视情况而定

 

解释一下，i=j=k=10?

有两层含义：

其一，赋值运算符具有右结合性，首先就是将10赋给了k,这个时候k就等于了10;

其二，赋值运算符有副作用，副作用是这个赋值的表达式本身也具备一个值，也就是意味着，k = 10， 这个赋值表达式，本身也有值，这个值就是10

 

代码的理解相当于：

第一步：i=j=k=10,此时k的值为10， 将k=10整个替换成10

第二步：i=j=10,此时j的值是10，将j=10整个替换成10

第三步：i=10

 

 

 

 

(5).关系运算符

作用：用来进行比较的。比较的结果通常是布尔值。

 

==   ===

!=   !==

>    >=

<    <=

 

== 相等运算符，使用两个==表示

要判断两个变量的值，是否相等，如果相等，返回真，否则返回假

 

在使用==运算符时，是不需要考虑类型的，只要两个变量的值是相等的，就返回true:

 

如果我们想判断两个变量的值相等，数据类型也相等，这个时候，我们就可以使用全等：===

 

小结：

ü  =表示赋值运算符，右结合性

ü  ==表示相等运算符，只判断两个变量的值是否相等

ü  ===表示全等运算符，不只判断两个变量的值是否相等，还判断两个变量的数据类型是否相等

 

!=   和   !==

!=是==反操作   !== 是===反操作

 

在实际开发中，== === !=使用比较多， !==使用比较少。

 

> >=  <  <=和数学比较是类似的。

 

注意细节：

1，使用==和!=，可以对所有的类型进行比较

2，但是>, >=,< <=的时候，只是针对数值进行比较。如果要比较字串要使用函数

 

(6).逻辑运算符

在js中有三个逻辑运算符

ü  && 逻辑与

ü  ||  逻辑或

ü  ！  逻辑非

 

 

A, &&

逻辑与操作，表示并且的意思，AND，表示两个或多个条件同时为真时，整体结果才为真。

 

以两个变量为例，进行说明：

 

运算规则如下：

表达式1

表达式2

结果

true

true

true

true

false

false

false

true

false

false

false

false

 

&&和||是二元运算符

它们的优先级比较低，比赋值的要高，比关系运算符要低

 

B， ||

逻辑或，或者的意思， OR

对于多个条件，只要有一个条件为真，那么结果就为真，，只有所有的条件都为假时，结果才为假。

 

运算规则如下：

表达式1

表达式2

结果

true

true

true

true

false

true

false

true

true

false

false

false

在两个操作数中，只要有一个为true，结果就为true, 只有当两个都为false时，结果才为false。

 

 

C,!

逻辑非，取反操作，NOT

逻辑非是一个单目运算符，只有一个操作数

规则如下：

表达式

结果

true

false

false

true

 

 

一元运算符的优先级要比二元，三元运算符的优先级都要高。

 

深入理解逻辑运算符：

先看两个问题：

第一个：

 

第二个：

 

我们应该从三个层次去理解（以&&为例说明）：

ü  第一层理解：操作数都是布尔值的时候，只有二者都为true的时候，结果才为true，否则为false。

 

ü  第二层理解：&&可以对真值和假值进行运算，如果两个都是真值，则返回一个真值，否则返回一个假值。但是，真值并不限于true， 假值也并不限于false, 下面这些值会转换成false(其它值都转化成true):

undefined

null

0 / -0

NaN

“”

在js中，进行&&操作，结果并不总是true和false, 而是当前的值。当前的值可能是数值，也可以是字符串。

如果第一个表达式为真，那么就以第二个表达式的值作为结果，这个结果不是转换之后的值，而是它本身。

如果第一个表达式的值为假，那么就以第一个表达式的值作为结果，这个结果也不是转化之后的值，而是它本身。

 

ü  第三层理解：运算过程，首先计算左操作数的值，如果计算结果为假值，则整个表达式结果就为假值,也就是左操作数的值。同时停止右操作数的求值。如果左操作数的结果为真值，则整个结果依赖于右操作数的值。

 

关于短路运算的说明：

在&&和||运算时，如果第一个表达式的值已经能够确定整个运算结果，那么第二个表达式就不会执行，类似于比赛中5局3胜，如果一方已经胜了3局，那么后面的比赛就不必进行了。

 

好好理解下面代码：

 

或和与具有相同的原理，只是运算的规则不太一样。

 

对于||而言，

如果第一个表达式的值为真值，结果就是第一个表达式的值，这个值不是转化之后的值，而是这个值的本身。

如果第一个表达式的值为假值，结果就是第二个表达式的值，也不是转化之后的值，而是这个值的本身。

(7).位运算符（了解）

(8).其它运算符

ü  字符串连接运算符 +

ü  三元运算符 ?=

ü  逗号运算符，

ü  获取类型 typeof

ü  删除属性 delte

ü  检测对象类 instance of

ü  测试属性是否存在 in

ü  返回空 void

 

字符串连接运算符 +

使用+表示字符串连接：

字符串连接运算符是一个二元运算符。

如果两个操作数都是字符串，很简单，就是将两个字符串连接在一起。

如果两个操作数是数值上，也比较简单，那么就是将两个数值进行一个算术的加法运算。

 

如果有一个操作数是数值，另一个操作数是字符串，怎么办？

直接按字符串连接运算符进行操作：

 

 

结论：

只要有一个操作数是字符串，那么就表示进行的就是字符串的链接操作。

 

+=呢？

 

问一个问题：++x和x = x+1的区别？

++x， 只能是数值

x=x+1, x可以是数值，也可以是字符串

 

三元运算符

在js中，有且仅有一个元运算符，就是?:

格式：表达式1 ？表达式2 ：表达式3

运算规则：如果表达式1的值为真，那么结果就是表达式2，否则结果为表达式3.

 

三元运算符，能够简化我们的代码，实际上相当于if...else...语句。

 

？：的优先级较低，并且是右结合性。

 

typeof

typeof是一个运算符，不是一个函数，也可以加括号

typeof只能区分出原始值（number, string, boolean, undefined）和对象， array返回的是object , null返回也是object, 函数则返回function(特殊)

(9).类型转换

思考：

 

在js中，如果是一个二元运算符，有个规则：就是要保证两边的操作数的数据类型一至。对于上面的a+s1，两边的数据类型没有保持一至，这个时候就违反了这个规则，如果还要遵循这个规则，就涉及到了js中的类型转换问题：

 

对于a+s1，我们要保证两边的操作数的数据类型一至，有两种方式：一种是让a转换成字符串，一种是让s1转换成数值。

 

关于类型转换，有两种方式：

ü  强制转换

ü  隐式转换

 

一般只是针对基本数据类型进行转换。

 

强制转换

使用Boolean()、Number()、String()或Object函数

在转换数值的时候，parseInt()和parseFloat()函数更加灵活。

 

在使用Boolean(),Number(),String()函数时，函数的首字母必须大写。

 

如果仅仅对数字进行转换，我们还可以使用如下两个函数：

parseInt:转化成整数， 10进制

parseFloat:转成小数

注意：Number和parseInt之间有区别？parseInt可以将以数字开头的字符串转成数值，转换规则就是将数字开头的连续的数字提取出来，直到碰到字符为止，后面的都被截掉。

 

 

隐式转换

让变量参与运算，就可以实现隐式转换。我们大部分人都不会察觉到。

 

ü  如果 + 运算符的一个操作数是字符串，它将会把另外一个操作数转换成字符串

ü  ！运算符将其操作数转换为布尔值并取反，故可以使用！！来转换

ü  对于数值，如果转换结果无意义，则返回NaN，如var n = 1 - 'x'

 

== 相等运算符，也会进行一个类型转换

实际上，undefined和null是不同的数据类型，我们在==比较时，需要进行类型转换，undefined和null不能互换，这个时候，两者都转换为一个中间值----false

 

有一点需要强调：

不管是强制还是隐式转换，它们都不会去改变原来变量的数据类型。

 

下面这些值会被转换成false，其它都转换成true:

ü  undefined

ü  null

ü  0 / -0

ü  NaN

ü  “”

 

转换规则表，如下：

 

5.表达式

(1).什么是表达式

任何有值的内容都是表达式

一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如a=3中的3就是一个表达式，a=3整体也可以作为一个表达式。

 

 

 

理解：=的副作用

如果给一个变量或属性赋值了，那么使用这个变量或属性的表达式的值都会发生变化。

i = k = j = 1;

 

常见的表达式有：

ü  原始表达式

ü  运算符构成的表达式

ü  对象和数组初始化表达式

ü  函数定义表达式

ü  调用表达式

ü  对象创建表达式

 

只要在能放在 赋值符号 的右边的内容，通通都是表达式。

 

(2).原始表达式

原始表达式

ü  它是表达式的最小单位，它们不再包含其他表达式。

 

常见的原始表达式有：

ü  直接量 (如 1.23"hello")

ü  关键字 (如true false null this)

ü  变量 (如i，sum，undefined)

ü   

(3).运算符构成的表达式

运算符表达式

由运算符构成的表达式，如：

ü  算术表达式

ü  关系表达式

ü  逻辑表达式

ü  赋值表达式

 

(4).对象和数组初始化表达式

 

(5).函数定义表达式

(6).调用表达式

由于调用函数，它会返回一个值，所以它是一个表达式。

(7).对象创建表达式

 

 

三.语句

1.什么是语句

概念：在JS中表达式是短语，语句就是整句或命令。

作用：表达式是用来计算个值的，语句是用来发送某条指令。

特征：用分号结尾。

 

js中有哪些语句？

ü  表达式语句

ü  复合语句

ü  声明语句

ü  条件语句

ü  循环语句

ü  跳转

 

2.表达式语句

具有副作用的表达式，就可以形成一个语句，需要我们加上分号。

3.复合语句

注意：

在使用了{}之后，就不需要再添加分号了。

4.声明语句

var和function都是声明语句，它们声明或定义变量和函数。

声明语句本身什么也不做，但它有一个重要的意义，通过创建变量或函数，可以更好的组织代码的语义。

 

 

5.条件语句

世间万物都脱离不了三种结构：

ü  顺序结构

ü  选择结构

ü  循环结构

 

顺序结构，是指我们的代码书写顺序，自上向下挨个执行。

 

在实际开发中，只有顺序结构，还不能满足我们的需求，这个时候就有分支结构和循环结构。

 

分支结构对应到js中，就是分支语句，换句话说，我们是使用条件语句来实现分支结构。

 

循环结构对应到js中，就是循环语句，换句话说，我们是使用循环语句来实现循环结构。

 

对于条件语句，是指在执行代码时，需要根据相应的条件执行。

 

在js中，提供4种关于条件语句的写法：

ü  if

ü  if...else

ü  if...else if ... else

ü  switch

(1).if语句

格式：

 

基本使用：

 

if语句使用细节说明：

1，关键字是if, 然后if后面有一个()， 中间有无空格都可以

2，在（）中，可以写各种表达式，可以是原子表达式，也可以是复杂表达。

3，{}可有可无，如果在{}里面只有一条语句，这个时候有无{}， 没有区别。

如果在{}里面有多条语句，那么没有{}时，无论条件表达式是真还是假，最终除了第一条语句，后面的语句都会执行。

 

         4，if条件，在没有{}情况下，它只对后面的一条语句起作用。对后续的语句没有约束力。

 

最佳实践：

我们在写if语句时，尽量加上{}，哪怕只有一条语句，

(2).if...else语句

双分支，二选一的情况

格式：

基本使用：

 

在实际开发中，if中的表达式，通常是类似于下面的一些写法：

 

关于if...else...双分支，我们还有一个简化的写法：使用三元运算符。?:

(3).if...elseif ...else语句

多分支语句，多选一。

 

基本使用：

 

注意点：

1，在js中，else和if要分开写，不能连写

2，在js中，else .. if 多分支，本质上是if..else.. 的一个嵌套使用，只不过可以用简化的写法，让程序更简洁一点。

(4).switch

swidth也是js中针对多分支提供的一种语句。

格式：

在switch中，有四个关键字：switch , case, break , default

对应用到了三种符号：()  {}   :

 

基本用法

 

注意的细节：

1，如果满足某个条件后，后续的都不进行判断和处理，使用break结束。如果没有break，当一个case条件成立时，执行当前case中的代码,然后继续下一个case。

2，只要写switch，我们最好添加一个default分支，哪怕空着也行。

3，在switch中，我们在判断时，使用的是===，不是使用==， 所以需要注意，类型也要相等。如下：

6.循环语句

我有一个需求：我要输出1到100这100个数。

 

在JavaScript中，循环语句有如下几种：

ü  while

ü  do...while

ü  for

(1).while循环

格式：

 

基本使用：

 

注意细节：

1，在循环体中，一定要修改循环变量的值，否则将陷入死循环。

2，循环变量的初始化一定要放在while之前。

3，while这个关键字之后有一个（）, 表示要判断的一个条件，里面就是一个条件表达式。

4，循环体，要使用{}，也可以不使用{}，但是如果不使用{}，那么循环体就只有一条语句，建议大家任何情况下都加上{}。

(2).do...while循环

基本上和while是一至的。

格式：

 

基本使用：

 

注意细节：

1，循环变量的初始化要放在do之前

2，在循环体中，需要去修改循环变量的值

3，循环体要使用{}包括起来，形成一个语句块

思考：while和do...while的区别？

1，do...while的循环体一定会执行一次，while循环体可能一次也不执行

 

在实际开发中，while的使用频率要远远高于do...while。

 

 

(3).for循环

这个非常重要，使用频率也是最高的。

格式：

 

基本使用：

 

流程图：

 

从代码（图）中可以看出：

1，表达式1就是var i=1; 只执行一次，表达式2执行了101次，表达式3和循环体都执行了100次。

2，由于表达式1只执行了一次，所以经常将变量的定义和初始化工作都放在表达式中。

 

注意细节：

1，for关键字后面有个（）,（）中有三个表达式，必须要有三个表达式，表达式之间用;隔开，所以必须要有两个;

2，省略表达式1：

3，省略表达式3：

4，省略表达式2：

 

尽管三个表达式都可以省略，一般不这样做。

 

for循环和while循环如何选用？

大部分情况下，两者是一样的。

for循环通常针对循环次数确定的循环，while循环通常是针对循环次数不确定的循环。

 

(4).多重循环

在实际开发中，经常需要用到多重循环，尤其是二重循环。

不管是for还是while都可以实现二重循环，但是for用的较多：

 

使用for循环，打印出九九乘法表：

 

代码如下：

 

百钱买百鸡：

今有鸡翁一，值钱伍；鸡母一，值钱三；鸡鶵三，值钱一。凡百钱买鸡百只，问鸡翁、母、鶵各几何？

 

7.跳转语句

在JavaScript中，跳转语句有如下几种：

ü  break

ü  continue

ü  标签语句

ü  return

 

其中，标签语句已经灭绝了，而return语句是在函数中体现的，现在就学习break, continue。

 

break: 跳出循环（或switch）

continue:继续

 

正常情况下跑步，如图：

 

中到第6圈时，跑不动了：

在循环中，break可以提前终止循环。

 

continue的作用：终止当前循环，进行下一次循环。

 

break和continue有什么区别？

break（浅尝辄止）终止循环， continue（锲而不舍追女孩）终止当次循环，进行下一次循环

 

一般情况下，我们会在循环语句中使用break和continue，配合if语句来使用。有一个特殊情况，就是在swich语句中使用break, 跳出当前的swithc语句。

 

 

 

四.函数初步

函数在js中，是一等公民，它在js的地位非常重要。

所以在js课程体系中，分成两块：

ü  函数初步

ü  函数高级

1.认识函数

回顾一下，我们在前面学习的js中用到了哪些函数？

ü  alert();

ü  parseInt();

ü  parseFolat();

 

再回顾一下，在初中数学中学过函数。

 

编程中的函数也是模拟数学中的函数的，数学中的函数能够揭示一些规律，后续凡是用到了这些规律，可以用一种方法来解决  ---- 重用性

 

对于一个函数,如y=x^2,  y=x每给定一个值，经过函数运算后，得到一个结果y

 

从三个方面来认识函数

ü  函数是一个代码段

ü  函数是一类数据

ü  函数是一个对象

 

函数的作用

ü  代码重用

ü  作为构造器，用于生成对象

ü  用于组织代码

2.函数定义

ü  函数声明

ü  函数表达式

 

第一种：函数声明，使用function关键字，基本格式：

 

基本使用：

函数定义完之后，并不会自动的执行，需要调用才可以执行函数中的代码。

函数调用也非常简单：函数名（参数）， 核心小是括号。

 

注意细节：

1，定义函数，需要使用关键字function, 关键字之后和函数名之间需要空格。

2，函数名称和定义变量的名称规则是一样的：

a, 大小写区分，在定义普通函数时，首字母小写，如果有多个单词，采用小驼峰命名法。

b, 函数名不能以数字打头， 可以使用一些特殊符号，如_，$

3，函数名称后面是小括号，必不可少，用来装载形式参数

 

 

第二种：函数表达式

 

注意细节：

1，将function整体，放在赋值运算符右边，作为表达式来使用。

2，通过一个变量来引用当前的function，使用后续使用。

3，函数名可以加上，但是只对函数内部起作用。如图：

 

函数声明和函数表达式有什么区别？（重点）

函数声明：

 

我们能不能先去调用函数，再去声明函数：

 

函数表达式

我们能不能先去调用函数，再去声明函数：

 

得出结论：对于函数声明，我们可以把函数调用放在函数声明前面，对于函数表达式，我们不能将函数调用放到函数表达式前面。

 

 

在js中，我们把使用声明方式来定义函数的这种用法----函数声明提前。

可以这么理解 ，在js中，只有是函数声明，相当于会把函数声明相关的代码放到最前面 。

 

对于函数表达式这种方式，其实它就是一个变量，只不过我们在赋值的时候，是将函数这种数据类型的数据赋给了这个变量。

 

既然是一个变量，那么这就是遵循个规则：变量要先声明，后使用。

 

 

3.函调调用及返回值

关于函数的调用，只需要使用小括号就可以了。

函数名（）;

 

js中函数调用四种形式：

ü  作为函数、

ü  作为方法、

ü  作为构造函数、

ü  使用call(apply)间接调用

 

作为函数，是最简单的函数调用方式。

ü  自定义的函数调用：f1()

ü  js提供的内置函数：alert(),parseInt(), parseFloat()等

 

作为方法来调用

什么是方法：所谓的方法就是对象中的函数。

什么是对象：现实中，万物皆对象。编程语言中的对象是指包含属性和方法的一个集合。

将函数定义到某个具体的对象上面，然后通过.语法来调用，如：console.log(),window.alert();

 

关于函数的返回值：

我们前面说了，函数就是一个功能，对于个功能，我们可以给这个功能提供原材料，有时候我们也希望这个功能也能给我们返回一个结果。这个时候就涉及到了函数的返回值。类似于数学中y = x,  y = x^2,  y = sin(x), 当我们给这个函数提供个x值时，我们就可以得到一个对应的y值。在编程中也有这样的功能， 这个功能就是return.

 

在parseInt()函数中，一定有个return语句，返回需要的值。

 

如果是我们自已定义的函数，该怎么返回？

 

当不写return时，函数会给我返回一个undefined:

对于没有return的函数，我们可以这样理解：在一个函数中，最后一定有个return语句， 默认就是return undefined.

 

return只能出现在函数中，不能出现在函数外：

 

在一个函数中，执行到return语句时，后续的任何代码都不会执行：

 

如果写了reutrn，但是return后面什么也没写，返回的也是undefined:

 

 

 

4.函数参数

榨汁机：

榨汁机是一台机器，提供榨汁的功能。

榨汁过程：

首先需要放点东西：苹果+水， 橘子+水，香蕉+水葡萄+水

启动开关

得到对应果汁

 

现在我们模拟这个过程：

 

在定义函数和调用函数时，涉及到了两个参数：

ü  形式参数：简称为形参，表示在定义函数时指定的参数，表示在传入什么样的值

ü  实际参数：简称为实参，表示在调用函数时给出的参数，具体的某个值。

 

案例：定义一个函数，这个函数的功能是求两个数的和：

正是由于有了参数这个武器， 所以我们的函数才得以重用。

 

实际上，在js中比较特殊：

在定义和调用函数时，对形参和实参要求的没有那么严格。

形参和实参的个数，可以不相等，程序不会出错，但是结果可能出问题：

 

在js没，对于形参，没有数据类型的要求：

 

实际上，js是一门弱数据类型的语言，具体体现在：

ü  变量在声明的时候，是不需要指定类型的

ü  函数的中函数，在声明的时候，也是不需要指定类型

 

还有一个知识点：arguments，这个知识点，咱们用到的时候再说！

 

 

 

5.作用域

什么是作用域？

首先，作用域是针对变量而言，要定义一个变量，那么个变量就有相应的作用域。

换句话说，作用域就是指变量的生效范围，在程序中，是指在什么范围可以访问，什么范围内不能访问。

 

在js中，作用域是以函数为界：

ü  全局作用域--->全局变量

ü  局部作用域--->局部变量

 

全局变量：指在函数内外都可以访问

局部变量：指只能在函数内部被访问

 

在js中是没有{}块作用域。

 

局部作用域（在函数中）：可以访问全局变量，可以访问当前作用域中的局部变量

全局作用域（在函数外）：是不能访问局部作用域中的变量的。

 

 

 

 

五.对象

对象在js，很重要，分两阶段：

ü  对象的初识

ü  面向对象

1.初识对象

什么是对象？

在js中，一切皆对象。

 

对象，在生活中是可见和不可见的东西，在世界中， 是指客观存在的一切物体。如：桌子，电脑，饮水机.......

 

在生活，我们是怎么去描述一个对象的？

描述电脑：

静态的特征：颜色，屏幕尺寸，CPU， 内存， 硬盘，显卡， 系统......

动态的特征：玩游戏，发信息，上网，拍照.....

 

描述班长：

静态特征：姓名，身高，性别，体重，籍贯...

动态的特征：跳舞，画画，开车....

 

我们在描述一个对象时，通常会从两个方面描述：

ü  静态的特征

ü  动态的特征

 

把静态的和动态的特征放在一起，就成了对象。

 

在js中，静态的和动态的通通称为对象的属性。

如果是静态的特征，就是变量的形式出现

如果是动态的特征，就以函数的形式出现，那么这里的函数，我们习惯上叫它方法。

 

基本对象：

在调用对象的属性和方法时，使用点语法

格式如下：对象.属性()  或  对象.方法()

 

重新理解:console.log()：

console是一个对象，表示开发者工具的控制台，该对象有多个方法，log就是其中的一个方法，它的作用就是向控制台输出信息。

 

在js中，对象通常会分成三类：

ü  本地对象（Number, String, Boolean, Date）

ü  宿主对象（BOM, DOM)

ü  自定义对象

 

手册：

本地对象

 

宿主对象：

 

 

自定义对象，根据我们自己的需要来定义。

 

2.object

object, 物体， 对象的意思

object是js中所有对象的祖先

 

如何创建object（两种方式）

ü   字面量（直接量）

ü   构造器

 

字面量：

 

 

 

 

 

使用第二种方式创建一个对象：

 

new关键字

 

 

Object是所有对象的祖先。

其它对象的创建方式和object有类似之处，它们都有两种方式创建。

 

Object这个对象里面有个方法，是toString, 用的比较多， 它会被后代对象所继承，所以说，它的后代对象里面有这个方法。

3.date对象

Date对象是js内置的对象

作用：提供关于日期相关操作

实例化格式：

 

 

在Date这个对象里面，有常见属性和方法：

ü  Date()

ü  getDate()

ü  getDay()

ü  getFullYear()

ü  getHours()

ü  getMinutes()

ü  getSeconds()

 

 

案例：

 

4.单体内置对象

和Date对象不太一样，单体内置对象有一个特殊的地方， 就是不需要实例化，就是不需要new，那么它就是单体内容对象。

 

Math：数学的意思

功能：提供了数学相关的一些运算

 

代码：

 

floor:地坂

ceil:天花板

round:周围

 

有一个非常重要数学函数， random()

随机一个小数，范围[0 , 1), 包括0， 不包括1

 

需求：随机一个[0, 50)之间的整数。

 

需求：随机个[50, 100)的整数。

 

为什么叫单体内置对象？

那是由于，只要我们的js开始运行时，Math这个对象就常驻内存，可以直接使用，不需要实例化。

5.自定义对象

 

 

六.数组

1.什么是数组

数：数字，数值，数据...

组：一组，多个的，由多个成员构成的一个集体

数组：由多个值构成的有序集合

值就是前面我们讲过的这些数据类型（各种数据类型都可以）

 

在数组中，每一个值都称为一个元素。

每一个元素在数组中的位置，我们称为索引，用数字来表示，从0开始。

 

js中数组的一些特性：

1，JavaScript数组是无类型的，数组元素可以是任意类型。

2，数组元素可以是任意值，包括对象和数组。

3，JS中的数组是动态的，根据需要它们会增长或缩减。

4，数组元素的索引不一定是连续的，它们之间可以有空缺。

5，JS中的数组是对象的特殊形式，但是它是经过优化的，效率会更高。

2.创建数组

在js中，创建数组有两种方式：

ü  直接量（字面量）

ü  new的方式

 

直接量（字面量）

 

new的方式

 

注意：

1，数组直接量中的值不一定是常量，也可以是任意的表达式

2，如果省略了某个元素，省略的元素将被赋预undefined

 我们在定义一个数组时，要尽量避免这种情况

 

3，数组直接量允许有可选结尾的逗号

4，new Array()等价于[]，创建了个空数组， new Array(n),表示创建指定长度的数组，数组中没有索引和元素。

当new的时候，只有一个参数时，需要注意参数的数据类型。

如果参数是数值类型，那么就意味着创建了指定长度为该值的一个空数组。

 

3.数组基本操作

说到数组的操作，一般都会涉及到增删改查。

 

利用数组的索引，可以进行相关的操作。

 

如果想获取指定索引的元素

格式： 数组名[索引]

如：

 

增加：

 

修改：

 

对于添加和删除，我们还有一些其它的方式，重点撑握：

 

添加元素：push(推)和unshift(shift是去掉，unshift是增加)

删除元素：pop和shift

 

添加：

push， 在数组后面追加新的元素，如下：

push追加多个元素：

 

unshift， 在数组的前面插入新的元素，如下：

unshift追加多个元素，如下：

 

删除：

pop：删除数组中最后一个元素

 

shift：删除数组中第一个元素

 

删除操作和添加操作不太一样：

pop和shift没有参数，每一次只能删除一个

pop和shift方法返回的是被删除的元素。push和unshift返回的是一个新的数组的长度：

 

 

 

 

 

4.数组长度

每一个数组都有一个length属性，用来表示数组的元素个数（长度）

 

在数组中肯定找不到一个元素的索引值大于或等于数组的长度

 

如何理解？

在数组中肯定找不到一个元素的索引值大于或等于数组的长度，为了维持此规则不变，数组有两个特殊的行为：

ü  如果为一个数组元素赋值，它的索引i大于或等于现有长度时，length的值将设置为i+1

ü  当设置length属性为一个小于当前长度的非负整数n时，当前数组中的那些索引值大于或等于n的元素将从中删除

 

第一句话的理解：

 

第二句话的理解：

5.数组遍历

遍历：把数组中的所有元素，挨个取出来，然后进行相应的操作，那么这个获取每一个元素的过程，就是遍历，也叫做一个遍历的过程。

 

在js中遍历数组有两个方法：

ü  for循环  --- 传统的遍历方法，用的最多

ü  forEach方法 --- ES5中新增的方法

 

 

for循环遍历：

需要结合哪几个条件，才能完成数组的遍历？

ü  fo循环

ü  数组的长度, length属性

ü  使用数组名[索引值]获取每一个元素

 

注意：不要使用for ... in去遍历数组，因为for ... in是遍历对象的

 

6.多维数组

前面我们学习的都是一维数组。

在实际开发中，经常会使用二维数组或多维数组。

 

但是，js中，并不存在真正的多维多维数组，多维数组是通过一维数组和一些特性模拟出来的。

 

js中元素可以是任意数据类型。

 

如果我们在数组中存在了一个元素，这个元素刚好是一个数组，那么就得到了二维数组。

 

 

问题1：如何去访问这些元素？

 

问题2：如何去遍历这个二维数组？

 

7.数组方法

查看W3C, 大至有如下方法：

 

常见方法如下:

ü  join

ü  reverse

ü  concat

ü  sort

ü  slice

ü  push和pop

ü  unshift和shift

ü  toString

 

join

将数组中的元素，使用某种符号连接起来，形成一个字符串。

注意，可以省略join中的参数，如果省略，默认就是使用逗号连接。

 

reverse

将数组中的元素，顺序倒置：

使用reverse，数组是立即发生变量。

 

concat

连接多个数组，形成一个新的数组，可以理解成合并

注意：如果数组中的元素，又是一个数组，它不会展开。

 

sort

排序， 用于对数组中的元素进行排序

sort方法，默认情况下，是按照ascii来排序的，从小到大进行排序。

在具体排序时，是一个字符一个字符进行比较，如果第一个字符能够分出胜负，就是它为准，如果第一个字符相同，那么就进行后续的比较，依次类推。

 

sort方法，允许我们传递一个参数，这个参数是一个函数，我们只可以通过这个函数来定义排序规则。

解释：这个自定义函数是如何编写的？

在定义这个规则时，我们需要两个参数。

两个数字在排序时，比如：6，5，如何排序?需要从低到高排，判断两者的大小，以决定是否需要交换位置。

a-b,如果a-b， 则返回true, 些时二者就需要交换顺序，结果就是大的排在后面，小的排在前面。所以这种情况，就是从小到大的一种排序。

反之，就是从大到小的排序。

 

slice

切割的意思，用来截取数组中的片段

格式：arr.slice(start, end)

返回一个新的数组，包含从start到end（不包含这个end元素）

start, end是索引值

 

练习：

 

注意细节：

1，在使用slice时，必须要确保start<end，否则结果就是空数组。

2，如果我们省略了end， 那么就表示截取到最后一个元素。

3，start和end可以为负值，负数表示从后向前截取。如果是负数，只需要使用负数+length转成正数

-4+6=2   -2+6=4  slice(2,4);

 

toString

是从object继承过来的，意思是将数组转化成字符串,如下：

 

使用数组相关的知识，完成如下案例：

 

分析：

当点击下一张时：

 

 

结构和样式代码如下：

 

js代码如下：

 

 

 

七.字符串

1.创建字符串

ü  字面量

ü  new方式

 

字面量方式：

直接使用引号就可以，单引号，还是双引号都可以：

 

new方式：

2.字符串常见操作

ü  获取字符串长度 -- length属性

ü  字符串连接 -- concat

ü  查找 -- charAt、charCodeAt、indexOf、lastIndexOf、search

ü  截取 -- substr、substring、slice

ü  大小写转换 -- toLowerCase、toUpperCase、

ü  替换 -- replace

ü  转数组 -- split

 

length属性

字符串的长度，字符的个数

 

concat

字符串连接，和+差不多

 

charAt

char是字符的意思， at表示在某个位置

可以将字符串看作字符数组，是有索引的，可以通过charAt（索引）获取其中的某个字符

 

charCodeAt

和charAt类似，但是它不是获取这个字符本身，而是获取这个字符对应的ascii码

 

indexOf

根据字符，获取索引位置，和charAt刚好反过来

注意：indexOf， 自左至右， 找到的是对应的第一个字符的位置。

 

lastIndexOf

和indexOf类似，它是自右向左来查找第一个字符出现的位置

注意：是从右向左，但是索引值仍然是自左向右的

 

search

search真正强大的地方是正则表达式。

 

substr

substr(start, length), 第一个参数表示开始位置，第二个参数表示截取的长度

 

substring

substring(start, stop)， 第一个参数表示开始位置，第二个参数表示结束位置

 

slice

 

toLowerCase， toUpperCase

大小写转换

 

 

replace

可以实现字符串的替换操作

注意：默认情况下，replace只替换一次， 真正强大的地方，也是在正规表达式中

 

split

转数组

注意：字符串得有一定规律才能转换成数组。

 

数组和字符串是可以互换的。

 

实际上，字符串本身就可以作为一个数组来使用