5) 變量 (將注意力集中在經常使用、有效狀況及組合，其它合理語法不過多關注)javascript
- 語句php
javascript語句以換行表示結束。也能夠用semicolon ";"顯示錶示換行結束。但最佳方式是用";"。試想在壓縮格式中，若是沒有";"會發生什麼?css
- 聲明而且賦值html
能夠直接使用使用變量，無需var聲明。fullName = 'Larry Ullman'; 。但最佳的方式是用var顯示聲明並同時賦值html5
var fullName = 'Larry Ullman';java
同時聲明多個變量node
var firstName = 'Larry', lastName = 'Ullman';jquery
- 引用web
javascript的引用具備向後引用的特性。一行語句能夠引用在後面申明的簡單變量、複雜變量、函數。express
- var是無類型的
var沒有類型，javascript隱式轉換
var fullName = 'Larry Ullman';
fullName = 2;
- var值類型
簡單的值類型分紅三種。更復雜的是array和object
number類型: 不能用引號括起。可使數字、"."、"e"、"+"、"-"，但不能包含千位分隔符號"," 。
string: 可使空""。便可以用單引號括起，也能夠用雙引號括起。若是單雙引號相互包含，最佳的方式是使用反斜槓轉義。好比
"I've got an idea." 正確
'I\'ve got an idea.' 正確
"Chapter 4, \"Simple Variable Types\"" 正確
boolean: 其值爲true 、false 。在控制結構中null、undefined、0、empty string均被看作false。 null、undefined不能用引號括起，而是
直接使用。
特殊的值: null和undefined。undefined表示變量聲明但未被賦值，此外若是函數沒有顯示返回值，其返回值爲undefined。
null表示操做沒有結果。
- 值操做
number類型: + - * / %。%表示取餘數 7%2=1 。
能夠和=組合。
能夠自增減 ++、--, 有前置和後置兩種屬性。
- 變量做用域
全局變量
在函數外聲明變量，即成爲全局變量，能夠從其餘的js文件訪問。全局變量的隱含意義是它們自動成爲window的屬性或方法，因此自定義的全局變量或者函數都可以用
window.globalVariable，window.myFunction()來訪問。因此window.print()能夠簡寫爲print()。
在函數內部聲明爲局部變量，只能在同一函數內才能訪問。便是從同一文件的其它函數體中也沒法訪問這個局部變量。
避免與browser變量服務衝突的方法是使用駱駝法命名變量，至少有一個駝峯。
此外瀏覽器提供的對象也是全局。
-closure(閉包)
若是函數局部變量被函數域內其它自定義函數訪問，頂層函數中的局部變量生命期將擴大，多是到整個瀏覽器窗口關閉，但做用域不變。同時頂層函數被訪問的是其運行值
，而不是定義值。
(function(){
var i=1;
window.onload=function(){
alert(i);
};
i = 300;
})()
將輸出300
6) 流向控制
- if
if(true){}else if(true){} else{}
- switch
switch (expression) {
case value1:
// Execute these statements.
break;
case value2:
// Execute these statements instead.
break;
default:
// No, execute these statements.
break;
}
相等的判斷爲identical，而非equal。其express爲任何值類型，好比string。
尤爲注意break，若是忘記break，全部的語句都將被執行一遍。
經常使用的狀況有case聯合，以下
switch (weekday) {
case ‘Monday’:
case ‘Wednesday’:
case ‘Friday’:
// Execute these statements.
break;
case ‘Tuesday’:
case ‘Thursday’:
// Execute these statements instead.
break;
default:
// The default statements.
break;
}
- CrYPtiC Conditionals
格式
(condition) ? return_if_true : return_if_false;
- 循環控制
for (initial expression; condition; after expression) {
// Execute these statements.
}
initial expression僅僅執行一次。當condition爲true時候，進入循環體。當循環體執行完畢後，將執行after expression。
一個比較複雜的循環例子。
for (var i = 1, var j = 0; (i + j) <= 10; i++, j += i) {
// Do something.
}
while (condition) {
// Statements to be executed.
}
condition知足才進入循環體。
do {
// Statements to be executed.
} while (condition);
先執行循環體。退出時判斷condition，爲true，進入下一輪循環體。
break
退出整個循環。
continue
退出本輪循環，進入下一輪循環體。
7) 註釋
//
/*
*
*/
8) 流控制中邏輯運算及真值判斷
- 真值判斷
非假爲真值。
假值的狀況包括, 因此-1將等價於true。
0
false
NaN(Not a number)
null
undefined
empty string( ""或'')
- 邏輯運算(比較運算)
在javascript中稱爲比較運算。包括
>
<
>=
<=
== 相等
!=
=== identical。當兩邊有相同的值和相同的值類型時，運算結果爲真。
!==
&& and
|| or
! not
由於javascript會進行隱含的轉換，0，empty string等都被轉換爲假值。可是他們的類型並不同，若是用==比較，
結果爲真，用===比較，結果爲假，由於他們的類型不同。
當要精確地與0、false、empty string、null、undefined進行比較時候，使用===。
9) number運算精度及number比較
小數0.321能夠表示爲.321，這樣 1 - 0.321能夠表示爲 1- .321。
number算術運算的精度和有效位數規則不知。若是進行下列運算將會有下列結果。
1-.8=0.19999999999999996
.3-.1=0.19999999999999998
1-.3=0.7
因此，比較 1-.8==.3-.1, 結果將爲false。減小影響的方法是使用toFixed(width)將裁剪結果後的小數位。
var v=1-.8;
v.toFixed(1); //結果將爲0.2
NaN是javascript中有效的保留字，表示這不是一個數字。可是它不能用在比較運算中。下列返回false
if( NaN==NaN)
因此將NaN用在比較運算中沒有意思。若是要判斷一個變量是否爲一個數字(意思是能所有轉化爲數字)，使用isNaN函數
好比if(isNaN(n))。能夠用isFinite()來代替判斷變量是否爲數字，isFinite表示是否爲有限的數字。
11) 字符串比較運算及字符串分行
字符串運算時大小寫敏感的，若是要進行大小寫不敏感的比較，先調用toLowerCase() 或 toUpperCase()。
if (email.toLowerCase() == storedEmail.toLowerCase())
判斷字符串包含關係
if (comments.indexOf(‘spam’) != -1) { // Contains spam!
字符串分行
使用反斜槓"\"分行, 常常和換行符組合起來，"\n\"。而且一般用單引號將包括字符串，這樣就能夠直接將雙引號做爲普通的字符包含在字符串之中
。好比下列語句建立一個新的div
c = document.createElement('div');
c.id = 'promptWindowArea';
c.innerHTML =
'\n\
<div id="promptWindow" style="width:300px; height:150px; background-color: #00CCFF; padding: 5px; margin: 10px;"> \n\
<p style="height:40px;width:100px;">hardware info</p> \n\
<div style="overflow:auto;"> \n\
<button id="okbutton" style="position:left">ok</button> \n\
<button id="cancelbutton" style="position:left">cancel</button> \n\
</div> \n\
</div> \n\ ';
alert('hello \
word');
12) 類型判斷(typeof操做符)
if (typeof myVar == ‘number’)
經常使用類型返回值對應表。注意NaN返回number。
typeof能夠準確判斷一個變量不屬於undefined。若是要準確判斷對象的類型還可以使用
instanceof
這種方法只用於new建立的對象上
var Rectangle = function(x,y,size){ };
var myRec = new Rectangle(100,100,30);
if( myRec instanceof Rectangle )
{
console.log('true');
}else{
console.log('false');
}
將返回true
constructor
if( myRec.constructor == Rectangle )
{
console.log('true');
}else{
console.log('false');
}
將輸出true。注意比較運算的兩邊均不是簡單對象，因此它們在比較運算以前，先隱式的進行其它運算。
11 ) 複雜對象(高級對象)
- Date
建立日期對象
var today = new Date();
- array
建立數組
var myList = new Array(1, 2, 3);
var people = new Array('Fred','Daphne', 'Velma', 'Shaggy');
var options = new Array(true, false);
var myVar = [];
var myList = [1, 2, 3];
var people = new Array('Fred','Daphne', 'Velma', 'Shaggy');
能夠建立混合數組，可是這種狀況比較少
var collection = [1, ‘Fred’, ‘Daphne’, 2, false];
訪問數組長度
people.length獲得數組長度，其中空隙佔位undefined也被計算在內。
訪問數組內容
直接訪問數組變量將獲得它全部結果，console.log(people)將輸出"Fred Daphne Velma Shaggy"。
使用[]訪問單個元素,console.log(people[0])將輸出"Fred"。
爲數組作賦值運算
使用[]爲數組中的元素賦值。
能夠向數組任意位置賦值，空隙將用undefined值填充。向數組末尾添加元素的方法是people[people.length]
多個數組值合在一塊兒，使用concat，可是有些瀏覽器不支持。
var primes = [];
primes.concat(1, [3, 5, 7]); // [1, 3, 5, 7]
任意操做數組中的連續塊splice()
splice能夠插入、刪除、替換連續的數據塊。splice會返回移除的number_to_operate個元素。且r的類型爲object。若是插入、替換、刪除、取移除值被寫入一個表達中，
先執行取值，再執行其它操做。
var ng=[0,1,2,3,4,5];
r = ng.splice(2,3,91,92,93,94);
console.log(ng);
console.log(r);
結果輸出
[0, 1, 91, 92, 93, 94, 5]
[2, 3, 4]
r=splice(base_index, number_to_operate, new value, new value)。base_index是操做的基準點，number是數據塊的長度。後面是新值。
插入
number_to_operate一般0，表示是插入操做。
var ng=[0,1,2,3,4,5];
ng.splice(2,0,91,92,93,94);
console.log(ng);
輸出
[0, 1, 91, 92, 93, 94, 2, 3, 4, 5]
刪除
若是沒有new value, 表示是刪除操做
var ng=[0,1,2,3,4,5];
ng.splice(2,3);
console.log(ng);
輸出
[0, 1, 5]
替換
若是number_to_operate非0，且存在new value，則是替換操做。number_to_operate是刪除的個數，後面的新值能夠是任意個數
var ng=[0,1,2,3,4,5];
ng.splice(2,3,99,92);
console.log(ng);
輸出
[0, 1, 99, 92, 5]
splice能夠用於方向操做，若是base_index爲負數，則從數組末尾開始定位。-1定位在index=length-1處。可是number_to_operate的操做方向仍然是向右。
var ng=[0,1,2,3,4,5];
ng.splice(-2,3,99,92,93);
console.log(ng);
輸出 [0, 1, 2, 3, 99, 92, 93]
取出數組中任意連續位置的值slice()
var r = slice(start_index_point, end_index_point)。若是end_index_point不存在將直接取到數組結束。注意取出的數據不包括end_index_point指向
的元素!!!
var primes = [1, 3, 5, 7]; //
var aPrime = primes.slice(0); // [1, 3, 5, 7]
var bPrime = primes.slice(1,2); // [3]
console.log(aPrime);
console.log(bPrime);
參數也能夠爲負數，這樣從後開始計算，可是連續的方向還是從左到右。
var primes = [1, 3, 5, 7]; // [1, 3, 5, 7]
var bPrime = primes.slice(-2,-1);
console.log(bPrime);
獲得結果 [5]
搜索數組內容
var people = new Array('Fred','Daphne', 'Velma', 'Shaggy');
people.indexOf('Velma')將獲得2。
數組空洞
最好使用undefined顯示定義。
var myList = [1, , 3, , 5];不推薦，最好使用
var myList = [1, undefined, 3, undefined, 5];
在循環中一般要空洞是否存在，使用
if (myList[i] !== undefined) { // Exists!
或者if (i in myList) { // Exists!
i表示索引號。
刪除數組，使用delete方法，數組中將留下一個空洞 delete people[0];
數組元素的結構化操做。
向末尾加入元素，意思便是元素被加在了index=length處。使用函數push()
var primes = [];
primes.push(1); // [1]
primes.push(3, 5, 7); // [1, 3, 5, 7]
相反的操做是unshift()，它將元素加入了隊列的開頭。可是unshift的速度執行慢，因此慎用。
彈出數組最後一個元素, 意思是index=length-1處的元素，使用pop()。
var primes = [1, 3, 5, 7]; // [1, 3, 5, 7]
primes.pop(); // [7]
彈出數組中第一個元素shift()。它比pop慢，慎用。
多維數組
var grid = [[2, 4, 6, 8], [1, 3, 5]];
grid.length; // 2
grid[0].length; // 4
grid[1].length; // 3
grid[0][0]; // 2, first item in the first subarray
有用的且經常使用函數
array_var.join('+') 將數組每一個元素用「+」鏈接起來，最後獲得一個字符串。
array_var.split('+') 將字符串中每一個元素用 "+"分割開來。
- Object
Object是全部的基類。注意object中的屬性出現順序是不固定的，並不依賴於書寫順序。
對象可看作是無序的一組屬性集合，而array是有序的。
聲明對象
var myObj = new Object();
或者
var myObj = {};
爲對象賦值(指屬性和操做)
var chapter = {
num: 6,
title: 'Complex Variable Types',
};
或
var chapter = new Object({num: 6, title: 'Complex Variable Types'});
屬性值能夠是更復雜的數組或對象
var me = {
name: 'Larry Ullman',
age: 42,
car: {
make:'Honda',
model: 'Fit',
year: 2008
},
favoriteColors: ['Black', 'Blue', 'Gray'],
tired: true
};
向對象中動態加入屬性
若是對象中沒有該屬性，賦值操做將自動增長該屬性
chapter.startPage = 256; 該語句將會增長startPage屬性。
判斷屬性是否存在使用undefined, if(undefined===object.property)表示不存在。
使用if(object.property)不能準確判斷屬性是否存在，由於num爲0時候，比較運算返回false。
使用in操做也可, if( 'property_name' in object)，當存在這個元素時候，返回真。
var myObj={
num:false,
name:'bicycle',
};
if( 'numd' in myObj)
console.log("exist");
else
console.log("not exist");
在知道屬性的值類型時，使用typeof也可準確判斷屬性是否存在if( 'value type'==typeof(object.property_name))
訪問對象屬性
使用chaining object notation方法訪問對象屬性，object.property_name.property_name。
me.car.model; // Fit
me.favoriteColors[0]; // Black
使用array notation書寫方法訪問對象屬性，這時對象被看作是一維數組，屬性被看作了位置屬性。前面兩句等價於
me['car']['model']; //Fit
me['favoriteColors'][0]; //Black
在某種狀況下，只能使用array notation書寫方式訪問對象屬性，見<<moder javascript develop and design>> Page210
如今舉例。
var car = {
brand:'sony',
price:150000,
engine:4,
}
for(p in car)
{
console.log(car[p]);
}
將輸出sony 150000 4
遍歷對象全部成員
使用for in遍歷。這種方法注意一者元素的出現順序不固定，兩者會看見父類的屬性，三者速度較慢
for (var p in myObj) {
// Use myObj[p]. property_name
}
刪除對象一個屬性
使用delete obj.property_name
函數是一個對象
函數也是一個對象，若是使用toString, 將獲得函數的代碼。使用typeof，將返字符串function。若是console.log(function_name)，將獲得
function_name()。
this
在對象的函數成員中訪問本身的屬性，使用this.property的方式。
對象之間賦值
對象之間能夠相互賦值
var car = {
color:'green',
startToRun:function(){console.log('running')},
};
var toshibaCar = car;
console.log('toshiba car COLOR is:'+toshibaCar.color);
toshibaCar.startToRun();
console.log(typeof(toshibaCar));
將輸出
toshiba car COLOR is:green
running
object
12) 函數
- 基本
定義函數
函數也是對象，因此它定義的書寫方式和其它變量的書寫方式同樣。
function fname(arg_name, arg_name){}。參數列表中不須要像C語言那樣定義類型，由於javascript是沒有變量類型的，只有值類型。
參數前面的不需var關鍵字。
調用函數
除了使用常規的方式外。
若是傳入的參數不夠，不足的部分被定義爲undefined。若是傳入的參數過多，多出的部分將被自動截斷。這兩種狀況均視爲合理情況。
經過這種方法，能夠知道用戶忘記傳遞那個參數。
function theBuy(bookName)
{
if(undefined === bookName)
console.log("please input para bookName");
else
console.log("have bought "+bookName+" book");
}
theBuy();
輸出 please input para bookName
若是想爲函數設置缺省值，利用下列方法
function functionName(someVar) {
if (typeof someVar == ‘undefined’) {
someVar = ‘default value’;
}
}
若是想跳過中間的參數，使用undefined。
function functionName(a, b, c) {
}
functionName(true, undefined, false);
還能夠將參數值組成obj傳遞進去。這種方法可能更容易閱讀。
var drawRectangle = function(obj){
console.log( obj.x+' '+obj.y+' '+obj.size );
}
drawRectangle({x:50,y:50,size:300});
將輸出
50 50 300
返回值
不能顯示去聲明返回的變量。若是函數沒有return語句，或者return語句後沒有數據，等價於函數返回undefined。
若是想返回多個值，使用數組。 return ['h','o'];
固然也可返回對象 return {x: 1, y: 2};
- 函數體內內置對象arguments
arguments只在函數體有效，它是array-like的一種變量，可是不能向其中插入元素。arguments容納實際的輸入值，與函數定義中參數的
名稱和個數沒有關係，即arguments只是與實參有關係，與形參沒有關係。arguments.length表示傳入參數的個數，若是定義了兩個參數，
可是隻傳入了一個，那麼arguments.length的值
仍爲1。
function drawcar(size,color)
{
console.log(arguments);
console.log(arguments.length);
};
drawcar(100);
輸出[100] 1
用於可變長參數
使用arguments.length設計可變長函數。?
function myJoin()
{
var tol = '';
for(var i=0,len = arguments.length;i<len;i++)
{
tol += arguments[i] + ' ';
}
console.log(tol);
}
myJoin('quest','helen','nana')
輸出quest helen nana
- 使用object構造可變長函數
除了使用arguments外，還可以使用object，好處在於向函數內部傳遞數據時候是reference。
function showCar(myObj)
{
for(var p in myObj)
console.log(myObj[p]);
}
showCar({
size:'500m',
color:'red'
});
輸出 500 red
- 函數入口數據傳遞
有兩種方法，值傳遞和引用傳遞。簡單值類型string,number,boolean是值傳遞。object和array是引用傳遞。
- 使用符號做爲函數名
最靈活的是使用符號做爲函數名，典型的例子是$。
- 匿名函數(沒有名字)
能夠建立一個匿名函數，再將它賦給一個變量。這種方法的用處是書寫靈活。下例子等價於function getTwo(){}
var getTwo = function() {
return 2;
}
匿名函數也是一個對象，只是沒有名字。因此須要將它賦給一個變量，或者做爲其它函數的參數值。最重要的用處
是爲對象的屬性賦予一個匿名函數，顯然在這裏不能用顯示的函數命名。
另外一個優美的用法是馬上自我調用，注意，必定要跟着分號。
(function() {
// Function body goes here.
})();
這種方法的好處是變量能夠從全局變量中分離開來。能夠直接傳遞參數。
(function(str){
alert(str);
})('hello');
- 函數嵌套
這時向函數傳遞的是一個動做。
- chain 函數
function().function().function(), 函數的返回值在函數之間從左到右傳遞，形同chain。爲了取得chain書寫效果，每一個函數必需要返回
一個合適的對象。
- 判斷browser中的對象是否提供某種功能支持
if(obj.function_name)，若是不存在function_name，將返回undefined.
- 函數嵌套
一個函數能夠在另外一個函數體中定義，並定義。有何用處?將(function(){})()做爲程序主體能夠頗有用，其它有用的場景
未知。
- 遞歸
遞歸是最重要的和經常使用的函數用法，一個遞歸函數包括入口、出口、循環體。循環體就是它自身。出口在函數開始處，入口在函數的末尾或循環體中，經過調用本身來
實現。
任何一個重複工做均可以使用遞歸實現，和循環體比較起來，可能的不利之處是遞歸依賴堆棧，可能會讓堆棧崩潰。
好比計算字符串長度用遞歸來實現。
function countLength(str)
{
// 出口
if(str == '')
{
return 0;
}
// 循環體和入口
return 1+countLength(str.substring(1));
}
countLength('abcde');
輸出
5
- 函數是一個對象
更加高級的話題是函數是一個對象。採用下面書寫方式，明顯的代表了函數是一個對象。
var Rectangle= function(x,y,size){};
左邊var Rectangle的書寫方式代表了函數與普通的變量聲明同樣，它也是一個對象。右邊的匿名方式代表這是函數的值，形式上是一個函數體。
爲函數對象添加成員
和普通的對象同樣，能夠向函數中添加屬性成員和函數成員。和普通的對象同樣，若是不存在這個屬性，賦值運算後，它自動被加入函數對象之中
Rectangle.xis = 100;
Rectangle.yis = 200;
Rectangle.draw = function(){
console.log('rectangle drawed');
}
console.log(Rectangle.xis);
console.log(Rectangle.yis);
Rectangle.draw();
將輸出
100 200 rectangle drawed
函數對象之間能夠相互賦值
yourRec = Rectangle;
console.log('yourRec type is:' + typeof(yourRec));
yourRec.draw();
將輸出
yourRec type is:function
rectangle drawed
對函數執行new操做
函數和普通對象的不一樣在於能夠對函數對象執行new操做。這時候，除了返回一個對象外，函數體自己的代碼會被執行。
var Rectangle= function(x,y,size){
console.log('in body');
}
var rectinstance = new Rectangle();
輸出
in body
上條語句能夠直接寫new Rectangle(), 它也將輸出in body。
當使用new時候，函數名體現了一種共同的特性，能夠用於構造類系統。
13) event
- 位置
起初的方法是在html文檔中直接嵌入時間處理函數，但這種方法書寫凌亂，不便於閱讀，已被拋棄。
<input type='button' value='clickme' onclick='alert("hello");alert("world");'/>
另外一種方式是傳統的方式，這種方法已經使用了10多年，在全部的瀏覽器上都能工做。下面是將一個匿名函數
賦給了window對象的onload事件。
window.onload = function() {
// Do whatever.
}
第三種是w3c推薦的addEventListener()，好比window.addEventListener(‘load’, init, false)。這裏注意第一個參數是事件的
名稱，它不是window的屬性。第二參數表示時間的處理函數。
- 事件傳統書寫方式詳解
在傳統方式中若是想取消一個事件的處理函數，使用null。
window.onload=null;
新的事件處理函數將會覆蓋掉之前處理函數。下面代碼calculate處理函數將會取代process處理函數。因此這種方式沒法添加多個
事件處理函數。
document.getElementById(‘theForm’).onsubmit = process;
document.getElementById(‘theForm’).onsubmit = calculate; // Oops!
- w3c addEventListener詳解
添加多個事件處理函數addEventListener，但最不幸的是ie9之前的版本不支持該函數!。這個函數不會覆蓋之前的事件處理函數，
也不會覆蓋使用傳統書寫方式添加的事件處理函數。下例子中load事件擁有兩個事件處理函數
window.addEventListener(‘load’, process, false);
window.addEventListener(‘load’, calculate, false);
刪除事件處理函數removeEventListener。不方便，刪除時候參數填寫必須和添加時徹底一致。
window.removeEventListener(‘load’, process, false);
在ie9之前使用attachEvent()和detachEvent()添加和刪除函數，好比下例。可是要注意使用的onload，這個應該是window的屬性。
同時attachEvent也能添加多個處理函數。
window.attachEvent(‘onload’, init);
- ie事件添加函數兼容性檢查
ie是在9中遵照w3c標準，老版本中使用的是attachEvent。須要判斷瀏覽器版本。依據的方法是若是對象不存在函數，obj.func將
返回undefined, 若是存在，obj.func將返回function()。
if (window.addEventListener) { // W3C
window.addEventListener(‘load’, init, false);
} else if (window.attachEvent) { // Older IE
window.attachEvent(‘onload’, init);
}
- 已存事件快速瀏覽
按照這個分類方法認識全部的事件input device, browser,keyboard,form。
input device event
input device是光標驅動的設備。常見的事件有mousedown、click、mouseup、mouseout、mousemove(會下降性能，儘可能少用，當鼠標移動時候激發。只有在
目標元素上纔會激發，出了目標元素的區域，失效) 、mouseover(光標進入元素區域)
keyboard常見的事件是keydown、keypress、keyup
browser常見的事件有load、unloaded(當其它資源從browser中釋放時候觸發)、resize(調整window大小)、scroll(滾動窗口時候觸發)、focus(當瀏覽器獲得焦點時)、
blur(當瀏覽器失去焦點時候)。
form常見event有reset(當點擊form的reset按鈕)、change(當form中的元素被修改時發生，對於複選框等改變時候即發出該事件，對於文本輸入框，當它失去焦點
時候發出change事件)、select(當選中文本輸入框時候)
- 訪問事件環境和自身信息
瀏覽器經過參數向事件處理函數傳遞環境信息。e表示處理函數對應的事件。在ie9及其它瀏覽器上，這個名字能夠任意命名，一般使用最簡潔的方式e。
function someEventHandler(e) {
// Use e.
}
在ie8及老版本中，事件對象放在了window.event之中。因此用這種格式訪問。
function someEventHandler() {
// Use window.event.
}
可是若是使用inline event方式處理，處理函數的參數必須命名爲event。像這樣。
<a href=」somepage.html」 onclick=」doSomething(event);」>Some Link</a>
事件處理函數跨瀏覽器訪問事件的方法是使用下列方式
function someEventHandler(e) {
if (typeof e == ‘undefined’) e = window.event;
// Use e.
}
或
e = e || window.event; //因此javascript邏輯運算與c語言邏輯運算有差異。c邏輯運算最後只有真假。但javascript邏輯運算它能夠
返回一個有意義的值。
或
e = e || window.event;
訪問對應元素的方法，在ie8及老版本中是使用target屬性，在ie9及其它瀏覽器中是使用srcElement，統一這兩種方式跨瀏覽器的方法是
var target = e.target || e.srcElement;
this變量
在ie9及其它瀏覽器中，this表明的正是咱們所指望的html元素。可是在ie8及老版本中，它表明的window對象。因此若是在事件處理函數中
使用this變量，須要發明兼容性的書寫方式。
獲取按下鍵值及key pressed事件
鍵盤一個按鍵有character和keyCode兩種值。按鍵的keyCode惟一，它對應的character可能有多個，最多見的是大小寫。舉例子來講'a'
按鍵的keyCode是65, 它的character有兩個'A'和'a'。'A'的unicode編碼是65 ，'a'的unicode是97。
要獲取按下鍵的鍵值，在ie中使用keyCode，在其它瀏覽器使用which。但實際ie的狀況更爲複雜。
在ie中，當keypress事件發生時候，keyCode存放的是character code，當keydown和keyup發生時候, keyCode存放是按鍵值。
跨瀏覽器的書寫方式是
var charCode = e.which || e.keyCode;
或更加精確的方式
var charCode = (typeof e.which == ‘number’) ? e.which : e.keyCode;
這裏常常用到方法是將數字裝換爲字符，使用String庫函數
var ch = String.fromCharCode(97) //獲得a
存在一些特殊的key。alt, shift,ctrl在event對象中有本身對應的布爾屬性，表示是否按下，它們是shiftKey, ctrlKey, altKey。同時單獨按下這三個鍵時候
也不會激發keypress事件。
- 替換事件缺省行爲
事件處理函數返回false便可阻止缺省的處理動做。好比<a href='http://www.bing.com'>，返回false，將不會網頁跳轉。可是不一樣元素，不一樣事件，其
缺省行爲含義定義不同。
- event bubble
當事件穿越父子元素時候，按bubble原則處理。舉例以下，假設有下列元素
<div><h1>This is a Title</h1>
<p>This is a paragraph.
<a href=」#」 id=」link」>This is a link.</a></p>
</div>
擁有的父子關係是
div -
- h1
- p
- a
事件的路徑以下圖
當將鼠標移動到a上時，將發生mouseover事件。mouseover事件的產生通過兩個階段。首先capture，此階段，硬件事件將被從上到下一直比較到最末的孩子，全部註冊了
mouseover處理函數的元素都將被着色。第二個階段瀏覽器從底部向上浮升，全部被着色的元素將被依次調用mouseover的處理函數(固然是從下到上依次調用)。
附件
bubble的意義是當注意力轉移到子元素(注意不是z軸上面的元素)上時候，雖然焦點已經轉移到子元素上，可是父元素仍然可以收到事件通知。附件顯示了bubble效果，當點擊
button(用div模擬)，它的父div將受到click事件，輸出
button click
dv click
在capture phase與event交互 ?(具體使用場合未知)
傳統的書寫方式只能用在bubble phase階段。ie8及ie老版本不能用於capture phase階段。ie9及其其它版本能夠將addEventListener第三個參數設置爲true，
在capture phase階段關注事件，好比addEventListener(someDiv, ‘mouseover’, true)。在capture phase階段關注事件的意義在於它能夠截斷事件，或者在
事件發生以前(應該是指事件處理函數被調用以前)作準備工做。
注意focus, blur, change, scroll, and submit這幾個事件沒有bubble phase。
阻止bubble phase
有時當子元素捕獲到事件時，並不但願事件bubble到父元素(即不向上傳遞到父元素，於是父元素的事件處理函數將不會被激發)。在ie老版本中使用
e.cancelBubble = true， 在ie9及其它瀏覽器中使用e.stopPropogation()。統一的方式使用下列代碼。
if (e.stopPropogation) { // W3C/addEventListener()
e.stopPropogation();
} else { // Older IE.
e.cancelBubble = true;
}
附件顯示了bubble canncel的效果，當在button(用一個div模擬)上點擊時候，只顯示button click。
event delegation(事件委託)
由於全部的事件都會bubble到父元素，且事件參數的源屬性爲最底層的元素，因此可將事件處理函數統一移動到父元素中處理。下列在父元素dv中處理全部的點擊事件
14) window
常見的dialog有alert、confirmation、prompt。分別用函數alert、confirm、prompt建立。, 它們沒有html和css，不能修改風格，因此將被更好的方法取代。
由於window爲頂級元素，因此全部定義的函數自動成爲window的屬性，可使用window.yourFunc()形式來調用，固然咱們更願意使用直接的方式yourFunc()。
對於函數外定義變量也一樣適用，可使用window.yourVariable來訪問
瀏覽器版本sniffing
可使用window.navigator.userAgent來判斷瀏覽器的種類和版本，但使用object detection的方法更好。
瀏覽器窗口位置
使用window的screenX和screenY。它們表示的是瀏覽器的左上角相對於顯示屏幕的絕對位置。可是ie使用的是screenLeft，screenTop。
瀏覽器窗口大小
注意，有些瀏覽器可能不能在高分辨率下工做，好比火狐，雖然os的分辨率設爲1600*900, 但它只能在一個小的分辨率下工做，多是1200*600.
innerHeight和innerWidth顯示了客戶區的大小。
outerHeight和outerWidth顯示了總體的大小。
對於老版本ie(ie8)，使用document.body.clientHeight和document.body.clientWidth。
移動瀏覽器
使用moveTo()或者moveBy()，可是不多有必要移動瀏覽器。(實驗，這兩個方法彷彿無效)
moveTo,以顯示屏幕左上角爲座標點。
獲取物理顯示屏信息
使用window.screen對象。
window.screen.height 分辨率的高度
window.screen.width 分辨率的寬度
window.screen.availHeight 可用高度
window.screen.colorDepth 顏色的深度
使用javascript打開一個新的窗口
window.open('somefile.html')，它致使瀏覽器打開一個新的標籤頁，顯示somefile.html的內容。注意須要將返回值賦給一個變量，不然在某些瀏覽器中會
產生問題。
var popup = window.open(‘somefile.html’);
open方法一般被用來打廣告，因此瀏覽器經常會屏蔽這一個功能，這時open返回null。
open的第二個參數能夠爲新建窗口取一個名字，第三個參數能夠控制窗口的外觀，注意這些屬性之間不能有空格!下面是一個例子
var popup = window.open('somepage.html', 'myWindowName',
'height=200,width=200,location=no,resizable=yes,scrollbars=yes');
可是不一樣的瀏覽器對第三個參數的處理方式不一樣，在Firefox中，上面的語句會彈出一個徹底新的窗口，而maxthon仍然是在新標籤中打開。
下面是能夠在第三個參數中設置的window屬性。
open建立窗口的焦點控制
使用popup.focus()函數激活一個窗口。未實驗，不知道實際的含義。
關閉open建立的窗口
window.close用來關閉open打開的窗口，但實驗中關閉了父窗口，不知爲什麼?
查看使用open打開窗口的狀態，使用下列語句。
if ((popup !== null) && !popup.closed) { // Still open.
標準的打開窗口方式
使用javascript方法建立新的窗口難於控制外觀，應該使用html a 的方式打開，就像下列方式同樣。
<a href="popupB.html" id="link" target="PopUp">B Link</a>
在窗口以前傳遞數據(未實驗)
使用history瀏覽歷史(未實驗)
back()
forward()
go()
frame
傳統的frameset方式已通過時。如今一般使用的是iframe。
iframe經常使用的場景是，判斷一個窗口是不是iframe, iframe和父窗口交互，獲取窗口所擁有的frame。未實驗。
if (window.parent != window.self) { // This is a child! In the parent
window.frames[0]
訪問iframe的屬性和方法
var frame = document.getElementById(‘theFrame’);
var frameWindow = frame.contentWindow || frame.contentDocument;
// Access frameWindow.property and frameWindow.function()
重定向窗口
直接改變location屬性，能夠馬上重定向窗口。
window.location ='http://www.example.com/otherpage.html';
一樣的效果的另外一種書寫方式
window.location.href = 'http://www.example.com/otherpage.html';
這兩種方法的前一個頁面均留在history中，能夠用後退再次訪問。
使用location.replace()函數，前一個網頁不會進入history，於是沒法用後退訪問。
window.location.replace('http://www.example.com/otherpage.html');
還能夠直接進入home中，home()彷彿無效?
invoking window.home()
location有兩個經常使用的工具search和hash。search表示?, 用來傳遞數值，之間一般使用&分開，下面是一個例子。
http://www.example.com/page.php?s=10&np=7&sort=name
使用search運算，下面的語句返回?s=10&np=7&sort=name
var search = window.location.search;
hash的一個做用是，它能夠經過<a>將頁面視線移動到一個元素之中，好比下面語句
<a href='#bb'>move eye to button that has id bb</a>
hash的另外一個用途是記錄頁面的狀態，好比說在有tab的頁面中，記錄當前是在那個tab之上，這種技術也稱爲deep linking。同時這種視線的改變也會加入history之中，
於是能夠back後退。
當search和hash組合在一塊兒的時候，正常的順序應該是?...#，而且#後只有一個值。
打印頁面
使用window.print(), 固然在某些設備上可能不支持該功能。
window的document屬性
document屬性表明加載了的html。document關鍵的屬性有
getElementById()， 獲取html中的元素
document.getElementsByTagName()
write()和writeln()，向html中寫入內容，可是它們應該拋棄，主要是由於它們破壞了DOM結構。可是第三方軟件和ads經常使用這個功能將代碼加入到page中。
compatMode屬性，代表瀏覽器的工做模式，是在Quirks 或者Standard下。值爲BackCompat表示Quirk模式，CSS1Compat表示standard模式。
15) DOM(Document Object Model)
HTML爲root element，它有惟一的父節點document, document也只有一個孩子，即HTML.
DOM節點的關係。以附件的文檔爲例子parentNode表示父節點，只有一個。
childNodes表示孩子節點，若是使用console.log(rootDiv.childNodes+''),觀察rootDiv語法含義，獲得[object NodeList]。
若是使用console.log(rootDiv.childNodes)觀察運行值，獲得下面輸出。文本和div都被平行當作了rootDiv的孩子，共7個。
NodeList[<TextNode textContent="\n parent\n ">, div#childQuestDiv, <TextNode textContent="\n ">, div#childHuQuanDiv, <TextNode textContent=" \n ">, div#childLiuJC, <TextNode textContent="\n\n">]
firstChild, 表示childNotes中第一個孩子
lastChild，與firstChild相對
previousSibling 表示前一個兄弟，console.log(childHuQuanDiv.previousSibling)是一個換行符，將輸出
<TextNode textContent="\n ">
nextSibling
children，只顯示html元素，不包括文本。console.log(rootDiv.children)輸出以下，只有三個成員
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#childLiuJC]
觀察node信息
nodeName，好比輸出DIV
nodeValue, 彷彿不存在?
nodeType, 是一個數字，含義以下表
尋找節點 方法一,從根節點開始，document.documentElement將返回HTML根元素，從html開始，便能遍歷到全部的元素。
方法二，使用快捷方式訪問DOM元素
document.body 指向body
document.forms 包含全部的form
document.images 包含全部的圖片
document.links 包含全部的鏈接
方法三，任意訪問節點
document.getElementById()，若是沒有，將返回null。從ie6起，即firefox等均支持，是一個基本的函數。
getElementsByTagName()，查找html元素。該函數能夠用於任何對象上(不只僅是document)，它返回的是元素的子孫中(不包括自己)tag符合條件的元素。
var rootDiv = U.$('rootDiv');
console.log(rootDiv.getElementsByTagName('DIV'));
上面兩條語句輸出
HTMLCollection[div#childQuestDiv, div#childHuQuanDiv, div#duduDiv, div#childLiuJC]
將兩個函數和並，由於getElementsByTagName()函數可用於任何對象上，因此能夠將它們合併起來，比
document.getElementById('header'). getElementsByTagName('a');
getElementsByClassName() ，ie8支持，在ie7，ie6老版本中不支持。
方法四, 使用css selector
參數是css選擇子，好比像 p>a，或則#rootDIV
querySelector(), 返回遇到的第一個元素。便可在document上調用，也可在任何object上調用。ie老版本不支持
querySelectorAll() ，返回全部的元素。便可在document上調用，也可在任何object上調用。ie老版本不支持
修改元素
元素能夠修改的屬性一般和html元素的屬性對應(?)。
- class、for
class 、for是javascript的關鍵字，因此要訪問html element的class、for屬性使用className和htmlFor。
childLiuJC.className='hightschool';
- innerText ，textContent
將元素內容用純文本替換，文本內容沒有意義。須要作object detection
- innerHTML
將元素內容用html元素替換
建立元素
- document.createElement() 建立一個元素
建立一個html 元素 <arg></arg>, arg可使任何字符串，document.createElement('myNewTag')將建立<myNewTag></myNewTag>元素。
var p = document.createElement('p');
p.innerText = 'This is some text';
p.className = 'enhanced';
- 將新建元素插入html中。insertBefore(), appendChild(), or replaceChild()
rootDiv.appendChild(p) 將把p(This is some text)插入到rootDiv的尾部
rootDiv.insertBefore(p, childHuQuanDiv);
將把p(This is some text)插入到childHuQuanDiv以前
rootDiv.replaceChild(p, childHuQuanDiv);
將替換掉childHuQuanDiv
若是僅僅添加文本，使用document.createTextNode()
var p = document.createTextNode('hello world');
rootDiv.appendChild(p);
克隆元素
- document.cloneNode()
這個函數不會拷貝內容和事件，可是會拷貝風格
var p = duduDiv.cloneNode();
rootDiv.appendChild(p);
輸出
-removeChild刪除元素
運用在父元素之上
rootDiv.removeChild(childHuQuanDiv);
尋找父元素的方法是使用parentNode屬性。
16) javascrip和css
元素的css風格均放在style成員之中，style的屬性均用駱駝法命名。style的值均被轉換爲inline style。反過來，從style屬性中讀出的值均是inline style。使用
console.log(duduDiv.style);
將會看到下列輸出
藍色數字是什麼意思呢?猜測多是枚舉變量的對應值。
- 獲取元素全部的style(可能還包括inline style風格之外)
需作跨平臺檢測，ie用currentStyle.yourSpecificStyle, 其它使用window.getComputedStyle(yourElem)。注意只能有用讀，不能寫。
- 隱藏和顯示元素
duduDiv.style.visibility = 'hidden';
duduDiv.style.visibility = 'visible';
- 查看外部css的style
document.styleSheets，書上說是列出page用到的全部style，但實驗結果爲空，不知爲什麼? P356
若是外部css文件擁有id，還可使用getElementById取得它的引用
<!-- HTML -->
<link rel='stylesheet' id='mainStyleSheet' href='style.css'>
// JavaScript:
var mainCSS = document.getElementById('mainStyleSheet');
mainCSS的成員只能，可是能失效整個css文件，如同下面語句。
mainCSS.disabled = 'disabled';
使用insertRule()函數能夠插入一條規則，可是下面語句實驗失敗，不知爲什麼?50表示規則索引號
mainCSS.insertRule('.child: {visibility: none;}', 50);
mainCSS.deleteRule(5)表示刪除索引號爲5的規則，也是實驗不能經過。
- 建立一個內置的style
可使用createElement建立一個內置的style風格。好比下列代碼
var s = document.createElement('style');
s.textContent = 'div {border:2px solid green;}';
document.body.appendChild(s);
將會把div便爲綠框
17) 文法摘要，運行值觀察，typeof類型觀察(理論建立)
console.log(), object.toString(),typeof(),比較運算中，javascript自動轉換object，爲用戶輸出有意義的值。對象包括number, boolean, string, array,object。
javascript的轉換方式影響object detection。
- number
var nbr = 93;
console.log('run value: '+nbr);
console.log('tostring: '+nbr.toString());
console.log('typeof: '+typeof(nbr));
if(93 === nbr)
console.log('=== true');
這段代碼將輸出
run value: 93
tostring: 93
typeof: number
=== true
- string
var str = 'abc';
console.log('run value: '+str);
console.log('tostring: '+str.toString());
console.log('typeof: '+typeof(str));
if('abc' === str)
console.log('=== true');
這段代碼輸出
run value: abc
tostring: abc
typeof: string
=== true
- boolean
var bl = true;
console.log('run value: '+bl);
console.log('tostring: '+bl.toString());
console.log('typeof: '+typeof(bl));
if(true === bl)
console.log('=== true');
這段代碼輸出
run value: true
tostring: true
typeof: boolean
=== true
- array
var ary = [12,56,910];
console.log('run value: '+ary);
console.log('tostring: '+ary.toString()+ ' the of toString: '+ ary.toString().length);
console.log('typeof: '+typeof(ary));
if('12,56,910' == ary)
console.log('== true');
else
console.log('== false');
這段代碼輸出以下，在比較運算中，javascript將ary轉換成了字符串'12,56,910'
run value: 12,56,910
tostring: 12,56,910 the of toString: 9
typeof: object
== true
若是將比較運算改成
if('12,56,910' === ary)
console.log('=== true');
else
console.log('=== false');
將輸出
=== false
由於等式兩邊雖然值等，可是類型並不相等。
同時將console.log('run value: '+ary)改成console.log(ary), 將獲得下面輸出
[12,56,910]
- obj
好比頁面上有一個div元素，id號爲rootDiv ，頁面佈局如附件 var rootDiv = U.$('rootDiv');
console.log('div element run value: '+rootDiv);
console.log('div element tostring: '+rootDiv.toString() + ' length: '+rootDiv.toString().length);
console.log(typeof(rootDiv));
if( '[object HTMLDivElement]' == rootDiv)
console.log('== true');
else
console.log('== false');
將輸出
div element run value: [object HTMLDivElement]
div element tostring: [object HTMLDivElement] length: 23
object
== true
toString表示的是rootDiv的語法摘要。在比較運算中javascript轉換爲了語法意義。
將'div element run value: '+rootDiv進行加法運算時候，javascript會隱含調用rootDiv的toString, 因此要觀察rootDiv的運行值，應該
這樣寫
console.log(rootDiv);
它將輸出以下運行值，讓咱們觀察到rootDiv元素的內容
<div id="rootDiv" style="border:1px solid gray;width:300px;height:300px;margin:10px;">
因此若是想觀察對象的文法意義，使用下面方式更加快捷
console.log(rootDiv+'');
- 觀察對象的文法含義
對於高級對象，若是想要觀察對象的文法摘要，使用
console.log(obj.toString());
更加快捷的書寫方式是
console.log(obj+'');
18) 定時器
javascript定時器精度爲1毫秒。同時javascript是單線程，因此沒法保證精確的時間間隔。
設置一次性定時器
setTimeout(function(){ alert('3 seconds passed');}, 3000);
3秒鐘後，將彈出對話框'3 seconds passed'
設置重複定時器
setInterval(function(){alert('5 s');},5000)
每隔5秒，均會彈出對話框，顯示'5 s'
終止重複定時器的執行 使用clearInterval函數，參數爲setInterval返回的定時器標識符號。能夠從外部終止重複定時器，也能夠從定時器內部終止定時器。從內部終止定時器便是
在定時器處理函數中寫入終止條件，這樣的好處是什麼?多是提升可讀性，在建立時候，就明確指明退出條件，避免終止命令分散在工程各處，難以尋找。
19) 函數內變量、匿名函數變量做用域研究 - 全局域中定義的函數自動成爲window的屬性
- 全局域中定義的變量自動成爲window的屬性
- 函數體中定義變量爲局部變量，當函數退出時，它們的值不會被保存，當再次進入時候，它們的值被恢復爲初始值
- 建立自定義對象
函數自己也是對象。就像普通的對象同樣，若是使用標號方式(即object.property) 向對象賦值，便是property不存在，可是通過賦值操做後property自動加入
object的屬性。因此若是在函數內使用this.property=value的方式，將自動爲函數對象加入一個屬性property。下面的代碼運行將輸出'swan'。
function drawStar()
{
this.startName= 'swan';
this.stopDraw = function(){};
}
var doIt = new drawStar();
console.log(doIt.startName);
由於javascript是基於prototype-type的oo編程語言，默認聲明的都是對象。可使用function 來加入新的自定義類，使得它像String, Number, Boolean,
Array, Object同樣使用。
20) 類的構建(javascript稱爲自定義對象)
- 使用function構建自定義對象
javascript是prototype-type型的oo語言，不能建立類。使用函數，能夠建立類系統，或者說爲javascript加入自定義類，而不只僅是系統的
定義的String，Number, Boolean, Array。
使用function的new特性，這時函數體的內容應該只放構造內容，加入成員函數，而不要放入其它東西。下面代碼建立了新類Rectangle,能夠向String同樣
用new操做符建立Rectangle對象。
var Rectangle = function(x,y,size){
this.xis = x;
this.yis = y;
this.size = size;
this.draw = function(){
console.log('rectangle drawed: (x,y)size:'+x+ ' '+y+' '+size);
}
};
var myRec = new Rectangle(100,100,30);
myRec.draw();
輸出
rectangle drawed: (x,y)size:100 100 30
一般還能夠加入自定義toString()和valueOf。toString反映語義摘要，valueOf反映值。
- 原型鏈(prototype chain)
myRec是基於Rectangle原型，而Rectangle又是基於Object，這成爲原型鏈。爲了區分一個方法是原型鏈中的仍是對象自定義的，使用hasOwnProperty方法。它返回
boolean值。
- 向原型添加方法
若是向系統已有原型如String、Array等添加要謹慎。向自定義原型添加屬性是很常見的。注意直接向函數對象賦值並不能加入原型之中，緣由暫時將其理解爲是由於它僅僅是
加入到函數對象之中。好比
Rectangle.disable = function(){console.log('disabled');}
Rectangle.disable();
將輸出
disabled
下列代碼試圖從Rectangle的對象myRec中調用disable, 將出錯，由於上面的方法不能將disable方法加入原型Rectangle之中。
Rectangle.disable = function(){console.log('disabled');}
myRec.disable();
想要修改Rectangle原型，應該使用prototype屬性
Rectangle.prototype.disable = function(){console.log('disabled added into prototype');}
var myRec = new Rectangle(100,100,30);
myRec.disable();
上面代碼將輸出
disabled added into prototype
21) 高級話題
- 危險代碼
eval(commandstring)
eval將commandstring當作命令來執行，會爲黑客開放大門，應該儘可能少用。eval("alert('hello')");會執行javascript代碼alert('hello')
- 命名空間，快捷方式
使用對象實現。
常用的技巧是使用$快速引用命名空間。
window.$=mynamespace;
$.mymember;
- 文件操做
爲了防範黑客，在javascript不能進行文件操做。FileSystemObject是ie提供的ActiveX控件，只能運行於ie瀏覽器下。
22) DOCTYPE
指明page使用的HTML版本。過去的HTML 2.0不支持table，HTML 3.2僅僅支持基本的css功能。
近來HTML最經常使用的版本是HTML 4.01和XHTML 1.0。HTML4.01和XHTML1.0均包括三種標籤
Strict、Transitional、Frameset。Strict最嚴格，是最小集合。transitional是strict加上一些過期
的元素。frameset是transitional加上frame支持。幾個經常使用的格式
<!DOCTYPE html PUBLIC 「-//W3C//DTD XHTML 1.0 Transitional//EN」 「http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>
若是html page指明瞭正確的DOCTYPE，則browser的工做模式成爲standards-compliant。若是沒有指明版本或者DOCTYPE有錯，則瀏覽器進入
Quirks mode， 瀏覽器將老版本的瀏覽器行爲來繪製page。好比ie8在Quirks mode下，使用ie5.5的方式繪製page。
火狐瀏覽器顯示了browser的工做模式。被稱爲Render Mode。tool->page info
不幸的是，在有些瀏覽器中，甚至是有效的DOCTYPE或者無效的元素也會激發瀏覽器進入Quirk mode。
因此對於跨瀏覽器，DOCTYPE和render mode很重要。
簡潔方法是使用<!DOCTYPE html>, 瀏覽器將自動選擇standard mode。但html5好像不支持這種書寫方式。
23) 啓動(啓用)javascript(downloads and load web page)
瀏覽器從服務端下載html page內容和執行javascript代碼應該是異步進行。因此須要保證整個html page下載完後才能啓動javascript。
標準的方法是將window onload作爲javascript的入口點。
window.onload = init; //init是入口函數
24) javascript strict 模式
使用strict模式告訴javascript進行更加嚴格的語法檢查。好比檢查潛在錯誤的代碼，提出錯誤報告。提升安全和性能。警告用戶將來再也不
支持的代碼。
'use strict';
能夠在腳本頂部書寫一次，也可在須要的函數體中開始處書寫。好比
function init() {
'use strict';
alert('hello');
}
.9 jQuery
0) 代碼入口
$(document).ready(function(){
alert('put code here');
}); //ie6 support
更加簡潔方式
$(function(){
alert('put code here');
}); //ie6 support
1) 定位DOM
不管id仍是class或是tag，jquery返回的老是array-like對象。對於複雜的selector，jquery執行的順序是從右向左。
選擇子功能至少支持到ie6。
$("#maincontent"); //id
$(".column"); //class
$("div"); //tag
$("p").length; //元素個數
$("p").addClass("paragraph"); //addClass將在set上操做，自動loop，爲set上全部元素執行addClass操做。
$("div.main p>li a"); //複雜的selector
2) jQury對ie支持
jqury支持ie8的最後系列爲1.X.X, 從jquery 2.0.0，再也不支持ie舊版本。在html中使用宏註釋包含正確的版本。
<!--[if lt IE 9]>
<script src="jquery-1.9.0.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="jquery-2.0.0.js"><</script>
<!--<![endif]-->
3) evet support
4) 修改元素風格
$('selector')返回的是一個array-like對象。
使用css()函數能夠取值和設置值。
- 取值，只得到array-like中第一個對象的值。
alert($('div').css('width')); //ie6
- 設置，array-like中全部的對象都將被設置
$('div').css('background-color','blue') //至少支持ie6
，可使用這種更加但是化效果
$('div').css({
"background-color":"red",
"color":"black"
}) //至少支持ie6
5) 修改元素屬性
6) 替換元素文本
使用$('selector').text()，和css()有相同的語義。當取數據時候，只能獲得第一個元素的值，當設置值時候，全部對象的值都將被設置。
text()操做的是元素中的文本屬性，若是要操做html內容，使用
$('Div').text('me') //至少支持ie6
7) 替換div中html內容
$('div').html('<div style="border:1px solid green">me</div>') //至少支持ie6
8) 事件處理
jquery中有兩種方式支持事件註冊，這兩種方式均支持ie6。在jquery1.7+版本中使用的是on方式，以前老版本使用的是click()方式。
on方式更新。和css()函數同樣，它們均做用在arry-like中的全部object之上。
$("div").on('click',function(){
alert('new event mode on')
}); //on，更新的方式jquery 1.7+支持方式。
$("div").click(function(){
alert('handler click()')
}); //,老的事件處理方式。
元素的hover常用，使用下列方法。
$("div").on("mouseenter", function() {
alert("hovered over");
}).on("mouseleave", function() {
alert("hovered out")
}); //ie6支持
若是相同的處理代碼，更快捷的方式是
$("#commandButton").on("mouseenter mouseleave", function() {
alert("hovered on or out");
}); //ie6支持
取消掉註冊的事件處理函數，使用off()。
$("div").off(); //取消掉div上全部的事件處理函數。ie6支持。
$("div").off('click'); //僅僅取消掉click事件處理函數。ie6支持。
9) 事件函數處理細節
- 在事件處理函數中獲取事件源元素信息。this
在事件處理函數有預留變量this，它是javascript對象，可是在ie不一樣版本中，它有不一樣含義。
$(this)，將把this轉變爲jquery對象。
在ie6中也支持的方法是從事件處理函數中的傳入參數中讀取event信息。在
$("div").on("click",function(myevent){
alert(myevent.target.id);
}); // ie6支持
