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

1、第八章 JavaScript介绍,重点：,难点：,8.1 JavaScript概述,JavaScript的功能 JavaScript的特性 为什么要用JavaScript JavaScript版的Hello world JavaScript的编程方法,8.1 JavaScript概述,8.1.1 JavaScript的功能 JavaScript（JS） 是现在在Web上应用最为广泛的客户段脚本编程语言。 它能处理相当多的任务，包括对表单数据的确认到创建复杂的用户界面。JS 将成为WEB 开发人员不得不掌握的语言。,8.1 JavaScript概述,8.1.2 JavaScript的特性 Jav

2、aScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。 使用它的目的是与HTML 超文本标记语言、Java 脚本语言（Java 小程序）一起实现在一个Web 页面中连接多个对象，与Web 客户交互作用。 它是通过嵌入或调入到标准的HTML 语言中实现的。,8.1 JavaScript概述,8.1.3 为什么要用JavaScript JavaScript的出现弥补了HTML 语言的缺陷，是Java 与HTML 折中的选择。 与HTML 配合使用。HTML 只能显示静态页面；JavaScript 则可以实现动态地进行页面编辑，输入验证，提交表

3、单等。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World document.write(Hello World!); ,8.1 JavaScript概述,8.1.4 JavaScript版Hello World Html代码我们都已经很熟悉了，其中仅仅多了一句 document.write(Hello World!); 其中标签表示要插入脚本代码，其中language属性表示是js代码，随后标签内中的的document： 文档对象document是JavaScript中window（表示当前窗口）和frames（表示当前框架）对象的一个属性，是显示于窗

4、口或框架内的一个文档。 document.write() 可以向当前文档对象写入一段字符串。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World 因为运行脚本涉及到本地安全的问题，因此会出现下面这种情况，这是由于浏览器的安全性设置导致的。,8.1 JavaScript概述,8.1.4 JavaScript版Hello World,8.1 JavaScript概述,8.1.5 JavaScript编程方法 脚本开发人员可以通过文档对象的属性、方法和事件来掌控、操纵和创建动态的网页元素。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“

5、对象”）。 文档对象模型把整张网页组织成这样的一个树状的结构，树结构中的每一个元素都被视为一个节点（node）。包括JavaScript在内的各种编程语言都可以通过文档对象模型来访问和改变网页的各种细节。,8.2 JavaScript的基本语法,JS脚本的基本结构 JS的数据类型与变量 JS的控制语句 JS的函数与对象 JS嵌入到HTML,8.2 JavaScript的基本语法,8.2.1 脚本的基本结构 其中标签表示使用js脚本语言 而标签内为js语句，因为这种标签属于html语言的注释语句，这样如果浏览器不支持js，那么js语句也不会显示出来。,8.2 JavaScript的基本语法,8.

6、2.2 JS的数据类型与变量 JS是区分大小写的脚本语言，其语法与c/c+，java语言很相近。变量命名规则基本相同。 JS有很多数据类型，如整数，小数，时间，字符串，数组等等。 JS是一种弱数据类型的语言，变量声明只要用var就可以了。例如 var i; JS中的变量可以指向任何对象，包括基本数据类型，和HTML DOM 中任意标签对象。,8.2 JavaScript的基本语法,8.2.3 JS的控制语句 JS的ifelse,for(;),while,swichcase等语句的用法与c语言等完全相同。同时swich()中的常量还不仅仅限于整数。 例如 for(var i=0;i10;i=i+

7、1) if(i=3)document.write(“No”); else document.write(i); ,8.2 JavaScript的基本语法,8.2.4 JS的函数与对象 Js的函数声明使用function关键字。例如 function myFun(a) alert(a);return false; a为形参，不用带数据类型 返回值可有可无，根据具体情况而定。 每个函数都是js的一个对象。函数内部可以使用this，表示对象本身。例如： function student(id, name) this.sid = id; this.sname = name; ,8.2 JavaScri

8、pt的基本语法,8.2.5 JS嵌入到HTML Js代码可以嵌入在html中的任何地方，但一般都放在head标签之内 Js不必有main函数。 Js代码在html中顺序执行。在html页面载入后就已经运行完了。,8.3 JavaScript对象,JavaScript对象概述 JavaScript对象基础 JavaScript内置对象 Document对象,8.3 JavaScript对象,8.3.1 JavaScript对象概述 Javascript的一个重要功能就是面向对象的功能，通过基于对象的程序设计，可以用更直观、模块化和可重复使用的方式进行程序开发。 一组包含数据的属性和对属性中包含数

9、据进行操作的方法，称为对象。比如要设定网页的背景颜色，所针对的对象就是document，所用的属性名是bgcolor，如document.bgcolor=blue，就是表示使背景的颜色为蓝色。,8.3 JavaScript对象,8.3.2 JavaScript对象基础 对象是JavaScript的基础。实际上JavaScript语言中的一切都是对象，JavaScript的多数能力也正起源于此。 上节说明了创建一个JavaScript 对象的方法，即function student () 。其中this 关键字所指的就是这个JavaScript 对象的属性。 可以使用new关键字 初始化一个对象

10、,8.3 JavaScript对象,8.3.3 JavaScript内置对象 Window 对象表示浏览器窗口。 Navigator 包含客户端浏览器的信息。 Screen 包含客户端显示屏的信息。 History 包含了浏览器窗口访问过的 URL。 Location 包含了当前URL的信息。 Document 代表整个 HTML 文档， Event代表事件的状态,8.3 JavaScript对象,8.3.4 Document对象,8.3 JavaScript对象,8.3.4 Document对象,8.3 JavaScript对象,8.3.4 Document对象,8.4 JavaScript

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

12、(form) 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事件,8.4.3 JS事件应用验证表单 在用户输入登录信息（用户名、密码等）并提交表单时，需对用户输入的完整性进行验证。若未通过验证，则提示错误信息；若通过验证，则跳转到HelloWorld.html。 (1)

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

14、则表达式 function 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事件,8.4.3 JS事件应用正则表达式 在JavaScript中，正则表达式是由一个RegExp对象表示的。可以使用一个RegExp()构造函数来创建RegExp对象,也可以用JavaScript 1.2中的一个特殊语法来创建RegExp对象。就像字符串直接量被定义为包含在引号内的字符一样,正

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

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

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

18、r），属性（properties）和属性的取值（value）。基本格式如下： selector property: value （选择符 属性：值）,8.5 CSS格式与应用,8.5.3 Css的基本语法 选择符组： 可以把相同属性和值的选择符组合起来书写，用逗号将选择符分开，这样可以减少样式重复定义： h1, h2, h3, h4, h5, h6 color: green ,8.5 CSS格式与应用,8.5.3 Css的基本语法 类选择符： 用类选择符能够把相同的元素分类定义不同的样式，定义类选择符时，在自定类的名称前面加一个点号。假如想要两个不同的段落，一个段落向右对齐，一个段落居中，可以先定义两个类： p.right text-align: right p.center text-align: center,8.5 CSS格式与应用,8.5.3 Css的基本语法 注释:/* . */ 你可以在CSS中插入注释来说明你代码的意思，注释有利于你或别人以后编辑和更改代码时理解代码的含义。在浏览器中，注释是不显示的。CSS注释以/* 开头，以*/ 结尾，如下: /* 定义段落样式表