1、第五章 javascript脚本语言,JavaScript是由网景公司(Netscape)发明出来的一种专门用于网页的简单编程语言。从编程语言的角度上说，JavaScript是一种基于对象(object Based)和事件驱动(Event Driver)的脚本语言。正是这种性质实现了网页和用户之间的一种实时的、动态的、交互的关系，使网页包含更多活跃的元素和更加精彩的内容。,本章内容：,5.1 客户端脚本5.2 JavaScript语言基础5.3 使用JavaScript内部对象,5.1客户端脚本脚本（Script）实际上就是一段程序，用来完成某些特殊的功能。脚本既可以在服务器端运行，称为服务器
2、端脚本：例如 ASP、JSP、PHP等；也可以直接在浏览器端运行，称为客户端脚本例如： JavaScript、VBScript等。,本节重点学习：使用SCRIPT标记符插入脚本通过链接文件引用外部脚本文件,实例5-1 使用SCRIPT标记符插入脚本,一、本例要求和目的 理解客户端脚本的作用，熟悉在网页中使用SCRIPT标记符插入脚本程序的方法。二、操作步骤1打开记事本，输入以下源代码：案例5-1document.write(“Hello World!“),图5-1使用SCRIPT标记符插入脚本,2保存源文件名为example5-1.htm，关闭记事本程序。 3. 在IE中打开这个网页，你会发现
3、页面中有一句话“Hello!World!”,如图5-1所示。,三、本实例知识点1、基本概念脚本语言：用来编写脚本程序的语言。目前，Javascript和VBscript是两种使用最广泛的脚本语言。VBscript仅被nternet Explorer所支持，而Javascript则被几乎所有的浏览器支持，所以已经成为客户端脚本的标准。本书以下均以Javascript为例。,2在网页使用SCRIPT标记符插入脚本程序的方法在网页中最常用的一种插入脚本的方式是使用Script标记符，方法是：把脚本标记符置于网页上的Head部分或Body部分，然后在其中加入脚本程序。尽量可以在网页上的多个位置使用Sc
4、ript标记符，但最好还是将脚本放在Head部分，以确保容易维护。当然，由于某些脚本的作用是在网页特定部分显示特殊效果，此时的脚本就会位于Body中的特定位置。使用Script标记符时，一般同时用language属性和type属性指出脚本的类型（未简便起见，也可以只使用其中的一种），以适应不同的浏览器。如果要使用Javascript编写脚本，语法如下：,。,实例5-2通过链接文件引用外部脚本文件,一、本例要求和目的 掌握通过链接文件引用外部脚本文件的方法和步骤。 二、操作步骤 1. 在记事本中输入如下源代码，然后将文件保存为test.js。 document.write(“Hello! Wor
5、ld!“),2. 打开新的记事本文件，输入以下源代码，然后将文件保存为example5-2.html。在浏览器中浏览，结果如图5-2所示。案例5-23分别比较example5-1.html和example5-2.html源代码与网页效果。,图5-2通过链接文件引用外部脚本文件,三、本案例知识点通过链接文件引用外部脚本文件的方法要引用外部脚本文件，应使用SCRIPT标记符的Src属性来指定外部脚本文件的Url。通过使用这种方式，可以使脚本得到复用，从而较低了维护的工作量。在本书第七章的个人网站案例“淡蓝的天空”就使用了这种方法来使用外部脚本文件。如果同一段脚本可以在若干个Web页中使用，则没有必
6、要在多处维护相同的冗余代码，此时可以将脚本放在单独的一个文件里，然后再从任何需要该文件的Web页中引用该文件。document.write的作用是在页面中添加网页元素。Document的详细用法我们会在案例5-9讲到。 注意：如果使用SCRIPT标记符的Src属性，则Web浏览器只使用在外部文件中的脚本，并忽略任何位于SCRIPT标记符之间的脚本。,5.2 JavaScript语言基础,本节重点学习：JavaScript的变量、运算符和表达式 条件语句的使用 循环语句的使用 JavaScript函数,实例5-3 JavaScript的变量、运算符和表达式,一、本例要求和目的 掌握JavaScr
7、ipt的四种数据类型。 掌握在JavaScript中变量的特点和定义方法。 了解JavaScript常用的运算符和表达式。 二、操作步骤1. 打开记事本，输入以下源代码：案例5-3,“); document.write(myvar2+“); document.write(myvar3+“); document.write(myvar4+“); document.write(myvar5); /,图5-3 JavaScript的变量、运算符和表达式,保存文件名为example5-3.html，在IE中浏览该网页，结果如图5-3所示：,三、本案例知识点JavaScript的数据类型:JavaScr
8、ipt有四种基本的数据类型，它们分别为： 数值类型：包括整数和实数。 字符串类型：这个类型的数据需要用英文的双引号(“) 或者单引号()括起来。 布尔类型：JavaScript只分True或者False。 空值类型：即null。虽然有四种数据类型，但是JavaScript却使用的是弱类型定义，也就是说，在定义一个常量或者变量的时候不需要指明它的数据类型，常量或者变量会自动根据所赋的值来选择最合适的数据类型，这一点大大简化了JavaScript的编程。,JavaScript的变量: 变量的主要功能就是用来存储数据。在JavaScript中，变量通常使用var关键字来声明。同其他编程语言一样，Ja
9、vaScript对变量的命名也有一定的限制，它首先要求变量名必须以字母开头，中间可以是任何字母、数字和下划线的组合。其次变量名不能使用JavaScript语言本身所使用的关键字，比如var、JavaScript、document等。,3JavaScript的运算符：JavaScript中有六种运算符，包括算术运算符、赋值运算符、逻辑运算符、比较运算符、字符串运算符和位运算符。只要学过任何一门计算机编程语言的人都应该对这些运算符比较熟悉，下面还是简单罗列一下。 算术运算符包括：加(+)、减(-)、乘(*)、除(/)、取模(%)、递增(+)、递减(-)及负数(-)。 赋值运算符包括：等于(=)、加
10、等于(+=)、减等于(-=)、乘等于(*=)、除等于(/=)、模等于(%=)、左移位等于(=)等。, 逻辑运算符包括：与(&)、或(|)、非 (!)三个运算符。 比较运算符包括：等等于(=)、不等于(!=)、大于()、小于(=)和小于等于()和右移位左边补零()。,实例5-4 条件语句的使用,一. 本例要求和目的 掌握JavaScript语言中的三种基本的条件语句的格式 会利用这三种基本条件语句来编写脚本。二. 操作步骤 在记事本中输入如下源代码，案例5-4,图5-4条件语句的使用,并保存文件为example5-4.html，在IE中浏览网页，结果如图5-4所示。,三、本案例知识点条件语句可以
11、使程序按照预先指定的条件进行判断，从而选择执行任务。在JavaScript中包括if语句、if else语句以及switch语句等三种条件语句。三种条件语句的格式:1）if语句是最基本的条件语句，它的格式为：if(判断表达式) 执行语句2）if else语句是if语句的扩展，它的格式为：if(判断表达式) 执行语句1；else执行语句2；,3）如果需要对同一个表达式进行多次判断，那么就可以使用switch语句，其格式如下：switch(判断表达式) case 值1：执行语句1;break;case 值2:执行语句2;break;default:执行语句； ,实例5-5 循环语句的使用,一、本例
12、要求和目的掌握JavaScript语言中的三种基本循环语句的格式。会利用这三种基本循环语句来编写脚本。 二、操作步骤 在记事本中输入如下源代码案例5-5, 此处是 “+i+“ 级标题。“); / 并保存文件名为example5-5.html，在IE中浏览该网页，结果如图5-5所示。,图5-5循环语句的使用,三、本案例知识点循环语句用于在一定条件下重复执行某段代码。在JavaScript中提供了三种基本循环语句：for语句、while语句以及do while语句，同时还提供了break语句用于跳出循环，continue语句用于终止当前循环并继续执行下一轮循环。 For语句的格式如下：For(计数
13、器变量的初始值;判断循环结束的条件表达式;计数器变量的变化)执行语句；,while语句是一种基本的循环语句，格式如下：while(判断循环结束的条件表达式)执行语句; Do while语句是while语句的变体，格式如下：Do 执行语句；,while(判断循环结束的条件表达式)break语句提供无条件跳出循环结构或switch语句的功能。在多数情况下，break语句都是单独使用的。continue语句的作用是终止当前当次循环，跳转到循环的开始除继续下一轮循环。,实例5-6 JavaScript函数 一、本例要求和目的 掌握JavaScript定义函数的格式。 掌握函数的返回值的概念。 二、操作
14、步骤1. 打开记事本，输入以下源代码：案例5-6 ,document.write(“3 + 5 = “+add(3,5); /,图5-6 JavaScript函数,保存文件名为example5-6.html，在IE中浏览该文件，结果如图5-6所示：,三、本案例知识点在JavaScript中，函数的定义通常放在HTML文档头中，但也可以放在其它位置。但最好放在文档头，这样就可以确保先定义后使用。定义函数的格式为：function 函数名(参数1，参数2，)执行语句如果函数需要返回值，那么可以使用return语句，将需要返回的值放在return之后。另外，函数的返回值也可以直接赋予变量或用于表达式
15、。,5.3 使用JavaScript内部对象,本节重点学习：数组对象的定义和使用 定义和使用Date对象 document对象的使用,实例5-7数组对象的定义和使用,一、本例要求和目的理解对象的概念掌握构造数组对象的函数 二、操作步骤 在记事本中输入以下源代码案例5-7,“) document.write(“产品数目单价“),for(i=0;i“) for(j=0;j“+orderij+“) document.write(“”) document.write(“) /,图5-7数组对象的定义和使用,保存文件为example5-7.html，并在IE中打开，结果如图5-7所示：,三、本案例知识点
16、 1. JavaScript是一种面向对象的语言。所谓对象，就是指客观世界中存在地特定实体。对象包括两个要素：属性和方法。 2. 在JavaScript中可以操作的对象通常包括两种类型：JavaScript对象和浏览器对象。JavaScript内部对象包括一些常用的通用对象，例如数组对象Array、日期对象Date、数学对象Math等。 3. 数组对象又称为Array对象，用于实现编出那个语言中最常见的一种数据结构数组。Array对象的构造函数有三种，分别用不同的方式构造一个数组对象： 1. var 数组名=new Array() 2. var 数组名=new Array(数组长度) 3. v
17、ar 数组名=new(数组元素1,数组元素2,数组元素n),注意： 使用第一种构造函数创建出的数组长度为0，当具体为数组指定数组元素时，JavaScript自动延伸数组的长度，本实例中就是利用第一种构造函数创建了数组order。 使用第二种构造函数时应使用数组的长度作为参数，此时创建出一个指定长度的数组，但并没有指定具体的元素。同样，当具体指定数组元素时，数组的长度也可以动态改变。 使用第三种构造函数时直接使用数组元素作为参数，此时创建出一个长度为n的数组，同时数组元素按照指定的顺序赋值。在构造函数使用数组元素作为参数时，参数之间必须使用逗号分隔开，并且不允许省略任何参数。,一、本例要求和目的
18、掌握构造Date对象的函数掌握Date对象常用的方法 二、操作步骤 在记事本中输入以下源代码案例5-8今天是:,实例5-8 定义和使用Date对象, mytime=new Date(); mydate=mytime.getDate(); mymonth=mytime.getMonth() + 1 ; myyear=mytime.getYear(); document.write(myyear+“年“+mymonth+“月“+mydate+“日 “); weekday=mytime.getDay(); myArray=new Array(“星期日“,“星期一“,“星期二“,“星期三“,“星期四“
19、,“星期五“,“星期六“); document.write(myArrayweekday),图5-8定义和使用Date对象,将文件保存为example5-8.html，并在IE中打开， 结果如图5-8所示：,三、本案例知识点 1.Date对象也就是日期对象，它可以表示从年到毫秒的所有时间和日期。如果在创建Date对象时就给定了参数，则新参数就表示指定的日期和时间；否则新对象就被设置为当前日期。 2.创建日期对象可以使用以下四种构造函数种的一种： var 变量名=new Date() var 变量名=new Date(毫秒数) var 变量名=new Date(字符串) var 变量名=new
20、Date(年，月，日，小时，分钟，秒，毫秒)第一种构造函数使用当前时间和日期创建Date实例；第二种构造函数使用从GMT(格林威治平均时间)时间1970年1月1日凌晨到期望日期和时间之间的毫秒来创建Date实例；第三种,构造函数使用特定的表示期望日期和时间的字符传来创建Date实例；第四种构造函数使用年、月、日、小时、分钟、秒、毫秒的形式创建Date实例，其中年和月是必须的参数，其他参数可选，注意在指定月份是，0表示1月，依此类推，11表示12月。3.Date对象的常用方法如下： getYear():返回日期对象中的年份，用2位或4位数字表示；,getMonth()：返回表示当前日期中月的整数
21、（0-11）； getDate():返回一个整数，表示一月中的某一天（1-31）； getDay():返回一个整数，表示星期中的某一天（0-6，0表示星期天，6表示星期六）； getHours()：返回表示当前时间中的小时部分的整数（0-23）； getMinutes()：返回表示当前时间中的分钟部分的整数（0-59）； getSeconds():返回表示当前时间中的秒部分的整数（0-59）；,实例5-9 document对象的使用,一、本例要求和目的 掌握document对象的常用属性和方法。 二、操作步骤1. 打开记事本，输入以下源代码：案例5-9,document.bgColor=”cc
22、ddee”;/网页的 URL:“,document.location);document.write(“网页最后修改时间:“,document.lastModified);,/友情链接： 新浪 搜狐 TOM保存文件名为example5-9.html，在IE中 打开该文件，结果如图5-9所示：,图5-9 document对象的使用,三、本案例知识点 在浏览器的各对象中，文档对象Document是最为重要的对象，因为它代表的是整个网页，通过它才能访问网页中的其他对象，如锚点、超链接、表单等。因为所有的浏览器对象在网页加载时就已经自动创建，所以文档对象可以直接使用。 文档对象有很多属性，其中一部分对
23、应的就是BODY元素中的属性。下面将介绍其中最为常用的几个： linkColor：对应的是尚未访问过的超链接的颜色，也就是BODY元素的link属性。 vlinkColor：对应的是已访问过的超链接的颜色，也就是BODY元素的vlink属性。,3. alinkColor：对应的是正访问中的超链接的颜色，也就是BODY元素的alink属性。 links：也是一个数组，保存了网页中所有的超链接。 forms：也是一个数组，它保存的是网页中所有的表单。 images：保存了网页中所有的图片。 文档对象的方法我们在前面的例子中其实已经有所接触，即每次向网页输出文字时都使用了文档对象的write方法，除
24、这个之外，文档对象的方法还包括： write(string)：向网页中输出文字。 writeln(string)：向网页中输出一行文字。,anchors：是一个数组，它保存的是网页中所有的锚点。 lastModified：保存的是该网页最后的修改时间。 location：对应的是网页的URL，通过修改这个属性可以将浏览器跳转到另一个网页。 title：对应的是网页的标题，即TITLE元素。fgColor：对应的是文字的颜色，它和BODY元素的text属性是一样的。bgColor：对应的是网页的背景色，也就是BODY元素的bgcolor属性。,习题 选择题 .下面哪一种不是脚本语言( )。AJa
25、vaScript B.Java C.VBScript D.Jscript .( )元素用来在HTML中嵌入JavaScript。A.SCRIPT B.STYLE C.OBJECT D.LINK .JavaScript提供了很多内置的对象，其中用来实现日期和时间操作的对象是( ) 。A.Date B.Math C.String D.Array .JavaScript中具有打开或关闭浏览器窗口功能的对象是( )。A.document B.window C.navigator D.history .JavaScript支持很多类型的事件，如onCfick、onLoad、onFocus等，其中常用在按钮上的事件是( )。A.onLoad B.onFocus C.onClick D.onMouseOver,操作题 制作一个自动弹出公告窗口的网页，这个公告窗口里需要有一个关闭按钮，当点击这个按钮时会自动关闭这个公告窗口。 用JavaScript实现在不同的时间显示不同的问候语，这些问候语包括“早上好”、“中午好饭吃的不错吧？”、“下午好”、“这么晚了您还在加班？”、“现在已经凌晨了，应该休息了！”。 制作一个网页，该网页上有一个复选框和一副图片，当选中这个复选框时显示图片，当不选中时隐藏图片（提示：通过控制层的显示与隐藏来实现这个特效）。,
