前言：

既然頁面好看了起來，那麼我們肯定是想要有動態事件的，所以這裏我們學習JavaScript。

直通車：

我們有了基本的頁面，也可以在頁面中注入各種顏色，那麼我們需要頁面動起來，就需要使用js（解釋性腳本語言）。

在數百萬張頁面中，JavaScript被用來改進設計、驗證表單、檢測瀏覽器、創建cookies等等。

導入JavaScript有：

<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>

一、JavaScript放置位置

1、位於head部分的腳本

當腳本被調用時，或者當事件被觸發時，腳本就會被執行。所以當你把腳本放置到head部分後，就要確保在需要使用腳本之前，它已經被載入了。

<html>
<head>
<script type="text/javascript">
....
</script>
</head>
....

2、位於body部分的腳本

在頁面載入腳本時就會被執行。當你把腳本放置於body部分後，他就會生成頁面的內容。

3、使用外部JavaScript

如果你希望若干個頁面運行JavaScript，同時不在每個頁面寫相同的腳本。注意：外部文件不能包<script標籤。

例如：

html>
<head>
<script src="xxx.js">....</script>
</head>
<body>
</body>
</html>

二、JavaScript語句

JavaScript語句是發給瀏覽器的命令，這些命令的作用是告訴瀏覽器要做的事情。

JavaScript代碼時JavaScript語句的序列，例如向網頁輸出一個標題和兩個段落：

<script type="text/javascript">
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
</script>

JavaScript可以分批地組合起來，以左花括號開始，右花括號結束。

例如：

<script type="text/javascript">
{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another paragraph</p>");
}
</script>

三、註釋

我們知道shell也是解釋性的腳本語言，所以學習語言之前，我們一般也都是有一個簡單的例子，然後去一一學習語法函數。這裏我們需要知道註釋是怎麼寫的。

1、單行註釋：用//開始就好

2、多行註釋：以/*開頭，以*/結尾，就是和我們的C語言是一致的。

四、變量

你在學習C語言的變量命名規則對JavaScript也是使用的，這裏我們需要注意定義聲明的不同。

1、聲明創建JavaScript變量

使用var語句來聲明JavaScript變量（這個與shell不同，shell直接書寫即可）

例如：

var x=5這裏我直接設置變量並且賦值，如果是文本，則需要雙引號。

其中C語言的加減算數也同樣使用與JavaScript

2、運算法

和C語言一樣，算術運算符和賦值運算符同樣適用與JavaScript，但是這裏有一個亮點就是用於字符串的+運算法（這個java 是有的），直接使用即可。

其中比較運算符合邏輯運算符也是一致，但是這裏介紹===全等運算法，即值和類型也相同，這個是C語言和java都沒有的。

五、流程控制語句

有着C語言的經驗，那麼流程控制語句自然也就是那麼幾種，並且也都是一致的。例如：

IF語句：

<script type="text/javascript">
//If the time is less than 10,
//you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.

var d = new Date()
var time = d.getHours()

if (time < 10) 
{
document.write("Good morning!")
}
else
{
document.write("Good day!")
}
</script>

switch：

<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.

var d=new Date()
theDay=d.getDay()

switch (theDay)
   {
   case 5:
     document.write("Finally Friday")
     break
   case 6:
     document.write("Super Saturday")
     break
   case 0:
     document.write("Sleepy Sunday")
     break
   default:
     document.write("I'm looking forward to this weekend!")
}
</script>

那麼你肯定會立刻想到，循環語句對吧，它的形式和shell類似，不同於C語言，所以我們之後介紹。

六、消息框

在JavaScript中可以創建三種消息框：警告框、確認框、提示框。

1、警告框

警告框經常用於確保用戶可以得到某些信息，出現之後，需要點擊確認按鈕才能繼續進行操作。

語法：

alert("文本")

2、確認框

語法：confirm("文本")

3、提示框：

語法：prompt("文本","默認值")

七、函數

好的編程語言怎麼少得了函數呢，將腳本編寫爲函數，就可以避免頁面載入時執行腳本。例如：

html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!")
}
</script>
</head>

<body>
<form>
<input type="button" value="Click me!" οnclick="displaymessage()" >
</form>
</body>
</html>

1、創建函數的語法,與C語言不同，沒有返回類型，需要使用function標識

function 函數名(var1,var2,...,varX)
  {
  代碼．．．
  }

當然也是有return語句的，用法也是一致的。

八、循環語句

1、For循環，語法與C語言一致

<html>
<body>

<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
document.write("The number is " + i)
document.write("<br />")
}
</script>

</body>
</html>

2、while循環

<html>
<body>
<script type="text/javascript">
var i=0
while (i<=10)
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
</script>
</body>
</html>

3、do-while循環

<html>
<body>
<script type="text/javascript">
var i=0
do 
{
document.write("The number is " + i)
document.write("<br />")
i=i+1
}
while (i<0)
</script>
</body>
</html>

九、break和continue

break語句來終止循環，continue語句來終止當前循環，然後下一個值繼續執行。

<html>
<body>
<script type="text/javascript">
var i=0
for (i=0;i<=10;i++)
{
if (i==3){break}
document.write("The number is " + i)
document.write("<br />")
}
</script>
</body>
</html>

十、For...In聲明

For...In聲明用來遍歷數組或者對象屬性（其實我個人覺得也就是foreach語句），這個在shell中也是有涉及的。

語法：

for (變量 in 對象)
{
    在此執行代碼
}

<html>
<body>

<script type="text/javascript">
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"

for (x in mycars)
{
document.write(mycars[x] + "<br />")
}
</script>

</body>
</html>

十一、事件

我們已經基本瞭解了JavaScript，但是要發揮它的作用，事件肯定是少不了的。JavaScript使我們有能力創建動態頁面，事件是可以被JavaScript偵測到的行爲。

1、onload和onUnload

當用戶進入或離開頁面時就會觸發onload和onUnload事件。onload事件常用來檢測訪問者的瀏覽器類型和版本，然後根據這些信息載入特定版本的網頁。

onload和onUnload事件也常用來處理用戶進入或離開時所創建的cookies。

2、onFocus,onBlur和onChange

onFoucus、onBlur和onChange事件通常相互配合來驗證表單。

3、onSubmit

onSubmit用於提交表單之前驗證的所有的表單域。

4、onMouseOver和onMouseOut

十二、Try...Catch語句

學習編程語言一般後半部分就是文件和錯誤處理機制。這裏也是一樣的。

語法：

try
{
   //在此運行代碼
}
catch(err)
{
   //在此處理錯誤
}

<html>
<head>
<script type="text/javascript">
var txt=""
function message()
{
try
  {
  adddlert("Welcome guest!")
  }
catch(err)
  {
  txt="此頁面存在一個錯誤。\n\n"
  txt+="錯誤描述: " + err.description + "\n\n"
  txt+="點擊OK繼續。\n\n"
  alert(txt)
  }
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()" />
</body>

</html>

十三、Throw聲明

那麼既然都有了try...catch，肯定有throw，作用是創建exception

<html>
<body>
<script type="text/javascript">
var x=prompt("Enter a number between 0 and 10:","")
try
{ 
if(x>10) 
throw "Err1"
else if(x<0)
throw "Err2"
} 
catch(er)
{
if(er=="Err1") 
alert("Error! The value is too high")
if(er == "Err2") 
alert("Error! The value is too low") 
}
</script>
</body>
</html>

十四、onerror事件

使用onerror事件是一種老式的標準的在網頁中捕獲JavaScript錯誤的方法。

語法：

οnerrοr=handleErrfunction handleErr(msg,url,l)
{
//Handle the error here
return true or false
}

<html>
<head>
<script type="text/javascript">
οnerrοr=handleErr
var txt=""

function handleErr(msg,url,l)
{
txt="There was an error on this page.\n\n"
txt+="Error: " + msg + "\n"
txt+="URL: " + url + "\n"
txt+="Line: " + l + "\n\n"
txt+="Click OK to continue.\n\n"
alert(txt)
return true
}

function message()
{
adddlert("Welcome guest!")
}
</script>
</head>

<body>
<input type="button" value="View message" οnclick="message()" />
</body>

</html>

十五、特殊字符

有些時候我們需要插入特殊字符，雖然C語言也一致，但是這裏我們複習一下：

代碼	輸出
'	單引號
"	雙引號
&	和號
\	反斜槓
\n	換行符
\r	回車符
\t	製表符
\b	退格符
\f	換頁符

十六、對象

如果你學習過java，那麼一定知道剛開始也是基礎語法，後面就到了對象部分，這裏也是一樣的，因爲JavaScript也是面向對象的編程語言。

而在面向對象學習中，我們肯定會接觸各種封裝好的對象，例如字符串對象、數組等等。

十七、字符串（String)對象

我們學習字符串對象，其實大多數時候學習的是其中的方法，這裏和java是對應的。例如求長度可以直接.length，得到下標可以有indexOf()。但是又有新的方式。例如match()方法用來查找字符串中特定的字符，返回值爲字符。

replace方法在字符串中用某些字符替換字符，當然，有很多，具體的也和java一樣提供了對象參考手冊，大家可以查看。

十八、Date（日期）對象

有getTime()、setFullYear（）、toUTCString()、getDay()等方法。

var myDate=new Date();
myDate.setFullYear(2008,8,9);

var today = new Date();

if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

十九、Array對象

當然array也有很多發方法，例如合併數組的concat()，用數組的元素組成字符串的-join()方法，排序的-sort()方法。

var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"

二十、Boolean邏輯對象

Boolean對象用於將非邏輯值轉換爲邏輯值（true或false）

var myBoolean=new Boolean()
var myBoolean=new Boolean(0)
var myBoolean=new Boolean(null)
var myBoolean=new Boolean("")
var myBoolean=new Boolean(false)
var myBoolean=new Boolean(NaN)

二十一、Math算數對象

我們有round()、random()、max()、min()等方法。

JavaScript 提供 8 種可被 Math 對象訪問的算數值：

常數
圓周率
2 的平方根
1/2 的平方根
2 的自然對數
10 的自然對數
以 2 爲底的 e 的對數
以 10 爲底的 e 的對數

這是在 Javascript 中使用這些值的方法：（與上面的算數值一一對應）

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

二十二、RegExp對象

RegExp對象用於規定在文本中檢索的內容，是正則表達式的縮寫。

1、定義RegExp對象用於存儲檢索模式

var patt1=new RegExp("e");

2、對象方法

RegExp對象有3個方法：test()、exec()以及compile()。

test方法檢索字符串中的指定值，返回值是true或false。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

exec方法檢索字符串中的指定值，返回值是被找到的值。如果沒有發現匹配，則返回null。

var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));

compile方法用於改變RegExp既可以改變檢索模式，也可以添加或刪除第二個參數。

var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));

二十三、DOM對象

除了內置的JavaScript對象外，還可以使用JavaScript訪問並處理所有的HTML DOM對象。

更多的JavaScript對象還有：

對象	描述
Window	JavaScript頂層中的頂層對象。Window對象會呈現一個瀏覽器窗口。每當`<body>`或者`<frameset`>標籤出現，Window對象都會被自動創建
Naviqator	包含客戶端瀏覽器的信息
Screen	包含客戶端顯示屏的信息
History	包含瀏覽器窗口訪問過的URL
Location	包含當前URL的信息

HTML DOM

對象	描述
Document	代表整個 HTML 文檔，用來訪問頁面中的所有元素。
Anchor	代表 <a> 元素。
Area	代表圖像地圖中的 <area> 元素。
Base	代表 <base> 元素。
Body	代表圖像地圖中的 <body> 元素。
Button	代表 <button> 元素。
Event	代表事件的狀態
Form	代表 <form> 元素
Frame	代表 <frame> 元素
Frameset	代表 <frameset> 元素
Iframe	代表 <iframe> 元素
Image	代表 <img> 元素
Input button	代表 HTML 表單中的按鈕
Input checkbox	代表 HTML 表單中的選擇框
Input file	代表 HTML 表單中的 fileupload 。
Input hidden	代表 HTML 表單中的隱藏域。
Input password	代表 HTML 表單中的密碼域。
Input radio	代表 HTML 表單中的單選框。
Input reset	代表 HTML 表單中的重置按鈕。
Input submit	代表 HTML 表單中的確認按鈕。
Input text	代表 HTML 表單中的文本輸入域。
Link	代表 <link> 元素
Meta	代表 <meta> 元素
Object	代表一個 <Object> 元素
Option	代表 <option> 元素
Select	代表 HTML 表單中的選擇列表。
Style	代表某個單獨的樣式聲明。
Table	代表 <table> 元素。
TableData	代表 <td> 元素。
TableRow	代表 <tr> 元素。
Textarea	代表 <textarea> 元素。

二十四、瀏覽器檢測

我們上面看到Navigator對象，我們只需要使用這個對象就可以檢測瀏覽器的信息。

<html>

<body>
<script type="text/javascript">
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

document.write("Browser name: "+ browser)
document.write("<br />")
document.write("Browser version: "+ version)
</script>
</body>

</html

二十五、Cookies

cookie用來識別用戶。它是存儲於訪問者的計算機中的變量，每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個cookie。可以使用JavaScript來創建和取回cookie的值。

創建存儲cookie

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

二十六、表單驗證

1、表單驗證

<html>
<head>
<script type="text/javascript">

function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}

function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>

<body>
<form action="submitpage.htm" οnsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

E-mail驗證

<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
else {return true}
}
}

function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
  {email.focus();return false}
}
}
</script>
</head>

<body>
<form action="submitpage.htm"οnsubmit="return validate_form(this);" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit"> 
</form>
</body>

</html>

二十七、動畫

我們使用JavaScript可以創建動態的圖像，竅門是：通過不同的事件來切換圖像。例如：

<html>
<head>
<script type="text/javascript">
function mouseOver()
  {
  document.b1.src ="/i/eg_mouse.jpg"
  }
function mouseOut()
  {
  document.b1.src ="/i/eg_mouse2.jpg"
  }
</script>
</head>

<body>
<a href="http://www.w3school.com.cn" target="_blank">
<img border="0" alt="Visit W3School!" src="/i/eg_mouse2.jpg" name="b1"
onmouseOver="mouseOver()"
onmouseOut="mouseOut()" />
</a>
</body>
</html>

二十八、圖像地圖

圖像地圖是值帶有可點擊區域的圖像。

例如：

html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>

<body>
<img src="planets.gif" width="145" height="126"
alt="Planets" usemap="#planetmap" />

<map id ="planetmap" name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onMouseOver="writeText('The Sun and the gas giant
planets like Jupiter are by far the largest objects
in our Solar System.')"
href ="sun.htm" target ="_blank" alt="Sun" />

<area shape ="circle" coords ="90,58,3"
onMouseOver="writeText('The planet Mercury is very
difficult to study from the Earth because it is
always so close to the Sun.')"
href ="mercur.htm" target ="_blank" alt="Mercury" />

<area shape ="circle" coords ="124,58,8"
onMouseOver="writeText('Until the 1960s, Venus was
often considered a twin sister to the Earth because
Venus is the nearest planet to us, and because the
two planets seem to share many characteristics.')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map> 

<p id="desc"></p>

</body>
</html>

二十九、計時

通過使用JavaScript，我們有能力做到一個設定的時間間隔之後執行代碼，而不是在函數被調用後立即執行，我們稱爲計時事件。

兩個關鍵方法，一個是setTimeout()（未來的某時執行代碼），另一個是clearTimeout()（取消setTimeout)

<html>
<head>
<script type="text/javascript">
function timedMsg()
 {
 var t=setTimeout("alert('5 seconds!')",5000)
 }
</script>
</head>

<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>

三十、創建自己的對象

當然，我們肯定可以創建自己的對象，訪問對象的方法也和java一致。例如創建一個對象如下：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname
this.lastname=lastname
this.age=age
this.eyecolor=eyecolor
}

後記與展望：

我結合了C語言和JAVA語言學習的經驗來講解，如果有基礎很快就會入門了，後面對象部分有大量的代碼，不要慌（哈哈哈），仔細看看是很簡單的。

到了這裏基本的頁面我們已經沒有問題了，但是要深入學習的話，可以去了解HTML DOM、DHTML、ASP。

那麼HTML+CSS+JS系列就到此爲止了哦，如果有幫助的話，點個贊呀。

硬核歸納HTML+CSS+JS系列之JavaScript部分（W3C標準）

前言：

一、JavaScript放置位置

二、JavaScript語句

三、註釋

四、變量

五、流程控制語句

六、消息框

七、函數

八、循環語句

九、break和continue

十、For...In聲明

十一、事件

十二、Try...Catch語句

十三、Throw聲明

十四、onerror事件

十五、特殊字符

十六、對象

十七、字符串（String)對象

十八、Date（日期）對象

十九、Array對象

二十、Boolean邏輯對象

二十一、Math算數對象

二十二、RegExp對象

二十三、DOM對象

二十四、瀏覽器檢測

二十五、Cookies

二十六、表單驗證

二十七、動畫

二十八、圖像地圖

二十九、計時

三十、創建自己的對象

後記與展望：