網頁的三位一體
結構層：HTML 頁面結構，語義上描述頁面
表示層：CSS 審美角度裝飾頁面
行爲層：JavaScript交互角度提升頁面用戶體驗
交互就是網頁的元素針對用戶的特定行爲，產生指定的變化
JavaScript是什麼？
JavaScript是用來實現交互的
首先，JavaScript是純文本，用任何純文本編輯器都能編輯它
其次，JavaScript是網頁的一部分，
隨着HTML的請求，JavaScript腳本隨着下載到客戶端
在客戶端本地渲染運行
最後，JavaScript腳本是能夠從網站上扒下來的
JavaScript不是Java，JavaScript是Netscape公司開發的，
Java是sun公司開發的
JavaScript是輕量級的運行在瀏覽器中的語言，弱類型的語言
Java是一種面向對象、跨平臺的開發多種應用的語言
JavaScript是運行在客戶端的計算機上，是前臺的腳本
功能是單一的，僅僅是用來開發頁面的效果
其他asp、JSP、PHP是服務器端腳本，可以和數據庫進行交互，
JavaScript網頁仍是靜態網頁，不是動態網頁
動態和靜態網頁的區別，是指是否與數據庫進行交互
只有asp、JSP、PHP這些網頁纔是動態網頁
JavaScript運行
JavaScript是一種腳本語言，只通過web網頁完成操作
不能像其他語言一樣編譯運行
需要由網頁瀏覽器進行解釋執行
JavaScript還提供操控web瀏覽器的手段，
DOM（document object model）文檔對象模型
JavaScript語言可以調整web瀏覽器窗口的高度、寬度和屏幕位置
DOM是一套對文檔的內容進行抽象和概念化的方法
瀏覽器之爭：
瀏覽器之間的衝突：
Netscape的DOM使用專有的元素，元素成爲層
每個層都有一個唯一的ID，
document.layers[‘myElement’];
微軟公司的DOM document.all[‘myElement’];
導致結果：
在編寫DOM腳本時需要知道將在運行那種瀏覽器環境
許多腳本不得不編寫兩次
五大瀏覽器
Chrome Firefox Safari opera IE
W3C (world wide web 萬維網聯盟)標準化的DOM
讓任何一種程序設計語言對使用任何一種標記語言編寫出來的任何一份文檔進行操控
DOM的定義：
一個與系統平臺和編程語言無關的接口，
程序和腳本可以通過這個接口動態的對文檔的內容、結構和樣式進行訪問和修改
瀏覽器之爭的結局，市場份額的主要贏家Microsoft
所有windows操作系統都預裝IE瀏覽器
影響最重的是網站和網頁設計人員，腳本程序員
目前還沒有瀏覽器能夠完美支持W3C DOM的完美支持
但是編寫JavaScript腳本時再也不需考慮，將在哪個瀏覽器下運行
Google的地圖運用，Ajax進入人們的視野
iPhone的發佈，用戶體驗，流暢
HTML5中的canvas畫布使用JavaScript作爲驅動
PhoneGap等技術出現使JavaScript能開發手機應用
JavaScript的編輯
使用記事本，EditPlus編輯
Web瀏覽器使用chrome瀏覽器
編寫利器：sublimewebstrom Dreamweaver
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一個javascript頁面</title>
<script type="text/javascript">
alert("hello world");
</script>
</head>
<body>
</body>
</html> |
程序設計語言分類：解釋性和編譯性
編譯型：通過編譯器把高級語言編輯出來的源代碼，翻譯成直接在計算機上可以執行的二進制可執行文件的程序
解釋型：不需要編譯器，僅需要解釋器，對於JavaScript，需要瀏覽器負責完成解釋和執行工作
語法：syntax
廣義上包括語句，單詞和標點等各個方面
狹義上特指語句結構方面的各項規則
JavaScript語言的語法跟C語言等其他語言的語法非常相似
JavaScript或其他任何一種程序設計語言設計編寫的腳本都是由一些列的指令構成的，這些指令稱爲語句
只有按照正確的語法編寫出來的語句，才能得到正確的解釋
JavaScript註釋：
/*註釋內容*/
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>第一個javascript頁面</title>
<script type="text/javascript">
/*註釋內容*/
document.title="O(∩_∩)O哈哈哈~";
alert("world hello");
window.location = "http://localhost";
</script>
</head>
<body>
</body>
</html> |