Javascript 简介

JavaScript 是一种脚本语言，它的解释器被称为 JavaScript 引擎。 JavaScript 被发明用于在 HTML 网页上使用，给HTML网页增加动态功能。

下面是一个 Hello World 例子：

<html>
<head></head>
<body>

<script>
alert("hello world!");
</script>

</body>
</html>

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

JavaScript 代码可以放在下面的位置：

不同位置的效果如下：

基本语法

变量

在 JavaScript 中，变量可以用 var 命令做声明

var foo ;
var bar = "bar";

or not …

i = 100;
s = "hello";
b = True;
lst = ["a","b","c"];

数据类型

字符串可以使用单引号或双引号，也可以在字符串中使用引号：

var s1 = "foo";
var s2 = 'foo';
var s3 = "foo('bar')";
var s4 = 'foo("bar")';

JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：

var x1 = 34.00;
var x2 = 34;

布尔类型只能有两个值：true 或 false：

var x = true
var y = false

数组可以被用来存储变量：

var boys = new Array();
boys[0] = Tom";
boys[1] = Jack";
boys[2] = Alex";

var grils = new Array("Rita","Erica","Mary");

var dogs = ["scratchy", "jumpy", "spiky"];

运算符

算术 比较 逻辑
x + y x > y x && y
(and)
x - y x < y x || y
(or)
x * y x >= y c ? x : y
(if c return x otherwise y)
x / y x <= y x & y
(bitwise and)
x++ x == y x | y
(bitwise or)
x-- x != y x ^ y
(bitwise xor)
x % y    

逻辑控制语句

JavaScript 中的 if/else 判断类似 C 语言：

if (condition_1) {
    ...;
}
else if (condition_2) {
    ...;
}
else {
    ...;
}

在做大量的选择判断的时候，可以采用 switch/case 结构：

switch(k) {
case k1: 
    执行代码块 1 ; 
    break; 
case k2: 
    执行代码块 2 ; 
    break; 
default: 
    默认执行（k 值没有在 case 中找到匹配时）; 
}

在 JavaScript 中，for 循环的语法也类似 C 语言：

for(变量 = 初始值 ; 循环条件 ; 变量累加方法) { 循环语句; }

举例而言，下面的代码：

<script>
    for(var i=0; i<3; i++) { document.write("number is "+i+"<br>"); }
</script>

实际渲染效果如下：

Javascript 中的 while 循环有下面两种版本：

while (条件) { 需要执行的代码; }      // 1

do { 需要执行的代码; } while (条件);  // 2

而这两者的区别是，do/while 循环在检测条件之前就会执行，也就是说，即使条件为 false，do/while 也会执行一次循环代码。

在循环体内，我们可以使用 break 和 continue 终止或者跳过循环.

比如：

for (i = 1; i < 10; i++) {
    if (i == 5 || i == 6) continue;
    if (i == 8) break;
    document.write(i); }

输出为

函数

在 JavaScript 中，函数由关键词 function 定义，函数可以有多个参数。基本格式为：

function 函数名 (参数1，参数2){
    函数体;
    return 返回值;
}

调用（使用）函数时，传入对应的参数，执行 函数体 中如 if/else，switch/case，for，while 等各种语句，可以实现各种复杂的功能。

如果多次采用 function 命令重复声明同一个函数，则后面的声明会覆盖前面的声明，比如以下代码：

事件

JavaScript 是 基于对象 的语言：

常用事件

Javascript 中的常用事件如下：

例子

  <script>
    function click_button() { alert('You Just Clicked!'); }
  </script>

  <button onclick="click_button()">click me</button>


<div style='background-color:lightgreen;width:200px;height:50px;text-align:center;'
   onmouseover="this.innerHTML='good'"
   onmouseout="this.innerHTML='You have moved out'"
>move to here</div>
move to here
<script>
    function mDown(obj){
        obj.innerHTML='release your mouse';
        obj.style.backgroundColor='lightgreen';
    }

    function mUp(obj){
        obj.style.backgroundColor='lightblue';
        obj.innerHTML='press me'
    }
</script>

<div style='background-color:lightgrey;width:200px;height:35px;text-align:center;'
    onmousedown='mDown(this)'
    onmouseup='mUp(this)'
>press here</div>
press here

对象

JavaScript 的所有数据都可以被视为对象，而每个对象都有其 属性（properties）和 方法（methods）。

当申请一个变量的时候：

var my_var = "foo";

其实也就是创建了一个 字符串对象 ，这个对象拥有

创建对象

创建一个“student”对象，并为其指定几个 属性 和 方法：

student = new Object();  // 创建对象“student”

student.name = "Tom";   // 对象属性 名字
student.age  = "19";    // 对象属性 年龄

student.study =function() {   // 对象方法 学习
    alert("studying");
};

student.eat =function() {     // 对象方法 吃
    alert("eating");
};

此外，你也可以这样创建对象：

var student = {};
student.name = "Tom";
……

或者这样：

var student = {
    name:"Tom";
     age:"19";
    ……
}

但是以上方法在创建多个对象时，会产生大量重复代码，所以我们也可以采用函数的方式新建对象：

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');

访问对象的属性和方法

我们可以这样，访问 student1 的属性：

var x = student1.name;  // 访问对象的属性
var y = student1.age;

document.write(x);
document.write(y);

student1.study();     // 调用对象的方法

当我们需要 反复访问 某对象的时候，可以使用 with 语句简化操作，而不需要反复地用 . 符号，比如：

with(student1) {
  var x = name;
  var y= age;
  study();
  eat();
}

String 字符串对象

该对象只有一个属性，即 length，表示字符串中的字符个数，包括所有的空格和符号：

var test_var = "I love You!";
document.write(test_var.length);  // → 11

String 对象共有 19 个内置方法，主要包括字符串在页面中的显示、字体大小、字体颜色、字符的搜索以及字符的大小写转换等功能，下面是一些常用的：

Math 对象

“数学”对象，提供对数据的数学计算。

Math 的几个属性，是数学上几个常用的值：

Math 的内置方法，是一些数学上常用的数学运算：

Array 数组对象

数组对象是对象的集合，里边的对象可以是不同类型的。数组的每一个成员对象都有一个“下标”，用来表示它在数组中的位置（从 0 开始计数）。

数组下标表示方法是用方括号括起来，比如：

myArray[2]="hello"

注意：JavaScript只有一维数组，要使用多维数组，请用这种虚拟法：

var myArray = new Array(
    new Array(), 
    new Array(),
    new Array(),
);

其实这是一个一维数组，里边的每一个元素又是一个数组。调用这个“二维数组”的元素时：

myArray[2][3] = ...;

Array 的属性

length ：返回数组的长度，即数组里有多少个元素。它等于数组里最后一个元素的下标加一。

因此，想添加一个元素，只需要：

myArray[myArray.length] = ...;

Array 的方法

DOM

本节 JavaScript 的 DOM 操作，内容主要包括：

基本概念

什么是 DOM

DOM 是 文档对象模型（Document Object Model）的简称，它的基本思想是把结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口，以达到使用编程语言操作文档的目的，所以，DOM 可以理解成文档（HTML 文档、XML 文档）的编程接口。

严格地说，DOM 不属于 JavaScript，但是操作 DOM 是 JavaScript 最常见的任务，而 JavaScript 也是最常用于 DOM 操作的语言，本章介绍的就是 JavaScript 对 DOM 标准的实现和用法。

节点

DOM 的最小组成单位叫做 节点（node），一个文档的树形结构（DOM 树），就是由各种不同类型的节点组成。

对于 HTML 文档，节点主要有以下六种类型：

== | 节点 | 名称 | 含义 | | — | — | — | | Document | 文档节点 | 文档的类型 | | Element | 元素节点 | HTML 元素（比如<head>、<body>等） | | Attribute | 属性节点 | HTML 元素的属性（比如 class=”right”） | | Text | 文本节点 | HTML 文档中出现的文本 | | DocumentFragment | 文档碎片节点 | 文档的片段 | ==

选取文档元素

通过 ID 选取元素

我们可以使用方法 getElementByID() 通过元素的 ID 而选取元素，并对其做操作，比如：

document.getElementById("my_div").style.height="100px";  // 设置 my_div 高度为 100px    
document.getElementById("my_div").style.background="red";

通过 getElementByID() 设置了 ID 为 my_div 的一个 div 标签的高度（100px）和颜色（red），效果：

set w250

通过名字（Name）或标签名（TagName）选取元素

除了通过 ID 选择元素，我们还可以使用 getElementByName() 方法或者 getElementsByTagName() 方法找到元素，不过如果有多个同类型标签，那我们需要以下标来确认：

document.getElementsByTagName("input")[0].value="hello";   // 下标为 [0] 表示选取第 1 个 input 标签
document.getElementsByTagName("input")[1].value="shiyanlou"; // 下标为 [1] 表示选取第 2 个 input 标签

效果如图：

set w350

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

查询和设置元素的属性

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

<html>
<head>
  <style>
    .class_1 {color: red;}
    .class_2 {color: blue;}
  </style>
</head>
<body>
  <div id='div_1' class='class_1'>
    <br/>
    <a>before:</a>
    <script>
      document.write(document.getElementById('div_1').getAttribute('class'));
    </script>
    <br/>
    <a>after:</a>
    <script>
      document.getElementById('div_1').setAttribute('class', 'class_2');
      document.write(document.getElementById('div_1').getAttribute('class'));
    </script>
  </div>
</body>
</html>

运行结果：

set w200

父节点

通过 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>

运行结果：

set w200

创建和插入节点

在了解 JavaScript 之前，可能会以为一个 HTML 页面被写出来是什么样，那它就固定了是什么样子。

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

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

<html>
<body>
  <div stype='background:lightgreen;height=100px;'></div>
  <script>
    var mydiv = document.createElement('div');
    mydiv.style.height = '100px';
    mydiv.style.background = 'lightblue';
    document.getElementsByTagName('body')[0].appendChild(mydiv);
  </script>
</body>
</html>

运行结果

set w200

删除节点

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

<html>
<body>
  <div>
    <div id='div_green' style='background:lightgreen; height:50px;'></div>
    <div id='div_blue' style='background:lightblue; height:50px;'></div>
  </div>
  <script>
    function remove(){
      var obj=document.getElementById('div_green');
      obj.parentNode.removeChild(obj);
    }
  </script>
  <button onclick='remove()'>click to remove</button>
</body>
</html>

运行结果：

set w200

作业

参考“删除节点”的方式，在一个页面内实现：通过按钮改变页面颜色，通过按钮创建和插入节点等本节实验中的功能。

<html>
<head>
    <script>
        function create_bar(){
            var root = document.getElementById('div_root');
            var child = document.createElement('div');
            var colors = Array('lightgreen', 'lightblue', 'lightgrey', 'tomato');
            var index = Math.round(Math.random() * (colors.length - 1));
            child.style.background = colors[index];
            child.style.height = '10px';
            root.appendChild(child);
        }
        function change_color(){
            var colors = Array('lightgreen', 'lightblue', 'lightgrey', 'tomato');
            var root = document.getElementById('div_root');
            for (child_index in root.children) {
                var index = Math.round(Math.random() * (colors.length - 1));
                root.children[child_index].style.background = colors[index];
            }
            alert("fine!");
        }
        function delete_bar(){
            var root = document.getElementById('div_root');
            root.removeChild(root.lastChild);
        }
        function delete_all(){
            var root = document.getElementById('div_root');
            while (root.childElementCount != 0){
                root.removeChild(root.children[0]);
            }
        }
    </script>
</head>
<body>
    <div id='div_root'></div>
    <button onclick='create_bar()'>Create Bar</button>
    <button onclick='change_color()'>Change Color</button>
    <button onclick='delete_bar()'>Delete Bar</button>
    <button onclick='delete_all()'>Clean</button>
</body>
</html>

运行结果：

set w300