Javascrip是Netscape推出的一种嵌入HTML文档，基于对象的脚本描述语言。
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。JavaScript代码由浏览器内置的JavaScript引擎解释执行。JavaScript是广泛用于客户端，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
目录
1 JS用途
2 JS数据类型
3 内置对象
4 BOM、DOM对象模型
5 自定义对象（函数对象）
6 函数的定义与调用
7 流程控制：体现逻辑之美
8 JS嵌入方法
9 JS代码在THML中书写的方法
10 script语句什么时候被执行？
11 脚本执行的顺序
12 代码执行的次数
13 JS借助DOM对HTML进行操作
14 JS动态变更样式
JS是通过自身内建的对象和DOM对象模型所提供的对象和事件，对网页内容进行控制、对用户操作进行响应，从而实现网页的动态交互效果的。
JS与VBA一样，是基于对象的脚本语言，它们都有一个宿主，主要操作的是宿主对象的元素，所以基本上无须考虑再创建新的类或对象，而是基于现有的对象，去获取或引用，然后再操作。
1 用途
1.1 嵌入动态文本到HTML页面。
1.2 对浏览器事件做出响应。
1.3 读写HTML元素。
1.4 在数据被提交到服务器之前用正则表达式验证数据。
1.5 检测访客的浏览器信息。
1.6 控制cookies，包括创建和修改等。
1.7 基于Node.js技术进行服务器端编程。
2 JS数据类型
2.1 基本数据类型（原生对象）：字符串、数值型、布尔型；
2.2 复合数据类型
2.2.1 数组Array
构造函数：
new Array( )
new Array(size)
new Array(element0, element1, ..., elementn)
数组方法：
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素
2.2.2 对象Object
I 内置对象
II 宿主对象（BOM、DOM）：浏览器、文档对象模型
III 自定义对象（函数对象）：用构造函数去构造一个对象；
3 内置对象
JS提供了很多类，这些类按照不同的功能封装了一些函数和变量，用于不同的数据运算，如字符串运算、数学运算、数值转化、格式化等；这些类被包含在JS解释器中，因此，也被称为内建类。一些内建类无须实例化，可以直接调用类的方法和属性，而另外一些类则需要使用new关键字实例化才可以调用类的方法和属性；
在JavaScript提供了String（字符串）、Math（数值计算）、Date（日期）、Boolean、Function、Global、Number等对象。
JS内建的类也是某一事物的抽象，所以也必须创建实例才能使用，如Date类，首先要创建该类的新实例，然后才可使用它的方法和属性，也就是创建了类的一个新实例后，该类的所有属性和方法都会被复制到该实例中。
var currentDate=new Date()
var currentMinute=currentDate.getMinutes()
有一些类虽然也是事物的抽象，但是这些类一般不会有什么个体而言，如月亮抽象为一个类，该类有方法和属性，但是世上只有一个月亮，它是唯一的，所以也谈不上个体，也就无须实例化，JS中内建的Math类就属于这一类型，无需实例化。
4 BOM、DOM对象模型
JS中对于不同的运行环境，有着不同的内置宿主对象，这是由于JS是被作为一种扩展语言而设计的。对于通用程序设计语言，开发者必自己开发运行时的上下文环境。正因如此，那些语言才有了通用设计语言的名称。另一方面，扩展语言是在内建对象的应用程序（宿主环境）中运行程序的。宿主应用程序会在这时收到一些运行时的上下文信息。JS会以全局对象作为根节点的对象树的形式，接收这些上下文信息。在启动时，JS从宿主环境获取的对象树就被称为宿主对象。从JS代码的角度来看，全局对象在程序启动前就已经存在了，客户端JS的全局对象被称为Window对象。
浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器自身也被设计为一个对象集合的模型，我们可以使用这些浏览器对象来操作浏览器；
BOM对象不仅具有属性、方法，还具有事件，在JS中通过事件处理器来处理事件。当事件发生时，事件处理器将连接到相应的事件处理代码，不同的对象具有不同的事件。
5 自定义对象（函数对象）
js中对象随处可见，却没有定义类的概念，可以使用函数来定义一种新的类型。
JS中是使用构造函数来构造一个类。
function show()
{
document.write("<li>"+ this.name + " " + this.age + "<br />");
}
function Student(_name,_age)
{
this.name = _name;
this.age = _age;
this.show = show;
}
var stu1 = new Student("Tom",20);
var stu2 = new Student("Lily",10);
show.call(stu1);
stu2.show();
/*
Tom 20
Lily 10
*/
一般写成下面的格式更紧凑：
function Student(_name,_age)
{
this.name = _name;
this.age = _age;
this.show=function()
{
document.write("<li>"+ this.name + " " + this.age + "<br />");
}
}
var stu1 = new Student("Tom",20);
var stu2 = new Student("Lily",10);
//show.call(stu1);
stu2.show();
6 函数的定义与调用
函数是一个单独的逻辑单元，执行一个特定任务。使用一个函数前，必须先对它定义。然后在脚本中对它进行调用。
函数是属于延迟执行的一个指令集；函数定义后并不会自动被执行，需要在特殊位置调用时才被执行。
函数具有对象的全部特征，多出的()表示函数本身还可以被调用；
函数可以把重复的运算封闭在一起，有利于代码的重用，JS内建了很多预定义函数，用于处理一些常见操作。你也可以自定义函数，从而将一些重复运算的语句封装起来；
JavaScript函数可以封装那些在程序中可能要多次用到的模块。并可作为事件驱动的结果而调用的程序。从而实现一个函数把它与事件驱动相关联。这是与其它语言不样的地方。
预定义的函数也叫全局函数,enscape()、encode()、parse Float()、Number()、String()、isFinite()、isNaN()、eval()。
6.1 普通定义方式
function a(x,y){
return x+y;
}
var n=a(5,6);
document.write(n);
6.2 变量定义方式
var varf=new Function("x","y","return x+y;");
var i = 3;
var j =4;
var mul = varf(i,j);
document.write(' ',mul);
6.3 匿名函数
函数定义时也可以省略函数名。匿名函数也是一个表达式。以下赋值表达式右侧的就是匿名函数表达式：
var a=function(x,y){return x+y;};
6.4 构造函数
构造函数是用于生成对象的函数，构造函数通过new表达式来调用。
function MyClass(x,y){
this.x=x;
this.y=y;}
var obj=new MyClass(3,2);
document.write(obj.x,",",obj.y);
6.5 闭包closure
闭包closure 是一种具有状态的函数；在函数声明的内部声明另一个函数，即嵌套的函数声明；
function getsum()
{
....function sum(a,b)
....{
........return a+b;
....}
....return sum;
}
var sumoftwo = getsum();
var total = sumoftwo(3,8);
document.write(' ',total);
6.6 函数的执行
调用函数就是使用当前文档中所定义的函数，或者调用另一个窗口或框架定义的函数。调用时需要用指定的参数来执行一个特殊的行为。一个函数还可以自己递归。
6.6.1 函数的简单调用
函数的定义语句通常放在HTML文件的<head>段；而函数的调用语句通常放在<body>段中；如果函数定义之前调用函数，执行将会出错。
使用函数的返回值：变量名＝函数名();
6.6.2 在事件响应中调用函数
当用户单击某个按钮或某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件；onClick=""函数名();
6.6.3 通过链接调用函数
<a href="javascript:函数名();">链接名</a>;
7 流程控制：体现逻辑之美；
7.1 条件判断：if、switch;
7.2 循环控制：while、for;
7.3 跳转语句：continue、break;
8 JS嵌入方法
JS可以放在HTML的任何地方(head或body标签内)，但以下情况例外：
I 当我们在代码中定义了函数时，就一定要注意将函数的定义放在对该函数的调用之前；
II 当浏览器由上到下、由左至右执行HTML代码时，遇到对函数的调用时，如果在调用函数之前，该函数已被定义，浏览器将正确执行该函数；如果函数的定义在函数调用之后，浏览器无法执行该函数；
<head></head>之间的javascript代码一般用于提前载入，以响应用户的页面动作，一般不影响HTML文档的浏览器显示格局；
<body></body>之间的javascript代码一般用于在页面载入时运行JS代碼生成頁面內容；
8.1 利用<script>…</script>加入到HTML中：
<script language="javascript>…</script>
8.2 利用SRC属性级联脚本文件：
<script language="javascript" src="cnc/adnews.js"></script>
8.3 直接加入到HTML标记：
<body onload="javascript:window.alert("欢迎光临我们的网站")>
<a href="javascript:void(null)" onclick="document.execCommand('SaveAs')">js操作</a>
9 JS代码在THML中书写的方法
书写的方法不同，其执行的流程也各不相同。
9.1 <script>无法操作<script></script>之后的元素，因为之后的元素还未构造，所以JS代码也无法取得之后的DOM元素。
9.2 读取外部的JS文件，还可以指定defer、async属性去推迟或异步执行。
9.3 onload:在页面读取完后再对其执行，可以操作全部DOM元素。
<body onload="alert('hello')">
window.onload=function(){alert('hello');};
10 script语句什么时候被执行？
决定因素是script语句在文档中的位置；
10.1 在文档加载时；
10.2 在文档加载后；
10.3 根据用户的动作作出响应；
10.4 当其它script语句调用它时；
11 脚本执行的顺序
11.1 按它们在文档里出现的顺序顺序执行；
11.2 事件驱动异步执行；
element对象上的一个重要的属性集合就是事件处理程序相关的的属性，可以在脚本中为之绑定一个函数，这个函数会在某一个事件发生时以异步的方式调用，事件处理程序可以以JS代码修改窗口文档和组成文档元素的行为，事件处理函数的属性名是以单词“on”开始，如D.onclick=function(){};
12 代码执行的次数
12.1 一次，即顺序执行一次，
12.2 调用的次数；
12.3 定时器按时间间隔执行；
重复调用某个函数或执行某个表达式，并且对函数或表达式的调用间隔只有固定时间的延迟。
setInterval("functionOrExpr",msecDelay [,funcarg1,…,funcargn])
清除计算器可以使用以下语法：
window.clearInterval(id);
12.4 对代码延迟执行
当你需要在将来某个时间执行一次函数或表达式时。实际应用于警告框的显示时间和状态栏的跑马灯效果、打字效果等。
window.setTimeout("functionOrExpr",msecDelay);
13 JS借助DOM对HTML进行操作
13.1 节点的获取
通过 id 查找 HTML 元素
var x=document.getElementById("intro");
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名找到 HTML 元素
var x=document.getElementsByClassName("intro");
13.2 节点的创建和新增
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
13.3 节点的内容更改
document.getElementById("p1").innerHTML="New text!";
document.getElementById("image").src="landscape.jpg";
13.4 节点的删除
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
13.5 改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
document.write(Date());
14 JS动态变更样式
14.1 通过className属性更改class名
var child0 = document.createElement("div");
child0.innerHTML = "child0";
child0.className = "newDiv";
parent.appendChild(child0);
14.2 通过classList属性更改class名
在html中，一个tag可以应用了多个类，如：
<div class="bg tex">……</div>
通过className属性去更改其中的一个类比较麻烦。
而使用classList属性则会很方便，如：
obj.classList.remove('bg');
14.3 更改style属性
<div id="foo" style="position:absolute">This is a sample.</div> <script>
var elem=document.getElementById('foo');
var frame=0;
setInterval(function(){
frame+=1;
elem.style.left=frame*10+'px';},100);
</script>
(还可以通过setInterval(匿名函数）实现动态效果；）
14.4 直接更改样式表
function changecss(nh) {
CSS.href="";
CSS.href=nh;
}
-End-
