商务网站设计与开发课件教案-第04章-脚本语言JavaScript.pptx

商务网站设计与开发,温浩宇西安电子科技大学,第4章脚本语言JavaScript,内容,4.1JavaScript简介,JavaScript是由Netscape公司开发一种基于对象、事件驱动并具有相对安全性的客户端脚本语言。JavaScript可以让网页产生动态、交互的效果，从而改善用户体验。JavaScript已成为Web客户端开发的主流脚本语言。JavaScript由JavaScript核心语言、JavaScript客户端扩展和JavaScript服务器端扩展三部分组成。,4.1JavaScript简介,4.1JavaScript简介,JavaScript通过元素在HTML文档中嵌入脚本代码，有两种方法嵌入脚本：第一种方法，直接在HTML文档中编写JavaScript代码。document.write(这是JavaScript！采用直接插入的方法！);第二种方法，可以通过文件引用的方式将已经编写好的JavaScript文件（通常以.js为扩展名）引入进来。这种方式可以提高代码的重用性和可读性。例如：其中src属性值就是脚本文件的地址。,4.2JavaScript的基本语法,常量和变量JavaScript程序中的数据根据值的特征分为常量和变量，常量是那些在程序中可预知结果的量，不随程序的运行而变化，而变量则正好相反。常量和变量共同构成了程序操作数据的整体。JavaScript中的常量更接近“直接量”，它可以是数值、字符串或者布尔值。更一般地说，JavaScript的常量是那些只能出现在赋值表达式右边的那些量。例如：3.1415、“Helloworld”、true、null等都是常量。JavaScript中用标识符来命名一个变量，合法标识符可以由字母、数字、下划线以及$符号组成的，其中首字符不能是数字。在代码vara=5，b=“test”，c=newObject()中，标识符a、b、c都是变量，它们可以出现在赋值表达式的左侧。严格的说，有一个例外，在JavaScript中，undefined符号可以出现在赋值号的左边，但是根据它的标准化含义，还是将它归为常量。,4.2JavaScript的基本语法,常量和变量JavaScript是一种“弱类型”语言，即JavaScript的变量可以存储任何类型的值。数据类型和变量不是绑定的，变量的类型通常要到运行时才能决定。在JavaScript中既可以在声明变量时初始化，也可以在变量被声明后赋值，例如：varnum=3或者：varnumnum=3因为JavaScript变量没有类型规则的约定，所以JavaScript的使用从语法上来讲就比较简单灵活。但同时，也由于没有变量类型的约束，对程序员也提出了更高的要求。,4.2JavaScript的基本语法,4.2JavaScript的基本语法,4.2JavaScript的基本语法,4.2JavaScript的基本语法,4.2JavaScript的基本语法,表达式和运算符JavaScript的表达式由变量、常量、布尔量和运算符按一定规则组成的集合，包括：算术表达式、串表达式和逻辑表达式。例如：number+Hello+youarewelcome!(a5)varmark=(now.getHours()12)？pm:am;,4.2JavaScript的基本语法,逗号运算符逗号运算符是一个双目运算符，它的作用是连接左右两个运算数，先计算左边的运算数，再计算右边的运算数，并将右边运算数的计算结果作为表达式的值返回。因此，x=（i=0，j=1，k=2）等价于：i=0；j=1；x=k=2；运算符通一般是在只允许出现一个语句的地方使用，在实际应用中，逗号运算符常与for循环语句联合使用。对象运算符对象运算符是指作用于实例对象、属性或者数组以及数组元素的运算符。JavaScript中对象运算符包括new运算符、delete运算符、in运算符、.运算符和运算符。,4.2JavaScript的基本语法,循环语句循环语句是JavaScript中允许执行重复动作的语句。JavaScript中，循环语句主要有while语句和for语句两种形式。vari=10;while(i-)document.write(i);for(vari=0;i10;i+)document.write(i);,4.2JavaScript的基本语法,条件语句条件语句是一种带有判定条件的语句，根据条件的不同，程序选择性地执行某个特定的语句。条件语句和后循环语句都是带有从句的语句，它们是JavaScript中的复合语句。JavaScript中的条件语句包括if语句和switch语句。if(a!=null,4.2JavaScript的基本语法,functionconvert(x)switch(typeofx)casenumber:returnx.toString(16);/把整数转换成十六进制的整数break;casestring:return+x+;/返回引号包围的字符串break;caseboolean:returnx.toString().toUpperCase();/转换为大写break;default:returnx.toString();/直接调用x的toString()方法进行转换document.write(convert(110)+);/转换数值document.write(convert(ab)+);/转换字符串document.write(convert(true)+);/转换布尔值,4.2JavaScript的基本语法,函数函数是封装在程序中可以多次使用的模块。函数必须先定义，后使用。通过function语句来定义函数有两种方式，分别是命名方式和匿名方式，例如：functionf1()alert();/命名方式varf1=function()alert();/匿名方式有时候也将命名方式定义函数的方法称为“声明式”函数定义，而把匿名方式定义函数的方法称为引用式函数定义或者函数表达式。functionsquare(x)returnx*x;,4.3JavaScript的面向对象特性,JavaScript是一种基于对象的语言。所谓“基于对象”，通常指该语言不一定支持面向对象的全部特性，比如不支持面向对象中“继承”或“多态”的特点。JavaScript具有封装的特点，并可以使用封装好的对象，调用对象的方法，设置对象的属性。笼统地说：“基于对象”也是一种“面向对象”。,4.3JavaScript的面向对象特性,对象是对具有相同特性的实体的抽象描述，实例对象是具有这些特征的单个实体。对象包含属性（properties）和方法（methods）两种成分。属性是对象静态特征的描述，是对象的数据，以变量表征；方法是对象动态特征的描述，也可以是对数据的操作，用函数描述。JavaScript中的对象可通过函数由new运算符生成的。生成对象的函数被称为类或者构造函数，生成的对象被称为类的实例对象，简称为对象。vara=newObject();a.x=1,a.y=2;也可以通过对象直接量来构造对象，这种方式使用了对象常量，实际上可以看成是new运算符方法的快捷表示法。例如:varb=x:1,y:2;,4.3JavaScript的面向对象特性,JavaScript是一种弱类型的语言，一方面体现在JavaScript的变量、参数和返回值可以是任意类型的,另一方面也体现在JavaScrip可以对对象任意添加属性和方法,这样无形中就淡化了“类型”的概念。vara=newObject();varb=newObject();a.x=1,a.y=2;b.x=1,b.y=2,b.z=3;,4.3JavaScript的面向对象特性,对象和对象的构造varo=newDate();/o是一个Date对象Complex=function(r,i)/自定义Complex类型，表示复数this.re=r;this.im=i;varc=newComplex(1,2);/c是一个复数对象document.writeln(o.toLocaleString();document.write();document.write(c.re+,+c.im);,4.3JavaScript的面向对象特性,对象运算符“.”和“”都是用来存取对象和数组元素的双目运算符。它们的第一个运算数都是对象或者数组。它们的区别是运算符“.”将第二个运算数作为对象的属性来读写，而“”将第二个运算数作为数组的下标来读写。运算符“.”要求第二个运算数只能是合法的标识符，而运算符“”的第二个运算数可以是任何类型的值甚至undefined，但不能是未定义的标识符。vara=newObject();a.x=1;alert(ax);/a.x和a“x”是等价的表示形式varb=1,2,3;alert(b1);/对于数组b，b1通过下标“1”访问数组的第二个元素上述代码执行时，会弹出对话框以显示数组a和b的值。,4.3JavaScript的面向对象特性,另一种构造对象的方法是先定义类型，再实例化对象。functionPoint(x,y)this.x=x;this.y=y;varp1=newPoint(1,2);varp2=newPoint(3,4);上述代码使用function定义了一个构造函数Point，实际上也同时定义了Point类型。p1和p2是同一种类型的对象，它们都是Point类的实例。,4.3JavaScript的面向对象特性,4.3JavaScript的面向对象特性,4.3JavaScript的面向对象特性,vartoday=newDate();varyear=today.getFullYear();/获取年份varmonth=today.getMonth()+1;/JavaScript中月份是从0开始的vardate=today.getDate();/获取当月的日期/表示星期的中文varweeks=星期日,星期一,星期二,星期三,星期四,星期五,星期六;/输出结果document.write(今天是:);document.write(year);document.write(年);document.write(month);document.write(月);document.write(date);document.write(日);document.write(+weekstoday.getDay();,4.3JavaScript的面向对象特性,4.3JavaScript的面向对象特性,4.3JavaScript的面向对象特性,异常处理机制所谓异常（exception）是一个信号，说明当前程序发生了某种意外状况或者错误。抛出（throw）一个异常就是用信号通知运行环境，程序发生了某种意外。捕捉（catch）一个异常，就是处理它，采取必要或适当的动作从异常状态恢复。tryBug/这里将会引发一个SystaxErrorcatch(e)/产生的SystaxError在这里会被接住alert(e);/异常对象将被按照默认的方式显示出来finallyalert(“finally”);/不论如何，程序最终执行finally语句,4.4JavaScript在浏览器中的应用,在开发网站前台程序时，对浏览器对象的调用是必不可少的。,4.4JavaScript在浏览器中的应用,window对象是浏览器提供的第一类对象，它的含义是浏览器窗口，每个独立的浏览器窗口或者窗口中的框架都是用一个window对象的实例来表示的。window对象是内建对象中的最顶层对象，它的下层对象有event对象、frame对象、document对象等，其中最主要的是document对象，它指的是HTML页面对象。,4.4JavaScript在浏览器中的应用,window对象的主要方法,4.4JavaScript在浏览器中的应用,window对象示例ClickMe!varbtn=document.getElementById(btn);btn.value=点击我;functionlink(str)varmyStr=prompt(请输入姓名);if(myStr=str)/如果验证姓名输入正确if(confirm(myStr+你好！你想打开新的窗口?)window.open();elsealert(对不起，用户名信息错误！);return;,4.4JavaScript在浏览器中的应用,document对象是浏览器的一个重要对象，它代表着浏览器窗口的文档内容。浏览器装载一个新的页面时，总是初始化一个新的document对象。window对象的document属性总是引用当前已初始化的document元素。document对象的属性可以用来设置Web页面的特性，例如标题、前景色、背景色和超链接颜色等。主要用来设置当前HTML文件的显示效果。,4.4JavaScript在浏览器中的应用,document对象的主要属性,4.4JavaScript在浏览器中的应用,document对象的主要方法,4.4JavaScript在浏览器中的应用,事件驱动与界面交互在浏览器文档模型中，事件是指因为某种具体的交互行为发生，而导致文档内容需要作某些处理的场合。在这种情况下，通常由被作用的元素发起一个消息，并向上传播，在传播的途径中，将该消息进行处理的行为，被称为事件响应或者事件处理。浏览器事件的种类很多，包括鼠标点击、鼠标移动、键盘输入、失去与获得焦点、装载、选中文本等等。浏览器的DOM提供了基本的事件处理方式，它被广泛应用于Web应用程序的开发中。HTML标准规定了每个元素支持多种不同的事件类型。把一个脚本函数与事件关联起来被称为事件绑定，被绑定的脚本函数成为事件的句柄。,4.4JavaScript在浏览器中的应用,HTML元素的事件属性可以将合法的JavaScript代码字符串作为值，这一种绑定被称为“静态绑定”，例如下面代码中onclick的属性值：ClickMe!除了静态绑定之外，JavaScript还支持直接对DOM对象的事件属性赋值，对应地，这种绑定称为“动态绑定”，例如：ClickMe!btn.onclick=function()alert(hello);,4.5JS在HTML5中的应用,CanvasAPI是基于canvas元素的一套JavaScript函数库，它是提供了基本的绘图功能，支持创建文本、直线、曲线、多边形和椭圆，并可以设置其边框的颜色和填充色。下面的例子用JavaScript和canvas元素创建了一个在商业报表中常见的直方图。在代码的graph函数中，首先获取了这个图形所需要的canvas对象，并设置了画布的宽度和高度等属性。然后通过循环访问data数组获得了相应的数据，并根据数据绘制出柱状图。,4.5JS在HTML5中的应用,传统的HTML使用cookie作为本地存储（浏览器端存储）的方式。通过cookie可以保存用户访网站的信息，例如个人资料等。每个cookie的格式都是“键/值对”（或