页面设计_3_JavaScript

1实用页面设计方法——JavaScript课程结构内容课时（H）第一章：JavaScript简介0.5第二章：JavaScript基本语法1.5第三章：流程控制和函数2第四章：JavaScript对象2.5第五章：对象模型4.5第六章：操作HTML3第七章：练习1第一章：JavaScript简介学时：0.5学时教学方法：讲授ppt目标:本章旨在向学员简要介绍JavaScript的相关概念及核心功能，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的基本概念2）了解JavaScript的核心功能41.1JavaScript简介•JavaScript–基于对象的脚本语言–解释执行–代码以纯文本形式存储–类型宽松–Netscape公司和Sun公司联手完成51.2JavaScript功能•JavaScript功能–现今WEB上应用最为广泛的客户端脚本，可以处理从表单数据的确认到创建负责用户界面的各种任务：•表单确认•页面修饰以及特殊效果•导航系统•基本数学运算•动态文档生成61.3JavaScript历史•JavaScript历史–JavaScript语言本身和Java语言没有任何关系–1995年首次出现，主要处理一些输入的有效性验证，可以直接在客户端处理71.4JavaScript特点•JavaScript特点–脚本编写–基于对象–简单–安全–动态–跨平台81.5相关概念•相关概念–ECMAScript•一个描述，供扩展–DOM文档对象模型•通过创建树来表示文档–BOM浏览器对象模型•访问和操作浏览器窗口•没有统一的标准，每种浏览器都有自己的BOMECMAScriptDOMBOMJavaScript91.6JavaScript版本•版本介绍–ECMAScript—国际标准–Jscript—微软发布–JavaScript—Netscape公司•HTML&JavaScript1.7JavaScript与JavaJavaScriptJavaApplet不编译，由客户端解释执行编译成class文件面向对象，没有类和继承，内置对象完全面向对象，程序由继承的类组成嵌入HTML文件生成Applet，从HTML中调用不能定义变量类型必须定义变量类型111.8嵌入使用•在HTML中嵌入JavaScript代码–1、在页面中嵌入script代码：scriptlanguage=“JavaScript”type=“text/javascript”…/script•可嵌入到任何位置，建议在head标记中–2、在标记中嵌入script代码•响应标记的某个事件–JavaScriptExample.html121.8嵌入使用-示例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/html131.9引入使用•引入外部的JavaScript代码–多个页面使用相同的JavaScript代码–将共用代码保存在以.js为扩展名的文件中–在页面中使用src属性引入外部文件•scriptsrc=“a.js”/script•JavaScriptExternal.html141.9引入使用-示例htmlheadtitleFirsJavaScriptSample/titlescriptLanguage=JavaScriptsrc=externalJS.js/script/headbodyscriptLanguage=JavaScriptdocument.write(bodybgcolor='yellow'text='blue'br);document.write(fontsize='+3'ThisisjustplainoldHTMLstuff./font);/script/body/html151.10不支持JavaScript的处理•不支持JavaScript的浏览器处理–将JavaScript代码隐藏使用!--JavaSCript代码//--–JavaScriptHide.html161.10不支持JavaScript-示例htmlheadtitleOldBrowsers/title/headbodyfontcolor=0000Fdivalign=centerscriptLanguage=JavaScripttype=text/javascript!--HidingJavaScriptfromOlderBrowsersdocument.write(h2WelcometoNEU!/h2);//StopHidingJavaScriptfromOlderBrowsers//--/scriptimgsrc=sun.pngwidth=320height=250border=0brSun/div/font/body/html第二章：JavaScript基本语法学时：1.5学时教学方法：讲授ppt目标:本章旨在向学员介绍JavaScript的基本语法，通过本课的学习，学员应该掌握如下知识：1）了解JavaScript的语法2）了解JavaScript的变量命名、转义字符等182.1语法•JavaScript语法–区分大小写•变量myTest、myTEST是不同的变量–变量是弱类型–行结尾加分号–括号表明代码块–注释通用简单•在浏览器中逐条解释执行，如果某条语句出现错误，后面的语句将不能执行。192.2注释•注释–单行：//•//Thisisacomment–块注释：/*…*/•/*Thisisablockofcommentsthatcontinuesforanumberoflines*/202.3特殊字符•特殊字符–在字符串中插入特殊字符•如“‘–使用\+特殊字符实现•如：You&Ising“HappyBirthday”.•代码如下：document.write(“You&Ising\”HappyBirthday\”.”)212.4常量/变量•常量–JavaScript中没有常量概念–通常指直接在代码中给定的值•vara=3.1415926;•varb=“hello”;•变量–保存程序中的临时值，可被后面的脚本使用–弱类型222.5变量声明•变量声明–var–在使用变量前声明•varmytest;–可以声明的同时赋值•varmytest=“Thisisabook”;–同时声明多个变量（不建议）•vara,b=1,c;232.6变量命名•变量命名–以字母、下划线（_）或美元符号（$）开头–余下的字符可以是下划线、美元符号或任何的字母、数字–最长为255个字符–不能有空格，大小写敏感–不能使用JavaScript中的关键字或保留字命名2.7JavaScript保留字（一）breakdeletefunctionreturntypeofcasedoifswitchvarcatchelseinthisvoidcontinuefalseinstanceofthrowwhiledebuggerfinallynewtruewithdefaultfornulltry2.7JavaScript保留字（二）abstractdoublegotonativestaticbooleanenumimplementspackagesuperbyteexportimportprivatesynchronizedcharextendsintprotectedthrowsclassfinalinterfacepublictransientconstfloatlongshortvolatile262.8变量类型（了解）•变量类型—五种原始类型–Undefined-未定义类型•未被赋值的变量，值为undefined–String-字符串类型•值用引号括起来–Boolean-布尔类型•值为true/false–Null-空类型•值为null，尚不存在的对象–Number-数字类型——NaN.html•任何数字（NaN也是number类型，表示“非数”）•可以使用typeof(object)来获取object的类型（除了null）；272.9类型转换•类型转换–JavaScript是弱类型语言，变量的类型对应于其值的类型–可以对不同类型的变量执行运算，解释器强制转换数据类型，然后进行处理–如：运算结果数值与字符串相加将数值强制转换为字符串。布尔值与字符串相加将布尔值强制转换为字符串。数值与布尔值相加将布尔值强制转换为数值。282.9类型转换•字符串--数值——StrToNumber.html–parseInt(var)–parseFloat(var)–Number(var)–注意：•parseInt方法和parseflota方法只对string类型有效，且需要是数字开头的字符串–如：parseInt(“100”);292.10语句•语句–区分大小写–语句由一个或多个表达式、关键字或运算符组成–多条语句可以写在同一行上，之间使用分号隔开–单独一行中只有一条语句，可以省略分号302.11运算符•运算符–赋值运算符–数学运算符–比较运算符–逻辑运算符2.11.1赋值运算符运算符示例说明=x=y;把变量y的值赋给x+=x+=y;x=x+y;-=x-=y;x=x-y;*=x*=y;x=x*y;/=x/=y;x=x/y;2.11.2数学运算符运算符说明示例+如果操作数都是数字时执行加法运算，如果其中的操作数有字符串时，会执行连接字符串的作用A=5+8//结果是13A=5+8//结果是58-减法A=8–5*乘法A=8*5/除法A=20/5%取余-相除之后的余数10%3=1++一元递增。此运算符只计算一个操作数，将操作数的值加1。返回的值取决于++运算符是位于操作数之前还是位于操作数之后。++x返回递增后的x值x++返回递增前的x值--一元递减。此运算符只计算一个操作数。返回的值取决于--运算符是位于操作数之前还是位于操作数之后--x返回递减后的x值x--返回递减前的x值-一元求反。此运算符返回操作数的相反数如果a等于5，则-a=-52.11.3关系运算符运算符说明示例==等于。如果两个操作数相等，则返回Truea==b!=不等于。如果两个操作数不等，则返回TrueVar2!=5大于。如果左操作数大于右操作数，则返回TrueVar1var2=大于或等于。如果左操作数大于或等于右操作数，则返回TrueVar1=5Var1=var2小于。如果左操作数小于右操作数，则返回TrueVar2var1=小于或等于。如果左操作数小于或等于右操作数，则返TrueVar2=4Var2=var12.11.4逻辑运算符运算符例子说明&&expr1&&expr2逻辑与||expr1||expr2逻辑或!!expr逻辑非352.11.5typeof运算符•typeof——typeof.html–对变量或值调用typeof运算符将返回下列的值之一•“undefined”变量是undefined类型的•“boolean”变量是boolean类型的•“number”变量是number型的•“string”变量是string型的•“object”变量是一种引用类型或nu