一.JavaScript基本语法、函数和事件
1.声明变量的两种方式：
（1）先声明变量再赋值。如：var name;name ="cat";。
（2）同时声明和赋值变量。如：var name="cat"。
2.数据类型（undefined，null，boolean,number,string)
（1）对未初始化的变量及未声明的变量使用typeof运算符均返回undefined
（2）null是空类型。使用typeof检测时返回object
（3）boolean是布尔类型，即真假类型，该类型有两个标准值：true，false。
（4）在JavaScript中，整数和小数均为number
（5）在JavaScript中，string是字符串类型，是位于单位引号或双引号之间的若干字符。
3.JavaScript流程控制
程序的三种基本处理流程：顺序、选择、循环。JavaScript中可以用if和switch语句控制选择结构，用while、for等控制循环结构，然而循环结构的嵌套循环是一难点。比如经典算法冒泡排序，就是使用循环嵌套实现的。
冒泡排序的运作方式：
（1）首先比较前后相邻数组元素，如果前面大于后面，则两数交换位置
（2）然后开始第二轮比较，在第二轮中针对所有数组元素重复以上步骤，最后一个数组元素除外
（3）继续重复以上步骤，直到没有任何一对数组元素需要比较为止
<script>
var arr = [12,23,2,45,65,11,10]
for (var i=0;i<arr.length;i++){//控制需要比较的轮数
for(var j=0;j<arr.length -1 -i;j++){//控制数组元素下标
if(arr[j] > arr[j+1]){
//交换相邻数组元素
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
for (var i in arr){//循环输出排序后的数组
document.writeln(arr[i]);
}
</script>
4.事件与处理程序绑定
（1）在事件源对象所对应的HTML标签上增加一个需要处理事件属性，让事件属性值等于处理该事件的函数名或程序代码。如：<h2 id="txt" onclick="this.style.color='red'">..</h2>
（2）直接在JavaScript代码中设置元素对象的事件属性，让事件属性值等于处理该事件的函数名或程序代码。如：
<script>
document.getElementById("txt").onclick = function(){
this.style.color="red";
}
</script>
二.JavaScript对象
1.JavaScript中的内部对象包括object、date、math、string、array等
2.创建对象
（1）JavaScript中的对象可以理解为是若干个键值对的集合
（2）可以使用function以构造函数的方式创建自定义对象，然后使用new关键字创建对象
（3）可以使用“{}”来创建对象
三.DOM编程
1.获取节点
2.动态添加节点
使用document对象的createelement创建节点后，利用节点对象的innerHTML属性设置其创建的节点嵌套内容，有时也需要使用classname美化新节点的样式。
举例说明：单击查看按钮时显示5个客户信息
(1)CSS样式代码如下：
<style type="text/css">
div#info {
border:1px solid #ccc;
overflow:hidden; /*解决浮动塌陷*/
padding:20px;
width:1060px;
}
div#info dl.per { /*动态添加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) { //创建Person类
this.path = path; //头像的路径
this.name = name;
this.age = age;
this.gender = gender;
}
var persons = new Array();//创建数组
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", "张益达", 22, "男");
function addinfo(){
var info = document.getElementById("info");//新节点的父节点
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>
