JS基础
JS与DOM的关系
浏览器拿到DOM这棵树，将其渲染成html，加上各种漂亮的css，呈现给我们。
浏览器内部有一个js的解释器执行，我们在html里写一个js代码，js代码被引擎所执行，执行的结果，就是对DOM的操作，而对DOM的操作结果，就是我们常看到的特效，比如漂浮，变色。
javascript是操作dom，处理完dom，浏览器接着渲染，这样有了页面的变化。
DOM对对象——把body,div,p等节点树看成一个对象。
JS如何引入
1.页面内script代码
<script>
code......
</script>2.引入外部js文件
<script src="./in.js"></script>script标签在页面内的任意处都可以写，多段script代码的执行顺序是按引入顺序，逐段执行。
变量声明
JS的变量名由_，数字，字母，$组成，但是数字不能开头。用var 变量名来声明变量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var A=3;
var a=4;
console.log(A,a);
var $="hello world";
console.log($);
</script>
</head>
<body>
</body>
</html>变量名区分大小写，A和a不是一个变量。不用var声明变量会污染全局变量。
变量类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//数值类型
var a=3;
var b=1.3;
//字符串类型
var c="hello";
var d='world';
//布尔型
var e=true;
//对象类型未定义为null
var f=null;
//原生类型未定义为undefined
var g=undefined;
//对象类型
var h={name:"mike",'age':23};
//数组，也是对象类型
var arr=[2,'hello',true,h];
//undefined
var m;
console.log(typeof b+":"+b)//number:1.3
console.log(typeof e+":"+e);//boolean:true
console.log(typeof f+":"+f);//object:null
console.log(typeof g+":"+g);//undefined:undefined
console.log(typeof h+":"+h);//object:[object Object]
console.log(typeof arr+":"+arr);//object:2,hello,true,[object Object]
console.log(typeof m+":"+m);//undefined:undefined
console.log(h)//{name: "mike", age: 23}
console.log(h.name);//mike
console.log(h['name']);//mike
console.log(arr[3]);//{name: "mike", age: 23}
</script>
</head>
<body>
</body>
</html>运行结果：
var的作用
var的本质:
var a=3：声明一个变量a并给它赋值3;
a=3：并没有声明一个新的变量，只是往它的外层寻找变量名为a的变量，并给它赋值3。（假设外层都没有声明a，那么会找到window上的变量a）
接下来我们看几个例子：
1.t2()中的str没有用var声明，找到了它的外层t1()中的str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
var str="china";
function t2() {
//此处没有用var声明一个新的str变量，而是往它的外层寻找是否有变量名为str的变量，给它赋值。
// 这里找到了t1()中的str，所以这两个str引用的是同一个变量
str="japan";
console.log("t2():"+str)
}
console.log("t1():"+str)//执行到这里的时候，t2()还没有被执行到
t2()
console.log("t1():"+str);//执行到这里的时候，t2()已经执行过
}
t1();
console.log("全局变量:"+str);//由于t2()修改的str是t1()中的str，所以全局中的str没有受到影响
</script>
</head>
<body>
</body>
</html>运行结果：
2.将t1()中的 var str="china"注释掉，那么t2()就找到了最外层的全局变量str
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
//var str="china";
function t2() {
//此处没有用var声明一个新的str变量，而是往它的外层寻找是否有变量名为str的变量，给它赋值。
// 这里找到了全局变量中的str，所以这两个str引用的是同一个变量
str="japan";
console.log("t2():"+str)
}
console.log("全局变量："+str)//f2()还没有执行到
t2()
}
t1();
console.log("全局变量:"+str);//t2()修改了全局变量中的str
</script>
</head>
<body>
</body>
</html>运行结果：
3.把第一个例子t2()中的str="japan"用var来声明，那么它就不会去找外层的str，而是声明了一个新的变量，所以t1()中的str和全局变量str都不会受到影响。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="ufo";
function t1() {
var str="china";
function t2() {
//此处用var声明一个新的str变量，并给它赋值。
// 所以这3个str都是不同的
var str="japan";
console.log("t2():"+str)
}
console.log("t1():"+str)//执行到这里的时候，t2()还没有被执行到
t2()
console.log("t1():"+str);//执行到这里的时候，t2()已经执行过
}
t1();
console.log("全局变量:"+str);//t2()并没有修改任何其他地方的str
</script>
</head>
<body>
</body>
</html>运行结果：
window上定义的变量和全局变量的区别：
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法，如：
var str="china" 可以用 window.str来访问结果也是"china"。那么两者定义的方式有什么区别呢？
window上的变量都是存在的，可以理解为都声明过，只是没有定义，如果访问它是undefined；但假如去访问一个没有声明过的变量，会报错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var str="china";
console.log(window.str)//打印出china
function t1() {
var str1="hello";
console.log(window.str1)//由于这里的str1不是全局变量，所以不会成为window的属性
}
t1()
console.log(window.str2);//undefined
console.log(str2);//会报错
</script>
</head>
<body>
</body>
</html>
运行结果：
运算符
1."+"
一旦碰到非法数字，后面的一律理解为字符串的拼接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(2+3);
console.log("hello"+" "+"world");
console.log(2+3+4+"hello "+"world"+5+6);
</script>
</head>
<body>
</body>
</html>运行结果：
2."&&"
返回最早代表的false的那个值，如果全是true，那么返回最后一个值。
true:数值（除了0），字符串（包括" "，不包括""），true
false:0，""，null
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a=true;
var b="hello";
var c=6;
var d=false;
var e=null;
console.log(a && e && d && c);
console.log(a && b && c);
</script>
</head>
<body>
</body>
</html>运行结果：
3."||"
返回最早代表true的那个值，如果全都是false，则返回最后一个值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var a=true;
var b="hello";
var c=6;
var d=false;
var e=null;
var f=0;
var g="";
console.log(d || f||a||b);
console.log(d || f ||g|| e);
</script>
</head>
<body>
</body>
</html>运行结果：
循环结构
字符串，数组有length属性，可以用for循环遍历。
对象类型用for(k in person)的结构遍历，k遍历person的属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//字符串
var string="hello world";
for(var i=0;i<string.length;i++){
console.log(string[i]);
}
//数组
var arr=["hello",4,"world"];
for(var i=0;i<arr.length;i++){
console.log(arr[i])
}
//对象
var person={name:"mike",age:10}
for(var i in person){
console.log(i+":"+person[i])
}
</script>
</head>
<body>
</body>
</html>运行结果：
注意：对象中的属性可以用引号也可以不用引号，但是属性值如果是字符串的话一定要用引号。想要输出对象的属性值有“.”和"[]"两种方法，例如上面的代码"person.name"，"person['name']"都可以打印出"mike"。中括号里面的name加了引号，表示要打印的是属性名为"name"的属性值；如果不加引号，表示要打印的是属性名为变量name代表的字符串的属性值。所以上面循环遍历只能使用person[k]，而不能使用person.k或者person["k"]。
JS对象
内置对象
所有事物都是对象。JavaScript提供多个内置对象，拥有属性和方法。如布尔型、数字型、字符串、日期、数组、正则表达式、甚至函数都可以看成是对象。对象的属性和方法可参考JavaScript 对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var string="hello world";
console.log(string.length);
console.log(string.substr(2,3));
console.log(string.substring(2,3));
console.log(string.indexOf("llo"));//返回下标，没找到返回-1
var arr=["春","夏","秋","冬"];
console.log(arr.join("_"));
console.log(string.split(" "))
var date=new Date();
console.log(date.getFullYear());
console.log(Math.floor(3.7));//返回不大于3.7的最大整数
console.log(Math.random());//返回[0,-1)
console.log(5+Math.random()*10);//返回[5,15)
</script>
</head>
<body>
</body>
</html>运行结果：
window对象
window对象是浏览器宿主对象，和js语言无关。window对象的方法可参考JavaScript Window - 浏览器对象模型
1.window.alert("hello world");
2.window.confirm("你确定要删除文件么？")
3.window.prompt("请输入你的用户名","hello world")
4.window.close()//直接关闭该标签页
5.window.open("http://www.baidu.com")//新开一个百度的标签页
6.window.print();
window的子对象
1.navigator——浏览器信息对象
console.log(window.navigator)
2.location——地址栏对象
console.log(window.location)
window.location.href="http:/www.baidu.com";//改变href属性可以让网页跳转到百度的页面
3.history——历史对象
console.log(window.history)
其中，有forward(),back(),go()等方法。
4.screen——屏幕对象
console.log(window.screen)
5.document——HTML文档对象
是html代码形成的对象，操作此对象，可动态的改变页面的内容。