官术网_书友最值得收藏!

首頁 >

網(wǎng)頁設(shè)計與網(wǎng)站建設(shè)從入門到精通

1.2 熟悉HTML

網(wǎng)站是由各個網(wǎng)頁組成的，而HTML又是網(wǎng)頁主要的組成部分。所以要學(xué)習(xí)網(wǎng)站怎樣建設(shè)，必須從HTML語言學(xué)起。

先簡單的介紹一下HTML語言。HTML是一種標記語言，在網(wǎng)頁的編輯中用于標識網(wǎng)頁中的不同元素。它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面，這些頁面可以被網(wǎng)上任何其他人瀏覽到，無論使用的是什么類型的電腦或瀏覽器?；蛟S有些使用過一般網(wǎng)頁編輯軟件的讀者會說：“不懂HTML語言也能編輯出一個非常優(yōu)秀的網(wǎng)頁來”，確實是這樣的，如使用Macromedia Dreamweaver就能做到。但是要成為一個真正的網(wǎng)頁編程高手，一定要了解HTML語言的基本結(jié)構(gòu)。在本節(jié)中將講解HTML的基礎(chǔ)知識以及網(wǎng)頁相關(guān)知識，這些內(nèi)容的學(xué)習(xí)和掌握是一個網(wǎng)頁設(shè)計高手成長的必經(jīng)之路。

1.2.1 我的第一個HTML頁面

一個HTML文件的后綴名是．htm或者是．html。我們使用文本編輯器就可以編寫HTML文件。和一般文本的不同的是，一個HTML文件不僅包含文本內(nèi)容，還包含一些Tag，中文稱“標記”。

現(xiàn)在讓我們親自寫一個HTML文件來大體看看網(wǎng)頁的結(jié)構(gòu)吧。

打開記事本，新建一個文件，輸入以下代碼，然后將這個文件存成myfirst.html。

<html>
<head>
<title>歡迎光臨</title>
</head>
<body>
<! --下面是網(wǎng)頁內(nèi)容-->
這是我的第一個HTML頁面<b>這些文件是加粗的</b>
</body>
</html>

雙擊文件，系統(tǒng)會自動使用瀏覽器打開它，可以看到它的效果。上面各個代碼的含義如下。

① HTML這個文件的第一個Tag是<html>，這個標記告訴你的瀏覽器，這是HTML文件的頭。文件的最后一個Tag是</html>，表示HTML文件到此結(jié)束。

② 在<head>和</head>之間的內(nèi)容，是頭部信息。頭部內(nèi)的信息通常是不顯示出來的，一般在瀏覽器里看不到。但是這并不表示這些信息沒有用處。比如，可以在Head信息里加上一些關(guān)鍵詞，有助于搜索引擎搜索到網(wǎng)頁。

③ 在<title>和</title>之間的內(nèi)容，是這個文件的標題?？梢栽跒g覽器最頂端的標題欄看到這個標題。

④ 在<body>和</body>之間的信息，是正文。

⑤ 在<b>和</b>之間的文字，用粗體表示。<b>顧名思義，就是bold（加粗）的意思。

從上面的例子我們可以看出HTML文件有以下這些特點。

① HTML文件看上去和一般文本類似，但是它比一般文本多了Tag，如<html>, <b>等。通過這些Tag，可以告訴瀏覽器如何顯示這個文件。

② Tag以“<”開始，以“>”結(jié)束。

③ Tag通常是成對出現(xiàn)的，如<body></body>。

④ HTML的Tag不區(qū)分大小寫。比如，<HTML>和<html>其實是相同的。

⑤ 注釋由開始標記“<! --”和結(jié)束標記“-->”構(gòu)成，注釋內(nèi)容不在瀏覽器窗口中顯示。

1.2.2 HTML元素的屬性

HTML元素用Tag表示，它可以擁有屬性，屬性用來擴展HTML元素的能力。比如，可以使用一個bgcolor屬性，使得頁面的背景色成為紅色，就像這樣：

<body bgcolor="red">

屬性通常由屬性名和值成對出現(xiàn)，就像這樣：name="value"。上面例子中的bgcolor就是name, red就是value。屬性值一般用雙引號標記起來。

屬性通常是附加給HTML的開始標記，而不是結(jié)束標記。

1.2.3 BODY屬性的設(shè)置

BODY標記作為網(wǎng)頁的主體部分，有很多內(nèi)置屬性，這些屬性用于設(shè)置網(wǎng)頁的總體風(fēng)格。主要屬性見下表。

在上述屬性中，各個顏色屬性的值有兩種表示方法：一種是使用顏色名稱來指定，如紅色、綠色和藍色分別用red、green和blue表示；另一種是使用十六進制RGB格式表示，表示形式為color＝"#RRGGBB"或color＝"RRGGBB"，其中RR是紅色、GG是綠色、BB是藍色，各顏色分量的取值范圍為00—FF。例如，#00FF00表示綠色，#FFFFFF表示白色。

背景圖片屬性值是一個相對路徑的圖片文件名。例如<body backgroud＝"bg.gif">中bg.gif是背景圖片的名字，這個實際是帶相對路徑的圖片文件名字。例如，你做的這個頁面放在d:\myweb\，而背景圖片的位置放在d:\myweb\images\，那么就需要這樣寫了：<body backgroud＝"images\bg.gif">。

1.2.4 字體屬性的應(yīng)用

1．標題字體

<h#>文字</h#>

其中# =1,2,3,4,5,6。

例如，<h1>你好，歡迎光臨</h1>

用于設(shè)置文檔中的標題，<H1>到<H 6>標題標記會自動將字體加粗，并在文字上下空一行。

2．字體的大小

<font size=#>文字</font>。

其中#=1, 2, 3, 4, 5, 6, 7 or +#, -#

例如，<font size=7>你好，歡迎光臨</font>

3．字體的修飾

粗體：<b>文字</b>

斜體：<i>文字</i>

下畫線：<u>文字</u>

刪除線：<strike>文字</strike>

閃爍：<blink>文字</blink>

增強：<strong>文字</strong>

強調(diào)：<em>文字</em>

4．字體顏色

指定顏色<font color=#>文字</font>

例如，紅色文字可以表示為：<font color=red>文字</font>或者<font color=#ff0000>文字</font>。

1.2.5 在網(wǎng)頁中插入圖像

大量采用在網(wǎng)頁設(shè)計中的圖像，網(wǎng)頁的美感大多來自精心處理的圖像?？墒褂肐MG標記在網(wǎng)頁中插入一個圖像。以下為IMG標記最常用的4個屬性。

● SRC屬性：給出圖像文件的URL地址，圖像可以是JPEG文件、GIF文件或PNG文件。

● AIT屬性：給出圖像的簡單文本說明，這段文本將在瀏覽器不能顯示圖像或圖像或者加載時間過長時顯示。

● HEIGHT屬性：設(shè)置圖像的高度，所用單位可以是像素或百分數(shù)。

● WIDTH屬性：設(shè)置圖像的寬度。

|提示|

如果只給出了高度或?qū)挾?，則圖像將按比例進行縮放。

1.2.6 表格的使用

表格在網(wǎng)頁設(shè)計中有著廣泛的應(yīng)用，它不僅可作為信息的一種表示形式，還常用于頁面設(shè)計中的布局與定位。

1．表格的創(chuàng)建

表格一般由若干行和若干列的單元格組成，表格上面可以有一個標題，表的第一行稱為表頭。與表格相關(guān)的標簽如下。

● <table>：界定表格，最常用的屬性是border，定義邊界線的粗細。

● <tr>：定義表格的一行。

● <td>：定義單元格。

2．表格的常用屬性

續(xù)表

|提示|

<TD>ALIGN和VALIGN屬性將會覆蓋任何為整個一行指定的排列方式。

以下代碼將創(chuàng)建一個2行2列的表格。

<table width="540" height="249" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="204">這是第一行第一列</td>
<td width="336" align="center">這是第一行第二列，居中</td>
</tr>
<tr>
<td>這是第二行第一列</td>
<td valign="bottom">這是第二行第二列，文字居于底部</td>
</tr>
</table>

代碼運行效果如下圖所示。

1.2.7 框架的使用

框架網(wǎng)頁將瀏覽器上的視窗分成不同區(qū)域，在每個區(qū)域中都可以獨立顯示一個網(wǎng)頁，也就是所謂的分割窗口?？蚣芫W(wǎng)頁通過一個或多個FRAMESET和FRAME標記來定義。 FRAMESET表示框自集，F(xiàn)RAME代表一個框架。在框架網(wǎng)頁中，將FRMAESET標記置于HEAD之后，以取代BODY的位置，還可以使用noframes標記給出框架不能被顯示時的替換內(nèi)容。

以下代碼是創(chuàng)建一個包含有2個框架的頁面，并在框架中各自放入不同網(wǎng)站的首頁，效果如下圖所示。

<HTML>
<HEAD>
<TITLE>框窗實作</TITLE>
</HEAD>
<FRAMESET COLS="500, *" >
  <FRAME SRC="http://www.sohu.com" NAME="1">
  <FRAME SRC="http://www.163.com" NAME="2">
</FRAMESET>
</HTML>

示例解釋：

● COLS="500, ＊" ：垂直切割成2個畫面，一個為500像素，另一個為余下的寬度。你也可以切成三個，如COLS="300, ＊,100"。

● SRC="http://www.sohu.com"：設(shè)定此框架中要顯示的網(wǎng)頁名稱。每個框架一定要對應(yīng)一個網(wǎng)頁，否則就會產(chǎn)生錯誤，這里將搜狐首頁面置入左框架中。

● NAME="1"：設(shè)定這個框架的名稱，這樣才能指定框架來作連結(jié)。

常見的框架結(jié)構(gòu)包括上方固定、下方固定、右側(cè)固定、左側(cè)固定四種基本框架，代碼如下。

上方固定：

<frameset rows="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="topFrame" scrolling="No" noresize="noresize" title="topFrame" />
<frame src="test2.htm" name="mainFrame" title="mainFrame" />
</frameset>

下方固定：

<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="bottomFrame" scrolling="No" noresize="noresize"title="bottomFrame" />
</frameset>

右側(cè)固定：

<frameset cols="*,80" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="mainFrame" title="mainFrame" />
<frame src="test2.htm" name="rightFrame" scrolling="No" noresize="noresize"title="rightFrame" />
</frameset>

左側(cè)固定：

<frameset cols="80, *" frameborder="no" border="0" framespacing="0">
<frame src="test1.htm" name="leftFrame" scrolling="No" noresize="noresize"title="leftFrame" />
<frame src="test2.htm" name="mainFrame" title="mainFrame" />
</frameset>

其他諸如上方固定右側(cè)嵌套、右側(cè)固定上方嵌套等都是由這幾個基本型構(gòu)成。

1.2.8 表單的使用

留言版就是一個表單運用很好的例子。表單通常必須配合腳本或后臺程序來運行才有意義。本單元純粹以介紹各式表單為主，在本書的后面章節(jié)我們將介紹如何將表單與程序相結(jié)合。

以下是常用表單及屬性的代碼示例及相應(yīng)的效果。

1.2.9 超鏈接的使用

沒有鏈接，WWW將失去存在的意義。文件鏈接是超鏈中最常用的一種情形，基本語法格式如下。

<a href="字符串" target="字符串" title="字符串’>文本</a>

其中各屬性描述如下。

① href：該屬性是必選項，用于指定目標端點的url地址。

② target：該屬性是可選項，用于指定一個窗口或框架的名稱。目標文檔將在指定窗口或框架中打開。如果省略該屬性，則在超鏈所處的窗體或框架中打開目標文檔。

③ title：該屬性也是可選項，用于指定鼠標移到超級鏈接所顯示的標題文字。

建立一個百度的超鏈接如下。

<a >百度</a>

1.3 熟悉JavaScript語言

想要學(xué)好網(wǎng)頁設(shè)計，JavaScript語言的熟練應(yīng)用必不可少，下面簡單介紹。

1.3.1 JS簡介及特點

JavaScript是一種基于對象和事件驅(qū)動，并具有安全性能的腳本語言。有了JavaScript，可使網(wǎng)頁變得生動。使用它的目的是與HTML超文本標識語言、Java腳本語言一起實現(xiàn)在一個網(wǎng)頁中鏈接多個對象，與網(wǎng)絡(luò)客戶交互作用，從而可以開發(fā)客戶端的應(yīng)用程序。它是通過嵌入或調(diào)入在標準的HTML語言中實現(xiàn)的。

JavaScript具有以下特點。

① JavaScript是動態(tài)的，它可以直接對用戶或客戶輸入作出響應(yīng)，無須經(jīng)過Web服務(wù)程序。

② JavaScript是一種腳本語言，它本身提供了非常豐富的內(nèi)部對象供設(shè)計人員使用。

③ JavaScript是一種可以嵌入Web頁面中的解釋性編程語言，其源代碼在發(fā)往客戶端執(zhí)行之前不需經(jīng)過編譯，而是將文本格式的字符代碼發(fā)送給客戶，由瀏覽器解釋執(zhí)行。

④ JavaScript中變量聲明，采用其弱類型。即變量在使用前不需作聲明，而由解釋器在運行時檢查其數(shù)據(jù)類型。

⑤ JavaScript的代碼是一種文本字符格式，可以直接嵌入HTML文檔中，并且可動態(tài)裝載。編寫HTML文檔就像編輯文本文件一樣方便。

⑥ JavaScript使用 <script>...</script> 來標識。

1.3.2 JS的數(shù)據(jù)類型和變量

JavaScript有六種數(shù)據(jù)類型。主要的類型有number、string、object以及Boolean類型，其他兩種類型為null和undefined。

● String字符串類型：字符串是用單引號或雙引號來說明的（使用單引號來輸入包含引號的字符串）。

● 數(shù)值數(shù)據(jù)類型：JavaScript支持整數(shù)和浮點數(shù)。整數(shù)可以為正數(shù)、0或者負數(shù)；浮點數(shù)可以包含小數(shù)點，也可以包含一個 “e”（大小寫均可，在科學(xué)記數(shù)法中表示“10的冪”），或者同時包含這兩項。

● Boolean類型：可能的Boolean值有true和false。這是兩個特殊值，不能用作1和0。

● Undefined數(shù)據(jù)類型：一個為undefined的值就是指在變量被創(chuàng)建后，但未給該變量賦值以前所具有的值。

● Null數(shù)據(jù)類型：null值就是沒有任何值，什么也不表示。

● object類型：除了上面提到的各種常用類型外，對象也是JavaScript中的重要組成部分。

在JavaScript中變量用來存放腳本中的值，在需要用這個值的地方就可以用變量來代表，一個變量可以是一個數(shù)字，文本或其他一些東西。

JavaScript是一種對數(shù)據(jù)類型變量要求不太嚴格的語言，所以不必聲明每一個變量的類型。變量聲明盡管不是必須的，但在使用變量之前先進行聲明是一種好的習(xí)慣?？梢允褂胿ar語句來進行變量聲明。例如，var men = true; // men中存儲的值為Boolean類型。

變量命名：JavaScript是一種區(qū)分大小寫的語言，因此將一個變量命名為computer和將其命名為Computer是不一樣的。

另外，變量名稱的長度是任意的，但必須遵循以下規(guī)則。

① 第一個字符必須是一個字母（大小寫均可），或一個下畫線(_)或一個美元符 ($)。

② 后續(xù)的字符可以是字母、數(shù)字、下畫線或美元符。

③ 變量名稱不能是保留字。

1.3.3 JS的語句及語法

JavaScript所提供的語句分為6個大類，分別是變量聲明賦值語句、函數(shù)定義語句、條件和分支語句、循環(huán)語句、對象操作語句和注釋語句。

1．變量聲明，賦值語句

變量簡單地說就是指那些沒有固定值，可以改變的數(shù)。在使用一個變量之前，首先要聲明這個變量，在JavaScript中使用var關(guān)鍵字聲明變量。

語法如下： var變量名稱 [=初始值] 。

通常我們可以一次聲明一個變量，如：

Var a;

也可以一次聲明多個變量，如：

Var a, b, c;

還可以在聲明變量的同時給變量賦一個初始值，如：

var a = 32 //定義b是一個變量，且有初值為32。

|提示|

變量名可以是任意長度，但必須符合下列規(guī)則。

① 變量名的第一個字符必須是英文字母，或者是下畫線符號。

② 變量名的第一個字母不能是數(shù)字。其后的字符，可以是英文字母、數(shù)字或下畫線符號。

③ 變量名不能是JavaScript的保留字。

2．條件和分支語句

if...else條件語句：條件語句通俗的講就是根據(jù)你想要滿足的條件進行的判斷，在滿足你想要的條件時執(zhí)行什么語句，當不滿足你想要的條件時執(zhí)行什么語句。條件語句是所有程序語言中最基本的語句之一。

if...else語句完成了程序流程塊中分支功能：如果其中的條件成立，則程序執(zhí)行緊接著條件的語句或語句塊；否則程序執(zhí)行else中的語句或語句塊。

用法如：

if (result == true)
      {
      response = "你答對了！"
      }else{
      response = "你錯了！"
      }

switch分支語句：分支語句簡單的說就是選擇語句，根據(jù)一個變量的不同取值選擇不同的處理方法。

用法如：

Switch (score){
Case 50:
  Result="悲哀呀，你掛科了";
  Break;
Case 60:
  Result="很幸運，你勉強通過";
 Break;
Case 70:
  Result="不錯，還需要加油呀";
 Break;
Case 80:
  Result="還能更進一步嗎？";
 Break;
Case 90:
  Result="高手呀，佩服佩服";
 Break;
}

Break關(guān)鍵詞用來跳出分支語句，如果判斷score為50，接著執(zhí)行result="悲哀呀，你掛科了"，直接跳出switch語句，不再進行下面的條件判斷。

|提示|

當分支條件比較少時，if ...else與switch都可以使用，在分支條件較多時使用switch最為有效。

3．循環(huán)語句

循環(huán)語句是指實現(xiàn)重復(fù)計算或操作的語句，循環(huán)語句也是高級語言中常用語句之一。在JavaScript中常用循環(huán)語句有for, for … in , while, do while。

for語句用于在執(zhí)行次數(shù)一定的情況下，語法如下。

for (變量=開始值；變量<=結(jié)束值；變量=變量+步進值)
    {
      需要反復(fù)執(zhí)行的語句．..
 }

只要變量小于結(jié)束值，循環(huán)體就被反復(fù)的執(zhí)行。如：

var i=0
for (i=0; i<=10; i++)
{
document.write("已運行次數(shù)：" + i)
document.write("<br />")
}

for...in語句與for語句有一點不同，它循環(huán)的范圍是一個對象所有的屬性或是一個數(shù)組的所有元素。語法如下。

for (變量in 對象或數(shù)組)
{
要執(zhí)行的語句．..
}

如：

var i
var sz = new Array()
sz[0] = "11"
sz[1] = "12"
sz[2] = "13"
for (x in sz)
{
document.write(sz[i] + "<br />")
}

while語句所控制的循環(huán)不斷地測試條件，如果條件始終成立，則一直循環(huán)，直到條件不再成立。語法如下。

while (變量<=結(jié)束值)
  {
要執(zhí)行的語句．..
}
如：
var i=0
while (i<=10)
{
document.write("已運行次數(shù)： " + i)
document.write("<br />")
i=i+1
}

Do...while語句與while語句很相似，在判斷之前先執(zhí)行一次語句，然后判斷是否符合指定條件，當條件符合時候接著再執(zhí)行語句，如：

var i=0
do
{
document.write("已運行次數(shù)：" + i)
document.write("<br />")
i=i+1
}
while (i<0)

|提示|

do...while語句至少執(zhí)行一次，而while語句則不然，當指定條件不成立時候，語句不被執(zhí)行。

1．函數(shù)定義語句

函數(shù)是一組隨時隨地可以調(diào)用的語句，用來實現(xiàn)程序的功能和方法。在JavaScript中，函數(shù)用關(guān)鍵詞function定義，語法如下。

function 函數(shù)名稱 （函數(shù)所帶的參數(shù)）
        {
            函數(shù)執(zhí)行部分
          }

return語句將結(jié)束函數(shù)并返回后面表達式的值，return語句的語法為：“return表達式”函數(shù)結(jié)束時可以沒有return語句，但是只要遇到return語句函數(shù)就結(jié)束。函數(shù)的定義和調(diào)用如下。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT LANGUAGE="JavaScript">
function getSqrt(x)
{
var y=x * x;
document.write(y);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
getSqrt(8);
</SCRIPT>
</BODY>
</HTML>

程序定義了一個函數(shù)，該函數(shù)沒有返回值。每次調(diào)用就會將相應(yīng)的內(nèi)容顯示到瀏覽器上。

2．對象操作語句

JavaScript是一種基于對象的編程的語言，它為我們提供了豐富的對象，這就需要我們懂得如何去操作這些對象，這就是對象操作語句。常用對象操作語句有with、new和this。

With語句起到這樣的作用，如果你想使用某個對象的許多屬性或方法時，只要在with語句的（）中寫出這個對象的名稱，然后在下面的執(zhí)行語句中直接寫這個對象的屬性名或方法名就可以了。語法如下。

with (對象名稱)
{
執(zhí)行語句
}
如：
with(document)
{
  write("文檔的標題是 ： \"" + title + "\".");
  write("文檔的URL是： " + URL);
  }

其中title和url就是document的兩個屬性。

new語句是一種對象構(gòu)造器，可以用new語句來定義一個新對象。語法如下。

新對象名稱＝ new真正的對象名

例如，我們可以這樣定義一個新的日期對象： var curr＝ new Date()，然后，變量curr就具有了Date對象的屬性。

this運算符總是指向當前的對象。

3．注釋語句

注釋語句就是在程序的開始或中間，對程序進行說明的語句。在程序的后繼維護開發(fā)中，注釋語句起到非常重要的作用。注釋語句有單行注釋（//）和多行注釋(/＊＊/)，如：

//這是單行注釋

/＊這可以多行注釋．.. ＊/

1.3.4 JS的對象及其屬性和方法

在對象操作語句中我們了解了對象這個概念，JavaScript為我們提供了一些非常有用的常用內(nèi)部對象和方法。用戶不需要用腳本來實現(xiàn)這些功能。這正是基于對象編程的真正目的。在實際工作中，我們經(jīng)常用到這些對象方法。熟練靈活地運用這些對象方法，能給我們的工作帶來很大的便利。

在實際工作中我們頻繁使用的對象有字符串、數(shù)組、日期和時間。

1．字符串對象String

字符串很容易理解，就是一些字符的集合。如s=“this is a string”，這就代表s為字符串變量，而“this is a string”是一串字符。字符串對象有以下屬性和方法。

（1）獲取字符串長度length屬性

如：

var a=' ';
a.length;                            //返回0
var b ='javascript';
b.length;                            //返回10

（2）截取字符串substring方法

substring方法可以接受兩個參數(shù)來指定截取范圍，當?shù)诙€參數(shù)被省略時，默認截取到字符串的結(jié)尾。如：

var a = ' this is a string ';
var b=a.substring(2,4);        //b='is'
var c=a.substring(2);    //c='is a string'

（3）字符串替換replace方法

replace方法可以將字符串中指定的內(nèi)容替換成新的內(nèi)容并返回一個新的字符串。如：

var a= ’我要建網(wǎng)站’;
var b=a.replace(’要’, ’學(xué)習(xí)’);                   //b= ’我學(xué)習(xí)建網(wǎng)站’

從例子中我們看到replace方法有2個參數(shù)，第一個為需要被替換的子字符串，第二個為替換的內(nèi)容。當執(zhí)行replace方法時，程序會在字符串中查找所有與第一個參數(shù)相符的片段，并替換為第二個參數(shù)指定的內(nèi)容。如：

Var a = 'this is a string ';
Var b=replace(' is' , 'aa '); //b= 'thaa aa a string'

（4）大小寫轉(zhuǎn)換toLowerCase和toUpperCase

在程序處理過程中，有時候需要對字符串進行變大寫或變小寫，比如，比較兩個字符串是否相等。toLowerCase是把所有字母轉(zhuǎn)為小寫，相應(yīng)的toUpperCase是把所有字符轉(zhuǎn)為大寫。如：

Var a= 'This is a string ';
Var b=a.tolowercase(); //b='this is a string'
Var c=a.touppercase(); //c='THIS IS A STRING'

2．數(shù)組對象Array

數(shù)組同字符串對象一樣，是一種數(shù)據(jù)類型，通過數(shù)組可以把若干變量有序地組織起來，也是最常用的數(shù)據(jù)類型之一。它有兩種創(chuàng)建方式，其一通過數(shù)組直接進行創(chuàng)建；其二通過Array關(guān)鍵詞進行創(chuàng)建。如：

var a = [123,44 , '3',22]; //直接創(chuàng)建數(shù)組
var b= new Array(6); //6個元素的數(shù)組

數(shù)組常用的屬性方法有獲取數(shù)組的長度、添加數(shù)組中的元素。同字符串一樣，數(shù)組也是通過length函數(shù)獲取長度的。如：

Var a=['1', '2', '3', '4', '5'];
Var b=a.length    //b=5

向數(shù)組中添加數(shù)據(jù)使用unshift關(guān)鍵字操作。如：

Var a=['1', '2', '3', '4', '5'];
a.unshift(0);         //a=[0,1,2,3,4,5]

|提示|

在JavaScript語言中，數(shù)組中值的數(shù)據(jù)類型可以不一致，這一點與其他語言有區(qū)別。

3．日期和時間對象Date

對時間的處理是程序設(shè)計中經(jīng)常需要做的事情。在JavaScript中，時間由Date對象表示，一個Date對象表示一個日期和時間值。Date對象提供了豐富的方法來對這些值進行操作。日期和時間類型通過Date關(guān)鍵字進行創(chuàng)建。如：

var now = new Date(); //返回的是一個表示當前時間的對象

日期和時間對象有很多常用屬性和方法。

● getFullYear()：返回對象中的年份部分，用四位數(shù)表示。

● getMonth()：返回對象中的月份部分（從0開始計算）。

● getDate()：返回對象所代表的一月中的第幾天。

● getDay()：返回對象所代表的一周中的第幾天。

● getHours()：返回對象中的小時部分。

● getMinutes()：返回對象中的分鐘部分。

● getSeconds()：返回對象中的秒部分。

● getMilliseconds()：返回對象中的毫秒部分。

● getTime()：返回對象的內(nèi)部毫秒表示。

使用起來都是一樣的，如：

var now = new Date();
var curryear=now. getFullYear() //返回當前年份curryear='2012'

|提示|

對象只是一種特殊的數(shù)據(jù)。

1.3.5 JS的事件處理

事件是瀏覽器響應(yīng)用戶交互操作的一種機制，JavaScript的事件處理機制可以改變?yōu)g覽器響應(yīng)用戶操作的方式，這樣就開發(fā)出具有交互性并易于使用的網(wǎng)頁。

瀏覽器為了響應(yīng)某個事件而進行的處理過程，叫作事件處理。

事件定義了用戶與頁面交互時產(chǎn)生的各種操作，例如單擊超級連接或按鈕時，就產(chǎn)生一個單擊（click）操作事件。瀏覽器在程序運行的大部分時間都等待交互事件的發(fā)生，并在事件發(fā)生時，自動調(diào)用事件處理函數(shù)，完成事件處理過程。

事件不僅可以在用戶交互過程中產(chǎn)生，而且瀏覽器自己的一些動作也可以產(chǎn)生事件，例如，當載入一個頁面時，就會發(fā)生load事件，卸載一個頁面時，就會發(fā)生unload事件等。

歸納起來，必須使用的事件有三大類。

① 引起頁面之間跳轉(zhuǎn)的事件，主要是超鏈接事件。

② 事件瀏覽器自己引起的事件。

③ 事件在表單內(nèi)部同界面對象的交互。

界面事件包括Click（單擊）、MouseOut（鼠標移出）、MouseOver（鼠標移過）和MouseDown（鼠標按下）等。

1．單擊事件

鼠標單擊事件是常見的事件，語法非常簡單：“onclick=函數(shù)或是處理語句”。如：

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="BUTTON" VALUE="單擊" ONCLICK="alert(’鼠標單擊’)">
</FORM>
</BODY>
</HTML>

當鼠標單擊按鈕的時候，自動彈出一個對話框，顯示的結(jié)果如下圖所示。

2．處理下拉列表

下拉列表是常用的一種網(wǎng)頁元素，一般利用ONCHANGE事件來處理。如：

<HTML>
<HEAD>
</HEAD>
<BODY>
<SELECT NAME="selAddr" SIZE="1" ONCHANGE="func()">
<OPTION SELECTED VALUE="鄭州">鄭州</OPTION>
<OPTION VALUE="洛陽">洛陽</OPTION>
<OPTION VALUE="開封">開封</OPTION>
</SELECT>
<SCRIPT LANGUAGE="JavaScript">
function func()
{
alert("你選擇了" + selAddr.value);
}
</SCRIPT>
</BODY>
</HTML>

每個下拉列表的OPTION項都有一個VALUE值，讀出來的是VALUE屬性的值。執(zhí)行的結(jié)果如下圖所示。

主站蜘蛛池模板： 株洲县| 昌黎县| 中西区| 乐安县| 壶关县| 土默特左旗| 湘潭县| 吴江市| 喀喇| 盐津县| 东辽县| 哈巴河县| 宜黄县| 乃东县| 安塞县| 平顶山市| 秭归县| 韩城市| 郯城县| 萨嘎县| 凤阳县| 镇雄县| 天气| 凤城市| 靖江市| 涟源市| 中宁县| 江城| 通榆县| 汉阴县| 托克托县| 伊川县| 大新县| 威远县| 阿坝县| 桂林市| 澄江县| 五华县| 宜州市| 芦溪县| 灵丘县|