CSS與JavaScript的區別是什么？

SS（層疊樣式表）和JavaScript是Web開發中的兩個核心組成部分，它們各自在網頁設計和交互性方面發揮著重要的作用。盡管它們在許多方面是互補的，但它們在功能、語法和用途上存在著明顯的區別。

一、功能上的區別

CSS主要負責網頁的樣式和布局。它定義了網頁元素（如文本、圖片、視頻等）的外觀，包括顏色、字體、邊距、對齊方式等。CSS使開發者能夠創建出美觀、一致的網頁界面，并確保這些界面在各種設備和瀏覽器上都能良好地顯示。

JavaScript則主要負責網頁的交互性和動態功能。它允許開發者為網頁添加點擊事件、表單驗證、動畫效果、數據操作等交互性元素。JavaScript使網頁不再是靜態的，而是能夠響應用戶的操作，提供更加豐富和動態的用戶體驗。

二、語法上的區別

CSS的語法相對簡單，主要基于屬性和值的對應關系。例如，要設置一個段落的文字顏色為紅色，可以使用如下CSS代碼：

```css

p {

color: red;

}

```

JavaScript的語法則更加復雜，它使用類似C語言的語法結構，包括變量、函數、條件語句、循環等。例如，要創建一個簡單的點擊事件，可以使用如下JavaScript代碼：

```javascript

button.addEventListener('click', function() {

alert('Button clicked!');

});

```

三、用途上的區別

CSS通常用于樣式設計和布局調整，包括顏色、字體、邊距、對齊方式等視覺元素的設置。它也可以用于響應式設計，使網頁在不同設備和屏幕尺寸上都能良好地顯示。

JavaScript則廣泛應用于各種交互性功能的實現，如表單驗證、動畫效果、數據操作等。它還可以與服務器進行交互，實現數據的動態加載和更新。

四、總結

CSS和JavaScript在Web開發中各自發揮著重要的作用。CSS負責網頁的樣式和布局，使網頁更加美觀和一致；而JavaScript則負責網頁的交互性和動態功能，使網頁能夠響應用戶的操作，提供更加豐富和動態的用戶體驗。雖然它們在許多方面是互補的，但它們在功能、語法和用途上存在著明顯的區別。因此，在Web開發過程中，需要根據實際需求合理選擇和使用這兩種技術。

頁，又叫Web，其實就是一個后綴名為.html的文本文件。HTML文件采用超級文本標記語言(HyperText Markup Language)書寫而成，最終由客戶端瀏覽器解釋并呈現給用戶。

Web由HTML內容、CSS樣式、JavaScript前端行為三要素組成。開發一個網頁，就好比設計一出舞臺劇，首先要決定舞臺上有哪些演員(HTML網頁內容)、演員的扮相(CSS網頁樣式)、演員的動作及劇情(JavaScript網頁前端行為)。

1 HTML

HTML使用標記標簽來描述網頁，標記標簽是HTML語言中最基本的單位，是HTML中最重要的組成部分。

標記是HTML文檔中一些有特定意義的符號，這些符號指明網頁內容的含義或結構。

標記即標簽，不同的標記能實現不同的功能。HTML標記按功能可大致分為六大類。分別是語義標記、元標記、文本標記、容器標記、嵌入式標記，以及表單和表單元素標記六大類。

(1) 語義標記。又稱結構標記，是指盡量使用有相對應結構含義的HTML標記。語義標記的逐漸增加便于開發者閱讀并寫出優雅美麗的代碼，同時讓瀏覽器的“爬蟲”和機器更好地解析檢索。在沒有CSS的情況下，語義標記讓頁面也能呈現出很好的內容、代碼結構。簡而言之，語義標記的使用，即是為了網頁“裸奔時也好看”。

(2) 元標記。是指位于HTML文件頭部的一些特殊代碼，是解釋說明的標記。其主要功能就是對文檔進行說明，描述HTML文檔的整體信息。元標記向瀏覽者提供某一頁面的附加信息，告訴我們它是誰。當客戶機找服務器要東西時，它幫助一些搜索引擎進行頁面分析，使導出的某一頁面檢索信息能正確地放入合適的目錄中。

HTML元標記出現于網頁頭標簽處，主要包括標題標記、關鍵詞標記、描述標記等，合理運用元標記會使網頁在搜索引擎中表現更為突出。

(3) 文本標記。這是最重要、最基本的標記，一般只能嵌套文本、超鏈接的標簽。為了讓網頁中的文本看上去編排有序、整齊美觀、錯落有致，就要設置文本的標題、字號大小、字體顏色、字體類型以及換行、換段等。而為實現這一目的所使用的特定的HTML語言，就叫作文本標記。

(4) 容器標記。又稱作內容組織標記，可以簡單地理解為它是能嵌套其他所有標簽的標簽，是用來裝東西的容器。容器與容器之間也可以相互嵌套，表現為父級容器和子級容器。

如div標簽中可以鑲嵌span標簽，div可以看作是一個可以裝入其他標簽的大容器，span是一個只能裝文本的小容器，大容器當然可以放得下小容器。

(5) 嵌入式標記。常用于嵌入圖像、音頻、視頻、flash動畫、插件等多媒體元素，使網頁呈現方式更加多樣化，還可以嵌套某些標簽來指定視頻文件的路徑或者網址路徑，決定多媒體元素的屬性和播放方式等。

(6) 表單和表單元素標記。多用于制作網頁和用戶交互的界面、控件，是客戶端與服務器端進行信息交流的途徑。用戶可以使用諸如文本域、列表框、復選框及單選按鈕之類的表單元素輸入信息，然后單擊某個按鈕提交這些信息。

2 CSS

如果說HTML語言規定了網頁的具體內容，那么CSS(cascading style sheets)就是為了給這些內容進行規整和裝飾而存在的。CSS最初的誕生，就是因為HTML為了滿足頁面設計者的顯示要求而變得臃腫復雜，因而需要一種樣式表語言達到控制頁面呈現內容的效果。CSS讓整個頁面可視化程度更強，可以說是網頁的門面。如果將網頁比作一個舞臺，HTML是舞臺上的演員，那么CSS就是演員的扮相，更完美地將節目(即頁面內容)呈現在觀眾面前。

CSS即層疊樣式表。作為一種用來表現HTML或者XML的計算機語言,CSS可以對網頁元素位置的排版進行像素級別的精確控制,可以靜態地修飾網頁,也可以配合腳本語言(如后文會提到的JavaScript)動態地格式化網頁元素。

所謂層疊，是即樣式可以層層疊加。

每個HTML元素都有一組樣式屬性,它們可以通過CSS來設定。這些屬性涉及背景(background)、字體(fonts)、顏色(color)、鏈接(link)、邊框(border)、列表樣式(url)等。CSS就是一種先選擇HTML元素,然后設定選中元素屬性的機制。

CSS選擇器和要應用的樣式構成了一條CSS規則。

CSS規則由兩個主要的部分構成：選擇器及一條或多條聲明。選擇器(selector)就是想要改變樣式的HTML元素;每條聲明(declaration)由一個屬性(property)和一個值(value)構成。屬性是想要設置的樣式屬性(style attribute),每個屬性有一個值。屬性和值被冒號(:)分開,CSS聲明總是以分號(;)結束,聲明組以大括號({ })括起來。

3 JavaScript

JavaScript最早是由Netscape Communication(網景)公司開發出來的一種客戶端腳本語言,將JavaScript代碼直接嵌入在HTML頁面中，能對HTML頁面中的HTML、CSS和JavaScript本身進行增加、刪除、修改、查詢等操作，使得客戶端靜態頁面變成支持用戶交互并響應相應事件的動態頁面(DHTML=HTML+CSS+JavaScript)。它的出現彌補了HTML語言的缺陷，使得開發客戶端Web應用程序成為可能。

HTML Web運行在瀏覽器中，這就是說瀏覽器是Web的實際運行環境。如果將運行環境視為一個京劇表演的舞臺，則在這個舞臺上有網頁內容HTML(演員)、網頁樣式CSS(演員的扮相)、網頁行為JavaScript(演員的動作)。JavaScript只能在自己的舞臺上表演，能對舞臺上的既有存在(HTML、CSS、JavaScript)進行操作(增、刪、改、查)，而不能跨越到舞臺外面表演(功能受限，JavaScript程序不能操作瀏覽器之外的事物)。

更進一步思考與觀察，會發現兩個有趣的現象:

① 當網站被服務器軟件架設起來時(如同京劇正式開演)，由于遵守網絡安全協議，JavaScript這個演員的功能受限于表演的舞臺(也就是瀏覽器客戶區)。也就是說，此時JavaScript是存在功能受限的，能對HTML、CSS、JavaScript進行增刪改查，而不能對瀏覽器客戶區之外做任何事情，如不能操作硬盤等本地資源等。為了在互聯網上搭建網站，讓所有人都能看到的，還需要租用域名、空間。

② 當直接雙擊運行本地Web文件時(如同京劇在做排練)，JavaScript的功能相對不受限制。此時JavaScript可以訪問本地資源，如讀取本機IP、操縱本地文件系統等。但這樣架設的Web不能被他人通過網絡訪問，也不能被百度檢索。事實上，我們可以在本地放置無數個網頁，只要我們的硬盤容量足夠大。

JavaScript包含了三個部分的內容：JavaScript腳本語言規范EMCAScript(語言核心)、文檔對象模型DOM(以面向對象的方式操縱文檔內容)、瀏覽器對象模型BOM(以面向對象的方式操縱瀏覽器窗口元素)。

3.1 語言核心EMCA Script

EMCA 是歐洲計算機制造商協會(EuropeanComputer Manufacturers Association)的縮寫，EMCAScript就是這個協會制定的標準化腳本語言。我們知道，JavaScript是一門編程語言，而每一種語言都有它自己的基本語法如數據類型等，這些概念必須遵循一定的規范，瀏覽器開發者要嚴格依據這個規范來開發編譯器，JavaScript程序員要嚴格依據這個規范來調用API。也就是說，EMCAScript是JavaScript的語法規范，規定了JavaScript腳本的核心內容。打個比方，新華字典(也算是一種語言規范)規定了“血”這個字，而無論在“血液”中的讀“xuè”，還是在“血暈”中的讀“xiě”。新華字典規范了漢字，EMCAScript規范了JavaScript。

3.2 文檔對象模型DOM

文檔對象模型(document object model)是針對HTML和XML文檔的應用程序編程接口。DOM 把整個頁面規劃成由多個節點構成的文檔，我們可以用DOM API將頁面內容繪制成一個樹狀圖。在這種模型下，頁面中的每個部分都是可用程序操縱的節點，我們可以通過DOM 來方便地控制頁面的結構和內容(增加、刪除、修改、查詢等)，如我們就可以用document.getElementById()通過id號來查詢文檔中的元素。DOM 使得用戶頁面可以動態地變化，用戶可以和Web文檔內容進行交互。

3.3 瀏覽器對象模型

瀏覽器對象模型BOM(browser object model)是針對瀏覽器的應用程序編程接口。我們可以通過BOM 對瀏覽器窗口進行訪問和操作，例如彈出新的瀏覽器窗口，移動、關閉和更改瀏覽器窗口，提供詳細的網絡瀏覽器信息(navigator object)、詳細的頁面信息(location object)、詳細的用戶屏幕分辨率的信息(screen object)等。BOM 方便我們從瀏覽器上獲得信息，更好地和瀏覽器進行交互。例如，我們可以用window.alert()彈出消息框，用window.prompt()彈出提示框，使得用戶可以和瀏覽器窗口進行交互。

4 案例分析：選項卡控制

點擊沒同選項卡，實現如下切換效果：

代碼：

<html>
<head>
<title>tab control</title></head>
<style type="text/css">
#tab{
	position:relative;/* 定義選項卡的為相對定位，使其子級元素有定位參考對象 */
	width:45%;
	height:400px;
}
#tab h4{
	display:inline;
	background-color:#ccc;
	color:black;
}
#tab div{
	border:1px #666 solid;
	position:absolute; /*tab下的div疊在一起*/
	top:28px;
	left:0px;
	width:100%;
	height:370px;
	display:none;
}
#tab .block{
	display:block;
}
#tab .up{
    color:#999999;
	background-color:black;
}
</style>
<script>
function tabSwitch(tab,ao) {
	var h=document.getElementById(tab).getElementsByTagName("h4");
	var d=document.getElementById(tab).getElementsByTagName("div");
	var n=document.getElementById(tab).getElementsByTagName("div").length;
	for (var i=0; i < n; i++) {
		if (ao - 1==i) {
			h[i].className +=" up";
			d[i].className +=" block";
		} else {
			h[i].className=" ";
			d[i].className=" ";
		}
	}
}
</script>

<body>
<div id="tab">
<h4 onclick="tabSwitch('tab',1)" class="up">道德經</h4>
<h4 onclick="tabSwitch('tab',2)" >岳陽樓記</h4>
<h4 onclick="tabSwitch('tab',3)" >中庸</h4>
<div class="block">
	<p>上善若水。</p>
	<p>水善利萬物而不爭，處眾人之所惡，故幾於道。</p>
	<p>居善地，心善淵，與善仁，言善信，正善治，事善能，動善時。</p>
	<p>夫唯不爭，故無尤。</p>
</div>
<div>
	<p>不以物喜，不以己悲</p>
	<p>惟江上之清風，與山間之明月</p>
	<p>耳得之而為聲，目遇之而成色</p>
</div>
<div>
	<p>博學，審問，慎思，明辨，篤行。</p>
	<p>學之要能，問之要知，思之要得，辨之要明，行之要篤。</p>
	<p>雖愚必明，雖柔必強。</p>
</div>
</div>
</body>
</html>

ref：

王小峰《大話Web開發：基于知識管理角度》

－End－

了執行Javascript，需要在HTML文件內以特定的方式書寫JavaScript的代碼，JavaScript的書寫方法有多種，其執行的流程也各不相同：

1 <script>標簽嵌入

此種嵌入方法無法操作<script>之后的DOM元素。因為<script>之后的DOM元素還未構造，因此在<script>標簽內就無法取得位于其后的DOM元素。

2 讀取外部JavaScript文件

此種嵌入方法可以指定defer、async屬性。defer可以推遲執行，async可以異步執行。

3 onload嵌入

此種嵌入方法在頁面讀取完后再對其執行，所以可以對所有的DOM元素操作。

<body onload="alert('hello')">
window.onload=function(){alert('hello');};

當window.onload事件觸發時，頁面上所有的DOM、樣式表、腳本、圖片、flash都已經加載完成了。

//window.onload不能同時編寫多個。
//以下代碼無法正確執行，結果只輸出第二個。
window.onload=function(){
  alert("test1");
};

window.onload=function(){
  alert("test2");
};

//$(document).ready()能同時編寫多個
//結果兩次都輸出
$(document).ready(function(){ 
   alert("Hello World"); 
}); 
$(document).ready(function(){ 
   alert("Hello again"); 
});

window.onload和body中onload也有些許區別：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log("window.onload");}

        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }</script>
</head>
<body onload="console.log('bodyonload');">
        <div id="div1">a</div>
</body>
</html>

在IE10和FireFox下，結果為：

"DOMContentLoaded"
"bodyonload"

說明body中的onload會覆蓋window.onload

在chrome下，結果為：

DOMContentLoaded
window.onload
bodyonload

然后，如果把javascript代碼移到最下面，結果又會是什么樣呢？

chrome和IE10、FireFox的結果竟然是一樣的：

DOMContentLoaded
window.onload

IE 10、Fire Fox可以理解，window.on load和body中的 on load 誰在下面就是誰覆蓋誰，只會執行后面的那個。

4 DOM ContentLoaded嵌入

onload方法可能需要等待時間，而本方法可以在完成HTML解析后發生的事件，減少等待時間。

在chrome、IE10和FireFox中，執行結果是：DOMContentLoaded然后才是onload的輸出。所以說一般情況下，DOMContentLoaded事件要在window.onload之前執行，當DOM樹構建完成的時候就會執行DOMContentLoaded事件。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery2.js"></script>
    <script language="javascript">
        window.onload=haha;
        function haha(){console.log(document.getElementById("div1"));}
        if(document.addEventListener){
            function DOMContentLoaded(){
                console.log("DOMContentLoaded");
            }
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        }
    </script>
</head>
<body>
    <div id="div1">a</div>
</body>
</html>

如果你是個jQuery使用者，你可能會經常使用$(document).ready();或者$(function(){})，這都是使用了DOMContentLoaded事件

5 動態載入JavaScript文件

5.1 使用原生js方法

動態創建script標簽，并指定script的src屬性

function loadJs(url, callback) {
    var script=document.createElement('script');
    script.type="text/javascript";
    if (typeof(callback) !="undefined") {
        if (script.readyState) {
            script.onreadystatechange=function() {
                if (script.readyState=="loaded" || script.readyState=="complete") {
                    script.onreadystatechange=null;
                    callback();
                }
            }
        } else {
            script.onload=function() {
                callback();
            }
        }
    }
    script.src=url;
    document.body.appendChild(script);
}
loadJs("test.js", function() {
    alert('done');
});

還可以使用同樣的原理動態加載css文件，只不過插入的的父節點是head標簽。

5.2 使用document.write/writeln(）方式

該種方式可以實現js文件的動態加載，原理就是在重寫文檔流，這種方式會導致整個頁面重繪。

document.writeln("<script src=\"http://lib.sinaapp.com/js/jquery/1.6/jquery.min.js\"></script>");

需要注意的是特殊字符的轉義。

5.3 使用jQuery

使用getScript(url,callback)方法實現動態加載js文件

$.getScript('test.js',function(){
    alert('done');
});