網站構建初級教程-JavaScript 初級教程

JavaScript 初級教程

在數百萬張頁面中,JavaScript 被用來改進設計、驗證表單、檢測瀏覽器、創建cookies,等等等等。

JavaScript 是因特網上最流行的腳本語言,並且可在所有主要的瀏覽器中運行,比方說Internet Explorer、 Mozilla、Firefox、Netscape、和Opera。

你應該具備的基礎知識:

在繼續學習前,你應該對以下知識有基本的了解:

  • HTML
  • XHTML

如果你希望首先學習這些內容,請在首頁訪問相關教程。

什麼是JavaScript?

  • JavaScript 被設計用來向HTML 頁面添加交互行為。
  • JavaScript 是一種腳本語言(腳本語言是一種輕量級的編程語言)。
  • JavaScript 由數行可執行計算機代碼組成。
  • JavaScript 通常被直接嵌入HTML 頁面。
  • JavaScript 是一種解釋性語言(就是說,代碼執行不進行預編譯)。
  • 所有的人無需購買許可證均可使用JavaScript。

Java 和JavaScript 是相同的嗎?

不同!

在概念和設計方面,Java 和JavaScript 是兩種完全不同的語言。

Java(由太陽微系統公司開發)很強大,同時也是更複雜的編程語言,就像同級別的C 和C++。

JavaScript 能做什麼?

JavaScript 為HTML 設計師提供了一種編程工具
HTML 創作者往往都不是程序員,但是JavaScript 卻是一種只擁有極其簡單的語法的腳本語言!幾乎每個人都有能力將短小的代碼片斷放入他們的HTML 頁面當中。
JavaScript 可以將動態的文本放入HTML 頁面
類似於這樣的一段JavaScript 聲明可以將一段可變的文本放入HTML 頁面:document.write(「<h1>」 + name + 「</h1>」)
JavaScript 可以對事件作出響應
可以將JavaScript 設置為當某事件發生時才會被執行,例如頁面載入完成或者當用戶點擊某個HTML 元素時。
JavaScript 可以讀寫HTML 元素
JavaScript 可以讀取及改變HTML 元素的內容。
JavaScript 可被用來驗證數據
在數據被提交到服務器之前,JavaScript 可被用來驗證這些數據。
JavaScript 可被用來檢測訪問者的瀏覽器
JavaScript 可被用來檢測訪問者的瀏覽器,並根據所檢測到的瀏覽器,為這個瀏覽器載入相應的頁面。
JavaScript 可被用來創建cookies
JavaScript 可被用來存儲和取回位於訪問者的計算機中的信息。

網站構建初級教程-CSS 初級教程

CSS 初級教程

需要具備的基礎知識

在繼續學習之前,你需要對下面的知識有基本的了解:

  • HTML
  • XHTML

如果你希望首先學習這些項目,請在首頁訪問相關教程。

CSS 概述
  • CSS指層疊樣式表( C ascading S tyle S heets)
  • 樣式定義如何顯示HTML元素
  • 樣式通常存儲在樣式表
  • 把樣式添加到HTML 4.0中,是為了解決內容與表現分離的問題
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲在CSS文件
  • 多個樣式定義可層疊為一

樣式解決了一個普遍的問題

HTML 標籤原本被設計為用於定義文檔內容。通過使用<h1>, <p>, <table> 這樣的標籤,HTML 當初被指望用來表達“這是標題”、“這是段落”、“這是表格”之類的信息。而文檔的佈局被期望由瀏覽器來完成,而不使用任何的格式化標籤。

由於兩種主要的瀏覽器(Netscape 和Internet Explorer)不斷地將新的HTML 標籤和屬性(比如字體標籤和顏色屬性)添加到HTML 規範之中,因此創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。

為了解決這個問題,萬維網聯盟(W3C),這個非營利的標準化聯盟,肩負起了HTML 標準化的使命,並在HTML 4.0 之外創造出STYLES(樣式)。

所有的主流瀏覽器均支持層疊樣式表。

樣式表極大地提高了工作效率

樣式表定義如何顯示HTML 元素,諸如HTML 3.2 的樣式中的字體標籤和顏色屬性通常被保存在外部的.css 文件中。通過僅僅編輯一個簡單的CSS 文檔,外部樣式表使你有能力同時改變站點中所有頁面佈局的外觀。

由於允許同時控制多重頁面的樣式和佈局,CSS 可以稱得上WEB 設計領域的一個突破。作為網站開發者,你可以為每個HTML 元素定義樣式,並將之應用於你希望的任意多的頁面中。如需進行全局變換,只需簡單地改變樣式,然後網站中的所有元素均會被自動地更新。

多重樣式將層疊為一個

樣式表允許以多種方式規定樣式信息。樣式可以被規定於單個的HTML 元素中,在HTML 頁的頭元素中,或在一個外部的CSS 文件中。甚至可以在一個單一的HTML 文檔內部引用多個外部樣式表。

層疊次序

當同一個HTML元素被不止一個樣式所定義時,會使用哪個樣式呢?

一般而言,所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中,其中數字4 擁有最高的優先權。

  1. 瀏覽器缺省設置
  2. 外部樣式表
  3. 內部樣式表(位於<head> 標籤內部)
  4. 內聯樣式(在HTML 元素內部)

因此,內聯樣式(在HTML 元素內部)擁有最高的優先權,這意味著它將優先於以下的樣式聲明:<head> 標籤中的樣式聲明,外部樣式表中的樣式聲明,或者瀏覽器中的樣式聲明(缺省值)。

網站構建初級教程-HTML 初級教程

HTML 初級教程

實例

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

親自試一試

什麼是HTML?

HTML 是用來描述網頁的一種語言。

  • HTML指的是超文本標記語言( H yper T ext M arkup L anguage)
  • HTML不是一種編程語言,而是一種標記語言(markup language)
  • 標記語言是一套標記標籤(markup tag)
  • HTML使用標記標籤來描述網頁

HTML 標籤

HTML 標記標籤通常被稱為HTML 標籤(HTML tag)。

  • HTML標籤是由尖括號包圍的關鍵詞,比如<html>
  • HTML標籤通常是成對出現的,比如<b>和</b>
  • 標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤
  • 開始和結束標籤也被稱為開放標籤閉合標籤

HTML 文檔= 網頁

  • HTML文檔描述網頁
  • HTML文檔包含HTML標籤和純文本
  • HTML文檔也被稱為網頁

Web 瀏覽器的作用是讀取HTML 文檔,並以網頁的形式顯示出它們。瀏覽器不會顯示HTML 標籤,而是使用標籤來解釋頁面的內容:

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

例子解釋

  • <html> 與</html> 之間的文本描述網頁
  • <body> 與</body> 之間的文本是可見的頁面內容
  • <h1> 與</h1> 之間的文本被顯示為標題
  • <p> 與</p> 之間的文本被顯示為段落

網站構建初級教程-WWW 初級教程

WWW 初級教程

什麼是WWW?

它如何工作?

什麼是瀏覽器?

什麼是服務器?

什麼是WWW?

  • WWW 指萬維網(World Wide Web)
  • 萬維網常被稱為Web
  • Web 是由遍布全球的計算機所組成的網絡
  • 所有Web 中的計算機都可以彼此通信
  • 所有這些計算機都使用名為HTTP 的通信標準

WWW 如何工作?

  • Web 信息存儲於被稱為網頁的文檔中
  • 網頁是存儲於被稱為Web 服務器的計算機上
  • 讀取網頁的計算機稱為Web 客戶端
  • Web 客戶端通過稱為瀏覽器的程序來查看網頁
  • 主要的瀏覽器有Internet Explorer 和Mozilla Firefox

瀏覽器如何讀取頁面?

  • 瀏覽器可通過一個請求來讀取某個服務器上的一張網頁
  • 請求是一個包含頁面地址的標準HTTP 請求
  • 頁面地址類似這樣:http://www.someone.com/page.htm

瀏覽器如何顯示頁面?

  • 所有的網頁都含有其如何被顯示的結構
  • 瀏覽器通過閱讀這些結構來顯示頁面
  • 最常用的顯示結構稱為HTML 標籤
  • 用於段落的HTML 標籤類似這樣:<p>
  • 在HTML 中像這樣定義段落:<p>This is a Paragraph</p>

誰制定web 標準?

  • web 標準不是由Netscape 或Microsoft 制定的
  • web 的規則制定主體是W3C
  • W3C 指的是萬維網聯盟(World Wide Web Consortium)
  • W3C 將各種規範訂立為web 標準
  • 最核心的web 標準是HTML、CSS、XML
  • 最新的HTML 標準是XHT​​ML 1.0

如需學習更多有關W3C的知識,請學習我們的W3C教程

網站構建初級教程

網站構建初級教程

每個網站開發人員都有必要了解以下幾方面的知識:

  • 萬維網如何工作
  • HTML 語言
  • 如何使用層疊樣式表(CSS)
  • JavaScript 編程
  • XML 標準
  • 服務器腳本技術
  • 使用SQL 來管理數據

WWW – 萬維網

WWW 是遍布全球的計算機網絡。WWW 常被稱作Web(網絡)。

Web 上的計算機使用標準的協議和語言進行通信。

W3C 致力於發展用於Web 的規則和標準。

學習我們的萬維網入門教程

HTML – Web 的語言

HTML 是屬於Web 的語言,每個開發人員都應對它具備基本的了解。

你可以使用HTML 的“標記標籤”來定義網頁的內容和結構。

<h1> 定義標題,而<p> 則定義段落。

學習我們的HTML入門教程或者學習完整的HTML教程

CSS – 層疊樣式表

樣式表定義如何顯示HTML 元素。

如果樣式保存在外部文件中,那麼僅僅通過改變CSS 文件,你就可以改變網站中所有HTML 頁面的的樣式和外觀。

假如你曾試圖改變所有頁面中標題的字體和顏色,就很容易理解CSS 可以在多大程度上提高你的工作效率。

學習我們的CSS入門教程或者學習完整的CSS教程

JavaScript – 客戶端腳本

JavaScript 用於客戶端的腳本化。客戶端腳本化指的是Web 瀏覽器編程。

你很有必要學習JavaScript,這樣你就有能力提供動態性更強的網站內容。

一個類似document.write(「<p>」 + date + 「</p>」) 的JavaScript 語句,可以向HTML 頁面寫入動態的文本。

學習我們的JavaScript入門教程或者學習完整的JavaScript教程

XML – 擴展標記語言

XML 不是HTML 的替代者。XML 用來描述及傳輸數據,而HTML 用來顯示數據。

XML 及一系列的XML 標準正迅速成為對數據進行傳輸、存儲及操作的最常用(及通用)的工具。

學習我們的XML入門教程或者學習完整的XML教程

服務器端腳本化

服務器端腳本化指的是服務器端編程。

學習服務器端腳本是很有必要的,這樣我們就有能力提供動態性更強的網站內容。

通過服務器端編程,我們可以訪問數據庫,並向瀏覽器返回結果,這也是許許多多的服務器端腳本應用中的重要一項。

學習我們的服務器端腳本入門教程或者學習完整的ASP教程或者完整的PHP教程

使用SQL 管理網站數據

結構化查詢語言(SQL) 是用來訪問諸如SQL Server、Oracle、Sybase 及Access 等數據庫的通用標準。

網絡管理員們都有必要明白,SQL 是用來和網絡上的數據庫交互的可靠引擎。

學習我們的SQL入門教程或者學習完整的SQL教程