Ⅰ JavaScript基础语法

（一）JavaScript发展历史

（二）JavaScript的作用

1.浏览器客户端开发(前端开发)

2.服务端开发

3.桌面应用开发

（三）JavaScript的组成

1.ECMASCRIPT:

2.BOM (Browser Object Model): 浏览器对象模型

3.DOM (Document Object Model): 文档对象模型

（四）JavaScript代码书写方式（位置）

1.行内式 JS 代码（不推荐）

2.内嵌式 JS 代码

3.外链式 JS 代码（推荐）

（五）变量（重点）

1.概念及语法

2.定义变量及赋值

3.变量的命名规则和规范

4.访问变量值

（六）数据类型（重点）

1.概念

2.基本数据类型

3.复杂数据类型

4.判断数据类型

5.数据类型的转换

（七）运算符

1.概念

2.运算符类型

3.运算符优先级

（八）练习

（一）JavaScript发展历史

1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。
1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。
网景公司动了心，决定与Sun公司结成联盟, 后来验证java在浏览器客户过于臃肿，适合服务端开发。
34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多态语言）
1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript
1996年11月，Netscape公司决定将JavaScript提交给国际标准化组织ECMA （European Computer Manufacturers Association），希望JavaScript能够成为国际标准，以此抵抗微软。
1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

小结：

javascript是1995年网景公司雇佣布兰登开发的全新语言

javascript最初是为了实现浏览器客户端交互

ECMAScript与javascript关系

（二）JavaScript的作用

1.浏览器客户端开发(前端开发)

常见的网页效果【表单验证，轮播图。。。】

与H5配合实现游戏【水果忍者：水果忍者HTML5网页版在线游戏】

实现应用级别的程序【百度脑图 - 便捷的思维工具】

实现统计效果【http://echarts.baidu.com/examples/】

地理定位等功能【地图JS API示例 | 百度地图开放平台】

在线学编程【极客战记网易官网-玩游戏学编程零基础Python入门-CodeCombat中国官方个人版】

js可以实现人工智能【面部识别】

2.服务端开发

Node.js ：简单的说 Node.js 就是运行在服务端的 JavaScript。

3.桌面应用开发

（三）JavaScript的组成

1.ECMASCRIPT:

定义了javascript的语法规范,描述了语言的基本语法和数据类型

2.BOM (Browser Object Model): 浏览器对象模型

有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等

3.DOM (Document Object Model): 文档对象模型

有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给div 换个位置等

小结：

JS 就是通过固定的语法去操作浏览器和标签结构来实现网页上的各种效果

（四）JavaScript代码书写方式（位置）

和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效。js 也有多种方式书写，分为行内式，内嵌式，外链式。

1.行内式 JS 代码（不推荐）

写在标签上的代码需要依靠事件（行为）来触发

<!-- 写在a标签的herf属性上 --><a href="javascript:alert('我是一个弹出层')；">点击一下试试</a><!-- 写在其他元素上 --><div onclick="alert('我是一个弹出层')">点一下试试看</div><!-- 注：onclick 是要给事件（点击事件），当点击元素的时候执行后面的js代码 -->

2.内嵌式 JS 代码

内嵌式的js代码会在页面打开的时候直接触发

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 --><script type="text/javascript">alert('我是一个弹出层')</script><!-- 注：script 标签可以放在 head 里面也可以放在 body 里面 -->

3.外链式 JS 代码（推荐）

外链式js代码只要引入了html页面，就会在页面打开的时候直接触发

新建一个 .js 后缀的文件，在文件内书写js代码，把写好的js文件引入html页面

// 我是 index.js 文件alert('我是一个弹出层')
<!-- 我是一个 html 文件 -->
<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面可以引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

（五）变量（重点）

1.概念及语法

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他

2.定义变量及赋值

    // 定义一个变量var num;// 给一个变量赋值num = 100;// 定义一个变量的同时给其赋值var num2 = 200;

注意：

一个变量名只能存储一个值

当再次给一个变量赋值的时候，前面一次的值就没有了

变量名称区分大小写（JS区分大小写）

3.变量的命名规则和规范

规则：必须遵守的，不遵守就是错

规范：建议遵守的（开发者默认），不遵守不会报错

一个变量名称可以由数字、字母、英文下划线（_）、美元符号（$）组成
严格区分大小写
不能由数字开头，不要使用中文汉字命名
不能是保留字或者关键字
不要出现空格
变量名尽量有意义（语义化）
遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写

4.访问变量值

控制台输出语句console.log('输出内容') 引号中的内容被打印显示到控制台窗口console.log(变量名) 变量名值被打印显示到控制台窗口

console.log('输出内容')
console.log(变量名)

（六）数据类型（重点）

1.概念

是指我们存储在内存中的数据的类型。我们通常分为两大类基本数据类型和复杂数据类型

2.基本数据类型

数值类型（number类型）

一切数字都是数值类型（包括二进制，十进制，十六进制等）

=> var a = 10

NaN（not a number）,是一个非数字值
字符串类型（string类型）

字符串类型值：用引号引起来（单双引号都可）

=> var b = 'helloworld'
布尔类型（boolean类型）

布尔类型值 true 成立真；false 不成立假；

=> var isStudent = true
未定义的类型（undefined类型）

只有一个，就是undefined，表示没有值的意思
空类型（null）

只有一个，就是null，表示空的意思

=> var n = null

3.复杂数据类型

就是对象类型，后面学习。

4.判断数据类型

既然已经把数据分开了类型，那么我们就要知道我们存储的数据是一个什么类型的数据，我们需要使用 typeof 关键字来进行判断。

typeof(变量) => 获取变量数据类型

console.log(typeof 变量) => 显示变量类型

<script>var s1 = 'hello'  // string 字符串类型console.log(typeof(s1))
var n1 = 100  // number 数值类型console.log( typeof n1 )
var isOk = true  // boolean 布尔类型console.log( typeof isOk)
var isNull = null // null 类型console.log( typeof isNull )  // object
var a    // undefined  未定义类型console.log( typeof a)
var n2 = NaN  // 数值类型 number   NaN 和 1,2,3 ...都是数值类型的一个值， NaN表示的非数值 not is numberconsole.log(typeof n2)  // </script>

5.数据类型的转换

其它数据类型 => 数值类型

1.1 Number(变量)

=> 返回转换之后的值

①可以把一个变量强制转换成数值类型

②可以转换小数，会保留小数

③可以转换布尔值

④遇到不可转换的都会返回NaN

字符串类型 => 数值类型 string => number

'100' -> 100 'abc' -> NaN '' -> 0
布尔类型 => 数值类型 boolean => number

true -> 1 false -> 0
null => 数值类型

null -> 0
undefined => 数值类型

undefined -> NaN

1.2 parseInt(变量)

=> 返回转换之后的数值（特点: 取整）

①从第一位开始检查，是数字就转换，直到一个不是数字的内容

②开头就不是数字，那么直接返回NaN

③不认识小数点，只能保留整数

1.3. parseFloat(变量)

①从第一位开始检查，是数字就转换，直到一个不是数字的内容

②开头就不是数字，那么直接返回NaN

③认识一次小数点

1.4 除加法以外的数学运算实现类型转换

隐式转换

①运算符两边都是可运算数字才行

②如果运算符任何一边不是一个可运算数字，那么就会返回NaN

③ 加法不可以用

其它数据类型 => 字符串类型

2.1 String(变量)

=> 返回转换之后的值

所有数据类型都可以

String(100) => '100'
String(undefined) => 'undefined'
String(true) => 'true'
String(null) => 'null'

2.2 变量.toString()

有一些数据类型不能使用toString方法，比如 undefined和null

2.3 使用加法运算

在JS里面，+ 有两个含义，一个是字符串拼接，只要 + 任意一边是字符串，就会进行字符串拼接；一个是加法运算，只有 + 两边都是数字的时候，才会进行数学运算

其它类型转 => 布尔类型

Boolean(变量)

=> 返回转换之后的值

在JS中，只有以下转换布尔值是false，其余都是true

'' 、0、 null、 undefined、 NaN => false

100 => true

（七）运算符

1.概念

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在JS里面还有很多的运算方式

2.运算符类型

数学运算符

1. => +

只有符号两边都是数字的时候才会进行加法运算

只要符号任意一边是字符串类型，就会进行字符串拼接

2. => -

会执行减法运算

会自动把两边都转换成数字进行运算

3. => *

会执行乘法运算

会自动把两边都转换成数字进行运算

4. => /

会执行除法运算

会自动把两边都转换成数字进行运算

5. => %

会执行取余运算

会自动把两边都转换成数字进行运算

赋值运算符

1. => =

就是把 = 右边的赋值给等号左边的变量名

var num = 100

就是把100赋值给num变量

那么num变量的值就是100

2. => +=

var a = 10;a += 10；console.log(a); // => 20

a += 10 等价于 a = a +10

3. => -=

var a = 10;a -= 10;console.log(a); // => 0

a -= 10 等价于 a = a - 10

4. => *=

var a = 10;

a *= 10;

console.log(a); // => 100

a *= 10 等价于 a = a *10

5. => /=

var a = 10;

a /= 10;

console.log(a); // => 1

a /= 10 等价于 a = a / 10

6. => %=

var a = 10;

a %= 10;

console.log(a); // => 0

a %= 10 等价于 a = a % 10

比较运算符

1.==

比较符号两边的值是否相等，不管数据类型

1 == '1'

两个的值是一样的，所以得到 true

2.===

比较符号两边的值和数据类型是否都相等

1 === '1'

两个值虽然一样，但是因为数据类型不一样，所以得到false

3.!=

比较符号两边的值是否不等

1 != '1'

因为两边的值是相等的，所以比较他们不等的时候得到false

4.!==

比较符号两边的数据类型和值是否不等

1 !== '1'

因为两边的数据类型确实不一样，所以得到true

5.>=

比较左边的值是否大于或等于右边的值

1 >= 1 true

1 >= 0 true

1 >= 2 false

6.<=

比较左边的值是否小于或等于右边的值

1 <= 2 true

1 <= 1 true

1 <= 0 false

7.＞

比较左边的值是否大于右边的值

1 > 0 true

1 > 1 false

1 > 2 false

8.<

比较左边的值是否小于右边的值

1 < 2 true

1 < 1 false

1 < 0 false

9.字符串比较a' > 'b'

字符串比较比较的是 ascii

ASCII ((American Standard Code for Information Interchange): 美国信息交换标准代码）

逻辑运算符

1.**&&**（同为真，则为真；一个为假，则为假）

进行且的运算

符号左边必须为true 并且右边也是true，才会返回true

只要有一边不是true，那么就会返回false

true && true true

true && false false

false && true false

false && false false

2.**||**（一个为真，则为真；同为假，则为假）

进行或的运算

符号的左边为true或者右边为true，都会返回true

只有两边都是false的时候才会返回false

true || true true

true || false true

false || true true

false || false false

3.!

进行取反运算

本身是true的，会变成false

本身是false的，会变成true

! true false

! false true

自增自减运算符（一元运算符）

1.++

进行自增运算

分成两种，前置++和后置++

前置++，会先把值自动+1，再返回

var a = 10

console.log(++a)

// 会返回11，并且把a的值变成11

后置++，会先把值返回，再自动+1

var a = 10
console.log(a++)
// 会返回10，然后把a的值变成11

2.--

进行自减运算

分成两种，前置--和后置--

和 ++ 运算符道理一样

3.运算符优先级

JavaScript中的运算符优先级是一套规则。该规则在计算表达式时控制运算符执行的顺序。
具有较高优先级的运算符先于较低优先级的运算符执行。例如，乘法的执行先于加法。下表按从最高到最低的优先级列出JavaScript运算符。
具有相同优先级的运算符按从左至右的顺序求值。

（八）练习

为抵抗洪水，战士连续作战89小时，编程计算共多少天零多少小时？

分析:  已知 89小时 var hours = 89求var day = ?var h = ?隐藏条件 1天24小时89/24 -> ?天89%24 -> ?小时
小结:
变量
类型转换
数据运算
控制输出语句
字符串拼接 + 连接符 <script>var hours = 89var day = parseInt(hours / 24)var h = hours % 24console.log('战士连续作战89小时，编程计算共' + day + '天零' + h + '小时')
</script>

小明要到美国旅游，可是那里的温度是以华氏度为单位记录的。它需要一个程序将华氏温度（80度）转换为摄氏度，并以华氏度和摄氏度为单位分别显示该温度。提示：摄氏度与芈氏度的转换公式为：摄氏度 = 5/9.0*(华氏度-32)，保留3位小数。变量.toFixed (3)

分析:  华氏温度（80度） -> 为摄氏度  摄氏度 = 5/9.0*(华氏度-32)var hsDeg = 80 var csDeg = ?csDeg = 5/9.0*(hsDeg-32)
<script>var hsDeg = 80var csDeg = 5 / 9.0 * (hsDeg - 32)console.log(csDeg.toFixed(3))</script>

var k = -2;
alert(++k + k++ + ++k + k);

分析: 考查:  自增运算， ++在前和在后的区别从左向右依次运算++k + k++ + ++k + k1. k:-1 2. ++k + k++=> -1 + -1  -> -2 => k: 0 3.  ++k + k++ + ++kk: 1-14.  ++k + k++ + ++k + k=> 0