JavaScript Bible的學習記錄1 – HTML, Dom和JavaScript中的基本概念

雖叫原創,其實相當多的內容借鑒於JavaScript Bible這本書。是自己學習的一些思路整理的記錄。毫不謙虛的說,難免粗淺,錯誤。有興趣的朋友一起交流。

今天談到的都是最基本的知識,但也是有一個好的開始的保證。完事開頭難嗎,接觸到正確的知識(包括術語,概念,理念等)都很重要。

HTML,是一種標簽語言,用於書寫web page。一個最基本的html文檔,


  
    
    
  
  
  

在互聯網上查詢所有關於html tag的意義第一個鏈接應該都是指向w3c school的站點。對於html tag的最權威解釋。

其中各個tag之後會學習到。現在看到的一個比較特殊的tag是meta。它被定義為data of data,也就是元數據。是對於整個文檔的描述。例如可能描述文檔的作者,文檔的內容,文檔是用的編碼等。這個tag是提供給計算機關於該處理該文檔的有用信息。比如對於搜索引擎,分析各個crawl來的web page的meta data是必不可少的工作。

DOM: 文檔對象模型。DOM是對於html中各個tag的一種結構化模型。每個tag被視為一個object。一篇html文檔所包含的全部對象被組織成一棵樹,每一個tag是一棵樹中的node。DOM的重要之處在於對於tag的認識的變化。對象是一個更貼近於程序的概念,同時擁有屬性,方法和事件。以後會有詳細信息,貼一個書中的例子:




A Simple Button with an Event Handler
<script type="text/javascript" src="jsb-06-01.js"></script>



// tell the browser to run this script when the page has finished loading
window.onload = applyBehavior;
// apply behavior to the button
function applyBehavior()
{
// ensure a DOM-aware user agent
if (document.getElementById)
{
// point to the button
var oButton = document.getElementById(’clicker’);
// if it exists, apply behavior
if (oButton)
{
oButton.onclick = behave;
}
}
}
// what to do when the button is clicked
function behave(evt)
{
alert(’Ouch!’);
}

有必要說明的是對於javascript編程和瀏覽器的另一個重要概念是render tree。對應於DOM,render tree是經由瀏覽器java script執行和對於Dom中各種資源處理後動態生成的最終展現給用戶的樹。

最後介紹一個很不錯的學習javascript和html的工具網站:https://xem.github.io/miniCodeEditor/ 可以即時展現HTML和JavaScript的效果,非常好的一個學習工具。

發佈留言