（15）javaScript入门
什么是javaScript
HTML用来做页面的架构，CSS用来做页面样式的布局
javaScript就是用来完成页面用户交互的，JS写的就是叫脚本
js就是弱语言类型，不同类型的时候可以相互转换
js写在script标签内，script标签可以出现在html的任意位置
script标签一般书写在body标签的最底部，但写在body标签和html标签之间，会被解析在body的最底部，所有代码书写在该位置也是合理的
PS：html的解析是由上而下的，所以脚本的执行也是根据html标签的顺序执行的
常用语句
1、alert('弹出警告') #alert就是警告的意思
2、<script src="js的引入.js"> #通过script从外部引入脚本
3、var 变量名 = 变量值； #var是定义变量的关键词
4、new #创建对象的关键词
5、print #这个功能就是通过浏览器调用打印机打印页面
6、console.log （xxx） #就是js语法用来打印的
7、// #这个是js的注释
8、! #是取反的意思
9、isNaN #检查是不是NaN
8、<script src="js的引入.js"> #从外部引入脚本
9、var n=10; #定义一个数字类型
10、var s = 'str' ; #定义一个字符串
11、var b = true; #定义一个布尔值
12、console.log(m,typeof (m)) #查看值的类型，查看类型m时候可以不加括号
13、var m = new Number(100); #创建一个新的对象
14、var x = Number('123'); #值类型的转换,这里是将字符串123转换成数字123
15、var s = '字符串'; #定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号
16、var b = true; #定义布尔值
17、var abc; #定义一个未定义类型
18、== #这个是用来判断值是否相等，这个是做值比较
19、=== #判断本质上是否相等，就是做值与类型比较
20、var num = 666 + ''; #数字转换成字符串
21、var res1 = '10' + 5; #js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接
22、var res2 = '10' - 5; #这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法
23、var res = '888' - 0; #字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了
24、var ress = +'888'; #字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串
25、 isNaN（结果） #判断转换的结果是否是非数字类型
26、res = parseInt('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值
27、res = parseFloat('3.1.4abc'); #将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值
28、var arr = [1,2,5,3,4]; #定义数组
29、console.log(arr[2]); #数组的查询 => 索引即可
30、delete arr[4]; #数组的删除
31、delete arr[arr.length - 1]; #删除数组中最后一个,arr.length - 1就是最后一个，以此类推-2就就是删除最后第二个
32、arr[4] = 100; #修改数组中的指定位置值
33、arr.unshift(123); #在数组的头位置增加值
34、arr.shift(); #删除数组头位置的值
35、arr.push(888); #在数组的尾部增加一个值
36、arr.pop(); #将数组的尾部的值删除
37、arr.splice(1,1,999); #splice可以完成除了查的所有功能，包含插入。spilce（从什么索引开始，操作多少位，操作成什么(这个可以用逗号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）
38、newarr = arr.splice(1,2); #slice 切片操作,切片之后数组内的值就没有了，被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中
39、var str =arr.join('-'); #将数组中的值以指定的符号拼接成字符串
40、narr = str.split('-'); #字符串对应有一个逆运算,将字符串以指定的符号拆分成数组，拆分后数组内的值是以字符串形式存在，可以通过索引修改类型
41、narr[2] = narr[2] - 0; #索引数组内指定位置的值改变类型
42、var dic = {name:'liuxx',age:'100'}; #js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用
43、console.log(dic.name); #查找字典中指定的值，对象的调用就是对象加.来调用
44、console.log(dic['age']); #查找字典中指定的值，对象中对象中所有的key都是字符串形式，和42的指令是一样的效果，知识写法不同
45、dic.sex = 'male'; #字典的增加
46、dic.age = 99; #修改字典内的指定key的值
47、delete dic.age; #字典内的值删除
48、函数的定义
function fn1() {
console.log('我是函数fn1');
}
49、 fn1(); #函数的调用
50、#定义函数的另一种方式
var fn2 = function () {
console.log('我是函数fn2');
};
51、匿名函数的定义 （匿名函数只能在定义阶段被调用一次）（第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理）
(function () {
console.log('我是匿名函数')
})();
52、onmouseout \ onmouseover #添加鼠标悬浮事件out是离开，over是悬浮（就是鼠标悬停）
53、
PS：js一旦连接外部脚本，script标签内部的代码就会失效，只能在后面再写一个script标签
PS：js的打印应该在页面检查的console里面
PS：js里直接定义变量可以直接使用，输出的就是underfined
PS：js很随意，console.log(m,typeof (m)) / console.log(m,typeof m);查看值类型时候可以加括号也可以不加;
PS：黑色的表示字符串，蓝色表示数字
PS：js中字符串的拼接优先级高于数字运算的加法
js执行的顺序(是根据HTML的执行顺序)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js初识</title>
<script>
alert('弹出警告1')
</script>
</head>
<body>
js初识，js写在script标签内，script标签可以出现在html的任意位置
<script>
/*alert就是警告的意思*/
alert('弹出警告2')
</script>
</body>
<!--script标签一般书写在body标签的最底部，但写在body标签和html标签之间，会被解析在body的最底部，所有代码书写在该位置也是合理的-->
<script>
/*alert就是警告的意思*/
alert('弹出警告3')
</script>
</html>
PS：脚本要获取页面内容，改脚本一定要放在内容的下方
JS的引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js初识</title>
</head>
<body>
js初识，js写在script标签内，script标签可以出现在html的任意位置
</body>
<!--这里就是从外部引入脚本-->
<script src="js的引入.js">
</script>
</html>
js的基本数据类型（值类型、引用类型、特殊类型）
值类型：
1、number(数字类型) ： js里面没有整型和浮点型，负数小数的区别，只有一个类型就是数字类型
2、string：字符串类型
3：boolean #布尔类型
4、underfined #未定义类型
数据类型实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js语法</title>
</head>
<body>
<h3>11111</h3>
</body>
<script>
// 定义一个数字类型
var n=10;
//打印值和查看值类型
console.log(n,typeof(n));
//创建一个新的对象
var m = new Number(100);
console.log(m,typeof (m));
//console.log(m,typeof m); 查看类型时候可以加括号
//这个是类型的转换，将值的类型转成number
var x = Number('xxx');
console.log(x,typeof x);
// 定义字符串，'' "" 单双引号都可，js中没有 ''' '''三引号
var s = '字符串';
console.log(s,typeof s);
// 布尔类型,js中true和false都是小写
var b = true;
console.log(b,typeof b);
//定义一个未定义类型
var abc;
console.log(abc,typeof abc);
</script>
</html>
引用类型
1、function ：函数
2、obj：一般都去当dic字典来用
js类型转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js语法</title>
</head>
<body>
<h3>11111</h3>
</body>
<script>
//值的比较,==只做值的比较，===做值和类型的比较
console.log('10' == 10);
console.log('10' === 10);
//js中字符串的拼接优先级高于数字运算的加法，所以这里识别成字符串的拼接
var res1 = '10' + 5;
console.log(res1,typeof res1);
//这里有减法，字符串不能做减法，所以字符串10识别成数字做了减法
var res2 = '10' - 5;
console.log(res2,typeof res2);
// 数字转换成字符串
var num = 666 + '';
console.log(num,typeof num);
//字符串转换成数字,-0就是表示值不变，字符串不能做减法，所以自动识别成数字做计算，类型也改变了
var res = '888' - 0;
//字符串转换成数字的另外一种方式，字符串必须是纯数字的字符串，不能是数字加字幕的字符串
var ress = +'888';
console.log(res,typeof res);
//错误的转换方式,这个就会返回一个NaN,NaN就是非数字类型
var resss = +'123abc';
console.log(resss)
//将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个数字就是返回值
res = parseInt('3.1.4abc');
console.log(res)
//将非纯数字的字符串转换成数字类型，这个方法就会从前往后找，找到的第一个小数点后的第一个数字就是返回值
res = parseFloat('3.1.4abc');
console.log(res)
</script>
</html>
PS：js很随意，console.log('10' == 10);，字符串10是等于数字10的，因为js中是自动转换的
特殊类型
1、Null #这个Null开头的n是大写的
2、array
3、Date
4、RegExp
5、Math
js类型的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js类型的使用</title>
</head>
<body>
js类型的使用
</body>
<script>
//数组的操作
//定义数组
var arr = [1,2,5,3,4];
console.log(arr);
//数组排序
arr.sort();
console.log(arr);
//数组的查询 => 索引即可
console.log(arr[2]);
//数组的删除
delete arr[4];
console.log(arr);
//删除数组中最后一个,以此类推-2就就是删除最后第二个
delete arr[arr.length - 1];
console.log(arr);
//修改数组中的指定位置值
arr[4] = 100;
console.log(arr);
//在数组中增加值 增加有头增，中间插入，尾增
//头增
arr.unshift(123);
console.log(arr);
//头删
arr.shift();
console.log(arr);
//后增
arr.push(888);
console.log(arr);
//尾删
arr.pop();
console.log(arr);
//中间增 插入 splice可以完成除了查的所有功能，包含插入
//spilce（从什么索引开始，操作多少位，操作成什么(这个可以用，号添加多个值，如果是空不写值就是删除)）（省略第三个参数就是从第几位开始索引，操作几个位进行删除）
arr.splice(1,1,999);
console.log(arr);
//slice 切片操作,切片之后数组内的值就没有了，被切掉了
//slice (n,m) 从索引位置n开始截取到索引位置m之前
//这里将切片后的值放入一个新的变量中
newarr = arr.splice(1,2);
console.log(newarr);
//将数组中的值以指定的符号拼接成字符串
var str =arr.join('-');
console.log(str);
//字符串对应有一个逆运算,将字符串以指定的符号拆分成数组
//拆分后数组内的值是字符串形式存在，可以用索引修改值或者值的类型
narr = str.split('-');
console.log(narr);
//索引数组内指定位置的值改变类型
narr[2] = narr[2] - 0;
console.log(narr);
//对象的操作
//js没有字典类型，但可以通过对象完全表现字典类型，对象可以当成字典来使用
var dic = {name:'liuxx',age:'100'};
console.log(dic);
//字典的查找
console.log(dic.name);
//对象中所有的key都是字符串形式
console.log(dic['age']);
//字典的增加
dic.sex = 'male';
console.log(dic);
//字典内的值修改
dic.age = 99;
console.log(dic);
//字典内的值删除
delete dic.age;
console.log(dic);
</script>
</html>
js中的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js函数</title>
</head>
<body>
函数与方法
</body>
<script>
//定义函数 function 函数名（形参列表）{代码块}
function fn1() {
console.log('我是函数fn1');
}
//函数的调用 函数名（实参列表）
fn1();
//定义函数的另一种方式
var fn2 = function () {
console.log('我是函数fn2');
};
fn2();
//匿名函数的定义 （匿名函数只能在定义阶段被调用一次）
//第一个()，是将定义的代码作为整体拿到内存地址，后面的()就是调用的意思，这就是匿名函数的定义方式和原理
(function () {
console.log('我是匿名函数')
})();
//函数的返回值 所有的js函数都有返回值，而且只能有一个返回值,如果你返回多个值，则js中的函数只会将最后一个值返回
function fn3() {
//这个就是空返回，为了结束函数而返回
return;
}
//如果没有明确返回值，则返回undefined
var res = fn3();
console.log(res);
//正常返回一个值
function fn4() {
//这里就是返回一个值，并且函数结束了
return 10;
}
var ress = fn4();
console.log(ress);
//js实现返回多个值,将值作为一个数组返回，取到后再根据需求拆分
function fn5() {
//这里就是返回一个值，并且函数结束了
return [10,20];
}
var resss = fn5();
console.log(resss);
//函数的参数
//1.形参与实参个数不需要统一，但一定按位置传参 2.实参少传就会有形参未被赋值，未被赋值的则打印undefined 3.实参多传，多传的实参会被丢弃
function fn6(a,b) {
console.log(a,b)
}
fn6(1);
//默认参数 （js中没有关键字参数）,带值的形参就是默认值参数，位置随意，这种定义方式意义不大，b有默认值对应在c之前意义不大，要给c赋值一定要给b赋值完才能赋值c
function fn7(a,b=10,c,d=20) {
console.log(a,b,c,d)
}
fn7(100,200);
//不定长参数,...args为不定长形参,传入的参数可以是字典，也可以是任何类型,不定长参数有数组存储
function fn8(a,...b) {
console.log(a,b)
}
fn8({name:'bbb'},1,2,3,4,5,6)
</script>
</html>
JS与页面的交互
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js与页面交互</title>
<style>
.box {
font-size: 100px;
}
/*获取big的时候字体更大*/
.big {
font-size: 200px;
}
</style>
</head>
<body>
<div class="box">12345</div>
<div class="box">67890</div>
</body>
<script>
//js完成与页面进行交互，该js一定要写在body标签的最下方
//通过js选择器获取页面标签对象
//永远获取匹配到的第一个标签对象，参数为css语法的选择器
var box = document.querySelector('body .box');
//永远获取匹配到的所有标签对象（不管有多少个结果一定是数组），参数为css语法的选择器
var boxs = document.querySelectorAll('.box');
console.log(box);
console.log(boxs);
console.log(boxs[1]); //通过索引获取数组中的值
//为目标标签对象（们）绑定交互的方式（专用名词叫事件）
//为标签添加点击事件
box.onclick = function () {
console.log('box1被点击了', this);
//在事件的内部完成具体交互的业务逻辑
//获取内容
//this 代表的就是box，和python中的self同理，谁调用传入的就是谁
var msg = this.innerText; //innerText就是普通文本
//这里打印了msg，因为msg获取到的是标签本身内的普通文本，所以打印出来的值就是标签内的所有普通文本
console.log(msg);
//修改内容
this.innerHTML = "<b>呵呵</b>";
//获取样式getComputedStyle(页面对象,伪类) ，伪类没有市用null填充 .后面跟cs语法的样式名称
var fontSize = getComputedStyle(this,null).fontSize;
console.log(fontSize);
//设置样式
this.style.backgroundColor = 'red';
//设置样式位置
this.style.marginLeft = '100px';
//获取类名
var className = this.className;
console.log('类名是',className);
//设置类名
this.className += ' big'; //设置类名的时候空格不可以省略
var classNames = this.className;
console.log('类名是',classNames);
};
//为标签添加鼠标悬浮事件
boxs[1].onmouseover = function () {
console.log('box2被悬浮')
};
</script>
</html>
