《网页设计之-javascript语言》由会员分享，可在线阅读，更多相关《网页设计之-javascript语言（88页珍藏版）》请在金锄头文库上搜索。
1、JavaScript 脚本编程,内容提要,JavaScript概述 词法规则 基本数据类型 运算符和表达式 核心语句 函数 复合数据类型 对象模型 事件处理,JavaScript概述,JavaScript是由Netscape和Sun公司联合开发的基于对象和事件驱动的客户端脚本编程语言，通过它与HTML、XML、DOM、CSS、JavaApplet等技术的有机结合，可以开发出具有很强交互性的动态页面。,第一个JavaScript程序, 实时显示时间 当前时间：“+ s+“; / ,基于对象 事件驱动 解释性语言 简单性 实时性 跨平台性 安全性,JavaScript的特点,JavaScript脚
2、本的引入方法 通过与标签对引入。将JavaScript脚本代码放在与之间，浏览器自动识别该标签对并逐行解释其间的代码。 通过标签的src属性引入。将包含在与标签对之间的代码放入扩展名为.js的脚本文件中，然后在HTML文档中通过标签的src属性来引用该脚本文件。,在网页中嵌入JavaScript脚本,JavaScript脚本的引入方法 通过JavaScript伪协议引入。伪协议是非标准化通信机制的统称，JavaScript伪协议的一般格式为：javascript: URL。其中“javascript:”是伪协议说明符，URL的主体可以是任意的JavaScript代码，多个语句之间使用分号进行分
3、隔。 例如： ,在网页中嵌入JavaScript脚本,JavaScript脚本的引入方法 通过HTML的事件属性引入。HTML元素的事件属性用于指示如何处理特定的事件，方法是将脚本指定为事件属性的值，以响应系统或用户的动作。事件属性名称由事件名称加一个“on”前缀构成，如onClick，onMouseOver等。 例如： ,在网页中嵌入JavaScript脚本,嵌入JavaScript脚本的位置 JavaScript脚本可放在HTML文档中任何需要的位置。一般来说，可以在与标签对、与标签对之间放置JavaScript脚本代码。放置在与标签对之间的JavaScript脚本一般用于提前载入，以响应
4、用户的页面动作，且一般不影响HTML文档的浏览器显示格局。如果需要在页面载入时动态生成页面内容，应将JavaScript脚本放置在与标签对之间。,在网页中嵌入JavaScript脚本,标识符 在JavaScript中，标识符用来命名变量和函数。 标识符的第一个字符必须是字母、下划线或美元符号，后续字符可以是字母、数字、下划线或美元符号。例如：x、user_name、U571、_pswd、$money都是合法的标识符。 不能使用JavaScript中的关键字作为标识符。在JavaScript中定义了20多个关键字，这些关键字是JavaScript内部使用的，如var、for、function、i
5、f等，它们都不能作为标识符使用。,词法规则,词法规则,关键字和保留字 关键字是JavaScript语法自身的一部分，具有特殊的意义，不能用作标识符。 保留字是为将来的关键字而保留的单词，由于未来浏览器可能会实现这些保留字，因此它们最好也不要作为标识符使用。,JavaScript的保留字,词法规则,大小写敏感 JavaScript是一种区分大小写的脚本语言。在输入关键字、变量名、函数名以及其它所有标识符时，都必须采取一致的字符大小写形式。例如， “username”、“userName”、“UserName”代表三个不同的变量名。 许多JavaScript对象的属性和它们所代表的HTML标签的属
6、性同名，在HTML中这些标签的属性可以以任意大小写的方式输入，但是在JavaScript中它们通常都有固定的大小写格式。例如，body标签的背景颜色属性可以声明为“bgcolor”、“bgColor”或者“BGCOLOR”，但代表body标签的document对象的背景颜色属性只能声明为“bgColor”。,词法规则,空白字符 空白字符包括空格、制表符和换行符等，在编写脚本时占据一定的空间，以增强代码的可读性，方便开发人员查看和维护。 空格是使用最为频繁的空白字符，常被用作分隔符。,例1：sum = 3 + 10 ; sum=3+10;,例2：var x=typeof “JavaScript“
7、;,词法规则,语句结束符 JavaScript使用分号作为语句结束符，多个语句可写在不同行或同一行。 例如： var str=“Welcome to JavaScript World!“; document.write(str); 也可写成： var str=“Welcome to JavaScript World!“; document.write(str); 语句分行后，作为语句结束符的分号可以省略。 例如： var str=“Welcome to JavaScript World!“ document.write(str),注意：省略分号不是一个好的编程习惯，它可能导致程序产生一种不明确
8、的状态。,词法规则,注释 JavaScript有单行注释和多行注释两种形式。 单行注释以“/”开头，处于“/”和一行结尾之间的任何文本都被当作注释而被浏览器忽略掉。 多行注释以“/*”开头，以“*/”结尾，处于“/*”和“*/”之间的文本被当作注释，这些文本可以跨越多行，但是其中不能有嵌套的注释。 例如： /这是单行注释 /* *这是多行注释 *它是多行的 *它是多行的 */,基本数据类型,基本数据类型定义了一组不可再分的值的集合，以 及作用于该集合上的操作集。JavaScript支持的基本数据类型包括数值型、字符串型和布尔型，分别对应于不同的存储空间。 基本数据类型和常量 当某种基本类型的数
9、据项直接出现在程序中时，称之为常 量，即值不能被改变的量。 数值型：最基本的数据类型，包括整型和浮点型 整型常量：可以使用十进制、八进制或十六进制表示，如1234、0745、0x93C等。 浮点型常量：可以使用小数或指数方法表示，如12.34、5.9e7、4.3e-5等。 特殊的数值型常量：Infinity表示正无穷大， -Infinity表示负无穷大，NaN表示“不是一个数值”、“没有意义的运算”或“无法转换成数值类型”。如5/0的运算结果为Infinity，-5/0的运算结果为-Infinity，0/0的运算结果为NaN。,基本数据类型,基本数据类型和常量 字符串型：表示文本的数据类型 字
10、符串常量：用“ “或 括起来的若干个字符，如“JavaScript“、This is a book of C+等。 转义字符：以反斜杠 开头的具有特殊功能的字符。,基本数据类型,基本数据类型和常量 布尔型：表示状态的数据类型 布尔常量：只有两个可能的值true和false，表示“真”和“假”两种状态。如53的运算结果为true，“Chinese”“China”的运算结果是false。 变量 变量是存放常量的容器，主要作用是存取数据。 变量的声明：在JavaScript中，可以先通过关键字var来声明变量，然后再使用。 例如：var num; var str, flag; num = 100;
11、str = “JavaScript Language“; flag = true;,变量的初始化：变量可以在声明的同时指定初始值。 例如：var num = 100; var str = “JavaScript Language“, flag = true; 仅用var声明但未初始化的变量获得默认初值undefined。 变量的类型 实际类型视变量内容而定。例如，上例中的num为数值型变量，str为字符串型变量，flag为布尔型变量。 变量的类型可以根据变量内容的改变而自动更改。 例如：var num = 1; /num为数值型变量 num = “Hello World!“; /num为字符串
12、型变量 变量可以不经过var声明就直接使用，而在变量赋值时自动声明该变量。 例如：num = 100; str = “JavaScript Language“; flag = true; 好的编程风格：所有变量在第一次使用前都用var进行声明！,基本数据类型,运算符和表达式,运算符是完成操作的一系列符号，JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。 表达式是由变量、常量和运算符连接起来的式子，根据运算符类型的不同，表达式可分为算术表达式、比较表达式、逻辑表达式等。 算术运算符和算术表达式,运算符和表达式,比较运算符和比较表达式,当操作数类型不同时进行类型转换,当操
13、作数类型不同时不进行类型转换,运算符和表达式,逻辑运算符和逻辑表达式,运算符和表达式,位运算符和位表达式,运算符和表达式,赋值运算符和赋值表达式,条件运算符和条件表达式 条件运算符有3个操作数，一般格式如下： 条件式 ? valueB : valueC 当条件式成立时，valueB会被赋给整个条件表达式，否则将valueC赋给条件表达式。 例如： var min = 67 ? 6 : 7; 思考：假设x、y、z三个变量均已赋值，请写出求三个变量中最大值和最小值的条件表达式。,运算符和表达式,字符串运算符和字符串表达式,运算符和表达式,逗号运算符和逗号表达式 逗号既可以作为分隔符，也可以作为运算
14、符。逗号表达式的一般格式如下： 表达式1, 表达式2, , 表达式n 逗号表达式的求值过程：先求表达式1的值，再求表达式2的值，依次下去，最后求表达式n的值，表达式n的值即为整个逗号表达式的值。 例如： var a=2, b=4, c=6, x, y; /逗号作为分隔符 y=(x=a+b, x+c); /逗号作为运算符,运算符和表达式,基本控制结构 基本控制结构用来决定程序的处理流程，JavaScript 支持三种结构：顺序、选择和循环。,核心语句,分支结构,多分支结构,循环结构,表达式和复合语句 由各种类型的表达式加上分号组成的语句被称为表达式语句。 例如： sum+; /算术表达式语句 s
15、tr=“Olympic“ + 2008; /赋值表达式语句 用大括号“ ”括起来的语句序列称为复合语句，用来在需要使用单行语句的地方完成多项任务。 例如： var angle=Math.PI; var cosine=Math.cos(angle); alert(“cos(“+angle+“)=“+cosine); ,核心语句,条件语句 选择结构的核心语句是条件语句，通过判断某个逻 辑条件是否成立，从给定的各种可能操作中选择一 种执行。条件语句包括if语句和switch语句。 if语句的三种形式 单分支选择。其一般格式如下： if (表达式) 语句; 功能：计算表达式的值，若计算结果为true，
16、执行语句；否则跳过if语句执行其后的语句。 例1：if(count 10) count = 0; 例2：if(count 10) count = 0; alert(“count被重设为0!“); ,核心语句,双分支选择。其一般格式如下： if (表达式) 语句1; else 语句2; 功能：如果表达式的计算结果为true，执行语句1；否则执行语句2。 例如： var num=Math.round(Math.random( )*100); if(num%2=0) alert(num+“是一个偶数“); else alert(num+“是一个奇数“);,核心语句,多分支选择。其一般格式如下： if
17、 (表达式1) 语句1; else if (表达式2) 语句2; else if (表达式n) 语句n; else 语句n+1; 功能：如果表达式1的值为true，执行语句1；否则计算表达式2的值，如果返回true则执行语句2；如果所有表达式都不成立，则执行else后面的语句n+1。 例如：var age=parseInt(prompt(“请输入您的年龄“,“); if (age10) alert(“黄口小儿“); else if (age20) alert(“年方弱冠“); else if (age30) alert(“三十而立“); else if (age40) alert(“四十不惑“); else alert(“英雄迟暮“);,
