第1章 JavaScript概述 1.1 JavaScript简介 网景公司(NetScape)在1995 年发布了名为JavaScript的脚本语言。最初的JavaScript 的作用是减轻服务器压力,提高用户体验。在早期的HTML 中,要验证一个用户的账号或 密码是否正确(这里指格式的正确性,比如不能少于10 位), 都需要发送到服务器去请求验 证。这对于服务器来说是一项没有必要的开销,而用户也增加了等待和刷新的时间。 JavaScript的出现解决了此类问题,目前所有的网站都使用JavaScript来进行此类页面的 验证。 JavaScript是一种基于对象和事件驱动时、具有安全性能的直译式脚本语言,将它和 HTML 结合,可以开发出交互式的Web页面。JavaScript不仅可以直接应用在HTML 页 面中实现动态效果,也可以应用在服务器端完成访问数据库及读取文件系统等操作。 JavaScript具有如下特点。 1. 直译式脚本语言 JavaScript是一种直译式脚本语言,它采用小程序段的方式实现编程。和其他脚本语 言一样,JavaScript是一种解释性语言,提供了一个简易的开发过程。 JavaScript的基本结构形式与C、C++很相似,但它不像这些语言运行程序时需要先编 译,而是在运行程序过程中逐行地解释。JavaScript与HTML 结合在一起,方便了用户的 使用操作。 2. 基于对象和事件驱动的语言 JavaScript是一种基于对象和事件驱动的脚本语言,它能运用自己已经创建的对象。 3. 简单性 JavaScript的变量类型采用弱类型,并未使用严格的数据类型。 4. 安全性 JavaScript是一种安全性语言,它不允许访问本地的磁盘,不能将数据存入服务器,不 允许网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态的交互,从而可以有效 防止数据的丢失。 5. 动态性 JavaScript是动态的,它可以直接对用户输入的数据做出相应的响应,无须请求Web服 JavaScript程序设计基础与实例教程 务器程序。JavaScript对用户的响应采用事件驱动的方式来进行。在网页中执行了某种操 作所产生的动作,即称为事件,如按下鼠标左键,按下键盘回车键,移动窗口,选择菜单等都 可以视为事件。当事件发生后,可能会引起相应的事件响应。 6.跨平台性 JavaScript依赖于浏览器本身,与操作环境无关。只要能运行浏览器的计算机,就可以 正确执行JavaScript程序(这里所说的正确执行JavaScript程序是指没有任何的语法或语 句编写错误)。 1.2 一个简单的JavaScript网页 例1-1 在浏览器中显示“你好! 很高兴认识你。” <!--文档头部标题开始--> JavaScript 示例1-1 <!--文档头部标题内容--> //指定结束嵌入JavaScript 脚本 程序运行结果如图1-1所示。 图1-1 嵌入JavaScript示例1 1.超文本文件的结构 一个超文本文件以标签开始,用标签结束,其标记的内容分为头部 和主体两部分。头部以标签开始,用标签结束,在这两个标签之间是用 于描述网页属性的各种标记,例如title、style、link等标记。主体以标签开始,用 标签结束,在这两个标签之间是网页的主体内容。 2.HTML注释与JavaScript注释 (1)HTML 注释。 是HTML 注释,“”是注释的结束符号,在这两个符号之间的内容是注释。浏览器在加载HTML文件时 2 第1章JavaScript概述 3 会忽略其中的注释。 (2)JavaScript注释。JavaScript注释有两种方式:单行注释和多行注释。“//”表示单 行注释,从“//”开始到当前行的末尾都是注释的内容。“/*”和“*/”表示多行注释,从 “/*”开始到“*/结(”) 束,中间的内容都是注释。 无论是HTML 注释,还是JavaScript注释,被注释的内容都不会被执行,但是能够提高 程序的可读性。 1.3 JavaScript开发工具 开发JavaScript的工具有很多,如VisualStudio.Net2012 、记事本、Editplus、Sublime 等。因为JavaScript不是一种编译型语言,所以不需要特定的开发环境或特殊工具,运行 Jaacit也无须特殊的服务器软件。本书以Itrelrr11.ulme vSrpnentExpoe0浏览器和SbiText软件为背景对JavaScript开发进行介绍。 浏览器是运行JavaScript的载体,不管是通过文本方式还是通过伪协议直接在地址栏 输入JavaScript代码,都需要一个浏览器的支持。当JavaScript代码不需要获取互联网资 源的时候,浏览器可以做单机运行。 SublimeText是一款流行的代码编辑器软件,也是HTML 的文本编辑器,可运行在 Linux、Windows和MacOSX 上,也是许多程序员都喜欢使用的一款文本编辑器软件。 SublimeText运行界面如图1-2所示。 图1-2SublimeText运行界面 1.什么是脚本语言 4 脚本语言是一种为了缩短传统的编写—编译—链接—运行过程而创建的计算机编程语 言。虽然许多脚本语言都超越了计算机简单任务自动化的领域,成熟到可以编写精巧的程 序,但还是被称为脚本。几乎所有计算机系统的各个层次都有一种脚本语言,包括操作系统 层,如计算机游戏、网络应用程序、文字处理文档、网络软件等。在许多情况下,高级编程语 言和脚本语言之间互相交叉,二者之间没有明确的界限。一个脚本可以使得本来要用键盘 进行的交互式操作自动化。脚本主要由原本需要在命令行输入的命令组成,或在一个文本 编辑器中,用户可以使用脚本把一些常用的操作组合成一组序列,主要用来书写这种脚本的 语言叫作脚本语言。脚本语言通常都具有简单、易学、易用的特性。一个脚本通常是解释执 JavaScript程序设计基础与实例教程 行而非编译执行。 1.5 在网页中嵌入JavaScript代码 在网页中嵌入JavaScript代码有两种方式:一种是使用script标记在网页中直接嵌入 JavaScript代码;另一种是把JavaScript程序代码写在一个单独的文件中,然后通过script 标记把这个JavaScript文件引入网页中。 1.直接嵌入方式 在网页中直接嵌入JavaScript程序代码的格式如下。 其中的type属性表示脚本的类型,其值为text/javascript。JavaScript程序代码位于< script>和两个标签之间,这些代码由浏览器解释执行。 例1-2 在浏览器中显示“让我们一起来学习javascript吧!”,并弹出一个显示“欢迎欢 迎!”的对话框。 JavaScript 示例1-2 程序运行结果如图1-3所示。 例1-3 在浏览器中显示一个“单击显示内容”的按钮,单击该按钮弹出一个显示“你 好! 欢迎调用。”的对话框。 JavaScript 示例1-3 /*onclick 是单击事件,单击“单击显示内容”按钮调用hello_click()函数*/ 程序运行结果如图1-4所示。 图1-4 嵌入JavaScript示例3 说明:的位置并不是固定的,可以包含在...之 间,也可以包含在... 之间。若将JavaScript程序放在... 之间,使其在主页和其余部分代码之前装载,可使代码的功能更强大;若将 JavaScript程序放在...之间可以实现某些部分动态地创建文档。 2.使用外部JavaScript文件方式 在网页中引入JavaScript文件的格式如下。 5 JavaScript程序设计基础与实例教程 其中src属性表示要引入的JavaScript文件,其值为JavaScript文件的URL。这个 URL既可以是相对地址,也可以是绝对地址。JavaScript程序代码位于JavaScript文件中, 这些代码由浏览器解释执行。 例1-4 计算两数之和。 /*例1-4.html 文件*/ 加法计算 /*在当前目录下引入外部JavaScript 文件例1-4.js*/
+
/*例1-4.js 文件,该文件可以使用文本文件或sublime 编辑器编写*/ function AddOnClick() { var op1, op2; /*定义两个变量op1, op2*/ op1=document.getElementById("op1").value; /*获取文档中id 名称为op1 对象的值*/ op2=document.getElementById("op2").value; /*获取文档中id 名称为op2 对象的值*/ var result; /*定义一个变量result */ result=parseInt(op1)+parseInt(op2); /* 将 op1、op2 的值转换为整型并相加*/ alert(op1+"+"+op2+"="+result); /*在对话框中显示两数相加和的式子*/ } 程序运行结果如图1-5所示。 图1-5 引入外部JavaScript文件示例 说明: (1)外部js文件在编写时不能包含标签。 (2)./表示当前目录,../表示上一级目录。 6 第1章JavaScript概述 7 1.习题 6 1.填空题 (1)JavaScript是一种基于和驱动且具有安全性能的脚本 语言。 (2)JavaScript脚本语言具有简单性、、和跨平台性。 (3)在网页中嵌入JavaScript代码有两种方式,一种是在HTML中直接嵌入;另一种 是 。 (4)JavaScript注释有两种方式:一种是单行注释,用“//”表示;另一种是。 (5)脚本语言是为了缩短传统的编写、、、运行过程而创建的计算机 编程语言。 2.选择题 (1)超文本文件以()标签作为文件的开始和结束 。 A. . B. . C. D. . (2)超文本文件的扩展名为( ) 。 A..tml dcC.tt . s hB.ox .xD. j (3)JavaScript的扩展名为((.) ) 。 A..tml dcC.tt . s hB.ox .xD.j(4)script标记的type属性值为(.) ( )。 A.javascript B.text C.javascript/text D.text/javascript (5)doumetwie是文档对象的( )。 c n.rt A.输入函数B.类型转换函数C.求和函数D.输出函数 3.编程题 (1)计算两数之积,通过引入外部JavaScript文件的方式实现,效果如图1-6所示。 图1-6 弹出显示内容为两数之积对话框 8 JavaScript程序设计基础与实例教程 (2)在浏览器中显示一个按钮,按钮内容为“访问百度”,单击该按钮弹出一个显示“百 度网址:htps://www.adc的对话框,效果如图1-7所示。 biu.om” 图1-7 弹出显示内容为“百度网址:htp//www.adu.c的对话框 s:biom” 第2章 JavaScript语法结构及数据类型 2.aacipt的基本语法 1 JvSr 每种程序设计语言都有自己的基本组成元素,JavaScript基本的组成元素有标识符、关 键字、常量和变量等。 1.标识符 在JavaScript中,标识符是指代码中用来标识变量、函数或属性的字符序列。 JavaScript标识符必须以字母、下画线(_)或美元符($)开头,后续的字符可以是字母、数 字、下画线或美元符(数字不允许作为首字符出现)。 合法的标识符,如my_variablename 、v13 、_dummy、$str、m。 不合法的标识符,如512 、this、fo(_) r、8my。 2.关键字 JavaScript中的关键字具有一定的含义,不可以作为变量名或函数名使用,否则在加载 脚本时会产生编译错误。 JavaScript的保留关键字如表2-1所示。 表2- 1 JavaScript中的保留关键字 abstract delete function nul throws arguments do goto package transient boolean double if private true break else implements protected trybyte enum * import* public typeof case eval in return var catch export* instanceof short void char extends * int static volatile clas * false interface super * while const final let switch with continue finaly long synchronized yield debugger float native this default for new throw JavaScript程序设计基础与实例教程 3.常量 常量指程序运行过程中不可以改变的量。JavaScript中的常量类型主要有:字符串类 型、数值类型、逻辑类型、空类型和未定义类型等。 4.变量 变量指程序运行过程中可以发生改变的量。JavaScript是一种弱类型语言,在对变量 进行定义时,不需要明确指定是何种类型,变量的类型由赋给变量的值决定。 JavaScript中变量的命名需要遵循以下规则。 (1)第一个字母必须是字母或下画线,不能以数字开头。 (2)变量名不能包含空格、百分号或括号等特殊符号。 (3)不能使用保留关键字。 (4)严格区分大小写。 变量的定义使用var关键字,语法格式如下。 var 变量名 var name; //name 是被定义的变量名,其类型为underfined var Name; //Name 是被定义的变量名,其类型为underfined,它与name 不是同一个变量 var a,b,c; //a,b,c 同时被定义为变量名,其类型为underfined var a=5,b=10,c=20; //a,b,c 被定义为变量名的同时赋值,其类型都为数值型 var n; //n 是被定义的变量名,其类型为underfined n=100; //通过“=”给n 赋值,其类型为数值型 说明:在JavaScript中,变量也可以不做声明,而是在使用时根据数据的类型来确定其 所属类型。 例如: X=50; Y="80"; Z=False; Pi=3.14; 其中,X为数值型;Y为字符串型;Z为布尔型;Pi为实型。建议在程序编写时先对变量 进行定义,以便能及时发现代码中的错误。 变量分为局部变量和全局变量。局部变量是指只能在一段程序中发挥作用的变量,而 全局变量是指在整个JavaScript程序代码中都可以发挥作用的变量。通常来讲,在函数之 内声明的变量是局部变量,在函数之外声明的变量是全局变量。局部变量和全局变量可以 同名,局部变量的优先级高于全局变量,即在函数体内,同名的全局变量被忽略。若在函数 体内同名的变量没有使用var关键字进行声明,该变量则会被自动定义为全局变量,函数体 内使用同名变量的值将会被同名的全局变量所修改。 2.2 基本数据类型 JavaScript提供了5 种常用的基本数据类型,分别为空类型(null)、未定义类型 (underfined)、数值类型(number)、字符串类型(string)、逻辑类型(boolean,也称布尔型,使 用true或false表示)。 10