JavaScript DOM笔记01

JavaScript基础语法

系列文章

引入JavaScript

用JavaScript编写的代码必须通过HTML文档才能执行。有两种方式可以将JavaScript代码引入HTML中:

第一种是将JavaScript代码放入文档 <head> 标签中的 <script> 标签中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        // javascript goes here
    </script>
</head>
<body>
    <!-- document goes here -->
</body>
</html>

一种更好的方法是把JavaScript代码保存为一个后缀名为 .js 的独立文件中,然后通过 <script> 标签的 src 属性指向该文件:

<script src="script.js"></script>

这种情况下,最好将 <script> 标签放到HTML文档的最后,</body> 之前:

    <!-- ... -->
    </div>
    <script src="script.js"></script>
</body>
</html>

这样可以使浏览器更快加载页面。

对于JavaScript语言,在本地由浏览器负责有关的解析和执行工作,不需要额外的编译器。

JavaScript语句和注释

JavaScript由一系列语句组成。只有按正确顺序编写的语句才能顺利执行。

JavaScript程序只需要将各个语句放在不同行就可以分隔它们:

statement1
statement2
...

如果需要将多条语句放在同一行,需要在每一条语句结尾加上分号来分隔它们:

statement1; statement2; ...

一般建议在每一条语句后面加上分号 ; ,这样让代码更易阅读:

any-statement;

典型的JavaScript单行注释以两个斜杠 // 开头:

// javascript comments
// with single line

典型的多行注释以“ /* ” 开头,以“ */ ”结尾,不支持嵌套:

/* javascript comments
   with multiple lines */

JavaScript变量

可以使用 var 关键字来声明一个变量,例如:

var num = 1;

JavaScript中,变量名之间区分大小写。变量名的命名允许包含字母、数字、美元符号和下划线(除了第一个字符不能是数字外,没有其余的限制)。

以下是合法的变量声明:

var x;
var a = 1, $ay = "hello";

JavaScript是一种动态类型语言,因此不需要进行类型的声明,也可以在任何时候改变变量的数据类型。

字符串由零个或多个字符构成,字符串字面量必须包含在引号内,单引号或双引号都可以。

一对引号不能混用。如果要包含特殊字符,可以使用反斜杠 \ 进行转义,例如:

var message = "It's 3'25\"."

JavaScript可以使用整数和浮点数。数值的字面表示和大多数编程语言一致:

var num1 = 1.025;      // float
var num2 = -20;        // negative integer
var num3 = -9.333333;  // negative float

JavaScript支持布尔值 truefalse ,分别表示真和假:

var isboolean = true;

数组可以存储一系列值。可以用 Array() 对象来声明一个数组,括号内可选地可以传入数组的长度:

var position = Array(4);
var values = Array();

声明数组时可以对其值进行初始化,通过用逗号将各个元素隔开:

var participants = Array("John", "Smith", "Georgia");

只需要用一对方括号把各个元素括起来就可以创建数组了:

var participants = ["John", "Smith", "Georgia"];

数组内的元素可以是任意类型的值,甚至是另一个数组:

var series = [3.0, "and", false, ["hello", "world"]];

在数组对象后使用方括号对包含的索引值可以访问数组对应元素的位置,数组元素的索引从0开始计算。
这种索引值访问可以获取或更新数组的某个元素:

var boolvalue = series[2];
series[2] = [true, 1];

算术操作符

JavaScript的算术操作符包含加 + 、减 - 、乘 * 和除 /

比较特别的算术操作符是加 +。加号可以用于拼接两个字符串:

var message = "I want " + "candy";

甚至可以把数值和字符串拼接在一起,此时数值将被自动转为字符串。

因此,运算 "10"+20 的结果是字符串 "30"

每一种算术运算符都有对应的复合赋值运算符,例如 +=

条件语句

条件语句的基本语法为:

if (condition) {
    statements
}

条件的求值结果只能是布尔值。如果 if 表达式中只有一条语句,可以不用使用花括号。

if 语句可以有一个 else 子句,在给定条件为假时执行。

比较和逻辑操作

JavaScript提供的逻辑操作符包含大于 > 、小于 < 、大于或等于 >= 以及小于或等于 <=

比较两个值是否相等可以使用等于比较操作符 == 。注意,该操作符只表示值相等,并不能表示两个比较对象就是一致的。要比较严格相等,需要使用另一种等号 === ,该全等操作符不仅会比较值,还会比较变量的类型:

"" == false;  // true
[] === 0;     // false

类似地可以使用不等操作符 != ,如果想比较严格不相等,就需要使用 !==

可以用逻辑操作符对多个条件值进行逻辑运算,它们包含二元逻辑与 && 、二元逻辑或 || 和一元逻辑非 !

循环语句

while 循环的语法和 if 语句非常相似:

while (condition) {
    statements
}

只要给定条件求值结果为 true ,那么代码块就会不断执行下去。

do...while 循环可以确保循环语句内部的代码至少执行一次,其语法为:

do {
    statements
} while (condition);

当给定条件求值结果为 false 时,代码块才不会重复执行。

for 循环语法形式如下:

for (initial; condition; finally) {
    statements
}

Array() 对象有一个 length属性,表示给定数组里元素的个数。可以用该属性配合 for 循环来遍历数组:

var values = [3, 6.23, -2.1, 9, 5.55];
var total = 0;
for (var i = 0; i < values.length; i++) {
    total += values[i];
}

函数

函数应该先定义再调用。定义函数的语法为:

function funcName(arguments) {
    statements
    return value;
}

有了以上定义,可以在脚本里任意位置调用该函数 funcName()

以下是一个函数示例:

function average(values) {
    var total = 0;
    for (var i = 0; i < values.length; i++) {
        total += values[i];
    }
    return total / values.length;
}

全局变量(global variable)可以在脚本的任何位置被引用,作用域为整个脚本。

局部变量(local variable)只存在于声明它的函数内部,作用域仅限于某个特定的函数。

可以用 var 关键字明确为函数变量声明作用域:如果在某个函数中使用了 var 变量,该变量将被视为一个局部变量,只存在于这个函数体中;否则,它会被视为一个全局变量,且如果存在一个与之同名的全局变量,这个函数就会引用该全局变量。

对象

类似数组,使用 Object() 可以创建一个对象:

var someone = Object();

对象使用点号来访问或更新对应属性:

someone.name = "Paul";
someone.email = "admin@js.org";
someone.age = 36;

创建对象还有一种更简洁的花括号语法:

var lemon = { color: "yellow", weight: 0.2, isfruit: true };

对象属性的值也可以是数组或另一个对象。

包含在对象里的数据可以通过以下两种形式访问:

JavaScript里,属性和方法都使用对象的点运算符 . 来访问。

如果要为对象创建一个新的实例,需要使用 new 关键字,如下所示:

var arr = new Array();
arr.length;  // get property

JavaScript里提供了一系列预先定义的对象,称为内建对象(native object),例如 ArrayMathDate 。以下使用 Date 对象来获取当前日期:

var now = new Date();
now.getDate() // day-of-the-month

除了内建对象,由浏览器提供的预定义对象称为宿主对象(host object)

宿主对象包括 Formdocument 等,可以通过它们来获取网页上表单和整个文档元素的信息。