2015年9月30日 星期三

( 3 ) Head First HTML5 Programming 筆記 (1~5) 第三部份

1. 認識 HTML5: 歡迎來到WEB鎮
1.<!doctype html>
2. <meta charset="utf-8">
3.
<link rel="stylesheet" href="lounge.css">
4.
<script src="lounge.js"></script>
DOM:文檔對象模型(Docment Object Model )
API:應用程式接口,提供了一個對象,方法和屬性,可以用來訪問這些技術的所有功能。

先不要糾結於後面幾頁的每一個細節,我們只是希望你對JavaScript 感覺。


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>======</title>

<style type="text/css">
===
</style>
<script>
=====
</script>
</head>
<body>

<h1>===</h1>
<img scr="===.gif">
<p>=====</p>
<p>=====<em>===</em>====</p>
<script>
=====
</script>
</body>
</html>


2. 介紹 JavaScript DOM 一點點代碼 P35
變量:

使用一個字母(可以是小寫或大寫)、下劃線字符或美元符開頭。
創建多詞變量名時使用 "camel case" 記法.
聲明變量時一定要用var

變量 賦值 表達式

1
變量先設定好。
while (判斷式){
式為真時執行程式;
}
式為假時執行程式;
(例)
var scoops = 10;while (scoops > 0) {
alert("More icecream!")

scoops = scoops - 1

}

alert("life without ice cream isn't the same")

2
for (變量設定;判別式;執行的程式){
判別式為真時執行程式;
}
式為假時執行程式;
(例)
for (scoops = 10 scoops > 0 scoops--) {alert("There's more ice cream!")
}
alert("life without ice cream isn't the same")

9/30 P47  PDF(74/606)

3
if(判別式){ 判別式為真時執行程式;} else if (判別式){ 判別式為真時執行程式;} else if (判別式){
判別式為真時執行程式;} else if (判別式){ 判別式為真時執行程式;} else if (判別式){ 判別式為真時執行程式;} else{判別式為假時執行程式;} (例) if (scoops == 3) {
alert("Ice cream is running low!");
} else if (scoops > 9) {
alert("Eat faster, the ice cream is going to melt!")

} else if (scoops == 2) {
alert("Going once!")

} else if (scoops == 1) {
alert("Going twice!")

} else if (scoops == 0) {
alert("Gone!")

} else {
alert("Still lots of ice cream left, come and get it.")


document表示瀏覽器中的整個頁面;它包含完整的DOM,所以可以讓他做任何事情,比如查找一個特定id的元素。
document.getElementById("greenplant");
這裡要求documeny查找與指定id匹配的元素,從而為我們提供一個元素。
var planet = document. getElementById("greenplanet") ;
planet.innerHTML = "Red Alert: hit by phaser fire!";10/1 P64   PDF 91/606P

如何創建數組(陣列)1.
var tempByHour = new Array()

tempByHour(0)=59.2
tempByHour(1)=60.1
tempByHour(2)=63
tempByHour(3)=65
tempByHour(4)=62
2.
var tempByHour=[59.2,60.1,63,65,62];
向數組(陣列)增如另一個元素
tempByHour[5]=61;
使用數組元素
var message = "The temperature at 5 was " + tempByHour[5];
alert(message);
了解數組大小或其他

















121346

2015年9月28日 星期一

十六進制顏色 / 網頁顏色代碼對照表

十六進制顏色 / 網頁顏色代碼對照表



 
#FFFFFF #FFFFF0 #FFFFE0 #FFFF00
 #FFFAFA #FFFAF0 #FFFACD #FFF8DC
 #FFF68F #FFF5EE #FFF0F5 #FFEFDB
 #FFEFD5 #FFEC8B #FFEBCD #FFE7BA
 #FFE4E1 #FFE4C4 #FFE4B5 #FFE1FF
 #FFDEAD #FFDAB9 #FFD700 #FFD39B
 #FFC1C1 #FFC125 #FFC0CB #FFBBFF
 #FFB90F #FFB6C1 #FFB5C5 #FFAEB9
 #FFA54F #FFA500 #FFA07A #FF8C69
 #FF8C00 #FF83FA #FF82AB #FF8247
 #FF7F50 #FF7F24 #FF7F00 #FF7256
 #FF6EB4 #FF6A6A #FF69B4 #FF6347
 #FF4500 #FF4040 #FF3E96 #FF34B3
 #FF3030 #FF1493 #FF00FF #FF0000
 #FDF5E6 #FCFCFC #FAFAFA #FAFAD2
 #FAF0E6 #FAEBD7 #FA8072 #F8F8FF
 #F7F7F7 #F5FFFA #F5F5F5 #F5F5DC
 #F5DEB3 #F4F4F4 #F4A460 #F2F2F2
 #F0FFFF #F0FFF0 #F0F8FF #F0F0F0
 #F0E68C #F08080 #EEEEE0 #EEEED1
 #EEEE00 #EEE9E9 #EEE9BF #EEE8CD
 #EEE8AA #EEE685 #EEE5DE #EEE0E5
 #EEDFCC #EEDC82 #EED8AE #EED5D2
 #EED5B7 #EED2EE #EECFA1 #EECBAD
 #EEC900 #EEC591 #EEB4B4 #EEB422
 #EEAEEE #EEAD0E #EEA9B8 #EEA2AD
 #EE9A49 #EE9A00 #EE9572 #EE82EE
 #EE8262 #EE7AE9 #EE799F #EE7942
 #EE7621 #EE7600 #EE6AA7 #EE6A50
 #EE6363 #EE5C42 #EE4000 #EE3B3B
 #EE3A8C #EE30A7 #EE2C2C #EE1289
 #EE00EE #EE0000 #EDEDED #EBEBEB
 #EAEAEA #E9967A #E8E8E8 #E6E6FA
 #E5E5E5 #E3E3E3 #E0FFFF #E0EEEE
 #E0EEE0 #E0E0E0 #E066FF #DEDEDE
 #DEB887 #DDA0DD #DCDCDC #DC143C
 #DBDBDB #DB7093 #DAA520 #DA70D6
 #D9D9D9 #D8BFD8 #D6D6D6 #D4D4D4
 #D3D3D3 #D2B48C #D2691E #D1EEEE
 #D1D1D1 #D15FEE #D02090 #CFCFCF
 #CDCDC1 #CDCDB4 #CDCD00 #CDC9C9
 #CDC9A5 #CDC8B1 #CDC673 #CDC5BF
 #CDC1C5 #CDC0B0 #CDBE70 #CDBA96
 #CDB7B5 #CDB79E #CDB5CD #CDB38B
 #CDAF95 #CDAD00 #CDAA7D #CD9B9B
 #CD9B1D #CD96CD #CD950C #CD919E
 #CD8C95 #CD853F #CD8500 #CD8162
 #CD7054 #CD69C9 #CD6889 #CD6839
 #CD661D #CD6600 #CD6090 #CD5C5C
 #CD5B45 #CD5555 #CD4F39 #CD3700
 #CD3333 #CD3278 #CD2990 #CD2626
 #CD1076 #CD00CD #CD0000 #CCCCCC
 #CAFF70 #CAE1FF #C9C9C9 #C7C7C7
 #C71585 #C6E2FF #C67171 #C5C1AA
 #C4C4C4 #C2C2C2 #C1FFC1 #C1CDCD
 #C1CDC1 #C1C1C1 #C0FF3E #BFEFFF
 #BFBFBF #BF3EFF #BEBEBE #BDBDBD
 #BDB76B #BCEE68 #BCD2EE #BC8F8F
 #BBFFFF #BABABA #BA55D3 #B9D3EE
 #B8B8B8 #B8860B #B7B7B7 #B5B5B5
 #B4EEB4 #B4CDCD #B452CD #B3EE3A
 #B3B3B3 #B2DFEE #B23AEE #B22222
 #B0E2FF #B0E0E6 #B0C4DE #B0B0B0
 #B03060 #AEEEEE #ADFF2F #ADD8E6
 #ADADAD #ABABAB #AB82FF #AAAAAA
 #A9A9A9 #A8A8A8 #A6A6A6 #A52A2A
 #A4D3EE #A3A3A3 #A2CD5A #A2B5CD
 #A1A1A1 #A0522D #A020F0 #9FB6CD
 #9F79EE #9E9E9E #9C9C9C #9BCD9B
 #9B30FF #9AFF9A #9ACD32 #9AC0CD
 #9A32CD #999999 #9932CC #98FB98
 #98F5FF #97FFFF #96CDCD #969696
 #949494 #9400D3 #9370DB #919191
 #912CEE #90EE90 #8FBC8F #8F8F8F
 #8EE5EE #8E8E8E #8E8E38 #8E388E
 #8DEEEE #8DB6CD #8C8C8C #8B8B83
 #8B8B7A #8B8B00 #8B8989 #8B8970
 #8B8878 #8B8682 #8B864E #8B8386
 #8B8378 #8B814C #8B7E66 #8B7D7B
 #8B7D6B #8B7B8B #8B795E #8B7765
 #8B7500 #8B7355 #8B6969 #8B6914
 #8B668B #8B6508 #8B636C #8B5F65
 #8B5A2B #8B5A00 #8B5742 #8B4C39
 #8B4789 #8B475D #8B4726 #8B4513
 #8B4500 #8B3E2F #8B3A62 #8B3A3A
 #8B3626 #8B2500 #8B2323 #8B2252
 #8B1C62 #8B1A1A #8B0A50 #8B008B
 #8B0000 #8A8A8A #8A2BE2 #8968CD
 #87CEFF #87CEFA #87CEEB #878787
 #858585 #848484 #8470FF #838B8B
 #838B83 #836FFF #828282 #7FFFD4
 #7FFF00 #7F7F7F #7EC0EE #7D9EC0
 #7D7D7D #7D26CD #7CFC00 #7CCD7C
 #7B68EE #7AC5CD #7A8B8B #7A7A7A
 #7A67EE #7A378B #79CDCD #787878
 #778899 #76EEC6 #76EE00 #757575
 #737373 #71C671 #7171C6 #708090
 #707070 #6E8B3D #6E7B8B #6E6E6E
 #6CA6CD #6C7B8B #6B8E23 #6B6B6B
 #6A5ACD #698B69 #698B22 #696969
 #6959CD #68838B #68228B #66CDAA
 #66CD00 #668B8B #666666 #6495ED
 #63B8FF #636363 #616161 #607B8B
 #5F9EA0 #5E5E5E #5D478B #5CACEE
 #5C5C5C #5B5B5B #595959 #575757
 #556B2F #555555 #551A8B #54FF9F
 #548B54 #545454 #53868B #528B8B
 #525252 #515151 #4F94CD #4F4F4F
 #4EEE94 #4D4D4D #4B0082 #4A708B
 #4A4A4A #48D1CC #4876FF #483D8B
 #474747 #473C8B #4682B4 #458B74
 #458B00 #454545 #43CD80 #436EEE
 #424242 #4169E1 #40E0D0 #404040
 #3D3D3D #3CB371 #3B3B3B #3A5FCD
 #388E8E #383838 #36648B #363636
 #333333 #32CD32 #303030 #2F4F4F
 #2E8B57 #2E2E2E #2B2B2B #292929
 #282828 #27408B #262626 #242424
 #228B22 #218868 #212121 #20B2AA
 #1F1F1F #1E90FF #1E1E1E #1C86EE
 #1C1C1C #1A1A1A #191970 #1874CD
 #171717 #141414 #121212 #104E8B
 #0F0F0F #0D0D0D #0A0A0A #080808
 #050505 #030303 #00FFFF #00FF7F
 #00FF00 #00FA9A #00F5FF #00EEEE
 #00EE76 #00EE00 #00E5EE #00CED1
 #00CDCD #00CD66 #00CD00 #00C5CD
 #00BFFF #00B2EE #009ACD #008B8B
 #008B45 #008B00 #00868B #00688B
 #006400 #0000FF #0000EE #0000CD
 #0000AA #00008B #000080 #000000
資料來源:http://mail.lsps.tp.edu.tw/~gsyan/notes/color.htm

( 1 ) Head First HTML 與 CSS XHTML 筆記

1. ( 1 開始了解 HTML WEB語言 )
<html>
<head>
<title>Head first lounge<title>
<img scr="Drinks.jpg>
</head>
<body>
<h1> Welcom to the head first lounge </h1>
<p>......<a href="qq/qq1.html> 一個鏈接</a> ..............<em>斜體字</em>    </p>
<h2>                      </h2>
<p>.......<a href="...../123.html>鏈接提示</a>.......... </p>
</body>
</html>
<!--會忽略此段內容-->
2. 認識樣式元素  (CSS)
     a. <style> ==>
<style type="text/css">....放頁面樣式...</style> <!--放在<head> 中 <title> 後-->
         body {
                    background-color: #d2b48c;  <!--顏色參考-->
                    margin-left: 20%;   <!--左邊留20%空間-->
                    margin-right: 20%;   <!--右邊留20%空間;本體用60%空間-->
                    border: 1px dotted gray;   <!--框線粗細與顏色-->
                    padding: 10px 10px 10px 10px; <!--字體距框線距離-->
                    font-family: sans-serif;
         }


9/29-P32 PDF/P33

2. 認識HTML中的"HT":深入了解超文本 P43
<style type="text/css">
<a href="irhle.html">irhle.html</a>
<img scr="sweetphoto.gif>

href ( hypertext reference )
hypertext:超文本
reference:參考

3. 創建網頁:構建模塊 P77
<q>  ==>雙引號

9/30 P88 PDF/P126











































123

2015年9月25日 星期五

( 2 ) JavaScript. The Definitive Guide ( 第 1~2 章 )

第 1 章 JavaScript 概述
JavaScript 是面向 Web 的編程語言。
JavaScript也是前端開發工程師必須掌握的三種技能之-,描述網頁內容的 HTML 、描述網頁樣式 CSS 以及描述網頁行為的 JavaScript 。
JavaScript 語言核心針對文本數組日期正則表達式的操作定義了很少的 API

1.1 JavaScript 語言核心
//所有在雙斜線之後的內容都屬於注釋
//變量是表示值的一個符號名字
//變量是通過 var 關鍵字聲明的
var x; //聲明一個變量
//值可以通過等號賦值給變量
X = 0; //現在變量 的值為。
X // => 0:通過變量獲取其值

// JavaScript 支持多種數據類型
X = 1; //數字
X = 0.01; //整數和實數共用一種數據類型
X = "hello world"; //由雙引號內的文本構成的字符串
X ='JavaScript'; //單引號內的文本同樣構成字符串
X = true;//布爾值
X = false; //另一個布爾值
X = null; // null 是一個特殊的值,意思是"空"
X = undefined; // undefined null 非常類似

JavaScript 中兩個非常重要的數據類型是對象數組

對象用花括號

//對象是名/值對的集合,或字符串到值映射的集合

var book = {                     //對象是由花括號括起來的
      topic:"JavaScript" , //屬性 "topic" 的值是JavaScript"
     fat: true                    //屬性 "fat" 的值是 true
};                                  //右花括號標記了對象的結束


數組用用中括號

primes[4] = 9;               //通過賦值來添加新元素
primes[4] = 11;             //或通過賦值來改變已有的元素
var empty = [ ];            // []是空數組,它具有0個元素
empty.length                //==> 0

//數組和對象中都可以包含另一個數組或對象:

var points = [              //具有兩個元素的數組
    {x: 0, y:0},            //每個元素都是一個對象
    {x: 1, y:1}
];
var data = {                         //一個包含兩個屬性的對象
    trial1:[[1 , 2] , [3 , 4]] ,  //每一個屬性都是數組
    tria12: [[2 , 3] , [4 , 5]]   //數組的元素也是數組
};

通過方括號定義數組元素和通過花括號定義對象屬性名和屬性值之間的映射關係的語法稱為初始化表達式 (initializer expression)



























123456

2015年9月24日 星期四

( 2 ) JavaScript. The Definitive Guide ( 第 7~8 章 )

第7章 數組
數組是值的有序集合。每個值叫做一個元素,而每個元素在數組中有一個位置,以數字表示,稱為索引。數組元素可以是任意類型。數組的元素甚至也可能是對象或其他數組,這允許創建複雜的數據結構,如對象的數組和數組的數組。

7.1 創建數組
1. 使用數組直接量是創建數組最簡單的方法,在方括號中將數組元素用逗號隔開即可。
var empty = [];                        //沒有元素的數組
var primes = [2 , 3, 5, 7, 11];  //有 個數值的數組
var misc = [ 1.1 , true, "a" , ]; // 個不同類型的元素和結尾的逗號
var base = 1024;
var table = [base , base+1 , base+2 , base+3]; 
var b = [[1 , {X:1 , y:2}] , [2 , {X:3 , y:4}]];
var count = [1 ,, 3];               //數組有 個元素,中間的那個元素值為 undefined
var undefs = [,,];                   //數組有 個元素,都是 undefined
2. 構造函數 Array( ) 是創建數組的另一種方法。
a. 調用時沒有參數   var a = new Array( );
b. 調用時有一個數值參數,它指定長度:var a = new Array(10)
c. 顯式指定兩個或多個數組元素或者數組的一個非數值元素:var a = new Array(5 , 4, 3, 2, 1 , "testing, testing")
7.2 數組元素的讀和寫
使用[ ]操作符來訪問數組中的一個元素。數組的引用位於方括號的左邊。方括號中是一個返回非負整數值的任意表達式。使用該語法既可以讀又可以寫數組的一個元素。

7.3 稀疏數組
稀疏數組就是包含從0開始的不連續索引的數組。

7.4 數組長度
每個數組有一個 length 屬性,length 屬性值代表數組中元素的個數。

7.5 數組元素的添加和刪除
添加
Case1:
a = [ ] //開始是一個空數組
a[0] = "zero"; //然後向其中添加元素
a[l] = "one";

Case2:
a = [ ]; / /開始是一個空數組
a.push("zero") //在末尾添加一個元素。 = ["zero"]
a.push("one", "two") //再添加兩個元素。 = ["zero ", "one" , "two"]

刪除
a = [1 , 2, 3];
delete a[l];   // 在索引 的位置不再有元素
1 in a              // => false: 數組索引 並未在數組中定義
a.length          // => 3:delete 操作並不影響數組長度
如果從數組中刪除一個元素,它就變成稀疏數組。

7.6 數組遍歷
使用 for 循環是遍歷數組元素最常見的方法:

var keys = object.keys(0);                    //獲得0對象屬性名組成的數組
var values = []                                      //在數組中存儲匹配屬性的值
for(var i = 0; i < keys.length; i++) {    //對於數組中每個索引
var key = keys[i];                              //獲得索引處的鍵值 /
values[i] = o[key];                            //在 values 數組中保存屬性值
}
<尚有許多資料;待全部粗看一遍後再回來看>

7.7 多維數組
JavaScript 不支持真正的多維數組,但可以用數組的數組來近似。
//創建一個多維數組
var tab1e = new Array(10); //表格有10行
for(var i = 0 i < tab1e.1ength i++)
tab1e[i] = new Array(10) //每行有 10列
//初始化數組
for(var row = 0 row < tab1e.1ength row++) {
for(col = 0 col < tab1e[row].lengthcol++) {
tab1e[row][col] = row*col
//使用多維數組來計算(查詢)5*7

var product = tab1e[5][7] // 35

7.8 數組方法
7.8.1 join( ) -- Array.join( ) 將數組中所有元素都轉化為字符串井連接在一起,返回最後生成的字符串。
可以指定一個可選的字符串在生成的字符串中來分隔數組的各個元素。如果不指定分隔符,默認使用逗號。如
var a = [1 , 2, 3]; //創建一個包含三個元素的數組
a.join(); // =>"1,2,3"
a.join(" "); // => "1 2 3"
a.join(""); // => "123"
var b = new Array(10); //長度為 10 的空數組
b.join('-') // => '---------': 9個連字號組成的字符串
Array.join( ) 方法是 String.split( ) 方法的逆向操作,後者是將字符串分割成若干塊來創建一個數組。

7.8.2 reverse( ) --  Array.reverse( ) 
將數組中的元素顛倒順序,返回逆序的數組。它採取了替換;換句話說,它不通過重新排列的元素創建新的數組,而是在原先的數組中重新排列它們。例如,
var a = [1 , 2, 3];
a.reverse().join()    // => "3,2,1" ,並且現在的a是 [3,2,1]

7.8.3 sort( )
將數組中的元素排序井返回排序後的數組
var a = new Array("banana" , "cherry""apple");
a.sort();

var s = a.join(""); // 5 == "applebananacherry"
如果數組包含 undefined 元素,它們會被排到數組的尾部。

7.8.4 concat( )
創建井返回一個新數組,它的元素包括調用 concat() 的原始數組的元素和 concat() 的每個參數。如果這些參數中的任何一個自身是數組,則連接的是數組的元素,而非數組本身。但要注意, concat() 不會遞歸扁平化數組的數組。concat()不會修改調用的數組。

var a = [1 , 2, 3];
a.concat(4, 5)//返回 [1,2,3,4,5]
a.concat([4, 5]);//返回 [1,2,3,4,5]
a.concat([4, 5] , [6 , 7])//返回 [1,2,3,4,5,6,7]
a.concat(4, [5 , [6 , 7]])//返回 [1,2,3,4,5,[6,7]]

9/26 P153 PDF/P165

7.8.5 slice()
它的兩個參數分別指定了片段的開始和結束的位置。
var a = [1 , 2, 3, 4, 5];
a.slice(O, 3); //返回 [1 3]
a.slice(3); //返回 [4 5]
a.slice(l, -l); //返回 [2 4]
a.slice(-3 , -2); //返回 [3] 而 -3 指定了倒數第三個元素。

7.8.6 splice()
splice() 能夠從數組中刪除元素、插入元素到數組中或者同時完成這兩種操作。在插入或刪除點之後的數組元素會根據需要增加或減小它們的索引值,因此數組的其他部分仍然保持連續的。 splice() 的第一個參數指定了插入和(或)刪除的起始位置。第二個參數指定了應該從數組中刪除的元素的個數。如果省略第二個參數,從起始點開始到數組結尾的所有元素都將被刪除。 splice() 返回一個由刪除元素組成的數組,或者如果沒有刪除元素就返回一個空數組。
var a = [12345678];
a.splice(4); // 返回 [5678]; a 是 [1234]
a.splice(12); // 返回 [2,3]; a 是 [14]
a.splice(11); // 返回 [4]; a 是 [1]

splice() 的前兩個參數指定了需要刪除的數組元素。緊隨其後的任意個數的參數指定了需要插入到數組中的元素,從第一個參數指定的位置開始插入。例如:
var a = [1,2345]
a.splice(2
0'a''b') // Returns [ ]; a is [1,2'a''b'345]
a.splice(2
2[12]3) // Returns ['a''b']; a is [12[12]3345]
7.8.7 push()和 pop()
push() pop() 方法允許將數組當做棧來使用。 push() 方法在數組的尾部添加一個或多個元素,井返回數組新的長度。 pop() 方法則相反 它刪除數組的最後一個元素,減小數組長度井返回它刪除的值。
var a = [ ];               // a:[ ]
a.unshift(1)
;            // a[1] Returns1
a.unshift(22)
;          // a[221] Returns 2
a.shift()
;                  // a[1] Returns 22
a.unshift(3,[4,5])
// a[3[45]1] Returns 3
a.shift()
                 // a[[45]1] Returns 3
a.shift()
;                 // a[1] Returns[45]
a.shift()
;                 // a[ ] Returns 1































































123456

2015年9月22日 星期二

( 2 ) JavaScript. The Definitive Guide ( 第 5~6 章 )

第5章 語句

語句 (statement) 就是 JavaScript句或命令。正如英文是用句號作結尾來分隔語句, JavaScript 語句是以分號結束。

5.1 表達式語句
具有副作用的表達式是 JavaScript 中最簡單的語句。這類語句已經在第4章講述了。賦值語句是一類比較重要的表達式語句。


5.2 複合語旬和空語句
可以用逗號運算符將幾個表達式連接在一起,形成一個表達式,同樣, JavaScript 中還可以將多條語句聯合在一起,形成一條複合語句 (compound statement) 。只須用花括號將多條語句括起來即可。

5.3 聲明語句
var和function 都是聲明語句,它們聲明或定義變量或函數。這些語句定義標識符(變量名和函數名)井給其賦值,這些標識符可以在程序中任意地方使用。

5.3.1 var
var語句用來聲明一個或者多個變量,它的語法如下:
var name_l [ = value_1] [ ,..., name_n [= value_n]]

vari;//一个简单的变量
var j=0;//一个带有初始值的变量
var p,q;//两个变量
var greeting="hello"+name;//更复杂的初始化表达式
var x=2.34,y=math.cos(0.75),r,theta;//很多变量
var x=2,y=x*x;//第二个变量使用了第一个变量
var x=2,//更多变量
f = function(x) { return x*x },//每一个变量都独占一行
y = f(x);

5.3.2 function
關鍵字 function 用來定義函數。函數定義也可以寫成語句的形式。
語法如下:
function funcname([argl [, arg2 [..., argn]]]) {statement

}
1. 函數名之後的圓括號中是參數列表,參數之間使用逗號分隔。當調用函數時,這些標識符則指代傳入函數的實參。
function hypotenuse(x, y) {return Math.sqrt(x*x + y*y);
}
2. 函數體是由 JavaScript 語句組成的,語句的數量不限,且用花括號括起來。在定義函數肘,並不執行函數體內的語句,它和調用函數時待執行的新函數對象相關聯。注意,function語句裡的花括號是必需的。
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
5.4 條件語句
條件語句是通過判斷指定表達式的值來決定執行還是跳過某些語句。這些語句是代碼的"決策點",有時稱為"分支"。如果說 JavaScript 解釋器是按照代碼的"路徑"執行的,條件語句就是這條路徑上的分叉點,程序執行到這裡時必須選擇其中一條路徑繼續執行。

5.4.1 if
這種語句有兩種形式,
第一種是:
if (expression)
     statement


if (username == null)     //如果 username null 或者 undefined
username = "John Doe";    //對其進行定義

if 關鍵字和帶圓括號的表達式之後必須跟隨一條語句,但可以使用語句塊將多條語句合井成一條。
if (!address) {
address = "";
message = "Please specify a mailing address.";

}


第二種是:
if (expression)
     statement1
else
     statement2
--------------------------------------------
if (n == 1)
     console.log("You have 1 new message.");
else
     console.log("You have " + n + " new messages.");
--------------------------------------------

5.4.2 else if
它由多條 if 語句組成,每條 if 語句的 else 從句又包含另外一條 if 語句。
--------------------------------
if (n == 1) {
     //執行代碼塊 1
}
else if (n == 2) {
     //執行代碼塊 2
}
else if (n == 3) {
     //執行代碼塊 3
}
else {
     //之前的條件都為 false. 則執行這裡的代碼塊 4
}
-----------------------------------
if (n == 1) {
     //執行代碼塊1
}
else {
     if (n == 2) {
          //執行代碼塊2
     }
     else {
     if (n == 3) {
        //執行代碼塊3
     }
     else {
          //如果所有的判斷都是 false ,執行代碼塊4
    }
  }
}

5.4.3 switch
當所有的分支部依賴於同一個表達式的值時,執行這條 switch語句的時候,它首先計算 expression 的值,然後查找 case子句中的表達式是否和 expression 的值相同。如果找到匹配的 case ,那麼將會執行這個 case 對應的代碼塊。

switch(n) {
case 1:     //如果 === 1 ,從這裡開始執行
//執行代碼塊 1
break;     //停止執行 switch 語句
case 2:     //如果 === 2,從這裡執行
//執行代碼塊 2
break;     //在這裡停止執行 switch 語句
case 3:     //如果 === 3,從這裡執行
//執行代碼塊 3
break;     //在這裡停止執行 switch 語句
default:    //如果所有的條件都不匹配
//執行代碼塊 4
break;     //在這裡停止執行 switch 語句

如果在函數中使用 switch 語句,可以使用 return 來代替break. return break 都用於終止 switch 語句,也會防止一個 case 語句塊執行完後繼續執行下一個 case 語句塊。

下面的 switch 語句的例子更加貼近實戰,它根據值的類型將該值轉換為字符串
function convert(x) {
   switch(typeof x) {
      case 'number':            // 將數字轉換為十六進制數
         return x.toString(16);
      case 'string':            // 返回兩端帶雙引號的字符串
         return '"' + x + '"';
      default:                  // 使用普通的方法轉換其他類型
         return Stri (x);
      }
}

5.5 循环
循環語句(looping statement) 就是程序路徑的一個回路,可以讓一部分代碼重複執行。
有四種循環語句:while、do/while、for和for/in 。

5.5.1 while
語法如下:
while (expression)
           statement
在執行 while 語句之前, JavaScript 解釋器首先計算 expression 的值,如果它的值是假值,那麼程序將跳過循環體中的邏輯 statement 轉而執行程序中的下一條語句。反之,如果表達式 expression 是真值, JavaScript 解釋器將執行循環體內的邏輯,然後再次計算表達expression 的值,這種循環會一直繼續下去,直到 expression 的值為假值為止。換一種說法就是當表達式 expression 是真值時則循環執行 statement 注意,使用 while(true)則會創建一個死循環。

5.5.2 do/while
語法如下:
do
statement
while (expression)
do/while 循環井不像while循環那麼常用。

5.5.3 for
語法如下:
for(initialize ; test ; increment)
statement
(例)
for(var count =0;count <10; count++)
console.log(count);
(例)
var i,j;
for(i=0,j=10;i<10;i++,j--)
sum +=i*j;

5.5.4 for/in
語法如下:
for (variable in object)
       statement
variable通常是一個變量名,也可以是一個可以產生左值的表達式或者一個通過 var 語句聲明的變量,總之必須是一個適用於賦值表達式左側的值。
object 是一個表達式,這個表達式的計算結果是一個對象。
statement 是一個語句或語句塊,它構成了循環的主體。

for(var p in 0)        //將屬性名字賦值給變量
console.log(o[p]);     //輸出每一個屬性的值

在執行 for/in 語旬的過程中, JavaScript 解釋器首先計算 object 表達式。如果表達式為null 或者 undefined JavaScirpt 解釋器將會跳過循環井執行後續的代碼也。如果表達式等於一個原始值,這個原始值將會轉換為與之對應的包裝對象 (wrapper object) (見 3.6節)。否則, expression 本身已經是對象了。 JavaScript 會依次枚舉對象的屬性來執行循環。然而在每次循環之前, JavaScript 都會先計算 variable 表達式的值,井將屬性名(一個字符串)賦值給它。

5.6 跳转
使得JavaScript 的執行可以從一個位置跳轉到另一個位置。
break 語句是跳轉到循環或者其他語句的結束。可使用標籤語句 
continue 語句是終止本次循環的執行井開始下一次循環的執行。可使用標籤語句
return語句讓解釋器跳出函數體的執行,井提供本次調用的返回值。
throw 語句觸發或者"拋出"一個異常,它是與 try/catch/finally 語句一同使用的,這些語句指定了處理異常的代碼邏輯。

5.6.1 標籤語句
語句是可以添加標籤的,標籤是由語句前的標識符和冒號組成:
identifier:statement
識別碼       聲明
可以在循環體內部使用 break continue 來退出循環或者直接跳轉到下一個循環的開始。 break 軍日 continue JavaScript 中唯一可以使用語句標籤的語句。
mainloop: while(token 1= null) {
//忽略這裡的代碼...
continue mainloop; //跳轉到下一次循環
//忽略這裡的代碼...
}

5.6.2 break 語句
單獨使用 break 語句的作用是立即退出最內層的循環或 switch 語句。它的語法如下:
break;
允許 break 關鍵字後面跟隨一個語句標籤(只有標識符,沒有冒號)

5.6.3 continue 語句
continue 語句同樣可以帶有標籤
continue labelname;

5.6.4 return 語句
語法如下:
return expression

              表達


5.6.5 throw 語句
所謂異常 (exception) 是當發生了某種異常情況或錯誤時產生的一個信號。
語法如下:
throw expression

5.6.6 try/catch/finally 語句
其中 try 從句定義了需要處理的異常所在的代碼塊。 catch 從句跟隨在 try 從句之後,當 try 塊內某處發生了異常肘,調用catch 內的代碼邏輯。 catch 從句後跟隨 finally 塊,後者中放置清理代碼,不管 try 塊中是否產生異常, finally 塊內的邏輯總是會執行。儘管 catch finally 都是可選的,但try 從句需要至少二者之一與之組成完整的語句。 try catch finally 語句塊都需要使用花括號括起來,這裡的花括號是必需的,即使從句中只有一條語句也不能省略花括號。

5.7 其他語句類型
剩餘的三種 JavaScript 語句 -- width、debugger和 use strict

5.7.1 with 語句
語法如下:
with (object)
statement
這條語句將 object 添加到作用域鏈的頭部,然後執行 statement 最後把作用域鏈恢復到原始狀態。在嚴格模式中是禁止使用 with 語句的,井且在非嚴格模式裡也是不推薦使用 with 語句的,盡可能避免使用 with 語句。

5.7.2 debugger 語句
debugger 語句通常什麼也不做。

實際上,這條語句用來產生一個斷點 (breakpoint) ,JavaScript 代碼的執行會停止在斷點的位置,這時可以使用調試器輸出變量的值、檢查調用等。

5.7.3 "use strict"

5.8 JavaScript 語句小結


語句
語法
用途
1
break
break [label]j
退出最內層迴圈或者退出 switch
旬,又或者退出 label 指定的語句
2
case
case expresslon:
switch 語句中標記一條語句
3
continue
continue [label]
重新開始最內層的迴圈或重新開始
label
指定的迴圈
4
debugger
debugger;
中斷點器調試
5
default
default;
switch 中標記預設的語句
6
do/while
do statement while(expression);
while 迴圈的一種替代形式
7
empty
;
什麼都不做
8
for
for(initjtestjincr)statement
一種簡寫的迴圈
9
for/in
for(var in object)statement
遍歷一個物件的屬性
10
function
function name([param[] ...]){body}
聲明一個函數
11
if/else
if(expr)statementl [else statement2]
執行 statemen t1 或者 statement2
12
label
label:statement
statement 指定一個名字 label
13
return
return [expression]
從函數返回一個值
14
switch
switch(expression){statements}
case 或者 "default:" 語句標記的
多分支語句
15
throw
throw expression;
拋出異常
16
try
try {statements}
[catch {handler statements}]
[finally {cleanup statements}]
捕獲異常
17
use strict
"use strict"
對腳本和函數應用嚴格模式
18
var
var name=[=expr][,...];
聲明並初始化一個或多個變數
19
while
while(expression) statement
基本的迴圈結構
20
with
with(object) statement
擴展作用域鏈(不贊成使用)


label
標籤
expresslon
表達
default
默認
statement
聲明
empty
object
對象
catch
handler
處理程序
finally
最後
cleanup
淨化
strict
嚴格
throw


第6章 對象 
它將很多值(原始值或者其他對象)聚合在一起,可通過名字訪問這些值。對象也可看做是屬性的無序集合,每個屬性都是一個名/值對。屬性名是字符串,因此我們可以把對象看成是從字符串到值的映射。

對象還可以從一個稱為原型的對象繼承屬性。對象的方法通常是繼承的屬性。

6.1 創建對象
可以通過對象直接量、關鍵字 new (ECMAScript 中的) Object.create() 函數來創建

6.1.1 對象直接量
對象直接量是由若干名/值對組成的映射表,名/值對中間用冒號分隔,名/值對之間用逗號分隔,整個映射表用花括號括起來。

6.1.2 通過 new 創建對象
關鍵字 new 後跟隨一個函數調用。這裡的函數稱做構造函數 (constructor) ,構造函數用以初始化一個新創建的對象。 JavaScript 語言核心中的原始類型都包含內置構造函數
例如:
var 0 = new Object();        //創建一個空對象,和{}一樣
var a = new Array();          //創建一個空數組,和[ ]一樣
var d = new Date();           //創建一個表示當前時間的 Date 對象
var r = new RegExp("js");//創建一個可以進行模式匹配的 EegExp 對象

6.1.3 原型
每一個 JavaScript 對象(null 除外)都和另一個對象相關聯。"另一個"對象就是我們熟知的原型,每一個對象都從原型繼承屬性。

井可以通過 JavaScript 代碼bject.prototype 獲得對原型對象的引用。

6.1.4 Object. create()
它創建一個新對象,其中第一個參數是這個對象的原型。

Object.create() 是一個靜態函數,而不是提供給某個對象調用的方法。使用它的方法很簡單,只須傳入所需的原型對象即可:
var 01 = Object.create({X:1 , y:2}); //01繼承了屬性x和y

6.2 屬性的查詢和設置
可以通過點(.)或方括號([ ])運算符來獲取屬性的值。運算符左側應當是一個表達式,它返回一個對象。對於點(.)來說,右側必須是一個以屬性名稱命名的簡單標識符。對於方括號來說([ ]),方括號內必須是一個計算結果為字符串的表達式,這個字符串就是屬性的名字:

var author = book.author; //得到 book "author" 屬性
var name = author.surname //得到獲得 author "surname" 屬性
var title = book["main title"]// 得到 book "main title" 屬性

和查詢屬性值的寫怯一樣,通過點和方括號也可以創建屬性或給屬性賦值,但需要將它們放在賦值表達式的左側

book.edition = 6; //給 book 創建一個名為 "edition" 的屬性
book["main title"] = "ECMAScript"; //給 "main title" 屬性賦值

6.2.1 作為關聯數組的對象
??

6.2.2 繼承
??

6.2.3 屬性訪問錯誤
??

6.3 删除属性
delete運算符可以刪除對象的屬性。
語法如下:
delete book.author; // book 不再有屬性 author

delete book[ "main title"l; / / book 也不再有屬性 "main title"

6.4 檢測屬性
以通過 in 運算符、 hasOwnPreperty()和propertyIsEnumerable() 方法來完成這個工作。
語法如下:
var 0 = { x: 1 }
"X" in 0;        // true: "x" 的属性
"y" in 0;        // false: "y" 不是口的属性
"toString" in 0; // true: 继承 toString 属性

6.5 枚舉屬性
除了檢測對象的屬性是否存在,我們還會經常遍歷對象的屬性。通常使用 for/in 循環遍歷, ECMAScript 提供了兩個更好用的替代方案。
var 0 = {X:l, y:2 , z:3};                      //三個可枚舉的自有屬性
o.propertyIsEnumerable("toString")    // =>false. 不可枚舉
for(p in 0)                                             //遍歷屬性
console.log(p);                                  //輸出x,y和z,不會輸出 toString

6.6 屬性 getter和setter
我們知道,對象屬性是由名字、值和一組特性 (attribute) 構成的。屬性值可以用一個或兩個方法替代,這兩個方陸就是 getter和setter 。由 getter和setter 定義的屬性稱做"存取器屬性" (accessor property) ,它不同於"數據屬性" (data property) ,數據屬性只有一個簡單的值。

6.7 屬性的特性
除了包含名字和值之外,屬性還包含一些標識它們可寫可枚舉可配置的特性
查詢和設置這些屬性特性的 API 。這些 API 對於庫的開發者來說非常重要,因為:可以通過這些 API 給原型對象添加方法,井將它們設置成不可枚舉的,這讓它們看起來更像內置方法。可以通過這些 API 給對象定義不能修改或刪除的屬性,借此"鎖定"這個對象。

我們將存取器屬性的 getter和setter 方法看成是屬性的特性。按照這個邏輯,我們也可以把數據屬性的值同樣看做屬性的特性。因此,可以認為一個屬性包含一個名字和 個特性。數據屬性的4個特性分別是它的值 (value) 可寫性 (writable)可枚舉性 (enumerable)可配置性 (configurable) 。存取器屬性不具有值( value) 特性和可寫性,它們的可寫性是由 setter 方怯存在與否決定的。因此存取器屬性的4個特性是讀(get) 、寫入 (set) 、可枚舉性和可配置性。

數據屬性的描述符對象的屬性有 value、writable、enumerable、configurable 。存取器屬性的描述符對象則用 get 屬性和 set 屬性代替 value和writable 。其中 writable、enumerable和configurable 都是布爾值,當然, get 屬性和set 屬性是函數值。

9/29

6.8 對象的三個屬性
每一個對象都有與之相關的原型 (prototype) 、類 (class) 和可擴展性 (extensible attribute) 。

6.8.1 原型屬性
通過 Object.create() 創建的對象使用第一個參數(也可以是 null) 作為它們的原型。

6.8.2 類屬性
對象的類屬性 (class attribute) 是一個字符串,用以表示對象的類型信息。

6.8.3 可擴展性
對象的可擴展性用以表示是否可以給對象添加新屬性。

6.9 序列化對象
將對象的狀態轉換為字符串,也可將字符串還原為對象。
內置函數 JSON.stringify()和JSON.parse() 用來序列化和還原JavaScript 對象。

6.10 對象方法

6.10.1 toString() 方法
toString() 方法沒有參數,它將返回一個表示調用這個方法的對象值的字符串。在需要將對象轉換為字符串的時候, JavaScript 都會調用這個方法。

6.10.2 toLocaleString() 方法
除了基本的 toString() 方法之外,對象都包含 toLocaleString() 方法,這個方法返回一個表示這個對象的本地化字符串。 Object 中默認的 toLocaleString() 方法並不做任何本地化自身的操作,它僅調用 toString() 方法井返回對應值。

6.10.3 toJSON() 方法
Object.prototype 實際上沒有定義 toJSON() 方法,但對於需要執行序列化的對象來說, JSON.stringify() 方法會調用 toJSON() 方法。

6.10.4 valueOf() 方法
需要將對象轉換為某種原始值而非字符串的時候才會調用它,尤其是轉換為數字的時候。























123456