WEB前台技术4―JavaScript

3Sept.2008©NeusoftConfidentialWEB前台技术—JavaScript东软IT人才实训中心课程结构内容课时（H）第一章：JavaScript简介0.5第二章：JavaScript语言基础0.5第三章：JavaScript流程控制和函数1.5第四章：JavaScript对象1.5第五章：JavaScipt事件1.0第六章：JavaScript对象模型1.5第七章：表单编程入门1.5第一章：JavaScript简介目标:本章旨在向学员简要介绍JavaScript的相关概念及核心功能，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的基本概念2）了解JavaScript的核心功能时间：0.5学时教学方法：讲授pptJavaScript简介•JavaScript简介9JavaScript是一种基于对象的脚本语言9它是解释执行的9在客户端的浏览器中运行9可以被嵌入HTML文件中9代码以纯文本的形式存储在文件中9可以使用任何一种文本编辑器来编辑JavaScript程序JavaScript功能•JavaScript是现在在Web上应用昀为广泛的客户端脚本，它能处理相当多的任务，包括从对表单数据的确认到创建复杂的用户界面¾表单确认¾页面修饰以及特殊效果¾导航系统¾基本数学运算¾动态文档生成JavaScript历史•JavaScript的历史91995年首次出现时，主要是处理一些输入的有效性验证，可以直接在客户端处理9JavaScript的名字本身就是令人感到困惑的，除非能够考虑它的历史，这是因为在名字上有所相似，但JavaScript与Java没有太多联系，事实上Netscape公司昀初把这种语言定为LiveScript。这种语言更名为JavaScript语言更主要的原因是当时整个行业对Java相当看重，非常希望两种语言能够结合起来构造网页应用程序9JavaScript语言本身和Java语言没有关系JavaScript&HTML•HTML&JavaScript9结合方式¾在HTML中嵌入JavaScript¾HTML中引入外部JavaScript文档JavaScript的嵌入使用•JavaScript脚本代码可以嵌入到HTML文档的任何地方9在head部分9在body部分9也可以head和body中都有JavaScript的嵌入使用htmlheadScriptLanguage=JavaScriptdocument.write(这是以JavaScript印出的！);document.write(br);/Script/headbodyonload=alert('hello')ScriptLanguage=JavaScriptalert(a);//先执行，然后才触发onload代码；vard=newDate();vartime=d.getHours();if(time10){document.write(bGoodmorning/b);}else{document.write(iGoodday/i);}/Script/body/htmlJavaScript的嵌入使用•HTML推荐将script标记放在head标记中9浏览器执行HTML页面的过程是自上而下的线性过程9思考：JavaScriptExample.htmlJavaScript的引入使用★•引用外部JavaScript代码9目的：如果多个页面使用相同的JavaScript代码，可以将代码保存在文件中，供页面调用9好处：安全性、代码维护、缓存9保存JavaScript代码的文件要以.js为扩展名☆9在页面中用script的src属性引入链接文件¾示例：runExternalJS.htmlexternal.jsscriptlanguage=“javascript”type=“text/javascript”src=“JavaScript文件所在路径/scriptJavaScript的隐藏•不支持JavaScript的浏览器处理9有的浏览器不识别JavaScript代码，可以将JavaScript代码隐藏，使用!--…//--将代码包含scripttype=“text/javascript”!--JavaScript代码；JavaScript代码；……//--/script练习☻练习：js_exercise1.htmlexercise1.js使用JavaScript将“Hello，JS”写在文档上。要求请在三种不同的位置使用JavaScript。（提示：使用函数document.write(“文字”)在文档上写入文字）第二章:JavaScript语言基础目标:本章旨在向学员介绍JavaScript的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的语法2）了解JavaScript的变量命名、转义字符等时间：0.5学时教学方法：讲授ppt＋课堂演示语法规则★•JavaScript语法（javascript帮助手册）9区分大小写：变量test与变量Test不同9每行结尾的分号可有可无¾两条或者更多条语句可以写在同一行上，语句之间用分号”;”隔开；单独一行中只有一条语句时，可以省略分号9括号表明代码块¾使用大括号括住多条语句形成一个语句块注释/特殊字符•注释9与java、C相同9单行的注释使用“//”¾//Thisisacomment9块注释使用”/*…*/”¾/*Thisisablockofcommentsthatcontinuesforanumberoflines*/•特殊字符9在字符串中插入特殊字符¾如“‘;&9使用\+特殊字符¾如：You&Ising“HappyBirthday”.document.write(“You\&Ising\”HappyBirthday\”.”)变量•变量9在程序中经常需要保存一些临时值，以便被后面的脚本所使用，需要提供一个空间来存储这些值，并可以在以后取出来使用或修改9变量是弱类型的—变量无预定类型★¾varcolor=“red”;varnum=25;varvisible=true；¾变量在使用前也可不需要声明：color=“red”¾解释器在运行时检查其数据类型声明变量•声明变量9用命令var做声明9声明语句可以出现在任何位置，但一定要在使用该变量的语句之前¾声明的变量并不一定要初始化☆varmytest;上面语句中定义了一个mytest变量，但是没有赋值，自动取值为undefinedvarmytest=“Thisisabook”上面语句定义了mytest变量，同时赋予初始值了变量命名•声明变量9在一条声明语句中可以同时声明多个变量，且变量可以有不同的类型vara,b=1,c;9在JavaScript中重复声明一个变量也是可以的，但应尽量避免9在JavaScript中也可以直接使用一个变量而无须声明，但也应该尽量避免•变量的命名9变量必须以字母、下划线（_）或美元符号（$）开头9余下的字符可以是下划线、美元符号或任何的字母或数字9不能使用JavaScript中的关键字或者保留字做为变量名称保留字•保留字•将来的保留字breakdeletefunctionreturntypeofcasedoifswitchvarcatchelseinthisvoidcontinuefalseinstanceofthrowwhiledebuggerfinallynewtruewithdefaultfornulltryabstractdoublegotonativestaticbooleanenumimplementspackagesuperbyteexportimportprivatesynchronizedcharextendsintprotectedthrowsclassfinalinterfacepublictransientconstfloatlongshortvolatile变量类型•变量类型—在JavaScript中有五种原始（基本运算）类型9Undefined—未定义类型（变量值为undefined）¾任何未被赋值的变量：vartest;9String—字符串类型（用””或者’’括起来的字符或数值）vartest=“abc”;9Boolean—布尔类型（变量值为true或false）vartest=true;9Null—空类型（变量值为null）vartest=null;9Number—数字类型（特殊值NaN非数）vartest=5;vartest2=5.0;类型转换☆•类型转换9可以对不同类型的值执行运算，解释器自动将数据类型之一改变（强制转换）为另一种数据类型，然后执行运算¾转换成字符串：toString()¾转换成数字：parseInt(),parseFloat()¾强制类型转换：Boolean(value)String(value)Number(value)运算结果数值与字符串相加将数值强制转换为字符串。布尔值与字符串相加将布尔值强制转换为字符串。数值与布尔值相加将布尔值强制转换为数值。varnum=123;varmsg=“456”;varresult=num+msg;运算符（一）•运算符9赋值运算符¾=¾+=，-=，*=，/=，%=9数学运算符¾加法运算符（+）¾减法运算符（-）¾乘法（*）¾除法（/）¾取余（%）¾一元取反运算符（-）¾递增（++）¾递减（--）运算符（二）•运算符9比较运算符¾相等运算符（==）¾不等运算符（!=）¾大于（）¾小于（）¾大于等于（=）¾小于等于（=）¾严格相等（===）：值相等且类型相同，如varnum=123;varmsg=“123”;alert(num==msg);//结果返回truealert(num===msg);//结果返回false运算符（三）•运算符9逻辑运算符¾逻辑与运算符（&&）¾逻辑或运算符（||）¾逻辑非运算符（!）运算符（四）•typeof运算符9对变量或值调用typeof运算符将返回下列的值之一¾“undefined”—变量是undefined类型的¾“boolean”—变量是boolean类型的¾“number”—变量是number型的¾“string”—变量是string型的¾“object”—变量是一种引用类型或null类型¾“function”—变量是一个函数vari=2;document.write(typeof(i));//返回number第三章：JavaScript流程控制和函数目标:本章旨在向学员介绍JavaScript的流程控制和函数，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的流程控制2）了解函数构成，可以使用函数实现基本功能时间：1.5学时教学方法：讲授ppt＋课堂演示+上机练习流程控制•控制语句9条件语句¾if条件语句¾switch条件语句9循环语句¾for循环语句¾while循环语句9break和continue语句条件语句—if•if条件语句示例：js_if.html条件语句—switch•switch条件语句练习☻练习：js_switch.html利用JavaScript的Date对象的getDay（）方法来获取今天是星期几，如果是星期五则在页面上显示“FinallyFriday！”，如果是星期六则在页面上显示“SuperSaturday！”，如果是星期日则在页面上显示“SleepySunday！”，其他日子显示“Ihopeformyweekend！”（提示利用switch语句）循环语句—for/while•for循环语句示例：js_for.html•while循环语句☻练习：js_while.html循环语句—break/continue•do…while循环语句•break语句9使用break语句让执行过程从for或while循环中跳出•contin