一.JavaScript基本語法蛙粘、函數(shù)和事件
1.聲明變量的兩種方式：
（1）先聲明變量再賦值幌墓。如：var name;name ="cat";囱稽。
（2）同時(shí)聲明和賦值變量艾恼。如：var name="cat"。
2.數(shù)據(jù)類型（undefined木人，null信柿，boolean,number,string)
（1）對(duì)未初始化的變量及未聲明的變量使用typeof運(yùn)算符均返回undefined
（2）null是空類型。使用typeof檢測(cè)時(shí)返回object
（3）boolean是布爾類型醒第，即真假類型渔嚷，該類型有兩個(gè)標(biāo)準(zhǔn)值：true，false稠曼。
（4）在JavaScript中形病，整數(shù)和小數(shù)均為number
（5）在JavaScript中，string是字符串類型，是位于單位引號(hào)或雙引號(hào)之間的若干字符窒朋。
3.JavaScript流程控制
程序的三種基本處理流程：順序搀罢、選擇、循環(huán)侥猩。JavaScript中可以用if和switch語句控制選擇結(jié)構(gòu)榔至，用while、for等控制循環(huán)結(jié)構(gòu)欺劳，然而循環(huán)結(jié)構(gòu)的嵌套循環(huán)是一難點(diǎn)唧取。比如經(jīng)典算法冒泡排序，就是使用循環(huán)嵌套實(shí)現(xiàn)的划提。
冒泡排序的運(yùn)作方式：
（1）首先比較前后相鄰數(shù)組元素枫弟，如果前面大于后面，則兩數(shù)交換位置
（2）然后開始第二輪比較鹏往，在第二輪中針對(duì)所有數(shù)組元素重復(fù)以上步驟淡诗，最后一個(gè)數(shù)組元素除外
（3）繼續(xù)重復(fù)以上步驟，直到?jīng)]有任何一對(duì)數(shù)組元素需要比較為止
<script>
var arr = [12,23,2,45,65,11,10]
for (var i=0;i<arr.length;i++){//控制需要比較的輪數(shù)
for(var j=0;j<arr.length -1 -i;j++){//控制數(shù)組元素下標(biāo)
if(arr[j] > arr[j+1]){
//交換相鄰數(shù)組元素
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
for (var i in arr){//循環(huán)輸出排序后的數(shù)組
document.writeln(arr[i]);
}
</script>
4.事件與處理程序綁定
（1）在事件源對(duì)象所對(duì)應(yīng)的HTML標(biāo)簽上增加一個(gè)需要處理事件屬性伊履，讓事件屬性值等于處理該事件的函數(shù)名或程序代碼韩容。如：<h2 id="txt" onclick="this.style.color='red'">..</h2>
（2）直接在JavaScript代碼中設(shè)置元素對(duì)象的事件屬性，讓事件屬性值等于處理該事件的函數(shù)名或程序代碼唐瀑。如：
<script>
document.getElementById("txt").onclick = function(){
this.style.color="red";
}
</script>
二.JavaScript對(duì)象
1.JavaScript中的內(nèi)部對(duì)象包括object群凶、date、math哄辣、string请梢、array等
2.創(chuàng)建對(duì)象
（1）JavaScript中的對(duì)象可以理解為是若干個(gè)鍵值對(duì)的集合
（2）可以使用function以構(gòu)造函數(shù)的方式創(chuàng)建自定義對(duì)象，然后使用new關(guān)鍵字創(chuàng)建對(duì)象
（3）可以使用“{}”來創(chuàng)建對(duì)象
三.DOM編程
1.獲取節(jié)點(diǎn)
2.動(dòng)態(tài)添加節(jié)點(diǎn)
使用document對(duì)象的createelement創(chuàng)建節(jié)點(diǎn)后力穗，利用節(jié)點(diǎn)對(duì)象的innerHTML屬性設(shè)置其創(chuàng)建的節(jié)點(diǎn)嵌套內(nèi)容毅弧，有時(shí)也需要使用classname美化新節(jié)點(diǎn)的樣式。
舉例說明：單擊查看按鈕時(shí)顯示5個(gè)客戶信息
(1)CSS樣式代碼如下：
<style type="text/css">
div#info {
border:1px solid #ccc;
overflow:hidden; /*解決浮動(dòng)塌陷*/
padding:20px;
width:1060px;
}
div#info dl.per { /*動(dòng)態(tài)添加dl列表的類樣式*/
float:left;
margin-right:10px;
}
div#info dl.per img {
border:1px solid #ccc;
}j
</style>
(2)JS部分：
<script type="text/javascript">
function Person(path, name, age, gender) { //創(chuàng)建Person類
this.path = path; //頭像的路徑
this.name = name;
this.age = age;
this.gender = gender;
}
var persons = new Array();//創(chuàng)建數(shù)組
persons[0] = new Person("image/face1.jpg", "程大炮", 24, "男");
persons[1] = new Person("image/face2.jpg", "南宮燕", 25, "女");
persons[2] = new Person("image/face3.jpg", "趙鐵柱", 20, "女");
persons[3] = new Person("image/face4.jpg", "李筏春", 32, "女");
persons[4] = new Person("image/face5.jpg", "張益達(dá)", 22, "男");
function addinfo(){
var info = document.getElementById("info");//新節(jié)點(diǎn)的父節(jié)點(diǎn)
info.innerHTML="";
for(const i in persons){
var dl = document.createElement("dl");
dl.className="per";
var str="";
str+="<dt><img src='"+persons[i].path+" '></dt>";
str+="<dd>姓名："+persons[i]['name']+"</dt>";
str+="<dd>年齡："+persons[i]['age']+"</dt>";
str+="<dd>性別："+persons[i]['gender']+"</dt>";
console.log(str);
dl.innerHTML = str;
info.appendChild(dl);//追加
}
}
</script>
(3)body部分：
<body>
<div id="info">
</div>
<div>
<input id="myshow" type="button" value="查看" onclick="addinfo()"><br>
</select>
</div>
</body>
