东软内部培训教程JavaScriptppt课件.ppt
《东软内部培训教程JavaScriptppt课件.ppt》由会员分享,可在线阅读,更多相关《东软内部培训教程JavaScriptppt课件.ppt(115页珍藏版)》请在三一文库上搜索。
1、,Beyond Technology,JavaScript(Ver1.0) 演讲人:丁海波,目的与目标,能够熟练的使用JavaScript语言对页面中的元素进行动态操作,对Form中的控件可以进行合法性,有效性校验等等。,课程概述,本课程主要是介绍JavaScript语言的语法,如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入,可选择的控件进行校验等。,第一章: JavaScript简介 第二章: JavaScript基本语法 第三掌 JavaScript对象 第四章 在浏览器中使用,第一章: JavaScript简介,JavaScript 历史,JavaScript是由
2、Netscape公司开发的一种脚本语言,结构简单,使用方便,对用户自身知识水平的要求并不高,易学易懂。 Netscape将这种脚本语言命名为LiveScript,它的整个语法以Java为基础,但比Java要简单,同时,由于它是一种脚本语言,所以无需编译,可由浏览器直接解释运行,而不象Java那样需要经过编译。 Netscape见LiveScript大有发展前途,而SUN也觉得可以利用Livescript为Java的普及做铺垫,于是两家签订协议,将LiveScript改为JavaScript,造就了这个强力的WEB页开发工具。,JavaScript的特点,1.JavaScript是一种脚本语言
3、语法和规则没有可编译的编程语言那样严格和复杂,主要用于格式化文本和使用以编程语言编写的已编译好的组件。 2.JavaScript是基于对象的语言 面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如,“日期”对象。 3.JavaScript是事件驱动的语言 当你在Web主页中进行某种操作时,就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的,当事件发生时,它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。,JavaScript的特点,4.J
4、avaScript是安全的语言 JavaScript被设计为通过浏览器来处理并显示信息,但它不能修改其它文件中的内容。也就是说,它不能将数据存储在Web服务器或用户的计算机上,更不能对用户文件进行修改或删除操作。 5.JavaScript是平台无关的语言 对于一般的计算机程序,它们的运行与平台有关。例如,除非你使用一个仿真器来模拟Windows环境,否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台(虽然有一些限制),它只与解释它的浏览器有关。不论你使用Macintosh还是Windows,或是UNIX版本的NetscapeNavi
5、gator,JavaScript都可正常运行。,JavaScript的功能,JavaScript的功能总体可以归结为两类: 1、交互性 使用JavaScript可以大大加强WEB页的交互性,如轻松的在你的WEB页中加入按钮,显示带有控制的文本,建立交互式表格等。 2、动态性 JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画,从而使你的WEB页看上去活泼诱人。,JavaScript与Java语言的比较,JavaScript不是Java Java是由Sun公司开发,与平台无关的、面向对象的程序设计语言,它与JavaScript基于对象的结构相反。Java可以用来设计独立的应
6、用程序,也可以用来创建一种称为Applets的小应用程序。经过编译后,Applets成为一种平台无关的字节代码,这种Applets可以运行在任何平台上,只要该平台具备能够操作Applets的Java虚拟机即可。,JavaScript与Java语言的比较,JavaScript与Java之间其它的一些主要区别 、Java程序被编译成为字节代码文件;JavaScript则是将字符正文传递给客户方并由客户方解释执行。 、JavaScript是基于对象的,它自身具有已创建完毕的对象;而Java则是面向对象的,对象必须从类中创建。 、JavaScript的代码以字符的形式嵌入在HTML文档中;Javaap
7、plets则是由文档引用,其代码以字节代码的形式保存在另一个独立的文件中。,JavaScript与Java语言的比较,JavaScript与Java之间其它的一些主要区别 、在HTML文档中,用标识标明JavaScript脚本;而Javaapplets则用标识来标明。 、JavaScript采用弱类型;而Java则采用强类型。 、JavaScript采用动态联编;而Java,则采用静态联编。,JavaScript的局限性,JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”,能够将一个Web节点中的不同组成部分捆绑在一起,成为一个紧密结合的信息源。然而
8、,像任何事物一样,JavaScript也有它的局限性。 浏览器相关的局限性:IE,Nectscape 平台相关的局限性:Windows,Unix,JavaScript的局限性,安全性有关的局限性 JavaScript的设计目标在于“Web安全性”,它比以前任何一种方法都更能保证Web的安全(例如:perl和CGI),这自然是牺牲JavaScript的一些功能换来的。 (1) JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。 (2) JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HT
9、ML命令,但HTML命令也不能打开那些文件。,JavaScript与HTML,在HTML文档里面,标签对内包容了和标签对。标签对内包容了标签对, 标签对内的文字串是显示窗口的标题。标签对内包容了显示页面的内容。JavaScript的基本成分变量、函数和事件处理方法和HTML代码编织在一起,变量和函数被包容在新标签对内,而标签对则一般放在标签对内;事件处理方法可以被包容在任何中的标签对内,用于响应某事件,激发某 JavaScrip函数。,JavaScript与HTML, js example document.write(“hello world!”) /可以包含事件响应代码等 ,JavaScr
10、ipt包含文件,你可以将JavaScript文件在HTML文件外面存放!把你的零碎们放到一起,起个名字,再给它个js的文件尾。 非常重要:js文件里不能有或其它注释。 例如:把pku.js文件链接到HTML文件中的句型如下: ,第二章: JavaScript基本语法,JavaScript的语法结构,JavaScript的语言结构既宽松又简单; JavaScript的基本概念: 语句:一条由计算机完成的、帮助你达到某种目的的指令,JavaScript中的每一行都可认为是一条语句。 变量:一个代表某个值的名字就是变量。 表达式:A=1+B;就是表达式。 函数:具有一定功能的程序段; 1、parse
11、Int可以将字符串转化为整型数。 2、paseFloat将字符串转化为附点数。,JavaScript的数据类型,JavaScript支持的数据类型共有四种 1、数值型:其中包括整型数和浮点型数。 2、布尔型:即逻辑值,true或flase。 3、字符串型:由单个或多个文本字符组成。 4、空值:由关键字null代表。 JavaScript的命名规则 1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。 2、变量名的首字符必须为字母或下划线。 3、变量名对字母的大小写敏感。 4、变量名的长度必须在一行内。 5、变量名中不能有空格与其它标点符号。,变量与表达式,创建变量 var anumb
12、er = 137;/变量的值是一个数 var anumber1=2; var astring = “1”; / 变量的值也可以是一个字符串 var astring1=“hello”; 表达式 xx=astring1+astring /结果是x=“hello1” xx=anumber+anumber1/结果是xx=139 xx=anumber+astring /结果是xx=“1371”,表达式与操作符,赋值操作符: =、+=、-=、*=、 /=、%=、=、=、 x + y 为 “Hello World!“ 其他操作符 in, typeof instanceof等,JavaScript流程控制语句
13、,if和else: if( condition ) . else . ; for和while: for( 初始化表达式; 条件; 增值表达式) 执行语句; ; while(条件) 条件为真执行; ; break可以用在for或while循环中,使循环中断,跳到for或while循环结束的位置; continue用在for或while循环可以跳过循环体中剩余的语句,直接进行循环的下一次迭代.;,第三章 JavaScript对象,JavaScript对象模型,JavaScript被称为是“基于对象的” (而不是面向对象的),有对象的概念:数据和操作的封装, 但没有继承的概念。从定义的角度看, Ja
14、vaScript程序中有两种对象:JavaScript提供的内置对象(built-in object)和程序中定义的对象。 一个对象是一个由变量、其他对象或方法组成的一个集合: 在一个对象中包含的其他对象和变量被称为特性 (property); 在一个对象内的函数(function)称为这个对象的方法( method); 在一个特定的对象中的一些特性的序列称为数组, 例如document对象中的image; 多维数组是由含有数组特性的对象数组构造的,当一个文档加载到浏览器后,它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象,这就
15、是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域,对每个对象的引用必须包括从顶部到对象的所有层次,直至对象名,路径中各个相连的对象之间用句点分开。 变量可以写成下面的形式: 父对象.特性1索引1.特性2最后特性索引N 对象的方法(method)可以如此引用: 对象.方法(参数组); 一个含有典型特性和方法的对象的例子: document 是对应一个 .html文档的对象,浏览器读进文档后生成; document.writeln(“hello”) 是这个对象的一个方法,输出带换行的字符串; document.location 是该对象的一个特性,含有它的URL。,
16、用户对象的定义,JavaScript定义“类”、“函数”的语法是一样的,而且这样的函数就成了该类的构造函数! 用户用函数定义来定义类,然后用new语句创建该类的一个实例。以下是“类”的例子。(实际效果) function add() this.result = this.left + this.right; function MyClass(n) this.left = n; this.right = 6; this.result = 0; this.sum = add; x = new MyClass(4); x.sum(); document.write(x.result); ,proto
17、type 属性 返回对象类型原型的引用。 引用方式: objectName.prototype objectName 参数是对象的名称。,JavaScript的对象: Array,属性:length,它指明了数组的长度。 方法: join() 将数组值连接变为一个字符串; reverse()将数组值倒序; sort() 将对数组值进行排序; AAA=new Array(3); AAA0=“B“; AAA1=“A“; AAA2=“C“; document.write(AAA.length+“); document.write(AAA.join()+“); document.write(AAA.r
18、everse().join()+“); document.write(AAA.sort().join()+“;,JavaScript的对象:String,属性:length属性表明字符串长度。 方法 字符串的转换; toUpperCase()将字符串所有字符转为大写; toLowerCase()将字符串所有字符转为小写; toString()将非字符串对象显示转化为字符串。 字符串的处理; substring()将括号中参数所指的字符串片段返回; charAt()返回括号中指定位置字符串的内容; split()根据指定的分隔符把一个字符串划分为一个字符串数组。 如:newstring = as
19、tring.substring(index1,index2); / 返回一个位置在 index1和index2-1之间的字符串,特别是如果 index2 index1,子串返回 index2和index1-1之间的部分!,JavaScript的对象:Date,属性:无 方法: a、设定日期 setDate(),setMonth(),setYear(); setTime()设定时间1970.1.1开始用毫秒数来计时; b、日期格式转换 .Date.UTC()返回一个通用时间,距1970年1月1日午夜的毫秒。 c、获取日期 .Date.getDate(), .Date.getMonth(), .D
20、ate.getYear(), .Date.parse(), Date.getDay(); d、处理时区 .toGMTString()将日期时间值转换为的字符串(GMT时间); .tolocaleString()将日期时间值转换为的字符串(当地时间)。,JavaScript的对象:Math,属性: .E:为自然对数的底(约为2.718); .PI:为圆周率(约为3.14159); 方法: .abs()绝对值计算; .pow()数的幂; .sqrt()计算平方根; .cos()、.sin()、.tan() 、.acos、.asin()、.atan(); ,JavaScript的屏幕对象,显示器sc
21、reen。各种相关特征涵义参数举例说明 screen.height屏幕高度 screen.width屏幕宽度 screen.availHeight屏幕可见高度 screen.availWidth屏幕可见宽度 screen.colorDepth色深8 ,16,32位颜色,JavaScript事件模型,事件:用户对网页的一些特定“操作”(这些操作通常直接对应鼠标的动作)和系统行为。例如加载一张网页,点击一个超链等。 事件处理程序的引入(如何使一段JavaScript程序和事件的发生联系起来?)。 “on事件名”是JavaScript规定的对应事件处理程序柄(event handler)的名字。例如
22、onClick、onfocus、onSubmit等等。,JavaScript事件模型(续),第一种引入方式:事件处理程序柄名以属性名的形式在HTML文本中某些适当的标记中出现,而对应的属性值是由网页编写者提供的JavaScript程序段(或事件处理函数名) ; 第二种引入方式:将事件处理函数名赋给浏览器为网页创建的相应对象的对应属性(property) document.forms0.age.onchange=isNumber; 例:让事件处理程序作为“属性值” 这里,事件处理程序柄的名字是大小写不敏感的。这与HTML文本中对标记的属性名的松散要求是一致的。 OnLoad在网页完全加载完后执行
23、(即包括图像,applet等); OnUnLoad在网页退出之前执行。,JavaScript程序的注意事项,最好把源码写进HTML文件头里,及之间是合适的地方。 JavaScript程序要用,language这个限定参数也是必要的。再用把程序关闭。 提示开始标记来关闭提示。 对所编程序加必要的注释。单行或多行注释加在/*/号中间来标示;单行注释则加在/号后面。,第四章 在浏览器中使用,1.代表浏览器器所打开的窗口。 2.通常代表目前正在使用(focus)的窗口。 3.如果打开多个浏览器窗口时,可以利用别名(alias)来区别它们,如: ex. opener, parent, self, win
24、dow, top,窗口对象(Window object),窗口对象使用语法,window.特性 window.方法(参数群) self.特性 /self代表目前window或frame名称 self.方法(参数群) top.特性 /top代表最顶层的窗口 top.方法(参数群) parent.特性 /parent代表目前框架的父框架 parent.方法(参数群) 窗口名称.特性 窗口名称.方法(参数) 特性 方法(参数),closed -说明窗口是否已经关闭 defaultStatus -浏览器底部预设的状态列讯息 length -窗口重的框架个数 Frame -窗口中的frame frame
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 内部 培训 教程 JavaScriptppt 课件
链接地址:https://www.31doc.com/p-3106809.html