【web前端開發(fā)】瀏覽器原生API，DOM，Javascript，HTML5，CSS代碼運行實例參考
前言
成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目成都網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元北關(guān)做網(wǎng)站,已為上家服務(wù),為北關(guān)各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792
本篇博文的目的是搜集并匯總一些講述 web 前端開發(fā)技術(shù)的書籍中的實例代碼，并驗證記錄其在不同 web 瀏覽器中的運行結(jié)果，以供日后編程參考。
為避免版權(quán)問題，所有涉及到的代碼片段，都會給出相應(yīng)的出處和至少在3個瀏覽器（這里指的是：Microsoft Internet Explorer，Mozilla Firefox，Google Chrome ）中的運行結(jié)果。
對于比較難以理解的代碼片段，會加入自己的思考和總結(jié)。另外給出相關(guān)作者的聯(lián)系 e-mail，可以向作者提問，討論。
《準備工具》
gedit 文本編輯器
用于 linux 環(huán)境下的 HTML 文檔編寫。
firefox 瀏覽器
用于運行 HTML 文檔并查看輸出結(jié)果。
firefox 瀏覽器的 firebug 插件
用于查看 HTML 文檔的 DOM 樹及其節(jié)點，調(diào)試 javascript 代碼（后面詳述），輸出CSS樣式等等。
IE 瀏覽器
用于運行 HTML 文檔并查看輸出結(jié)果。
chrome 瀏覽器
用于運行 HTML 文檔并查看輸出結(jié)果。
下面是測試環(huán)境使用的 firefox，firebug 版本，以及官方下載地址：
注意，對于部分涉及 HTML5 新特性的代碼，建議更新到與下面一致或者更高的版本，才能正確運行或顯示預(yù)期的輸出結(jié)果。
對于 IE 以及 chrome 瀏覽器，要查看 javascript 的運行結(jié)果，可以將代碼作為 document.write()的參數(shù)調(diào)用，這將在瀏覽器內(nèi)部窗口為用戶顯示結(jié)果。
document.write()也可以用于同步創(chuàng)建，添加節(jié)點到 DOM 樹中。
需要注意的是，write()方法會在瀏覽器加載頁面時執(zhí)行，它會阻塞（中斷）對 HTML 文檔的解析，優(yōu)先將傳遞給它的參數(shù)或表達式運行結(jié)果輸出到頁面上，然后
再接續(xù)解析 HTML 文檔。
對于 firefox 瀏覽器，在該 html 文檔上右擊，打開方式選擇以 firefox 打開；前面如果已經(jīng)正確安裝 firebug 插件，并且重啟 firefox，那么在打開該文檔的時刻也會啟動 firebug ，建議將其調(diào)整在獨立的窗口中運行 firebug ，避免在 firefox 主界面下方顯示，不便于閱讀和調(diào)試代碼。
在 firebug 的“控制臺”選項卡中的底部，鍵入 console.log()，將要測試運行的代碼塊作為它的參數(shù)調(diào)用，回車運行，即可在上面窗口得到輸出結(jié)果，包括出錯提示信息，如下圖所示：
這是一種快速實時調(diào)試 javascript 代碼的方法，并且經(jīng)測試無誤后可以立即集成，部署到你的產(chǎn)品現(xiàn)有代碼中，建議熟練掌握。
注意，在 firebug 的控制臺選項卡底部的命令行編輯器中，使用doucument.write（）來輸出的運行結(jié)果，不會顯示在控制臺上，相反，它會輸出到HTML 頁面上。只有使用 firebug 內(nèi)部支持的 console.log，才能直接在控制臺上輸出：
由此可知，console.log()與doument.write()在輸出的位置上不同，而作用是一樣的：例如后者可用以 "string"，的雙引號字符串形式作為其參數(shù)輸出，前者同樣可以，只不過是輸出到控制臺窗口罷了。
還有就是，在 firebug 命令行編輯器中可以直接輸入并運行 javascript，運行結(jié)果就會反映到 HTML 頁面上。
不需要像傳統(tǒng)的瀏覽器測試法那樣，還要加上 <script> 標簽，如下所示：
*****這里使用最廣泛的 gedit 文本編輯器來編寫 HTML 文檔，下面給出一個最典型的HTML 文檔代碼框架，后續(xù)的編碼工作都是建立在此基礎(chǔ)之上；使用 HTML5 特性的框架版本會另外給出。
注意，對于 HTML / DOM 節(jié)點，元素，標簽等內(nèi)容，使用 <!-- --> 符號對來進行注釋；
對于 javascript 腳本，使用類似編譯型高級語言中的 /* */ ， // 符號對來進行注釋。
*****單擊 firebug 主界面的 consloe（控制臺） 標簽頁，在下拉的菜單中，可以選取用于進行顯示警告，錯誤，以及信息的類型。例如顯示和 javascript 語法相關(guān)的錯誤，警告，信息，以及顯示和 HTML 語法相關(guān)的錯誤，警告，信息。
當加載一個存在上述語法錯誤的頁面，文檔時，就會在 consloe 中顯示這些信息，開發(fā)人員利用這里給出的提示，就能快速定位并修改已存在的錯誤。
注意，一般來講，應(yīng)該確認控制臺下面的“保持”子標簽處于非按下狀態(tài)，這樣，每次加載一個頁面時，上次已有的提示信息都將被更新，而不是“增加”在上次提示信息的下面。這對重復(fù)修改，調(diào)試一個頁面相當有效：已糾正的語法錯誤不會輸出從而影響到程序員閱讀提示信息，如下所示：
*****在Linux平臺下，一般我們可以用 firefox 打開本地的任何 html 測試文檔，然后啟動 firebug 來調(diào)試，方法是在瀏覽器地址欄以 file:/// 協(xié)議開頭，后接文檔所在的絕對路徑。在瀏覽器地址欄右側(cè)，單擊灰色狀態(tài)的昆蟲圖標，即可在當前文檔啟動 firebug，如下所示：
如果是在 windows 平臺下，可以使用 google Chrome 瀏覽器加載本地的 html 測試頁面，但是在啟動 Firebug Lite for Google Chrome
（用于 chrome 的 firebug ，稱為 firebug Lite，一般情況下， firebug 僅支持 firefox 瀏覽器，要在其它類型的瀏覽器中使用 firebug 插件，則需要下載相應(yīng)版本的 firebug Lite） 的時候，firebug Lite 會給出一個錯誤信息提示框，
大意是說，因為 chrome 自身的某些 bug（這些 bug不能通過更新，升級 chrome 到最新版本來解決），以及 chrome 的 javascript 安全策略，限制了firebug Lite 進行 XHR 調(diào)用，因此不能以 file:/// 協(xié)議來打開本地 html 文檔。
但是 firebug Lite 也給出了相應(yīng)的解決方案，最簡單的做法就是在本地運行一個 web server，例如 apache，然后用 chrome 瀏覽器來訪問這個被 apache “托管”的 html 頁面，就可以啟動 firebug Lite 進行調(diào)試了，如下所示，注意這里的托管含義和常用的不同，僅是比喻：
如果各位的開發(fā)測試環(huán)境是 windows / chrome 的組合 ，啟動瀏覽器，將地址欄指向：
http://www.apache.org/dist/httpd/binaries/win32/
即可下載并安裝 apache 的二進制可執(zhí)行文件，如下所示：
下面用 firebug 對一個簡單的 HTML 源代碼文件來進行分析與調(diào)試，該源文件雖然簡單，但是其中包含內(nèi)置的 javascript ，以及 CSS 樣式表，還有開發(fā)中最常用到的 HTML 標簽（對應(yīng)的DOM 節(jié)點），因此可以充分發(fā)揮firebug 強大的分析與調(diào)試能力，該文檔的原始出處為：
https://www.youtube.com/watch?v=VHOg_Ks-a5E
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML firebug test</title>
<script type="text/javascript">
function displayhello()
{
// you can use mutiple write() ststments to output a single line of XHTML text
document.write("Hellow Javascript --> this is was printed from function displayhello()<br / ><br />");
var thisname = ""
thisname = prompt("please input your name:", "shayi");
document.writeln(thisname + " ,<br />this was also printed from function displayhello(),<br />");
}
</script>
<style type="text/css">
body {
background-color: #AFEFEF; /* use a light grey background */
color: #117755; /* dark blue test */
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 110%;
}
h2 {
background-color: #CECECE /* use dark gray */
;color: #000099
;border-top: 10px solid #FACABD /* thin blue broder on top */
;border-bottom: 5px solid #000099 /* thin blue broder on bottom */
;padding: 10px
;
}
</style>
</head>
<body>
<h2>Using Firebug to debugging javascript and coding errors</h2>
<p>shayi2007<br />
<script type="text/javascript">
document.write("this was printed from the html <body> element" + "<br / ><br />");
displayhello();
/*console.log("shayi")*/
</script>
</body>
</html>
為了方便測試，源碼部分有幾處略做更動，但并不影響分析與調(diào)試工作。
通過閱讀源碼，可以了解到，
在該 HTML 文檔的頭部，也就是以 <head> 標簽定義的部分，將該頁面的標題以
<title> 標簽進行定義，然后通過 <script> 標簽引入 javascript，在其中自定義一個叫做 displayhello() 的函數(shù)，該函數(shù)首先打印一串文字，然后調(diào)用瀏覽器實現(xiàn)的 javascript 內(nèi)置函數(shù) API，也就是 prompt()，用以彈出一個提示用戶輸入信息的對話框，并且將獲取的字符串保存在一個變量中，最后向頁面上輸出這個變量的內(nèi)容，以及后面自定義的字符串。
接著，定義一個內(nèi)置的 CSS 樣式表，主要是用于設(shè)定 HTML 文檔體，也就是以 <body> 標簽起始的部分，它的背景顏色，字體顏色，字體類型，大小等。
對于 <body> 標簽內(nèi)部的 <h2> 標簽，也就是文檔體的主要段落標題部分，使用獨立的 CSS 樣式定義，注意，它會覆蓋對 <body> 部分的樣式定義。
在文檔體中，以 <h2> 標簽來突出顯示主題名稱，這個主題名稱將套用前面在文檔頭中為 <h2> 定義的樣式。
可以看到，在文檔體中也可以引入 javascript，向頁面輸出信息，并且調(diào)用在文檔頭部分定義的函數(shù)。
下面，我們刻意在該文檔源碼的 CSS 部分以及 javascript 部分制造編程的語法錯誤，借此來測試 firebug 的錯誤分析與處理能力：
對于 linux / firefox 開發(fā)環(huán)境，我們只需以 firefox 打開存儲在本地的 HTML 文檔，然后啟動 firebug 即可：
參考上面的 HTML 源碼，假設(shè)我們在第30行的background-color 屬性后面，遺漏了冒號（:） ，然后讓瀏覽器重新加載頁面， 此時 firebug 捕捉到的 CSS 語法錯誤，如下所示：
注意，參考上面源碼的第31～34行，可以發(fā)現(xiàn)，我故意將分號（;）寫在了每個 CSS 屬性的前面。
常規(guī)的做法，應(yīng)該是在上一條 CSS 屬性的結(jié)尾部分以分號結(jié)束，但這里為何要寫在下一條 CSS 屬性的前面？
其實，這種寫法才符合瀏覽器解析 CSS 樣式的標準邏輯與流程（至少 firefox 是如此），我們可以通過刻意遺漏一個其中的分號來驗證，
例如，我們將源碼中第31行最前面的分號丟失，然后用 firefox 重新加載 HTML 文檔，查看 firebug 捕捉到的錯誤提示信息，如下：
上面的例子也說明，有時通過人為制造錯誤，并且觀察 firebug 的輸出，可以學習到瀏覽器進行語法，詞法，語義，以及對其它相關(guān)資源進行解析的邏輯。
從某種意義上而言，這對于前端程序員編寫高效率且安全的代碼，還是有幫助的。
*****參考上面的源碼，假設(shè)在第15行中，丟失了變量 thisname 與其后面字符串之間的連接運算符（+ 號），這會導(dǎo)致 javascript 語法錯誤。
并且，由于該錯誤是出現(xiàn)在函數(shù) displayhello() 的定義中，只要這個函數(shù)其中任何部分出現(xiàn)語法錯誤， firebug 都會將該函數(shù)視為“未定義”，導(dǎo)致后面調(diào)用該函數(shù)時無法執(zhí)行，程序流程會中斷在該函數(shù)調(diào)用點。
下面的截圖驗證了這部分內(nèi)容：
分享名稱：【web前端開發(fā)】瀏覽器原生API，DOM，Javascript，HTML5，CSS代碼運行實例參考
URL地址：http://jinyejixie.com/article30/gcioso.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、云服務(wù)器、靜態(tài)網(wǎng)站、面包屑導(dǎo)航、Google
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 在做網(wǎng)站建設(shè)中，網(wǎng)站備案與不備案的差別有哪些？ 2020-11-28
- 企業(yè)做網(wǎng)站怎樣選擇網(wǎng)站建設(shè)服務(wù)商 2021-06-05
- 中小企業(yè)做網(wǎng)站對公司有那些幫助呢？ 2016-11-14
- 做網(wǎng)站優(yōu)化時要解遵守如下規(guī)則,不然一切可能徒勞 2016-09-09
- 做網(wǎng)站建設(shè)的基本方法技巧有哪些？ 2021-09-27
- 怎樣做網(wǎng)站更容易被收錄 2021-01-27
- 網(wǎng)站建設(shè)服務(wù)商哪家好？找建站建設(shè)服務(wù)商做網(wǎng)站要注意的十條 2023-03-22
- 什么樣的公司需要做網(wǎng)站 2016-08-04
- 如何使企業(yè)做網(wǎng)站能在搜索引擎上有好的名次？ 2022-08-08
- 上海金山做網(wǎng)站需先有策劃后建站 2020-12-04
- 簡單說一下做網(wǎng)站建設(shè)優(yōu)化應(yīng)該注意的問題 2022-12-07
- 做網(wǎng)站就要做“3好”網(wǎng)站要素 2022-07-03