目錄
這一章我們主要來回顧函數的一些基礎知識和鞏固一些簡單的案例。
內部屬性
- arguments.length 檢測函數的參數（實參）個數
- 在函數外部使用this，就指的是window對象
- 全局變量可以看做window對象的屬性
<script type="text/javascript">
function sum() {
alert(arguments.length);
var result=0;
for(var i=0;i<arguments.length;i++){
result+=arguments[i]
}
return result;
}
alert(sum(12,3,5,10,5,3))
</script>
<script>
//在函數外部使用this,this就指的是window對象
alert(this)
//全局變量可以看做window對象的屬性
var x=1;
alert(window.x)
alert(this.x)
</script>
基本類型和引用類型
- 基本類型值有：undefined，NUll，Boolean，Number和String
- 這些類型分別在內存中佔有固定的大小空間，例如：數值型在內存中佔有八個字節，布爾值只佔有一個字節......
他們的值保存在棧空間，我們通過按值來訪問的。
- 這些類型分別在內存中佔有固定的大小空間，例如：數值型在內存中佔有八個字節，布爾值只佔有一個字節......
- 引用類型：對象、數組、函數
- 引用類型內存中佔有的空間不固定，但是內存地址大小是固定的，因此存儲的實際上是數據的內存地址。
所以，在變量複製時候，基本類型複製的是值本身，而引用類型複製的是地址。另外，函數的參數都是按值傳遞的。
全局函數
全局函數和屬性可用於所有內建的 JavaScript 對象。全局函數又叫頂層函數或系統函數。
- parseInt() 函數可解析一個字符串，並返回一個整數。
- parseFloat() 函數可解析一個字符串，並返回一個浮點數。
- isNaN() 函數用於檢查其參數是否是非數字值。
- String() 函數把對象的值轉換爲字符串。
- Number() 把對象的值轉換爲數字。
- eval() 函數可計算某個字符串，並執行其中的的 JavaScript 代碼。（該方法只接受字符串作爲參數，要計算的字符串中必須含有要計算的 JavaScript 表達式或要執行的語句。）
- escape() 對字符串進行編碼。
- 返回值:已編碼的 string 的副本。其中某些字符被替換成了十六進制的轉義序列。
- 該方法不會對 ASCII 字母和數字進行編碼，也不會對下面這些 ASCII 標點符號進行編碼： * @ - _ + . / 。其他所有的字符都會被轉義序列替換。
- unescape() 對由 escape() 編碼的字符串進行解碼。
- encodeURI() 把字符串編碼爲 URI。（URI ：Uniform Resource Identifier，統一資源標識符）
- decodeURI() 解碼某個編碼的 URI。
- decodeURIComponent() 解碼一個編碼的 URI 組件。
- encodeURIComponent() 把字符串編碼爲 URI 組件。
三種編碼方式的區別：
- escape不編碼字符有69個：*，+，-，.，/，@，_，0-9，a-z，A-Z（主要是爲了防止特殊字符造成計算錯誤時候應用）
- encodeURI不編碼字符有82個：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z（防止特殊字符串造成URI的傳遞錯誤，一般用於頁面跳轉的時候。）
- encodeURIComponent不編碼字符有71個：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z（防止URI參數中特殊字符串造成參數讀取錯誤，一般用來傳遞參數。）
isFinite() 檢查某個值是否爲無窮大的數：如果 number 是有限數字（或可轉換爲有限數字），那麼返回 true。否則，如果 number 是 NaN（非數字），或者是正、負無窮大的數，則返回 false。
- Infinity無窮大（系統定義常量）
- -Infinity無窮小（系統定義常量）
案例練習
刪除確認提示框
防止用戶小心單擊了“刪除”按鈕，在用戶單擊“刪除”按鈕後，給出一個提示，讓用戶確認此次操作是否正確。
<input id="Button1" type="button" value="刪除" οnclick="del()"><br>
<script>
//var r=confirm("確實要刪除嗎?")
function del(){
if(confirm("確實要刪除嗎?")){
alert("已經刪除！");
}else{
alert("已經取消了刪除操作");
}
}
</script>
動態創建元素
通過JS的DOM對象，實現元素的動態創建。
- createElement() 通過指定名稱創建一個元素，是DOM對象創建元素的方法，創建完元素後，指定元素的類型、值和方法，最後使用“appendChild”方法，將元素添加到body中。
- appendChild() 方法向節點添加最後一個子節點。
- 及時解除不再使用的變量引用,即將其賦值爲 null。
<input id="Button1" type="button" value="刪除" οnclick="del()"><br>
<input id="Button2" type="button" value=" 測試" οnclick="addInput()"> <br>
<script type="text/javascript">
var i=0;
function addInput(){
//使用DOM的創建元素方法
var o=document.createElement("input");
o.type = "button" ;
o.value = "按鈕" + i++ ;
o.addEventListener("click",addInput);
document.body.appendChild(o);
o = null;//及時解除不再使用的變量引用,即將其賦值爲 null;
}
addInput()
</script>
動態添加事件
前一個案例是如何在網頁中動態添加元素，有時候我們需要添加事件。有時候需要動態的爲元素添加事件。重點是如何爲元素綁定事件。綁定元素時需要知道此元素的唯一標識（ID或Name）。
<input id="Button1" type="button" value="Button1">
<input id="Button2" type="button" value="動態添加事件" οnclick="addClick(Button1)">
<script type="text/javascript">
//添加事件的參數，參數爲元素的標識
function addClick(obj){
obj.οnclick=function(){
alert('動態添加事件成功 ');
}
}
</script>
防止按鈕連擊
當頁面提交的數據特別多時，頁面會反應比較遲鈍，此時如果用戶等不及而連續單擊按鈕，就會導致數據重複提交。所以這個案例就是爲了防止數據重複提交。重點是如何判斷頁面的狀態。
readyState 屬性返回當前文檔的狀態,該屬性返回以下值:
- uninitialized - 還未開始載入
- loading - 載入中
- interactive - 已加載，文檔與用戶可以開始交互
- complete - 載入完成
<input type=button value="提交" onClick="check()">
<script type="text/javascript">
function check(){
if (window.document.readyState == 'complete'){
alert("加載完畢，可以繼續");
return true;
}else{
alert("正在處理，請等待！");
return false;
}
}
</script>
綜合練習
現在我們開始一個綜合性的練習，除了們JS知識外，還用到了HTML的表格，表單等相關知識。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
margin: 20px auto;
border: 2px solid orange;
}
select,input{
width: 200px;
height: 40px;
font-size: 18px;
}
[type=radio]{
width: 30px;
height: 30px;
}
[type=submit],[type=reset]{
width: 100px;
border-radius: 25px;
font-size: 20px;
outline: none;
}
td{
height: 40px;
line-height: 40px;
padding: 5px;
width: 200px;
background: rgba(100,50,10,0.3);
text-align: left;
font-size: 24px;
}
.right{
text-align: right;
width: 150px;
}
input:focus{
background: rgba(0,150,25,0.3);
}
</style>
</head>
<body>
<table>
<tr>
<td class="right" >用戶名：</td>
<td><input type="text" id="st1"></td>
</tr>
<tr>
<td class="right">聯繫電話：</td>
<td><input type="text" id="st2"></td>
</tr>
<tr>
<td class="right">密碼：</td>
<td><input type="text" id="st3"></td>
</tr>
<tr>
<td class="right">確認密碼：</td>
<td><input type="text" id="st4" οnblur="check()"></td>
</tr>
<tr>
<td class="right">性別：</td>
<td>
<input type="radio" name="sex" id="sex1">男
<input type="radio" name="sex" id="sex2">女
</td>
</tr>
<tr>
<td class="right">學歷：</td>
<td>
<select id="select">
<option value="高中">高中</option>
<option value="大專">大專</option>
<option value="本科">本科</option>
<option value="本科以上">本科以上</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input type="submit" value="提交" οnclick="test()">
<input type="reset" value="重置">
</td>
</tr>
</table>
<script type="text/javascript">
function $(x){//自定義通過id獲取元素的函數
return document.getElementById(x);
}
function check(){
if($('st3').value==$('st4').value){
return true;
}else{
alert('密碼不正確！');
}
}
function test(){
var str='';
str+="\n用戶名：";
str+=$('st1').value;
str+="\n聯繫電話："
str+=$('st2').value;
str+='\n性別：';
str+=$('sex1').checked?'男':'女'
str+='\n 學歷：';
str+=$('select').value;
alert('用戶信息：\n'+str);
}
</script>
</body>
</html>