web前端-4.JavaScript

程序员文章站 2022-03-13 17:17:18

...

4.1.JavaScript介绍

4.1.1.前端三层

HTML 结构层写网页结构身体
CSS 样式层写网页样式衣服
JavaScript 行为层写网页特效行为

4.1.2.JavaScript发展史

1）1995 网景联合sun 发布JavaScript 布兰登艾奇（js之父）
2）2011 ECMAScript5 使用最普遍的一个版本

4.1.3.JavaScript 组成部分

1）ECMAScript 核心js js的基础语法、变量、数据类型、运算符、分支结构、循环结构、函数、对象、数组等
2）DOM 文档对象模型
3）BOM 浏览器对象模型
ECMA：欧洲制造商协会

4.1.4.HTML中引入JavaScript的方式

1）内部方式

	<script>
        js代码
    < /script>

<script type="text/javascript">< /script>						//  type属性可以省略

可以写在任意位置
推荐写在body结束标签之前
一个页面可以有多个script

2）外部方式

 <script src="1.js">< /script>

可以写在任意位置
推荐写在head中
一个页面可以有多个script

3）注意

两种引入方式不能共用一个script标签
如果共用，外部样式生效

4)JS的应用方式

1.将JS代码嵌入到开始标签中，通常结合事件
2.在HTML文档中嵌入script标签，在script标签间写JS代码，script的位置通常在被操作元素的后面，如果要放在前面，可以结合window.onload使用
3.将JS代码写在一个独立的js文件中，文件的后缀为.js，然后使用script的src属性将js文件加载到当前页面

4.1.5.JavaScript的输出方式

1）输出到控制台
console.log();
2）输出到网页
document.write();
输出到页面的内容在script后面
3）弹出警告框
window.alert();
简写：alert();
注意：alert会阻止页面程序的得执行以上都是顺序执行，由上往下，由左往右
4）写入到 HTML 元素：innerHTML属性
1.用于获取标签内的文本内容
var spanid=document.getElementById("spanid");
alert(spanid.innerHTML);//直接获取属性
2.向标签内设置新的内容，可以是html代码
var divid=document.getElementById("divid");
divid.innerHTML="<li>haha</li>";

4.1.6.js调试

打开控制台：ctrl+shift+J
控制台报错：
1）错误类型
2）错误原因
3）错误位置

4.1.7.多个script报错

一个script报错，对其他script不会影响
同一script内，错误之前不会受影响，错误及错误之后能执行

4.1.8.js的注释

1）HTML 
2）CSS /* 注释的内容 * /
3）JavaScript
①单行注释
//注释的内容
②多行注释
/* 注释的内容 * /

注意：注释之间不能相互嵌套

4.1.9.JavaScript的语法

1）JavaScript区分大小写（大小写敏感）
2）js语句以分号或者换行结尾
3）推荐一行只写一条语句，并且以分号结尾
4）js不识别多余的空格

4.2.变量

1）定义

值可以改变的量称为变量
字面量：程序中的固定的值，如10,20
变量：内存中开辟出来的用来存储数据的存储空间

2）作用

存储数据的容器

3）声明变量

var 变量名; let 变量名称；
例如：var x;
let和var的区别：
let定义的变量必须是在定义之后使用，不可以在定义之前使用
let定义的变量只能在块级作用域下面使用

4）变量赋值 =

变量名 = 值;
=:赋值
等号右面的值赋给等号左边
例如：x = 5

5）变量的初始化

声明变量的同时给变量赋值，称为变量的初始化
例如：var x = 5;

6）一条语句可以声明多个变量，用逗号隔开

例如：
var x,y,z;//声明变量没有赋值
var x = 5,y = 6,z= x + y;//声明变量的同时赋值

7)声明变量，没有赋值，返回undefined（未定义）

var x;//undefined

8）没有声明，直接调用，报错

console.log(b);//报错

9)重新赋值，后面的值会替换前面的值

var x = 5;
console.log(x);//5
x = 100;//重新赋值
console.log(x);//100

10）重新声明变量，js的值不会丢失

var x = 5;
var x;//重新声明
console.log(x);//5

11)声明提升、赋值留在原地

声明提升到所有代码最上面，赋值留在原地
console.log(x);//undefined
var x = 100;
等价于：
var x;
console.log(x);//undefined
x = 100;
注意：声明变量写在所有代码最上面

12）不写var的情况

x = 5;//没用var声明是全局变量；
给window对象添加的一个属性
console.log(x);//5

var y = 5;
console.log(y);//5

13)变量的命名规则

①变量名区分大小写 a和A是两个变量
②可以包含数字、字母、下划线、$
③不能以数字开头
④不能是JavaScript的关键字和保留字
⑤见名知意，起有意义的名字
⑥多个单词建议驼峰命名法
大驼峰每个单词首字母大写 UserName
小驼峰第一个单词首字母小写，后面单词首字母大写 userName

4.3.数据类型

1、定义

数据类型就是声明变量的类型

2、六大数据类型

1）基础数据类型 5个
number 数字类型
string 字符串类型
boolean 布尔类型，包含true和false
undefined 未定义类型
null 空类型
2）引用数据类型 1个
object 对象类型

3、数据类型
1）number 数字类型

包含了所有的数字（正负、整数、小数、极大极小）、Infinite、NaN（not a number）

2）string 字符串类型

引号包含的任意内容
单双引号都可以
注意：引号之间相互嵌套时，单引号内嵌套双引号，双引号内嵌套单引号
’ " " ’ , " ‘’ "

3）boolean 布尔类型

包含true和false
真假
对错

4）undefined 未定义类型

声明变量没有赋值，默认为undefined

注意：
①undefined一般不主动去赋值 var x;//undefined
②undefined表示数据类型不确定

5）null 空类型

表示数据类型确定为对象
作用：主动用来释放对象
注意：typeof时返回object

6）object 对象类型

大括号包含的键值对
多个键值对之间用逗号隔开
最后一个键值对后面不能加逗号
键值对由键名和键值组成
键名和键值用冒号隔开
例子：
var girlFriend = {
girlFriendName:‘迪丽热巴’,
age:18
};

4、判断数据类型

typeof 变量名
返回5个值：number string boolean undefined object

5、js拥有动态的数据类型

var x;
console.log(typeof x);//undefined
x = 5;//重新赋值
console.log(typeof x);//number
x = ‘5’;//重新赋值
console.log(typeof x);//string

6、数据类型相互转换

1）string类型转换为number
①转换为整数
parseInt()
只取整数部分，不会四舍五入
如果string转换不了为number，返回NaN
②转换为小数
parseFloat()
只取识别一个小数点，不会四舍五入
如果string转换不了为number，返回NaN
2）number类型转换为string 将一个数字，与一个空字符串进行连字符运算，那么就是自动转为字符串了。
var a=123; var b=a+""; console.log(b);//123 console.log(typeof b);//string

4.4.运算符

1、算数运算符

+(加) -(减) *(乘) /(除) %(模，取余) ++（自增） --（自减）

%：取余，判断奇偶数、判断倍数

+ - * / %:

number类型：全是算数运算，返回number类型
string类型：- * / %:转换为number类型进行计算，如果不能转换，返回NaN

+遇到字符串，直接进行字符串拼接，返回string类型
++：自增相当于自己+1 例如：i++ 相当于 i = i + 1;
–：自减相当于自己-1 例如：i-- 相当于 i = i - 1;

++i:前++ i++:后++
1）对于变量自己本身来说，前++和后++ 没有区别，自己本身都+1,变量的值已经发生改变
2）前++ 先执行+1，再赋值
后++ 先赋值，再执行+1

2、比较运算符
只能比较两个值，返回布尔值

>  <  >=  <=  ==  !=  ===  !==
>=:大于或者等于
<=:小于或者等于

==：等于  只判断数值     5 == '5'//true
===：全等、绝对等于  即判断数值，又判断数据类型    5 === '5' //false

!=:不等于  ==  取反
!==:不全等  === 取反

console.log(undefined == null);//true
console.log(undefined === null);//false

console.log(NaN == NaN);//false
console.log(NaN != NaN);//true

3、赋值运算符

=      等号右侧的值赋给等号左侧  
x = y:把y赋值给x    
+=     x+=y  相当于  x = x + y    
-=     x-=y  相当于  x = x - y    
*=     x*=y  相当于  x = x * y
/=     x/=y  相当于  x = x / y 
%=   	x%=y  相当于  x = x % y

4、逻辑运算符

链接多个表单式，返回布尔类型
&&:逻辑与并且
所有表单式都为true，最后结果为true，只要有一个为false，最后结果为false
||：逻辑或或者
只要有一个为true，结果就为true，所有表达式都为false，结果才为false
!：逻辑非取反
逻辑与的优先级大于逻辑或

5、自增练习

 ++    
 -- 
 && 
 ||
==
===
!=
!==
>=
<=

var a = b = c = d = e = f = 1;
alert(a++);//1
alert(++b); //2
alert(++c);//2
alert(d++);//1
alert(++e);//2
alert(++f);//2

var x = 1;
console.log(x++);//1   x=2  y = x++;
console.log(x++);//2   x = 3 y = x++;
console.log(++x);//4   x = 4
console.log(++x);//5   x = 5

4.5.分支结构

程序 = 数据 + 算法
数据：变量、数组、对象
算法：分支结构、循环结构

1、if语句单分支结构

if(条件){
满足条件执行的语句
}
**一件事情，满足就执行，不满足什么也不做**

2、if else 语句双分支结构

if(条件){
满足条件执行的语句
}else{
不满足条件执行的语句
}
**一件事情，满足就执行if里面的语句，不满足就执行else里面的语句
只能二选一执行**

3、else if语句多分支结构

if(条件){
满足当前条件执行的语句
}else if(条件){
满足当前条件执行的语句
}else if(条件){
满足当前条件执行的语句
}else{
以上条件都不满足执行的语句
}
**else可以省略
多件事情，满足就执行对应的代码
多选一执行，上面的条件一旦满足，就不往下执行**

4、动态输入框
prompt(‘提示’,默认值) 默认值可以省略
注意：prompt返回string类型

/*判断是否可以结婚	结婚条件	男  >= 22
女  >= 20*/
var age = prompt('请输入你的年龄');
var sex = prompt('请输入你的性别');
if((sex == '男' || sex == '女') && (age > 0 && age < 150)){
	if(sex == '男' && age >= 22 || sex == '女' && age >= 20){
		console.log('能');
	}else{
		console.log('不能');
	}
}else{
		console.log('请输入正确的性别或者年龄');
}

4.6.循环结构

作用：重复执行有相同规律的代码块

1、for循环语法

for(循环变量;循环条件;执行规律){
重复执行的代码块
}

循环三要素：
1）初始化循环变量
2）循环条件
3）循环语句

2、执行过程

1）先判断循环变量是否满足条件，不满足，直接退出循环
2）满足，进入循环内部，执行重复的代码块
3）执行循环规律，让循环变量发生改变
4）再判断循环变量是否满足条件，不满足，直接退出循环
5）满足，进入循环内部，执行重复的代码块
6）执行循环规律，让循环变量发生改变
7）再判断循环变量是否满足条件，不满足，直接退出循环

for(语句1;语句2;语句3){
	语句4
}
1——2 ——4——3——2——4——3——2

声明变量：
写在for循环外：初始化为当前值，后面变量的值需要改变
写在for循环内：每次进入循环内变量的值不需要改变

输出：
写在for循环内：输出所有过程
写在for循环外：输出最后的结果

3、for循环嵌套
1）语法

for(循环变量;循环条件;执行规律){
	for(循环变量;循环条件;执行规律){
		循环体;
	}
}

2）执行原理

外层循环走一下
内层循环走一圈

外层循环遍历行
内层循环遍历列

外层循环控制内层循环执行的次数
内层循环控制输出

4、break和continue

break:退出整个循环(当前层)
continue：退出本次循环，继续下一轮循环（当前层）

break和continue后面的代码不执行

5、 for循环注意事项

for(循环变量;循环条件;执行规律){循环体}

1）循环变量

var i = 1;
for(;i <= 100; i++){
console.log(i);
}

2）循环条件——死循环
没有循环条件限制

for(var i = 1; ; i++){
	console.log(i);
}

3）执行规律
①写在for循环内

for(var i = 1; i <= 100; ){
	console.log(i);
	i++;
}

②省略——死循环
循环变量一直满足循环条件

for(var i = 1; i <= 100; ){
	console.log(i);
}

4）省略——死循环

for(;;){
	console.log('你好');
}

4.7.字符串

1、定义

引号包含的任意文本
单双引号都可以

2、作用

存储文本

3、字符串相互嵌套

’ " " ’
" ’ ’ "

4、转义字符 (反斜杠)

加在产生歧义内容的前面
\' '
\\ \

5、一个字符串需要定义在同一行
写在多行会报错
解决：

//1）+  字符串拼接
var str = '武'+
'汉'+
'加'+
'油';
//2）\  转移字符
var str = '武\
汉\
加\
油';

6、字符串的属性
length属性:字符串的长度

①定义
返回字符串的长度（字符数）
②语法
string.length
③例子
var str = '你好 hello ! * 123';
console.log(str.length);//16

7、字符串的方法
1）charAt():返回指定位置的字符

①定义
返回指定位置的字符下标从0开始，下一个为1，以此类推
②语法
string.charAt(index)
index：下标、索引
长度 = 最后一个下标 + 1

③例子
var str1 = '你好中国武汉加油'; // 0 1 2 3 4 5 6 7 8
console.log(str1.length);//9
console.log(str1.charAt(2));//中
console.log(str1.charAt(str1.length-1));//油

2）charCodeAt():返回指定位置的字符的Unicode编码

①定义
返回指定位置的字符的Unicode编码
②语法
string.charCodeAt(index)
③例子
var str1 ='你好中国武汉加油0aA';
console.log(str1.charCodeAt(2));
console.log(str1.charCodeAt(8));
0——48 A——65 a——97

3）concat():拼接字符串

①定义
拼接字符串原字符串不改变
②语法
string.concat(str1,str2,...)
③例子
var str1 ='武汉';
var str2 = '加油';
console.log(str1.concat(str2,'哈哈'));//武汉加油哈哈
console.log(str1);//武汉
console.log(str1+str2+'哈哈');//武汉加油哈哈
console.log(str1);//武汉

4）截取字符串

①string.substring(开始位置的下标,结束位置的下标)

注意：
a、截取时含头不含尾（截取时包含开始位置，不包含结束位置）
b、当只有一个参数时，表示从开始位置截取到最后
c、当开始位置的下标大于结束位置时，自动调换

例子：
var str = '中国加油武汉加油';
//         0 1 2 3 4 5 6 7
console.log(str.substring(2,4));//加油
console.log(str.substring(2));//加油武汉加油
console.log(str.substring(4,2));//加油
console.log(str);//中国加油武汉加油

②string.substr(开始位置的下标,截取的长度)

注意：当只有一个参数时，表示从开始位置截取到最后

例子：
var str = '中国加油武汉加油';
//          0 1 2 3 4 5 6 7
console.log(str.substr(2,4));//加油武汉
console.log(str.substr(2));//加油武汉加油
console.log(str.substr(4,2));//武汉
console.log(str);//中国加油武汉加油

③string.slice(开始位置的下标,结束位置的下标)

注意：
a、截取时含头不含尾（截取时包含开始位置，不包含结束位置）
b、当只有一个参数时，表示从开始位置截取到最后
c、当开始位置的下标大于结束位置时，返回空字符串

例子：
var str = '中国加油武汉加油';
//         0 1 2 3 4 5 6 7
console.log(str.slice(2,4));//加油
console.log(str.slice(2));//加油武汉加油
console.log(str.slice(4,2));//空字符串
console.log(str);//中国加油武汉加油

5）英文字母大小写转换

①toUpperCase():转换为大写

string.toUpperCase()
注意：小括号内没有参数，但不能省略小括号

②toLowerCase():转换为小写

string.toLowerCase()
注意：小括号内没有参数，但不能省略小括号

③例子

var str1 = 'abcdefg';
var str2 = 'ABCDEFG';
console.log(str1.toUpperCase());//ABCDEFG
console.log(str1);//abcdefg
console.log(str2.toLowerCase());//abcdefg
console.log(str2);//ABCDEFG

④练习

var str = 'abcdefg';//Abcdefg
//  拿到a    转换为大写 拼接字符串 拿到bcdefg
console.log(str.charAt(0).toUpperCase() + str.substring(1));
console.log(str.charAt(0).toUpperCase() + str.substr(1));
console.log(str.charAt(0).toUpperCase() + str.slice(1));
console.log(str.substring(0,1).toUpperCase().concat(str.substring(1)));
console.log(str.substr(0,1).toUpperCase().concat(str.substr(1)));
console.log(str.slice(0,1).toUpperCase().concat(str.slice(1)));

6）查找字符串

①string.indexOf(查找的字符串,index)

从前往后查找，返回第一个符合条件的下标
如果查找不到，返回-1

index:表示开始查找的位置，从当前位置开始往后查找，可以省略，如果省略，表示从最开始往后查找

var str = '中国加油武汉加油';
console.log(str.indexOf('加油'));//2
console.log(str.indexOf('加油啊'));//-1
console.log(str.indexOf('加油',3));//6

②string.lastIndexOf(查找的字符串,index)

从后往前查找，返回后面第一个符合条件的下标（从前往后的最后一个）
如果查找不到，返回-1

index：表示开始查找的位置，从当前位置开始往前查找，可以省略，如果省略，表示从最后开始往前查找

var str = '中国加油武汉加油';
console.log(str.lastIndexOf('加油'));//6
console.log(str.lastIndexOf('加油啊'));//-1
console.log(str.lastIndexOf('加油',5));//2

③string.search(查找字符串)——可以配合正则

从前往后查找，返回第一个符合条件的下标
如果查找不到，返回-1

var str = '中国加油武汉加油';
console.log(str.search('加油'));//2
console.log(str.search('加油啊'));//-1


var str = 'Hellohello';
console.log(str.search('h'));//5
console.log(str.search(/h/i));//0  i忽略大小写

④string.match(查找字符串)——配合正则

从前往后查找，返回符合条件的具体内容
如果查找不到，返回null

var str = '中国加油武汉加油';
document.write(str.match('加油')+'<br/>');//加油
document.write(str.match('加油啊')+'<br/>');//null

var str = 'helloHello';
document.write(str.match('l')+'<br/>')//l
document.write(str.match(/l/g)+'<br/>')//l,l,l,l

7）trim()：去掉字符串两端多余的空格

①定义
去掉字符串两端多余的空格

②语法
string.trim()

③例子
var str = ' 中国加油 ';
console.log(str.trim());
console.log(str);

8）split()：分隔字符串

①定义
分隔字符串返回数组类型

②语法 string.split(分隔符)

③例子
var str = '你好-中国-武汉-加油';
console.log(str.split('-'));//["你好","中国", "武汉", "加油"]
console.log(str.split(''));// ["你", "好", "-", "中", "国", "-", "武", "汉", "-", "加", "油"]
console.log(str.split());//["你好-中国-武汉-加油"]

9）replace()：替换字符串

①定义
替换字符串

②语法——配合正则
string.replace('旧字符串','新字符串')

③例子
var str = 'hello world hello china';
console.log(str.replace('hello','你好'));//你好 world hello china
console.log(str.replace(/hello/g,'你好'));//你好 world 你好 china
console.log(str);//hello world hello china

4.8.数组

1、数组的定义

中括号包含的一组有序的值

2、作用

存储数据的容器
数据：多条、有序

3、数组元素

js中的数组元素可以是任何数据类型
数组每一条数据称为数组元素，数组元素之间用逗号隔开

4、数组的本质

typeof 返回 object
数组的本质是对象
数组是对象的一种特殊表现形式

5、创建数组

1）字面量法
var 数组名 = [数组元素1,数组元素2,...];
2）new
var 数组名= new Array(数组元素1,数组元素2,...);
3）数组名同变量命名规则
①区分大小写
②可以包含数字、字母、下划线、$
③不能以数字开头
④不能是js的关键字和保留字
⑤见名知意
⑥建议驼峰命名法
4）区别
当只有一条数组，且数据类型为number
字面量法表示下标为0，长度为1，数据为此number
new方法表示长度为此number，数组元素为数组的空位

例子：
var arr1 = [5];
console.log(arr1);//[5] 长度为1
var arr2 = new Array(5);
console.log(arr2);//[empty × 5] 长度为5

6、数组的调动

数组名[index]
操作数组，操作数组的下标，返回下标所对应的值

如果数组声明，但没有赋值，返回undefined

赋值：数组名[index] = 值;

7、数组的遍历

1）for循环

for(var 变量名 = 0; 变量名 < 数组名.length; 变量名++){
	数组名[变量名]
}
for(var i = 0; i < 数组名.length ; i++){
	数组名[i]
}
eg：
var arr = [1,2,3,4,5,6,7,8,9,10];
//         0 1 2 3 4 5 6 7 8 9
for(var i = 0; i < arr.length; i++){
	console.log(arr[i]);
}

i:为number类型
i表示数组的下标

2）for in 快速遍历

for(var i in 数组){
	数组[i]
}

i:为string类型
i表示数组的下标

eg：
var arr = [1,2,3,4,5,6,7,8,9,10];
//         0 1 2 3 4 5 6 7 8 9
for(var i in arr){
	console.log(arr[i]);
}

8、数组的长度：arr.length

arr.length

数组的长度 = 最后一个下标 + 1

eg：
var arr = [1,2,3];
console.log(arr.length);//3
arr[9] = 666;
console.log(arr.length);//10

数组的长度可以赋值
赋值 < 原长度多余的数组元素直接忽略
赋值 > 原长度多余的长度空位补全
赋值不合法报错

9、数组的空位

两个逗号之间没有值，称为数组的空位
最后一个数组元素后面加逗号，不会产生空位，不推荐在最后加逗号

10、数组的方法

1）concat()：拼接数组

①定义
拼接数组
②语法
arr.concat(数组1,数组2,..)
③例子
var arr1 = [1,2,3];
var arr2 =[11,22,33];
console.log(arr1.concat(arr2,[66,77,88]));//[1, 2, 3, 11, 22, 33, 66, 77, 88]
console.log(arr1);//[1, 2, 3]

2）slice()：截取数组元素

①定义
截取数组元素
②语法
arr.slice(开始位置的下标,结束位置的下标)
注意：
a、截取时含头不含尾
b、当只有一个参数时，表示从开始位置截取到最后
c、当开始位置的下标大于结束位置的下标，返回空数组
d、可以从后往前截取，最后一个下标为-1，倒数第二个为-2，以此类推

③例子
var arr = [1,2,3,4,5,6];
// 0 1 2 3 4 5
// -6 -5-4-3-2-1
console.log(arr.slice(1,4));// [2, 3, 4]
console.log(arr.slice(1));// [2, 3, 4, 5, 6]
console.log(arr.slice(4,1));// []
console.log(arr);// [1, 2, 3, 4, 5, 6]
console.log(arr.slice(-5,-2));// [2, 3, 4]

3）查找数组元素

①arr.indexOf(查找的数组元素,index)
从前往后查找，返回第一个符合条件的下标如果查找不到，返回-1
index：表示开始查找的位置，从index开始往后查找，index可以省略，省略后，从最开始往后查找
②arr.lastIndexOf(查找的数组元素,index)
从后往前查找，返回后面第一个符合条件的下标（从前往后的最后一个）
如果查找不到，返回-1
index：表示开始查找的位置，从index开始往前查找，index可以省略，省略后，从最后往前查找
③例子
var arr =[1,2,3,3,2,1];
console.log(arr.indexOf(2));//1
console.log(arr.indexOf(22));//-1
console.log(arr.indexOf(2,2));//4 第一个2：表示查找的数组元素第二个2：表示开始的位置
console.log(arr.lastIndexOf(2));//4
console.log(arr.lastIndexOf(22));//-1
console.log(arr.lastIndexOf(2,2));//1

4）增加删除数组元素——改变原数组

①尾部操作：arr.push(数组元素1,数组元素2,…)、arr.pop()
增加：arr.push(数组元素1,数组元素2,…) 返回增加后数组的长度

删除：arr.pop() 一次只能删除一个数组元素，返回删除的数组元素

例子：
var arr = ['张一山','詹姆斯'];
console.log(arr.push(666,'科比'));//4
console.log(arr);// ["张一山", "詹姆斯", 666, "科比"]
console.log(arr.pop());//科比
console.log(arr);// ["张一山", "詹姆斯", 666]
console.log(arr.pop());//科比
②头部操作：arr.unshift(数组元素1,数组元素2,…)、arr.shift()
增加：arr.unshift(数组元素1,数组元素2,…) 返回增加后数组的长度

删除：arr.shift() 一次只能删除一个数组元素，返回删除的数组元素

例子：
var arr = ['张一山','詹姆斯'];
console.log(arr.unshift(666,'科比'));//4
console.log(arr);//[666, "科比", "张一山", "詹姆斯"]
console.log(arr.shift());//666
console.log(arr);//["科比", "张一山", "詹姆斯"]
console.log(arr.shift());//科比

5）Array.isArray()：判断是否为数组

①定义
判断是否为数组是返回 true 不是返回 false

②语法
Array.isArray(数组)

③例子
var arr = [];
console.log(Array.isArray(arr));
if(Array.isArray(arr) === true)
{
console.log('是数组');
}else{
console.log('不是数组');
}

6）arr.splice()：增加删除数组元素

①定义
增加和删除数组元素改变原数组

②语法 a
rr.splice(开始位置的下标,删除的个数,数组元素1,数组元素2,...)
注意：
a、返回删除的数组元素，如果删除个数为0，返回空数组
b、当删除个数为0时，新增的数组元素在开始位置的前面
c、第三个参数可以省略
d、改变原数组
③例子
var arr = [‘迪丽热巴’,‘佟丽娅’,‘古力娜扎’,‘热依扎’];
// 0 1 2 3
console.log(arr.splice(1,2));//从下标为1的位置开始删除两个 [“佟丽娅”, “古力娜扎”]
console.log(arr);// [“迪丽热巴”, “热依扎”]
console.log(arr.splice(1,0));//从下标为1的位置开始删除0个 []
console.log(arr);// [“迪丽热巴”, “热依扎”]
console.log(arr.splice(1,1,‘关晓彤’,‘贾玲’));//从下标为1的位置开始删除1个新增两个 [“热依扎”]
console.log(arr);//[“迪丽热巴”, “关晓彤”, “贾玲”]
console.log(arr.splice(1,0,‘沈腾’));//从下标为1的位置开始删除0个新增1个 []
console.log(arr);// [“迪丽热巴”, “沈腾”, “关晓彤”, “贾玲”]

7）join()：分隔数组

①定义
分隔数组
数组默认分隔符为逗号

②语法
arr.join('分隔符') 返回string类型
③例子

var arr = [1,2,3];
document.write(arr+'<br/>');//1,2,3
document.write(arr.join('-')+'<br/>');//1-2-3
var str = arr.join('*');
document.write(typeof str +'<br/>');//string
document.write(arr.join('')+'<br/>');//123

string——>arr   str.split()
arr——>string   arr.join()

8）reverse()：翻转数组元素

①定义
翻转数组元素

②语法
arr.reverse() 改变原数组

③例子
var arr = [1,2,3,4,5,6];
console.log(arr.reverse());//[6, 5, 4, 3, 2, 1]
console.log(arr);//[6, 5, 4, 3, 2, 1]

4.9.对象

1、定义

对象是大括号包含的无序的数据集合
对象由键值对组成，多个键值对之间用逗号分隔，最后一个键值对后面不能加逗号
键值对由键名和键值组成，键名和键值之间用冒号分隔

2、作用

存储数据的容器
1）多条数据
2）无序

3、键名 key

键名也可以称为属性
对象的属性为字符串类型，所以加不加引号都可以
以下情况必须加引号：
①以数字开头
②包含特殊符号

4、键值 value

键值是键名所对应的具体的值
键值可以是任何数据类型

5、创建对象
字面量法

var 对象名 = {
	键名:键值,
	键名:键值,
	键名:键值
};

eg:
var obj = {
	girlName:'贾玲',
	'age':18,
	'1where':'地球上'
};
console.log(obj);
console.log(typeof obj);//object

6、对象的读写

1）读取

①点运算符
对象名.键名
②反括号运算符
对象名[‘键名’]

例子：

var obj = {
	userName:'贾玲',
	age:18,
	where:'大碗娱乐',
	'1height':'168cm'
}
console.log(obj);
console.log(obj.userName);//贾玲
console.log(obj['age']);//18
console.log(obj['i']);//undefined
console.log(obj['1height']);//168cm

2）写入

①点运算符
对象名.键名 = 值;
②反括号运算符
对象名[‘键名’] = 值;

例子：
var obj = {
	userName:'张一山',
	age:28
};
obj.userName = '孙红雷';
obj['age'] = 18;
console.log(obj);
obj.look = '漂亮';
console.log(obj);
obj['height'] = '188cm';
console.log(obj);

3）点和[]的区别

能用点运算符肯定能用[]
能用[]不一定能用点

以下情况必须用[]:
①当键名不符合标识符规范
②当键名为字符串变量时

7、对象的遍历
1）for in 快速遍历

for(var i in 对象名){
//i  表示键名   string类型
	对象名[i]
}
eg：
var obj = {
	userName:'孙漂亮',
	age:18,
	height:188,
	where:'哈尔滨'
};
for(var i in obj){
//i 表示键名
//对象名.键名
//对象名['键名']
// console.log(obj.i); //undefined
//console.log(obj['i']);//undefined

	console.log(obj[i]);//i  是string类型  还是一个变量
}

8、in

①定义
判断对象是否包含某个属性
②语法
‘属性’ in 对象名
返回true 包含
返回false 不包含
③例子
var obj = {
userName:‘孙漂亮’,
age:18
};
console.log(‘age’ in obj);//true
console.log(‘height’ in obj);//false

9、对象的引用

1）基础数据类型
赋值传递的是复印件

var a = 5;
var b = a;
console.log(a);//5
console.log(b);//5
a = 10;//重新赋值
console.log(a);//10
console.log(b);//5

2）引用类型
赋值传递的是地址
其中一个发生改变，全部跟着改变

var obj1 = {
	userName:'孙漂亮'
}
var obj2 = obj1;
console.log(obj1);//孙漂亮
console.log(obj2);//孙漂亮

obj1.userName = '黄渤';
console.log(obj1);//黄渤
console.log(obj2);//黄渤

var arr1 = [1,2];//数组
var arr2 = arr1;
arr2[0] = 3;
console.log(arr1);//3,2
console.log(arr2);//3,2
console.log(typeof arr1);//object

4.10.函数

1、定义

函数是由事件驱动或者被调用时才执行的可重复使用的代码块

2、函数的作用

1）可以被重复使用
2）可以控制代码执行时间

3、创建函数

1）function命令法
function 函数名(){
函数体
}
2）函数表达式法
var 变量名 = function(){
函数体
};
3）区别
function命令法，调用函数可以写在声明的前面（函数声明会提升）
函数表单式法，调用不能写在声明的前面（变量声明提升，赋值留在原地）

4、函数的调用

函数名();
变量名();

5、函数声明提升

函数声明提前到所有代码最上面

6、函数的参数

1）形式参数简称为形参
形参是写在函数声明的小括号内，可以有多个参数，用逗号隔开
形参相当于用var声明的变量，不用写var
2）实际参数简称实参
实参是写在函数调用的小括号内，可以是多个，用逗号隔开
实参相对于给形参赋值
3）个数
实参和形参要一一对应
如果：
实参 < 形参多余的形参为undefined
实参 > 形参多余的实参直接忽略

7、返回值

return 值; 返回到函数调用处

return后面的代码不执行

8、函数的分类

1）根据定义
内置函数
自定义函数
2）根据参数
有参
无参
3）根据返回值
有返回值
无返回值
4）特殊
匿名函数、回调函数、自执行函数等

4.11.作用域

1）定义作用域指变量存在的范围
2）分类
①全局作用域
②函数作用域
3）变量的分类
①全局变量任何位置都可以使用
②局部变量只能在函数作用域中使用，在全局作用域中不可以使用当全局变量和局部变量同时存在，局部先用自己的变量
4）局部变量
①形参
②在函数内部直接用var声明的变量
5）优缺点
全局：
优点：可以共享
缺点：不安全，易污染
局部：
优点：安全
缺点：不可以共享

4.12.DOM

1、全称

DOM document object model
文档对象模型

2、作用

DOM规定了一套管理HTML文档的机制

3、节点（node）

DOM规定HTML一切内容都称为节点
1）HTML的元素称为元素节点（element node）
2）HTML元素之间的文本称为文本节点（text node）
3）HTML元素的属性称为属性节点（attribute node）
4）HTML文档称为文档节点
5）HTML注释称为注释节点

4、document节点

document节点可以称为document对象
document节点是文档的根节点，它不需要手动创建，浏览器一打开会自动生成document节点

5、节点之间的关系

父节点
子节点
兄弟节点

6、document节点的属性

1）title属性：返回当前文档的标题
①定义返回当前文档的标题
②语法 document.title
③例子
console.log(document.title);
document.title = '哈哈'

2）location属性：返回文档的路径
①定义返回文档的路径
②语法 document.location.href
③语法
console.log(document.location.href);
document.location.href ='http://www.baidu.com';

7、属性

1）value属性：返回当前值
①定义返回当前值
②语法 元素.value
2）src属性：设置图片路径
①定义设置图片路径
②语法 元素.src = '路径'

8、获取页面元素

1）通过ID获取：document.getElementById('idName')

document.getElementById(‘idName’)
获取页面中第一个符合条件的元素

eg：
HTML部分：
<div id="box">哈哈1</div>
<div id="box">哈哈2</div>
<h1 id="h1">一号标题</h1>

JavaScript部分：
var div1 = document.getElementById('box');
console.log(div1);//获取哈哈1

var h = document.getElementById('h1');
console.log(h);

2）通过标签名获取：node.getElementsByTagName('tagName')

node.getElementsByTagName(‘tagName’)
返回伪数组类型，可以操作下标，但是数组的方法不能用

eg：
//通过标签名获取
// var list = document.getElementsByTagName('li')
// console.log(list);

// 通过id获取ul
var ul = document.getElementById('ul');
console.log(ul);

//通过标签名获取li
var list = ul.getElementsByTagName('li');
console.log(list);
// console.log(list.splice(1,2));//报错  伪数组
console.log(list[1]);

3）通过className获取：document.getElementsByClassName('className')

document.getElementsByClassName(‘className’)
返回伪数组，可以操作下标

eg：
// 通过className获取
var box = document.getElementsByClassName('box');
console.log(box);

4）通过css选择器获取

①document.querySelector('css选择器')
返回符合条件的第一个元素
②document.querySelectorAll('css选择器')、
返回符合条件的所有元素，是一个伪数组形式，可以操作下标

eg:
//通过css选择器查找
// var div = document.querySelector('.box');
// console.log(div);

// var div = document.querySelectorAll('.box');
// console.log(div);

// var list = document.querySelectorAll('#ul>li');
// console.log(list);

9、创建页面元素

1）创建元素
document.createElement('元素名')
2）创建文本节点
document.createTextNode('文本')
3）创建属性
document.createAttribute('属性名')
4）属性赋值
属性.value = '属性值'
5）设置属性节点
元素.setAttributeNode(属性)
6）作为子节点追加到父节点中
父节点.appendChild(子节点)

父节点为body： document.body

10、操作HTML的属性

1）操作所有属性
①元素.getAttribute('属性名') 如果有属性返回对应的属性值如果没有属性返回null
②元素.setAttribute('属性名','属性值')
③元素.removeAttribute('属性名')
2）操作style属性
①元素.style.css属性 = '属性值';
注意：
a、css属性的-去掉，换成首字母大写例如 backgroundColor
b、当属性时候js的保留字时，在属性前面加css 例如 cssFloat
②元素.style.cssText = 'css样式';
3）操作className
元素.className = '类名'

4.13.事件

事件多配合函数使用

1）语法

①写在HTML中

<元素 on事件 = "js代码"></元素>

<button onclick="console.log('你好');">点击我</button>

②写在HTML和js中

html:
<元素 on事件 = "函数名();"></元素>

js:
function 函数名(){
函数体
}
<button onclick="hello();">点击我</button>
function hello(){
console.log('你好');
}

③写在js中

元素.on事件 = function(){
函数体
};
//获取元素
var btn = document.querySelector('button');
btn.onclick = function(){
console.log('你好');
};

2）常用事件：

onclick 点击
onmousedown 鼠标按下
onmouseup 鼠标释放
onmousemove 鼠标移动移动1px触发一次事件
onmouseenter 鼠标移入不支持冒泡父元素绑定了事件，子元素不可以触发
onmouseleave 鼠标移出不支持冒泡父元素绑定了事件，子元素不可以触发
onmouseover 鼠标移入支持冒泡父元素绑定了事件，子元素可以触发
onmouseout 鼠标移出支持冒泡父元素绑定了事件，子元素可以触发

4.14.实例

1.轮播图的实现

// 存储图片
var imgArr = ['img1.webp','img2.webp','img3.jpg','img4.webp','img5.webp'];       
//    0           1            2           3         4
// 定义函数  切换图片
function fun(index){
	//当index  和 数组下标相等时  对应的图片显示
	// 拿到数组的所有下标
	for(var i = 0; i < imgArr.length; i++){
		//i  0 1 2 3 4
		// 判断i  和  index    当和index相等时   对应的图片显示
		if(i === index){
		   img.src = 'images/' + imgArr[i];
		//点击轮播图的圆点颜色发生变化
		   list[i].style.backgroundColor = 'rgba(255,255,255,.3)'
		}else{
		   list[i].style.backgroundColor = '';
		}
	}
}

阶段总结（二）

一、获取页面元素

document.getElementById('idName')   返回元素
node.getElementsByTagName('tagName')   返回伪数组  操作下标
document.getElementsByClassName('className')   返回伪数组  操作下标
document.querySelector('css选择器')   返回元素
document.querySelectorAll('css选择器')   返回伪数组  操作下标

二、创建页面元素

document.createElement('元素名')
document.createTextNode('文本')
document.createAttribute('属性名')
属性.value = '属性值';
元素.setAttributeNode(属性)
父节点.appendChild(子节点)

三、操作页面元素

1）操作所有的HTML属性

元素.getAttribute('属性名')  如果有  返回属性值  没有  返回  null
元素.setAttribute('属性名','属性值')
元素.removeAttribute('属性名')

2）操作style属性

①元素.style.css属性 = '属性值';
②元素.style.cssText = 'css样式';

3）操作className

元素.className = '类名';

四、事件

onclick 点击
onmousedown
onmouseup
onmousemove
onmouseover
onmouseout
onmouseenter
onmouseleave

web前端-4.JavaScript

4.1.JavaScript介绍

4.2.变量

4.3.数据类型

4.4.运算符

4.5.分支结构

4.6.循环结构

4.7.字符串

4.8.数组

4.9.对象

4.10.函数

4.11.作用域

4.12.DOM

4.13.事件

4.14.实例

阶段总结（二）

基于JS抓取某高校附近共享单车位置使用web方式展示位置变化代码实例

提高Web性能的前端优化技巧总结

前端防止用户重复提交js实现代码示例

Node.js获取前端ajax提交的request信息

Vue服务端渲染实践之Web应用首屏耗时最优化方案

vue项目前端错误收集之sentry教程详解

前端是什么工作（小白学前端还是后端）

常见web服务器软件有哪些（做网页服务器环境工具大全）

在Python的Flask框架中构建Web表单的教程

使用Python的Flask框架构建大型Web应用程序的结构示例

web前端-4.JavaScript

4.1.JavaScript介绍

4.2.变量

4.3.数据类型

4.4.运算符

4.5.分支结构

4.6.循环结构

4.7.字符串

4.8.数组

4.9.对象

4.10.函数

4.11.作用域

4.12.DOM

4.13.事件

4.14.实例

阶段总结（二）

基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例

提高Web性能的前端优化技巧总结

前端防止用户重复提交js实现代码示例

Node.js获取前端ajax提交的request信息

Vue服务端渲染实践之Web应用首屏耗时最优化方案

vue项目前端错误收集之sentry教程详解

前端是什么工作（小白学前端还是后端）

常见web服务器软件有哪些（做网页服务器环境工具大全）

在Python的Flask框架中构建Web表单的教程

使用Python的Flask框架构建大型Web应用程序的结构示例

基于JS抓取某高校附近共享单车位置使用web方式展示位置变化代码实例