HTML制作網(wǎng)頁(yè)
一、HTML(超文本標(biāo)記語(yǔ)言)
W3C標(biāo)準(zhǔn)（World Wide Web Consortium）
結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言（XHTML/XML）
表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言（CSS）
行為標(biāo)準(zhǔn)（DOM、ECMAScript）
基本結(jié)構(gòu)：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<html>
<head><title>標(biāo)題</title></head>
<body>主體內(nèi)容</body>
? ? ? ? </html>
二、HTML標(biāo)簽
1、標(biāo)簽規(guī)范（XHTML標(biāo)簽規(guī)范）：
簽名應(yīng)小寫
HTML標(biāo)簽應(yīng)閉合
標(biāo)簽應(yīng)正確嵌套
應(yīng)添加文檔類型聲明<!DOCTYPE>
1、定義標(biāo)簽meta（用于定義文件信息）可設(shè)置字符編碼格式，關(guān)鍵字，跳轉(zhuǎn)網(wǎng)頁(yè) （看demo-1）
2、標(biāo)題標(biāo)簽<h1>至<h6>
3、字體樣式標(biāo)簽：<em> 斜體標(biāo)簽，<strong> 粗體標(biāo)簽
4、水平線標(biāo)簽<hr/> 換行標(biāo)簽<br/>（自閉合,沒(méi)有結(jié)束標(biāo)簽）
5、段落標(biāo)簽<p> </p>
6、圖像標(biāo)簽<img>? 超鏈接標(biāo)簽<a>
7、其他： （空格標(biāo)簽）? ©（版權(quán)符號(hào)@）
8、注釋：<!–HTML注釋–>
2、圖像標(biāo)簽
<img? src=? alt= title=? width=? height= />
3、超鏈接標(biāo)簽
1、<a href=“url” target=“目標(biāo)窗口位置”>鏈接文本圖片</a>
href：表示鏈接路徑
target：鏈接在哪個(gè)窗口打開(kāi)，_self(當(dāng)前頁(yè)面打開(kāi))、_blank（新頁(yè)面打開(kāi)）
2、錨鏈接
從A頁(yè)面的甲位置跳轉(zhuǎn)到本頁(yè)中的乙位置（同一頁(yè)面）
從A頁(yè)面的甲位置跳轉(zhuǎn)到B頁(yè)中的乙位置（兩個(gè)頁(yè)面）
創(chuàng)建步驟：
建跳轉(zhuǎn)標(biāo)記<a name=“marker”>乙位置</a>
創(chuàng)建跳轉(zhuǎn)鏈接<a href=“#marker”>甲位置</a>
跳轉(zhuǎn)到另一個(gè)頁(yè)面在的#前面加上要跳轉(zhuǎn)的頁(yè)面路徑
4、HTML列表
無(wú)序列表<ul>，用于導(dǎo)航、側(cè)邊欄新聞列表等
<ul>
<li>列表項(xiàng)內(nèi)容1</li>
<li>列表項(xiàng)內(nèi)容2</li>
<li>列表項(xiàng)內(nèi)容3</li>
</ul>
注：默認(rèn)<li>標(biāo)簽項(xiàng)前有實(shí)心小圓點(diǎn)，可更換為（type=“小方塊，小圓圈”）
有序列表<ol>
<ol>
<li>列表項(xiàng)內(nèi)容1</li>
<li>列表項(xiàng)內(nèi)容2</li>
<li>列表項(xiàng)內(nèi)容3</li>
</ol>
注：注：默認(rèn)<li>標(biāo)簽項(xiàng)前有123，可更換為（type=“a，A，I”）
定義列表<dl> 無(wú)序，沒(méi)有標(biāo)記
<dl>
<dt>標(biāo)題</dt>
<dd>描述</dd>
</dl>
注：沒(méi)有順序，沒(méi)有默認(rèn)標(biāo)記
5、表單標(biāo)簽
1、<form>標(biāo)簽—表單提交
<form action=“表單提交地址” method=“提交方法”>
? …適合文本框、按鈕等表單元素…
</form>
注：
action屬性：處理表單數(shù)據(jù)的目標(biāo)地址
method屬性：規(guī)定提交方式? 可選值post/get
get方法提交參數(shù)在地址欄可見(jiàn)
post方法提交參數(shù)在地址欄不可見(jiàn)（密碼）
2、<input>標(biāo)簽—文本框，按鈕等。。
適用的表單元素有：文本框、復(fù)選框、文件選擇框、按鈕等
name屬性：表單元素名稱
type屬性：類型、域
value屬性：值
size屬性：文本框顯示寬度
maxlength屬性：內(nèi)容最大長(zhǎng)度
checked屬性：是否選中，僅與checkbox 和radio配合使用，選中為checked
3、下拉列表框 通過(guò)<select>? <option>標(biāo)簽實(shí)現(xiàn)
4、多行文本框 通過(guò)<textare cols=”20” rows=”5”>標(biāo)簽實(shí)現(xiàn)
5、表單結(jié)構(gòu)標(biāo)簽：<fieldset> 結(jié)構(gòu)標(biāo)題標(biāo)簽：<legend>
6、<label>標(biāo)簽 實(shí)現(xiàn)關(guān)聯(lián)表單元素
<label for = “1”>名字:</label>
<input name =”name” id= “1”? size= “20” >
或者<label>名字: <input name =”name” size= “20” ></label>
無(wú)需id關(guān)聯(lián)
點(diǎn)擊label標(biāo)簽 如：名字,鼠標(biāo)聚焦文本框中
6、表格標(biāo)簽
1、表格基本語(yǔ)法：
<tr>表示? 行? ? ? ? <td>表示? 單元格
border 表示邊框
bgcolor表示背景色? ? width 表示表格的框
cellpadding表示單元格中的內(nèi)容和邊框的距離
cellspacing表示單元格之間的距離
align表示水平對(duì)齊方式? valign 表示垂直對(duì)齊方式
表格高級(jí)標(biāo)簽
<caption> 標(biāo)題
<thead> 頁(yè)眉
表頭標(biāo)簽<th>表示和<td>功能一樣，以標(biāo)題形式顯示
<tbody>數(shù)據(jù)主體
<tfoot>頁(yè)腳
3、表格的跨行與跨列
跨行<tr>標(biāo)簽的rowspan屬性，值為數(shù)字，代表合并幾行
跨列<td>標(biāo)簽的colspan屬性，值為數(shù)字，代表合并幾列
7、HTML框架結(jié)構(gòu)（<iframe>標(biāo)簽）
1、作用：創(chuàng)建文檔的內(nèi)聯(lián)框架，將獨(dú)立頁(yè)面放在框架中
2、屬性：
src=（需引入的文檔路徑）
width/height（設(shè)定框架的寬與高）
scrolling（是否顯示滾動(dòng)條，auto|yes|no）
? frameborder（是否要邊框，1顯示，0不顯示）
? name（內(nèi)聯(lián)框架的名稱）
<iframe src=”” height=”” width=”“frameborder=”“name=”” scrolling/>
3、<div>標(biāo)簽和<span>標(biāo)簽
? 沒(méi)有任何的默認(rèn)樣式渲染；相當(dāng)于一個(gè)干凈的容器
? 結(jié)構(gòu)化HTML元素；DIV+CSS網(wǎng)頁(yè)布局；提高網(wǎng)頁(yè)加載速度
4、塊標(biāo)簽和內(nèi)聯(lián)標(biāo)簽
塊標(biāo)簽（常用）：
? 獨(dú)占一行;可以定義寬度和高度
? 常用塊標(biāo)簽：<div>、<p>、<ul>、<li>
內(nèi)聯(lián)標(biāo)簽：
? 一行排列顯示;不能定義寬度和高度
? 常用內(nèi)聯(lián)標(biāo)簽：<span>、<a>、<label>、<img>
注：塊元素和內(nèi)聯(lián)元素是可以轉(zhuǎn)換的（在CSS里修改）
內(nèi)聯(lián)元素—>塊元素display：block
塊元素–>內(nèi)聯(lián)元素display：inline
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? CSS設(shè)計(jì)樣式
一、CSS簡(jiǎn)介
? Cascading style Sheet 級(jí)聯(lián)樣式表，表現(xiàn)HTML或XHTML文件樣式的計(jì)算機(jī)語(yǔ)言（對(duì)字體、顏色、邊距、高度、寬度、背景圖片、網(wǎng)頁(yè)定位等設(shè)定）
作用：能控制頁(yè)面的樣式和布局；網(wǎng)頁(yè)文件和樣式文件相分離，提高開(kāi)發(fā)效率
二、CSS語(yǔ)法
1、<style>標(biāo)簽
寫在<head>標(biāo)簽之后，加上type=“text/css”屬性
2、樣式選擇器
例如：? ? h1｛
Color:red;
font-size:12px;
｝
3、常用選擇器
（1）標(biāo)簽選擇器：
把HTML標(biāo)簽作為標(biāo)簽選擇器的名稱；如<p>
（2）類選擇器：<標(biāo)簽名? class=“類名稱”>標(biāo)簽內(nèi)容</標(biāo)簽名>
.類名稱｛//可以單獨(dú)設(shè)置一些文字的樣式
屬性:值;
｝
（3）ID選擇器：<標(biāo)簽名 id=“ID名”>標(biāo)簽內(nèi)容</標(biāo)簽名>
#ID名｛//ID名是唯一的，其他和類選擇器一樣
屬性:值;
｝
4、復(fù)合選擇器
（1）并集選擇器（用 , 隔開(kāi)）
多個(gè)選擇器之間可以是多個(gè)不同或相同類型；
多個(gè)選擇器之間必須用英文半角輸入法逗號(hào)“,”隔開(kāi)；
*{? 屬性:值;
}? 或者
p,#id,.class{? 屬性:值;
}
（2）交集選擇器（無(wú)空格逗號(hào)）—不常用
格式為：標(biāo)簽+類選擇器? 或? 標(biāo)簽+ID選擇器
選擇器之間不能有空格；第一項(xiàng)必須是標(biāo)簽
h3.second{//滿足h3標(biāo)簽和second類標(biāo)簽才應(yīng)用
屬性：值；
}
（3）后代選擇器（用空格隔開(kāi)）
選擇器之間可以是多個(gè)不同或相同類型并有層級(jí)關(guān)系的
p a｛//滿足p和a標(biāo)簽，只是a標(biāo)簽中的元素進(jìn)行改變
屬性：值；
｝
三、CSS的使用
（1）行內(nèi)樣式表：直接在HTML標(biāo)簽設(shè)置的樣式
使用style屬性引入CSS樣式
<h1 style=”color:red;”>style屬性的應(yīng)用</h1>
<p style=”屬性名：屬性值；”>在p標(biāo)簽內(nèi)應(yīng)用</p>
（2）內(nèi)部樣式表（寫在單獨(dú)網(wǎng)頁(yè)內(nèi)）
<style? type=“text/css”>
選擇器｛
屬性名：屬性值：
｝
</style>
（3） 外部樣式表（引用外部CSS樣式文件）
CSS代碼保存在擴(kuò)展名為.css的樣式表中
HTML文件引用擴(kuò)展名為.css的樣式表，有鏈接式和導(dǎo)入式
語(yǔ)法：
鏈接式：常用（屬于XHTML,優(yōu)先加載CSS文件到頁(yè)面）
<link type=“text/css” rel=“styleSheet”href=“css文件路徑”/>
導(dǎo)入式：（屬于css2.1，先加載HTML結(jié)構(gòu)再加載CSS文件）
<style type=“text/css”>
@import url（“css文件路徑”）
<style/>
樣式優(yōu)先級(jí)：
選擇器：ID選擇器>類選擇器>標(biāo)簽選擇器
樣式表之間：行內(nèi)式>內(nèi)嵌式>外部式
四、CSS屬性
1、文本與字體屬性
例如：字體是 italic斜體 bold粗體 16PX像素的楷體
注：當(dāng)line-height 和 height 的值一樣時(shí)，文本垂直居中。
text-align:center;指文本水平居中。
容器居中方法：margin:0px auto;
文本首行縮進(jìn)：text-indent:2em;
2、背景屬性
background-color、background-image、background-position、background-repeat
3、列表屬性
常用：list-style:none;
4、超鏈接偽類（先love后hate記憶）
a：link｛color:red｝? /* 未訪問(wèn)的鏈接*/
a：visited｛color:blue｝? /* 訪問(wèn)過(guò)后的鏈接*/
a：hover｛color:green｝? /* 當(dāng)鼠標(biāo)懸停在鏈接上*/
a：active｛color:yellow｝? /* 當(dāng)鼠標(biāo)按下鏈接后*/
注： a：hover必須被置于a：link 和a：visited之后
a：active 必須被置于a：hover之后
5、鼠標(biāo)形狀控制
cursor:move;? cursor:pointer;
6、盒子模型（上右下左順時(shí)針?lè)较颍?/p>
（1）邊框border? （top/right/bottom/left/ Opx是全清除）
（2）內(nèi)邊距padding（top/right/bottom/left/ Opx auto）
（3）外邊距margin （top/right/bottom/left/ Opx? auto）
margin：1px 2px 3px 4px
border:1px solid red (修飾屬性width、style、color )
border-width:1px 2px 3px 4px
padding:5px 10px 15px 20px
7、浮動(dòng)屬性（float:值 ）
（1）取值：left左浮動(dòng)；right右浮動(dòng)；none 不浮動(dòng)
（2）作用：
塊元素同行排列顯示，一般用于排版、分欄顯示
都設(shè)置浮動(dòng)屬性后會(huì)脫離文檔流：向指定的左或右邊對(duì)齊
（3）注意：使用浮動(dòng)后要及時(shí)清除，以免影響其后的網(wǎng)頁(yè)元素
8、清除浮動(dòng)（clear屬性和overflow屬性）
（1）clear屬性取值：left；right；none；both
Overflow：定義了溢出元素內(nèi)容區(qū)的元素的處理方式
屬性取值：visible（默認(rèn)）；auto；hidden；scroll(滾動(dòng)條顯示)
（2）必要性：
浮動(dòng)后，脫離了文檔流布占網(wǎng)頁(yè)空間
浮動(dòng)后的網(wǎng)頁(yè)元素會(huì)影響同級(jí)元素
（3）表明容器框的哪邊不挨著浮動(dòng)框
清浮動(dòng)：
產(chǎn)生條件：父元素未設(shè)置浮動(dòng)，子元素設(shè)置浮動(dòng)
顯示效果：父元素高度得不到擴(kuò)展，縮成一條，子元素從內(nèi)容溢出
clear：both;（加一個(gè)空的<div>,clear:both）
overflow:hidden;（為父元素設(shè)置width，overflow:hidden;）
9、定位（position屬性）
（1）relative（相對(duì)定位）
相對(duì)它原來(lái)的位置，通過(guò)指定偏移，到達(dá)新的位置
仍在標(biāo)準(zhǔn)流中，它對(duì)父級(jí)盒子和相鄰的盒子都沒(méi)有任何影響
（2）absolute（絕對(duì)定位）
相對(duì)已設(shè)定的非static定位屬性的父元素算偏移量。
設(shè)置絕對(duì)定位的元素與文檔無(wú)關(guān)，會(huì)覆蓋頁(yè)面其他元素。
如果對(duì)象的父級(jí)沒(méi)有設(shè)置定位屬性，absolute元素將以body坐標(biāo)偏移。
（3）fixed（相對(duì)瀏覽器固定定位）
（4）static（默認(rèn)）
偏移量設(shè)置:
X軸（left、right屬性）與Y軸（top、bottom屬性）
可取值：像素或者百分比
<div style=”width:100px;height:100px;background:#F00;
position:relative”><span=”width:50px;height:50px;left:0px;bottom:opx;b
ackground:#0F0;position:absolute”></span></div>
子元素absolute? ? 父元素一般relative
五、使用DIV+CSS布局頁(yè)面
1、表格布局
優(yōu)點(diǎn)：簡(jiǎn)單易懂、位置很規(guī)矩；
缺點(diǎn)：加載速度慢，結(jié)構(gòu)固定不靈活，不利于維護(hù)和SEO
2、框架布局
在同一頁(yè)面進(jìn)行多頁(yè)面加載，如<iframe>標(biāo)簽
3、DIV+CSS方式布局
HTML結(jié)構(gòu)：<div>標(biāo)簽
CSS樣式：float浮動(dòng)和盒子模型
優(yōu)點(diǎn)：1、<div>標(biāo)簽“干凈”，網(wǎng)頁(yè)更小，打開(kāi)更快
2、結(jié)構(gòu)清晰，便于維護(hù)，利于SEO
3、<div>標(biāo)簽更靈活，更好控制頁(yè)面元素
4、樣式與結(jié)構(gòu)相分離 ，更好的結(jié)構(gòu)重組
5、表現(xiàn)與內(nèi)容相分離，利于分工協(xié)作
基本流程：總體把握→分塊實(shí)現(xiàn)→完善細(xì)節(jié)→性能優(yōu)化
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? JavaScript基礎(chǔ)
一、JavaScript簡(jiǎn)介
1、JavaScript是一種描述語(yǔ)言，基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言
特點(diǎn)：
腳本語(yǔ)言（一種輕量級(jí)的編程語(yǔ)言）
一種解釋性語(yǔ)言（無(wú)需預(yù)編譯）
被設(shè)計(jì)為向HTML頁(yè)面添加交互行為
運(yùn)行于客戶端
ECMAScript是JavaScript的標(biāo)準(zhǔn)和基礎(chǔ)，JavaScript和JAVA無(wú)任何關(guān)系！
2、JavaScript是由ECMAScript（標(biāo)準(zhǔn)、核心）、DOM（文檔對(duì)象模型）、BOM（瀏覽器對(duì)象模型） 三部分組成
（1）ECMAScript
ECMAScript標(biāo)準(zhǔn)定義了腳本語(yǔ)言的屬性、方法和對(duì)象。包括語(yǔ)法、類型、關(guān)鍵字、保留字、運(yùn)算符、對(duì)象等
除了JavaScript外，同時(shí)也是Nombas的ScriptEase和Flash腳本ActionScript的基礎(chǔ)
（2）DOM（文檔對(duì)象模型）
HTML和XML的應(yīng)用程序接口（API）
把整個(gè)頁(yè)面規(guī)劃為層級(jí)式的節(jié)點(diǎn)結(jié)構(gòu)
（3）BOM（瀏覽器對(duì)象模型）
可對(duì)瀏覽器窗口進(jìn)行訪問(wèn)和操作
3、JavaScript基本結(jié)構(gòu)
<script type = “text/javascript”>
<!–
//JavaScript代碼
//–>
</script>
（1）<!–? –>部分是非必須的，為了規(guī)避老版本瀏覽器不能識(shí)別
（2）//是JavaScript的注釋符號(hào)（/* */也是注釋符號(hào)）
（3）type屬性不推薦寫成language=“javascript”
4、引用JavaScript三種方式
⑴直接在HTML標(biāo)簽中<body οnlοad=”alert(‘你好’);”>
⑵使用<script>標(biāo)簽
⑶通過(guò)src屬性引入外部JS文件
示例：alert彈出框的三種方式
<script type=”text/javascript” src=”路徑”></script>
二、常用的輸入/輸出/確認(rèn)
alert（） //彈出只有一個(gè)確認(rèn)按鈕的提示框
例：alert（“提示信息”）；
prompt（）//彈出一個(gè)可以輸入的提示框，有確認(rèn)和取消按鈕
例：prompt（“提示信息”，“輸入框的默認(rèn)信息”）；
confirm（“確認(rèn)信息？”）；
//確定則返回true，取消則返回false
三、JavaScript的基礎(chǔ)語(yǔ)法
1、JS的注釋方法與 Java 一致（單行、多行和文檔注釋）
2、JavaScript變量（與java不一樣）
（1）變量名對(duì)大小寫敏感（Y和y是兩個(gè)不同的變量）
（2）變量必須以字母或下劃線或美元符＄開(kāi)始，不能使用關(guān)鍵字作為變量名
（3）通過(guò)var語(yǔ)句來(lái)聲明，無(wú)需指定數(shù)據(jù)類型（多個(gè)變量用逗號(hào)隔開(kāi)）
（4）先定義后使用，一般”+”運(yùn)算符用于把文本值或字符串變量連接起來(lái)，如果兩個(gè)是數(shù)字則為數(shù)學(xué)運(yùn)算加號(hào)?！?”可以給相同變量重復(fù)賦值，可以賦不同類型的值
3、JS的數(shù)據(jù)類型
Undefined：只有一個(gè)值undefined，未定義或定義未賦值
var v=undefined; typeof var1(未定義)? var v;
Null：尚未存在的對(duì)象，與undefined值相等
Number： var num=23；//整數(shù)? var num =23.0; // 浮點(diǎn)數(shù)
Boolean： true 和flase
String：一組被引導(dǎo)的文本（單引號(hào)或雙引號(hào)括起來(lái)）
4、typeof運(yùn)算符? var1=2; alert(typeof var1);
typeof檢測(cè)變量的返回值。
如果為字符串類型，返回值如下;
undefined；string；boolean；number；
object（對(duì)象或數(shù)組或Null類型） function（函數(shù)方法）
5、數(shù)據(jù)類型轉(zhuǎn)換
（1）轉(zhuǎn)換方法
parseInt（）：字符串轉(zhuǎn)換為整數(shù)
parseFloat（）：字符串轉(zhuǎn)換為浮點(diǎn)數(shù)
toString（）：返回字符串
（2）強(qiáng)制類型轉(zhuǎn)換
Boolean（）：轉(zhuǎn)換為邏輯值
結(jié)果為false的情況有：”“；0；undefined；null；NaN；false
Number（）：對(duì)象轉(zhuǎn)換為數(shù)字
String（）：對(duì)象轉(zhuǎn)換為字符串
注：在轉(zhuǎn)換函數(shù)時(shí)，parseInt或parseFloat如果是由字符串轉(zhuǎn)換為數(shù)值類型，字符串從前往后，第一位是數(shù)字，只轉(zhuǎn)有數(shù)字的部分，返回值為對(duì)應(yīng)的數(shù)值類型。若數(shù)字不是第一位，返回值為NaN（not a number）。而Number（）無(wú)論數(shù)字在前在后，都返回NaN
6、運(yùn)算符（和java基本一樣）
7、流程控制（和java語(yǔ)法一樣）
if條件語(yǔ)句；條件運(yùn)算符；switch多分分支語(yǔ)句；循環(huán)控制語(yǔ)句（循環(huán)中斷break\continue\return）
注：for in 循環(huán)語(yǔ)句（類似于增強(qiáng)型for）
for（變量a? in? 對(duì)象obj）｛ //獲得obj[a]; ｝
四、JavaScript函數(shù)和事件
1、定義：
一組可以隨時(shí)隨地運(yùn)行的語(yǔ)句。有系統(tǒng)函數(shù)和自定義函數(shù)
（1）常用系統(tǒng)函數(shù)舉例(相當(dāng)于java中的方法)
parseInt（） 解析一個(gè)字符串并返回一個(gè)整數(shù)
parseFloat（）? 解析一個(gè)字符串并返回一個(gè)浮點(diǎn)數(shù)
isNaN（） 檢查某個(gè)值是否是數(shù)字，返回true|false
eval（）? ? 計(jì)算JavaScript字符串，并把它作為腳本代碼來(lái)執(zhí)行
（2）自定義函數(shù)
function? 函數(shù)名（參數(shù)列表）｛//函數(shù)代碼塊｝
var 函數(shù)名 = function（參數(shù)列表）｛//函數(shù)代碼塊｝
傳入的參數(shù)是可選的，多個(gè)參數(shù)用 , 隔開(kāi)，也可以無(wú)參
調(diào)用： 函數(shù)名（參數(shù)）;? 在定義的函數(shù)后面調(diào)用
（3）匿名函數(shù)
（function()｛//用函數(shù)體( )替換fn ；
alert(12345);})();
等同于
var fn=function（）｛alert（12345）；｝
fn( )；
把fn用函數(shù)體代替掉，直接運(yùn)行，我們稱之為匿名函數(shù)。一般用于框架的封裝
2、變量的作用域
（1）全局變量：任何地方都可以被調(diào)用，公共的（public）
（2）局部變量：只能在函數(shù)內(nèi)部調(diào)用，私有的（private）
應(yīng)盡量避免使用全局變量，以免團(tuán)隊(duì)開(kāi)發(fā)變量沖突
3、函數(shù)的返回值
通過(guò)return關(guān)鍵字返回函數(shù)的值
4、事件：JavaScript偵測(cè)到的行為
事件通常與函數(shù)配合使用，當(dāng)事件發(fā)生時(shí)去調(diào)用函數(shù)
鼠標(biāo)事件、鍵盤事件、焦點(diǎn)事件、其他常用事件
鼠? ? ? ? 標(biāo)? ? ? 事? ? ? ? 件
onclick 單擊鼠標(biāo)左鍵元素觸發(fā)
ondblclick 雙擊鼠標(biāo)左鍵擊元素觸發(fā)
onmousedown 按鼠標(biāo)按鈕觸發(fā)
onmouseup 釋放鼠標(biāo)按鈕觸發(fā)
onmousemove 鼠標(biāo)指針在對(duì)象上移動(dòng)觸發(fā)
onmouseover 鼠標(biāo)指針移動(dòng)到對(duì)象上觸發(fā)
onmouseout 鼠標(biāo)指針移出對(duì)象觸發(fā)
焦? ? ? ? 點(diǎn)? ? ? ? 事? ? ? ? 件
onfocus 獲得焦點(diǎn)觸發(fā)
onblur 失去焦點(diǎn)觸發(fā)
onchange 值改變且失去焦點(diǎn)觸發(fā)
其? ? ? 他? ? ? 常? ? 用? ? 事? ? 件
onload 某個(gè)頁(yè)面或圖像被完成加載時(shí)觸發(fā)
onunload 用戶退出頁(yè)面時(shí)觸發(fā)
onabort 圖像加載被中斷時(shí)觸發(fā)
onerror 當(dāng)加載文檔或圖像時(shí)發(fā)生某個(gè)錯(cuò)誤時(shí)觸發(fā)
onreset 重置按鈕被點(diǎn)擊時(shí)觸發(fā)，事件寫在form表單上
onresize 窗口或框架被調(diào)整尺寸時(shí)觸發(fā)
onselect 文本被選定時(shí)觸發(fā)
onsubmit? 提交按鈕被點(diǎn)擊時(shí)觸發(fā)，事件寫在form表單上
鍵? ? ? 盤? ? ? 事? ? ? 件
onkeydown 按下鍵盤觸發(fā)
onkeypress 按壓鍵盤觸發(fā)
onkeyup 松開(kāi)鍵盤觸發(fā)
5、程序調(diào)試
語(yǔ)法錯(cuò)誤和邏輯錯(cuò)誤
解決辦法：
①try…catch 語(yǔ)句
try｛
//在此運(yùn)行代碼
｝catch（err）｛
//在此處理錯(cuò)誤
//err.message? ? message包含錯(cuò)誤信息
｝
②注釋調(diào)試法
③輸出調(diào)試法④
alert（）調(diào)試法
document.write（）調(diào)試法
console對(duì)象調(diào)試法（IE不支持）? ? console.log（）
④調(diào)試工具: Firebug、瀏覽器自帶開(kāi)發(fā)窗口
五、BOM對(duì)象操作對(duì)象窗體
BOM(瀏覽器對(duì)象模型)使得JavaScript能與瀏覽器進(jìn)行“對(duì)話”。
主要有Window對(duì)象、History對(duì)象；Location對(duì)象；Document對(duì)象
Window對(duì)象常用屬性
Window對(duì)象：表示瀏覽器中打開(kāi)的窗口.Window對(duì)象是全局對(duì)象，可直接調(diào)用其方法和屬性；Window對(duì)象的一些方法和屬性可省略不寫
window.document等同于 document
window.alert()等同于 alert（）
屬性有：
location 用于窗口或框架的 Location 對(duì)象
history 用戶在瀏覽器窗口中訪問(wèn)過(guò)的 URL
screen 對(duì) Screen 對(duì)象的只讀引用
status 設(shè)置窗口狀態(tài)欄的文本
document 對(duì) Document 對(duì)象的只讀引用
history屬性就是History對(duì)象的引用
方法：
back（）：加載上一個(gè)瀏覽的文檔
forward（）：加載下一個(gè)瀏覽的文檔
go（n）：n為整數(shù)。跳轉(zhuǎn)第n個(gè)瀏覽過(guò)的文檔
n==0則刷新當(dāng)前頁(yè)面
n>0則向前跳轉(zhuǎn)到第n個(gè)文檔
n<0則向后跳轉(zhuǎn)到第n個(gè)文檔
location屬性就是Location對(duì)象的引用
屬性：
host? 設(shè)置或返回主機(jī)名和當(dāng)前URL的端口號(hào)
hostname? 設(shè)置或返回當(dāng)前URL的主機(jī)名
href? ? ? 設(shè)置或返回完整的url，可用于設(shè)置跳轉(zhuǎn)
hash? ? ? 設(shè)置或返回從井號(hào)#開(kāi)始的URL（錨）
search 設(shè)置或返回從問(wèn)號(hào)?開(kāi)始的URL（查詢部分）
方法：
reload（）? ? 重新加載當(dāng)前的文檔，刷新頁(yè)面
replace（）? 新的文檔替換當(dāng)前文檔
assign()? ? 加載新的文檔,可以返回
document屬性
每個(gè)載入瀏覽器的HTML文檔都會(huì)成為Document對(duì)象。利用它可對(duì)HTML頁(yè)面中的所有元素進(jìn)行訪問(wèn)
常用屬性：title? 返回或設(shè)置當(dāng)前文檔的標(biāo)題
常用方法：
write（）? 向文檔寫HTML表達(dá)式或JavaScript代碼
getElementById（）返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用
getElementsByTagName（）返回帶有指定標(biāo)簽名稱的對(duì)象集合
getElementsByName（）返回帶有指定名稱的對(duì)象集合
Window對(duì)象方法
1、常用方法
prompt（）顯示可提示用戶輸入的對(duì)話框
alert（） 顯示帶有一個(gè)提示信息和一個(gè)確定按鈕的警示框
confirm（）顯示一個(gè)帶有提示信息、確定和取消按鈕的對(duì)話框
open（）? 打開(kāi)一個(gè)新的瀏覽器窗口，加載給定的網(wǎng)頁(yè)
close（） 關(guān)閉瀏覽器窗口
setTimeout()在指定的ms數(shù)后來(lái)調(diào)用函數(shù)或計(jì)算表達(dá)式。循環(huán)執(zhí)行多次
setInterval()按照指定的周期（ms計(jì)）來(lái)調(diào)用函數(shù)或表達(dá)式。只執(zhí)行一次
clearInterval( timer ) 方法可取消由 setInterval() 設(shè)置的 timeout
clearTimeout( timer ) 方法 可取消由 setTimeout() 方法設(shè)置的 timeout
2、具體介紹：
open()方法：window.open(“url”, “窗口名稱”, “窗口屬性”)
窗口屬性：
六、DOM(文檔對(duì)象模型)
1、DOM簡(jiǎn)介：
提供了添加、移動(dòng)、改變或移除結(jié)構(gòu)文檔的方法和屬性
2、分類：
Core DOM 一套標(biāo)準(zhǔn)的針對(duì)任何結(jié)構(gòu)化文檔的對(duì)象
XML DOM 一套標(biāo)準(zhǔn)的針對(duì)XML文檔的對(duì)象
HTML DOM 一套標(biāo)準(zhǔn)的針對(duì)HTML文檔的對(duì)象
Core DOM的節(jié)點(diǎn)
HTML文檔中的每一個(gè)成分都是一個(gè)節(jié)點(diǎn)（Node）
（1）規(guī)定：
整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)；
每個(gè)HTML標(biāo)簽是一個(gè)元素節(jié)點(diǎn)；
包含在HTML元素中的文本是文本節(jié)點(diǎn)；
每一個(gè)HTML屬性是一個(gè)屬性節(jié)點(diǎn)；
注釋屬于注釋節(jié)點(diǎn)；
（2）節(jié)點(diǎn)間的關(guān)系
節(jié)點(diǎn)彼此都有等級(jí)關(guān)系（父節(jié)點(diǎn)、子節(jié)點(diǎn)、兄弟節(jié)點(diǎn)（同級(jí)節(jié)點(diǎn)））
（3）使用getElement方法訪問(wèn)指定節(jié)點(diǎn)
getElementById（）返回對(duì)擁有指定id的第一個(gè)對(duì)象的引用
getElementsByTagName（）返回指定標(biāo)簽的對(duì)象的集合
getElementsByName（）返回帶有指定名稱的對(duì)象的集合
注：不是所有標(biāo)簽都有name屬性
innerHTML 屬性設(shè)置或返回節(jié)點(diǎn)的開(kāi)始和結(jié)束標(biāo)簽之間的 HTML。
(4)使用Node接口定義的方法訪問(wèn)節(jié)點(diǎn)
注:低版本IE下會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)（比如換行字符），而谷歌和火狐不會(huì)忽略，因此需要兼容方式來(lái)獲取
訪問(wèn)節(jié)點(diǎn)兼容處理
兼容寫法? firefox||IE
獲取第一個(gè)節(jié)點(diǎn)
oFirst=oParent.firstElementChild? ||oParent.firstChild
IE瀏覽器會(huì)忽略節(jié)點(diǎn)之間生成的空白文本節(jié)點(diǎn)。所以不需要中間加Element
節(jié)點(diǎn)信息
每個(gè)節(jié)點(diǎn)都擁有包含節(jié)點(diǎn)某些信息的屬性
nodeName（節(jié)點(diǎn)名稱）
元素節(jié)點(diǎn)的nodeName是標(biāo)簽名稱
屬性節(jié)點(diǎn)的nodeName是屬性名稱
文本節(jié)點(diǎn)的nodeName永遠(yuǎn)是#text
文檔節(jié)點(diǎn)的nodeName永遠(yuǎn)是#document
nodeValue（節(jié)點(diǎn)值）
對(duì)于文本節(jié)點(diǎn)，nodeValue屬性包含文本
對(duì)于屬性節(jié)點(diǎn)，nodeValue屬性包含屬性值
nodeType（節(jié)點(diǎn)類型）
元素1，屬性2，文本3，注釋8，文檔9
創(chuàng)建和新增節(jié)點(diǎn)
createDocumentFragment()//創(chuàng)建文檔碎片節(jié)點(diǎn)
createElement(tagname)//創(chuàng)建標(biāo)簽名tagname的元素
createTextNode(text)//創(chuàng)建包含文本text的文本節(jié)點(diǎn)
appendChild()//添加子元素
（7）刪除和替換節(jié)點(diǎn)
RemoveChild(node)
replaceChild(newDode,oldNode)
4、HTML DOM ：
專門針對(duì)HTML文檔的。HTML文檔中的每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象
HTML DOM包括：
Table 對(duì)象 Document 對(duì)象 Form 對(duì)象Image 對(duì)象
1、Table（TableRow TableCell）對(duì)象屬性
屬性 rows[] 獲得所有行
通過(guò)cells[]得到所有的單元格
方法：insertRow()插入新行 deleteRow()刪除一行
2、Style（currentStyle）對(duì)象position屬性：
top\left\right\bottom\zIndex
七、網(wǎng)頁(yè)特效–內(nèi)置對(duì)象
1、內(nèi)置對(duì)象
String用于在單獨(dú)的變量名中存儲(chǔ)一系列的值
Date用于操作日期和時(shí)間
Math用于執(zhí)行常用的數(shù)學(xué)任務(wù)
Array用于支持對(duì)字符串的處理
2、String對(duì)象方法
3、Date對(duì)象
var myDate=new Date();
//獲得小時(shí)、分鐘、秒數(shù)
var today = new Date(); //獲得當(dāng)前時(shí)間
var hh = today.getHours();
var mm = today.getMinutes();
var ss = today.getSeconds();
4、Math對(duì)象
var pi_value=Math.PI;
方法：
Math.ceil( Math.random()*100 ) ;返回的正數(shù)范圍1-100
5、Array對(duì)象
①JavaScript 中的所有事物都是對(duì)象：數(shù)字、字符串、布爾、數(shù)組、日期，等等。
數(shù)組對(duì)象的作用是：使用單獨(dú)的變量名來(lái)存儲(chǔ)一系列的值。
②Array 對(duì)象用于在單個(gè)的變量中存儲(chǔ)多個(gè)值
創(chuàng)建 Array對(duì)象的語(yǔ)法
var mycars=new Array();? // 創(chuàng)建空數(shù)組對(duì)象
var mycars=new Array(“Saab”,”Volvo”,”BMW”);
var mycars=[“Saab”,”Volvo”,”BMW”];
③屬性和方法：
屬性：length? 設(shè)置或返回?cái)?shù)組中元素的數(shù)目
concat() 連接兩個(gè)或更多的數(shù)組，并返回結(jié)果。
toString() 把數(shù)組轉(zhuǎn)換為字符串，并返回結(jié)果。
join() 把數(shù)組的所有元素放入一個(gè)字符串。元素通過(guò)指定的分隔符進(jìn)行分隔。
slice() 從某個(gè)已有的數(shù)組返回選定的元素
sort() 對(duì)數(shù)組的元素進(jìn)行排序
reverse() 顛倒數(shù)組中元素的順序。
unshift() 向數(shù)組的開(kāi)頭添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
shift() 刪除并返回?cái)?shù)組的第一個(gè)元素
push() 向數(shù)組的末尾添加一個(gè)或更多元素，并返回新的長(zhǎng)度。
pop() 刪除并返回?cái)?shù)組的最后一個(gè)元素
splice() 刪除元素，并向數(shù)組添加新元素。
//冒泡排序 js寫法
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]<arr[j]) {
//大于是升序；小于是降序；進(jìn)入判斷進(jìn)行一次順序調(diào)換
var tem=arr[i];//保存起來(lái)
arr[i]=arr[j];
arr[j]=tem;
}
}
}
八、網(wǎng)頁(yè)特效–JS訪問(wèn)樣式
步驟1：使用getElement系列方法獲取元素
步驟2：通過(guò)style、className屬性改變樣式
1、DOM元素.style.樣式屬性= “值”;
2、DOM元素.style.display= ” none “不可見(jiàn) | ” block “可見(jiàn);
("#id")[0].style.display = 'none'; 相當(dāng)于(“#id”).css(‘display’,’none’);
3、DOM元素.className = “類名稱”;
注意區(qū)別：例如：背景色
CSS：background-color：red;
JS:DOM.style.backgroundColor = ” red “;
九、表單驗(yàn)證
1、表單驗(yàn)證
在數(shù)據(jù)被送往服務(wù)器前 對(duì)HTML表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證
作用：減輕服務(wù)器的壓力
保證數(shù)據(jù)的可行性和安全性
2、基本步驟
1、提交觸發(fā)表單的onsubmit事件
2、在onsubmit事件中進(jìn)行驗(yàn)證 checkInput (js代碼)
利用DOM方法獲取需驗(yàn)證的表單元素的value值
根據(jù)String對(duì)象的方法驗(yàn)證簡(jiǎn)單的數(shù)據(jù)
利用正則表達(dá)式方法驗(yàn)證復(fù)雜的數(shù)據(jù)
3、表單元素通過(guò)驗(yàn)證后，才能提交表單。否則重復(fù)驗(yàn)證
3、表單驗(yàn)證JS代碼基本結(jié)構(gòu)
4、String對(duì)象屬性和方法
5、文本框?qū)ο?/p>
6、正則表達(dá)式
一個(gè)描述字符模式的對(duì)象，由一些特殊的符號(hào)組成，其組成的字符模式用來(lái)匹配各種表達(dá)式
RegExp對(duì)象（regular expression）表示正則表達(dá)式，它是對(duì)字符串執(zhí)行模式匹配的強(qiáng)大工具
如在字符串中對(duì)”is” 進(jìn)行全局搜索：
var str=”Is this all there is?”;
var patt1=/is/g;或者var patt1= new RegExp(“is”,”g”)
var reg=/表達(dá)式/附加參數(shù)
i執(zhí)行對(duì)大小寫不敏感的匹配 m多行匹配 g全局匹配
7、RegExp對(duì)象
方括號(hào)
常用符號(hào)
重復(fù)字符串
匹配郵箱的表達(dá)式：/^ $/
\w+ @ \w+\.\w+? ? ? ? ? ? 123@irunker.com
\w+ @ \w+(\.\w+) {1,2}? ? 123@sina.com.cn
7、String對(duì)象與正則表達(dá)式
search(reg) 檢索與正則表達(dá)式相匹配的值,返回查找位置的索引，否則返回-1
match(reg) 查找到一個(gè)或多個(gè)正則表達(dá)式的匹配，返回?cái)?shù)組或null
replace(reg,str) 替換與正則表達(dá)式匹配的子串
split(reg) 把字符串分割為字符串?dāng)?shù)組
