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

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

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

舉個(gè)栗子：一個(gè)完整的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/

訪問某站點(diǎn)時(shí)的過程 1. 打開瀏覽器温艇，在地址欄中輸入U(xiǎn)RL因悲，例如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)備接受來自瀏覽器的請(qǐng)求 4. 瀏覽器請(qǐng)求訪問位于目錄/tutorials/d3/下的頁面 5. 服務(wù)器把那個(gè)頁面的HTML內(nèi)容發(fā)給瀏覽器 6. 瀏覽器接收到HTML后卫旱，根據(jù)其中引用的其他文件(包括CSS樣式表和圖片)再次聚合并顯示出完整的頁面。為此它還要再連接到同一臺(tái)服務(wù)器围段，每次請(qǐng)求并取得一個(gè)文件 7. 服務(wù)器響應(yīng)顾翼，根據(jù)請(qǐng)求發(fā)回每個(gè)文件 8. 網(wǎng)頁文檔傳輸完畢。瀏覽器履行其最費(fèi)勁的職責(zé)——渲染內(nèi)容奈泪。首先通過解析HTML確定文件結(jié)構(gòu)适贸，然后根據(jù)CSS選擇符為匹配的元素應(yīng)用樣式，最后把圖片插入到頁面中涝桅，并執(zhí)行JavaScript代碼

3.2 HTML

HTML(Hypertext Markup Language拜姿，超文本標(biāo)記語言), 用來向?yàn)g覽器說明內(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)簽一般成對(duì)出現(xiàn)精耐，一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽就在文檔中創(chuàng)建了一個(gè)元素。
• 結(jié)束標(biāo)簽用一個(gè)斜杠表示元素的關(guān)閉或結(jié)束琅锻。
• 有些元素是可以嵌套的卦停，嵌套元素在文檔中會(huì)形成層次。元素嵌套時(shí)恼蓬，子元素不能超出父元素之外惊完。
• 有些標(biāo)簽永遠(yuǎn)不會(huì)成對(duì)出現(xiàn)，比如指向圖片的img处硬，經(jīng)常會(huì)看到其自閉寫法小槐，即在末尾的>之前加一個(gè)斜杠，如<img src="photo.jpg" />荷辕。H5之后這種自閉標(biāo)簽是可選的凿跳。

常用元素

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

屬性

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

類和ID

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

注釋

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

3.3 DOM

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

3.4 開發(fā)者工具

開發(fā)者工具.jpg

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

3.5 渲染和盒模型

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

3.6 CSS

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

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

相同的屬性可以應(yīng)用多個(gè)選擇符喧兄，只要用逗號(hào)分隔符即可无畔。

選擇符

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

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

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

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

3. 類選擇符 類選擇符匹配具有指定類的所有元素繁莹。類名之前要加一個(gè)英文句點(diǎn)檩互。

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

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

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

4. ID 選擇符 ID 選擇符匹配具有給定ID的一個(gè)元素闸昨。ID之前要待一個(gè)＃號(hào)。

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

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

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

屬性和值

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

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

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

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

注釋

/*css中的注釋長成這個(gè)樣子茄猫，和C++的注釋完全一樣。*/

引用樣式

• 在HTML中嵌入CSS：可以把css代碼放到style元素中困肩。
• 可以把CSS保存到一個(gè)純文本文件中划纽，擴(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)樣式會(huì)導(dǎo)致HTML代碼混亂潭枣。但當(dāng)想對(duì)某個(gè)元素應(yīng)用特殊效果比默，又不方便將它們寫進(jìn)更大的樣式表文件時(shí)，使用行內(nèi)樣式是可以接受的盆犁。

繼承命咐、層疊和特制度

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

3.7 JavaScript

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

Console

可以直接通過瀏覽器控制臺(tái)來輸入JavaScript代碼织咧。

console.png

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

變量

變量是數(shù)據(jù)的容器漠秋。 JS中使用賦值符號(hào)=來對(duì)變量賦值笙蒙，變量可以保存數(shù)值，也可以保存布爾型庆锦。

var number = 5; var isMiao = true;

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

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

var fruit ={ kind: "apple"; color:"red"; quantity:12; tasty:true;
} 引用對(duì)象中的某個(gè)值，使用點(diǎn)操作符求晶。后面緊跟屬性名焰雕。

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

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

• 加減乘除：+ - * /

比較運(yùn)算符

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

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

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

函數(shù)

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

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

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

注釋

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

引用腳本文件

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

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

或者保存在一個(gè)獨(dú)立的文件中艘绍，以.js作為擴(kuò)展名赤拒。可以再head標(biāo)簽中诱鞠，或者在body結(jié)束標(biāo)簽之前：

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

JavaScript的陷阱

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

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

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

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屬于一種文本格式，每個(gè)SVG圖形都是使用與HTML類似的標(biāo)記來定義的注益。SVG也是一種XML語言碴巾，所以那些不包含結(jié)束標(biāo)簽的一定要自閉。 在繪圖之前丑搔，需要?jiǎng)?chuàng)建SVG元素厦瓢。至少需要指定提揍，width和height值，默認(rèn)都是 像素為單位煮仇。

簡單的圖形

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

他們都遵循同一個(gè)坐標(biāo)系統(tǒng)绞呈，即屏幕的左上角是坐標(biāo)的原點(diǎn)，水平向右為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: 繪制橢圓倘要，和繪制圓形類似圾亏，需要指定兩個(gè)軸的長度。半徑用"rx"和"ry"來代替"r".

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

• text: 繪制文本泽西。<text x="130" y="30">Take it easy!</text>曹铃，x用于指定文本左上角的位置，y用于指定文本的基線捧杉，即所有字以之為對(duì)齊標(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ù)值。 對(duì)于文本零聚，也可以使用如下屬性：
• font-family: 字體
• font-size: 字體大小

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

分層和繪制順序

繪制多個(gè)SVG些侍，它們會(huì)產(chǎn)生重疊，出現(xiàn)越早越先繪制政模。一般繪制散點(diǎn)圖岗宣，會(huì)將數(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

描邊和每個(gè)圓邊緣對(duì)齊，一半在內(nèi)儡司，一半在外娱挨。

兼容性

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