JavaScript 编程基础
一、函数
JavaScript 中提供了函数，函数可以将程序中繁琐的代码模块化，提高程序的可读性，并且便于后期的维护。
（1）函数的定义
为了使代码更为简洁并可以重复使用，通常将某段实现特定功能对的代码定义成一个函数。所谓函数，就是在程序中多条语句组成的逻辑单元。
在 JavaScript 中，函数使用关键字 function 来定义，其语法格式如下：
<script type="text/javascript">
function 函数名 ([参数1,参数2,......]){
函数体
}
</script>
- function：在声明函数时，必须使用的关键男子。
- 函数名：创建函数的名称，函数名唯一。
- 参数： 外界传递给函数的值，可选，当有多个参数时，各参数之间用“,”隔开。
- 函数体：函数定义的主体，用于实现特定的功能。
（2）函数的调用
函数定义后不会自动执行，而是需要在特定的位置调用函数。函数调用很简单，只许引入函数名，并传入相应的参数即可。语法格式如下：
函数名称 ([参数1,参数2,......])
例：下面定义一个带有参数的函数 show(text) ，在页面中输出“Hello World”.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>调用函数</title>
<script type="text/javascript">
//定义一个含有形参text的函数
function show(text){
document.write(text);
}
</script>
</head>
<body>
<script type="text/javascript">
//调用函数show(),给出实参“Hello World”
show("Hello World");
</script>
</body>
</html>
首先 执行函数 show() 的函数体，然后，JavaScript 在其执行函数体之前会把实参值“Hello World”传递给形参 text。
（3）函数中变量的作用域
函数中的变量需要先定义后使用，但并不意味着定义变量后就可以随意使用。变量需要在它的作用范围内才可以被使用，这个作用范围称为变量的作用域。
变量的作用域取决于这个变量是哪一种变量，在 JavaScript 中，变量一般分为全局变量和局部变量。
- 全局变量： 定义在所有函数之外，作用于整个程序的变量。
- 局部变量： 定义在函数体之内，作用于函数体的变量。
二、Array 数组
与其他计算机语言一样，JavaScript 也是通过数组来保存具有相同类型的数据。
（1）创建数组
在 JavaScript 中，使用内置对象类 Array 可以创建数组对象,其语法格式如下：
var arrayname= new Array(); //新建一个长度为0的数组
var arrayname=new Array(n); //新建一个指定长度为n的数组
//新建一个指定长度的数组，并赋值
var arrayname= new Array(元素1,元素2,元素3,......);
var arraryname=[元素1,元素2,元素3,......];
一个数组元素由数组名、一对方括号**[ ]** 和括号中的下标组合而成，不同的数组元素可以通过下标进行区别。
例如，创建一个长度为 Y 的数组对象 year ,对于这个 year 数组对象，它包含数组元素year[0]、year[1]、year[2]、…、year[Y-1]。
（2）使用 for…in 语句
JavaScript 的 for…in 语句是一种特殊的 for 语句，专门用于处理与数组和对象相关的循环操作。for…,in 语句可以依次对数组中的每个元素执行一条或多条语句。其语法格式如下：
for (变量 in 对象){
//此处为JavaScript代码
}
（3）数组的常用属性和方法
| 属性/方法 | 说明 |
|---|---|
| length | 返回数组中数组元素的个数，即数组长度 |
| toString | 返回一个字符串，该字符串包含数组中所有元素，各个元素之间用逗号隔开 |
数组的 length属性是数组最常用的属性，另外，由于数组索引值是从0开始的，因此 length 属性值比数组中的最大索引值大 1。
（4）二维数组
对于复杂的业务逻辑，有时简单的一维数组不能够满足需求，需要使用二维数组。当数组中所有的元素也是数组时，就形成了二维数组。
例如，要保存一个班级所有人的姓名、年龄、性别等数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>二维数组</title>
</head>
<body>
<script typr="text/javascript">
var students,i,j;
students = new Array();
studetns[0]=new Array("张三","18岁","男");
students[1]=new Array("李四","17岁","男");
students[2]=new Array("王五","18岁","女");
for(i in students[i]){
for(j in students[i]){
document.write(students[i][j]+"\t");
}
document,write.("<br />");
}
</body>
</html>
三、DOM 节点树
DOM（Document Object Model）称为文档对象模型，是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。DOM将网页中文档对象的关系规划为节点层级，构成他们之间的等级关系，这种各对象间的层次结构被称为节点树。
DOM 节点树
如上图展示了DOM文档的树形结构，其中“html、head、body”都表示节点，一个文档的树形结构就是由各种不同的节点组成的。文档对象节点树有以下特点。
- 每个节点树有一个根节点。
- 除了根节点，每个节点都有一个父节点。
- 每个节点都可以有许多子节点。
- 具有相同父节点的节点叫“兄弟节点”。
四、节点的访问
在 DOM 中，每个节点都是一个对象，因此每个节点对象都有一系列的属性、方法。JavaScript 中可使用节点的属性和方法访问指定元素，来得到文档中的对象。
（1）访问指定元素
访问指定节点的常用方法。
| 方法 | 说明 |
|---|---|
| getElementById() | 获取拥有指定id的第一个元素引用对象 |
| getElementByName() | 获取带有指定名称的元素对象集合 |
| getElementByTagName() | 获取带有指定标签名的元素对象集合 |
| getElementByClassName() | 获取指定class的元素对象集合（不支持IE6~8浏览器） |
（2）访问相关元素
节点对象的常用属性
| 属性 | 说明 |
|---|---|
| parentNode | 元素节点的父节点 |
| childNode | 元素节点的子节点数组 |
| firstChild | 第一个子节点 |
| lastChild | 最后一个子节点 |
| previousSibling | 前一个兄弟节点 |
| nextSibling | 下一个兄弟节点 |
*需要注意的是，document 对象是所有 DOM 对象的的访问入口，进行节点访问的时候需要首先从 document 对象开始。
五、元素对象常用操作
| 类型 | 方法 | 说明 |
|---|---|---|
| 创建节点 | createElement() | 创建元素节点 |
| createTextNode | 创建文本节点 | |
| 节点操作 | appendChild() | 为当前节点增加一个子节点（作为最后一个节点） |
| insertBedore() | 为当前节点增加一个子节点（插入到指定子节点之前） | |
| removeChild() | 删除当前节点的某个子节点 |
使用Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>节点的创建和追加操作</title>
</head>
<script type="text/javascript">
function init(){
//创建一个<h1>节点
var h1 = document.createElement("h1");
//创建一个文本节点
var text = document.createTextNode("Hello World!");
//为<h1>追加文本节点
h1.appendChild(text);
//为<body>追加<h1>元素
document.body.appendChild(h1);
}
</script>
<body onload="init()">
</body>
</html>
运行Demo结果
六、元素属性与操作
元素对象除了节点操作，还具有一些属性和内容的操作。
| 类型 | 属性/方法 | 说明 |
|---|---|---|
| 元素内容 | inneHTML | 获取或设置元素的HTML内容 |
| 样式属性 | classnName | 获取或设置元素的class属性 |
| style | 获取或设置元素的style样式属性 | |
| 位置属性 | offsetWidth、offsetHeight | 获取或设置元素的宽和高（不含滚动条） |
| scrollEidth、scrollHeight | 获取或设置元素的完整的宽和高（含滚动条） | |
| offsetTop、offsetLeft | 获取或设置包含滚动条，距离上或左边滚动过的距离 | |
| scrollTop、scrollLeft | 获取或设置元素在网页中的座标 | |
| 属性操作 | getAttribute() | 获得元素指定属性值 |
| getAttribute() | 为元素设置新到的属性 | |
| removeAttribute() | 为元素删除指定的属性 |
七、元素的样式操作
在操作元素属性时，style 属性可以修改元素的样式，className 属性可以修改元素的雷鸣，通过这两种方法即可完成元素的样式操作。
（1）style 属性
var test = document,getElementById("test"); //获得需要操作的对象
test.style.width="200px"; //设置样式，相当于： #test{width:200px;}
test.style.height="100px"; //相当于：#test{height:100px;}
test.style.backgroundColor = "#ff0000": //相当于： #test{background-color:#ff0000;}
var testWidth=test.style.width; //获得width样式
在CSS属性中带有“-”的样式（如background-color）,在style 操作中需要用“驼峰式”（如backgroundColor）,即在第二个及后续单词的首字母大写。
（2）className 属性
元素对象的className 属性用于切换元素的类名或为元素追加类名。
var test = document.getElementById("test"); //获得元素对象<div id="test">
test.className = "aa"; //添加样式，执行：<div id="tesst" class="aa">
test.className +="bb"' //追加样式，执行： <div id="test" class="aa bb">
test.className = test.className.replace("bb","cc");
//替换样式，执行：<div id="test" class="aa cc">
tes.className = test.className.replace("cc","");
//删除cc，执行：<div id="test" class="aa">
test.className=""; //删除所有的样式
- Authors
- 杜小白
文章内容借鉴于《HTML+CSS+JavaScript 网页制作案例教程》 编著：传智播客