javascript创新教育基础与实践课件

《javascript创新教育基础与实践课件》由会员分享，可在线阅读，更多相关《javascript创新教育基础与实践课件（45页珍藏版）》请在装配图网上搜索。

1、LOGO第八章第八章 JavaScript介绍介绍孙焘孙焘重点：重点：CSS常用属性常用属性 4JavaScript的基本语法的基本语法 1JavaScript的事件的事件 2document对象对象 3难点：难点：JavaScript的事件机制的事件机制 1document对象的结构和常用属性对象的结构和常用属性 2CSS格式与应用格式与应用 38.1 JavaScript概述概述vJavaScript的功能的功能vJavaScript的特性的特性v为什么要用为什么要用JavaScriptvJavaScript版的版的Hello worldvJavaScript的编程方法的编程方法8.1 J

2、avaScript概述概述v8.1.1 JavaScript的功能的功能 JavaScript（JS）是现在在Web上应用最为广泛的客户段脚本编程语言。它能处理相当多的任务，包括对表单数据的确认到创建复杂的用户界面。JS 将成为WEB 开发人员不得不掌握的语言。8.1 JavaScript概述概述v8.1.2 JavaScript的特性的特性 JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML 超文本标记语言、Java 脚本语言（Java 小程序）一起实现在一个Web 页面中连接多个对象，与Web 客户交

3、互作用。它是通过嵌入或调入到标准的HTML 语言中实现的。8.1 JavaScript概述概述v8.1.3 为什么要用为什么要用JavaScript JavaScript的出现弥补了HTML 语言的缺陷，是Java 与HTML 折中的选择。与HTML 配合使用。HTML 只能显示静态页面；JavaScript 则可以实现动态地进行页面编辑，输入验证，提交表单等。8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello World document.write(Hello World!);8.1 JavaScript概述概述v8.1.4 JavaScript版版Hel

4、lo World Html代码我们都已经很熟悉了，其中仅仅多了一句 document.write(Hello World!);其中标签表示要插入脚本代码，其中language属性表示是js代码，随后标签内中的的document：文档对象document是JavaScript中window（表示当前窗口）和frames（表示当前框架）对象的一个属性，是显示于窗口或框架内的一个文档。document.write()可以向当前文档对象写入一段字符串。8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello World因为运行脚本涉及到本地安全的问题，因此会出现下面这种情况

5、，这是由于浏览器的安全性设置导致的。8.1 JavaScript概述概述v8.1.4 JavaScript版版Hello World 8.1 JavaScript概述概述v8.1.5 JavaScript编程方法编程方法 脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”）。文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。8.2 JavaScri

6、pt的基本语法的基本语法vJS脚本的基本结构脚本的基本结构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语言很相近。变量命名规则基本相同

7、。JS有很多数据类型，如整数，小数，时间，字符串，数组等等。JS是一种弱数据类型的语言，变量声明只要用var就可以了。例如 var i;JS中的变量可以指向任何对象，包括基本数据类型，和HTML DOM 中任意标签对象。8.2 JavaScript的基本语法的基本语法v8.2.3 JS的控制语句的控制语句 JS的ifelse,for(;),while,swichcase等语句的用法与c语言等完全相同。同时swich()中的常量还不仅仅限于整数。例如 for(var i=0;i10;i=i+1)if(i=3)document.write(“No”);else document.write(i);

8、8.2 JavaScript的基本语法的基本语法v8.2.4JS的函数与对象 Js的函数声明使用function关键字。例如 function myFun(a)alert(a);return false;a为形参，不用带数据类型 返回值可有可无，根据具体情况而定。每个函数都是js的一个对象。函数内部可以使用this，表示对象本身。例如：function student(id,name)this.sid =id;this.sname =name;8.2 JavaScript的基本语法的基本语法v8.2.5JS嵌入到HTML Js代码可以嵌入在html中的任何地方，但一般都放在head标签之内 J

9、s不必有main函数。Js代码在html中顺序执行。在html页面载入后就已经运行完了。8.3 JavaScript对象对象vJavaScript对象概述对象概述vJavaScript对象基础对象基础vJavaScript内置对象内置对象vDocument对象对象8.3 JavaScript对象对象v8.3.1 JavaScript对象概述对象概述 Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。一组包含数据的属性和对属性中包含数据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是documen

10、t，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为蓝色。8.3 JavaScript对象对象v8.3.2 JavaScript对象基础对象基础 对象是JavaScript的基础。实际上JavaScript语言中的一切都是对象，JavaScript的多数能力也正起源于此。上节说明了创建一个JavaScript 对象的方法，即function student()。其中this 关键字所指的就是这个JavaScript 对象的属性。可以使用new关键字 初始化一个对象8.3 JavaScript对象对象v8.3.3 JavaScript内置对象内置

11、对象 Window 对象表示浏览器窗口。Navigator 包含客户端浏览器的信息。Screen 包含客户端显示屏的信息。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事件应用事

12、件应用8.4 JavaScript事件事件v8.4.1 JS事件概述事件概述 用户与网页交互时产生的操作，称为事件。绝大部分事都由用户的动作所引发，如：用户按鼠标的按钮，就产生click事件，若鼠标的指针的链接上移动，就产生mouseover事件等等。8.4 JavaScript事件事件v8.4.2 JS事件方法事件方法 传统的方法就是定义元素的on.事件，例如对于表单中的一个按钮 其中onClick=“alert(ok);”就表示，当单击该按钮的时候，响应一个alert方法。8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单function check(fo

13、rm)if(form.username.value=|form.pwd.value=)alert(请填写完整信息！);return false;else return true;function jsSubmit(form)if(check(form)form.submit();JavaScript提交表单用户名：密码：8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单 在用户输入登录信息（用户名、密码等）并提交表单时，需对用户输入的完整性进行验证。若未通过验证，则提示错误信息；若通过验证，则跳转到HelloWorld.html。(1)在用户点击“js 提交”

14、按钮时触发了onclick 事件，以表单为参数自动调用jsSubmit()方法。(2)在jsSubmit()方法中，又调用了check()方法；(3)在check()方法中，对表单数据进行检测：如果表单填写完整，则返回true 以继续提交表单；如果表单填写不完整，则提示“请填写完整信息！”，返回false 以中止表单提交；若表单验证正确，则通过form.submit()方法提交表单，跳转到HelloWorld.html。8.4 JavaScript事件事件v8.4.3JS事件应用事件应用验证表单验证表单8.4 JavaScript事件事件v8.4.3JS事件应用事件应用正则表达式正则表达式 f

15、unction verifyEmail(email)var myReg=/_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/;if(myReg.test(email)return true;return false;8.4 JavaScript事件事件v8.4.3JS事件应用事件应用正则表达式正则表达式 在JavaScript中，正则表达式是由一个RegExp对象表示的。可以使用一个RegExp()构造函数来创建RegExp对象,也可以用JavaScript 1.2中的一个特殊语法来创建RegExp对象。就像字符串直接量被定义为包含在引号内的字符一样,正则表达式直

16、接量也被定义为包含在一对斜杠(/)之间的字符。/_A-Za-z0-9+(_A-Za-z0-9+.)+A-Za-z0-92,3$/：_A-Za-z0-9表示下划线或大小写的字母或数字。test()方法用来测试某段字符串是否匹配指定的正则表达式。若匹配，则返回true；否则返回false。8.5 CSS格式与应用格式与应用vHTML排版缺点v用CSS改进排版vCSS语法v用CSS美化网页8.5 CSS格式与应用格式与应用v8.5.1Html排版的缺点排版的缺点 HTML 主要侧重于定义内容，比如 表示一个段落，表示标题，而并没有过多设计HTML 的排版和界面效果。随着Internet 的迅猛发展，

17、HTML 被广泛应用，上网的人们当然希望网页做得漂亮些，因此HTML 排版和界面效果的局限性日益暴露出来。为了解决这个问题，人们也走了不少弯路，用了一些不好的方法，比如给HTML 增加很多的属性结果将代码变得很臃肿，将文本变成图片，过多利用table 来排版，用空白的图片表示白色的空间等。直到CSS 出现。8.5 CSS格式与应用格式与应用v8.5.2用用css改进排版改进排版 CSS 可算是网页设计的一个突破，它解决了网页界面排版的难题。HTML 的Tag 主要是定义网页的内容(Content)，而CSS 决定这些网页内容如何显示(Layout)。DIV+CSS是网站标准（或称“WEB标准”

18、）中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 CSS又名，层叠样式表，一个样式(Style)的语法由三部分构成：选择器(Selector)属性(Property)属性值(Value)必须把样式表信息包括在 和 标记中，为了使样式表在整个页面中产生作用，应把该组标记及其内容放到 和 中去。8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 基本语法：CSS的定义是由

19、三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector property:value（选择符 属性：值）8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 选择符组：可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义：h1,h2,h3,h4,h5,h6 color:green 8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 类选择符：用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如想要两个不同

20、的段落，一个段落向右对齐，一个段落居中，可以先定义两个类：p.right text-align:right p.center text-align:center8.5 CSS格式与应用格式与应用v8.5.3Css的基本语法的基本语法 注释注释:/*.*/你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/*开头，以*/结尾，如下:/*定义段落样式表*/ptext-align:center;/*文本居中排列*/color:black;/*文字为黑色*/font-family:arial/*字体为arial*/8.5 CSS格式与应用格式与应用v8.5.4使用css美化网页 HTML 中嵌套CSS H1.mylayout border-width:1;border:solid;text-align:center;color:red h1 这个标题使用了内部样式表。h2 这个标题使用了外部样式表。h3 这个标题使用了内嵌样式。8.5 CSS格式与应用格式与应用v8.5.4使用css美化网页LOGOLOGO演讲完毕，谢谢观看！