javascri创新教育基础与实践课件_第1页
javascri创新教育基础与实践课件_第2页
javascri创新教育基础与实践课件_第3页
javascri创新教育基础与实践课件_第4页
javascri创新教育基础与实践课件_第5页
已阅读5页，还剩40页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第八章JavaScript介绍孙焘重点：CSS常用属性

4JavaScript的基本语法

1JavaScript的事件

2document对象

3难点：JavaScript的事件机制

1document对象的结构和常用属性

2CSS格式与应用

38.1JavaScript概述JavaScript的功能JavaScript的特性为什么要用JavaScriptJavaScript版的HelloworldJavaScript的编程方法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为什么要用JavaScriptJavaScript的出现弥补了HTML语言的缺陷，是Java与HTML折中的选择。与HTML配合使用。HTML只能显示静态页面；JavaScript则可以实现动态地进行页面编辑，输入验证，提交表单等。8.1JavaScript概述8.1.4JavaScript版HelloWorld<html><body><scriptlanguage="javascript">

document.write("HelloWorld!");</script></body></html>8.1JavaScript概述8.1.4JavaScript版HelloWorldHtml代码我们都已经很熟悉了，其中仅仅多了一句<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;i<10;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嵌入到到HTMLJs代码可可以嵌嵌入在在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="submit"value="百度一一下““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><title>JavaScript提交表表单</title></head><body><formaction="HelloWorld.html"method="post"name="theform">用户名名：<inputtype="text"name="username"/>密码：：<inputtype="password"name="pwd"/><inputtype="button"name="jssubmit"value="js提交"onclick="jsSubmit(theform)"/></form></body>8.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;}</script>8.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的排版和界界面效果。。随着Internet的迅猛发展展，HTML被广泛应用用，上网的的人们当然然希望网页页做得漂亮亮些，因此此HTML排版和界面面效果的局局限性日益益暴露出来来。为了解解决这个问问题，人们们也走了不不少弯路，，用了一些些不好的方方法，比如如给HTML增加很多的的属性结果果将代码变变得很臃肿肿，将文本本变成图片片，过多利利用table来排版，用用空白的图图片表示白白色的空间间等。直到到CSS出现。8.5CSS格式与应用用8.5.2用css改进排版CSS可算是网页页设计的一一个突破，，它解决了了网页界面面排版的难难题。HTML的Tag主要是定义义网页的内内容(Content)，而CSS决定这些网网页内容如如何显示(Layout)。DIV+CSS是网站标准准（或称““WEB标准”）中中常用术语语之一，通通常为了说说明与HTML网页设计语语言中的表表格（table）定位方式式的区别，，因为XHTML网站设计标标准中，不不再使用表表格定位技技术，而是是采用DIV+CSS的方式实现现各种定位位。8.5CSS格式与应用用8.5.3Css的基本语法法CSS又名，层叠叠样式表，，一个样式式(Style)的语法由三三部分构成成：选择器(Selector)属性(Property)属性值(Value)必须把样式式表信息包包括在<style>和</style>标记中，为为了使样式式表在整个个页面中产产生作用，，应把该组组标记及其其内容放到到<HEAD>和</HEAD>中去。8.5CSS格式与应用用8.5.3Css的基本语法法基本语法：：CSS的定义是由由三个部分分构成：选选择符（selector），属性性（properties）和属性性的取值值（value）。基本本格式如如下：selector{property:value}（选择符符{属性：值值}）8.5CSS格式与应应用8.5.3Css的基本语语法选择符组组：可以把相相同属性性和值的的选择符符组合起起来书写写，用逗逗号将选选择符分分开，这这样可以以减少样样式重复复定义：：h1,h2,h3,h4,h5,h6{color:green}8.5CSS格式与应应用8.5.3Css的基本语语法类选择符符：用类选择择符能够够把相同同的元素素分类定定义不同同的样式式，定义义类选择择符时，，在自定定类的名名称前面面加一个个点号。。假如想想要两个个不同的的段落，，一个段段落向右右对齐，，一个段段落居中中，可以以先定义义两个类类：p.rig

人人文库> 全部分类> 专业文献 > 生活休闲

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论