【讀書筆記】JavaScript DOM 編程藝術(shù)

掩飾不住收到此書的喜悅脱吱,抓緊時(shí)間來學(xué)習(xí)咯智政!

第1章 JavaScript 簡史

1. BOM: Browser Object Model
可以用來調(diào)整Web瀏覽器窗口的高度、寬度和位置等屬性的方法
2. W3C對(duì)DOM的定義
一個(gè)與系統(tǒng)平臺(tái)和編程語言無關(guān)的接口箱蝠,程序和腳本可通過接口動(dòng)態(tài)地訪問和修改文檔的內(nèi)容、結(jié)構(gòu)和樣式
3. 瀏覽器引擎
* WebKit  -- Safari Chrome
* Gecko   -- Firefox
* Trident -- IE

第2章 JavaScript 語法

1. 駝峰格式(camel case)
駝峰格式是函數(shù)名垦垂、方法名和對(duì)象屬性名命名的首選格式
命名變量時(shí)宦搬,可以使用下劃線來分割單詞,這種做法可以有效區(qū)分變量名和函數(shù)名的區(qū)別

第3章 DOM

1. DOM: Document Object Model
2. 節(jié)點(diǎn)類型
元素節(jié)點(diǎn)劫拗、屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)等
3. 獲取和設(shè)置屬性
object.getAttribute(attribute)
object.setAttribute(attribute, value)

第4章 案例研究:JavaScript 圖片庫

1. 沒有人愿意等待很長的時(shí)間去下載一個(gè)網(wǎng)頁
2. 事件處理函數(shù)中一個(gè)規(guī)避跳轉(zhuǎn)的方法
onclick = "showPic(this); retrun false;"

第5章 最佳實(shí)踐

1. 不濫用JS间校,思考增加額外的行為是否確有必要?
2. 必要情況下才使用彈出窗口
window.open(url, name, features)
window.open(winURL, "popup", "width=320,height=480")
3. 平穩(wěn)退化:HTML文檔中通過 "javascript:function();" 偽協(xié)議調(diào)用代碼并不好
較老的瀏覽器或者禁用JavaScript功能的瀏覽器會(huì)出現(xiàn)錯(cuò)誤
4. 同上理論页慷,HTML中的<a>標(biāo)簽url鏈接應(yīng)填入正確的地址憔足,而不僅僅是"#"
一種精簡的寫法:
<a  onclick="popUp(this.href); return false;">Example</a>
5. 檢測(cè)瀏覽器是否支持此種方法
if(!document.getElementsByTagName) return false;
6. 性能考慮
盡量少訪問DOM和盡量減少標(biāo)記
合并和放置腳本:減少加載頁面時(shí)發(fā)送的請(qǐng)求數(shù)量
壓縮腳本文件:使用代碼壓縮工具

第6章 案例研究:圖片庫改進(jìn)版

1. 它支持平穩(wěn)退化嗎胁附?
為不支持 JavaScript 的瀏覽器預(yù)留退路
2. 它的 JavaScript 與 HTML 標(biāo)記是分離的嗎?
將 JS 代碼移除 HTML 文檔并不是一件難事
3. 添加時(shí)間處理函數(shù)時(shí)滓彰,檢查一下瀏覽器是否支持此類函數(shù)控妻?
添加測(cè)試類函數(shù),保證不理解這個(gè)方法的老瀏覽器不會(huì)執(zhí)行之后的內(nèi)容
如果想用 JS 給某個(gè)網(wǎng)頁添加一些行為揭绑,就不該讓 JS 代碼對(duì)這個(gè)網(wǎng)頁結(jié)構(gòu)產(chǎn)生任何依賴
4. 共享 onload 事件
window.onload = function() {
    firstFunction();
    secondFunction();    
}

第7章 動(dòng)態(tài)創(chuàng)建標(biāo)記

1. 在已有元素前插入一個(gè)新元素
parentEle.insertBefore(newEle, targetEle)
將新元素(new)插入到同一個(gè)父元素(parent)下的目標(biāo)元素(target)之前
2. 編寫在已知元素之后插入一個(gè)新元素的函數(shù)
function insertAfter(newEle, targetEle) {
    var parent = tarrgetEle.parentNode;
    if(parent.lastChild == targetEle) {
        parent.appendChild(newEle);
    }else {
        parent.insertBefore(newEle, targetEle.nextSibling);
    }
}
3. Ajax
對(duì)頁面的請(qǐng)求以異步方式發(fā)送到服務(wù)器弓候,只更新頁面中的一小部分,而不會(huì)再次加載整個(gè)頁面了
使用 Ajax 時(shí)他匪,注意同源策略:
使用 XMLHttpRequest 對(duì)象發(fā)送的請(qǐng)求只能訪問與其所在的 HTML 處于同一個(gè)域中的數(shù)據(jù)菇存,不能向其他域發(fā)送請(qǐng)求
4. XMLHttpRequest 對(duì)象
IE中以 ActiveX 對(duì)象的形式實(shí)現(xiàn)一個(gè)名為 XMLHTTP 的對(duì)象:
    var request = new ActiveX0bject("Msxml2.XMLHTTP.3.0");
其他瀏覽器中則基于 XMLHttpRequest 來創(chuàng)建對(duì)象:
    var request = new XMLHttpRequest();
然而IE會(huì)這么輕松的放過你嗎?too young邦蜜!
不同IE版本中使用的 XMLHTTP 對(duì)象也不完全相同依鸥,為了兼容:
    function getHTTPObject() {
        if(typeof XMLHttpRequest == "undefined") {
            XMLHttpRequest = function() {
                try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");}
                    catch(e) {}
                try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");}
                    catch(e) {}
                try {return new ActiveXObject("Msxml2.XMLHTTP");}
                    catch(e) {}
                return false;
            }
        }
        return new XMLHttpRequest();
    }
5. Hijax :漸進(jìn)增強(qiáng)地使用 Ajax
Ajax 應(yīng)用主要依賴后臺(tái)服務(wù)器,服務(wù)器端的腳本語言完成了大部分的工作

第8章 充實(shí)文檔的內(nèi)容

1. 兩個(gè)原則:漸進(jìn)增強(qiáng) 和 平穩(wěn)退化

第9章 CSS-DOM

1. hover 和 JS事件的選用
選擇最容易實(shí)現(xiàn)的方法
如果僅想讓連接在鼠標(biāo)懸停時(shí)改變顏色悼沈,則選用 CSS 中的 hover

第10章 用 JavaScript 實(shí)現(xiàn)動(dòng)畫效果

1. 頁面加載完成函數(shù)示例:
function addLoadEvent(func) {
    var oldonload = window.onload;
    if(typeof window.onload != "function") {
        window.onload = func;
    }else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}
2.通過使用CSS-DOM和JavaScript的setTimeout函數(shù)實(shí)現(xiàn)動(dòng)畫效果
平滑移動(dòng)的動(dòng)畫效果且平穩(wěn)退化的通用性函數(shù)毕籽,書中示例有點(diǎn)落后,css3已經(jīng)可以輕松實(shí)現(xiàn)過渡動(dòng)畫特效井辆。

第11章 HTML5

1. canvas关筒、video、audio
為了確保瀏覽器支持所有容器和編解碼器杯缺,需要提供多種后備格式:
MP4: 基于H.264+AAC
WebM:基于VP8+Vorbis
Ogg:基于Theora視頻+Vorbis音頻

但萬能的github已經(jīng)有車輪子可供使用蒸播,例:video.js

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市萍肆,隨后出現(xiàn)的幾起案子袍榆,更是在濱河造成了極大的恐慌,老刑警劉巖塘揣,帶你破解...
    沈念sama閱讀 211,194評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件包雀,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡亲铡,警方通過查閱死者的電腦和手機(jī)才写,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,058評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奖蔓,“玉大人赞草,你說我怎么就攤上這事∵汉祝” “怎么了厨疙?”我有些...
    開封第一講書人閱讀 156,780評(píng)論 0 346
  • 文/不壞的土叔 我叫張陵,是天一觀的道長疑务。 經(jīng)常有香客問我沾凄,道長梗醇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,388評(píng)論 1 283
  • 正文 為了忘掉前任撒蟀,我火速辦了婚禮叙谨,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘牙肝。我一直安慰自己唉俗,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,430評(píng)論 5 384
  • 文/花漫 我一把揭開白布配椭。 她就那樣靜靜地躺著虫溜,像睡著了一般。 火紅的嫁衣襯著肌膚如雪股缸。 梳的紋絲不亂的頭發(fā)上衡楞,一...
    開封第一講書人閱讀 49,764評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音敦姻,去河邊找鬼瘾境。 笑死,一個(gè)胖子當(dāng)著我的面吹牛镰惦,可吹牛的內(nèi)容都是我干的迷守。 我是一名探鬼主播,決...
    沈念sama閱讀 38,907評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼旺入,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼兑凿!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起茵瘾,我...
    開封第一講書人閱讀 37,679評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤礼华,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后拗秘,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體圣絮,經(jīng)...
    沈念sama閱讀 44,122評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,459評(píng)論 2 325
  • 正文 我和宋清朗相戀三年雕旨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了扮匠。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,605評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡奸腺,死狀恐怖餐禁,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情突照,我是刑警寧澤,帶...
    沈念sama閱讀 34,270評(píng)論 4 329
  • 正文 年R本政府宣布氧吐,位于F島的核電站讹蘑,受9級(jí)特大地震影響末盔,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜座慰,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,867評(píng)論 3 312
  • 文/蒙蒙 一陨舱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧版仔,春花似錦游盲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,734評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至然想,卻和暖如春莺奔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背变泄。 一陣腳步聲響...
    開封第一講書人閱讀 31,961評(píng)論 1 265
  • 我被黑心中介騙來泰國打工令哟, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人妨蛹。 一個(gè)月前我還...
    沈念sama閱讀 46,297評(píng)論 2 360
  • 正文 我出身青樓屏富,卻偏偏與公主長得像,于是被迫代替她去往敵國和親蛙卤。 傳聞我的和親對(duì)象是個(gè)殘疾皇子狠半,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,472評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 前言 歸根結(jié)底,代碼都是思想和概念的體現(xiàn)表窘。沒人能把一種程序設(shè)計(jì)語言的所有語法和關(guān)鍵字都記住典予,可以查閱參考書來解決。...
    朱細(xì)細(xì)閱讀 2,920評(píng)論 4 14
  • 第1章 認(rèn)識(shí)JS JavaScript能做什么乐严?1.增強(qiáng)頁面動(dòng)態(tài)效果(如:下拉菜單瘤袖、圖片輪播、信息滾動(dòng)等)2.實(shí)現(xiàn)...
    mo默22閱讀 1,250評(píng)論 0 5
  • 第一章 JavaScript 簡史 主要講了JavaScript的起源和發(fā)展. 第二章 JavaScript語法 ...
    McRay閱讀 315評(píng)論 0 1
  • 做什么都沒用 又不是天才 做什么都沒用 伯樂都不在 用做作的語言 歌頌這個(gè)虛偽的世界 自己都覺得惡心 贊美是因?yàn)槟?..
    昨夜的街燈閱讀 155評(píng)論 0 2
  • There's a well-known quote by Charles Darwin that says: I...
    bravo1988閱讀 360評(píng)論 0 2