javascript应用实例

本门课程目标使用JavaScript实现表单验证使用JavaScript制作网页广告特效使用JavaSctipt制作弹出窗口特效使用JavaScript实现时钟特效使用JavaScript实现级联显示功能使用JavaScript+CSS实现CSS样式特效使用JavaScript动态创建页面元素html常用标签标签特征•所有的标签都必须有个相应的结束标签,即所有的标签都必须关闭,如果是单独不成对的标签要在标签后加'/'关闭它.•所有标签的元素和属性名称都必须使用小写.所有的属性值必须使用引起来。form表单•formaction=表单提交到服务器的URLmethod=设置提交方式target=用于指定服务器返回结果显示的目标窗口title=设置鼠标在表单任意停留的时候游览器用黄色小浮标显示文本信息/formtype:hidden[name,value];image[name,src];text[name,value];password[name,value];radio[name,value,checked];checkbox[name,value];file[name没有value值]submit,reset,button[name,value]什么是脚本程序脚本代码的位置如何实现JavaScript•HTML的script标签用于把JavaScript插入HTML页面当中。•那些不支持JavaScript的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生，我们可以使用这样的HTML注释标签：•htmlbody•scripttype=text/javascript•!--•document.write(HelloWorld!);•//--•/script/body/html什么是JavaScriptDOMJavaScriptECMAScriptBOMJavaScript组成ECMAScript语法标准语法变量和数据类型运算符逻辑控制语句关键字、保留字对象编码遵循ECMAScript标准BOM游览器对象文档对象模型DOM文档：document根节点：html元素：head元素：body元素：title文本：“文档标题”元素：h1元素：a属性：href文本：“我的链接”文本：“我的标题”演示示例：使用DOM改变超链接图解核心语法关键字•根据规定，关键字是保留的，不能用作变量名或函数名。下面是ECMAScript关键字的完整列表：•breakelsenewvartypeofcasefinallyreturnvoidcatchforswitchwhiledefaultifthrowdeleteintrydoinstanceofabstractenumintshortbooleanexportinterfacestaticbyteextendslongsupercharfinalnativesynchronizedclassfloatpackagethrowsconstgotoprivatetransientdebuggerimplementsprotectedvolatiledoubleimportpublicJavaScript异常•在代码的运行过程中，错误是不可避免的，总的来说，错误发生于两种情况：一是程序内部的逻辑或者语法错误，二是运行环境或者用户输入中不可预知的数据造成的错误。对于前者，就称之为错误（error），可以通过调试程序来解决；而后一种则更多的称之为异常（exception），顾名思义，就是超出常规，没有按程序设计的意愿来输入数据。当然，异常还会有许多种类型。异常处理结构•使用try-catch-finally处理异常用户可以使用该结构处理可能发生异常的代码，如果发生异常，则由catch捕获并进行处理，其语法如下：•try{//要执行的代码}catch(e){•//处理异常的代码}•finally{•//无论异常发生与否，都会执行的代码}即使不在catch块内进行处理，catch标识及其参数e也是必须写的，否则会产生语法错误，而finnally则不是必须的。使用throw语句抛出异常•在JavaScript中有其内部的异常机制，在遇到非法操作时能自动抛出异常。实际的开发中，随着程序的复杂，需要能自己实现异常，这可以通过throw语句来实现：throwvalue；•其中value就是要抛出的异常变量，它可以是JavaScript中的任何一种类型。但在JavaScript内部的异常中，异常参数（即catch(e)中的e）是一个名为error的对象，可以通过newError(message)来创建这个对象，异常的描述被作为error对象的一个属性message，可以由构造函数传入，也可以之后赋值。通过这个异常描述message，可以让程序获取异常的详细信息，从而自动处理。求两个数的和实例•scriptlanguage=JavaScripttype=text/javascript•!—//函数默认要求参数为数字functionsum(a,b){•a=parseInt(a);b=parseInt(b);•//如果a或b不能转换为数字则抛出一个异常对象•if(isNaN(a)||isNaN(b)){•thrownewError(argumentsarenotnumbers);}•returna+b;}•try{//错误的调用•vars=sum(c,d);//因为传入字母所以抛出异常•}catch(e){//显示异常的详细信息•alert(e.message);•}//--/script使用newError(message)创建异常对象只是一种默认的习惯，也是内置异常的实现方式。这不是必需的，完全可以抛出任意数据类型的异常，例如一个整数，来作为异常的描述。只要在程序中抛出异常和捕获异常能匹配即可。第一章问题脚本实现输出•scripttype=text/javascript//脚本开始•varcount=0;•document.write(淘宝欢迎您！);//document.write()方法相当于java中的print()方法，表示往页面输出显示信息。•for(i=0;i5;i++)•document.write(H2淘宝欢迎您！/H2);•/script//脚本结束[如果不使用script标签,其里面的文本就会被当作纯文本来处理]JavaScript的使用方式Html页面内嵌JS代码外部JS文件简短缩写方式scriptsrc=hello.jslanguage=javascript/scriptinputname=btntype=buttonvalue=弹出消息框onclick=javascript:alert('欢迎你');/演示示例：外部JS文件和弹出消息框重点•document.write(* );}空格•document.write(br/);}换行•F12开发人员工具(L)-脚本-启动调试•document.write(parseInt(5.89s));5•document.write(parseFloat(36s25.8id));36•代码区分大小写•变量、对象和函数的名称•分号嵌入网页的方式•使用script标签[其位置不固定,可以在head,body标签中的任何地方]•使用外部JavaScript文件[以.js的后缀保存该文件然后指定给script标签的src属性]eg:•scriptsrc=hello.jstype=text/javascriptscript•直接在html标签中语法形式基本数据类型和常量变量变量的声明和赋值•命名规则和java相同，javascript是弱类型语言，所以声明变量时可以不需要指定变量类型，变量类型由赋给变量的值决定所以变量声明时必须赋初值[没有局部变量]。Eg：x=88;document.write(x);但一般使用var关键字。var合法变量名;命名规则和java一样。varx=10同时声明和赋值.•varx,y,z=10声明多个变量。•JavaScript区分大小写,所以大小写不同的变量名表示不同的变量。数据类型•undefined未定义的数据类型null空类型•number数值类型string字符串类型•boolean布尔类型•typeof[运算符]来判断一个值或变量究竟属于哪种数据类型:typeof(变量或值)返回的结果有undefined,number,boolean,string,object[如果变量是null型或者变量是一种引用类型例如对象，函数]。typeoftypeof运算符返回值如下：undefined：变量被声明后，但未被赋值string：用单引号或双引号来声明的字符串boolean：true或falsenumber：整数或浮点数object：javascript中的对象、数组和null演示示例：typeof的功能和用法演示typeof的实例•scripttype=text/javascript•document.write(h2对变量或值调用typeof运算符的返回值/h2);•varwidth,height=10,name=rose;•vardate=newDate();•document.write(typeof(width)+br/);undefined•document.write(typeof(height)+br/);number•document.write(typeof(name)+br/);string•document.write(typeof(true)+br/);boolean•document.write(typeof(null)+br/);object•document.write(typeof(date)+br/);/scriptobject数据类型的解释•undefined类型只有一个值即undefined,当声明的变量未初始化时将被赋予值undefined.值undefined实际上是从null值中派生出来的,因此alert(undefined==null);返回true.尽管其相等但是含义是不同的undefined是声明了变量但未对该变量赋值,null则表示对一个变量赋值为空值.number类型表示实数或浮点数NaN表示非数是number类型eg:typeof(NaN);返回值为number类型;string类型[不对字符和字符串加以区别]使用单引号或双引号;boolean的两个值true或false.运算符号算术运算符赋值运算符比较操作符逻辑运算符位运算符if条件结构if条件结构如果if或else后只有一条语句，则可以省略大括号，但是如果if..else后有多条语句则其语句必须在大括号内。实例：if..else..•htmlhead•title奔跑的猎豹/title•scripttype=text/javascript•varindex=1;//图片编号varlepard;//图片对象•functionrun()•{//得到图片对象document为文档对象【整个文档】使用getElementById()方法访问文档元素•lepard=document.getElementById(leopard);•if(index8){index++;}else{index=1;}•lepard.src=F:\\sctipt\\leopard\\+index+.gif;//在java和javascript中\\等于/}•setInterval(run(),100);/script/headbodyimgsrc=F:\\sctipt\\leopard\\1.gifid=leopard//bod