第1章_JS语言基础

JavaScript语言JavaScript语言1JavaScript概述2JavaScript语言基础3JavaScript程序流程控制语句4JavaScript函数和事件处理程序5HTML文档对象模型6JavaScript内置的常用对象7用JavaScript脚本对HTML数据的验证1JavaScript概述JavaScript的起源和发展1995年Netscape&Sun联合推出JavaScript语言的前身叫作LiveScript90年代末ECMA发布语言标准ECMA-262ISO接受了该标准并命名为ISO-16262JavaScript分为三部分：核心、客户端、服务器端本课程主要介绍客户端JavaScript。JavaScript的特点:基于对象的语言：预定义对象、自定义对象事件驱动的语言：事件响应程序简单性：在浏览器中解释执行动态性：直接对用户输入作出相应跨平台性：只依赖浏览器安全性：沙箱机制节省交互时间：在客户端执行，无需流量1JavaScript概述2JavaScript语言基础数据类型基本数据类型数值型String字符串类型布尔类型复合数据类型对象数组2JavaScript语言基础常量数值型常量：10进制、8进制(0开头)、16进制(0x开头)布尔常量：Ture,False字符型常量：单引号或双引号括起来的单个字符或多个字符特殊字符：null、控制字符（\b,\n,\r等）2JavaScript语言基础变量变量声明在JavaScript中，变量声明的一般形式是：var变量名表；变量类型的动态变化在声明变量时不需要也不能指定变量的类型。JavaScript解释器会根据变量的当前值以及变量的使用方法确定变量的数据类型，并完成适当的转换。2JavaScript语言基础变量命名必须遵循以下规则：a.第一个字符必须是一个字母、或一个下划线(_)或一个美元符号($)。b.后续的字符可以是字母、数值、下划线或美元符；不能有空格、＋、－、，或其它符号。c.不能使用JavaScript中的关键字作为变量。在JavaScript中定义了50多个关键字，这些关键字是JavaScript内部使用的，不能作为变量的名称。如var、int、double、true不能作为变量的名称。变量的作用域变量的作用域由声明变量的位置决定，决定哪些脚本语句可访问该变量。2JavaScript语言基础运算符算术运算符双目运算符：+、-、*、/、%单目运算符：-、++、--关系运算符：、、=、=、==、!=逻辑运算符：&&、||、!字符串连接运算符：+条件运算符：条件?值1:值2表达式：算数、字符串、逻辑、赋值2JavaScript语言基础数组Vararray_name=newArray();创建了一个名为array_name的空数组。Vararray_name=newArray(100);创建了一个名为array_name、可以存放100个元素的数组。Vararray_name=newArray(red,blue,green,1,2,3);创建了一个名为array_name、有6个元素的数组，各元素的值依此是red,blue,green,1,2,3。2JavaScript语言基础【例】创建和使用数组的范例，文件名为ex3_1.htm。HTMLHEADTITLE编写JavaScript脚本/TITLESCRIPTtype=JavaScriptvarweek=newArray(7);//创建数组，共有7个单元，下标为0~6week[1]=Monday;//将数组的1号单元赋值为Mondaydocument.write(todayis+week[1]);//输出数组的1号单元的值/SCRIPT/HEAD/HTML3JavaScript程序流程控制语句条件控制语句1．if语句最简单的条件控制语句是假如某—条件为真．那么程序转向一个特定的程序分支。其基本的语法格式如下：if(条件)｛执行语句｝3JavaScript程序流程控制语句2．if…else语句在if结构中，当条件为false时不进行任何特殊处理。但是假如处理必须二选一，就需要使用if...else语句。其基本语法格式如下：if(条件)｛执行语句1}else{执行语句2}3JavaScript程序流程控制语句3.switch语句switch(表达式){case常量1:语句组1break；case常量2:语句组2break；...case常量n:语句组nbreak；[default:语句组n+1]}3JavaScript程序流程控制语句循环控制语句1.for循环控制语句for(初始化部分；条件部分；更新部分)｛执行部分}2.for…in循环控制语句for(属性或数组下标in对象或数组){执行部分}3JavaScript程序流程控制语句3.while循环控制语句while(条件)｛执行语句}4.do…while循环控制语句do{执行语句}while(条件)4JavaScript函数和事件处理程序JavaScript函数定义function函数名（参数表）{语句组return结果}【例】编写一个网页文件ex3_8.htm，使用JavaScript定义一个函数用于计算两个整数的和。HTMLHEADTITLE计算两个整数的和/TITLESCRIPTtype=JavaScript!--functionsumXY(x,y){//定义函数varresult;result=x+y;returnresult;}//--/SCRIPT/HEADBODYfontsize=5SCRIPTtype=JavaScript!--varr;r=sumXY(250,150);document.write(250+150=,r);//--/SCRIPT/BODY/HTML4JavaScript函数和事件处理程序JavaScript事件处理程序浏览器为了响应某个事件而进行的处理过程，叫做事件处理。浏览器在程序运行的大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理程序，完成事件处理过程。设置一个对象使其在某个事件发生时便执行指定的函数，需要遵循指定的语法格式。格式如下：on事件名=事件处理代码4JavaScript函数和事件处理程序JavaScript中常见的事件事件名触发事件的条件事件名触发事件的条件Blur对象失去焦点Mousedown在对象处按下鼠标按键Change对象中的内容发生变化Mousemove鼠标在对象表面移动Click单击对象Mouseover鼠标在对象表面Dblclick双击对象Mouseout鼠标移离对象表面Focus对象获得焦点Mouseup鼠标键被释放Keypress发生键盘击键Move窗口被移动Keydown键盘的按键被按下Resize窗口被放大或缩小Keyup键盘的按键被释放Submit表单内容被执行提交Load浏览器窗口中载入文档内容Select文本框或文本区域中的文本被选定Unload关闭浏览器中的文档4JavaScript函数和事件处理程序【例】当浏览器中文档的主体部分body被单击时，会产生click事件。请编写一个网页文件ex3_9.htm，使得用户单击浏览器窗口中的文档时，显示一个消息框。HTMLHEADTITLE事件响应实例/TITLESCRIPTtype=JavaScript!--functionsayThanks(){alert(谢谢你的单击);}//--/SCRIPT/HEADBODYonClick=sayThanks()H1align=center请单击一下/H1/BODY/HTML5HTML文档对象模型JavaScript语言是基于对象的，而不是面向对象的。之所以说它是一门基于对象的语言，主要是因为它没有提供象抽象、继承、重载等有关面向对象语言的许多功能。而是把其它语言所创建的复杂对象统一起来，从而形成一个非常强大的对象系统。5HTML文档对象模型创建对象使用如下格式：Newobject=newObject(参数表)例如，创建一个日期新对象：newDate=newDate();或birthday=newDate(December12,2006);之后就可使newDate或birthday作为一个新的日期对象了。5HTML文档对象模型HTML文档对象模型文档对象模型(DOM)就是所有对象组成的总体，是一种为了命名所有的对象而建立的命名系统。该命名系统建立在对象层次的基础之上。5HTML文档对象模型windowdocumentlocationhistorynavigatorlinksanchorsimagesformsbuttontexttextareapasswordsubmitcheckboxradioresetselecthiddenfileupload5HTML文档对象模型window对象history对象location对象document对象window.status属性5HTML文档对象模型1.window对象window对象是最顶级的对象，它是其他对象的父对象。这种对象代表HTML文档在浏览器窗口的内容区域。在多重框架环境下，每个框架都是一个窗口。所有的动作都是在窗口内发生的，窗口是对象层次中最外部的元素，它的物理界限包含文档。5HTML文档对象模型（1）window对象的常用属性及功能如下：document表示窗口中显示的当前文档history表示最近访问过的URL列表location表示窗口中显示的当前URLstatus表示窗口状态栏中显示的信息5HTML文档对象模型（2）window对象的常用方法及功能如下：alert()它是一个弹出对话框，用以提示用户某些注意事项。confirm()它是一个消息框，有两个按钮“确认”和“取消”，单击确认返回true，单击取消，返回false，利用返回值可以作进一步的工作。prompt()这是一个消息框，不过该消息框允许用户输入某种信息。该信息被当作prompt()的结果返回。open()该方法打开一个新的浏览器窗口，原窗口不变。新打开的窗口可以定义大小、有无工具栏、有无状态栏、有无地址栏、可否改变尺寸、有无滚动条。close()关闭当前浏览的窗口。有些浏览器不支持此方法。blur()从窗口中移走焦点。在很多系统中，该操作把窗口送往后台。focus()使窗口获得焦点。在很多系统中，该操作把窗口送往前台。5HTML文档对象模型【例】编写一个网页文件ex3_10.htm。当打开该网页时，在浏览器窗口的状态栏中从右到左滚动显示文字：“欢迎光临本购物网站”。HTMLHEADTITLEWINDOW范例/TITLE/HEADBODYcenterh1这里是购物网站，欢迎您的光临!/h1/centerSCRIPTtype=JavaScript!--varmsg=...欢迎光临本购物网站!...;varpos=0;functionscrollMsg(){window.status=msg.substr(pos,msg.length)+msg.substr(0,pos);pos++;if(posmsg.length)pos=0;}setInterval(scrollMsg(),300);//定时执行函数//--/SCRIPT/BODY/HTML5HTML文档对象模型2.document对象窗口内的内容是document，因此它是最主要的对象之一。每个载入窗口中的HTML文档成为一个document对象。document对象几乎包含