【图文解析 】JavaScript（降龙十八掌之终结版本）Bom、Dom！！

1.js的组成

• ECMAScript：核心
• dom：文档对象模型
• bom：浏览器对象模型

2.js的引入方式

<script>
    //js代码
</script>
<script type="text/javascript" src="js/myJs.js><script>

3.js变量和数据类型

var num = 1;
1.	变量名规范类同于java
2.	每句话结束建议写分号
3.	单引号和双引号都可以表示字符串，主要用于区分。

var num = 1;   //number
num = "str";   //string
num = true;    //boolean
var a;         //undefined
a=null;        //null
a=["aa","bb","cc"]; //array
a={"name":"zs","age":12}; //object
//提示框
//alert(typeof a);
//alert(a[0]);
alert(a.name);

类型转换:
var b = 1;
var c = true;  //true 1  false 0
//alert(b+c);  //2
c = null;    //null 0
//alert(b+c);
var d;
//alert(b+d);  //NaN not a number
var e = "abc";
alert(d+e);

4.运算符

• 算术运算符（除法保留小数）

• 数值运算符

• 比较运算符

给定x=5,下面的表格解释了比较运算符

 

alert(a==b);  //==比较内容

alert(a===b); //比较内容比较类型

• 逻辑运算符

• 三元运算符

var max = a > b? a：b

5.流程控制

for(var i in arr){
	console.log(arr[i]);
}

6.函数

1）自定义函数

//无参无返回值函数声明
			function test(){
				console.log("函数执行了");
			}
			//函数调用
			//test();
			function calc(a,b){
				return a + b;
			}
			var sum = calc(1,3);
			//console.log(sum);
			
			function calc2(a,b,c){
				console.log(a+b);
				console.log(c);
			}
			//calc2(1,2);
			
			//calc2(1,2,3,4);
			
			(function(a,b){
				console.log(a+b);
			})(1,2);

2）内置函数

console.log(parseInt(a)+parseInt(b));
			console.log(parseFloat(a)+parseFloat(b));
			var c = "abc";
			var d = 1;
			console.log(isNaN(a));		
			
			d = "2+3*4";
			console.log(eval(d));
			
			//var jsObj = {"name":"zs","age":12};
			//json(js对象字符串形式)
			var json = '{"name":"zs","age":12}';
			//将json转换为js对象
			//var obj = JSON.parse(json);
			//类型转换
			var obj = eval("("+json+")");
			console.log(obj);

parseInt():转换字符串为整型数据
parseFloat():转换字符串为浮点型数据
isNaN():判断是否为非字符串
eval():实现字符串表达式的计算或者类型转换

7.对象

面向对象语言，赋予了进行属性和方法的扩展方式

String对象:字符串
Array对象: 数组
Date对象: 获取时间
  var date = new Date();
			
			var year = date.getYear();
			var year1 = date.getFullYear();  //完整年份
			var mon = date.getMonth();   //月份  0-11
			var dayofweek = date.getDay();  //星期  0-6
			var day = date.getDate();
			var hour = date.getHours();
			var min = date.getMinutes();
			var sec = date.getSeconds();
			
			var str = year1+"-"+(mon+1)+"-"+day+" "+hour+":"+min+":"+sec;
			//console.log(str);
			document.getElementById("div1").innerHTML = str;

8.Bom

控制浏览器行为。

Windows：控制窗口行为（打开，关闭，提示框，窗口信息获取等）

console.log(window.innerHeight);
			console.log(window.innerWidth);
			
			//打开新窗口
			var newWindow =window.open("http://www.baidu.com","baidu","width=200px,height=200px,left=200px,top=200px");
			//关闭窗口
			newWindow.close();
			
			var bool = confirm("确认删除吗?");
			console.log(bool);
			
			var name = prompt("请输入您的姓名","张三");
			console.log(name);
			
			//只执行一次
			var timeoutId = setTimeout(function(){
				console.log("boom");
			},2000);
			//取消timeout
			clearTimeout(timeoutId);
			
			var i = 10;
			var id = setInterval(function(){
				i--;
				console.log(i);
			},1000);
			
			clearInterval(id);

document:

         封装整个html文档的信息。

Location:

    封装当前的url的信息。

9.Dom

HTML DOM 定义了用于 HTML 的一系列标准的对象，以及访问和处理 HTML 文档的标准方法。

• 获取节点

//通过id值获取元素节点
			var oDiv = document.getElementById("div1");		
			//console.log(oDiv);
			var aDiv = document.getElementsByTagName("div");
			//console.log(aDiv[0]);
			//通过class值获取元素
			document.getElementsByClassName("");
			//通过name属性值获取
			document.getElementsByName();

• 获取/修改元素节点文本

//获取文本内容
var val = oDiv.innerHTML;
console.log(val);
//设置内容
oDiv.innerHTML="哈哈";
			
var val2 = oDiv.innerText;
console.log(val2);
oDiv.innerText="aa";

• 获取/修改元素节点属性

节点对象.attrName=值

Class特殊:
  oDiv.className="green";

• 修改元素的样式

节点对象.style.样式=值
oDiv.style.fontSize="20px";

10.事件

• ui事件

    load事件:  页面加载事件

    scroll事件:  文档滚动事件

• 鼠标事件

    单击事件:  click

    双击事件: dblclick

    鼠标移过事件: mouseover

    鼠标移出事件: mouseout

• 键盘事件

    onkeydown：键盘按下的时候触发，就像**手按下按钮，就爆炸了，知道不？爆炸！

    onkeyup：键盘抬起的时候触发

    onkeypress：按下可打印字符

• 焦点事件

    onfocus：获取焦点时触发

    onblur：失去焦点时触发

• 其他事件

    onchange（select)：选择发生改变