JavaScript简介

<< Click to Display Table of Contents >>

当前位置:  制作可视化报告 > 脚本 

JavaScript简介

复制链接

本节的目的是提供JavaScript编程的简单概述,以及JavaScript如何嵌入到报告中。更多介绍请参阅JavaScript书籍或教程网站。

如果您已经熟悉JavaScript语言,则可以跳到视图,添加脚本,其中解释了您可以向其中添加脚本的不同区域。

1.面向对象的概念

JavaScript是面向对象的编程语言(OOP),OOP语言使我们有能力定义自己的对象和变量类型。它提供多种对象和方法,以及用户能够自定义的方法。可以认为JavaScript里面所有的东西几乎都是对象。

对象:对象只是一种特殊的数据。对象拥有属性和方法。

属性:属性是与对象有关的特征值,如名称,长度等。可以通过“get”或“set”这些属性以查看或更改对象的相应方面。

方法:方法指对象可以执行的行为(或者可以完成的功能)。

2.脚本语言的基础

JavaScript语言与通常的C++,Java等面向对象语言的语法类似,先创建类,类包含方法,然后再实例化对象来创建对象。

在JavaScript中,当我们用function关键字来创建一个函数时,实际上在JavaScript中,是按照对象来进行管理的,且我们可以动态的设置该对象的属性及方法等。

例如:

// 定义构造函数,并设定一个属性

function Person(name){

this.name = name;

}

// new 关键字实例化一个对象

var Tom = new Person("Tom");

3.注释和命名

JavaScript使用双斜线“//”开始单行注释,以“/**/”表示添加一个多行注释。

例如:

// 单行注释

/* 多行

注释 */

分号“;”作为语句分隔符。

var a_1 = 0;

JavaScript变量用于保存值或表达式。可以给变量起一个简短名称 。

例如:

x,或者更有描述性的名称,比如length。

JavaScript 变量也可以保存文本值。

例如:

carname="Volvo"。

JavaScript变量名称的规则:

变量对大小写敏感(y 和 Y 是两个不同的变量)。

变量必须以字母或下划线开始。

变量允许使用的字符包括:字母,数字,下划线。

4.声明和赋值

Javascript是一种弱类型的语言。这并不意味着它没有数据类型,只是变量或者Javascript对象属性不需要一个特定类型的值分配给它或者它始终使用相同的值,一个变量可以被分配任何值。该变量的类型是由当前赋值的类型来决定的。因此,一个局部变量在使用之前需要声明。使用关键字“var”来申明一个变量。

例如:

var a_1 = " 你好 ";

如果您所赋值的变量还未进行过声明 , 该变量会自动声明。

x=5;

carname="Volvo";

5.对象的类型和作用域

JavaScript是基于对象的。这意味着在JavaScript中的每一个值都是一个对象。

例如:

// 下面的语句是等价的

var c = a.concat(b);

c = a + b;

一般来说,可以创建并使用的对象有三种:本地对象、内置对象和宿主对象。

JavaScript把本地对象(native object)定义为“独立于宿主环境ECMAScript实现提供的对象”。简单来说,本地对象就是JavaScript定义的类(引用类型)。它们包括:Array,String,Number等。

内置对象(built-in object)定义为“由ECMAScript实现提供的、独立于宿主环境的所有对象,在ECMAScript程序开始执行时出现”。这意味着开发者不必明确实例化内置对象,它已被实例化了。

JavaScript 只定义了两个内置对象,即 Global 和 Math。

例如:

a = parseInt(1234);// parseInt 就是全局对象。

b = max(10, 12);// max 就是 Math 对象。

所有非本地对象都是宿主对象(host object),即由ECMAScript实现的宿主环境提供的对象。所有BOM和DOM对象都是宿主对象。

作用域指的是变量的适用范围。JavaScript 中只存在一种作用域-公用作用域。所有属性和方法默认都是公用的。

5.1Number 对象

Number对象是原始数值的包装对象。

例如:

var n = new Number(value);

var n = Number(value);

JavaScript会自动地把原始数值转化成Number对象,调用Number方法的既可以是Number对象,也可以是原始数字值。

var n = 123;

数字可以是十进制,八进制,十六进制格式,默认是十进制。如果它以“0x”开头就是十六进制格式,如果以“0”开始,就是八进制格式。

例如:

var n1 = 80;// 默认为十进制格式

var n2 = 0xff;// 十六进制格式

var n3 = 012;// 八进制格式

数字类型可以使用四则运算符 +, *,/,-。也可以使用递增递减运算符 ++,--。

5.2Boolean对象

Boolean对象表示两个值:“true”或“false”。当一个值用在条件语句中,为定义的值是被当做“false”的结果返回。如果要判断一个值是否定义过,就可以用如下语句:

if(value) {

// 执行语句

}

5.3String对象

String 对象用于处理文本(字符串)。字符串通常用单引号或双引号括起来。

例如:

var s1 = " 你好 ";

var s2 = " 你好 ";

可以用加运算符把字符串串联起来:

var s3 = s1 + " 吗 ?";

字符串还有很多常见的方法,包括 substring(), toLowerCase(), toUpperCase(), indexOf() 等等。

例如:

var s1 = "abc";

s1 = s1.toUpperCase(); // 转成 ABC

var idx = s1.indexOf("B"); // 返回 1

s1 = s1.substring(1, 2); // 返回 "B"

字符串内置了对正则表达的支持。match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。search()方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串。

例如:

var s2 = "abcdefg";

var reg = /bc/; // 创建正则表达式

var idx = s2.search(reg); // 返回 "bc" 的位置

5.4Date对象

Date对象用于处理日期和时间。 Date对象会自动把当前日期和时间保存为其初始值。

var d1 = new Date();

采用全局函数 formatDate() 可以将一个日期对象转化为一个字符串。

例如:

var s1 = formatDate(d1, "yyyy-MM-dd"); // 2010-02-21

5.5Array对象

Array对象用于在单个的变量中存储多个值。列表中的每个项目作为一个数组元素,包含在方括号([])中。当创建一个数组时,它被初始化使用指定的值作为其数组元素。其长度被设置为指定的元素的数目。

例如:

var arr1 = ["beijing", "shanghai", "tianjin"];

多维数组是一个数组的数组。

var arr2 = [[1, 2], [3, 4], [5, 6]];

6.条件语句

JavaScript中的条件语句用于完成不同条件下的行为。在您编写代码时,经常需要根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务。

If 语句

If...else 语句

If...else if...else 语句

例如:

if(x > 0) {

x = x + 1;

}

else {

x = x - 1;

}

7.for循环语句

在编写代码时,你常常希望反复执行同一段代码。我们可以使用循环来完成这个功能,这样就用不着重复地写若干行相同的代码。JavaScript中的循环用来将同一段代码执行指定的次数(或者当指定的条件为true时)。在脚本的运行次数已确定的情况下可以使用 for 循环。

for ( 变量 = 开始值 ; 变量 <= 结束值 ; 变量 = 变量 + 步进值 ) {

需执行的代码

}

8.while循环语句

JavaScript中的循环用来将同一段代码执行指定的次数(或者当指定的条件为 true 时)。while 循环用于在指定条件为true时循环执行代码。

while ( 变量 <= 结束值 ) {

需执行的代码

}

有两种特殊的语句可用在循环内部:break和continue。break命令可以终止循环的运行,然后继续执行循环之后的代码(如果循环之后有代码的话)。 continue 命令会终止当前的循环,然后从下一个值继续运行。

9.switch-case语句

JavaScript中的条件语句用于完成基于不同条件的行为。如果希望选择执行若干代码块中的一个,你可以使用switch语句。

例如:

var theDay = new Date().getDay();

switch (theDay) {

case 5:

s = "Finally Friday";

break

case 6:

s = "Super Saturday";

break

case 0:

s = "Sleepy Sunday";

break

default:

s = "Work day";

}

switch后面的(n)可以是表达式,也可以(并通常)是变量。表达式中的值会与case中的数字作比较,如果与某个case相匹配,那么其后的代码就会被执行。 break的作用是防止代码自动执行到下一行。

10.JavaScript函数

函数是由事件驱动或者当它被调用时执行的可重复使用的代码块。将脚本编写为函数,就可以避免页面载入时执行该脚本。

函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

例如:

function prod(a,b) {

if(a > 0 && b > 0) {

var x = a * b;

return x;

}

else {

return 0;

}

}

11.JavaScript变量的生存期

当您在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量,这是因为只有声明过变量的函数能够识别其中的每个变量。

如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束。