章節(jié)學(xué)習(xí)第二章靜態(tài)網(wǎng)頁_第1頁
章節(jié)學(xué)習(xí)第二章靜態(tài)網(wǎng)頁_第2頁
章節(jié)學(xué)習(xí)第二章靜態(tài)網(wǎng)頁_第3頁
章節(jié)學(xué)習(xí)第二章靜態(tài)網(wǎng)頁_第4頁
章節(jié)學(xué)習(xí)第二章靜態(tài)網(wǎng)頁_第5頁
已閱讀5頁，還剩124頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

計算機(jī)軟件技術(shù)基礎(chǔ)

第二章靜態(tài)網(wǎng)頁信息技術(shù)系徐家臻本課主要內(nèi)容HTMLCSSJavaScript靜態(tài)網(wǎng)頁說明：按照HTML/CSS/JavaScript規(guī)范編寫的網(wǎng)頁，需要瀏覽器進(jìn)行解釋，而不同的瀏覽器對同一網(wǎng)頁的解釋效果可能是不同的。HTML超文本標(biāo)記語言(HyperTextMarkupLanguage)HTML不是一種編程語言，而是一種標(biāo)記語言

(markuplanguage)。HTML使用標(biāo)記標(biāo)簽(markuptag)來描述網(wǎng)頁，通常也稱為HTML標(biāo)簽(HTMLtag)。HTML標(biāo)簽是由尖括號包圍的關(guān)鍵詞，比如<html>HTML標(biāo)簽通常是成對出現(xiàn)的，比如<b>和</b>所謂網(wǎng)頁，其實(shí)就是以HTML規(guī)范書寫的文檔，它包含HTML標(biāo)簽和純文本。HTMLHTML文檔示例<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html><html>與</html>之間的文本描述網(wǎng)頁<body>與</body>之間的文本是可見的頁面內(nèi)容<h1>與</h1>之間的文本被顯示為標(biāo)題<p>與</p>之間的文本被顯示為段落HTML工具介紹 使用VisualStudio或者DreamWeaver編輯HTML文檔HTML語法HTML元素語法HTML標(biāo)簽對大小寫不敏感HTML元素以開始標(biāo)簽起始HTML元素以結(jié)束標(biāo)簽終止元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容某些HTML元素具有空內(nèi)容（emptycontent）空元素在開始標(biāo)簽中進(jìn)行關(guān)閉（以開始標(biāo)簽的結(jié)束而結(jié)束）大多數(shù)HTML元素可擁有屬性

HTML語法HTML元素語法<html>標(biāo)簽出現(xiàn)在HTML文檔的最前面，用來標(biāo)記HTML文檔的開始。</html>標(biāo)簽出現(xiàn)在HTML文檔的最后面，用來表示HTML文檔的結(jié)束。嵌套大多數(shù)HTML元素可以嵌套（可以包含其他HTML元素）。HTML文檔由嵌套的HTML元素構(gòu)成。HTML語法示例<html><body><p>Thisismyfirstparagraph.</p><p>Thisismysecondparagraph.</p><br/></body></html>HTML屬性HTML屬性HTML標(biāo)簽可以擁有屬性。屬性提供了有關(guān)HTML元素的更多的信息。屬性總是以名稱/值對的形式出現(xiàn)，比如：name="value"。屬性總是在HTML元素的開始標(biāo)簽中規(guī)定。屬性例子1:HTML鏈接由<a>標(biāo)簽定義。鏈接的地址在href屬性中指定：<ahref="">訪問華中師范大學(xué)</a>HTML屬性屬性例子2:<h1>定義標(biāo)題的開始。<h1align=“center”>擁有關(guān)于對齊方式的附加信息。屬性例子3:<body>定義HTML文檔的主體。<bodybgcolor=“yellow”>擁有關(guān)于背景顏色的附加信息。屬性例子4:<table>定義HTML表格。<tableborder="1">擁有關(guān)于表格邊框的附加信息。HTML標(biāo)題HTML標(biāo)題標(biāo)題（Heading）是通過<h1>-<h6>標(biāo)簽進(jìn)行定義的。<h1>定義最大的標(biāo)題。<h6>定義最小的標(biāo)題。<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3>HTML標(biāo)題合理使用標(biāo)題請確保將HTMLheading標(biāo)簽只用于標(biāo)題。不要僅僅是為了產(chǎn)生粗體或大號的文本而使用標(biāo)題。搜索引擎使用標(biāo)題為您的網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引。因?yàn)橛脩艨梢酝ㄟ^標(biāo)題來快速瀏覽您的網(wǎng)頁，所以用標(biāo)題來呈現(xiàn)文檔結(jié)構(gòu)是很重要的。應(yīng)該將h1用作主標(biāo)題（最重要的），其后是h2（次重要的），再其次是h3，以此類推。HTML水平線HTML水平線<hr/>標(biāo)簽在HTML頁面中創(chuàng)建水平線。hr元素可用于分隔內(nèi)容。<p>Thisisaparagraph</p><hr/><p>Thisisaparagraph</p><hr/><p>Thisisaparagraph</p>HTML注釋HTML注釋可以使用<!--和-->將注釋插入HTML代碼中，這樣可以提高其可讀性，使代碼更易被人理解。瀏覽器會忽略注釋，也不會顯示它們。<!--Thisisacomment-->如何查看源代碼只需在瀏覽器中單擊右鍵，然后選擇“查看源文件”（IE）或“查看頁面源代碼”（Firefox），其他瀏覽器的做法也是類似的。這么做會打開一個包含頁面HTML代碼的窗口。HTML段落HTML段落段落是通過<p>標(biāo)題定義的。<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>HTML換行如果希望在不產(chǎn)生一個新段落的情況下進(jìn)行換行（新行），請使用<br/>標(biāo)簽：<p>Thisis<br/>apara<br/>graphwithlinebreaks</p>HTML段落當(dāng)顯示頁面時，瀏覽器會移除源代碼中多余的空格和空行。所有連續(xù)的空格或空行都會被算作一個空格。如果需要多個空格，使用

<p>ab</p><p>a      b</p>HTML文本格式化標(biāo)簽描述<b>定義粗體文本。<big>定義大號字。<em>定義著重文字。<i>定義斜體字。<small>定義小號字。<strong>定義加重語氣。<sub>定義下標(biāo)字。<sup>定義上標(biāo)字。HTML可定義很多供格式化輸出的元素，比如粗體和斜體字。HTML文本格式化設(shè)置字體顏色<fontcolor=#顏色代碼>#后面接6位16進(jìn)數(shù)，每兩位分別指定紅、綠、藍(lán)的值。設(shè)置字體大小<fontsize=字號>有七種字號，1號最小，7號最大。缺省字號為3。不贊成使用font標(biāo)簽和屬性，相關(guān)的設(shè)定最好通過CSS完成。HTML超鏈接超鏈接可以是文本，也可以是圖片，可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某個部分。通過使用<a>標(biāo)簽在HTML中創(chuàng)建鏈接。有兩種使用<a>標(biāo)簽的方式：通過使用href屬性-創(chuàng)建指向另一個文檔的鏈接通過使用name屬性-創(chuàng)建文檔內(nèi)的書簽語法<ahref="url">Linktext</a>

href屬性規(guī)定鏈接的目標(biāo)。開始標(biāo)簽和結(jié)束標(biāo)簽之間的文字被作為超鏈接文字來顯示。HTML超鏈接name屬性name屬性規(guī)定錨（anchor）的名稱。name屬性用于創(chuàng)建HTML內(nèi)部的書簽。當(dāng)使用命名錨（namedanchors）時，可以創(chuàng)建直接跳至頁面中某個節(jié)的鏈接，這樣使用者就無需不停的滾動頁面來尋找他們需要的信息。命名錨的語法：創(chuàng)建HTML文檔內(nèi)部的錨：<aname=“tips”>UsefulTipsSection</a>創(chuàng)建指向相同文檔中“有用的提示”部分的鏈接：<ahref="#tips">VisittheUsefulTipsSection</a>示例：書簽HTML超鏈接郵件鏈接郵件鏈接可使訪問者在瀏覽頁面時，只需單擊電子郵件鏈接就能打開默認(rèn)的郵件編輯軟件，向指定的地址發(fā)送郵件<ahref=".cn">發(fā)送郵件</a>HTML表格HTML表格由<table>標(biāo)簽來定義。每個表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td指表格數(shù)據(jù)（tabledata）。單元格的內(nèi)容可以包含文本、圖片、列表、段落、表單、水平線、表格等等。邊框?qū)傩?/p>

<tableborder="1">

表頭使用<th>標(biāo)簽進(jìn)行定義示例：表格

HTML表格有通欄的表格有橫向通欄的表格用<tdcolspan=“”>屬性說明有縱向通欄的表格用<tdrowspan=“”>屬性說明示例通欄表格背景和背景圖像屬性bgcolor="顏色"background="圖片路徑"HTML列表無序列表無序列表是一個項(xiàng)目的列表，此列項(xiàng)目使用粗體圓點(diǎn)進(jìn)行標(biāo)記。無序列表始于<ul>標(biāo)簽。每個列表項(xiàng)始于<li>。有序列表有序列表也是一列項(xiàng)目，列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol>標(biāo)簽。每個列表項(xiàng)始于<li>標(biāo)簽。示例列表HTML圖像在HTML中，圖像由<img>標(biāo)簽定義。要在頁面上顯示圖像，你需要使用源屬性（src）。src指"source"。源屬性的值是圖像的URL地址。定義圖像的語法是：

<imgsrc="url"/>示例：調(diào)整圖片大小圖片超鏈接HTML表單HTML表單用于接受不同類型的用戶輸入。表單是一個包含表單元素的區(qū)域。表單元素是允許用戶在表單中（比如：文本域、下拉列表、單選框、復(fù)選框等等）輸入信息的元素。表單使用表單標(biāo)簽（<form>）定義。多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。輸入類型是由類型屬性（type）定義的。HTML表單文本框（Text）<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>單選按鈕（Radio）<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>HTML表單復(fù)選框（Checkbox）<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>示例：表單HTML表單表單的動作屬性（Action）和確認(rèn)按鈕當(dāng)用戶單擊確認(rèn)按鈕時，表單的內(nèi)容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。<formname="input"action="auth.aspx"method="post">Username:<inputtype="text"name="user"/><inputtype="password"name="pwd"/><inputtype="submit"value="Submit"/></form>HTML表單標(biāo)簽描述<form>定義供用戶輸入的表單<input>定義輸入域<textarea>定義文本域(一個多行的輸入控件)<fieldset>定義域<legend>定義域的標(biāo)題<select>定義一個選擇列表<option>定義下拉列表中的選項(xiàng)<button>定義一個按鈕部分表單標(biāo)簽作用列表HTML頭元素HTML頭元素的內(nèi)容包含在<head>標(biāo)簽中頭元素內(nèi)部的標(biāo)題信息不會顯示在瀏覽器窗口中。頭元素包含關(guān)于文檔的概要信息，也稱為元信息（meta-information）。Meta意為“關(guān)于某方面的信息”。根據(jù)HTML標(biāo)準(zhǔn)，僅有幾個標(biāo)簽在HTML的頭部分是合法的，如<link>,<meta>,<title>,<style>和<script>等。CSS層疊樣式表CascadingStyleSheetCSS將呈現(xiàn)方式的功能從HTML中剝離出來，實(shí)現(xiàn)了內(nèi)容與呈現(xiàn)的分離通過設(shè)立樣式表，使網(wǎng)頁的結(jié)構(gòu)更加清晰。CSS擴(kuò)展了HTML的呈現(xiàn)能力，例如能精確指定網(wǎng)頁元素位置，外觀以及創(chuàng)建特殊效果等。CSS使開發(fā)者可以統(tǒng)一地控制HMTL中各標(biāo)志的顯示屬性，使人更能有效地控制網(wǎng)頁外觀。CSS示例CSS示例頁面的HTML <divid="wrapper"><divid="header"><h1>聚義廳</h1></div><ulid="menu"><li><ahref="#">菜單1</a></li><li><ahref="#">菜單2</a></li><li><ahref="#">菜單3</a></li><liclass="last"><ahref="#">菜單4</a></li></ul></div><divid="content"><p>宋江，字公明，綽號：及時雨，呼保義?！?lt;/p><p>林沖外號豹子頭，東京（現(xiàn)河南開封）人?！?lt;/p><p>李逵是中國古代小說《水滸傳》中的一位重要人物，…</p></div><divid="footer">?水泊梁山</div></div>CSS示例CSS文件格式body{text-align:center;margin:0auto;width:950px;}#header{background-color:#0A55A3;color:#FCFCFC;padding:10px;margin-top:10px;}#menuli.lasta{border-bottom:solid1px#2A3B63;}#menulia:hover{background-color:#2A3B63;color:White;}CSS語法CSS的定義是由三個部分構(gòu)成:選擇符(selector)屬性(properties)屬性的取值(value)例如body{color:black}效果是使頁面中的文字為黑色。指定CSS樣式的方式在頁面頭部指定在單獨(dú)的CSS文件中指定，并在頁面頭部引用該文件內(nèi)聯(lián)樣式指定CSS樣式的方式(1)在頁面頭部指定CSS樣式<html>

<head>

<title>文檔標(biāo)題</title>

<styletype="text/css">

<!--

body{font:10pt"Arial"} h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon} h2{font:13pt/15pt"Arial";font-weight:bold;color:blue} p{font:10pt/12pt"Arial";color:black}

-->

</style> </head>

<body>

…指定CSS樣式的方式(2)在頁面上指定引用的CSS文件樣式控制放在單獨(dú)的CSS文件中css/basic.css:body{font:10pt"Arial"}h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon}h2{font:13pt/15pt"Arial";font-weight:bold;color:blue}p{font:10pt/12pt"Arial";color:black}

指定CSS樣式的方式(2)在頁面上指定引用的CSS文件方法一...<head>... <linkhref="/css/basic.css"rel="stylesheet"type="text/css"/> ...方法二...<head>... <styletype="text/css"> <!-- @importurl("/css/advanced.css"); --> </style>...指定CSS樣式的方式(3)內(nèi)聯(lián)樣式<pstyle="color:green">Thistextisgreen.</p>

選擇符HTML標(biāo)簽body、p、h1、ul、li、a、table、tr、td、input…ID ——對特定一項(xiàng)頁面元素進(jìn)行樣式控制HTML中<ulid="menu"><li><ahref="#">菜單1</a></li><li><ahref="#">菜單2</a></li><li><ahref="#">菜單3</a></li></ul>

CSS中#menu{float:left;}選擇符類（class）——對特定一類頁面元素進(jìn)行樣式控制HTML中<liclass="last">菜單4</li>CSS中.last{border-bottom:solid1px#2A3B63;}ID和類的區(qū)別一個頁面上，每個元素有唯一不重復(fù)的ID，但可以有多個元素屬于同一個類選擇符DIV&SPAN作用：將某些頁面元素看成一個整體，統(tǒng)一進(jìn)行格式控制<divid="content"><p>宋江...</p><p>林沖...</p><p>李逵...</p></div>DIV和SPAN的區(qū)別：DIV會“換行”，SPAN不會?；蛘哒f，兩個并列的DIV會垂直顯示，而兩個并列的SPAN會平行顯示。DIV、SPAN和其他HTML標(biāo)簽一樣，可以嵌套使用選擇符選擇符可以組合使用<ul><li>列表A</li><li>列表B</li></ul>

<ulid="menu"><li><ahref="#">菜單1</a></li><li><ahref="#">菜單2</a></li><li><ahref="#">菜單3</a></li><liclass="last"><ahref="#">菜單4</a></li></ul>

#menuli

{list-style:none;margin-top:0;margin-bottom:0;}#menuli.lasta{border-bottom:solid1px#2A3B63;}偽類用于對頁面元素的特定狀態(tài)進(jìn)行樣式控制示例：a:link

對未訪問的超鏈接的顯示a:visited

對已訪問的超鏈接的顯示a:hover

當(dāng)鼠標(biāo)移到超鏈接時tr:hover

當(dāng)鼠標(biāo)移到表格的行上時input:focus

輸入框成為焦點(diǎn)時CSS優(yōu)先級對于一個<h1>標(biāo)簽，如果CSS中定義了

h1{color:blue;}

body

h1{color:red;}

<h1>會如何顯示？CSS選擇符特殊性高者決定顯示。特殊值計算：每個內(nèi)聯(lián)樣式x1000+每個IDx100+每個類/偽類x10+每個其他元素x1示例：ul#navlia:hover1+100+1+1+10=113CSS屬性CSS背景設(shè)置背景顏色 p{background-color:gray;}設(shè)置背景圖片body{background-image:url(img/bg_01.gif);}

設(shè)置背景重復(fù)可對背景圖像進(jìn)行重復(fù)平鋪。repeat-x和repeat-y分別導(dǎo)致圖像只在水平或垂直方向上重復(fù)，no-repeat則不允許圖像在任何方向上平鋪。background-repeat:repeat-y;CSS屬性CSS字體指定字體系列body{font-family:sans-serif;}h1{font-family:Georgia;}字體風(fēng)格font-style屬性取值normal-文本正常顯示italic-文本斜體顯示p.normal{font-style:normal;}CSS屬性字體大小h1{font-size:60px;}h2{font-size:40px;}p{font-size:14px;}如果沒有規(guī)定字體大小，普通文本（比如段落）的默認(rèn)大小是16像素(16px=1em)。font-size值可以是絕對或相對值。CSS屬性CSS字體尺寸單位em相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。 1em等于當(dāng)前的字體尺寸。如果一個元素的font-size為16像素，那么對于該元素，1em就等于16像素。在設(shè)置字體大小時，em的值會相對于父元素的字體大小改變。瀏覽器中默認(rèn)的文本大小是16像素。因此1em的默認(rèn)尺寸是16像素。示例emCSS屬性CSS文本通過文本屬性，可以設(shè)置文本的顏色、字符間距，對齊文本，裝飾文本，對文本進(jìn)行縮進(jìn)，等等?？s進(jìn)文本p{text-indent:5em;}水平對齊h1{text-align:center}h2{text-align:left}h3{text-align:right}CSS屬性文本裝飾text-decoration的取值可以為：none 無underline 下劃線overline 上劃線line-through 貫穿線例如，超鏈接默認(rèn)會有下劃線。如果希望去掉超鏈接的下劃線，可以使用a{text-decoration:none;}CSS屬性其他屬性CSS布局框模型(BoxModel)CSS布局由一個個大大小小互相嵌套的框組成selector{margin:5px;padding:5px;border:solid5pxblack;}CSS布局CSS中的Width、Height指的是內(nèi)容部分的寬、高#myBox{margin:10px;padding:5px;width:70px;}CSS定位相對定位

——

從框原來該在的位置，需要偏移多少#myBox{position:relative;left:20px;top:20px;}CSS定位絕對定位——相對于最近的已定位的祖先元素，需要偏移多少。如果沒有已定位的父元素，則是相對于最初的包含塊，需要偏移多少#ancestor{position:relative;}#ancestor#child{position:absolute;right:20px;bottom:20px;}如果沒有用relative對ancestor塊進(jìn)行定位，child就會去找包含它的最外層的那個塊CSS定位z-index屬性因?yàn)閴K之間會互相重疊遮蓋，可以設(shè)置塊的z-index屬性（無單位的整數(shù)值，可為負(fù)數(shù)），屬性值大的在上層。塊浮動(Floating)#floatBox{float:left;}塊浮動塊浮動Clear——消除浮動的影響.clear{clear:both;}如圖，因?yàn)楦訅K不占頁面正常布局空間，所以外層塊包裹不住它們。如果希望在浮動塊下面再增加內(nèi)容，需要先增加一個空塊，其CSS設(shè)定為清除浮動塊的影響。這樣外層塊包裹空塊時，會把浮動塊的位置也“包裹”進(jìn)來一個簡單的頁面結(jié)構(gòu)menucontentfooterbodywrapperheaderJavaScriptJavaScript是一種運(yùn)行在客戶端瀏覽器上的，增強(qiáng)網(wǎng)頁的用戶交互能力和顯示效果的編程語言。JavaScript被設(shè)計用來向HTML頁面添加交互行為。JavaScript是一種腳本語言（腳本語言是一種輕量級的編程語言）。JavaScript由數(shù)行可執(zhí)行計算機(jī)代碼組成。JavaScript通常被直接嵌入HTML頁面。JavaScript是一種解釋性語言（就是說，代碼執(zhí)行不進(jìn)行預(yù)編譯）。所有的人無需購買許可證均可使用JavaScript。JavaScript能做什么JavaScript可以對事件作出響應(yīng)JavaScript可以讀取及改變HTML元素的內(nèi)容。在數(shù)據(jù)被提交到服務(wù)器之前，JavaScript可被用來驗(yàn)證數(shù)據(jù)JavaScript可被用來檢測訪問者的瀏覽器，為這個瀏覽器載入相應(yīng)的頁面。JavaScript可被用來創(chuàng)建cookies，用來存取位于訪問者的計算機(jī)中的信息。通過AJAX等手段，JavaScript可以與服務(wù)器進(jìn)行數(shù)據(jù)交換JavaScript不能做什么JavaScript不是運(yùn)行在服務(wù)器上的腳本，不能直接對服務(wù)器的內(nèi)容進(jìn)行處理JavaScript不能訪問數(shù)據(jù)庫JavaScript不能在用戶本地計算機(jī)上讀寫文件JavaScript沒有3D圖形顯示功能JavaScript和Java的差別JavaScript是一種象文件一樣的描述語言，透過瀏覽器就可以直接執(zhí)行；而Java像正統(tǒng)的程序語言（如C/C++）一樣，必須先進(jìn)行編繹和連接等動作才可執(zhí)行。JavaScript的結(jié)構(gòu)較為自由松散，譬如，程序中使用變數(shù)前并不需要明確的定義，而Java和正統(tǒng)的程序語言一樣，結(jié)構(gòu)較為嚴(yán)謹(jǐn)。JavaScript不具有讀寫文件及網(wǎng)絡(luò)控制等功能，Java則有提供這些功能。除了語法類似之外，完全是兩個不同的東西。Helloworld!<html><body>

<scripttype="text/javascript"> document.write("HelloWorld!");

</script></body></html>

如果需要把一段JavaScript插入HTML頁面，我們需要使用<script>標(biāo)簽（同時使用type屬性來定義腳本語言）。document.write

字段是標(biāo)準(zhǔn)的JavaScript命令，用來向頁面寫入輸出。在哪里放置JavaScript置于head置于body置于head和body在head中添加外部引用當(dāng)頁面載入時，會執(zhí)行位于body部分的JavaScript。當(dāng)被調(diào)用時，位于head部分的JavaScript才會被執(zhí)行。在哪里放置JavaScript頁面中的腳本會在頁面載入瀏覽器后立即執(zhí)行。我們并不總希望這樣。有時，我們希望當(dāng)頁面載入時執(zhí)行腳本，而另外的時候，我們則希望當(dāng)用戶觸發(fā)事件時才執(zhí)行腳本。位于head部分的腳本：當(dāng)腳本被調(diào)用時，或者當(dāng)事件被觸發(fā)時，腳本就會被執(zhí)行。當(dāng)你把腳本放置到head部分后，就可以確保在需要使用腳本之前，它已經(jīng)被載入了。<html><head><scripttype="text/javascript">....</script></head>....在哪里放置JavaScript位于body部分的腳本：在頁面載入時腳本就會被執(zhí)行。當(dāng)你把腳本放置于body部分后，它就會生成頁面的內(nèi)容。<html><head></head><body><scripttype="text/javascript">....</script></body></html>在哪里放置JavaScript使用外部JavaScript有時，你也許希望在若干個頁面中運(yùn)行JavaScript，同時不在每個頁面中寫相同的腳本。為了達(dá)到這個目的，你可以將JavaScript寫入一個外部文件之中。然后以.js為后綴保存這個文件。注意：外部文件不能包含<script>標(biāo)簽。然后把.js文件指定給<script>標(biāo)簽中的“src”屬性，就可以使用這個外部文件了：<html><head><scriptsrc="xxx.js">....</script></head><body></body></html>變量變量是用于存儲信息的容器：x=5;length=66.10;JavaScript變量名稱的規(guī)則：變量對大小寫敏感（y

和Y

是兩個不同的變量）變量必須以字母或下劃線開始

可以通過var語句來聲明JavaScript變量：varx;varcarname;或者：varx=5;varcarname="Volvo";也可以不聲明直接使用（隱式聲明）：x=5;carname="Volvo";運(yùn)算符算術(shù)運(yùn)算+、-、*、/>、<、=、>=、<=、==邏輯運(yùn)算與：&&或：||非：!字符串運(yùn)算符連接運(yùn)算：+條件表達(dá)式條件?A:B流程控制語句if語句if(條件)elseif(條件1)else…while語句while(條件)…switch語句switch(i)casei1:…casei2:…default:…fordo…while事件事件是可以被JavaScript偵測到的行為。網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā)JavaScript函數(shù)的事件。比方說，我們可以在用戶點(diǎn)擊某按鈕時產(chǎn)生一個onClick事件來觸發(fā)某個函數(shù)。事件在HTML頁面中定義。事件舉例：鼠標(biāo)點(diǎn)擊頁面或圖像載入鼠標(biāo)懸浮于頁面的某個熱點(diǎn)之上在表單中選取輸入框確認(rèn)表單鍵盤按鍵onload和onUnload當(dāng)用戶進(jìn)入或離開頁面時就會觸發(fā)onload和onUnload事件。onload事件常用來檢測訪問者的瀏覽器類型和版本，然后根據(jù)這些信息載入特定版本的網(wǎng)頁。onload和onUnload事件也常被用來處理用戶進(jìn)入或離開頁面時所建立的cookies。例如，當(dāng)某用戶第一次進(jìn)入頁面時，你可以使用消息框來詢問用戶的姓名。姓名會保存在cookie中。當(dāng)用戶再次進(jìn)入這個頁面時，你可以使用另一個消息框來和這個用戶打招呼："eJohnDoe!"。onFocus,onBlur和onChangeonFocus、onBlur和onChange事件通常相互配合用來驗(yàn)證表單。下面是一個使用onChange事件的例子。用戶一旦改變了域的內(nèi)容，checkEmail()函數(shù)就會被調(diào)用。<inputtype="text"size="30"id="email"onchange="checkEmail()">onSubmitonSubmit用于在提交表單之前驗(yàn)證所有的表單域。下面是一個使用onSubmit事件的例子。當(dāng)用戶單擊表單中的確認(rèn)按鈕時，checkForm()函數(shù)就會被調(diào)用。假若域的值無效，此次提交就會被取消。checkForm()函數(shù)的返回值是true或者false。如果返回值為true，則提交表單，反之取消提交。<formmethod="post"action="xxx.htm"onsubmit="returncheckForm()">

onMouseOver和onMouseOutonMouseOver和onMouseOut用來檢測鼠標(biāo)進(jìn)入/移出指定區(qū)域的滑動情況舉例事件部分JavaScript事件事件名稱含義onblur元素失去焦點(diǎn)onchange用戶改變域的內(nèi)容onclick鼠標(biāo)點(diǎn)擊某個對象ondblclick鼠標(biāo)雙擊某個對象onfocus元素獲得焦點(diǎn)onkeydown某個鍵盤的鍵被按下onkeypress某個鍵盤的鍵被按下或按住onkeyup某個鍵盤的鍵被松開onload某個頁面或圖像被完成加載onmousedown某個鼠標(biāo)按鍵被按下onmousemove鼠標(biāo)被移動onmouseout鼠標(biāo)從某元素移開onmouseover鼠標(biāo)被移到某元素之上onmouseup某個鼠標(biāo)按鍵被松開onsubmit提交按鈕被點(diǎn)擊onunload用戶退出頁面JavaScript對象面向?qū)ο缶幊蘆avaScript是面向?qū)ο蟮木幊陶Z言(OOP)，對象擁有屬性和方法。屬性屬性指與對象有關(guān)的值。在下面的例子中，我們使用字符串對象的長度屬性來計算字符串中的字符數(shù)目。<scripttype="text/javascript">vartxt="HelloWorld!"document.write(txt.length)</script>JavaScript對象方法方法指對象可以執(zhí)行的行為（或者可以完成的功能）。在下面的例子中，我們使用字符串對象的toUpperCase()方法來顯示大寫字母文本。<scripttype="text/javascript">varstr="Helloworld!"document.write(str.toUpperCase())</script>JavaScript內(nèi)建對象字符串日期數(shù)組String（字符串）對象舉例indexOf()定位字符串中某一個指定的字符串首次出現(xiàn)的位置。

<scripttype="text/javascript">varstr="Helloworld!"document.write(str.indexOf("Hello")+"<br/>")document.write(str.indexOf("World")+"<br/>")document.write(str.indexOf("world"))</script>輸出：0-16String（字符串）對象match()查找字符串中特定的字符串，并且如果找到的話，則返回這個字符。<scripttype="text/javascript">varstr="Helloworld!"document.write(str.match("world")+"<br/>")document.write(str.match("World")+"<br/>")document.write(str.match("worlld")+"<br/>")document.write(str.match("world!"))</script>輸出：worldnullnullworld!String（字符串）對象replace()在字符串中用某些字符替換另一些字符<scripttype="text/javascript">varstr="VisitMicrosoft!"document.write(str.replace(/Microsoft/,"W3School"))</script>輸出VisitW3School!Date（日期）對象日期對象用于處理日期和時間。Date()獲得當(dāng)日的日期和時間。getTime()返回從1970年1月1日至今的毫秒數(shù)。setFullYear()設(shè)置具體的日期…vard=newDate()d.setFullYear(1992,10,3)注意：表示月份的參數(shù)介于0到11之間。也就是說，如果希望把月設(shè)置為8月，則參數(shù)應(yīng)該是7。日期則是從1開始Array（數(shù)組）對象定義數(shù)組以下方法均可varmycars=newArray()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"varmycars=newArray(3)mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"varmycars=newArray("Saab","Volvo","BMW")Array（數(shù)組）對象for…in語句循環(huán)輸出數(shù)組中的元素varmycars=newArray()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"for(xinmycars){document.write(mycars[x]+"<br/>")}Array（數(shù)組）對象concat()合并數(shù)組vararr=newArray(3)arr[0]="George"arr[1]="John"arr[2]="Thomas"vararr2=newArray(3)arr2[0]="James"arr2[1]="Adrew"arr2[2]="Martin"document.write(arr.concat(arr2))Array（數(shù)組）對象join()將數(shù)組的所有元素組成一個字符串vararr=newArray(3);arr[0]="George"arr[1]="John"arr[2]="Thomas"document.write(arr.join());document.write("<br/>");document.write(arr.join("."));Array（數(shù)組）對象sort()排序functionsortNumber(a,b){returna-b}vararr=newArray(6)arr[0]="10"arr[1]="5"arr[2]="40"arr[3]="25"arr[4]="1000"arr[5]="1"document.write(arr+"<br/>")document.write(arr.sort(sortNumber))Math（算數(shù)）對象Math對象提供多種算數(shù)值類型和函數(shù)。round()對一個數(shù)進(jìn)行四舍五入。random()返回0到1之間的隨機(jī)數(shù)。max()返回兩個給定的數(shù)中的較大的數(shù)。min()返回兩個給定的數(shù)中的較小的數(shù)。JavaScriptHTMLDOM對象HTMLDOM是W3C標(biāo)準(zhǔn)（是HTML文檔對象模型的英文縮寫，DocumentObjectModelforHTML）。HTMLDOM定義了用于HTML的一系列標(biāo)準(zhǔn)的對象，以及訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。通過JavaScript，您可以重構(gòu)整個HTML文檔。您可以添加、移除、改變或重排頁面上的項(xiàng)目。要改變頁面的某個東西，JavaScript就需要獲得對HTML文檔中所有元素進(jìn)行訪問的入口。這個入口，連同對HTML元素進(jìn)行添加、移動、改變或移除的方法和屬性，都是通過文檔對象模型來獲得的（DOM）。HTMLDOM獨(dú)立于平臺和編程語言。它可被任何編程語言諸如Java、JavaScript和VBScript使用。JavaScriptHTMLDOM對象HTMLDOM把HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點(diǎn)樹）。節(jié)點(diǎn)彼此都有等級關(guān)系。HTML文檔中的所有節(jié)點(diǎn)組成了一個文檔樹（或節(jié)點(diǎn)樹）。HTML文檔中的每個元素、屬性、文本等都代表著樹中的一個節(jié)點(diǎn)。樹起始于文檔節(jié)點(diǎn)，并由此繼續(xù)伸出枝條，直到處于這棵樹最低級別的所有文本節(jié)點(diǎn)為止。Document對象每個載入瀏覽器的HTML文檔都會成為Document對象。Document對象使我們可以從腳本中對HTML頁面中的所有元素進(jìn)行訪問。部分document方法方法描述close()關(guān)閉用document.open()方法打開的輸出流，并顯示選定的數(shù)據(jù)。getElementById()返回對擁有指定id的第一個對象的引用。getElementsByName()返回帶有指定名稱的對象集合。getElementsByTagName()返回帶有指定標(biāo)簽名的對象集合。open()打開一個流，以收集來自任何document.write()或document.writeln()方法的輸出。write()向文檔寫HTML表達(dá)式或JavaScript代碼。writeln()等同于write()方法，不同的是在每個表達(dá)式之后寫一個換行符。HTMLDOMgetElementById()方法getElementById()返回對擁有指定ID的第一個對象的引用。語法document.getElementById(id)HTMLDOM定義了多種查找元素的方法，除了getElementById()之外，還有g(shù)etElementsByName()和getElementsByTagName()。不過，如果需要查找文檔中的一個特定的元素，最有效的方法是getElementById()。在操作文檔的一個特定的元素時，最好給該元素一個id屬性，為它指定一個（在文檔中）唯一的名稱，然后就可以用該ID查找想要的元素。HTMLDOMgetElementById()方法舉例<html><head><scripttype="text/javascript">functiongetValue(){varx=document.getElementById("myHeader")alert(x.innerHTML)}</script></head><body><h1id="myHeader"onclick="getValue()">Thisisaheader</h1><p>Clickontheheadertoalertitsvalue</p></body></html>HTMLDOMgetElementsByName()方法getElementsByName()返回帶有指定名稱的對象的集合。該方法與getElementById()方法相似，但是它查詢元素的name屬性，而不是id屬性。語法document.getElementsByName(name)因?yàn)橐粋€文檔中的name屬性可能不唯一（如HTML表單中的單選按鈕通常具有相同的name屬性），所有g(shù)etElementsByName()方法返回的是元素的數(shù)組，而不是一個元素。HTMLDOMgetElementsByName()方法實(shí)例

getElementsByNameHTMLDOMgetElementsByTagName()方法getElementsByTagName()返回帶有指定標(biāo)簽名的對象的集合。語法document.getElementsByTagName(tagname)getElementsByTagName()方法返回元素的順序是它們在文檔中的順序。如果把特殊字符串“*”傳遞給getElementsByTagName()方法，它將返回文檔中所有元素的列表，元素排列的順序就是它們在文檔中的順序。傳遞給getElementsByTagName()方法的字符串可以不區(qū)分大小寫。舉例varx=document.getElementsByTagName("input");alert(x.length);HTMLDOMwrite()方法write()向文檔寫入HTML表達(dá)式或JavaScript代碼。可列出多個參數(shù)(exp1,exp2,exp3,...)，它們將按順序被追加到文檔中。語法document.write(exp1,exp2,exp3,....)使用document.write()向輸出流寫文本document.write("HelloWorld!");使用document.write()向輸出流寫HTMLdocument.write("<h1>HelloWorld!</h1>")document.write("HelloWorld!","HelloYou!","<pstyle='color:blue;'>HelloWorld!</p>")HTMLDOMRadio對象Radio對象代表HTML表單中的單選按鈕。在HTML表單中<inputtype=“radio”>每出現(xiàn)一次，一個Radio對象就會被創(chuàng)建。單選按鈕是表示一組互斥選項(xiàng)按鈕中的一個。當(dāng)一個按鈕被選中，之前選中的按鈕就變?yōu)榉沁x中的。當(dāng)單選按鈕被選中或不選中時，該按鈕就會觸發(fā)onclick事件句柄。Radio對象屬性舉例radioHTMLDOMTableCell對象TableCell對象代表一個HTML表格單元格。在一個HTML文檔中<td>標(biāo)簽每出現(xiàn)一次，一個TableCell對象就會被創(chuàng)建。innerHTML屬性可設(shè)置或返回單元格的開始標(biāo)簽和結(jié)束標(biāo)簽之間的HTML。語法tabledataObject.innerHTML=textHTMLDOMTableCell對象示例tablecellWindow對象Window對象表示瀏覽器中打開的窗口沒有應(yīng)用于window對象的公開標(biāo)準(zhǔn)，不過所有瀏覽器都支持該對象。Window對象表示一個瀏覽器窗口或一個框架。在客戶端JavaScript中，Window對象是全局對象，所有的表達(dá)式都在當(dāng)前的環(huán)境中計算。也就是說，要引用當(dāng)前窗口根本不需要特殊的語法，可以把那個窗口的屬性作為全局變量來使用。例如只寫alert()，而不必寫Window.alert()。HTMLDOMopen()方法open()打開一個新的瀏覽器窗口或查找一個已命名的窗口。語法window.open(URL,name,features,replace)

URL一個可選的字符串，聲明了要在新窗口中顯示的文檔的URL。如果省略了這個參數(shù)，或者它的值是空字符串，那么新窗口就不會顯示任何文檔。name一個可選的字符串，，該字符聲明了新窗口的名稱。如果該參數(shù)指定了一個已經(jīng)存在的窗口，那么open()方法就不再創(chuàng)建一個新窗口，而只是返回對指定窗口的引用。在這種情況下，features將被忽略。features一個可選的字符串，聲明了新窗口要顯示的標(biāo)準(zhǔn)瀏覽器的特征。如果省略該參數(shù)，新窗口將具有所有標(biāo)準(zhǔn)特征。replace一個可選的布爾值。規(guī)定了裝載到窗口的URL是在窗口的瀏覽歷史中創(chuàng)建一個新條目，還是替換瀏覽歷史中的當(dāng)前條目。支持下面的值：true-URL替換瀏覽歷史中的當(dāng)前條目。false-URL在瀏覽歷史中創(chuàng)建新的條目。HTMLDOMopen()方法舉例<head><scripttype="text/javascript">functionopen_win(){window.open("")}</script></head><body><inputtype=buttonvalue="OpenWindow"onclick="open_win()"/></body>HTMLDOMopen()方法舉例按照指定的長度和寬度打開空白窗口，寫入一些內(nèi)容，并將窗口設(shè)置為焦點(diǎn)myWindow=window.open('','','width=200,height=100')myWindow.document.write("Thisis'myWindow'")myWindow.focus()HTMLDOMclose()方法close()用于關(guān)閉瀏覽器窗口。語法window.close()方法close()將關(guān)閉有window指定的頂層瀏覽器窗口。某個窗口可以通過調(diào)用self.close()或只調(diào)用close()來關(guān)閉其自身。只有通過JavaScript代碼打開的窗口才能夠由JavaScript代碼關(guān)閉。這阻止了惡意的腳本終止用戶的瀏覽器。HTMLDOMalert()方法alert()用于顯示帶有一條指定消息和一個OK按鈕的警告框。語法alert(message)message要在window上彈出的對話框中顯示的純文本（而非HTML文本）HTMLDOMconfirm()方法confirm()顯示一個帶有指定消息和OK及取消按鈕的對話框。語法confirm(message)如果用戶點(diǎn)擊確定按鈕，則confirm()返回true。如果點(diǎn)擊取消按鈕，則confirm()返回false。在用戶點(diǎn)擊確定按鈕或取消按鈕把對話框關(guān)閉之前，它將阻止用戶對瀏覽器的所有輸入。在調(diào)用confirm()時，將暫停對JavaScript代碼的執(zhí)行，在用戶作出響應(yīng)之前，不會執(zhí)行下一條語句。HTMLDOMconfirm()方法舉例confirmHTMLDOMsetInterval()方法setInterval()按照指定的周期（以毫秒計）來調(diào)用函數(shù)或計算表達(dá)式。setInterval()方法會不停地調(diào)用函數(shù)，直到clearInte

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論