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