1.1第一个 JavaScript 程序

#这段代码的效果是，弹出一个小框，显示“hello world!”

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.事件

常用事件

name	function
onclick	单击
ondblclick	双击
onfocus	元素获得焦点
onblur	元素失去焦点
onmouseover	鼠标移到某元素之上
onmouseout	鼠标从某元素移开
onmousedown	鼠标按钮被按下
onmouseup	鼠标按键被松开
onkeydown	某个键盘按键被按下
onkeyup	某个键盘按键被松开
onkeypress	某个键盘按键被按下并松开

其中，onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数。比如这一例子：



    
        move your mouse to here

onmousedown, onmouseup 是鼠标压下和松开的事件。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件。
举例说明：



  


press here

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 对象，可以这样使用：

当我们需要反复访问某对象的时候，可以使用 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 而选取元素，并对其做操作，比如：

(2)通过名字（Name）或标签名（TagName）选取

9.节点、属性操作和文档遍历

查询和设置元素属性
可以通过 getAttribute() 和 setAttribute() 查询和设置元素的属性：










before:





after:

父节点
通过 parentNode() 方法可以查看并操作一个节点的父节点，示例：找到 id 为 demo 的元素的父节点，并输出其 class 的名称：

创建和插入节点
JavaScript 可以动态地在页面中创建并插入节点，这便需要用到 createElement()、appendChild() 方法，它们的作用分别是创建节点和插入节点。

比如：创建一个 div 并为其设置高度（100px）和背景色（red），并追加到 body 后面：

删除节点
除了创建，我们还可以删除一个节点，通过 removeChild() 方法：

JavaScript基础