一. JavaScript基础
1. JavaScript发展历史(JS)
1. 1994年,网景公司(Netscape)发布了Navigator浏览器0.9版,这是世界上第一款比较成熟的网络浏览器,轰动一时。但是这是一款名副其实的浏览器--只能浏览页面,浏览器无法与用户互动,当时解决这个问题有两个办法,一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。
liveScript ==> javaScript ==> ECMAscript
2. 1995年Sun公司将Oak语言改名为Java,正式向市场推出。Sun公司大肆宣传,许诺这种语言可以"一次编写,到处运 行"(Write Once, Run Anywhere),它看上去很可能成为未来的主宰。
3. 网景公司动了心,决定与Sun公司结成联盟
4. 34岁的系统程序员Brendan Eich登场了。1995年4月,网景公司录用了他,他只用10天时间就把Javascript设计出来了。
5.
(1)借鉴C语言的基本语法
(2)借鉴Java语言的数据类型和内存管理
(3)借鉴Scheme语言,将函数提升到"第一等公民"(first class)的地位
(4)借鉴Self语言,使用基于原型(prototype)的继承机制
2. JavaScript的组成
1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
2. BOM (Browser Object Model): 浏览器对象模型
- 有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。比如: 弹出框、浏览器跳转、获取分辨率等
3. DOM (Document Object Model): 文档对象模型
- 有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。比如: 增加个 div,减少个 div,给 div 换个位置等
总结: JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果
3 . JavaScript能干什么
1. 常见的网页效果【表单验证,轮播图。。。】
2. 与H5配合实现游戏【水果忍者: http://www.jq22.com/demo/html5-fruit-ninja/】
3. 实现应用级别的程序【http://naotu.baidu.com】
4. 实现图表统计效果【https://echarts.apache.org/examples/zh/】
5. js可以实现人工智能【面部识别】
6. 后端开发,app开发,桌面端开发......
4. JavaScript代码的书写位置
- 和
css
一样,我们的js
也可以有多种方式书写在页面上让其生效 -
js
也有多种方式书写,分为 行内式, 内嵌式,外链式
4-1 行内式 JS 代码(不推荐)
- 写在标签上的 js 代码需要依靠事件(行为)来触发
<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>
<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>
<!--
注:onclick 是一个事件(点击事件),当点击元素的时候执行后面的 js 代码
-->
4-2 内嵌式 JS 代码
- 内嵌式的 js 代码会在页面打开的时候直接触发
<!-- 在 html 页面书写一个 script 标签,标签内部书写 js 代码 -->
<script type="text/javascript">
alert('我是一个弹出层')
</script>
<!--
注:script 标签可以放在 head 里面也可以放在 body 里面
-->
4-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>
5. JS 中的注释
- 学习一个语言,先学习一个语言的注释,因为注释是给我们自己看的,也是给开发人员看的
- 写好一个注释,有利于我们以后阅读代码
5-1 单行注释
- 一般就是用来描述下面一行代码的作用
- 可以直接写两个
/
,也可以按ctrl + /
// 我是一个单行注释
// 下面代码表示在浏览器里面出现一个弹出层
alert('我是一个弹出层')
5-2 多行注释
- 一般用来写一大段话,或者注释一段代码
- 可以直接写
/**/
然后在两个星号中间写注释
- 各个编辑器的快捷键不一样,
vscode
是alt + shift + a
/*
我是一个多行注释
*/
/*
注释的代码不会执行
alert('我是一个弹出层')
alert('我是一个弹出层')
*/
alert('我是一个弹出层')
6. 变量(重点)
- 变量指的是在程序中保存数据的一个容器
- 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
- 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
- 语法:
var 变量名 = 值
6-1 定义变量及赋值
// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
- 注意:
- 一个变量名只能存储一个值
- 当再次给一个变量赋值的时候,前面一次的值就没有了
- 变量名称区分大小写(
JS
严格区分大小写)
6-2 变量的命名规则和命名规范
- 规则: 必须遵守的,不遵守就是错
- 一个变量名称可以由 数字、字母、英文下划线(_)、美元符号($) 组成
- 严格区分大小写
- 不能由数字开头
- 不能是 保留字 或者 关键字
- 不要出现空格
- 规范: 建议遵守的(开发者默认),不遵守不会报错
- 变量名尽量有意义(语义化)
- 遵循驼峰命名规则,由多个单词组成的时候,从第二个单词开始首字母大写
- 不要使用中文
6-3 数据类型(重点)
- 是指我们存储在内存中的数据的类型
- 我们通常分为两大类 基本数据类型 和 复杂数据类型
基本数据类型
- 数值类型(number)
- 一切数字都是数值类型(包括二进制,十进制,十六进制等)
-
NaN
(not a number),一个非数字
- 字符串类型(string)
- 被引号包裹的所有内容(可以是单引号也可以是双引号)
- 布尔类型(boolean)
- 只有两个(
true
或者false
)
- null类型(null)
- 只有一个,就是
null
,表示空的意思
- undefined类型(undefined)
- 只有一个,就是
undefined
,表示没有值的意思
判断数据类型
- 既然已经把数据分开了类型,那么我们就要知道我们存储的数据是一个什么类型的数据
- 使用
typeof
关键字来进行判断
// 第一种使用方式
var n1 = 100;
console.log(typeof n1);
// 第二种使用方式
var s1 = 'abcdefg';
console.log(typeof(s1));
7. 数据类型转换
- 数据类型之间的转换,比如数字转成字符串,字符串转成布尔,布尔转成数字等
7.1 其他数据类型转成数值
Number(变量)
可以把一个变量强制转换成数值类型
可以转换小数,会保留小数
可以转换布尔值
遇到不可转换的都会返回
NaN
parseInt(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回
NaN
不认识小数点,只能保留整数
parseFloat(变量)
从第一位开始检查,是数字就转换,知道一个不是数字的内容
开头就不是数字,那么直接返回
NaN
认识一次小数点
- 除了加法以外的数学运算
运算符两边都是可运算数字才行
如果运算符任何一遍不是一个可运算数字,那么就会返回
NaN
加法不可以用
7.2 其他数据类型转成字符串
变量.toString()
有一些数据类型不能使用
toString()
方法,比如undefined
和null
String(变量)
所有数据类型都可以
- 使用加法运算
在 JS 里面,
+
由两个含义字符串拼接: 只要
+
任意一边是字符串,就会进行字符串拼接加法运算:只有
+
两边都是数字的时候,才会进行数学运算
7.3 其他数据类型转成布尔
Boolean(变量)
在 js 中,只有
''
、0
、null
、undefined
、NaN
,这些是false
其余都是
true
8. 运算符
运算符也叫操作符,可以对操作对象进行运算
8.1 算术运算符
算术(Arithmetic)运算包括加、减、乘、除、求余、取负数等,分别使用运算符+
、-
、*
、/
、%
和-
来表示
+
运算符表示加时,任意数据类型的数据与字符串运算时的时候,那个+
号就是连接符转化为String型(可以用+“”
的方式转化为String型)-
、*
、/
、%
则任意数据类型的数据与Number型运算时,都会转换为Number型再进行运算(可以用-“”
的方式转化为Number型)
任何数值与NaN运算都会返回NaN当
+
、-
表示正负时,会先将操作对象转为Number型,然后再进行运算JavaScript中的
/
不分整数除、小数除
8.2 自增、自减运算符
变量自增(Increment)运算符++
和自减(Decrement)运算符--
,其作用是使被操作的变量的值增加1或减少1。既可以放在变量的前面,称为前++(Prefix Increment)和前- -(Prefix Decrement);也可以放在变量的后面,称为后++(Postix Increment)和后–(Postix Decrement)结果不同。
8.3 逻辑运算符
逻辑运算符用于测定变量或值之间的逻辑。
①&& 与:JS中的“与”属于短路的与,如果第一个值为false
,则不会检查第二个值
非布尔值时:如果两个都为true,则返回第二个值。
②|| 或::JS中的“或”属于短路的或,如果第一个值为true
,则不会检查第二个值
非布尔值时:如果两个都为false
,则返回第二个值。
③! 非:!可以用来对一个值进行非运算,所谓非运算就是对一个布尔值进行取反操作,true
变false
,false
变true
。
非布尔值时:先会将其转换为布尔值,然后再取反,所以我们可以利用该特点,来将一个其它的数据类型转换为布尔值,可以为一个任意数据类型取两次反,来将其转换为布尔值,原理和Boolean()函数一样
8.4 赋值运算符
赋值(Assignment)运算符的功能是将一个表达式的值赋给一个变量,赋值运算符用=
号表示。
还提供另一种形式的赋值运算符,称为复合赋值(Combined Assignment)运算符。它由双目运算符与双目赋值运算符一起构成。
8.5 关系运算符
关系(Relational)运算是用来比较两个操作数的值的运算,比较的结果是一个Boolean值,即只能是“真”或“假”。若比较条件得到满足,则结果为真;否则,结果为假。关系运算共6种,包括:小于、小于或等于、大于、大于或等于、等于、不等于、全等,分别使用运算符<
、>
、>=
、==
和!=
、===
、!==
。
对于非数值参与运算时,会把非数值转化为数值进行比较
任何值和NaN比较都是false,包括它本身,判断是否是NaN用isNaN()函数
特例:undefined和null!=0但他俩相等
当两侧都是字符串时,比较第一位Unicode编码,如果一样,则比较下一位,所以比较两个字符串型数字时,一定记得转型对于
===
、!==
,不会做自动类型转换,所以是用来判断一样不一样(包括格式)
null !==undefined
8.6 条件运算符
条件(Conditional)运算符用于进行简单的条件判断,它由两个符号?
和:
组成。
8.7 逗号运算符
逗号(Comma)运算符,是最简单的运算符了,它本身没有具体的计算功能,仅仅是将多个表达式连接在一起。
8.8 运算符的优先级
9. 分支结构
- 我们的
js
代码都是顺序执行的(从上到下) - 逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码
9-1 IF 条件分支结构(重点)
if 语句
- 通过一个
if
语句来决定代码是否执行 - 语法:
if (条件) { 要执行的代码 }
- 通过
()
里面的条件是否成立来决定{}
里面的代码是否执行
// 条件为 true 的时候执行 {} 里面的代码
if (true) {
alert('因为条件是 true,我会执行')
}
// 条件为 false 的时候不执行 {} 里面的代码
if (false) {
alert('因为条件是 false,我不会执行')
}
if else 语句
- 通过
if
条件来决定,执行哪一个{}
里面的代码 - 语法:
if (条件) { 条件为 true 的时候执行 } else { 条件为 false 的时候执行 }
- 两个
{}
内的代码一定有一个会执行
// 条件为 true 的时候,会执行 if 后面的 {}
if (true) {
alert('因为条件是 true,我会执行')
} else {
alert('因为条件是 true,我不会执行')
}
// 条件为 false 的时候,会执行 else 后面的 {}
if (false) {
alert('因为条件为 false,我不会执行')
} else {
alert('因为条件为 false,我会执行')
}
if else if … 语句
- 可以通过
if
和else if
来设置多个条件进行判断 - 语法:
if (条件1) { 条件1为 true 的时候执行 } else if (条件2) { 条件2为 true 的时候执行 }
- 会从头开始依次判断条件
- 如果第一个条件为
true
了,那么就会执行后面的{}
里面的内容 - 如果第一个条件为
false
,那么就会判断第二个条件,依次类推
- 多个
{}
,只会有一个被执行,一旦有一个条件为true
了,后面的就不在判断了
// 第一个条件为 true,第二个条件为 false,最终会打印 “我是代码段1”
if (true) {
alert('我是代码段1')
} else if (false) {
alert('我是代码段2')
}
// 第一个条件为 true,第二个条件为 true,最终会打印 “我是代码段1”
// 因为只要前面有一个条件满足了,就不会继续判断了
if (true) {
alert('我是代码段1')
} else if (true) {
alert('我是代码段2')
}
// 第一个条件为 false,第二个条件为 true,最终会打印 “我是代码段2”
// 只有前一个条件为 false 的时候才会继续向后判断
if (false) {
alert('我是代码段1')
} else if (true) {
alert('我是代码段2')
}
// 第一个条件为 false,第二个条件为 false,最终什么也不会发生
// 因为当所有条件都为 false 的时候,两个 {} 里面的代码都不会执行
if (false) {
alert('我是代码段1')
} else if (false) {
alert('我是代码段2')
}
if else if … else 语句
- 和之前的
if else if ...
基本一致,只不过是在所有条件都不满足的时候,执行最后else
后面的{}
// 第一个条件为 false,第二个条件为 false,最终会打印 “我是代码段3”
// 只有前面所有的条件都不满足的时候会执行 else 后面的 {} 里面的代码
// 只要前面有一个条件满足了,那么后面的就都不会执行了
if (false) {
alert('我是代码段1')
} else if (false) {
alert('我是代码段2')
} else {
alert('我是代码段3')
}
9-2 SWITCH 条件分支结构(重点)
- 也是条件判断语句的一种
- 是对于某一个变量的判断
- 语法:
switch (要判断的变量) {
case 情况1:
情况1要执行的代码
break
case 情况2:
情况2要执行的代码
break
case 情况3:
情况3要执行的代码
break
default:
上述情况都不满足的时候执行的代码
}
- 要判断某一个变量 等于 某一个值得时候使用
- 例子🌰: 根据变量给出的数字显示是星期几
var week = 1
switch (week) {
case 1:
alert('星期一')
break
case 2:
alert('星期二')
break
case 3:
alert('星期三')
break
case 4:
alert('星期四')
break
case 5:
alert('星期五')
break
case 6:
alert('星期六')
break
case 7:
alert('星期日')
break
default:
alert('请输入一个 1 ~ 7 之间的数字')
}
11. 循环结构(重点)
- 循环结构,就是根据某些给出的条件,重复的执行同一段代码
- 循环必须要有某些固定的内容组成
- 初始化
- 条件判断
- 要执行的代码
- 自身改变
11-1 WHILE 循环
while
,中文叫 当…时,其实就是当条件满足时就执行代码,一旦不满足了就不执行了- 语法
while (条件) { 满足条件就执行 }
- 因为满足条件就执行,所以我们写的时候一定要注意,就是设定一个边界值,不然就一直循环下去了
// 1. 初始化条件
var num = 0;
// 2. 条件判断
while (num < 10) {
// 3. 要执行的代码
console.log('当前的 num 的值是 ' + num)
// 4. 自身改变
num = num + 1
}
- 如果没有自身改变,那么就会一直循环不停了
11-2 DO WHILE 循环
- 是一个和
while
循环类似的循环 while
会先进行条件判断,满足就执行,不满足直接就不执行了- 但是
do while
循环是,先不管条件,先执行一回,然后在开始进行条件判断 - 语法:
do { 要执行的代码 } while (条件)
// 下面这个代码,条件一开始就不满足,但是依旧会执行一次 do 后面 {} 内部的代码
var num = 10
do {
console.log('我执行了一次')
num = num + 1
} while (num < 10)