JavaScript高级程序设计零碎知识点
1.<script>标签
包含在<script>元素内部的JS代码会被从上到下依次解释，浏览器在对内部的所有代码求值完毕之前，页面中的其余内容都不会被浏览器加载或显示。
2.<script>标签的位置
现代Web应用程序一般都把JavaScript的引用放到<body>元素中页面内容的后面,加快页面打开的速度。因为如果把<script>元素按照传统放到<head>标签中，意味着必须等到全部JavaScript代码都被下载解析和执行完成之后，才能开始呈现页面内容。对于那些需要很多JavaScript代码的页面，这无疑会导致浏览器在呈现页面时出现明显的延迟。
<head></head>
<body>
<!--这里放内容-->
<script type="text/javascript" src="example.js"></script>
</body>
3.<script>跨域可以跨域访问
<script src="http://www.somewhre.com/test.js"></script>
--src属性可以包含来自外部域的JavaScript文件，既跨域访问数据。这也是JSONP （一种非官方的跨域访问方法）的实现原理，动态添加<script>标签。
--多个页面都是用同一个外部文件时，这个文件只需要下载一次，既可缓存
4.兼容XHTML浏览器（保证JavaScript代码在XHTML中能够正确执行）
<script type="text/javascript">
//<![CDATA[
function test(a,b) {
}
//]]>
</script>
5.数据类型：5种基本类型（Underfined、NULL、Boolean、Number、String），1中复杂数据类型(Object)
1)Underfined：未声明或未初始化的值的类型 例如：var message;alert(message==underfined);//true
2)Null:空对象指针，如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值
3)Number:
1.isNaN(任意参数)：判断给定参数是否“不是数值” (或是否能够转换成数值)
isNaN(10);//返回false
isNaN("10");//返回false，
isNaN("blue"); //返回true，“blue”不能被转换为整数
isNaN(true);//返回false,true可以被转换成数值1
2.数值转换
Number();将任意类型转换成数字型 Number("001");//输出1;Number("");//输出0Number("feng");//输出NaN;
一元加号、减号操作符和这个Number()功能相同
parseInt():把字符串转换成整形，从第一个非空格字符开始，如果是数字字符则会接着解析后面的字符知道遇到一个非数字字符
parseInt("123abc");//输出123
parseInt(123.4);//输出123
parseInt("")||parseInt("abc");//输出NaN
parseFloat()把字符串转换成浮点型,（同上，就是多一个小数点）
4)String:按照Java的String来学习就可以了
1)转义字符被当做一个字符长度的字符来解析（注意，字符串的长度为字面上的+1）
2)不可变
3)var num = 10;num.toString();//num.toString(2);//按照二进制进行输出1010；
4)var result = 5+"5" //输出55
var result="result:"+5+10;//输出：result:510
var result="result:"+(5+10);//输出result:15
6.操作符和语句
1.一元减号操作符
var result=5-true;//输出4,自动把true转换成了1（字符串与数字进行比较，会首先尝试把字符串转换成为数字）
2.全等和不全等操作符(===,!==)
如果两个操作数未经转换就想等的情况下返回true。例如 var result = ''55"===55;//输出false (如果==，则输出true)
3.switch语句
可以再switch(expression)中使用任何类型的expression类型的数据，比较值是使用的是===，不会发生类型转换
4.递增递减操作符
递增、递减操作符应用于包含有有效数字的字符串、true/false时，现将其转换为数字，在进行递增、递减操作
7.函数初步
1)函数会执行到return之后立即退出，return可以不带返回值，如return;一般用于需要停止函数执行而又不需要返回值的情况下
2)ECMAScript函数并不关心传递了多少个参数，即使定义的函数只能接受两个参数，但是你可以传递进来多个或者0个。因为ECMAScript中的参数在内部是用一个数组来表示的，可以在函数内部是用arguments[0],argumengts[1],arguments.length等访问第一个参数，第二个参数或者参数列表的长度。arguments对象中的值会自动映射到对应的命名参数中去
function doAdd(){
if(arguments.length == 1){
alert(arguments[0]);
}else if(arguments.length == 2){
alert(arguments[0]+arguments[1]);
}else{
alert("something else");
}
}
//程序员可以用这种方式实现类似重载的功能。之所以类似，是因为JS中的函数没有签名，因为其参数是由包含零或多个值得数组来表示的(arguments对象)没有签名，也就没有重载
//所以，一旦出现了调用同名函数，则后面的函数会覆盖前面的
doAdd(10);
doAdd(10,20);
3)每个函数都有自己的执行环境，当执行流进入一个函数时，函数的环境会被推入到一个环境栈中，而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。眉不变量可以通过作用域链访问所有的外围环境变量
8.内存机制
JavaScript不允许直接访问内存中的位置，也就是说不能直接操作内存中的对象（实际我们操作的都是对象的引用）。同时，我们只能够给引用类型的值动态添加属性(var person = new Object(); person.name="feng"//正确；换成var person = "Object"/，则添加属性时会报错)。引用变量的复制参考JAVA
9.JavaScript所有函数的参数传递都是值传递的，参考JAVA（
</pre>基本数值传递后不影响函数外，引用类型则会影响外部的值--即使值传递，也会访问统一对象）<p></p><p><span style="font-size: 18px;"><span style="white-space: pre;"></span></span></p><pre name="code" class="javascript"> function setName(obj){
obj.name="feng";
obj = new Object();//等效于obj = {};
obj.name="beifeng";
}
var person = new Object;<span> </span>
setName(person);
alert(person.name);
/*输出feng,而不是beifeng.证明了是值传递而不是引用传递。否则obj会指向一个新的Object
*即使在函数内部改变了参数的值，但是原始的引用依然保持不变（但是引用的属性会发生改变）
*局部对象变量在函数执行完毕后被销毁了
*/
10 typeof &&instancof
1)alert(typeof s);判断s的类型
2)alert(person instanceof Array);判断person是Array引用类型吗？
11 JavaScript中没有块级作用域，使用var定义的变量会被自动添加到最近的环境中（函数环境、全局环境）
12.JavaScript具有自动垃圾回收机制：标记清除法和引用计数法
13.JavaScript不具备类和接口
虽然ECMAScript从技术上讲是一门面向对象的语言，但它不具备传统的面向对象语言所支持的类和接口等基本结构，所以使用应用类型的值代替对象的称呼
使用对象字面量的方式来定义对象
var person = {
name:"feng",
age:24 //注意此处没有,结尾
}
14.Array类型：1.数组大小动态调整 2.数组中的每一项都可以保存任何类型的数据
1).创建方式
//主动声明数组大小，var colors = new Array(20);
var colors = new Array("red","blue","green");//创建数组的第一种方式
var colors = ["red","blue","green"];//创建数组的第二种方式
2).可以动态修改大小
colors[3] = "grey";//新增第四项
colors.length = 2;//数组的length属性不是制度的，可以通过主动设置length的值动态移除或添加新项。本例中，主动删掉数组最后一个元素
colors[colors.length] = "black";//动态在数组后新增一个元素
3).alert(colors.join("||"));//输出red||blue||green
alert(colors);(或者alert(colors.toString());//输出red,blue,green
4).将数组表示成栈：colors.pop();&&colors.push("red","green");
push();将任意数量的参数，逐个添加到数组末尾，并返回修改后数组的长度
pop();从数组末尾移除最后一项，减少数组的length，然后返回移除的项
5).将数组表示成队列：push()&&shift();
push();将任意数量的参数，逐个添加到数组末尾，并返回修改后数组的长度
shift();移除数组中的第一项，并返回该项，同时数组长度减1
6).对数组排序：sort()和reverse()
对于sort()函数，会对数组中的每一项求toString()后进行比较，
var values = [0,1,5,10,15];
values.sort();
alert(values);//输出0,1,10,15,5
这样的排序是很不理想的，也是不可控的，我们可以对sort()传入参数来进行控制
//如果第一个数小于第二个数，就返回个负数
function compare(value1,value2){
if(value1 < value2){
return -1;
} else if(value1 > value2){
return 1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values);//输出0,1,5,10,15
3.0升级版，对于对象，可以按照指定的属性进行排序输出
function compare(poppertyName){
return function(object1,object2){
var value1 = object1[poppertyName];
var value2 = object2[poppertyName];
if(value1 < value2){
return -1;
} else if(value1 > value2){
return 1;
} else {
return 0;
}
}
}
var values = [{name:"feng",age:24},{name:"zi",age:18}];
values.sort(compare("name"));
alert(values[0].name);//输出feng
values.sort(compare("age"));
alert(values[0].name);//输出zi
将传入的参数（数组，或其他东东）添加到原来数组的末尾
colors.concat("yellow",["black","brown"]);//输出red,green,blue,yellow,black,brown
8).数组的分割
返回当前数组中的从第一个参数开始到第二个参数结束的一个新数组，包前不包后，且不影响原来数组。
var colors = ["a","b","c","d","e"];
var colors2 = colors.slice(1,3);//等效于var colors2 = colors.slice(-4,-2);
alert(colors2);//输出b,c
9)splice()方法
删除splice(0,1);删除数组中【0，1）项，并返回被删除部分数组；原数组长度减一
10)indexOf()&&lastIndexOf()
用来返回要查找的想在数组中的位置,或者在没找到的情况下返回-1
15 Date类型
1)创建日期
var da1 = new Date(Date.UTC(2005,4,21,17,21,18));//GTM时间 2005年5月21日17点21分18秒，或直接 var da1 = new Date(2005,4,21,17,21,18)
2) Date.now();返回调用当时经过的历史毫秒数
16.RegExp正则类型 （坑，后面填）
17.Function类型
1)函数实际是对象,函数名实际上也是一个指向函数对象的指针，跟指针变量没有区别，所以一个函数可以有多个名字（两个指针指向内存中的同一位置）
正常定义函数，使用function sum(num1,num2){} 也等效于var sum = function(num1,num2){};，使用变量sum引用函数，但此时后面需要跟一个分号类似于声明变量）
(也可以使用 var sum = new Function("num1","num2","return num1+num2");//解析两次，第一次函数，第二次参数字符串，不推荐
2）没有重载
3) 函数声明方式：对代码求值时，JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部（解析器会在率先读取函数声明，并使其在执行任何代码之前可以访问）。即使声明函数的代码在调用他的代码后面
<span style="white-space:pre"> </span><pre name="code" class="javascript"><span style="white-space:pre"> </span>alert(sum(10,10));
function sum(num1,num2){
return num1+num2;
}
而对于函数表达是声明类型则会报错，相当于使用了未定义的指针变量
<span style="white-space:pre"> </span>alert(sum(10,10));
var sum= function(num1,num2){
return num1+num2;
}
4）内部属性
1.arguments用来保存函数的参数列表。其中使用arguments.callee()获得函数的指针，可以用来代替函数名使用
function facotrial(n){
if(n <=1) return 1;
else return n*arguments.callee(n-1);//使函数的执行与函数的名称解耦
}
2.someFunction.call(作用域)，如someFunction.call(this),someFunction.call(windows),someFunction.call(o(某函数的名称))可以指定函数要执行的作用域为参数的范围
18.包装类型
每次读取一个基本类型的时候，后台会自动创建一个对应的基本包装类型的对象，从而调用一些方法
var s1 = "feng"; var s2 = s1.subtstring();//正常s1作为字符串基本类型，是不会拥有方法属性的后台做了如下处理
var s1 = new String("feng");
var s2 = s1.substring(2);
s1 = null;//代码执行完毕后，立刻销毁，意味着我们不能在运行时为基本类型添加属性和方法，以为立刻被销毁了
19.String类型
1)查找指定位置的字符:charAt(position)
var str = "hello world"; alert(str.charAt(1));//输出e
2）字符串截取:substring
str.substring(3);//输出lo world str.substring(3,7);//输出lo w,采用【）的方式,不影响原来字符串
3）查找指定字符的位置:indexOf
str.indexOf("o");//输出4
案例：遍历查找数组指定字符
var stringValue="te ji jia te ji,wo de tou fa hao ,duang~";
var positions = new Array();
var pos = stringValue.indexOf("a");
while(pos>-1){
positions.push(pos);
pos = stringValue.indexOf("a",pos+1);
}
4）字符串去前后空格：trim()
var str1=" feng "; var str2 = str1.trim();//输出feng,原来字符串str1不影响
5）字符串大小写str.toLocaleUpperCase();str.toLocaleLowerCase()
6）模式匹配方法：match（本质上等同于调用RegExp的exec()方法
var text = "cat,bat,sat,fat"; var pattern = /.at/; var matchs=text.match(pattern);//返回一个匹配的数组 alert(matchs[0]);//输出cat
）
7）替换子字符串replace(正则表达式或字符串，需要用来替换的字符串)
1）普通替换
var text = "cat,bat,sat,fat";
var result = text.replace(/.at/g,"word");
alert(result);//输出word,word,word,word,匹配了所有的2）将结果插入到某些字符串中
var text = "cat,bat,sat,fat";
var result = text.replace(/(.at)/g,"feng ($1)");
alert(result);//输出feng(cat),feng(bat),feng(sat),feng(fat)
8）分割字符串方法：split();
基于指定的分隔符将一个字符串分割成多个子字符串，并将结果放在一个数组中。
var color = "red,blue,green,yellow"；
var colors1 = color.split(",");//输出['red','blue','green','yellow'];
var colors2 = color.split(",",2)//输出['red','blue'];
var colors3 = color.split(/[^\,]+/);//分隔符也可以是FegExp对象
20.内置对象 Math
1）求数组最大值最小值
<pre name="code" class="javascript"> //最基本的方式：Math.max(1,2,3)
var values = [1,2,3,4,5,6];
var max = Math.max(values);
2）舍入方法
Math.ceil()：向上射入 25.6->26;25.1->26
Math.floor()：向下舍入 25.4->25;25.9->25
Math.round()：标准四舍五入 25.6->26
3）随机数Math.random()，返回一个【0，1）的一个随机数
1.从某个整数范围内随机选择一个值
var result = Math.floor(Math.random()*总数+第一个开始的数);//例如，2~9 Math.floor(Math.random()*9+2);
2.封装成方法:每次都从数组中随机抽出一个元素
function selectForm(min,max){
var total = max - min + 1;
return Math.floor(Math.random()*total + min);
}
var kings = ["曹魏","袁绍","公孙瓒","刘备","刘表","孙权","袁术","马腾","刘焉","孟获"];
var the_winner = kings[selectForm(0,kings.length-1)];
21 BOM(浏览器对象模型)中的核心windows对象
<pre name="code" class="javascript">window.open("http://www.baidu.com","topFrame");
//等同于<a href="http://www.baidu.com" target="topFrame"></a>
var timeoutId = setTimeout(function(){
alert("hello world");
},3000)
clearTimeout(timeoutId)；
setTimeout(function(){alert("abc");},3000);
注：经过一段时间后也可能不会执行，因为JS是单线程的解释器，一段时间内只会执行一段代码。为了控制要执行的代码，就有一个JS任务队列，这些任务会按照将他们添加到队列的顺序执行。setTimeout()的第二个参数告诉JS多长时间吧当前人任务添加到队列中。如果队列为空，那么添加的代码会立刻执行，否则就要等前面的代码执行完毕后在执行
2..setInterval:指定多长时间再次调用该函数
setInterval(function(){
alert("hello world");
},3000)可以像setTimeout里一样去取消调用，常用的使用间歇调用的方法
var num = 0;
var max = 10;
var intervalId = null;
function increamentNumber(){
num++;
if(num == max) {
clearInterval(intervalId);
alert("Done");
}
}
intervalId = setInterval(increamentNumber,500);//通过跟踪超市调用ID在调用一定次数后取消调用以上的函数可以用setTimeout来实现，此时不用跟踪超时调用ID
var num = 0;
var max = 10;
function increamentNumber(){
num++;
if(num < max) {
setTimeout(increamentNumber,500);
}else{
alert("Done");
}
}
setTimeout(increamentNumber,500);
3）系统对话框
if(confirm("are your sure ?")){
alert("OK")
}else{
alert("No")
}
3.prompt提示框
var result = prompt("What's your name ?","");
if(result !== null ){
alert("Welcome, "+result);
}
4）location对象
//解析URI中的查询字符串数组，如?q=javascript&num=0
fucntion getQueryStringArgs(){
//取得查询字符串并去掉开头的问号
var qs = (location.search.length>0?location.search.substring(1):""),
//保存数据的对象
args = {},
//保存每一项
items = qs.length?qs.split("&"):[],
item =null,
name = null,
value = null;
var i = 0;
len = items.length;
for(i = 0;i<len;i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1];
if(name.length){
args[name] = value;
}
}
return args;
}
2.加载新的URL
url:http://www.baidu.com
修改端口号：location.port=8088;(其他的类似location.xxx = ""xxxx")浏览器的历史记录会生成一条新的纪录，所以使用回退，可以退到上一条记录
22.DOM文档对象模型
是针对HTML和XML文档的一个API(应用程序编程接口)。描绘了一个层次化的节点树，允许开发人员操作页面的某一部分。节点之间的关系形成了层次，而所有页面标记则表现为一个以特定结点为根节点的树形结构，以HTML为例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"/>
<script>
</script>
</head>
<body>
</body>
</html>
JavaScript中所有的节点类型都继承自Node类型，每一个节点都有一个chileNodes属性，其中保存着一个NodeList对象。
1）Document类型
1.JavaScript通过Document来表示文档类型，在浏览器中，document对象是HTMLDocument的一个实例，表示整个HTML页面，同时也是window对象的一个属性
document.body：获得<body>标签属性
document.title：获得<title>属性
document.URL：获得完整的URL（地址栏中显示的）http://www.baidu.com/test/
document.domain：获得网站域名www.baidu.com,通过将两个不同域页面的document.domain设置为同一个值，就可以实现通过JavaScript通信了
document.referrer：获得来源页面的URL
document.form：获得页面中所有的<form>标签
2.查找元素
document.getElementById();//返回匹配名字的第一个元素或者null
对于<div id="a" class = "b">而言，var var div = document.getElementById("a"); alert(div.id);//输出a
document.getElementsByTagName();//返回的是包含零或者多个元素的NodeList,输出使用~[0].属性，如var images = ~("img");alert(~[0].src)
document.getElemtntsByName();//返回带有给定name特性的所有元素，特别适用于获得一组单选按钮
2）操作技术
动态脚本、动态样式等等，都不如Jquery好使，略