JS基础（一）

1、JS脚本放置位置

页面内的JS脚本中，各种公共函数和变量应放在head标签之间，而将页面加载期间执行的代码、dom对象初始化以及与dom相关的全局引用赋值操作放在body标签之间，如果没有特殊要求，不妨放在body标签之前。

2、js命名规范和代码注释

JS区分大小写，包括数字、字母、下划线（_）、美元符（$），小写字符命名变量，保留字可根据系统默认大小写来输入；类和构造函数使用大写首字符

单行注释，//注释内容；多行注释，/*注释内容*/

3、变量作用域

函数外var全局变量，函数内var局部变量；不适用var声明的都是局部变量

4、with语句（一般不建议使用）

<script type="text/javascript" language="javascript">
with(document.getElementById("box").style){borderColor="red"; borderWidth="1px";borderStyle="solid";width="400px";height="200px";
}
</script>

5、数据类型和转化

基本数据类型：数值（都是浮点型）、字符串、布尔型
引用数据类型：对象、数组、函数
特殊类型：Null类型只有一个值：null；未定义的值：undefined
数值 “”=字符；布尔 “”=字符；
字符*1=数值；布尔*1=数值；parseInt/parseFloat(字符)=数值；
!!数值=布尔；!!字符=布尔；

6、函数定义

使用function语句声明：命名函数，function f() { }；匿名函数，var f=function() { }
使用Function对象构造：var say = function(name, say){document.write('<h1>' name ' ： ' say '</h1>'); }

7、函数分类（函数可作参数、表达式、返回值）

闭包函数：函数里面包含另一个函数
高阶函数：函数作为参数
函数柯里化：函数作为返回值

8、对象和数组

对象是无序的、已经命名的数据集合，var point={z:{a:1,b:2};x:2.3,y:-1.2}; var i=point["z"]["a"];var j=point.z.b;
数组是有序的数据集合，与对象可相互转化，但是数组拥有大量方法，适合完成一些复杂的运算，var a=new Array(1,2,3,"4","5");var a=[1,2,3,"4","5"];

9、数组常用方法

length(属性)	var a = [1, 2, 3, 4, 5]; a.length = 4; document.write(a);
push/pop	var a = []; //定义一个空数组 a.push(1,2,3); //得到数组a[1,2,3] a.push(4,5); //得到数组a[1,2,3,4,5] a.pop();//得到数组a[1,2,3,4]
unshift/shift	var a = []; //定义一个空数组 a.unshift(1,2,3); //得到数组a[1,2,3] a.unshift(4,5); //得到数组a[4,5,1,2,3] a.shift(); //得到数组a[5,1,2,3]
splice	var a = [1,2,3,4,5,6]; var b = a.splice(2,2); document.write(a "<br />");//输出[1,2,5,6] document.write(b);//输出[3,4]
splice	var a = [1,2,3,4,5,6]; var b = a.splice(2,2,7,8,9); document.write(a "<br />");//输出[1,2,7,8,9,5,6] document.write(b);//输出[3,4]
join	var a = [1,2,3,4,5];a = a.join("-");document.write("a类型 = " typeof(a) "<br />");//a类型=string document.write("a的值 = " a);//a的值=1-2-3-4-5
split	var a = [1,2,3,4,5];a = a.join("-");var s = a.split("-");document.write("s类型 = " typeof(s) "<br />");//a类型=object document.write("s的值 = " s);//a的值=1,2,3,4,5
reverse	var a = [1,2,3,4,5];var a = a.reverse();document.write(a);//输出[5,4,3,2,1]
sort	var a = [3,2,5,1,4]; var f = function(x,y){ return y-x; }; var b = a.sort(f); document.write(b);//输出[5,4,3,2,1]
concat	var a = [1,2,3,4,5];var b = a.concat([4,5],[1,[2,3]]);document.write(b);//输出[1,2,3,4,5,4,5,1,2,3]
slice	var a = [1,2,3,4,5,6,7,8,9];var b = a.slice(2,5);document.write(b);//输出[3,4,5]

10、检测数据类型

值（value）	typeof value(表达式返回值)	value.constructor(构造函数的属性值)
var value=1	"number"	Number
var value="a"	string	String
var value="true"	boolean	Boolean
var value={}	"object"	Object
var value=new Object()	"object"	Object
var value=[]	"object"	Array
var value=new Array()	"object"	Array
var value=function(){}	"function"	Function
function className(){}	"object"	className

function typeOf(o){var _toString = Object.prototype.toString; 	// 获取对象的toString()方法引用// 列举基本数据类型和内置对象类型，可以进一步补充该数组的检测数据类型范围var _type ={"undefined" : "undefined","number" : "number","boolean" : "boolean","string" : "string","[object Function]" : "function","[object RegExp]" : "regexp","[object Array]" : "array","[object Date]" : "date","[object Error]" : "error"}return _type[typeof o] || _type[_toString.call(o)] || (o ? "object" : "null"); 
}var a = Math.abs;
alert(typeOf(a));	//"function"

11、数值计算与类型转换（当对象与数值进行加号运算时，则会尝试将对象转化为数值，然后参与求和运算。如果转换不成功，则执行字符串连接操作）

值（value）	字符串操作环境	数字运算环境	逻辑运算环境	对象运算环境
undefined	"undefined"	NaN	false	Error
null	"null"	0	false	Error
非空字符串	不转换	字符串对应的数字值或NaN	true	String
空字符串	不转换	0	false	String
0	"0"	不转换	false	Number
NaN	"NaN"	不转换	false	Number
Infinity	"Infinity"	不转换	true	Number
Number.POSITION_INFINITY	"infinity"	不转换	true	Number
Number.NEGATIVE_INFINITY	"infinity"	不转换	true	Number
Number.MAX_VALUE	"1.7976931348623157e 308"	不转换	true	Number
Number.MIN_VALUE	"5e-324"	不转换	true	Number
其它所有数字	"数字的字符串"	不转换	true	Number
true	"true"	1	不转换	Boolean
false	"false"	0	不转换	Boolean
对象	toString()	valueOf()或toString()或NaN	true	不转换

12、字符串替换（正则表达式）

<script>
var s="javascript";
var b=s.replace(/(java)(script)/,"$2-$1")//输出script-java
alert(b);var b=s.replace(/java/,"$&");//输出javascript
alert(b);var b=s.replace(/java/,"$`");//左侧文本 输出script
alert(b);
var b=s.replace(/script/,"$`");//输出javajava
alert(b);var b=s.replace(/java/,"$'");//右侧文本 输出scriptsctipt
alert(b);var b=s.replace(/java/,"$$");//输出$script
alert(b);
</script>

13、增强数组排序

<script>
/*function f(a,b){var a=a%2;var b=b%2;if(a==0) return 1;if(b==0) return -1;
}
var a=[3,1,2,4,5,7,6,8,0,9];
a.sort(f);
alert(a);function f(a,b){var a=a%2;var b=b%2;if(a==0) return -1;if(b==0) return 1;
}
var a=[3,1,2,4,5,,7,6,8,0,9];
a.sort(f);
alert(a);var a=['aB','Ab','Ba','bA'];
a.sort();
alert(a);*/
function f(a,b){var a=a.toLowerCase;var b=b.toLowerCase;if(a>b) return 1;elsereturn -1;
}
var a=['aB','Ab','Ba','bA'];
a.sort(f);
alert(a);function f(a,b){if(a>Math.floor(a)) return 1;if(b>Math.floor(b)) return -1;
}
var a=[3.555,1.234,3,2.111,5,7,3]
a.sort(f);
alert(a);
</script>

14、浏览器对象模型（BOM）

包含对象：

用户对象：在JS脚本中定义的对象
内置对象：由系统预定义并内置到JS内的对象，如Object、Array、Function、Date、Math、String、Number、RegExp等
宿主对象：捆绑到浏览器内的API组件定义的对象。这些对象与JS语言本身没有任何直接关系，但在JS脚本中可以访问和操作它们，如Window、Document、Navigator、Screen、Location、History、Form等

BOM作用：

弹出新的浏览器窗口，移动、关闭浏览器窗口以及调整窗口大小（窗口对象）
提供浏览器详细信息（导航对象）
提供装载到浏览器中页面的详细信息（定位对象）
提供用户屏幕分辨率详细信息（屏幕对象）
对Cookie的支持

15、BOM操作浏览器常用方法

打开窗口：window.open(url,name,features,replace)

var url="http://www.baidu.com/";
var features="height=400,width=800,top=10,left=10,toolbar=no,menubar=no,scrollbar=no,resizable=no,location=no,status=no";
document.write('<a href="http://www.sina.com.cn/ target="newW">切换到新浪</a>');
var me=window.open(url,'newW',features);
setTimeout(function(){me.close();},60000);

三种人机交互窗口：alert()、confirm()、prompt()

var user=prompt("请输入你的用户名：");
if(!!user){var ok=confirm("你输入的用户名为：\n" user "\n请确认。");if(ok){alert("欢迎你：\n" user);}else{user=prompt("请重新输入你的用户名：");alert("欢饮你：\n" user);}
}
else{user=prompt("请输入你的用户名：");
}

获取URL查询字符串信息

 1 var queryString=function(){
 2     var q=location.search.substring(1);
 3     var a=q.split('&');
 4     var o={};
 5     for(var i=0;i<a.length;i  ){
 6         var n=a[i].indexOf('=');
 7         if(n==-1) continue;
 8         var v1=a[i].substring(0,n);
 9         var v2=a[i].substring(n 1);
10         o[v1]=unescape(v2);
11     }
12     return o;
13 }
14 var f1=queryString();
15 for(var i in f1){
16     document.write(i "=" f1[i] '<br/>');
17 }
18 </script>
19 </head>
20 <body>
21 <a href="?id=123&name=location">获取查询字符串</a>

设计窗口居中和弹跳窗口

availHeight和availWidth显示web浏览器屏幕可用高度和宽度
availLeft和availTop屏幕最左侧x坐标和y坐标
moveTo()、moveBy()、resizeTo()、resizeBy()，by相对，移动指定个长度单位；to绝对，移动到指定坐标

 1 <script>
 2 function openW(url){
 3     var w=screen.availWidth/2;
 4     var h=screen.availHeight/2;
 5     var t=(screen.availHeight-h)/2;
 6     var l=(screen.availWidth-w)/2;
 7     var p="top=" t ",left=" l ",width=" w ",height=" h; 
 8     var win=window.open(url,"url",p);
 9     win.focus();
10 }
11 openW("http://www.baidu.com/");
12 </script>
13 
14 <script type="text/javascript" language="javascript">
15 window.onload=function(){
16     timer=window.setInterval("jump()",1000);
17 }
18 function jump(){
19     window.resizeTo(200,200);
20     x=Math.ceil(Math.random()*1024);
21     y=Math.ceil(Math.random()*760);
22     window.moveTo(x,y);
23 }
24 </script>

16、DOM是Document Object Modal(文档对象模型)的简写，它表示访问和操作文档（如HTML、XML文档）的API（应用程序接口）

遍历文档

<script type="text/javascript" language="javascript">
function count(n){var num=0;if(n.nodeType==1) num  ;var son=n.childNodes;for(var i=0;i<son.length;i  ) num =count(son[i]);return num;
}
window.onload=function(){alert("当前文档包含" count(document) "个元素");
}
</script>

动态增加文档内容

window.onload=function(){var ul=document.getElementsByTagName("ul")[0];var lis=ul.getElementsByTagName("li");lis[0].onclick=function(){this.innerText="谢谢";}lis[1].onclick=function(){this.innerHTML="<h2>我是一名初学者</h2>";}lis[2].onclick=function(){this.outerText="我是学生";}lis[3].onclick=function(){this.outerHTML="<h2>当然喜欢</h2>";}
}

17、操作节点和属性

<script>
//获取节点
var p=document.getElementsByTagName("p")[0];
alert(p.innerHTML);
p.innerText=p.innerText;
//获取节点属性
var box=document.getElementById("box");var info="nodeName:" box.nodeName;
info ="<br>nodeType:" box.nodeType;
info ="<br>parentNode:" box.parentNode.nodeName;
info ="<br>childNodes:" box.childNodes[0].nodeName;
document.write(info);
//设置节点属性
var p=document.getElementsByTagName("p");
alert(p[4].innerHTML);
for(var i=0;i<p.length;i  ){p[i].setAttribute("class","blue");
}
//克隆节点、true为复制节点包含所有内容
window.onload=function(){var p=document.createElement("p");var h1=document.createElement("h1");var txt=document.createTextNode("hello world");p.appendChild(txt);h1.appendChild(p);document.body.appendChild(h1);var new_h1=h1.cloneNode(true);document.body.appendChild(new_h1);
}
//insertbefore 把节点放到父节点指定子节点前面
window.onload=function(){var ok=document.getElementById("ok");ok.onclick=function(){var red=document.getElementById("red");var blue=document.getElementById("blue");var h1=document.getElementsByTagName("h1")[0];red.insertbefore(blue,h1);}
}
//删除子节点
window.onload=function(){var ok=document.getElementById("delete");ok.onclick=function(){var blue=document.getElementById("blue");(blue.parentNode).removeChild(blue);}   
}
//替换节点 用h2替换h1
window.onload=function(){var ok=document.getElementById("ok");ok.onclick=function(){var red=document.getElementById("red");var h1=document.getElementsByTagName("h1")[0];var blue=document.getElementById("blue");var h2=document.createElement("h2")red.replaceChild(h2,h1);}   
}
window.onload=function(){var ok=document.getElementById("ok");ok.onclick=function(){var red=document.getElementById("red");var blue=document.getElementById("blue");var h1=document.getElementsByTagName("h1")[0];var del_h1=red.replaceChild(blue,h1);  red.parentNode.insertBefore(del_h1,red);   }
}
//获取和设置属性、属性值
/*window.onload=function(){var red=document.getElementById("red");alert(red.getAttribute("id"));var blue=document.getElementById("blue");alert(blue.id);
}
window.onload=function(){var red=document.getElementById("red");var blue=document.getElementById("blue");red.setAttribute("title","这是红色盒子");blue.setAttribute("title","这是蓝色盒子");
}*/
window.onload=function(){var hello=document.createTextNode("Hello World！");var h1=document.createElement("h1");//var h2=document.createElement("h2");h1.setAttribute("title","您好！欢饮光临！");//h2.title="这是h2的title";
    h1.appendChild(hello);//h2.appendChild(hello);
    document.body.appendChild(h1);
}
//增加和删除属性值
window.onload=function(){
var table=document.getElementsByTagName("table")[0];
var del=document.getElementById("del");
var reset=document.getElementById("reset");
del.onclick=function(){table.removeAttribute("border");
}
reset.onclick=function(){table.setAttribute("border","2");
}
}
</script>

18、JS事件模型和事件流

基本事件模型：通过简单的事件属性为指定标签绑定事件处理函数，属性较弱，一般不建议使用
标准事件模型：W3C制定
IE事件模型

多个对象同时相应一个事件的时候，哪个对象优先相应，哪个对象后续响应？决定这种响应顺序的机制称为事件流

冒泡型事件流（IE支持：div->body->document）：由特殊到一般，从下往上。
捕获型事件流：（document->body->div）从一般到特殊，从上往下。
标准事件流：W3C定义的标准事件流同时支持以上两种事件流，但是捕获型事件流先发生，即从document开始再返回document结束。

19、基本事件模型的两种绑定方式

//静态绑定
<button  id="btn" onclick="alert('你单击的一次！');">按钮</button><!--单引号里只能双引号 双引号里只能单引号-->
//动态绑定
<script>var button=document.getElementById("btn");btn.onclick=function(){alert("你单击的一次！")}
</script>

20、标准事件模型和IE事件模型的注册、注销

//标砖事件模型
<body>
<h2>标准事件模型的注册和注销</h2>
<input id="a" type="button" value="点我"/>
<input id="b" type="button" value="删除事件"/>
<script>var a=document.getElementById("a");var b=document.getElementById("b");function ok(){alert("您好！欢饮光临！");}function delete_event(){a.removeEventListener("click",ok,false);}a.addEventListener("click",ok,false);b.addEventListener("click",delete_event,false);
</script>
</body>
//IE事件模型
<body>
<p id="p1">IE事件模型的注册和注销</p>
<script>
/*var p1=document.getElementById("p1");
p1.attachEvent("onmouseover",function(){p1.style.background='blue';
})
p1.attachEvent("onmouseout",function(){p1.style.background='red';
})*/
var p1=document.getElementById("p1");
var f1=function(){p1.style.background='blue';
};
var f2=function(){p1.style.background='red';p1.detachEvent("onmouseover",f1);p1.detachEvent("onmouseout",f2);
};
p1.attachEvent("onmouseover",f1);
p1.attachEvent("onmouseout",f2);</script>
</body>
//兼容IE和标准
<body>
<p id="p1">IE和标准事件模型都兼容</p>
<script>
var p1=document.getElementById("p1");
var f1=function(){p1.style.background='blue';
};
var f2=function(){p1.style.background='red';if(p1.detachEvent){p1.detachEvent("onmouseover",f1);p1.detachEvent("onmouseout",f2);
}else{p1.removeEventListener("mouseover",f1);p1.removeEventListener("mouseover",f2);}
};
if(p1.attachEvent){
p1.attachEvent("onmouseover",f1);
p1.attachEvent("onmouseout",f2);
}
else{p1.addEventListener("mouseover",f1);p1.addEventListener("mouseout",f2);
}
</script>
</body>