目录
2.BOM (Browser Object Model): 浏览器对象模型
3.DOM (Document Object Model): 文档对象模型
（一）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版。
<!--ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。-->
小结：
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.概念及语法
-
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
-
也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到他
-
<!--变量的本质是内存中一个存储单元-->
-
<!--语法： var 变量名 = 值-->
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 number
console.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 = 89
var day = parseInt(hours / 24)
var h = hours % 24
console.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 = 80
var csDeg = 5 / 9.0 * (hsDeg - 32)
console.log(csDeg.toFixed(3))
</script>var k = -2;
alert(++k + k++ + ++k + k);
分析:
考查: 自增运算， ++在前和在后的区别
从左向右依次运算
++k + k++ + ++k + k
1. k:-1
2. ++k + k++
=> -1 + -1 -> -2
=> k: 0
3. ++k + k++ + ++k
k: 1
-1
4. ++k + k++ + ++k + k
=> 0
扫一扫
552
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
