第8章javascript介绍=创新教育基础与实践=大连理工大学

LOGO第八章JavaScript介绍孙焘重点：CSS常用属性4JavaScript的基本语法1JavaScript的事件2document对象3难点：JavaScript的事件机制1document对象的结构和常用属性2CSS格式与应用38.1JavaScript概述JavaScript的功能JavaScript的特性为什么要用JavaScriptJavaScript版的HelloworldJavaScript的编程方法8.1JavaScript概述8.1.1JavaScript的功能JavaScript（JS）是现在在Web上应用最为广泛的客户段脚本编程语言。它能处理相当多的任务，包括对表单数据的确认到创建复杂的用户界面。JS将成为WEB开发人员不得不掌握的语言。8.1JavaScript概述8.1.2JavaScript的特性JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用。它是通过嵌入或调入到标准的HTML语言中实现的。8.1JavaScript概述8.1.3为什么要用JavaScriptJavaScript的出现弥补了HTML语言的缺陷，是Java与HTML折中的选择。与HTML配合使用。HTML只能显示静态页面；JavaScript则可以实现动态地进行页面编辑，输入验证，提交表单等。8.1JavaScript概述8.1.4JavaScript版HelloWorldhtmlbodyscriptlanguage=javascriptdocument.write(HelloWorld!);/script/body/html8.1JavaScript概述8.1.4JavaScript版HelloWorldHtml代码我们都已经很熟悉了，其中仅仅多了一句scriptlanguage=javascriptdocument.write(HelloWorld!);/script其中script标签表示要插入脚本代码，其中language属性表示是js代码，随后标签内中的的document：文档对象document是JavaScript中window（表示当前窗口）和frames（表示当前框架）对象的一个属性，是显示于窗口或框架内的一个文档。document.write()——可以向当前文档对象写入一段字符串。8.1JavaScript概述8.1.4JavaScript版HelloWorld因为运行脚本涉及到本地安全的问题，因此会出现下面这种情况，这是由于浏览器的安全性设置导致的。8.1JavaScript概述8.1.4JavaScript版HelloWorld8.1JavaScript概述8.1.5JavaScript编程方法脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”）。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。8.2JavaScript的基本语法JS脚本的基本结构JS的数据类型与变量JS的控制语句JS的函数与对象JS嵌入到HTML8.2JavaScript的基本语法8.2.1脚本的基本结构scriptlanguage=JavaScript!--JavaScript语句；--/script其中标签script表示使用js脚本语言而!----标签内为js语句，因为这种标签属于html语言的注释语句，这样如果浏览器不支持js，那么js语句也不会显示出来。8.2JavaScript的基本语法8.2.2JS的数据类型与变量JS是区分大小写的脚本语言，其语法与c/c++，java语言很相近。变量命名规则基本相同。JS有很多数据类型，如整数，小数，时间，字符串，数组等等。JS是一种弱数据类型的语言，变量声明只要用var就可以了。例如vari;JS中的变量可以指向任何对象，包括基本数据类型，和HTMLDOM中任意标签对象。8.2JavaScript的基本语法8.2.3JS的控制语句JS的if…else,for(;;),while,swich…case等语句的用法与c语言等完全相同。同时swich()中的常量还不仅仅限于整数。例如for(vari=0;i10;i=i+1){if(i==3)document.write(“No~”);elsedocument.write(i);}8.2JavaScript的基本语法8.2.4JS的函数与对象Js的函数声明使用function关键字。例如functionmyFun(a){alert(a);returnfalse;}a为形参，不用带数据类型返回值可有可无，根据具体情况而定。每个函数都是js的一个对象。函数内部可以使用this，表示对象本身。例如：functionstudent(id,name){this.sid=id;this.sname=name;}8.2JavaScript的基本语法8.2.5JS嵌入到HTMLJs代码可以嵌入在html中的任何地方，但一般都放在head标签之内Js不必有main函数。Js代码在html中顺序执行。在html页面载入后就已经运行完了。8.3JavaScript对象JavaScript对象概述JavaScript对象基础JavaScript内置对象Document对象8.3JavaScript对象8.3.1JavaScript对象概述Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为蓝色。8.3JavaScript对象8.3.2JavaScript对象基础对象是JavaScript的基础。实际上JavaScript语言中的一切都是对象，JavaScript的多数能力也正起源于此。上节说明了创建一个JavaScript对象的方法，即functionstudent(){}。其中this关键字所指的就是这个JavaScript对象的属性。可以使用new关键字初始化一个对象8.3JavaScript对象8.3.3JavaScript内置对象Window对象表示浏览器窗口。Navigator包含客户端浏览器的信息。Screen包含客户端显示屏的信息。History包含了浏览器窗口访问过的URL。Location包含了当前URL的信息。Document代表整个HTML文档，Event代表事件的状态8.3JavaScript对象8.3.4Document对象8.3JavaScript对象8.3.4Document对象8.3JavaScript对象8.3.4Document对象8.4JavaScript事件JS事件概述JS事件方法JS事件应用8.4JavaScript事件8.4.1JS事件概述用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的链接上移动，就产生mouseover事件等等。8.4JavaScript事件8.4.2JS事件方法传统的方法就是定义元素的on...事件，例如对于表单中的一个按钮inputtype=submitvalue=百度一下“onClick=“alert(‘ok’);”其中onClick=“alert(‘ok’);”就表示，当单击该按钮的时候，响应一个alert方法。8.4JavaScript事件8.4.3JS事件应用—验证表单headscriptlanguage=javascriptfunctioncheck(form){if(form.username.value==||form.pwd.value==){alert(请填写完整信息！);returnfalse;}else{returntrue;}}functionjsSubmit(form){if(check(form)){form.submit();}}/scripttitleJavaScript提交表单/title/headbodyformaction=HelloWorld.htmlmethod=postname=theform用户名：inputtype=textname=username/密码：inputtype=passwordname=pwd/inputtype=buttonname=jssubmitvalue=js提交onclick=jsSubmit(theform)//form/body8.4JavaScript事件8.4.3JS事件应用—验证表单在用户输入登录信息（用户名、密码等）并提交表单时，需对用户输入的完整性进行验证。若未通过验证，则提示错误信息；若通过验证，则跳转到HelloWorld.html。(1)在用户点击“js提交”按钮时触发了onclick事件，以表单为参数自动调用jsSubmit()方法。(2)在jsSubmit()方法中，又调用了check()方法；(3)在check()方法中，对表单数据进行检测：①如果表单填写完整，则返回true以继续提交表单；②如果表单填写不完整，则提示“请填写完整信息！”，返回false以中止表单提交；③若表单验证正确，则通过form.submit()方法提交表单，跳转到HelloWorld.html。8.4JavaScript事件8.4.3JS事件应用—验证表单8.4JavaScript事件8.4.3JS事件应用—正则表达式scriptfunctionverifyEmail(email){varmyReg=/^[_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;if(myReg.test(email)){returntrue;}returnfalse;}/script8.4JavaScript事件8.4.3JS事件应用—正则表达式在JavaScript中，正则表达式是由一个RegExp对象表示的。可以使用一个RegExp()构造函数来创建RegExp对象,也可以用JavaScript1.2中的一个特殊语法来创建RegExp对象。就像字符串直接量被定义为包含在引号内的字符一样,正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符。/^[_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/：[_A-Za-z0-9]表示下划线或大小写的字母或数字。test()方法用来测试某段字符串是否匹配指定的正则表达式。若匹配，则返回true；否则返回false。8.5CSS格式与应用HTML排版缺点用CSS改进排版CSS语法用CSS美化网页8.5CSS格式与应用8.5.1Html排版的缺点HTML主要侧重于定义内容，比如p表示一个段落，h1表示标题，而并没有过多设计HTML的排版和