1、概述

1.1 什麼是JavaScript？

JavaScript 是腳本語言，是一種解釋性腳本語言（代碼不進行預編譯） JavaScript 是一種輕量級的程式設計語言。 JavaScript 是可插入 HTML 頁面的程式設計代碼。 JavaScript 插入 HTML 頁面後，可由所有的現代浏覽器執行。 JavaScript 很容易入門。

1.2 作用

1、為網頁添加各式各樣的動态功能。

2、為使用者提供更流暢美觀的浏覽效果。

通常JavaScript腳本是通過嵌入在HTML中來實作自身的功能的。

1.3JavaScript的用法

JavaScript通常簡稱為js,或者js腳本

HTML頁面中的JavaScript

在html頁面中的腳本必須位于script圍堵标簽之間，script标簽放在head中可以，body中也可以，放在最後也可以，對位置要求不嚴格。

我們可以在 HTML 文檔中放入不限數量的script标簽，通常的做法是把内容統一放入head或者頁面底部。這樣就可以把它們安置到同一處位置，不會幹擾頁面的内容。

PS:有些案例中可能會在 script 标簽中出現type="text/javascript"。現在完全可以省略了，JavaScript已經是所有現代浏覽器以及 HTML5 中的預設腳本語言。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript的用法</title>
    <script>
        alert("hello JavaScript1-1");
    </script>
    <script>
        alert("hello JavaScript1-2");
    </script>
</head>
<body>

</body>
</html>
    <script>
        alert("hello JavaScript2-1");
    </script>
    <script>
        alert("hello JavaScript2-2");
    </script>

外部的JavaScript

可以把腳本儲存到外部檔案中。外部檔案通常包含被多個網頁使用的代碼。外部 JavaScript 檔案的檔案擴充名是 .js。當我們使用外部檔案時，在HTML頁面的script 标簽的 "src" 屬性中設定該 .js 檔案。

myScript.js檔案 //外部js檔案中不能有script标簽，直接編寫JavaScript腳本代碼即可
function fun1(){
alert("hello JavaScript");
}

外部檔案引入一次即可，在head或者body中都可以，基本上都是放在head中。

<!DOCTYPE html>
<html>
<head>
    <script src="js/myScript.js"/>
</head>
<body>
    <script>
        fun1();//調用腳本中的内容s
    </script>
</body>
</html>

标簽屬性中的JavaScript

直接編寫在HTML标簽的一些屬性中，用于簡單的JavaScript代碼的編寫，用的偏少。

<a href="javascript:alert('ok')" target="_blank" rel="external nofollow" >登入</a>

1.4 JavaScript顯示資料

1 使用window.alert()彈出框

PS：這裡的window可以省略，等價于alert("hello world");

2 使用document.write()将内容寫入到html文檔

3 使用innerHTML寫入到html元素

4 使用console.log寫入到浏覽器控制台

1.5JavaScript的注釋

JavaScript注釋與java的單行和多行注釋相同。

單行注釋以 // 開頭。

多行注釋以結尾。

2.JavaScript基本文法

JavaScript 是一個腳本語言。它是一個輕量級，但功能強大的程式設計語言。 JavaScript文法跟Java很相似，但是也有差別。JavaScript是弱語言類型，即有些時候有些錯誤不影響運行，但是依然推薦大家按照規範去編寫代碼，語言弱，程式員不能弱。

2.1 JavaScript變量

聲明變量的關鍵字：var 文法：var 變量名稱；

<script>
    var myCompany; //聲明變量
    myCompany='開課吧'; //指派
    var x=5;//聲明的同時指派
    var y=6;
    var z=x+y;//變量也可以存儲表達式
</script>

變量的命名規則：

變量必須以字母開頭
變量也能以 $ 和 _ 符号開頭
變量名稱對大小寫敏感（y 和 Y 是不同的變量）
不能使用關鍵字保留字

變量的命名規範：

見名知意。例如：breadPirce,userService等，避免無意義的a,b,c等
推薦駝峰命名法，即第一個單詞的首字母小寫，以後每個單詞的首字母大寫。例如lastName

JavaScript的語句作用

JavaScript 語句向浏覽器發出的指令。語句的作用是告訴浏覽器該做什麼。

JavaScript 是腳本語言，浏覽器會在讀取代碼時，逐行地執行腳本代碼。

而對于傳統程式設計來說，會在執行前對所有代碼進行編譯。

JavaScript中也有分支結構和循環結構，文法與java類似。

PS：一般一行隻寫一條語句，每句結尾編寫分号結束。

2.2 JavaScript的資料類型

1.基本類型

字元串String

字元串是存儲字元的變量。字元串可以是引号中的任意文本。必須使用單引号或雙引号。

<script>
    var gameName="英雄聯盟";
    var hairstylist='tony';
    //PS：注意引号嵌套
    var message1='我的發型師是"tony"老師';
    var message2="我的發型師是'tony'老師";
</script>

數字Number

JavaScript 隻有一種數字類型。數字可以帶小數點，也可以不帶。

<script>
    var breadPrice=15.9;
    var gameLevel=66;
    //極大或極小的數字可以通過科學計數法來書寫：
    var myMoney1=666e5; //66600000
    var myMoney2=-666e-5; //-0.00666
</script>

布爾Boolean

隻能有兩個值：true 或 false。

<script>

    var isUnderstand=true;
    var isSingle=false;
</script>

空Null

<script>
    var email=null;
</script>

未定義Undefined

表示變量不含有值。可以通過将變量的值設定為 null 來清空變量。

共有4中情況會出現undefined的值。

1、變量聲明且沒有指派；

var obj;
alert(obj);//obj值為undefined

2、擷取對象中不存在的屬性時

var obj;
alert(obj.name);
//報錯資訊： "Uncaught TypeError: Cannot read property 'name' of undefined"

3、函數需要實參，但是調用時沒有傳值，形參是undefined；

4、函數調用沒有傳回值或者return後沒有資料，接收函數傳回的變量是undefined。

function printNum(num){
alert(num);
}
var result=printNum();//調用函數未傳遞參數，執行函數的時候num的值是undefined
alert(result);//result的值也是undefined，因為printNum()沒有傳回值

Symbol

Symbol 是 ES6 引入了一種新的原始資料類型，表示獨一無二的值

2.引用資料類型

對象(Object)、數組(Array)、函數(Function)

JavaScript的String對象

String對象屬性--長度屬性

var str="我喜歡看NBA,最喜歡的球員是\'國小生\'庫裡";
//注意：字元串中出現的\'是一個字元，轉義為一個單引号
console.log(str);
//擷取字元串的長度：，切記：所有轉移符号的長度都算一個，即\'長度為1
console.log("字元串的長度="+str.length);//22

String對象方法

JavaScript中的String對象方法與java的String方法很多都類似甚至一樣，這裡不再一一贅述。提供大家一個參考表格，需要的自行查閱。點選這裡：檢視String對象方法參考表格

JavaScript的Array對象

Array 對象用于在變量中存儲多個值，也就是數組。

聲明數組

方式1： var names = new Array(); names[0]='a'; names[1]='b';

方式2： var cars = ["a","b","c"];

方式3： classes = new Array("1","2","3");

Array對象的方法

點選這裡 :檢視Array對象的方法參考表格

JavaScript的Date對象

建立日期對象

var date1 = new Date(); //目前的日期

var date2 = new Date(milliseconds);//1970年+毫秒數

var date3 = new Date(dateString); //符合日期類型的字元串年月日小時分鐘秒不能加毫秒，加上報日期不合法

var date4 = new Date(year, month, day, hours, minutes, seconds, milliseconds);//年月日

小時分鐘秒毫秒這裡可以設定毫秒月份取值為0-11

日期對象的常用方法

javaSript介紹1、概述2.JavaScript基本文法3.JavaScript函數4.JavaScript自定義對象 5.JavaScript Window--浏覽器對象模型6. JavaScript之事件 7.JavaScript之DOM模型8.擴充練習表單驗證

其他更多的方法。點選這裡檢視：日期對象方法的參考表格

JavaScript的Math對象

與java中的Math相似，跟數學相關的内容都這裡。有很多方法屬性與java中的也類似。

Math常用屬性

var pi=Math.PI;//傳回圓周率

Math常用方法

var num=Math.random();// 傳回 0 ~ 1 之間的随機數。

var max=Math.max(12,34,-90,9);//傳回 n個數值中的最大值。

var min=Math.min(12,34,-90,9);//傳回 n個數值中的最小值。

點選這裡檢視：Math參考文檔

3.JavaScript擁有動态類型

var param; // param類型為 undefined

param = 5; // 現在 param 為數字

param = "John"; // 現在 param 為字元串

PS:雖然JavaScript支援這種寫法，但是我不推薦這種寫法。大家盡量開始聲明變量的時候就确定好将要盛放什麼類型的值，以後盡量不随意改變。

4.JavaScript中的運算符

算數運算符：+ - * / % 、 ++ 、 --

指派運算符：= 、 +=、 -= 、*= 、 /= 、 %=

字元串的連接配接符：+

邏輯運算符： && || ！

條件運算符：？:

比較運算符： == 、！= 、 > 、= 、 <=

以上運算符的運算規則與java一樣，在這裡不再贅述。接下來強調兩個新的比較運算符：

var x=5;
var res=(x===5); // true
res=(x==='5');// false
res=(x!==5); // false
res=(x!=='5');// true

3.JavaScript函數

常用的全局函數

1 isNaN(param)

用于檢查其參數是否是非數字值。是數值的傳回false，不是數值傳回true。

console.log(isNaN(666));//false
console.log(isNaN(1+2));//false
console.log(isNaN("hello"));//true

2 parseFloat(String)

可解析一個字元串，并傳回一個浮點數。該函數指定字元串中的首個字元是否是數字。如果是，則對字符串進行解析，直到到達數字的末端為止，然後以數字傳回該數字，而不是作為字元串。

字元串中隻傳回第一個數字。
開頭和結尾的空格是允許的。
如果字元串的第一個字元不能被轉換為數字，那麼 parseFloat() 會傳回 NaN。

console.log(parseFloat("66"));//66
console.log(parseFloat("199.99"));//199.99
console.log(parseFloat("1024 2048 4096"));//1024
console.log(parseFloat(" 128 "));//128
console.log(parseFloat("10年"));//10
console.log(parseFloat("今天是8号"));//NaN

3 parseInt(string,radix)

可解析一個字元串，并傳回一個整數.

string 必需。要被解析的字元串。
radix 可選。表示要解析的數字的基數。該值介于 2 ~ 36 之間。

當參數 radix 的值為 0，或沒有設定該參數時，parseInt() 會根據 string 來判斷數字的基數。

當忽略參數 radix , JavaScript 預設數字的基數如下:

如果 string 以 "0x" 開頭，parseInt() 會把 string 的其餘部分解析為十六進制的整數。
如果 string 以 0 開頭，那麼 ECMAScript v3 允許 parseInt() 的一個實作把其後的字元解析為八進制或十六進制的數字。
如果 string 以 1 ~ 9 的數字開頭，parseInt() 将把它解析為十進制的整數。

console.log(parseInt("66"));//66
console.log(parseInt("199.99"));//199
console.log(parseInt("1024 2048 4096"));//1024
console.log(parseInt(" 128 "));//128
console.log(parseInt("10年"));//10
console.log(parseInt("今天是8号"));//NaN
console.log(parseInt("10",10));//10
console.log(parseInt("010"));//10
console.log(parseInt("10",8));//8
console.log(parseInt("0x10"));//16
console.log(parseInt("10",16));//16

PS:舊浏覽器由于使用舊版本的ECMAScript（ECMAScript版本小于ECMAScript 5，當字元串以"0"開頭時預設使用八進制，ECMAScript 5使用的是十進制），是以在解析("010") 将輸出8。

JavaScript的自定義函數

使用function關鍵字定義函數。

function 自定義函數名稱(參數清單){
//函數體
}

注意：

函數的形參直接寫參數名稱，不需要聲明類型，即不需要寫var.
函數的傳回取決于函數體中是否有return關鍵字

JavaScript的匿名函數

var fun1 =function (參數清單){
//函數體
}

用變量名稱 =function就是匿名函數調用直接 fun1();

4.JavaScript自定義對象

對象也是一個變量，但對象可以包含多個值（多個變量）。

定義對象

對象中可以有屬性，也可以有方法。

對象的屬性

可以說 "JavaScript 對象是變量的容器"。

但是，我們通常認為 "JavaScript 對象是鍵值對的容器"。

鍵值對通常寫法為 name : value (鍵與值以冒号分割)。

鍵值對在 JavaScript 對象通常稱為對象屬性。

通路對象的屬性

通路對象的方法

5.JavaScript Window--浏覽器對象模型

1.window對象

所有浏覽器都支援 window 對象。它表示浏覽器視窗。（沒有應用于 window 對象的公開标準，不過所有浏覽器都支援該對象）。所有 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。全局變量是 window 對象的屬性。全局函數是 window 對象的方法。 Window 對象表示浏覽器中打開的視窗。

2. window對象屬性

常用屬性：

history對象

window.history 對象包含浏覽器的曆史。

window.history對象在編寫時可不使用 window 這個字首。

常用方法： history.back() - 與在浏覽器點選後退按鈕相同

history.forward() - 與在浏覽器中點選向前按鈕相同

history.go(1/-1)-- 參數為1：等同于history.forward()，參數為-1，等同于history.back()

<a href="javascript:window.history.forward()" target="_blank" rel="external nofollow" >前進</a>
<a href="javascript:window.history.back()" target="_blank" rel="external nofollow" >後退</a>
<a href="javascript:window.history.go(1)" target="_blank" rel="external nofollow" >前進go</a>
<a href="javascript:window.history.go(-1)" target="_blank" rel="external nofollow" >後退go</a>

location對象

window.location 對象用于獲得目前頁面的位址 (URL)，并把浏覽器重定向到新的頁面。

常用屬性和方法：

window.location 對象在編寫時可不使用 window 這個字首。

href 目前視窗正在浏覽的網頁位址

replace(url) 轉向到url網頁位址

reload() 重新載入目前網址，如同按下重新整理按鈕

<a href="javascript:alert(window.location.href)" target="_blank" rel="external nofollow" >擷取目前頁面的URL位址</a>
<a href="javascript:window.location.reload()" target="_blank" rel="external nofollow" >重新整理</a><br />
<a href="javascript:window.location.replace('index.html')" target="_blank" rel="external nofollow" >跳轉到index</a><br />
<a href="javascript:location.replace('https://www.baidu.com')" target="_blank" rel="external nofollow" >跳轉到百度</a><br
/>

window對象方法

常用方法：

打開和關閉浏覽器案例

<a href="javascript:window.open('https://www.baidu.com')" target="_blank" rel="external nofollow" >打開百度</a>
<a href="javascript:window.open('index.html')" target="_blank" rel="external nofollow" >打開-index</a>
<a href="javascript:window.close()" target="_blank" rel="external nofollow" >關閉目前頁面</a>

彈框案例

<script>
    //window對象常用的彈框方法
    //1、基本彈框
    window.alert("隻有一個确定按鈕的對話框");
    //2、對話框：有确定和取消兩個看你，點選确定傳回true，點選取消傳回false
    var res=window.confirm("确認要關閉嗎？");
    if(res){
        alert("點選了确定按鈕");
    }else{
        alert("點選取消按鈕");
    }
    //3、輸入框：prompt(提示資訊，預設值)
    var age=prompt("請輸入年齡：",19);
    alert("輸入的年齡資訊是："+age);
</script>

定時器案例

<div id="today1">
div--顯示時間1
</div>
    <a href="javascript:window.clearInterval(flag1)" target="_blank" rel="external nofollow" >停止定時器clearInterval</a>
<div id="today2">
div--顯示時間2
</div>
    <a href="javascript:window.clearTimeout(flag2)" target="_blank" rel="external nofollow" >停止定時器clearTimeout</a>
<script>
    function showTime1(){
  

    var time=new Date();
    var y=time.getFullYear();
    var mon=time.getMonth();
    var d=time.getDate();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time.getSeconds();
    document.getElementById("today1").innerHTML=y+"年"+mon+"月"+d+"日
    "+h+":"+m+":"+s;
}
    //定時器setInterval(定時調用的函數,時間間隔毫秒)
    var flag1=window.setInterval("showTime1()",1000);
</script>
<script>
    function showTime2(){
    var time=new Date();
    var y=time.getFullYear();
    var mon=time.getMonth();
    var d=time.getDate();
    var h=time.getHours();
    var m=time.getMinutes();
    var s=time.getSeconds();
    document.getElementById("today2").innerHTML=y+"年"+mon+"月"+d+"日
    "+h+":"+m+":"+s;
    flag2=window.setTimeout("showTime2()",1000);
}
    //在指定的毫秒數後調用函數或計算表達式。
    var flag2=window.setTimeout("showTime2()",1000);
</script>

6. JavaScript之事件

HTML 事件是發生在 HTML 元素上的事情。當在 HTML 頁面中使用 JavaScript 時， JavaScript 可以觸發這些事件。

1.HTML 事件

HTML 事件可以是浏覽器行為，也可以是使用者行為。例如頁面加載完成、你點選個按鈕、文本框輸入了文字等等，都是HTML事件的案例。通過當事件發生時，我們希望可以做些事情，例如點選完畢按鈕之後希望跳轉頁面、文本框輸入完畢之後驗證有效性等，那麼這些要做的事情我們就可以通過JavaScript實作。

2.常用的HTML事件

案例：

<script>
    function fun1(){
        alert('選擇的内容發生了變化');
    }
    function fun2(){
        alert("觸發了單擊事件");
    }
    function fun3() {
        document.getElementById("btn").innerHTML="滑鼠移動到按鈕上了";
    }
    function fun4() {
        document.getElementById("btn").innerHTML="點選我試試";
    }
    function fun5() {
        alert("鍵盤按下了");
    }
    function fun6() {
        alert("擷取到了焦點");
    }
    function fun7() {
        alert("input失去了焦點");
    }
    function myLoad(){
        alert("頁面加載完畢");
    }
</script>
    <body onload="myLoad()">
    <input id="userName" onkeydown="fun5()" onfocus="fun6()"
    onblur="fun7()"/>
    <input id="password" type="password" />
    <button id="btn" type="button" onclick="fun2()"
    onmouseover="fun3()" onmouseout="fun4()">點選我試試</button>
    <select id="month" onchange="fun1()">
        <option>1月份</option>
        <option>2月份</option>
</select>

7.JavaScript之DOM模型

通過 HTML DOM，可通路 JavaScript HTML 文檔的所有元素。 DOM:Document Object Model,文檔對象模型。當網頁被加載時，浏覽器會建立頁面的文檔對象模型。 HTML DOM 模型被構造為對象的樹：

通過可程式設計的對象模型，JavaScript 獲得了足夠的能力來建立動态的 HTML。

JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應

document對象

當浏覽器載入 HTML 文檔, 它就會成為 Document 對象。

Document 對象是 HTML 文檔的根節點。

Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行通路。

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行通路。

document對象常用方法

1 查找 HTML 元素常用方法

2 修改 HTML 内容和屬性

修改内容

修改 HTML 内容的最簡單的方法是使用 innerHTML 屬性。

修改 HTML 元素的内容的文法：

document.getElementById(id).innerHTML=新的 HTML。

PS：絕對不要在文檔(DOM)加載完成之後使用 document.write()。這會覆寫該文檔。

修改 HTML 屬性

修改 HTML 元素屬性的文法：

方式1：document.getElementById(id).attribute=新屬性值 //直接得到屬性值指派比如src屬性

document.getElementById(id).src=新屬性值

方式2：document.getElementById(id).setAttribute(屬性名，屬性值);

3 修改 HTML 元素的css

修改 HTML 元素css的文法：

document.getElementById(id).style.property=新樣式

document.getElementById("myli").style.color="blue";
document.getElementById("myli").style.fontFamily="微軟雅黑";
document.getElementById("myli").style.fontSize="24px";

HTML DOM 元素 (節點)

建立新的 HTML 元素

要建立新的 HTML 元素 (節點)需要先建立一個元素，然後在已存在的元素中添加它。

<button type="button" onclick="createNewP()">動态添加一個元素--
    appendChild</button>
<button type="button" onclick="createNewP2()">動态添加一個元素--
insertBefore</button>
<div id="div1">
    <p id="p1">這是段落1</p>
    <p id="p2">這是段落2</p>
</div>
<script>
    function createNewP(){
        var newElementP=document.createElement("p");//建立一個新的段落元素
        var text=document.createTextNode("這是我新建立的段落");//新建立的文本節點
        //将文本的節點添加到新建立的元素中
        newElementP.appendChild(text);
        //擷取一個頁面已經存在的元素
        var div=document.getElementById("div1");
        //添加新建立的元素p到已經存在的元素div中
        div.appendChild(newElementP);
}
    function createNewP2(){
        var newElementP=document.createElement("p");//建立一個新的段落元素
        var text=document.createTextNode("這是我新建立的段落p2");//新建立的文本節點
        //将文本的節點添加到新建立的元素中
        newElementP.appendChild(text);
        //擷取一個頁面已經存在的元素
        var div=document.getElementById("div1");
        var p1=document.getElementById("p1");
        //添加新建立的元素p到已經存在的元素div中,指定插入到段落P1前面  後面就用after
        div.insertBefore(newElementP,p1);
}
</script>

替換 HTML 元素 -replaceChild()

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
    <button type="button" onclick="changeElemnt()">替換p1</button>
<script>
    function changeElemnt(){
    var newElementP=document.createElement("p");//建立一個新的段落元素
    var text=document.createTextNode("這是我新建立的段落p");//新建立的文本節點
    //将文本的節點添加到新建立的元素中
    newElementP.appendChild(text);
    //擷取要被替換的元素p1及其父元素div
    var div=document.getElementById("div1");
    var p1=document.getElementById("p1");
    //将div中的元素p1替換為新建立的元素
    div.replaceChild(newElementP,p1);
    }
</script>

删除元素 -removeChild()

<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另外一個段落。</p>
</div>
<button type="button" onclick="deleteElement()">删除p1-方式1</button>
<button type="button" onclick="deleteElement()">删除p1-方式2</button>
<script>
    function deleteElement(){
        var div=document.getElementById("div1");
        var p1=document.getElementById("p1");
        //從父元素div中删除子元素p1
        div.removeChild(p1);
    }
    function deleteElement2(){
        var p1=document.getElementById("p1");
        //p1.parentNode：作用就是擷取要删除元素p1的父元素div
        p1.parentNode.removeChild(p1);
    }
</script>

8.擴充練習表單驗證

1表單驗證意義與場景

1.降低伺服器壓力

攔截不合格的資料，避免直接送出到伺服器，可以顯著降低伺服器開銷。

2.提升使用者體驗

早期的網際網路，表單項都是非常多的，注冊個賬号，經常需要填寫20+個字段。而其中有一個填寫不正确就要等待幾十秒時間。如果有了表單驗證，回報是實時的，而且腳本還能把你定位到填寫錯誤的具體字段。現在雖然無重新整理技術早已普及，但是隻依賴服務端驗證，還是會有幾百毫秒的延遲，實際使用會有一種很難受的粘滞感。

2 表單驗證常用事件與屬性

表單經常需要做一些非空驗證、長度驗證、合法性驗證等結合正規表達式進行更合理的驗證

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
<script>
    function validateName(){
        //所有的表單項元素都value屬性
        var name=document.getElementById("userName").value;
        var msg=document.getElementById("nameMsg");
        if(name==null || name ==""){
            msg.innerHTML="使用者名不能為空！";
            msg.style.color="red";
            return false;
        } else if(name.length<6){
            msg.innerHTML="使用者名長度必須為大于6的！";
            msg.style.color="red";
            return false;
        }
        msg.innerHTML="使用者名可用";
        msg.style.color="green";
        return true;
    }
    function validatePwd(){
        var password1=document.getElementById("password1").value;
        var msg=document.getElementById("pwdMsg1");
        if(password1==null || password1 ==""){
            msg.innerHTML="密碼不能為空！";
            msg.style.color="red";
            return false;
        } else if(password1.length<8){
            msg.innerHTML="密碼的長度必須為大于8的！";
            msg.style.color="red";
            return false;
        }
        msg.innerHTML="密碼合法";
        msg.style.color="green";
        return true;
    }
    function confirmPwd(){
        var pwd1=document.getElementById("password1").value;
        var pwd2=document.getElementById("password2").value;
        var msg=document.getElementById("pwdMsg2");
        if(pwd1!=pwd2){
        msg.innerHTML="兩次輸入的密碼不一緻！";
        msg.style.color="red";
        return false;
        }
        msg.innerHTML="兩次輸入的密碼一緻";
        msg.style.color="green";
        return true;
    }
    function validateGender(){
        var gender=document.getElementById("gender").value;
        if(gender==-1){
        alert("性别為必選項！");
        return false;
        }
    return true;
    }
    function register(){
    return
        validateName()&&validatePwd()&&confirmPwd()&&validateGender();
    }
</script>
</head>
<body>
<h1>英雄會注冊</h1>
<form action="送出.html" method="get" onsubmit="return register()">

*使用者名:<input type="text" id="userName" placeholder="請輸入使用者名"
onblur="validateName()" />
<span id="nameMsg">使用者名長度至少6位</span><br />

*密碼：<input type="password" id="password1" placeholder="請輸入密碼"
onblur="validatePwd()"/>
<span id="pwdMsg1">密碼長度至少8位</span><br />

*确認密碼：<input type="password" id="password2" placeholder="請确認密
碼" onblur="confirmPwd()" />
<span id="pwdMsg2">确認密碼與密碼一緻</span><br />

*性别：<select id="gender">
<option value="-1">請選擇性别</option>
<option value="0">女</option>
<option value="1">男</option>
</select><br /><br />

<button type="submit">注冊</button>
<button type="reset">重置</button>
</form>
</body>
</html>

javaSript介紹1、概述2.JavaScript基本文法3.JavaScript函數4.JavaScript自定義對象 5.JavaScript Window--浏覽器對象模型6. JavaScript之事件 7.JavaScript之DOM模型8.擴充練習 表單驗證