JavaScript
基本语法
基本上和Java没什么区别
定义变量——变量类型 变量名 = 变量值；
定义变量时只有一种数据类型var！
var num = 1;
var name = "bill";
var 王者荣耀 = "倔强青铜";
数据类型
js不区分小数和整数，Number
123 //整数
123.1 //浮点数
1.123e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //无穷大
字符串
‘abc’ “abc”
布尔值
逻辑运算
&&、||、！
比较运算符
=
== //等于（类型不一样值一样返回true）
=== //绝对等于（类型一样，值一样，返回true）
NaN === NaN //false，NaN与所有数不相等
(1/3)===(1-2/3) //false
Math.abs(1/3-(1-2/3)<0.000000001)//true
null和undefined
- null 空
- undefined 未定义
数组
可以包含任意数据类型
var arr = [1,2,3,null,true,"hello"];
可以人为修改arr.length，如果增长补undefined，如果剪短则丢失数据
常用方法
-
indexOf()，查找某一元素的下标
-
slice()：截取数组的一部分，返回新数组
-
push()，pop()
-
shift()，unshift()：往头部添加和删除元素
-
sort()
-
reverse()
-
concat()：连接，返回的是一个新数组，不修改原数组
-
join()：打印拼接数组，用指定的字符串连接
var arr = [1,2,3]; arr.join('-'); > "1-2-3"
对象
使用大括号，每个键值对逗号隔开，最后一个不用
var person = {
name:"bill",
age:3,
tags:['js','java','web']
}
使用一个不存在的属性不会报错，返回undefined
-
动态删除对象属性，通过delete删除对象的属性
delete person.name > true -
判断属性值是否存在对象中
xxx in person; 'age' in person; > true
Map、Set
Map类似Python的dict
Set可以去重
var map = new Map([['tom',123],['bill',99]]);
var score = map.get('tom');
console.log(score);//123
var set = new Set(1,1,1,3);
console.log(set)//1,3
遍历
var arr = [3,4,5];
// 一般不用这个，有bug
for(var x in arr){
console.log(x);//0,1,2;返回的是下标
}
for(var x of arr){
console.log(x);//3,4,5;返回的是元素
}
console.log()打印变量
浏览器开发者工具的Console可以输入js代码，并且Source提供js的调试功能
严格检查模式
’user strict’：严格检查模式，预防js随意性出现问题。必须写在js的第一行
局部变量建议使用let定义
i = 1; //不会报错
'user strict';
o = 1; // o in undefined
let o = 1; //ok
函数
定义方式
// 方式1
function abs(X)
{
if(x>0)
return x;
else
return -x;
}
// 方式2
var abs = function(x){
if(x>0)
return x;
else
return -x;
}
结果一样，推荐第一种，第二种产生的是一个匿名函数。
注意，如果函数结束时没有执行return，则函数自动return NaN
注意，调用函数的时候参数可以随意填，不会报错。如果填多了，前i个参数对应的是你的形参，后面的参数也会存着，可以通过arguments查看。
ES6之前的多余参数的处理方式
ES6之后的处理方式
用rest来替代所有多余的参数
var aaa = function(a,b,...rest){
console.log("a="+a);
console.log("b="+b);
console.log("rest="+rest);
}
全局变量
Javascript有一个全局作用window。可以通过window.x调用全局变量x，或者window.alert()调用alert函数。
由于所有的全局变量都会绑定到window上，因此如果多个文件合并，会产生全局变量的冲突。如何解决全局变量的冲突呢？
解决方法：一般在每个人自己的代码内定义一个唯一全局变量,把自己的代码全部放入自己定义的唯一命名空间中，降低全局命名冲突的问题。
var BillApp = {};
BillApp.name = "Bill";
BillApp.age = 13;
BillApp.add = function(a,b){
return a+b;
}
局部作用域
ES6使用let解决局部作用域冲突的问题。建议使用let去定义局部作用域的变量。
for(let i = 0;i<2;i++)
{
//...
}
console.log(i); //wrong Uncaught ReferenceError : i is not defined
for(var i = 0;i<2;i++)
{
//...
}
console.log(i); //2
对象中定义方法
- 方式一
var BillApp = {
birth:2000,
age:function(){
var now = new Date().getFullYear();
return now-this.birth;
}
}
BillApp.age();//20
- 方式二
function getAge()
{
var now = new Date().getFullYear();
return now-this.birth;
}
var BillApp = {
birth:2000,
age:getAge
}
BillApp.age();//20
this代表什么？
this是无法指向的，自动指向当前调用它的对象；
apply方法在js中可以控制this指向
getAge(BillApp,[]); //this指向BillApp，参数为空
特殊对象
日期对象Date
var now = new Date();
now.getFullYear(); //年
now.getFullMonth(); //月 0-11
now.getFullDate(); //日
now.getFullDay(); //星期几
//Hours,Minutes,Seconds
now.getTime(); //时间戳，全世界统一
JSON对象
Javascipt一切皆对象，所有支持的类型都可以用JSON表示。
格式：
- 对象用{}
- 数组用[]
- 所有键值对用key:value
var User = {
name:"Bill",
age:3,
sex:"male"
}
JSON.stringify(User);//{"name":"Bill","age":3,"sex":"male"}
JSON.parse('"name":"Bill","age":3,"sex":"male"}');//转化成了对象
面向对象编程
class关键字在ES6引入的
class Student {
constructor(name)
{
this.name = name;
}
hello(){
alert("I am "+this.name);
}
}
class xiaoStudent extends Student{
constructor(name,grade)
{
super(name);
this.grade = grade;
}
myGrade(){
alert("I'm a xiaoStudent")
}
}
var xiaoming = new Student("xiaoming");
和Python有点类似
操作BOM对象
BOM：浏览器对象模型
window：代表浏览器窗口
navigator：封装了浏览器的信息
navigator.appName
> "Netscape"
navigator.appVersion
> "5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36 Edg/85.0.564.51"
navigator.platform
> "Win32"
大多是时候不使用navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码。
location：代表当前页面的url信息
host:"www.baidu.com"
href:"https://www.baidu.com/"
protocol:"https:"
reload:f reload()//重新加载，刷新网页
location.assign(url)//设置新的地址并跳转
操作DOM对象
DOM：文档对象模型。浏览器网页就是一个DOM树形结构
- 更新：更新DOM节点
- 遍历：得到DOM节点
- 删除：删除DOM节点
- 添加：添加一个新的DOM节点
要操作一个DOM节点，必须要先获得一个DOM节点。
获得DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "father">
<h1>
标题一
</h1>
<p id = "p1">haha</p>
<p class = "2">heiheii </p>
</div>
<script>
var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName('2');
var father = document.getElementById("father");
var childrens = father.children;
</script>
</body>
</html>
更新DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "father">
<h1>
标题一
</h1>
<p id = "p1">haha</p>
<p class = "2">heiheii </p>
</div>
<script>
var p1 = document.getElementById("p1");
p1.innerText = "i change the innetText";
p1.style.color = 'red';
p1.style.fontSize = '200px';
</script>
</body>
</html>
可以操作节点的文本和css等，注意属性值要用字符串
删除DOM节点
步骤：
- 先获取父节点
- 通过父节点删除对应节点
<script>
var self = document.getElementById("p1");
var father = self.parentElement
father.removeChild(self);
// 删除是一个动态过程
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);
</script>
注意：删除节点时children在变化，连续删除时要注意下标
添加DOM节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id = "list">
<p id = "se">javase</p>
<p id = "ee">javaee</p>
<p id = "me">javame</p>
</div>
<script>
var newP = document.createElement('p');//创建一个p标签
// 通过该方法设置属性值
newP.setAttribute("id","newP");
newP.innerText = "newP";
var list = document.getElementById("list");
list.append(newP);
</script>
</body>
</html>
结果：
操作表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span>用户名：</span> <input type="text" id="user-name">
<script>
var userName = document.getElementById("user-name");
console.log(userName.value);
userName.value = "hahaha";
</script>
</body>
</html>
jQuery
jQuery库里存着大量的Javascript函数
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
