JavaScript介绍

JavaScript是Web中一种功能强大的脚本语言，被设计为向 HTML 页面增加交互性，常用来为网页添加各式各样的动态功能， 它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。

1．JavaScript的引入

在HTML文档中，较为常用的引入JavaScript的方式有两种，一种是在HTML文档中直接嵌入JavaScript脚本，称为内嵌式；
另一种是链接外部JavaScript脚本文件，称为外链式。 具体介绍如下：

（1）内嵌式

在HTML文档中，通过<script></script>标签及其相关属性可以引入JavaScript代码。当浏览器读取到<script>标签时，就会解释执行其中的脚本。JavaScript的内嵌式的使用方式如下：

<!DOCTYPE html >
<html>
<head>
<title>内嵌式</title>
    <script type="text/javascript">
       document.write("欢迎来到召唤师峡谷");
    </script>
</head>
<body>……</body>
</html>

type属性用来指定HTML文档引用的脚本语言类型，当type属性的值为text/javascript时，表示<script></script>元素中包含的是JavaScript脚本。type="text/javascript"是可以省略。

（2）外链式

当脚本代码比较复杂或者同一段代码需要被多个网页文件使用时，可以将这些脚本代码放置在一个扩展名为.js的文件中，然后通过外链式引入该js文件。在Web页面中使用外链式引入JavaScript文件的方式如下：

<!DOCTYPE html >
<html>
<head>
    <script type="text/javascript" src="demo01.js"></script>
</head>
<body>……</body>
</html>

2．数据类型

JavaScript中的几种常见数据类型如表所示。

javascript 原生幻灯片 ppt javascript_javascript

3．变量

在JavaScript中，使用 var 命令声明变量，由于JavaScript是一种弱类型语言， 所以在声明变量时，不需要指定变量的类型，变量的类型将根据变量的赋值来确定，其语法格式如下所示。

var number=21;
var str="我爱Java";

4．运算符

运算符是程序执行特定算术或操作的符号，用于执行程序代码运算。JavaScript中的运算符主要包括算术运算符、比较运算符、赋值运算符、逻辑运算符和条件运算符5种，具体介绍如下。

（1）算术运算符

算术运算符用于连接运算表达式，主要包括加（+）、减（-）、乘（*）、除（/）、取模（%）、自增（++）、自减（–） 等运算符。

（2）比较运算符

比较运算符在逻辑语句中使用，用于判断变量或值是否相等。返回布尔类型值true或false，常用的比较运算符如表所示。

javascript 原生幻灯片 ppt javascript_javascript_02

（3）逻辑运算符

逻辑运算符是根据表达式的值来返回真值或假值，常用的逻辑运算符如表所示。

（4）赋值运算符

最基本的赋值运算符是等于号“=”，用于对变量进行赋值。其他运算符可以和赋值运算符联合使用，构成组合赋值运算符。如表所示。

（5）条件运算符

条件运算符是JavaScript中的一种特殊的三目运算符，它与Java中的三目运算符的使用类似，其语法格式如下。

操作数?结果1:结果2;

如果操作数的值为true，则整个表达式的结果为“结果1”，否则为“结果2”。

5．条件语句if

（1）单向判断语句

if(执行条件){
执行语句
}

（2）双向判断语句

if(执行条件){
语句1;
}else{
语句2;
}

（3）多向判断语句

if(执行条件1){
执行语句1;
}else if(执行条件2){
执行语句2;
}else if(执行条件3){
执行语句3;
}

1．函数的定义及调用

在JavaScript中，定义函数是通过function语句实现的。其语法格式如下：

function functionName(parameter1,parameter2,......){
statements;
[return expression;]
}
  • functionName是必选项，用于指定函数名，函数名必须是唯一的，并且区分大小写；
  • parameter1,parameter2,…是可选项，代表参数列表，参数间使用逗号进行分隔；
  • statements是必选项，代表用于实现函数功能的语句；
  • return expression是可选项，用于返回函数值。

2．事件处理

采用事件驱动是JavaScript语言的一个最基本的特征，所谓的事件是指用户在访问页面时执行的操作。当浏览器探测到一个事件时，比如，单击鼠标或按键，它可以触发与这个事件相关联的事件处理程序。

事件处理的过程通常分为三步：发生事件、启动事件处理程序和事件处理程序作出反应。

事件处理程序可以是任意JavaScript语句，但通常使用特定的自定义函数（Function）来对事件进行处理。

除onclick事件外，JavaScript中还有很多常用的事件类型，如下表所示。

javascript 原生幻灯片 ppt javascript_运算符_03

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; harset=utf-8" />
<title>事件处理</title>
</head>
<body>
 <input type="button" name="btn" value="点我" onclick="alert('Hello');"/>
</body>
</html>

3．常用对象

（1）window对象

window对象表示整个浏览器窗口，它处于对象层次的顶端，可用于获取浏览器窗口的大小、位置，或设置定时器等。在使用时，JavaScript允许省略window对象的名称。

window对象常用的属性和方法如表所示。

javascript 原生幻灯片 ppt javascript_事件处理_04

（2）Date对象

Date对象是一个有关日期和时间的对象。它具有动态性，必须使用new关键字创建一个实例，语法如下所示。

var MyDate=new date();

Date对象没有提供直接访问的属性，只有获取和设置日期的方法，如表所示。

javascript 原生幻灯片 ppt javascript_事件处理_05

（3）String对象

String对象是JavaScript提供的字符串处理对象，创建对象实例后才能引用，它提供了对字符串进行处理的属性和方法，具体如表所示：

javascript 原生幻灯片 ppt javascript_事件处理_06