1.1第一个 JavaScript 程序
#这段代码的效果是，弹出一个小框，显示“hello world!”
<html>
<head></head>
<body>
<script>
alert("hello world!");
</script>
</body>
</html>
2.变量的声明
在 JavaScript 中，变量用 Var 命令做声明：
var test ; // 声明了一个名为 test 的变量。
var test_2 = "shiyanlou" ; // 声明一个名为 test_2 的变量，并赋值为“shiyanlou”。
在 JavaScript 中，变量也可以不作声明，而在使用时再根据数据的类型来确其变量的类型，如：
x = 100 ; // 变量 x 为整数
y = "hello" ; // 变量 y 为字符串
z = True ; // 变量 z 为布尔型
cars=["Audi","BMW","Volvo"]; // cars 是一个数组
3.Javascript语句
- if/else
- switch/case
- for
- while
- break/continue
4.JavaScript函数
function 函数名 (参数1，参数2)
{
函数体;
return 返回值;
}
5.事件
<html>
<head>
<script>
function click_button() { // 事件处理程序，弹出提示窗
alert('welcome to shiyanlou');
}
</script>
</head>
<body align="center">
<br></br>
<button onclick="click_button()">click me</button> <!--发生事件 onclick 的时候，执行 click_button()-->
</body>
</html>
常用事件
| name | function |
|---|---|
| onclick | 单击 |
| ondblclick | 双击 |
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onmouseover | 鼠标移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousedown | 鼠标按钮被按下 |
| onmouseup | 鼠标按键被松开 |
| onkeydown | 某个键盘按键被按下 |
| onkeyup | 某个键盘按键被松开 |
| onkeypress | 某个键盘按键被按下并松开 |
其中，onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数。比如这一例子：
<html>
<head></head>
<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"
onmouseover="this.innerHTML='good'"
onmouseout="this.innerHTML='you have moved out'"
>move your mouse to here</div>
</body>
</html>
onmousedown, onmouseup 是鼠标 压下 和 松开 的事件。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件。
举例说明：
<html>
<head>
<script>
function mDown(obj) // 按下鼠标 的 事件处理程序
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="release your mouse"
}
function mUp(obj) // 松开鼠标 的 事件处理程序
{
obj.style.backgroundColor="green";
obj.innerHTML="press here"
}
</script>
</head>
<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"
onmousedown="mDown(this)"
onmouseup="mUp(this)"
>press here</div>
</body>
</html>
6.对象
6.1创建对象
student = new Object(); // 创建对象“student”
student.name = "Tom"; // 对象属性 名字
student.age = "19"; // 对象属性 年龄
student.study =function() { // 对象方法 学习
alert("studying");
};
student.eat =function() { // 对象方法 吃
alert("eating");
};
以上方法在创建多个对象时，会产生大量重复代码，所以我们也可以采用函数的方式新建对象：
function student(name,age) {
this.name = name;
this.age = age;
this.study = function() {
alert("studying");
};
this.eat = function() {
alert("eating");
}
}
然后通过 new 创建 student 对象的实例：
var student1 = new student('Tom','19');
var student2 = new student('Jack','20');
6.2访问对象的属性与方法
新建的 student1 对象，可以这样使用：
<script>
var x = student1.name; // 访问对象的属性
var y = student1.age;
document.write(x);
document.write(y);
student1.study(); // 调用对象的方法
</script>
当我们需要 反复访问 某对象的时候，可以使用 with 语句简化操作，而不需要反复地用“.”符号，比如：
with(student1) {
var x = name;
var y= age;
study();
eat();
}
7.内置对象
1.String
属性：string.length
| 方法 | 功能 |
|---|---|
| charAt(n) | 返回该字符串第 n 位的单个字符。（从 0 开始计数） |
| charCodeAt(n) | 返回该字符串第 n 位的单个字符的 ASCII 码。 |
| indexOf() | 用法：string_1.indexOf(string_2,n); 从字符串 string_1 的第 n 位开始搜索，查找 string_2，返回查找到的位置，如果未找到，则返回 -1，其中 n 可以不填，默认从第 0 位开始查找。 |
| lastIndexOf() | 跟 indexOf() 相似，不过是从后边开始找。 |
| split('分隔符') | 将字符串按照指定的分隔符分离开，返回一个数组，例如：'1&2&345&678'.split('&')；返回数组：1,2,345,678。 |
| substring(n,m) | 返回原字符串从 n 位置到 m 位置的子串。 |
| substr(n,x) | 返回原字符串从 n 位置开始，长度为 x 的子串。 |
| toLowerCase() | 返回把原字符串所有大写字母都变成小写的字符串。 |
| toUpperCase() | 返回把原字符串所有小写字母都变成大写的字符串。 |
2.Math
| 属性 | 作用 |
|---|---|
| E | 返回常数 e (2.718281828...)。 |
| LN2 | 返回 2 的自然对数 (ln 2)。 |
| LN10 | 返回 10 的自然对数 (ln 10)。 |
| LOG2E | 返回以 2 为低的 e 的对数 (log2e)。 |
| LOG10E | 返回以 10 为低的 e 的对数 (log10e)。 |
| PI | 返回π（3.1415926535...)。 |
| SQRT1_2 | 返回 1/2 的平方根。 |
| SQRT2 | 返回 2 的平方根。 |
| 方法 | 作用 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| round(x) | 返回 x 四舍五入后的值。 |
| sqrt(x) | 返回 x 的平方根。 |
| ceil(x) | 返回大于等于 x 的最小整数。 |
| floor(x) | 返回小于等于 x 的最大整数。 |
| sin(x) | 返回 x 的正弦。 |
| cos(x) | 返回 x 的余弦。 |
| tan(x) | 返回 x 的正切。 |
| acos(x) | 返回 x 的反余弦值（余弦值等于 x 的角度），用弧度表示。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 返回 x 的反正切值。 |
| exp(x) | 返回 e 的 x 次幂 (e^x)。 |
| pow(n, m) | 返回 n 的 m 次幂 (nm)。 |
| log(x) | 返回 x 的自然对数 (ln x)。 |
| max(a, b) | 返回 a, b 中较大的数。 |
| min(a, b) | 返回 a, b 中较小的数。 |
| random() | 返回大于 0 小于 1 的一个随机数。 |
3.Array数组对象
注意：JavaScript只有一维数组，要使用多维数组，请用这种虚拟法：
var myArray = new Array(new Array(), new Array(), new Array(), ...);
调用这个“二维数组”的元素时：
myArray[2][3] = ...;
属性：length
返回数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。
想添加一个元素，只需要：
myArray[myArray.length] = ...;
(2)Array 的方法
join("指定分隔符") ：返回一个字符串，把数组元素串起来，元素间用指定分隔符隔开。
toString() ：把数组转为字符串，并返回结果。
reverse() ：使数组元素倒序。
slice(n,m) ：返回子数组，从数组第 n 个元素到第 m 个元素。
sort(SortFunction) ：按照指定的 SortFunction 将数组的元素排序。
concat(Array_1,Array_2) ：用于连接两个或多个数组。
8.DOM
DOM 是 文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。
- 选取文档元素
(1)通过ID选取
我们可以使用方法 getElementById() 通过元素的 ID 而选取元素，并对其做操作，比如：
<html>
<body>
<div id="my_div"></div>
<script>
document.getElementById("my_div").style.height="100px"; // 设置 my_div 高度为 100px
document.getElementById("my_div").style.background="red"; // 设置 my_div 颜色为 红色
</script>
</body>
</html>
(2)通过名字（Name）或标签名（TagName）选取
<html>
<body>
<input type="text" />
<input type="text" />
<script>
document.getElementsByTagName("input")[0].value="hello"; // 下标为 [0] 表示选取第 1 个 input 标签
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签
</script>
</body>
</html>
9.节点、属性操作和文档遍历
- 查询和设置元素属性
可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性：
<html>
<head>
<style>
.class_1 {
height:100px;
width:100px;
background:red;
}
.class_2 {
height:100px;
width:100px;
background:blue;
}
</style>
</head>
<body>
<div id="div_1" class="class_1"></div>
<br/>
<a>before:</a>
<script>
document.write(document.getElementById("div_1").getAttribute("class")); // 查询 div_1 的属性
</script>
<br/>
<a>after:</a>
<script>
document.getElementById("div_1").setAttribute("class","class_2"); // 修改 div_1 的属性为 class_2
document.write(document.getElementById("div_1").getAttribute("class")); // 再次查询 div_1 的属性
</script>
</body>
</html>
- 父节点
通过 parentNode() 方法可以查看并操作一个节点的父节点，示例：找到 id 为 demo 的元素的父节点，并输出其 class 的名称：
<html>
<body>
<div class="demo-parent">
<div id="demo">
</div>
</div>
<script>
document.write(document.getElementById("demo").parentNode.getAttribute("class"));
</script>
</body>
</html>
- 创建和插入节点
JavaScript 可以动态地在页面中创建并插入节点，这便需要用到 createElement()、appendChild() 方法，它们的作用分别是创建节点和插入节点。
比如：创建一个 div 并为其设置高度（100px）和背景色（red），并追加到 body 后面：
<html>
<body>
<div style="background:#00F; height:100px"></div>
<script>
var mydiv = document.createElement("div");
mydiv.style.height = "100px";
mydiv.style.background = "red";
document.getElementsByTagName("body")[0].appendChild(mydiv);
</script>
</body>
</html>
- 删除节点
除了创建，我们还可以删除一个节点，通过 removeChild() 方法：
<html>
<head>
</head>
<body>
<div>
<div id="div_red" style="background:#F00; height:100px"></div>
<div id="div_blue" style="background:#00F; height:100px"></div>
</div>
<script>
function remove_red(){
var obj = document.getElementById("div_red");
obj.parentNode.removeChild(obj);
}
</script>
<button onclick="remove_red()">remove red div</button>
</body>
</html>
