《javascript创新教育基础与实践课件》由会员分享，可在线阅读，更多相关《javascript创新教育基础与实践课件（44页珍藏版）》请在金锄头文库上搜索。
1、LOGO第八章第八章 JavaScript介绍介绍孙焘孙焘重点：重点：CSS常用属性常用属性4JavaScript的基本语法的基本语法1JavaScript的事件的事件2document对象对象3难点：难点：JavaScript的事件机制的事件机制1document对象的结构和常用属性对象的结构和常用属性2CSS格式与应用格式与应用38.1 JavaScript概述概述vJavaScript的功能的功能vJavaScript的特性的特性v为什么要用为什么要用JavaScriptvJavaScript版的版的Hello worldvJavaScript的编程方法的编程方法8.1 JavaScri
2、pt概述概述v8.1.1 JavaScript的功能的功能JavaScript（JS）是现在在Web上应用最为广泛的客户段脚本编程语言。它能处理相当多的任务，包括对表单数据的确认到创建复杂的用户界面。JS将成为WEB开发人员不得不掌握的语言。8.1 JavaScript概述概述v8.1.2 JavaScript的特性的特性JavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中连接多个对象，与Web客户交互作用。它是通过嵌入或调入到标准的H
3、TML语言中实现的。8.1 JavaScript概述概述v8.1.3 为什么要用为什么要用JavaScriptJavaScript的出现弥补了HTML语言的缺陷，是Java与HTML折中的选择。与HTML配合使用。HTML只能显示静态页面；JavaScript则可以实现动态地进行页面编辑，输入验证，提交表单等。8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello Worlddocument.write(Hello World!);8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello WorldHtml代码我们都已经很熟悉了，其中仅
4、仅多了一句document.write(Hello World!);其中标签表示要插入脚本代码，其中language属性表示是js代码，随后标签内中的的document：文档对象document是JavaScript中window（表示当前窗口）和frames（表示当前框架）对象的一个属性，是显示于窗口或框架内的一个文档。document.write()可以向当前文档对象写入一段字符串。8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello World因为运行脚本涉及到本地安全的问题，因此会出现下面这种情况，这是由于浏览器的安全性设置导致的。 8.1 JavaSc
5、ript概述概述v8.1.4 JavaScript版版Hello World 8.1 JavaScript概述概述v8.1.5 JavaScript编程方法编程方法脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”）。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。8.2 JavaScript的基本语法的基本语法vJS脚本的基本结构脚本的基本结构
6、vJS的数据类型与变量的数据类型与变量vJS的控制语句的控制语句vJS的函数与对象的函数与对象vJS嵌入到嵌入到HTML8.2 JavaScript的基本语法的基本语法v8.2.1 脚本的基本结构脚本的基本结构其中标签表示使用js脚本语言而标签内为js语句，因为这种标签属于html语言的注释语句，这样如果浏览器不支持js，那么js语句也不会显示出来。8.2 JavaScript的基本语法的基本语法v8.2.2 JS的数据类型与变量的数据类型与变量JS是区分大小写的脚本语言，其语法与c/c+，java语言很相近。变量命名规则基本相同。JS有很多数据类型，如整数，小数，时间，字符串，数组等等。JS
7、是一种弱数据类型的语言，变量声明只要用var就可以了。例如vari;JS中的变量可以指向任何对象，包括基本数据类型，和HTMLDOM中任意标签对象。8.2 JavaScript的基本语法的基本语法v8.2.3 JS的控制语句的控制语句JS的ifelse,for(;),while,swichcase等语句的用法与c语言等完全相同。同时swich()中的常量还不仅仅限于整数。例如for(vari=0;i10;i=i+1)if(i=3)document.write(“No”);elsedocument.write(i);8.2 JavaScript的基本语法的基本语法v8.2.4JS的函数与对象Js
8、的函数声明使用function关键字。例如functionmyFun(a)alert(a);returnfalse;a为形参，不用带数据类型返回值可有可无，根据具体情况而定。每个函数都是js的一个对象。函数内部可以使用this，表示对象本身。例如：functionstudent(id,name)this.sid=id;this.sname=name;8.2 JavaScript的基本语法的基本语法v8.2.5JS嵌入到HTMLJs代码可以嵌入在html中的任何地方，但一般都放在head标签之内Js不必有main函数。Js代码在html中顺序执行。在html页面载入后就已经运行完了。8.3 Ja
9、vaScript对象对象vJavaScript对象概述对象概述vJavaScript对象基础对象基础vJavaScript内置对象内置对象vDocument对象对象8.3 JavaScript对象对象v8.3.1 JavaScript对象概述对象概述Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为
10、蓝色。8.3 JavaScript对象对象v8.3.2 JavaScript对象基础对象基础对象是JavaScript的基础。实际上JavaScript语言中的一切都是对象，JavaScript的多数能力也正起源于此。上节说明了创建一个JavaScript对象的方法，即functionstudent()。其中this关键字所指的就是这个JavaScript对象的属性。可以使用new关键字初始化一个对象8.3 JavaScript对象对象v8.3.3 JavaScript内置对象内置对象Window对象表示浏览器窗口。Navigator包含客户端浏览器的信息。Screen包含客户端显示屏的信息。
11、History包含了浏览器窗口访问过的URL。Location包含了当前URL的信息。Document代表整个HTML文档，Event代表事件的状态8.3 JavaScript对象对象v8.3.4 Document对象对象8.3 JavaScript对象对象v8.3.4 Document对象对象8.3 JavaScript对象对象v8.3.4 Document对象对象8.4 JavaScript事件事件vJS事件概述事件概述vJS事件方法事件方法vJS事件应用事件应用8.4 JavaScript事件事件v8.4.1 JS事件概述事件概述用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的
12、动作所引发，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的链接上移动，就产生mouseover事件等等。8.4 JavaScript事件事件v8.4.2 JS事件方法事件方法传统的方法就是定义元素的on.事件，例如对于表单中的一个按钮其中onClick=“alert(ok);”就表示，当单击该按钮的时候，响应一个alert方法。8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单functioncheck(form)if(form.username.value=|form.pwd.value=)alert(请填写完整信息！);returnfalse;
13、elsereturntrue;functionjsSubmit(form)if(check(form)form.submit();JavaScript提交表单用户名：密码：8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单在用户输入登录信息（用户名、密码等）并提交表单时，需对用户输入的完整性进行验证。若未通过验证，则提示错误信息；若通过验证，则跳转到HelloWorld.html。(1)在用户点击“js提交”按钮时触发了onclick事件，以表单为参数自动调用jsSubmit()方法。(2)在jsSubmit()方法中，又调用了check()方法；(3)在ch
14、eck()方法中，对表单数据进行检测：如果表单填写完整，则返回true以继续提交表单；如果表单填写不完整，则提示“请填写完整信息！”，返回false以中止表单提交；若表单验证正确，则通过form.submit()方法提交表单，跳转到HelloWorld.html。8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单8.4 JavaScript事件事件v8.4.3JS事件应用事件应用正则表达式正则表达式functionverifyEmail(email)varmyReg=/_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/;if(my
15、Reg.test(email)returntrue;returnfalse;8.4 JavaScript事件事件v8.4.3JS事件应用事件应用正则表达式正则表达式在JavaScript中，正则表达式是由一个RegExp对象表示的。可以使用一个RegExp()构造函数来创建RegExp对象,也可以用JavaScript1.2中的一个特殊语法来创建RegExp对象。就像字符串直接量被定义为包含在引号内的字符一样,正则表达式直接量也被定义为包含在一对斜杠(/)之间的字符。/_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/：_A-Za-z0-9表示下划线或大小写的字母
16、或数字。test()方法用来测试某段字符串是否匹配指定的正则表达式。若匹配，则返回true；否则返回false。8.5 CSS格式与应用格式与应用vHTML排版缺点v用CSS改进排版vCSS语法v用CSS美化网页8.5 CSS格式与应用格式与应用v8.5.1Html排版的缺点排版的缺点HTML主要侧重于定义内容，比如表示一个段落，表示标题，而并没有过多设计HTML的排版和界面效果。随着Internet的迅猛发展，HTML被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML增加很多的
17、属性结果将代码变得很臃肿，将文本变成图片，过多利用table来排版，用空白的图片表示白色的空间等。直到CSS出现。8.5 CSS格式与应用格式与应用v8.5.2用用css改进排版改进排版CSS可算是网页设计的一个突破，它解决了网页界面排版的难题。HTML的Tag主要是定义网页的内容(Content)，而CSS决定这些网页内容如何显示(Layout)。DIV+CSS是网站标准（或称“WEB标准”）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。8.5 CSS格式与
18、应用格式与应用v8.5.3Css的基本语法的基本语法CSS又名，层叠样式表，一个样式(Style)的语法由三部分构成：选择器(Selector)属性(Property)属性值(Value)必须把样式表信息包括在和标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到和中去。8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 基本语法：CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selectorproperty:value（选择符属性：值）8.5 CSS格式与应用格式与应用v8.
19、5.3Css的基本语法的基本语法选择符组：可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6color:green8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法类选择符：用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如想要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类：p.righttext-align:rightp.centertext-align:center8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法
20、注释注释:/* . */你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/*开头，以*/结尾，如下:/*定义段落样式表*/ptext-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/8.5 CSS格式与应用格式与应用v8.5.4使用css美化网页HTML中嵌套CSSH1.mylayoutborder-width:1;border:solid;text-align:center;color:redh1这个标题使用了内部样式表。h2这个标题使用了外部样式表。h3这个标题使用了内嵌样式。8.5 CSS格式与应用格式与应用v8.5.4使用css美化网页LOGO
