第1章 JavaScript基础

1.1  为什么学习JavaScript

JavaScript在网页制作中占有非常重要的地位。

1、 客户端表单验证

网站中经常见到的会员登录、注册，我们填写登录、注册信息时，如果某项信息格式输入错误，或没有输入内容，表单页面将及时给出错误提示。这些错误在提交到服务器前，由客户端提前进行验证，称为客户端表单验证。

2、 页面动态效果

在JavaScript中，可以编写响应鼠标单击等事件的代码，创建动态页面特效，从而高效地控制页面的内容。

虽然JavaScript可以实现许多动态效果，但要实现一个特效代码量大，而使用jQuery(JavaScript程序库)可以用极少的代码实现同样的效果。

3、 jQuery基础

JavaScript是学习jQuery的基础。

1.2 什么是JavaScript

JavaScript是一种描述性语言，也是一种基于对象(Object)和事件驱动(Event Driven)的，并具有安全性能的脚本语言。它与HTML(超文本标记语言)一起，在一个Web页面中链接多个对象，与Web客户实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减轻了服务器端的负担。

特点：

→ JavaScript主要用来在HTML页面中添加交互行为。

→ JavaScript是一种脚本语言，语法和Java类似。

→ JavaScript一般用来编写客户端的脚本。

→ JavaScript是一种解释性语言，边执行边解释。

ECMAScript是一种脚本语言的标准，JavaScript语言就是遵循ECMAScript标准的一种实现。

1.2.1 JavaScript的组成

一个完整的JavaScript由三个部分组成：ECMAScript、BOM、COM。

1、 ECMAScript标准

ECMAScript是一种开放的、被国际上广为接受的、标准的脚本语言规范。它不与任何具体的浏览器绑定。ECMAScript标准主要描述了以下内容：

→ 语法。

→ 变量和数据类型。

→ 运算符。

→ 逻辑控制语句。

→ 关键字、保留字。

→ 对象。

ECMAScript是一个描述，规定了脚本语言的所有属性、方法和对象的标准，因此在使用Web客户端脚本语言编码时一定要遵循ECMAScript标准。

2、 浏览器对象模型

浏览器对象模型(Browser Object Model,BOM)，提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互，如网上常见的弹出窗口、前进后退等功能都是浏览器对象控制的。

3、 文档对象模型

文档对象模型(Document Object Model,DOM)，是HTML文档对象模型(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档，如网上商城常见的随鼠标移动显示大的图片、弹出小提示等都是文档对象的功劳。

1.2.2 JavaScript的基本结构

JavaScript代码是用<script>标签嵌入HTML文档中。浏览器遇到<script>标签时，将逐行读取内容，直到遇到</script>结束标签为止。然后，浏览器将检查JavaScript语句的语法，如果有任何错误，则会在警告框中显示；如果没有错误，则浏览器将编译并执行语句。

1、 JavaScript的基本结构

JavaScript的基本结构如下：

<script type=”text/javascript”>

JavaScript语句;

</script>

其中type是<script>标签的属性，用于指定文本使用到的语言类别为text/javascript。

注意：有的网页中用默认“text/javascript”，这种写法是正确的，因为HTML5中可省略type属性，HTML5默认为text/javascript。

document.write()用来向页面输出可以包含HTML标签的内容。

经验：

→ 如果不使用<script>标签，浏览器就会将document.write(“<h1>Hello,JavaScript</h1>”)当作纯文本来处理，也就是说会把这条命令本身写到页面上。

→ <script>…</script>的位置并不是固定的，可以包含在文档的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可。

2、 JavaScript的执行原理

在JavaScript的执行过程中，浏览器客户端与应用服务器端采用请求/响应模式进行交互。

（1） 浏览器客户端向服务器端发送请求：一个用户在浏览器的地址栏中输入要访问的页面（页面中包含JavaScript程序）。

（2） 数据处理：服务器端将某个包含JavaScript的页面进行处理。

（3） 发送响应：服务器端将含有JavaScript的HTML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上而下逐条解析HTML标签和JavaScript，并将页面效果呈现给用户。

使用客户端脚本的好处：

（1） 包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信。

（2） JavaScript程序由浏览器客户端执行，而不是由服务器端执行，因此能减轻服务器端的压力。

1.2.3 在网页中引用JavaScript的方式

JavaScript作为客户端程序，嵌入网页时有以下三种方式。

→ 内部JavaScript文件。

→ 使用外部JavaScript文件。

→ 直接在HTML标签中。

1、 内部JavaScript文件

直接使用<script>标签将JavaScript代码加入HTML文档中。这是最常用的方式，但这种方式通常适用于JavaScript代码较少，并且网站中的每个页面使用的JavaScript代码均不相同的情况。

2、 使用外部JavaScript文件

外部JavaScript文件是将JavaScript代码写入一个外部文件中，以*.js为扩展名保存，然后将该文件指定给<script>标签中的“src”属性，这样就可以使用这个外部文件了。这种方式适用于在若干个页面实现相同的JavaScript效果。

无论是使用<script>标签在网页中编写JavaScript代码，还是引用js文件，浏览器都会按照<script>标签在页面中出现的先后顺序对它们依次进行解析。因此如果将<script>标签放在<head>中，那么意味着必须等到全部JavaScript代码被下载、解析和执行完成之后，才开始呈现网页内容，这样对于许多包含JavaScript代码的页面来说，会导致浏览器呈现页面时出现明显的延迟，而延迟期间浏览器窗口将一片空白。为了避免这个问题，现在许多网页开发者会把<script>标签放在<body>中，并且放在页面内容的后面。

注意：外部文件不能包含<script>标签，通常将扩展名为.js的文件放到网站目录中单独存放脚本的子目录中（一般为js），这样容易管理和维护。

3、 直接在HTML标签中

有时需要在页面中加入简短的JavaScript代码实现一个简单的页面效果，如单击按钮时弹出一个对话框等，这样通常会在按钮事件中加入JavaScript处理程序。

<input name=”btn” type=”button” value=”弹出消息框” onclick=”javascript:alert(‘欢迎你’);”/>

onclick是单击的事件处理程序，当用户单击按钮时，就会执行执行“javascript:”后面的JavaScript命令，alert()是一个函数，类似Java中的方法，作用是向页面弹出一个对话框。

这三种方式的应用场合。

→ 内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面。

→ 外部js文件则适用于代码较多，重复应用于多个页面。

→ 直接在标签中写JavaScript则适合于极少代码，仅用于当前标签，但是这种方式增加了HTML代码，因此这种方式在实际开发中应用较少。

1.3 JavaScript核心语法

1.3.1 变量的声明和赋值

JavaScript是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定。

在JavaScript中，变量是使用关键字var声明的。

语法：

var 合法的变量名;

其中var是声明变量所使用的关键字；“合法的变量名”是遵循JavaScript变量命名规则的变量名。JavaScript变量命名规则与Java变量命名规则相同，即可以由数字、字母、下划线和“$”符号组成，但首字母不能是数字，并且不能使用关键字命名。可以在声明变量的同时为变量赋值，这称为变量的初始化；也可以在稍后的脚本中为变量赋值。

声明变量的同时为变量赋值，例如：

var width=20;//在声明变量width的同时，将数值20赋给了变量width

var x,y,z=10;//在一行代码中声明多个变量时，各变量之间用逗号分隔

JavaScript区分大小写，所以大小写不同的变量名表示不同的变量。另外，由于JavaScript是一种弱类型语言，因此允许不声明变量而直接使用，系统将会自动声明该变量，例如：

x=68;//没有声明变量x，直接使用

规范

→ 千万要注意JavaScript区分大小写，特别是变量的命名、语句关键字等，这种错误有时很难查找。

→ 变量可以不经过声明而直接使用，但这种方法很容易出错，也很难查找排错，因此不推荐使用，在使用变量之前，请先声明后使用，这是良好的编程习惯。

1.3.2 数据类型

常用的基本数据类型如下。

→ undefined（未定义类型）。

→ null（空类型）。

→ number（数值类型）。

→ String（字符串类型）。

→ boolean（布尔类型）。

1、 typeof

ECMAScript提供了typeof运算符来判断一个值或变量究竟属于哪种数据类型。

语法：

typeof(变量或值)

其返回结果有以下几种。

→ undefined:如果变量是undefined类型的，则返回undefined类型的结果。

→ number:如果变量是number类型的，则返回number类型的结果。

→ string:如果变量是string类型的，则返回string类型的结果。

→ boolean:如果变量是boolean类型的，则返回boolean类型的结果。

→ object:如果变量是null类型的，或者变量是一种引用类型，如对象、函数、数组，则返回object类型的结果。

2、 undefined类型

undefined类型只有一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined。例如：

var width;

这行代码声明了变量width，且此变量没有初始值，将被赋予值undefined。

3、 null类型

只有一个值的类型是null，是一个表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值。值undefined实际上是值null派生来的，因此JavaScript把它们定义为相等的，例如：

alert(null==undefined);//返回值为true

尽管这两个值相等，但它们的含义不同，undefined表示声明了变量但未对该变量赋值，null则表示对该变量赋予了一个空值。

4、 number类型

JavaScript中定义的最特殊的类型是number类型，这种类型既可以表示32位的整数，又可以表示64位的浮点数。下面的代码声明了存放整数值和浮点数值的变量。

var iNum=32;

var iNum=32.0;

整数也可以表示为八进制或十六进制，八进制首数字必须是0，其后的数字可以是任何八进制数字（0~7）；十六进制首数字也必须是0，后面是任意的十六进制数字和字母（0~9和A~F）。

例如：

var iNum=070;//070等于十进制的56

var iNum=0x1f;//0x1f等于十进制的31

对于非常大或非常小的数，可以用科学计数法表示浮点数，也是number类型。另外一个特殊值NaN(Not a Number)表示非数，它是number类型。例如：

typeof(NaN);//返回值为number

5、 String类型

1) 字符串定义

在JavaScript中，字符串是一组被引号（单引号或双引号）括起来的文本。例如：

var string1=”This is a string”;//定义了一个字符串string1

与Java不同，JavaScript不对“字符”或“字符串”加以区别，因此下面的语句也定义了一个字符串。

var oneChar=”a”;//定义了只有一个字符“a”的字符串

2) 字符的属性与方法

JavaScript语言中的String也是一种对象。它也有一个length属性，表示字符串的长度（包括空格等），调用length的语法格式如下。

语法：

字符串对象.length;

var str=”this is JavaScript”;

var strLength=str.length;

JavaScript中，字符串对象的使用语法格式如下。

语法：

字符串对象.方法名();

String对象常用方法

方法

描述

indexOf()

查找某个指定的字符串在字符串中首次出现的位置

charAt(index)

返回在指定位置的字符

toLowerCase()

把字符串转化为小写

toUpperCase()

把字符串转化为大写

substring(index1,index2)

返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括index2对应的字符

split(str)

将字符串分割为字符串数组

最常用的是indexOf(str,index)方法，如果找到了指定字符串，则返回索引位置，否则返回-1。

index是可选的整数参数，表示从第几个字符开始查找。

6、 boolean类型

boolean类型数据被称为布尔型数据或逻辑型数据，boolean类型是ECMAScript中常用的类型之一，它只有两个值，true和false。

1.3.3 数组

同Java中的数组一样，JavaScript中的数组也是具有相同数据类型的一个或多个值的集合。数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从0开始。

JavaScript中的数组也需要先创建、赋值，再访问数组元素，并通过数组的一些方法和属性对数组元素进行处理。

1、 创建数组

语法：

var 数组名称=new Array(size);

其中，new是用来创建数组的关键字，Array表示数组的关键字，而size表示数据中可存放的元素总数，因此size用整数来表示。

2、 为数组元素赋值

在声明数组时，可以直接为数组元素赋值。

语法：

var fruit=new Array(“apple”,”orange”,”peach”,”banana”);

也可以分别为数组元素赋值。例如：

var fruit = new Array(4);

fruit[0]=”apple”;

fruit[1]=”orange”;

fruit[2]=”peach”;

fruit[3]=”banana”;

另外，除了Array()对象外，数组还可以方括号“[”和“]”来定义。例如：

var fruit = [“apple”,”orange”,”peach”,”banana”];

3、 访问数组元素

可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式：数组名[下标]。

4、 数组的常用属性和方法

数组的常用方法和属性

类别

名称

描述

属性

length

设置或返回数组中元素的数目

 方法

join()

把数组的所有元素放入一个字符串，通过一个分隔符进行分隔

sort()

对数组排序

push()

向数组末尾添加一个或多个元素，并返回新的长度

1) length

数组的length属性用于 返回数组中元素的个数，返回值为整型。如果在创建数组时就指定了数组的size值，那么无论数组元素中是否存储了实际数据，该数组的length值都是这个指定的长度值size。例如，var score=new Array(6);不管数组中的元素是否存储了实际数据，score.length的值总是6。

2) join()

join()方法通过一个指定的分隔符把数组元素放在一个字符串中。

语法：

join(分隔符);

1.3.4 运算符号

常用的运算符

类别

运算符号

算术运算符

+、-、*、/、%、==、--

比较运算符

>、<、>=、<=、==、!=、===、!==

逻辑运算符

&&、||、!

赋值运算符

=、+=、-=

其中，==表示等于，===表示恒等，!==表示不恒等，都是用于比较，但是==用于一般比较，===用于严格比较，==在比较时可以转换数据类型，===严格比较，只要数据类型不匹配就返回false。例如，”1”==true返回true，而”1”===true返回false。

1.3.5 逻辑控制语句

逻辑控制语句分为两类：条件结构和循环结构。

1、 条件结构

与Java一样，JavaScript的条件结构也分为if结构和switch结构。

1) if结构

基本语法格式如下。

语法：

if(表达式){

//JavaScript语句1;

}

else{

//JavaScript语句2;l

}

其中，当表达式的值为true时，执行JavaScript语句1，否则执行JavaScript语句2.

注意：如果if或else后只有一条语句，则可以省略大括号；如果if或else后有多行语句，则JavaScript语句必须括在大括号内。

2) switch结构

基本语法格式如下。

语法：

switch(表达式){

case 值1:

//JavaScript语句1;

break;

case 值2:

//JavaScript语句2;

break;

……

default:

//JavaScript语句n;

break;

}

与Java类似，当用于等值的多分支比较时，使用switch语句可以使程序的结构更加清晰。case表示条件判断，关键字break会使代码跳出switch语句，如果没有关键字break，代码就会继续执行，进入下一个case。关键字default说明表达式的结果不等于任何一种情况。

与Java中的switch语句不同的是，在JavaScript中的switch语句可以用于字符串。例如：

var weekday=”星期一”;

switch(weekday){

case “星期一”:

alert(“新的一周开始了”);

break;

case “星期五”:

alert(“明天就可以休息了”);

break;

default:

alert(“努力工作”);

break;

}

2、 循环结构

JavaScript中的循环结构分为for循环、while循环、do-while循环、for-in循环。

1) for循环语句

语法：

for(初始化;条件;增量或减量;){

//JavaScript语句;

}

其中，初始化参数告诉循环的开始值，必须赋予变量初值；条件用于判断循环是否终止，若满足条件，则继续执行循环体中的语句，否则跳出循环；增量或减量定义循环控制变量在每次循环时怎么变化。在三个条件之间，必须使用分号（;）隔开。

2) while循环语句

语法：

while(条件){

//JavaScript语句;

}

其特点是先判断后执行，当条件为真时，就执行JavaScript语句；当条件为假时，就退出循环。

3) do-while循环语句

语法：

do{

//JavaScript语句;

}while(条件);

该语句表示反复执行JavaScript语句，直到条件为假时才跳出循环。与while循环语句的区别在于，do-while循环语句先执行再判断。

4) for-in循环

JavaScript提供了for-in循环常用于对数组或者对象的属性进行循环操作。

语法：

for(变量 in 对象){

//JavaScript语句;

}

其中，“变量”为指定的变量，可以是数组元素，也可以是对象的属性。例如：

var fruit = [“apple”,”orange”,”peach”,”banana”];

for(var i in fruit){

document.write(fruit[i]+”<br/>”);

}

5) 中断循环

break:可以立即跳出整个循环。

continue:只是退出当前的循环，根据判断条件决定是否进行下一次循环。

1.3.6 注释

注释是描述部分程序功能或整个程序功能的一段说明性文字，注释不会被解释器执行，而是会被直接跳过。注释的功能是帮助开发人员阅读、理解、维护和调试程序。JavaScript语言的注释分为单行注释和多行注释两种。

单行注释，以//开始，以行末结束。

多行注释，以/*开始，以*/结束。

1.3.7 关键字和保留字

关键字标识了ECMAScript语句的开头和结尾，关键字是保留的，不能用作变量名或函数名。

JavaScript的关键字

关键字

关键字

关键字

关键字

关键字

break

case

catch

continue

default

delete

do

else

finally

for

function

if

in

instanceof

new

return

switch

this

throw

try

typeof

var

void

while

with

保留字在某种意义上是为将来的关键字而保留的单词，因此保留字不能被用作变量名或函数名。

JavaScript的保留字

保留字

保留字

保留字

保留字

保留字

abstract

boolean

byte

char

class

const

debugger

double

enum

export

extents

final

float

goto

implements

import

int

interface

long

native

package

private

protected

public

short

static

super

synshronized

throws

transient

volatile

 

 

 

 

 

1.3.8 常用的输入/输出

在网上冲浪时，页面上经常会弹出一些信息提示框，如注册时弹出提示输入信息的提示框，或者弹出一个等待用户输入数据的对话框等，这样的输入/输出在JavaScript中称为警告对话框(alert)和提示对话框(prompt)。

1、 警告(alert)

语法：

alert(“提示信息”);

该方法将弹出一个警告对话框，其内容可以是一个变量的值，也可以是一个表达式的值。

警告对话框是当前运行的网页弹出的，在对该对话框做出处理前，当前网页将不可用，后面的代码也不会被执行，只有对警告对话框进行处理后（单击“确定”按钮或直接关闭），当前网页才会继续显示后面的内容。

2、 提示(prompt)

prompt()方法会弹出一个提示对话框，等待用户输入一行数据。

语法：

prompt(“提示信息”,”输入框的默认信息”);

该方法的返回值也可以被引用或存储到变量中，例如：

var color=prompt(“请输入你喜欢的颜色”,”红色”);

prompt()方法的第一个参数值显示在对话框上，通常是一些提示信息；第二个参数出现在用户输入的文本框中，且被选中，作为默认值使用。如果省略第二个参数，则提示对话框的输入文本框中会出现“undefined”，可以将第二个参数的值设置为空字符串，例如：

var color=prompt(“请输入你喜欢的颜色”,””);

如果用户单击“取消”按钮或者直接关闭提示对话框，则该方法将返回null；如果用户单击“确定”按钮，则该方法将返回一个字符串型数据。

1.3.9 语法约定

1、 大小写的区分

JavaScript区分大小写，大写字母和小写字母是不能互相替换的，几个基本规则如下。

→ JavaScript的关键字，如for何if，永远都是小写的。

→ 内置对象，如Math何Date是以大写字母开头的。

→ 对象的名称通常是小写，如fruit。但其方法经常是多个单词的大小写混合，通常第一个字母是小写，之后单词的首字母是大写，如charAt()。

2、 变量、对象和函数的名称

当声明使用变量、对象或函数时，名称可以包括大写字母、小写字母、下划线和美元符号（$），但是必须以字母、下划线或美元符号（$）开头。

可以选择在变量名称中使用大写字母或小写字母，但必须牢记JavaScript是区分大小写的，count、Count、COUNT是三个不同的变量。

3、 分号

JavaScript允许开发者自行决定是否以分号结束一行代码，如果没有分号，JavaScript就将行代码的结尾看作该语句的结尾。但不推荐使用，因为不属于规范的代码编写风格。

1.4 程序调试

在JavaScript中可以使用Chrome调试工具和alert()方法两种方式调试程序。

1.4.1 Chrome开发人员工具

1、 语法错误的排除

使用Chrome浏览器打开HTML文件，按F12键进入脚本调试界面，表示开启运行时错误自动暂停功能，准确定位出错脚本的位置；自动暂停按钮下方有一个选项，Pause On Caught Exception，如果选中，则即使发生运行时异常代码在try/catch范围内，Chrome开发者工具也能够在错误处停住。

Chrome的开发者工具常用八个大模块，每个模块及其主要功能如下。

→ Elements：用于查看和编辑当前页面中的HTML和CSS元素。

→ Console：用于显示脚本中所输出的调试信息，或运行测试脚本等。

→ Sources：用于查看和调试当前页面所加载的脚本的源文件。

→ Network：用于查看HTTP请求的详细信息，如请求头、响应头及返回内容等。

→ TimeLine：用于查看脚本执行时间，页面元素渲染时间等信息。

→ Profiles：用于查看CPU执行时间与内存占用等信息。

→ Resource：用于查看当前页面所请求的资源文件，如HTML、CSS样式文件等。

→ Audits：用于优化前端页面，加速网页加载速度等。

2、 逻辑错误的排除

1) 确定设置断点的位置

 

停止断点调试。

单步调试，不进入函数体内部。

单步调试，进入函数体内部。

跳出当前函数。

禁用所有的断点，不做任何调试。

2) 单步调试

3) 修改错误

1.4.2 alert()方法

通过alert()方法将不确定的数据以信息框的方式展示，以此来判断出现错误的位置。

1.5 JavaScript常用语法——函数

在JavaScript中，函数类似于Java中的方法，是执行特定功能的JavaScript代码块。但是JavaScript中的函数使用更简单，不用定义函数属于哪个类，因此调用时不需要用“对象名.方法名()”的方式，直接使用函数名称来调用函数即可。

JavaScript中的函数有两种，一种是JavaScript自带的系统函数，另一种是用户自行创建的自定义函数。

1.5.1 常用系统函数

JavaScript提供了两种把非数字的原始值转换成数字的函数，即parseInt()和parseFloat()。另外，它还提供了一个检查是否是非数字的函数isNaN()，通常用于逻辑判断。

1、 parseInt()

parseInt()函数可解析一个字符串，并返回一个整数。

语法：

parseInt(“字符串”)

从位置0开始查看每个字符，若0处就不是有效数字，则返回

NaN，若0处是有效数字，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换为整数。

2、 parseFloat()

parseFloat ()函数可解析一个字符串，并返回一个浮点数。

语法：

parseFloat(“字符串”)

从位置0开始查看每个字符，若0处就不是有效数字，则返回

NaN，若0处是有效数字，直到找到第一个非有效的字符为止，然后把该字符之前的字符串转换为浮点数。

对于这个函数来说，第一个出现的小数点是有效字符，如果有两个小数点，那么第二个小数点被看作无效。

3、 isNaN()

isNaN()函数用于检查其参数是否是非数字。

语法：

isNaN(x)

如果x是特殊的非数字值，则返回值是true，否则返回false。

经验：isNaN()函数通常用于检测parseInt()和parseFloat()的结果，以判断它们表示的是否是合法的数字，也可以用isNaN()函数来检测算数是否错误，如用0作为除数的情况。

1.5.2 自定义函数

JavaScript需要先定义函数，然后才能调用函数。

1、 定义函数

在JavaScript中，自定义函数由关键字function、函数名、一组参数及置于括号中的待执行的JavaScript语句组成。

语法：

function 函数名(参数1，参数2，参数3，…){

//JavaScript语句;

[return返回值]

}

→ function是定义函数的关键字，必须有。

→ 参数1、参数2等是函数的参数。因为JavaScript本身是弱类型，所以它的参数也没有类型检查和类型限定。函数中的函数是可选的，根据函数是否带参数，可分为不带参数的无参函数和有参函数。例如，无参函数：

function 函数名{

//JavaScript语句;

}

→ “{”和“}”定义了函数的开始和结束。

→ return语句用来规定函数返回的值。

2、 调用函数

要执行一个函数，必须先调用这个函数，当调用函数时，必须指定函数名及其后面的参数（如果有参数）。函数的调用一般和元素的事件结合使用。

语法：

事件名=”函数名()”;

无参函数例：

<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study()"/>
<script type="text/javascript">
    function study(){
        for(var i=0;i<5;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
</script>

study()是创建的无参函数，onclick表示按钮的单击事件，当单击按钮时调用函数study()。

有参函数例：

<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数：',''))"/>
<script type="text/javascript">
    function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习JavaScript</h4>");
        }
    }
</script>

count表示传递的参数，不需要定义数据类型，将prompt()方法返回的值作为参数传递给函数study(count)。

1.5.3 变量的作用域

与Java中的变量一样，在JavaScript中，根据变量作用范围不同，可分为全局变量和局部变量。

JavaScript中的全局变量，是在所有函数之外的脚本中声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码，以及其后的<script>与</script>标签中的代码。

JavaScript中的局部变量，是在函数内声明的变量，只有在该函数中且位于该变量之后的代码中可以使用这个变量。

1.5.4 事件

事件是使用JavaScript实现网页特效的灵魂内容，当与浏览器进行交互的时候浏览器就会触发各种事件，来完成网页中的各种特效。

常见的事件

名称

说明

onload

一个页面或一副图像完成加载

onclick

鼠标单击某个对象

onmouseover

鼠标指针移到某元素上

onkeydown

某个键盘按键被按下

onchange

域的内容被改变

 

 

补充：

1、数组。默认用英文逗号分隔。

<script type="text/javascript">
    var arr = ["apple","orange","banana"];
    document.write(arr);
</script>

运行结果：

 

2、数组。不会出现数组越界，与java中集合类似。

3、document.write(“使用\”-\”重新连接后”);

双引号中用双引号需要用“\”。

posted @ 2018-12-21 16:17  人生巅峰  阅读(387)  评论(0)    收藏  举报