WEB平台开发培训——js

NeusoftCo.,Ltd.•1WEB平台开发培训JavaScript李宁2016年1月能够熟练的使用JavaScript语言对页面中的元素进行动态操作，对Form中的控件可以进行合法性，有效性校验等等。目的与目标课程概述•本课程主要是介绍JavaScript语言的语法，如何使用JavaScript对页面中的元素进行动态操作和对页面中可输入，可选择的控件进行校验等。•第一章:JavaScript简介•第二章:JavaScript基本语法•第三掌JavaScript对象•第四章在浏览器中使用第一章:JavaScript简介JavaScript历史•JavaScript是由Netscape公司开发的一种脚本语言，结构简单，使用方便，对用户自身知识水平的要求并不高，易学易懂。•Netscape将这种脚本语言命名为LiveScript，它的整个语法以Java为基础，但比Java要简单，同时，由于它是一种脚本语言，所以无需编译，可由浏览器直接解释运行，而不象Java那样需要经过编译。•Netscape见LiveScript大有发展前途，而SUN也觉得可以利用Livescript为Java的普及做铺垫，于是两家签订协议，将LiveScript改为JavaScript，造就了这个强力的WEB页开发工具。JavaScript的特点•1.JavaScript是一种脚本语言–语法和规则没有可编译的编程语言那样严格和复杂，主要用于格式化文本和使用以编程语言编写的已编译好的组件。•2.JavaScript是基于对象的语言–面向对象程序设计力图将程序设计为一些可以完成不同功能的独立部分(即对象)的组合体。基于对象的语言本身已具有创建完成的对象。例如，“日期”对象。•3.JavaScript是事件驱动的语言–当你在Web主页中进行某种操作时，就产生了一个“事件”。事件几乎可以是任何事情:敲击一个按钮、拖动鼠标等均可视为事件。JavaScript是事件驱动的，当事件发生时，它可对之作出响应。具体如何响应某个事件取决于你的事件响应处理程序。JavaScript的特点•4.JavaScript是安全的语言–JavaScript被设计为通过浏览器来处理并显示信息，但它不能修改其它文件中的内容。也就是说，它不能将数据存储在Web服务器或用户的计算机上，更不能对用户文件进行修改或删除操作。•5.JavaScript是平台无关的语言–对于一般的计算机程序，它们的运行与平台有关。例如，除非你使用一个仿真器来模拟Windows环境，否则不可能在Macintosh上运行一个Windows应用程序。JavaScript则并不依赖于具体的计算机平台（虽然有一些限制），它只与解释它的浏览器有关。不论你使用Macintosh还是Windows，或是UNIX版本的NetscapeNavigator，JavaScript都可正常运行。JavaScript的功能JavaScript的功能总体可以归结为两类：1、交互性使用JavaScript可以大大加强WEB页的交互性，如轻松的在你的WEB页中加入按钮，显示带有控制的文本，建立交互式表格等。2、动态性JavaScript可以使WEB页上显示的文本信息动起来或是加入一些动画，从而使你的WEB页看上去活泼诱人。JavaScript与Java语言的比较JavaScript不是JavaJava是由Sun公司开发,与平台无关的、面向对象的程序设计语言，它与JavaScript基于对象的结构相反。JavaScript与Java语言的比较JavaScript与Java之间其它的一些主要区别１、Java程序被编译成为字节代码文件；JavaScript则是将字符正文传递给客户方并由客户方解释执行。２、JavaScript是基于对象的，它自身具有已创建完毕的对象；而Java则是面向对象的，对象必须从类中创建。３、JavaScript的代码以字符的形式嵌入在HTML文档中；Javaapplets则是由文档引用，其代码以字节代码的形式保存在另一个独立的文件中。JavaScript与Java语言的比较JavaScript与Java之间其它的一些主要区别４、在HTML文档中，用标识SCRIPT标明JavaScript脚本；而Javaapplets则用标识APPLET来标明。５、JavaScript采用弱类型；而Java则采用强类型。JavaScript的局限性JavaScript为Web内容设计人员提供了极大的灵活性和控制手段。它是一种优秀的“粘合剂”，能够将一个Web节点中的不同组成部分捆绑在一起，成为一个紧密结合的信息源。然而，像任何事物一样，JavaScript也有它的局限性。浏览器相关的局限性平台相关的局限性JavaScript的局限性安全性有关的局限性JavaScript的设计目标在于“Web安全性”，它比以前任何一种方法都更能保证Web的安全(例如：perl和CGI)，这自然是牺牲JavaScript的一些功能换来的。(1)JavaScript不能打开、读、写、保存用户计算机上的文件。它有权访问的唯一信息就是它所嵌入的那一个Web主页中的信息。(2)JavaScript不能打开、读、写、保存Web服务器上的文件。尽管你可以使用它来提交HTML命令，但HTML命令也不能打开那些文件。JavaScript与HTML在HTML文档里面，html标签对内包容了head和body标签对。head标签对内包容了title标签对,title标签对内的文字串是显示窗口的标题。body标签对内包容了显示页面的内容。JavaScript的基本成分—变量、函数和事件处理方法—和HTML代码编织在一起，变量和函数被包容在新标签对script内，而script标签对则一般放在head标签对内；事件处理方法可以被包容在任何body中的标签对内，用于响应某事件，激发某JavaScrip函数。JavaScript与HTML•scripttype=text/javascript•document.write(helloworld!!)•/script•/head•body•/bodyJavaScript包含文件•你可以将JavaScript文件在HTML文件外面存放！把你的零碎们放到一起，起个名字，再给它个js的文件尾。–非常重要：js文件里不能有script/script或其它注释。•例如：把pku.js文件链接到HTML文件中的句型如下：–scriptsrc=“pku.js”language=JavaScript“/script第二章:JavaScript基本语法JavaScript的语法结构JavaScript的语言结构既宽松又简单；JavaScript的基本概念：•语句：一条由计算机完成的、帮助你达到某种目的的指令，JavaScript中的每一行都可认为是一条语句。•变量：一个代表某个值的名字就是变量。•表达式：A=1+B；就是表达式。•函数：具有一定功能的程序段；1、parseInt可以将字符串转化为整型数。2、paseFloat将字符串转化为附点数。JavaScript的数据类型•JavaScript支持的数据类型共有四种–1、数值型：其中包括整型数和浮点型数。–2、布尔型：即逻辑值，true或flase。–3、字符串型：由单个或多个文本字符组成。–4、空值：由关键字null代表。•JavaScript的命名规则–1、变量名中可以包含数字0-9、大写或小写的拉丁字母和下划线。–2、变量名的首字符必须为字母或下划线。–3、变量名对字母的大小写敏感。–4、变量名的长度必须在一行内。–5、变量名中不能有空格与其它标点符号。变量与表达式•创建变量–varanumber=137;//变量的值是一个数–varanumber1=2;–varastring=“1”;//变量的值也可以是一个字符串–varastring1=“hello”;•表达式–xx=astring1+astring//结果是x=“hello1”–xx=anumber+anumber1//结果是xx=139–xx=anumber+astring//结果是xx=“1371”表达式与操作符•赋值操作符：–=、+=、-=、*=、/=、%=、=、=、=、&=、^=、|=；•条件表达式：–status=(age=18)?adult:minor；•算数操作符：–+、-、*、/、%、++和--，y=++x；•位逻辑运算符：–&、|、^;、、•布尔操作符：–&&、||、!•比较操作符：–有==、、=、、=、!=；•连接操作符+用于连接两个字符串：–x=Hello;y=World!;x+y为HelloWorld!•其他操作符–in,typeofinstanceof等JavaScript流程控制语句•if和else:–if(condition){...}else{...}；•for和while：–for(初始化表达式;条件;增值表达式){执行语句;}；–while(条件){条件为真执行;}；–break可以用在for或while循环中，使循环中断，跳到for或while循环结束的位置；–continue用在for或while循环可以跳过循环体中剩余的语句，直接进行循环的下一次迭代.；第三章JavaScript对象JavaScript对象模型•JavaScript被称为是“基于对象的”(而不是面向对象的)，有对象的概念：数据和操作的封装,但没有继承的概念。从定义的角度看,JavaScript程序中有两种对象：JavaScript提供的内置对象（built-inobject）和程序中定义的对象。•一个对象是一个由变量、其他对象或方法组成的一个集合：–在一个对象中包含的其他对象和变量被称为特性(property)；–在一个对象内的函数(function)称为这个对象的方法(method)；–在一个特定的对象中的一些特性的序列称为数组,例如document对象中的image[]；–多维数组是由含有数组特性的对象数组构造的•当一个文档加载到浏览器后，它所有的对象都按照浏览器的文档对象所规定的严格层次结构存放到内存。要有一种方法让Script指出它要的是哪一个对象，这就是对象引用。JavaScript用严格的层次结构引导Script至文档的任何区域，对每个对象的引用必须包括从顶部到对象的所有层次，直至对象名，路径中各个相连的对象之间用句点分开。•变量可以写成下面的形式：–父对象.特性1[索引1].特性2..最后特性[索引N]•对象的方法(method)可以如此引用：–对象.方法(参数组)；•一个含有典型特性和方法的对象的例子：–document是对应一个.html文档的对象，浏览器读进文档后生成；–document.writeln(“hello”)是这个对象的一个方法，输出带换行的字符串；–document.location是该对象的一个特性，含有它的URL。用户对象的定义•JavaScript定义“类”、“函数”的语法是一样的，而且这样的函数就成了该类的构造函数!–用户用函数定义来定义类，然后用new语句创建该类的一个实例。以下是“类”的例子。（实际效果）HEADscriptlanguage=“javascript”functionadd(){this.result=this.left+this.right;}functionMyClass(n){this.left=n;this.right=6;this.result=0;this.sum=add;}/script/HEADBODYscriptlanguage=“javascript”x=newMyClass(4);x.sum();document.write(x.result);/script/BODYJavaScript的对