JavaScript學習（隨筆）
學習JavaScript課程的目標：
http://www.w3school.com.cn/html/html_form_elements.asp
1.使用JavaScript實現表單驗證。
2.使用JavaScript製作網頁廣告特效。
3.使用JavaSctipt製作彈出視窗特效。
4.使用JavaScript實現時鐘特效。
5.使用JavaScript實現級聯顯示功能。
6.使用JavaScript+CSS實現CSS樣式特效。
7.使用JavaScript動態建立頁面元素。
JavaScript指令碼基本結構：
<script type="text/javascript"> <!-- JavaScript 語句; --> </script >
JavaScript使用方式：
<!-- 1.Html頁面內嵌JS程式碼 --> <!--2.外部JS檔案--> <script src="hello.js" language="javascript"></script> <!--3.簡短縮寫方式（程式碼內部巢狀，寫在<body>標籤中--> <form> <input name="btn"; type="button" ;value="彈出訊息框" ; onclick="javascript:alert('歡迎你');"/> </form>
JavaScript資料型別：
- typeof檢測變數的返回值
- 資料型別：undefined、boolean、string、number、null
typeof運算子返回值如下：
- undefined：變數被聲明後，但未被賦值
- string：用單引號或雙引號來宣告的字串
- boolean：true或false
- number：整數或浮點數
- object：javascript中的物件、陣列和null
JavaScript核心語法：
常用的輸入/輸出：
- alert()
- alert(“提示資訊”);
- prompt()
- prompt(“提示資訊”, “輸入框的預設資訊”);
- prompt(“請輸入姓名”, “張三”);
- prompt(“請輸入姓名”);
例項：
<script type="text/javascript">
document.write("Hello World");
var j = prompt("請輸入連續輸出標題3的次數：");
for (var i = 0; i < j; i++) {
document.write("<h3>Hello World</h3>");
}
document.write("<h1>Hello World</h1>");
alert("共連續輸出標題：" + j + "次");
</script>
JavaScript函式：
- 函式的含義：類似於Java中的方法，是完成特定任務的程式碼語句塊。
- 使用更簡單：不用定義屬於某個類，直接使用。
系統函式：
（1）parseInt ("字串")
將字串轉換為整型數字 如: parseInt ("86")將字串“86”轉換為整型值86
（2）parseFloat("字串")
將字串轉換為浮點型數字 如: parseFloat("34.45")將字串“34.45”轉換為浮點值34.45
（3）isNaN()
用於檢查其引數是否是非數字
自定義函式：
（1）有參函式
function 函式名(引數1,引數2，… )
{
JavaScript程式碼;
}（2）無參函式
function 函式名()
{
JavaScript程式碼;
}（3）函式呼叫
函式呼叫一般和表單元素的事件一起使用，呼叫格式：
事件名＝“函式名( )" ;
呼叫無參函式例項：
<!--無參函式-->
<script type="text/javascript">
function showhello() {
for (var i = 0; i < 10; i++) {
document.write("<h2>hello world</h2>");
}
}
</script><br/><br/> <!--呼叫無參函式;通常與表單元素一起聯用，通過事件去觸發-->
<form>
<input name="btn" type="button" value="顯示10次helloworld" onclick="showhello()" />
</form>呼叫有參函式例項：
<!--有參函式-->
<script type="text/javascript">
function showhello(count) {
for (var i = 0; i < count; i++) {
document.write("<h2>hello world</h2>");
}
}
</script><br/><br/> <!-- 呼叫有參函式-->
<form>
<input name="btn" type="button" value="請輸入顯示helloworld的次數" onclick="showhello(prompt('請輸入顯示helloworld的次數:'))" />
</form>window物件的常用方法：
| 名稱 |
說明 |
| prompt |
顯示可提示使用者輸入的對話方塊 |
| alert |
顯示帶有一個提示資訊和一個確定按鈕的警示框 |
| confirm |
顯示一個帶有提示資訊、確定和取消按鈕的對話方塊 |
| close |
關閉瀏覽器視窗 |
| open |
開啟一個新的瀏覽器視窗，載入給定 URL 所指定的文件 |
| setTimeout |
在指定的毫秒數後呼叫函式或計算表示式 |
| setInterval |
按照指定的週期（以毫秒計）來呼叫函式或表示式 |
confirm()與alert ()、 prompt()區別與用法：
1.警告訊息框alert
alert 方法有一個引數，即希望對使用者顯示的文字字串。該字串不是 HTML 格式。該訊息框提供了一個“確定”按鈕讓使用者關閉該訊息框，並且該訊息框是模式對話方塊，也就是說，使用者必須先關閉該訊息框然後才能繼續進行操作。
window.alert("歡迎！請按“確定”繼續。");
2.確認訊息框confirm
使用確認訊息框可向使用者問一個“是-或-否”問題，並且使用者可以選擇單擊“確定”按鈕或者單擊“取消”按鈕。confirm 方法的返回值為 true 或 false。該訊息框也是模式對話方塊：使用者必須在響應該對話方塊（單擊一個按鈕）將其關閉後，才能進行下一步操作。
var truthBeTold = window.confirm("單擊“確定”繼續。單擊“取消”停止。");
if (truthBeTold) {
window.alert("歡迎訪問我們的 Web 頁！");
} else window.alert("再見啦！");3.提示訊息框prompt
提示訊息框提供了一個文字欄位，使用者可以在此欄位輸入一個答案來響應您的提示。該訊息框有一個“確定”按鈕和一個“取消”按鈕。如果您提供了一個輔助字串引數，則提示訊息框將在文字欄位顯示該輔助字串作為預設響應。否則，預設文字為 "<undefined>"。
與alert( ) 和 confirm( ) 方法類似，prompt 方法也將顯示一個模式訊息框。使用者在繼續操作之前必須先關閉該訊息框：var theResponse = window.prompt("歡迎？","請在此輸入您的姓名。");
window物件的常用事件：
| 名稱 |
說明 |
| onload |
一個頁面或一幅影象完成載入 |
| onmouseover |
滑鼠移到某元素之上 |
| onlick |
當用戶單擊某個物件時呼叫的事件控制代碼 |
| onkeydowm |
某個鍵盤按鍵被 按下 |
| onchange |
域的內容被改變 |
window物件的常用屬性：
| 名稱 |
說明 |
| screen |
有關客戶端的螢幕和顯示效能的資訊 |
| history |
有關客戶訪問過的URL的資訊 |
| location |
有關當前 URL 的資訊 |
history物件常用方法：
| 名稱 |
說明 |
| back() |
載入history物件列表中的前一個URL |
| forward() |
載入history物件列表中的下一個URL |
| go() |
載入history物件列表中的某個具體的URL |
- history.back()------>等價於history.go(-1) “瀏覽器中後退”；
- history.forward()------>等價於history.go(+1) “瀏覽器中前進”。
location物件常用屬性：
| 名稱 |
說明 |
| host |
設定或返回主機名和當前URL的埠號 |
| hostname |
設定或返回當前URL的主機名 |
| href |
設定或返回完整的URL |
location物件常用方法：
| 名稱 |
說明 |
| reload() |
重新載入當前文件 |
| replace() |
用新的文件替換當前文件 |
表格的基本結構及標籤，元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
</head>
<body>
<table border="1">
<tr>
// colspan表示跨列合併；
<td colspan="3">學生成績</td>
</tr>
<tr>
// rowspan表示跨行合併；
<td rowspan="2">張三</td>
<td>語文</td>
<td>85</td>
</tr>
<tr>
<td>數學</td>
<td>96</td>
</tr>
</table>
</body>
</html>表單基本格式，元素及屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> </title>
</head>
<body>
<!--表單基本結構：-->
<form action="" name="" accept-charset="utf-8" method="post" target="_blank">
<!--<input>元素-->
first name:<br>
<!--文字輸入：<input type="text">定義用於文字輸入的單行輸入欄位-->
<input type="text" name="firstname" /><br> last name:<br>
<input type="text" name="lastname"><br>
<!--單選按鈕輸入：radio 定義單選按鈕；checked表示預設選中-->
<input type="radio" name="性別：" value="男" checked />男<br>
<input type="radio" name="性別：" value="女" />女<br>
<!--提交按鈕：submit-->
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br> Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="提交" />
<br><br>
<!--<select>元素定義下拉列表-->
<select>
<option>北京</option>
<option>四川</option>
<option>重慶</option>
</select>
<br><br>
<!-- <textarea> 元素定義多行輸入欄位（文字域）：-->
<textarea name="message" rows="3" cols="30">
The cat was playing in the garden.
The cat was playing in the garden.
The cat was playing in the garden.
The cat was playing in the garden.
</textarea>
<br><br>
<!--<button> 元素定義可點選的按鈕：-->
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
<button type="button" onclick="alert('my school is college of mianyang university')">點選我</button>
<br><br>
<!--<input type="checkbox"> 定義複選框。複選框允許使用者在有限數量的選項中選擇零個或多個選項。-->
<input type="checkbox" name="vehicle" value="bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="car">I have a car<br>
</form>
</body>
</html>結果如下：
常用的表單元素有：
文字框（text）、密碼框（password）、多行文字框（<textarea>）
單選按鈕（radio）、複選框（checkbox）、列表框（<select>和<option>）
按鈕（button、submit和reset）
HTML5 增加了如下表單元素：
- <datalist>
- <keygen>
- <output>
註釋：預設地，瀏覽器不會顯示未知元素。新元素不會破壞您的頁面。