3.1 Web(萬維網(wǎng))

• web原理：服務(wù)器可客戶端（瀏覽器）之間的對話
• 客戶端：連接到服務(wù)器并發(fā)送請求
• 服務(wù)器：運行著服務(wù)器軟件，根據(jù)請求提供頁面（就像一個服務(wù)員一樣）。永遠(yuǎn)在線。
• url: Uniform Resourse Locator, 統(tǒng)一資源定位符。也叫URI, Uniform Resourse Identifier, 統(tǒng)一資源標(biāo)識符。URL一般以www開頭。

完整的URL構(gòu)成: - 通信協(xié)議: 如http或者h(yuǎn)ttps - 資源所在域名：如blankspace.cn - 端口號：表示要連接到服務(wù)器的哪個端口上 - 其他定位信息：如請求文件的路徑或者查找信息

舉個栗子：一個完整的url，http://www.blankspace.cn:80/tutorials/d3/ 服務(wù)器經(jīng)過配置，www可以不寫； 瀏覽器默認(rèn)連接到服務(wù)器的80端口； 協(xié)議和域名之間的雙斜杠算是一種失誤； HTTP: Hypertext Transfer Protocol(超文本傳輸協(xié)議)；加s代表Secure（安全），Https一般用于傳輸加密信息。 上面的url等效為,http://blankspace.cn/tutorials/d3/

訪問某站點時的過程 1. 打開瀏覽器，在地址欄中輸入URL，例如blankspace.cn/tutorials/d3/。沒有制定通信協(xié)議，瀏覽器采用默認(rèn)的HTTP協(xié)議，在URL前方補(bǔ)上http:// 2. 瀏覽器嘗試通過互聯(lián)網(wǎng)連接到blankspace.cn所在的服務(wù)器，連接其80端口 3. 與blankspace.cn關(guān)聯(lián)的服務(wù)器表示同意與瀏覽器的鏈接，并準(zhǔn)備接受來自瀏覽器的請求 4. 瀏覽器請求訪問位于目錄/tutorials/d3/下的頁面 5. 服務(wù)器把那個頁面的HTML內(nèi)容發(fā)給瀏覽器 6. 瀏覽器接收到HTML后，根據(jù)其中引用的其他文件(包括CSS樣式表和圖片)再次聚合并顯示出完整的頁面。為此它還要再連接到同一臺服務(wù)器，每次請求并取得一個文件 7. 服務(wù)器響應(yīng)，根據(jù)請求發(fā)回每個文件 8. 網(wǎng)頁文檔傳輸完畢。瀏覽器履行其最費勁的職責(zé)——渲染內(nèi)容。首先通過解析HTML確定文件結(jié)構(gòu)，然后根據(jù)CSS選擇符為匹配的元素應(yīng)用樣式，最后把圖片插入到頁面中，并執(zhí)行JavaScript代碼

3.2 HTML

HTML(Hypertext Markup Language，超文本標(biāo)記語言), 用來向瀏覽器說明內(nèi)容的結(jié)構(gòu)。

核心功能：標(biāo)記內(nèi)容，為內(nèi)容添加語義結(jié)構(gòu)（層次，關(guān)系和含義。不需要考慮外觀，這是CSS的工作）。

通過元素添加結(jié)構(gòu)

• 給內(nèi)容添加標(biāo)簽來創(chuàng)建元素的過程。HTML的標(biāo)簽以<開頭，以>結(jié)束。標(biāo)簽一般成對出現(xiàn)，一個開始標(biāo)簽和一個結(jié)束標(biāo)簽就在文檔中創(chuàng)建了一個元素。
• 結(jié)束標(biāo)簽用一個斜杠表示元素的關(guān)閉或結(jié)束。
• 有些元素是可以嵌套的，嵌套元素在文檔中會形成層次。元素嵌套時，子元素不能超出父元素之外。
• 有些標(biāo)簽永遠(yuǎn)不會成對出現(xiàn)，比如指向圖片的img，經(jīng)常會看到其自閉寫法，即在末尾的>之前加一個斜杠，如<img src="photo.jpg" />。H5之后這種自閉標(biāo)簽是可選的。

常用元素

HTML中有上百種標(biāo)簽，經(jīng)常用的不過幾十種而已。想了解更多，請閱讀Mozilla Developer Network

屬性

可以為任何HTML元素指定屬性，形式如下(在開始標(biāo)簽中)： <標(biāo)簽名 屬性="值"></標(biāo)簽名> 不同的元素有不同的屬性。 有些屬性可以指定給任何元素，如class和id。

類和ID

class 和 id是最有用的兩個屬性，通過它們可以找到特定的內(nèi)容。而且css和JavaScript代碼也依賴它們定位元素。 可以給一個元素指定多個類，多各類之間使用空格分隔；也可以給多個元素指定一個類； ID的使用方法類似，但是每個元素只能有一個ID，而且這個ID在整個頁面中只能出現(xiàn)一次。在某個元素比較特殊的情況下，使用ID比較合適。比如想讓一個div像按鈕一樣，或者作為頁面中的其他內(nèi)容的容器。 提示：類和ID的值都不能以數(shù)字開頭，而必須使用字母開頭！

注釋

HTML中的注釋寫法。位于之間的內(nèi)容都會被瀏覽器忽略

3.3 DOM

DOM(Document Object Model, 文檔對象模型)指的是HTML標(biāo)簽的層次結(jié)構(gòu)。每一對HTML標(biāo)簽（有的時候是一個標(biāo)簽）都是一個元素。這些元素，我們一般用擬人化的方法來稱呼它們，比如: 父元素，子元素，同胞元素，祖先元素，后代元素。瀏覽器同構(gòu)解析DOM來操作頁面內(nèi)容。

3.4 開發(fā)者工具

開發(fā)者工具.jpg

開發(fā)者工具十分強(qiáng)大，不同瀏覽器的開發(fā)者工具調(diào)出和功能，大同小異。 Chrome調(diào)出方法為按F12。

3.5 渲染和盒模型

渲染：瀏覽器解析HTML并生成DOM后，對DOM應(yīng)用視覺規(guī)則并將像素繪制到屏幕的過程。 瀏覽器把一切都看作盒子(Box). 上圖藍(lán)色箭頭指向的就是上面圖片的盒模型。

3.6 CSS

CSS(Cascading Style Sheets, 層疊樣式表)，控制DOM元素的視覺外觀。 CSS樣式由選擇符和屬性組成，選擇符后面跟著屬性，但被一對花括號所包圍。屬性和值由冒號分隔，每個屬性聲明以分號結(jié)尾。 例如

body {
    backgound-color:white;
    color:black;
    <屬性>：<值>;
}

相同的屬性可以應(yīng)用多個選擇符，只要用逗號分隔符即可。

選擇符

1. 類型選擇符 就是匹配同名的DOM元素的標(biāo)簽名：

h1 /* 選擇所有一級標(biāo)題 / p / 選擇所有段落 / strong /匹配所有的strong標(biāo)簽/ em /匹配所有的em標(biāo)簽/ div /匹配所有的div標(biāo)簽*/

2. 后代選擇符 后代選擇符匹配包含在(或者"出生于")另一個元素中的元素。

h1 em /* 選擇包含在h1 標(biāo)簽中的em 元素/ div p / 選擇包含在 div中的p元素*/

3. 類選擇符 類選擇符匹配具有指定類的所有元素。類名之前要加一個英文句點。

.caption /* 選擇帶"caption"類的元素/ .label / 選擇帶“l(fā)abel”類的元素/ .axis / 選擇帶“axis”類的元素 */

有些元素可能屬于多個類，為此可以將多個類串起來選擇它們。

.bar.highlight .axis.x .axis.y

4. ID 選擇符 ID 選擇符匹配具有給定ID的一個元素。ID之前要待一個＃號。

#header /*選擇所有ID為header的元素 / #hav / 選擇ID為"hav"的元素 */

選擇符也可以通過各種組合來達(dá)到選擇特定元素的目的。比如把兩個選擇符串起來，選擇一個更具體的元素。

div.sidebar /* 只選擇帶有"sidebar"類的div，而不選擇帶其他類的div / #button.on / 只選擇on類的，ID為“button”的元素 */

屬性和值

多個屬性和值累積起來，就會構(gòu)成特定的樣式：

margin: 10px; padding: 25px; background-color: yellow; color: pink; font-family: Helvetica, Arial, sans-serif;

每個屬性匹配不同的信息。 關(guān)于顏色格式：

顏色名： orange; green; 十六進(jìn)制值：#2288aa或者#38a RGB值：rgb(10, 150, 20) 帶透明通道的RGB值：rgba(10, 150, 20, 0.5)

注釋

/*css中的注釋長成這個樣子，和C++的注釋完全一樣。*/

引用樣式

• 在HTML中嵌入CSS：可以把css代碼放到style元素中。
• 可以把CSS保存到一個純文本文件中，擴(kuò)展名為.css, 比如style.css。讓后在HTML通過頭部的link元素引用外部樣式文件。

<lingk rel="stylesheet" href="style/css">

• 插入行內(nèi)樣式：直接將CSS規(guī)則插入到HTML元素標(biāo)簽中，使用style屬性作為元素指定規(guī)則。

<p style ="color:blue; font-size: 48px; font-style:italic;">啦啦啦啦啦</p> 太多的行內(nèi)樣式會導(dǎo)致HTML代碼混亂。但當(dāng)想對某個元素應(yīng)用特殊效果，又不方便將它們寫進(jìn)更大的樣式表文件時，使用行內(nèi)樣式是可以接受的。

繼承、層疊和特制度

繼承：css中子元素會擁有父元素的特征。 后定義的規(guī)則一般會覆蓋先定義的規(guī)則，具體要看特指度（specificity），一般越詳細(xì)的選擇符特指度越高，相同特指度的選擇符，后定義的會勝出。 總的原則：把通用選擇符放在最前面定義，把更具體的放在后面定義。

3.7 JavaScript

JavaScript 是動態(tài)腳本語言，通過操作DOM動態(tài)修改頁面。學(xué)習(xí)D3就是學(xué)習(xí)JavaScript。

Console

可以直接通過瀏覽器控制臺來輸入JavaScript代碼。

console.png

在開發(fā)者工具中。

變量

變量是數(shù)據(jù)的容器。 JS中使用賦值符號=來對變量賦值，變量可以保存數(shù)值，也可以保存布爾型。

var number = 5; var isMiao = true;

其他數(shù)據(jù)類型

• 數(shù)組：var numbers = [1, 2, 4, 5, 0]; var names= ["LQ", "YQ", "MZ", "WH", "XB"];
• 對象: 保存一系列的值。使用花括號來構(gòu)造對象。在花括號中間是對象的屬性和值，兩者以冒號分隔。

var fruit ={ kind: "apple"; color:"red"; quantity:12; tasty:true;
} 引用對象中的某個值，使用點操作符。后面緊跟屬性名。

• 對象+數(shù)組：[]表示數(shù)組，{}表示對象。有多種組合方式。
• JSON: JavaScript Object Notation， JavaScript 對象表示法。和對象的唯一區(qū)別就是其中的屬性名用雙引號闊上。
• GeoJSON：專門用來保存地理數(shù)據(jù)。所有的GeoJSON都是JSON帝鄉(xiāng)，所有的JSON對象都是JavaScript對象。

數(shù)學(xué)運算符

• 加減乘除：+ - * /

比較運算符

• 等于：==
• 不等于：！=
• 小于：<
• 大于：<
• 小于等于：<=
• 大于等于：>= 這些運算符都是將左邊的值和右邊的值進(jìn)行比較，如果結(jié)果為真，就返回true，否則就返回false。

控制結(jié)構(gòu)

• if(條件){//要執(zhí)行的代碼}：若條件為true就執(zhí)行花括號中的代碼
• for(初始條件; 條件; 更新){//每次循環(huán)要執(zhí)行的代碼}：初始條件，對條件求值，最后運行更新規(guī)則，再重新對條件求值。

函數(shù)

在JS中有多種定義函數(shù)的方式，這里介紹一種比較簡單的方式：

var calculateGratuity = function(bill){
    return bill*0.l2;
}

調(diào)用函數(shù)calculateGratuity(100);返回12。

注釋

JS支持CSS風(fēng)格的注釋和//注釋。

引用腳本文件

腳本可以直接放在HTML中，位于一對script標(biāo)簽之中；

<body>
    <script type="text/javascript">
        alert("Red, alert!");
    </script>
</body>

或者保存在一個獨立的文件中，以.js作為擴(kuò)展名?？梢栽賖ead標(biāo)簽中，或者在body結(jié)束標(biāo)簽之前：

<head>
    <title>震驚！這個居然也能當(dāng)標(biāo)題</title>
    <script type="text/javascript" src="hi_script.js"></script>
</head>

JavaScript的陷阱

• 動態(tài)類型：不需要提前聲明變量的類型，自動判斷其類型。好處是可以隨便改變變量類型，壞處是變量類型混亂。在不確定的時候，使用typeof操作符進(jìn)行檢查。
• 變量提升：JavaScript中變量會提升到函數(shù)上下文的頂部，就相當(dāng)于C語言中變量必須要在最前面聲明一樣。這在變量名有沖突的時候可能帶來問題。
• 函數(shù)級作用域：JavaScript中變量只能限制在函數(shù)中，即在函數(shù)中聲明的變量只能在函數(shù)內(nèi)部訪問。因此想要封裝某個值，就需要把它放進(jìn)函數(shù)里。
• 全局命名空間：在全局作用域中輸入的變量，會被添加到window對象下(輸入 window可查看)。當(dāng)變量比較多，肯能會出現(xiàn)重名沖突。解決辦法：1.只在函數(shù)里聲明變量；2.只聲明一個全局對象，然后將本來作為全局變量的值都作為全局對象的屬性。舉例：

var Vis={};//聲明空的全局對象 Vis.gou="Exciting!!"; Vis.li = "I am not angry."; Vis.guo = "Too simple!;

這樣"就把變量關(guān)進(jìn)籠子"，不會再污染全局命名空間。

SVG

SVG: Scalable Vector Graphics，可伸縮矢量圖形。 舉例：

<svg  width="50px" height = "50px">
    <circle cx="25" cy ="25" r ="22" fill="blue" stroke="gray" stroke-width="2"/>
</svg>

SVG元素

SVG屬于一種文本格式，每個SVG圖形都是使用與HTML類似的標(biāo)記來定義的。SVG也是一種XML語言，所以那些不包含結(jié)束標(biāo)簽的一定要自閉。 在繪圖之前，需要創(chuàng)建SVG元素。至少需要指定，width和height值，默認(rèn)都是 像素為單位。

簡單的圖形

在SVG中可以繪制多種元素，有矩形，圓形，橢圓，直線，文字和軌跡

他們都遵循同一個坐標(biāo)系統(tǒng)，即屏幕的左上角是坐標(biāo)的原點，水平向右為x軸正方向，豎直向下為y軸的正方向。

• rect: 繪制矩形。<rect x="0" y="10" width="500" height="30"/>

svg_rect.png

• circle: 繪制圓形

  
  
  svg_circle.png
  
  

  代碼如下：

<!doctype html>
<!DOCTYPE html>
<html>
<head>
    <title>SVG Demos</title>
</head>
<body>
    <svg width="500" height="500">
        <circle cx= "250"  cy= "250" r ="50" fill="blue" stroke="gray" stroke-width="5"/>
    </svg>
</body>
</html>

• ellipse: 繪制橢圓，和繪制圓形類似，需要指定兩個軸的長度。半徑用"rx"和"ry"來代替"r".

• line: 繪制直線。<line x1="0" y1="4" x2="500" y2="40" stroke="black"/>,兩點確定一條直線，需要用stroke確定直線的顏色才能看到。

• text: 繪制文本。<text x="130" y="30">Take it easy!</text>，x用于指定文本左上角的位置，y用于指定文本的基線，即所有字以之為對齊標(biāo)準(zhǔn)。
  

  svg_text.png

• path: 用于繪制比較復(fù)雜的圖形。用到了再說。

為SVG元素添加樣式

SVG默認(rèn)黑色填充，沒有描邊。 常見的屬性為：

• fill： 顏色值。與使用CSS一樣，可以使用顏色名，十六進(jìn)制值，或者RGB，RGBA。
• stroke：描邊顏色值。
• stroke-width: 描邊的寬度。
• opacity：0.0 完全透明 到 1.0 完全不透明之間的數(shù)值。 對于文本，也可以使用如下屬性：
• font-family: 字體
• font-size: 字體大小

可以使用CSS來為SVG制定屬性，在選擇符之前增加SVG標(biāo)記.avg .apple{/**/}

分層和繪制順序

繪制多個SVG，它們會產(chǎn)生重疊，出現(xiàn)越早越先繪制。一般繪制散點圖，會將數(shù)軸和標(biāo)簽凡在最后繪制。

透明度

在元素相互遮擋，但又不能完全遮擋，或者用于強(qiáng)化或者弱化某部分元素，可以使用透明度來調(diào)節(jié)。

svg_cirles_rgba.png

    <svg width="800" height="500">
        <circle cx= "150"  cy= "250" r ="100" fill="rgba(0, 0, 255, 1.0)" />
        <circle cx= "300"  cy= "250" r ="100" fill="rgba(0, 255, 255, 0.80)" />
        <circle cx= "450"  cy= "250" r ="100" fill="rgba(255, 0, 255, 0.50)" />
    </svg>

也可以添加opacity屬性，為stroke添加透明屬性,strocke="rgba(0,0,200, 0.7)"

svg_strokes_rgba.png

描邊和每個圓邊緣對齊，一半在內(nèi)，一半在外。

兼容性

建議使用新的瀏覽器，使用Modernizr可以用來檢查是否支持SVG。