希望你開心，希望你健康，希望你幸福，希望你點贊！
最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦！！！
喵喵喵，你對我真的很重要！
目錄
前言
JavaScript程序控制結構
順序結構
分支結構
循環結構-for
循環結構-while語句
循環結構-do-while語句
循環結構-for-in循環
循環結構-循環的嵌套
循環中斷與繼續
JavaScript函數
常用系統函數-全局函數
常用系統函數-常用的對象函數
自定義函數
函數變量的作用域
課后練習
編程實現“手機批發業務-產品選購”頁面，主要功能有查看購物車、收銀臺結算、初始化參數等
總結
前言
Web 前端開發工程師應掌握以下內容
理解 JavaScript 程序的概念與作用；
掌握 JavaScript 標識符和變量的概念及使用方法；
掌握 JavaScript 常用運算符和表達式概念；
掌握 JavaScript 中順序、分支、循環等 3 種程序控制結構語法；
掌握 JavaScript 函數的定義方法，并學會使用；
學會綜合運用 JavaScript 設計具有動態、交互功能的網頁。
JavaScript程序控制結構
??? 在網頁設計中JavaScript的主要作用是實現內容與行為的分離，而要實現交互式的頁面必須編寫相應的腳本程序。程序是專門解決某一問題的特定代碼。
JavaScript 程序設計分為兩種 :? 面向過程和面向對象的程序設計。
程序控制結構：? 順序結構、分支結構和循環結構。
順序結構
?????? 順序結構是最常用的一種程序結構，是按照語句出現的順序，從第一條語句開始一步一步逐條執行，直至最后一條語句。
分支結構
???? 在 JavaScript 中，可以使用下面幾種條件語句：
if 語句（ 單條件單分支 ）：在一個指定的條件成立時執行代碼。if...else 語句（ 單條件雙分支 ）：在指定的條件成立時執行代碼，當條件不成立時執行另外的代碼。if...else if....else 語句（ 多條件多分支 ）：使用這個語句可以選擇執行若干塊代碼中的一個。switch 語句（ 單條件多分支 ）：使用這個語句可以選擇執行 若干塊代碼 中的一個。
循環結構-for
for (初始化表達式;判斷表達式;循環表達式){? ?
需循環執行的代碼
?}
循環結構-while語句
while(表達式) {
?? 需執行的代碼;
}
循環結構-do-while語句
do… while循環
do{
??? 需執行的代碼;
? }while(表達式)
循環結構-for-in循環
該循環用來對數組或對象的屬性進行操作的。基本語法：
??? for (變量 in 對象){? 執行代碼； }
循環結構-循環的嵌套
循環的嵌套：一個循環內又包含著另一個完整的循環結構，稱為循環的嵌套。
循環中斷與繼續
break作用:立即結束循環并轉到循環后續語句執行。
continue作用:結束本次循環，其后的語句本次不再執行，開始下一次的循環。
JavaScript函數
?JavaScript 函數分為系統內部函數和系統對象定義的函數及用戶自定義函數。函數需要先定義后使用， JavaScript 函數一般定義在 HTML 文件的頭部 head 標記或外部 JS 文件中 ，而函數的調用可以在 HTML 文件的主體 body 標記中任何位置。常用 系統函數 分 全局函數 和 對象定義的函數 。全局函數它不屬于任何一個內置對象，使用不需要加任何對象名稱，直接使用。
常用系統函數-全局函數
1. 計算表達式的結果函數：eval（字符串表達式）
??? ?返回值：表達式的值或“undefined”。
? ? ?2.編碼函數escape()：escape(字符串)
?????? escape() 函數將參數字符串中的特定字符(ISO-Latin-1 字符集)進行編碼，并返回一個編碼后的字符串。它可以對空格、標點符號及其他非ASCII字母表的字符進行編碼，除了以下字符：“*? @? -? _? +? .? / ”。
? ? 3.解碼函數:unescape(string)
??? unescape 函數返回的字符串是 ISO-Latin-1 字符集的字符。參數string包含形如“%xx”的字符的字符串，此處xx為兩位十六進制數值。
? ?4.字符型轉換成數值型函數:parseFloat(string)
? ?5.字符型轉換成數值型函數:parseInt(numbestring , radix);
? ?6.判斷是否是NaN()函數:isNaN(testValue);
???????? NaN:not a Number? （注意大小寫）
常用系統函數-常用的對象函數
（1）toString(radix)。將Number型數據轉換為字符型數據，并返回指定的基數的結果。其中radix范圍2～36，若省略該參數，則使用基數10。
??? var a = 12;alert(a.toString(2)); //告警框輸出結果為1100（二進制）
???? alert(a.toString()); //告警框輸出結果為12(默認的十進制)
????? （2）toFixed(n)。將浮點數轉換為固定小數點位數的數字。n是整數，設置小數的位數，如果省略了該參數，將用0代替。
例如：
??? var a = 2016.1567;alert(a.toFixed(2)); //保留2位小數，結果為2016.16
??? alert(a.toFixed (5)); //保留5位小數，告警框輸出結果為2016.15670
（3）字符串查找和提取常用函數
var str="Welcome to you!";
var substr=str.substring(3,6); //從第0個字符起，第3個-6個之間字符為"com"
var somestr=str.charAt(4);??? //從第0個字符開始數，取第4個字符結果是"o"
?? 其它參照案例edu_14_6_7.html
自定義函數
基本語法：
??? function functionname(argument1,argument2,..., argumentn){函數體；}
語法說明：
函數就是包裹在花括號中的代碼塊，使用關鍵詞 function 來定義。當調用該函數時，會執行函數內的代碼。在調用函數時，可以向其傳遞值，這些值被稱為參數。這些參數可以在函數中使用。可以發送任意多的參數，參數之間用由逗號分隔。也可以沒有參數，但括號不能省略，參數類型不需要給定。
函數體必須寫在“ { ”和“ } ”內，“ { ”、“ } ”定義了函數的開始和結束。JavaScript 中區分字母大小寫，因此“ function ”這個詞必須是全部字母小寫的，否則程序就會出錯。另外需要注意的是，必須使用大小寫完全相同的函數名來調用函數。 例 如 :?? function sum(x,y){return x*y;}
?function showMessage(mess){
???? alert(mess);
}
函數變量的作用域
變量分為局部變量和全局變量。
局部變量 是指在函數內部聲明的變量，只在一段程序中起作用的變量； 全局變量 是指在函數之外聲明的變量，在整個 JavaScript 代碼中都可起作用的變量，全局變量的生命周期從聲明開始，在頁面關閉時結束。局部變量和全局變量可以重名。即在函數體外聲明了一個變量，在函數體內再聲明一個同名的變量。在函數體內部，局部變量的優先級高于全局變量，即在函數體內，同名的全局變量被隱藏了。需要注意到是：專用于函數體內部的變量一定要用 var 關鍵字聲明 ，否則該變量將被定義成全局變量，如果函數體外部有同名的變量，可能導致該全局變量被修改。
課后練習
編程實現“手機批發業務-產品選購”頁面，主要功能有查看購物車、收銀臺結算、初始化參數等
<!-- edu_14_7_1.html -->
<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><title>圖書選購</title><style type="text/css">table{width: 580px;height: 200px;} td{text-align: center; vertical-align: middle;} .myBtn {margin: 20px;width: 120px; height: 45px;border: 1px ridge #44FFEE;}</style><script type="text/javascript">var result = ""; //存放選購信息 var price = new Array(2576.00, 2999.00, 3898.00, 699.00, 599.00, 699.00);var product = new Array("iPhone 6 32GB 金色 移動聯通電信4G", "OPPO R11 全網通 黑色版", "Apple iPhone 6s Plus 32GB 金色 移動聯通電信4G手機", "小米 紅米手機4X 全網通版 2GB內存 16GB 香檳金", "小米 紅米手機4A 全網通版 2GB內存 16GB 玫瑰金", "小米 紅米4X 全網通版 2GB內存 16GB 櫻花粉");var isSelected = new Array(0, 0, 0, 0, 0, 0);function clearAll() {isSelected = [0, 0, 0, 0, 0, 0]; //選擇狀態全部置0
//所有復選框狀態變為未選中狀態
myForm.sp0.checked = false;
myForm.sp1.checked = false;
myForm.sp2.checked = false;
myForm.sp3.checked = false;
myForm.sp4.checked = false;
myForm.sp5.checked = false;
}
function checkOut() {var total = 0;//存放小計金額var count = 0;//存放選購產品件數for(var i = 0; i < isSelected.length; i++) {count += isSelected[i];}for(var i = 0; i < price.length; i++) {total = total + price[i] * isSelected[i]//累計金額}alert("您所選購的" + count + "件,產品總價=" + total+"\n"+"請去支付！");
}
function shoppingCart() {//判斷有多少個復選框被選中
var selectList = ""; //保存所選產品清單for(var j = 0; j < product.length; j++) {if(isSelected[j]) {//分行顯示selectList += (j + 1) + "-" + product[j] + ",價值=" + price[j] + "\n";}
}
var info = (selectList == "") ? "您的購物車為空，請選購！" : selectList;
alert(info);//生成一個結算清單，顯示輸出
}
function checkSelect(number) {var temp;//暫存復選框狀態switch(number) {case 0:temp = myForm.sp0.checked;break;case 1:temp = myForm.sp1.checked; break;case 2:temp = myForm.sp2.checked; break;case 3:temp = myForm.sp3.checked; break;case 4:
temp = myForm.sp4.checked; break;
default:temp = myForm.sp5.checked; break;
}
isSelected[number] = (temp) ? 1 : 0; //記錄下選中產品，1-選中，0-未選
}
</script>
</head>
<body>
<form name="myForm" method="post" action="">
<table align="center" border="1">
<caption>手機批發業務-商品備選區</caption>
<tr>
<td><img src="mobile_1.jpg" /><br />
<h4 name="h41">iPhone 6 32GB 金色 移動聯通電信4G</h4><input type="checkbox" name="sp0" value="2576" onclick="checkSelect(0);">￥ 2576.00<br /></td>
<td><img src="moblie_2.jpg" /><br />
<h4 name="h421">OPPO R11 全網通 黑色版</h4>
<input type="checkbox" name="sp1" value="2999" onclick="checkSelect(1);">￥ 2999.00<br /></td>
<td><img src="moblie_3.jpg" /><br /><h4 name="h43">Apple iPhone 6s Plus 32GB 金色 移動聯通電信4G手機</h4>
<input type="checkbox" name="sp2" onclick="checkSelect(2);"> ￥ 3898.00<br /></td>
</tr>
<tr>
<td><img src="moblie_4.jpg" /><br />
<h4 name="h44">小米 紅米手機4X 全網通版 2GB內存 16GB 香檳金</h4><input type="checkbox" name="sp3" value="699" onclick="checkSelect(3);"> ￥ 699.00
<br /></td>
<td><img src="moblie_5.jpg" /><br />
<h4 name="h45"> 小米 紅米手機4A 全網通版 2GB內存 16GB 玫瑰金</h4>
<input type="checkbox" name="sp4" value="599" onclick="checkSelect(4);">￥ 599.00<br /></td>
<td><img src="moblie_6.jpg" /><br />
<h4 name="h46">小米 紅米4X 全網通版 2GB內存 16GB 櫻花粉</h4>
<input type="checkbox" name="sp5" value="699" onclick="checkSelect(5);">￥ 699.00<br /></td>
</tr>
<tr>
<td colspan="3">
<input class="myBtn" type="button" value="查看購物車" onclick="shoppingCart();">
<input class="myBtn" type="button" value="收銀臺結算" onclick="checkOut();">
<input class="myBtn" type="button" value="初始化參數" onclick="clearAll();">
</td>
</tr>
</table>
</form>
</body>
</html>
總結
? JavaScript是一種功能強大、使用簡便的、具有安全性的客戶端腳本語言。
? ? 本章簡要地介紹了JavaScript語言的歷史和特點，詳細講解了JavaScript的標識符、變量、運算符和表達式、三種程序控制結構（包括順序結構、分支結構和循環結構）及函數等相關知識。通過在HTML文檔中嵌入JavaScript腳本語言，可以增強用戶與網頁之間的交互性，并在頁面中實現各種特效，提高頁面的觀賞性。
希望你開心，希望你健康，希望你幸福，希望你點贊！
最后的最后，關注喵，關注喵，關注喵，佬佬會看到更多有趣的博客哦！！！
喵喵喵，你對我真的很重要！
 內存管理2.0(6) 各種段(.code .rodata .data .bss .stack .heap)的含義)
