HTML基础之JS
JS一种脚本语言，它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<script>
alert("My First JavaScript");
</script>
引入JavaScript代码类似于Python的import
<script src="复习.js" type="text/javascript"></script>
head中引入JS与body中引入JS的区别
写在head里面：代码从上到下依次执行，加载css,然后加载js，因为body还没开始加载，所以展现给用户的是一个白板页面，影响页面得加载速度
通常放在htmlbody里面的最下方，先加载css再加载html页面，最后加载js。注：必须是写在body里面的。
JS定义字符串
定义字符串
var name = '你开心就好！'
var str = '双鱼座'
字符串的拼接
var name_str = name+str
字符串操作
name.charAt(0) 根据角标获取字符串中的某一个字符 char字符
name.substring(0,2)根据角标获取字符串子序列，顾头不顾尾
name.length获取字符串长度
name.concat('毛毛')拼接字符串
name.indexOf('开')获取子序列的位置
name.slice(0,2)//切片，顾头不顾尾，与substring一样
var str = 'eeeEE'
str.toLowerCase() 变更为小写
str.toUpperCase() 变更为大写
name.split('心') 以“心”分割
数字类型
var num = 88.88
var strNum = '88.88'
parseInt(strNum)//返回一个整数
parseFloat(strNum)//返回一个浮点数
布尔类型（true 或 false）
var t = true; var f = false; 全部小写
数组类型（与python列表类似）
第一种创建方式：
var list1 = new Array()
list1[0] = 1
list1[2] = 2
第二种创建方式：
var list2 = new Array('我','你')
第三种创建方式：
var list3 = ['你','我','她']
list3.length 数组的长度
list3.push('aaa') 尾部追加参数
list3.shift() 头部获取一个元素 并删除该元素
list3.pop() 尾部获取一个元素 并删除该元素
list3.unshift('dsx') 头部插入一个元素
list3.splice(start,deleteCount,value) 插入、删除或替换数组的元素
list3.splice(1,0,'aa') 指定位置插入元素
list3.splice(1,1,'aa') 指定位置替换元素
list3.splice(1,1） 指定位置删除元素
list3.slice(0,2) 切片，顾头不顾尾
list3.reverse 反转
list.join('-') 将数组根据分隔符拼接成字符串
list.concat([1,2]) 数组与数组拼接
list.sort() 排序
对象类型（等同于python的字典）
var dict = {name:'dsx',age:18,sex:'男' };
var age = dict['age'] 赋值
var name = dict.name 赋值
delete dict['name'] 删除
delete dict.age 删除
JS条件判断语句
if(1==2){
console.log(111111111)
}else if(2==2){
console.log(22222222)
}else{
console.log('最后了！')
}
==============================================================
if('1'===1){ //三个等号校验数据类型，两个等号则不判断数据类型
console.log(1111111)
}else{
console.log(222222)
}
==============================================================
switch (2){
case 1:
console.log(11111);
break;
case 2:
console.log(22222);
break;
default:
console.log(33333333)
}
JS循环语句
//循环字符串
var name = 'dsx nhy';
for(var a in name){
console.log(name[a]);
}
//循环数组
var car = ['宝马', '奔驰', '尼桑'];
for (var i in car){
console.log(car[i])
}
//循环字典，不支持字典k,v一起循环
var dict = {'宝马': 'BMW', '奔驰': 'BC'};
for(var d in dict){
console.log(dict[d])
}
//只能循环列表和字符串，不支持字典循环
for(var i=0;i<=car.length;i++){
console.log(i)
}
//死循环，与python相同
while(1==1){
console.log(11111111)
}
JS中函数的使用
1.普通函数
function f(name,age){
console.log(name);
console.log(age)
}
f('dsx',18)
栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><input type="button" value="点我" onclick="demo()"> </div>
<div><input type="text" name="username" > </div>
<script>
function demo() {
alter('点我时弹出的！');
}
</script>
</body>
</html>
2.匿名函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div><input id="i2" type="button" value="一键输入用户名" > </div>
<div><input type="text" name="username" > </div>
<script>
//匿名绑定函数
var demo = document.getElementById('i1')
demo.onclick = function(){
demo.parentElement.nextElementSibling.firstElementChild.value='JS_test';
};
</script>
</body>
</html>
3.自执行函数
(function () {
console.log('自执行函数！')
})()
面向对象
function f(name) {
this.name = name;//this代指本类
this.say = function () {
console.log('say--->'+this.name);
}
}
var obj = new f('dsx');
obj.say();
console.log(obj.name);
