###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基础（新版）”实验报告