HTML+CSS+JavaScript基礎知識
一、簡介HTML
1、HTML（Hyper Text Mark-up Language超文字標記語言）的縮寫（標記：就是用來描述網頁內容的一些特定符號）。HTML不是程式語言，而是一種描述性的標記語言，用於描述網頁內容的顯示方式，比如文字的顏色、大小，這些都是利用html標記來實現的。
2、HTML文件的建立方式：
- 手工直接編寫（例如記事本）
- 通過圖形化的HTML開發軟體Dreamweaver
- 由web伺服器上的動態網頁程式生成
二、HTML的語法
HTML最基本的語法就是<標記符>內容</標記符>，標記符通常都是承兌使用的，有一個開始標記和一個結束標記。結束標記只是在開始標記的前面加上一個斜槓/當瀏覽器開啟html檔案後，就會理解裡面的標記符，然後把標記符對應的功能表達出來。
HTML標記的型別：單標記與雙標記
1、單標記
- <標記名稱>：單一型，無屬性值。如<br/>
- <標記名稱 屬性="屬性值">：單一型，有屬性值。如<hr width="80%" />
- <標記名稱>...</標記名稱>：沒有屬性值。如<title>...</title>
- <標記名稱 屬性="屬性值">...</標記名稱>：有屬性值。如<body bgcolor="red">...</body>
- 標記與屬性、屬性之間以空格分隔
- 屬性不區分先後順序，且屬性不是必須的
- 雖然在HTML中標記不區分大小寫，但在XHTML中所有的標記都必須小寫，所以建議所有標記都採用小寫
所有的網頁檔案，通常由四對標記來構成文件的骨架，它們是：
<html>：標識網頁檔案的開始和結束，所有的html元素都要放在這對標記中
<head>：標識網頁檔案的頭部資訊，如標題、搜尋關鍵字等
<title>標題</title>：標識檔案的標題
</head>
<body>：標識檔案的主體部分
正文
</body>
</html>
（一）、meta標記用於定義檔案資訊
meta標記用於定義檔案資訊，對網頁檔案進行說明，放置於<head></head>之間
- 設定關鍵字：<meta name="keywords" content="value">，多個關鍵字內容之間可以用逗號分隔。
- 設定描述：<meta name="description" content="value"/>
- 設定作者：<meta name="author" content="value"/>
- 設定字符集：<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
- 設定頁面定時跳轉：<meta http-equiv="Refresh" content="2;http://www.itcast.com"/>
（二）、網頁主體標記body
1、註釋：<!--註釋內容-->
2、body屬性：
<body bgcolor="背景顏色" background="背景圖片" text="文字顏色" link="連結文字顏色" vlink="訪問過的連結文字顏色" alink="啟用的連結文字顏色" leftmargin="zuobianjie" rightmargin="右邊界" topmargin="上邊界" bottommargin="下邊界">
（三）、字型修飾
1、<font>標記：
<font color="文字顏色" size="字號" face=""></font>
2、字元格式
3、段落控制標記
<p align="對齊方式"></p>
屬性名稱：align，屬性值：left（預設）、center、right
4、段落標題
<hx align="對齊方式"></hx>
x取值[1-6]：hx內的文字對自動加粗顯示。
注：hx針對的物件時段落，font針對的物件時任意文字
5、換行：<br/>換行不換段
6、水平直線：<hr/>
（三）、特殊標記
1、定義一個塊引用：使用文字縮排
格式：<blockquote>...</blockquote>
屬性名稱：cite，屬性值：url，說明：被引用的地址
2、居中標記<center>內容</center>（被廢棄的標籤）
3、預格式化：<pre></pre>
4、顯示已經格式化好的文字，不加此標記的話，HTML瀏覽器會忽略所有空格和製表符
（四）、列表標記
1、列表標記的用途：列表標記可以建立一般的無需列表、編號列表，以及定義列表的三種方式。還可以在一種列表中巢狀另一種列表。便於概括顯示一系列相關的內容。
- 無需列表：<ul>...</ul>
- 有序列表：<ol>...</ol>
- 定義列表：<dl>...<dl>
- 語法：<ul type="專案符號型別"> <li type="專案符號型別">內容1</li> <li>內容2</li> </ul>
3、有序列表
- 語法：<ol start="列表起點" type="專案符號型別"> <li>內容1</li> <li>內容2</li> </ol>
- 語法：
（五）、圖片
1、web上支援的圖片格式
- GIF（圖形交換格式）：GIF格式檔案最多隻能儲存256種顏色。該格式支援透明色，支援動畫效果。
- JPEG（聯合影象專家組）：改格式不支援透明色及動畫，顏色可達1670萬種。
- PNG（網格可移植格式）：該格式支援透明色，但不支援動畫，顏色從幾十種至1670萬種。
- 絕對路徑：提供目標文件的完整主機名稱、路徑資訊、及文件全稱
- 相對路徑：從當前文件開始的路徑
- 根相對路徑：從站點根目錄開始的路徑，以/開頭
四、表格
（一）、表格結構和屬性
1、因為表格中可以包含任何內容，所以在使用DIV+CSS之前，網頁設計師是使用表格對網頁內容進行排版與佈局的
2、表格基本結構：
- <table>...</table>--------定義表格
- <tr>...</tr>----------定義行
- <td>...</td>-----------定義列（單元格）
- <th>...</th>-----------定義標題欄（文字加粗）
3、表格的屬性<table>
4、<table>標籤下的邊框設定
4、行的屬性<tr>
5、列的屬性<td>
（二）、表格的結構化
1、結構化格式：
- <table>
- <thead>...</thead>---------表頭區
- <thead>...</thead>---------表體區
- ..........
- <tfoot>...</tfoot>----------表尾區
- </table>
3、表格的標題：<table> <caption>...</caption> </table>
五、超連結
一個網站由多個網頁組成的，網頁之間通過連線實現相互關聯。
（一）、連線的概念
實現當前文件到目標文件的一種跳轉。
（二）、連結語法
<a href=連線的目標 title="註釋" target="開啟連結視窗的形式">...</a>
- _blank：在新視窗中開啟
- _self：在自身視窗中開啟（預設）
- _parent：在上一級視窗中開啟
- _top：在本視窗中開啟
- <a href=目標文件位置及全稱>
- <a href=URL>
- <a href=mailto:電子郵件地址>
- 建立錨點：<a name="錨點名稱">...</a>
- 連結錨點：<a href="#錨點名稱">...</a>
5、空連結：就是沒有目標端點的連結
- <a href="#"></a>
A、設為首頁：<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">設為首頁</a>
B、新增收藏：<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夾</a>
6、指令碼連結：是一種特殊的連結，當單機設定指令碼連結的文字或影象時，可以執行相應的JavaScript語句。
例如：
<a href=javascript:window.open(“http://www.163.com”)>新浪</a>
- 關閉視窗：輸入javascript:window.close()
- 開啟視窗：輸入javascript:window.open ('檔名')
六、表單
（一）、表單的功能
1、表單的作用是從訪問您web站點的使用者那裡獲取資訊，訪問者可以使用諸如文字框、列表框、單選框及複選框之類的表單元素輸入資訊，然後單擊某個按鈕提交這些資訊。
2、客戶端和伺服器端進行交流的途徑。
（二）、表單標記
1、form標記用於建立一個表單，定義表單的開始和結束，它是一個容器，用於包含其他表單元素，例如文字框、單選框等。表單元素必須寫在form標記內才有用。
2、格式：
<form action=URL（處理表單資訊的伺服器端應用程式） method=處理表單資料的方法（POST/GET）如果不寫預設為GET name=表單名稱>...</form>
3、表單元素標記：
A、單行文字框：
<input name="文字框名稱" type="text" value="初始值" size="顯示字元數" maxlength="最多容納字元數" readonly="readonly"（設定為只讀） disabled="disabled"（設定為不可操作） />
B、密碼框：
<input name="密碼框名稱" type="password" value="初始值" size="顯示字元數" />
C、多行文字框：
<textarea name="文字框名稱" cols="每行的字元數" rows="顯示的行數"></textarea>
D、單選框：
<input name="單選框名稱" type="radio" value="提交值" checked="checked"（是否被選中）/>
E、複選框：
<input name="複選框名稱" type="checkbox" value="提交值" checked="checked" />
F、標註：
<label for="man">男</label> <input type="radio" name="sex" value="男" id="man">
G、列表框：
- 選單式：
<select name="列表框名稱">
<option selected="selected"（哪個為初始值就新增selected語句） value="提交值">列表1</option>
<option value="提交值">列表2</option>
......
</select>
分組：<optgtoup label="分組名稱"></optgroup>
- 列表式
H、按鈕：
<input type="按鈕型別（reset重置表單、submit提交表單、button普通按鈕）" name="按鈕名稱" value="按鈕顯示文字" />
I、圖片按鈕：
<input name="按鈕名稱" type="image" src="圖片路徑" />
J、隱藏域：
<input name="名稱" type="hidden" value="提交值" />
K、瀏覽框：
<input name="名稱" type="file" size="顯示長度" />
L、表單外框：
<fieldset >...</fieldset>--------定義圍繞表單中元素的邊框
<legend>...</legend>---------legend為fieldset定義標題
七、插入多媒體元素標記
1、Flash動畫的插入
2、插入MP3音樂
3、插入背景音樂
<bgsound src="音樂檔名及路徑" loop="迴圈次數" />（如果loop=-1即為無限迴圈）
4、插入視訊wmv格式
<embed src="tmcq.wmv"></embed>
5、網路流媒體檔案的插入
<embed src="http://player.youku.com/player.php/sid/XMzA1MDE5MDMy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">
</embed>
6、滾動字幕
<marquee>滾動的文字</marquee>
- direction="滾動方向"（left、right、up、down）
- behavior="滾動方式"（scroll、slide、alternet）
- loop="迴圈次數"（若未指定則迴圈不止，loop=infinite）
- bgcolor=""
- onMouseOver="this.stop()" onMouseOut="this.start()"
- scrollamount=""
- scrolldelay=""
八、框架--實現網頁之中巢狀網頁
1、框架的功能：
將瀏覽器劃分為不同的區域，每個區域可以包含不同的網頁。以實現多個網頁在一個瀏覽器視窗中顯示的效果。
2、框架的格式：
寫框架時，不需要寫body語句。
<frameset rows="行數及行高" cols="列數及列寬" framespcing="框架間距" frameborder="是否顯示邊框（yes,no/0,1）" border="邊框寬度" bordercolor="邊框顏色">
<frame src="檔案地址及名稱" name="框架名稱" noresize="是否允許改變尺寸（true/false）" scrolling="滾動條顯示（yes/no/auto）">
</frameset>
3、內嵌式框架
<iframe src="被巢狀的網頁地址及名稱" width="寬度" height="高度" frameborder="是否顯示邊框（0,1）" scrolling="滾動條顯示（yes/no/auto）">
</iframe>
九、從html邁向xhtml
1、什麼是XHTML？
XHTML是The Extensible Hyper Text Markup Language的縮寫，xhtml的意思是可擴充套件標識語言。
XHTML是HTML向XML過度的一個橋樑，Xhtml是基於html的，這是更嚴密、程式碼更簡潔的HTML版本。
2、DOCTYPE
DOCTYPE是document type（文件型別）的簡寫，主要用來說明你用的XHTML或HTML是什麼版本。瀏覽器根據DOCTYPE定義的DTD來解釋頁面程式碼，並展現出來。所以，建立符合標準的網頁，DOCTYPE宣告是必不可少的關鍵組成部分。
3、XHTML1.0提供了三種DTD宣告：
- 過度的（Transitional）：要求非常寬鬆的DTD，它允許你繼續使用HTML4.0.1的標記（但是要符合xhtml的語法），完整程式碼如下：
- 嚴格的（Strict）：要求嚴格的DTD，你不能使用任何表現層的標記和屬性，例如<br>，完整程式碼如下：
- 框架的（Frameset）：專門針對框架頁面設計使用的DTD，如果你的頁面中包含有框架，需要採用這種DTD。完整程式碼如下：
4、XHTML與HTML的區別：
- XHTML標籤必須被正確的巢狀；
- XHTML標籤必須被關閉；
- 標籤名必須用小寫字母；
- 屬性名必須用小寫，必有值，值必加引號；
一、Web標準簡介
1、什麼是web標準？
web標準不是某一個標準，而是由W3C和其他標準化組織指定的一系列的標準集合，包含我們熟悉的HTML、XHTML、JavaScript、CSS等。
2、web標準的目的？
在於建立一個統一的用於web表現層的技術標準，以便於通過不同瀏覽器或終端裝置向最終戶展示資訊內容。
3、採用web標準的好處？
- 提高頁面瀏覽速度：使用css方法，比傳統的設計方法至少節約50%以上的檔案尺寸。
- 縮短改版時間，將表現（樣式/外觀）與內容（資訊/資料）相分離：只需要簡單的修改幾個css檔案就可以重新設計一個有成千上萬頁面的站點。
- 降低網站流量的費用：頻寬要求降低（程式碼更簡潔），成本降低。
- 更容易被搜尋引擎搜尋到：提高網站在百度或谷歌上的排名。
- 內容能被更廣泛的裝置訪問：包括螢幕閱讀、手持裝置、搜尋機器人、印表機、電冰箱等等。
- 結構（structure）
- 表現（presentation）
- 行為（behavior）
5、理解表現和結構的分離
基本的概念：內容、結構、表現和行為
- 內容：就是製作者放到頁面內真正想讓訪問者瀏覽的資訊。
- 結構：使內容更加具有邏輯性和易用性（類似於一級二級標題、正文、列表等稱為結構）
- 表現：用於修飾內容外觀的樣式
- 行為：對內容的互動及操作效果，如通過JavaScript判斷表單提交等
二、CSS簡介 （一）、概念 1、CSS是Cascading Style Sheets（層疊樣式表）的簡稱。 2、更多的人把它稱作樣式表，顧名思義，它是一種設計網頁樣式的工具。藉助CSS的強大功能，網頁將在你豐富的想象力下千變萬化。實際上CSS程式碼都是由一些最基本的語句組成的。 3、CSS可以作為HTML、XHTML、XML的樣式控制語言。
（二）、CSS語法結構
1、選擇符{ 屬性：值 }
例如：body{ font-size : 12px; }
引數說明：
- 選擇符（Selector）：指明這組樣式所要針對的物件。可以是一個XHTML標籤，如body、h1等；也可以是定義了特定的ID或class的標籤，如#main選擇符表示選擇<div id="main">，即一個被指定了main為id的物件。
- 屬性（Property）：選擇符的樣式屬性，如顏色、大小、定位、浮動方式等。
- 值（Value）：指屬性的值。
2、CSS長度單位
3、CSS顏色單位
4、CSS控制字型
（三）、CSS在網頁中的應用方式
1、內聯式樣式表：直接寫在現有的標記中，如：
<p style="color:red">...</p>
2、嵌入式樣式表：使用<style></style>標籤嵌入到HTML檔案的頭部<head>標記內，如：
<style type="text/css">...</style>
3、外部連結式：將樣式表寫在一個獨立的css檔案中，然後再頁面head區<head>標記內用<link>標籤呼叫它，如：
<link href="main.css" rel="stylesheet" type="text/css">
4、匯入式樣式表：匯入式樣式表和連結式樣式表的功能基本相同，只是語法和動作方式略有不同，同樣也將匯入式樣程式碼寫在<head>標記內，如：
<style type="text/css">
@import url(basic.css);
</style>
（四）、CSS選擇符型別
1、型別選擇符：就是HTML文件中的元素，如：
p{屬性：值}
2、類選擇符：可以自定義樣式，應用於一個或多個網頁元素，類在網頁中可以出現多次用於定義重複的樣式，類以.開頭，後面的名稱自己定義，類定以後還需要在網頁中加入class=類名稱，加以呼叫。如：
.warning{屬性：值}
<p class="warning">...</p>
3、ID選擇符：與類基本相似，只是以英文#開頭，因為ID具有唯一性，所以在網頁中只能出現一次，用於定義只出現一次的樣式。如：
#main{屬性：值}
<p ID="main">...</p>
（五）、CSS樣式的特點
1、繼承：
- 網頁中子元素將繼承父元素的樣子，例如：要控制段落p中的文字大小，可以直接給body標記家樣式。
2、層疊（覆蓋）：
- 網頁中子元素定義了與父元素相同的樣式，則子元素的樣式將覆蓋掉父元素中的樣式
- 定義後面的樣式會覆蓋前面的樣式
（七）、CSS控制文字
（八）、CSS控制連結
三、CSS高階
（一）、CSS選擇符的詳細使用
1、型別選擇符：
- 就是html文件中的元素[作用於html標記]。如：p{屬性：值}
2、類選擇符：
- 可以自己定義樣式，應用於一個或多個網頁元素，類在網頁中可以出現多次，用於定義重複的樣式。類以英文.開頭，後面的名字自己定義，類定以後還需要在網頁中加入"class=類名稱"，加以呼叫。如： .waring{屬性：值} <p class="waring">...</p>
3、ID選擇符：
- 與類基本相似，只是以英文#開頭，因為ID具有唯一性，所以在網頁中只能出現一次，用於定義只出現一次的樣式。如： #main{屬性：值} <p ID=main></p>
4、通配選擇符：
- 用於定義所有元素。如：*{屬性：值}
5、包含選擇符：
- 所有被e1包含的e2。如：table td{屬性：值}
- 同時給某個元素應用多個類和ID。如：<p class="a1 a2" id="a6">...</p>
6、選擇符分組：
- 將同樣的樣式定義用於多個選擇符，選擇符之間用逗號隔開。如：body，div，p{屬性：值}
7、標籤指定式選擇符：
如果既想使用id或class，也想使用標籤選擇符，那麼，
- h1#content{}：表示針對所有id為content的h1標籤；
- h1.content{}：表示針對所有class為content的h1標籤；
8、組合選擇符：
將以上選擇符組合使用，那麼，
- h1 .content{}：表示在h1下所有class為content的標籤；
- h1 .content，#content h1{}
（二）、CSS常用屬性
1、CSS控制邊框屬性：
| 功能 | 語法 |
| 設定邊框粗細 | border-top-width：12px |
| 設定邊框樣式 | border-bottom-style：slide（實線）、dashed（虛線） |
| 設定邊框顏色 | border-right-color：#000000 |
| 設定某一邊框的屬性 | border-邊框位置：線寬 線型 顏色 |
| 設定四條邊的屬性 | border：線寬 線型 顏色 |
2、CSS控制背景：
| 功能 | 語法 |
| 背景 | background：顏色 圖片 平鋪方式 固定方式 位置 |
| 背景顏色 | background-color：#ccc |
| 背景圖片 | background-image：url |
| 背景圖片的重複方式 | background-repeat：【repeat，no-repeat，repeat-x，repeat-y】 |
| 背景圖片的依附方式 | background-attachment：【scroll，fixed】 |
| 背景圖片的位置 | background-position：top【left、center、right】 center【left、center、right】 bottom【left、center、right】，x座標y座標（左上角是0，0，單位是畫素px） |
3、CSS控制列表：
| 功能 | 語法 |
| 列表屬性 | list-style：list-stylet-ype list-style-position list-style-image |
| 列表專案型別 | list-style-type：none，disc，circle，square，decimal，lower-roman，upper-roman，lower-alpha，upper-alpha |
| 列表專案位置 | list-style-position：inside，outside |
| 列表專案圖片 | list-style-image：url，none |
4、CSS控制元素的尺寸：
| 功能 | 語法 |
| 設定元素的寬度 | width：100px |
| 設定元素的高度 | height：100px |
| 設定元素最小寬和高 | min-width：50px，min-height：50px |
| 設定元素最大寬和高 | max-width：50px，max-height：50px |
| 設定元素的外邊距 | margin：上 右 下 左 |
| 設定元素的內邊距 | padding：上 右 下 左 |
四、CSS+DIV佈局
（一）、網頁元素分類
1、div是什麼？
div是一個容器，能放置內容，例如：<div>內容</div>。
說明：XHTML中每一個標籤物件幾乎都可以成為一個容器，例如：<h1>標題</h1>。
div是xhtml中指定的，專門用於佈局設計的容器物件。CSS佈局中，div是這種佈局的核心物件，做一個簡單的佈局只需要兩樣東西div與css，因此也有人稱CSS佈局為div+css佈局。
（二）、盒子模型
1、盒子模型：W3C組織建議把所有網頁中的物件都放到一個盒子中。
- 設計師可以通過建立定義來控制這個盒子的屬性，這些物件包括段落、列表、標題、圖片及層<div>。
2、盒子模型主要定義這四個區域：內容（content）、填充（padding）、邊框（border）、邊界（margin）。
3、整個盒子模型在頁面中所佔的寬度：左邊界+左邊框+左填充+內容+右填充+右邊框+右邊界。
示意圖如下：
3D示意圖如下：
（三）、CSS佈局
1、元素的分類：不同的元素在文件型別定義DTD（Document Type Difinition）內有預設的分類，可以通過css修改分類的定義。
【1】、塊級元素：{display：block}
- 每個塊級元素都從一個新行開始，而且其後的元素也需要另起一行開始，如：div[層]、標題、段落、表格、body等；
- 塊級元素只能作為其他塊級元素的子元素，而且需要一定的條件；
【2】、內聯元素：{display：inline}
- 內聯元素不需要在新行顯示，而且也不強迫後面的元素換行，如：a、em、span等；
- 內斂元素可以作為任何元素的子元素；
【3】、隱藏元素：{display：none}
- 當某個元素被設定為display：none時，瀏覽器會完全忽略這個元素，此元素將不會被顯示；
2、浮動與清除浮動
【1】、浮動（float）
浮動（float）是CSS實現佈局的一種方式，包括div在內的任何元素都可以浮動的方式展示。
值：
- none：不浮動
- left：物件向左浮動，而右側的內容流向物件的右側
- right：物件向右浮動，而左側的物件內容流向物件的左側
【2】、浮動的清理（clear）
清理時浮動的又一個有用的工具，實現拒絕浮動物件對後面物件的影響。
技巧：
- 當浮動了許多元素之後，突然需要另起一行時，可以製作一個空白的div標籤，為其設定clear：both清楚左右的浮動
【3】、溢位（overflow）
設定當前物件的內容超出其指定高度和寬度時，如何管理內容。
- visible：預設值，不剪下內容，也不新增滾動條；
- auto：在必須時，物件內容才會被剪下，或顯示滾動條；
- hidden：不顯示超過尺寸的內容；
- scroll：總是顯示滾動條；
【4】、定位（position）
設定物件的定位方式。
- static：靜態定位，頁面中沒一個物件的預設值；
- absolute：絕對定位，將物件從文件流中分離出來，通過設定left、right、top、bottom四個方向，相對於父級元素進行絕對定位；
- relative：相對定位，物件不從文件流中分離出來，通過設定left、right、top、bottom四個方向，相對於自身位置進行相對定位；
4、CSS佈局方式
- 預設文件流方式：以預設的html元素的結構順序顯示；
- 浮動佈局方式：通過html元素的float屬性顯示；
- 定位佈局方式：通過設定html元素的position屬性顯示；
#box{
width:300px;
height:300px;
position:relative;
}
#first{
width:300px;
height:300px;
position:absolute;top:10px;
right:20px;
}
#second{
width:300px;
height:300px;
position:absolute;top:100px;
left:200px;
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
5、清除浮動的方式
【1】、額外標籤法：w3c推薦，在浮動元素的最後新增一個空標籤
.clear{
clear:both;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
<div class="clear">...</div>
</div>
【2】、overflow方法：
#box{
width:300px;
height:300px;
overflow:hidden;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
</div>
【3】、利用偽物件after方法（網上最流行的清除浮動程式碼）
.clearFix：after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}
.clearFix{zoom:1}
第三部分：JavaScript
一、JavaScript簡介
1、JavaScript概述
JavaScript是基於物件和事件的指令碼語言。
特點：
- 安全性（不允許直接訪問硬碟），他可以做的是資訊的動態互動。
- 跨平臺性。（只要是可以解釋執行JS的瀏覽器都可以執行，和平臺無關）
2、JavaScript和Java的不同之處
- JS是Netscape公司的產品，Java是SUN（現在是Oracle）公司的產品。
- JS是基於物件，Java是面向物件。
- JS只需要解釋執行，Java需要先編譯成位元組碼檔案，再執行。
- JS是弱型別，Java是強型別。
3、JavaScript和HTML結合的方式
想要將其他程式碼融入html中，都需要以標籤的形式
- 程式碼放在<script>...</script>標籤中
- 使用script標籤的src屬性引入一個js檔案，方便後期更新，及維護。例如：<script type="javascript" src="test.js"></script>
二、JavaScript語法
1、變數
通過關鍵字var來定義，弱型別即是不用指定具體型別。
例如：var x = 12； x = "hello"；
注：JS中特殊的常量undefined，當變數沒有初始化就被使用，該變數的值就是undefined（未定義）。
2、語句
- 判斷結構（if語句）
注：在JS中0就是false，非0就是true（通常用1表示）
- 選擇結構（switch語句）
注：沒有具體型別限制
- 迴圈結構（while語句，do...while語句，for語句）
3、函式
- 一般函式
格式：
function 函式名（形式引數...）
{
執行語句；
renturn 返回值；
}
函式是多條語句的封裝體，只有被呼叫才會被執行。
注意：呼叫有引數的函式，但沒有給其賦值，函式一樣可以執行；或者呼叫沒有引數的函式，給其傳值，也一樣執行。簡單地說，只要寫了函式後面的小括號，函式就可以執行。
其實，在函式中有一個引數陣列物件（arguments），該物件將傳遞的引數都封裝在一個數組中。例如：
function demo（）{
alert（arguments.length）；
}
demo（123，"hello"，true）；//呼叫函式，彈出對話方塊的結果為3。
通過for迴圈遍歷該陣列，如：
for（var x=0；x<arguments.length；x++）{
alert（arguments[x]）；
}
函式在呼叫時的其他寫法：
var show = demo（）//show變數接收demo（）函式的返回值
var show = demo //這種寫法是可以的，意為show和demo是一個函式，那麼該函式也通過show（）的方式執行
- 動態函式
通過JS的內建物件function實現，例如：
var demo = new function（"x，y"；"alert（x+y）"；）；
demo（4,6）；
和一般函式不同的是，動態函式、引數及函式體都可以通過引數傳遞，動態指定。
- 匿名函式
格式：function（）{...}，例如：
var demo = function（）{...}
demo（）；
通常在定義事件屬性的行為時，較為常用。
匿名函式就是一種簡寫格式。
4、陣列
方便操作多元素的容器，可以對其中的元素編號。
特點：可以存任意元素，長度是可變的。
格式：
var arr = new Array（）；
arr[0] = "hello"；
arr[1] = 123；
var arr =["hello"，123，true，"abc"]；
for(var x=0；x<arr.length；x++){
alert(arr[x])；
}
5、物件
JS除了已經提供的內建物件外，也可以自定義物件。
例如：
function Person(){}
var p = new Person()；
p.name = "zhangsan"
p.age = 13；
p.function(){
alert("run")；
}
或：
funtion Person(){
this.name = name；
this.age = age；
}
var p = new Person("zhangsan"，13)；
with語句
格式：
with（物件）{}
應用：
當呼叫一個物件中多個成員時，為了簡化呼叫，避免"物件. "這種形式的重複書寫，可以寫成：
var p = new Person(“zhangsan”,20);
with(p)
{
alert(name+”,”+age);
}
with語句定義了某個物件的作用域，在該域中可以直接呼叫該物件的成員。 for...in語句
用於遍歷物件屬性。
例：
var p = new Person(“zhangsan”,20);
for(x in p){
alert(x);//結果是兩個對話方塊，一個是name，一個是age。
alert(x+”:”+p[x]);//可以得到屬性與屬性的值。p[x]:p物件就是個陣列，要通 過指定的元素名獲取元素的值。
}
三、window物件
1、navigator物件
- appName屬性：瀏覽器的名稱
- AppVersion屬性：瀏覽器的版本號
2、location物件
- href屬性：獲取或者設定地址
3、screen物件
- height與availHeight屬性：獲取螢幕的高度，是否去除工作列
- width與availWidth屬性：獲取螢幕的寬度，是否去除工作列
4、event物件
- keyCode屬性：獲取鍵盤按鍵
- returnValue屬性：獲取或者設定某個屬性的返回值
- srcElement屬性：獲取某個事件的源物件
5window方法
- confirm：彈出一個確認對話方塊，返回值的值為true或false
- focus：使某個元素獲得焦點，並執行onfocus時間制定的程式碼
- moveBy與moveTo：移動
- open：開啟視窗，可以制定標題、開啟方式、視窗屬性（標題欄、滾動條、可變大小等）
- prompt：顯示一個提示框，有一條訊息和一個輸入框
- setTimeout與clearTimeout：間隔多長時間之後執行
- setInterval與clearInterval：每間隔多長時間執行