网站规划建设与管理维护（第三版） 课件 单元5 JavaScript语言编程_第1页
网站规划建设与管理维护（第三版） 课件 单元5 JavaScript语言编程_第2页
网站规划建设与管理维护（第三版） 课件 单元5 JavaScript语言编程_第3页
网站规划建设与管理维护（第三版） 课件 单元5 JavaScript语言编程_第4页
网站规划建设与管理维护（第三版） 课件 单元5 JavaScript语言编程_第5页
已阅读5页，还剩42页未读， 继续免费阅读

下载本文档

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

文档简介

单元5JavaScript语言编程网站规划建设与管理维护（第三版）单元

1了解网站规划与设计学习目标1了解什么是脚本语言掌握JavaScript脚本的基本语法理解JavaScript的常用函数学会在网页中添加JavaScript脚本学会吃苦耐劳的工匠精神了解文档对象模型DOM单元内容及任务说明

任务1JavaScript语言编程

脚本语言（ScriptLanguage）是为了缩短传统的编写-编译-连接-运行（edit-compile-link-run）过程而创建的计算机编程语言。JavaScript等网页脚本语言目前被广泛地应用于网页设计中，通常可以由应用程序临时调用并执行，网页脚本不仅可以减小网页的规模和提高网页浏览速度，而且可以丰富网页的表现。网页脚本语言按应用场合划分，可分为服务器端的脚本语言和浏览器端的脚本语言。

本任务围绕JavaScript语言编程展开。任务2

应用文档对象模型DOM任务3应用JavaScript内置对象

DOM（DocumentObjectModel，文档对象模型）是W3C制订的标准。DOM是一个能够使程序和脚本动态访问和更新文档内容、结构及样式的接口，通俗一些讲，DOM是这样一种规则：它将HTML文档中的各个对象按容器级别组织成一种树形访问结构，以便于JavaScript等面向对象编程语言可以编程访问文档中所有的对象及其属性方法。DOM提供了两种标准对象集：HTML和XML，并有一个标准接口访问并操纵它们。

本任务围绕了解文档对象模型DOM展开。

JavaScript提供了很多非常有用的内置对象，常用的有数学对象、字符串对象、日期对象和数组对象等。

本任务围绕应用JavaScript内置对象展开。任务1JavaScript语言编程确定网站建设的目的8888888888888确定网站建设的目的网站结构总体策划010205任务实施--JavaScript语言编程JavaScript如何写入JavaScript如何输出显示事件及事件处理确定网站建设的目的03应用JavaScript函数确定网站建设的目的04应用JavaScript对象任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程任务实施-JavaScript语言编程

相关知识

相关知识相关知识-JavaScript简介JavaScript是世界上最流行的脚本编程语言之一，是可插入HTML页面的编程代码，广泛用于服务器、PC、笔记本式计算机、平板电脑和智能手机等设备。JavaScript很容易学习，它与HTML代码一样都是纯文本形式，通过使用标签对将代码直接写到HTML文档中，用IE浏览器可以立即查看JavaScript脚本的运行结果。JavaScript是动态的，它可以直接对用户的输入做出响应。JavaScript既可以用在客户端，也可以用在服务器端，但主要是用在客户端动态地改变网页的显示。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使得网页包含更多活跃的元素和更加精彩的内容。任何能编写HTML文档的软件都可以用来编写JavaScript代码。本章的操作实例均使用带有代码提示功能的Dreamweaver进行编辑。使用这种可视化的IDE工具进行编程，有时只需输入几个字符或按空格，就会智能地给出一系列可选的函数或者变量供选择输入，给编程者带来很大的方便。使用<script>…</script>标签对可以在HTML文档的任意地方插入JavaScript，甚至允许在<html>标签之前或</html>标签之后插入JavaScript。

相关知识

相关知识

相关知识任务2应用文档对象模型DOM确定网站建设的目的8888888888888确定网站建设的目的网站结构总体策划0102任务实施-应用文档对象模型使用window对象的属性动态改变窗口状态栏的显示使用document对象确定网站建设的目的03应用Location对象确定网站建设的目的04应用form对象和form元素对象任务实施-应用文档对象模型任务实施-应用文档对象模型任务实施-应用文档对象模型任务实施-应用文档对象模型相关知识-DOM文档对象模型简介在本书中，使用的是DOM的HTML对象集（有关HTMLDOM的一切，参见W3C技术推广网站/）。DOM将HTML文档看作是嵌套其他元素的树形结构元素。所有的元素，包括它们包含的文字以及树形都可以被DOM树访问到，它们的内容可以被修改和删除，并且可以通过DOM建立新的元素。相关知识-DOM文档对象模型简介基于这样的结构化文档对象模型，每个网页元素例如窗口和文档都是一个对象，每个对象（即网页元素）都有自己的属性、方法及事件。JavaScript可以通过从根结点往下访问对象的属性和方法的方式进行编程，以此实现动态改变网页元素的显示样式或者输出客户端信息，这是JavaScript作为前端显示脚本的基础。在DOM中，浏览器会为每一个网页自动创建window对象、document对象、history对象、location对象和navigater对象。每个对象都具有其父对象的属性和方法，属性用于描述Web页面或文档的变量，方法用于操控部分Web页面。要在脚本中改变编程、读取某个对象的属性、使用其方法时，需要指定完整的路径。对照图5-55所示的层次结构图，完整路径为：从左至右顺着箭头方向，用点号“.”连接，直到指定的对象或对象的属性方法。例如，一个Button对象的value属性的完整路径为window.document.formname.buttonname.value。window对象位于浏览器所有对象的最顶层，其他对象都是该对象的子对象，所以一般来说，可以省略。例如：window.open()可以写成open()；window.document.write()可以写成document.write()。下面讲解几个常用的浏览器对象。相关知识-window对象只要打开浏览器窗口，就会自动创建window对象。window对象包括两类窗口：单个网页窗口和窗口框架（frame/iframe）。前者指在一个浏览器窗口中只打开一个网页；后者指在一个浏览器窗口中打开一个框架集，它是由多个网页（每个网页就是一个frame，也称为帧）组成的一个页面。帧窗口继承窗口对象所有的属性和方法。帧集合非空时，帧的个数由属性window.frames.length给出，各帧用window.frames[0]，window.frames[1],…来表示。对于这两类窗口，相同的属性方法所起的作用会有所不同。相关知识-document对象Document对象是一个顶层对象，不需要预先实例化就可直接使用。代码所在的HTML文档就是它的一个实例，它包含了当前网页的所有信息，并向浏览器提供显示HTML的方法，是脚本语言中用来输出结果的必不可少的方法。引用该对象属性和方法的格式如下：如果是对当前窗口，则用：pertyname如果是对指定窗口，则用：windowObjectNpertyname相关知识-history对象History对象包含一组用户在浏览器中访问过的URL信息。相关知识-location对象location对象提供了浏览器窗口中文件的来源、URL、主机名、路径等信息。通常情况下，一个URL的格式如下：协议//主机:端口/路径名称#哈希标识?搜索条件例如：9:8008/map1/individual.asp#A?uName=Mary各部分说明如下：①协议：URL的起始部分，包含两个斜杠//。如http，还可以是ftp、file。②主机：主机域名，或者一个网络主机的IP地址。如9。③端口：服务器用于通信的通信端口。如8008。④路径名称：URL的路径方面的信息。如map1/individual.asp。⑤哈希标识：URL中的锚名称，包括哈希掩码（#）。只应用于HTTP的URL。⑥搜索条件：URL中的任何查询信息，包括问号。只应用于HTTP的URL。相关知识-form对象和form元素对象form对象是document对象下的一个子对象，表示表单对象。form对象代表一个HTML表单，在HTML文档中<form>每出现一次，就有一个Form对象被创建。forms[]是一个数组，下标从0开始，它包含了文档中所有的表单；form元素对象则是form对象的子对象。form及form元素是开发动态网站必不可少的网页元素，它们是用户与Web服务器交互的桥梁。详细了解form对象和form元素对象对动态网页编程是有很大好处的。1）form对象引用某个form对象的语法是：document.forms[index]或document.formname2）form元素对象引用form元素对象的语法如下：documentname.formname.elementname或document.formname.elements[index].type任务3应用JavaScript内置对象确定网站建设的目的8888888888888确定网站建设的目的0102任务实施-应用JavaScript内置对象利用Math对象实现抽奖效果使用String对象确定网站建设的目的03使用Date对象制作倒计时牌、显示时钟确定网站建设的目的04使用Array对象实现跑马灯特效任务实施-应用JavaScript内置对象任务实施-应用JavaScript内置对象任务实施-应用JavaScript内置对象任务实施-应用JavaScript内置对象任务实施-应用JavaScript内置对象相关知识-Math对象Math对象是内置对象，不需要使用new操作符来创建对象实例，在JavaScript中可以直接调用Math对象的属性和方法。Math对象的属性、方法及其功能分别见表。相关知识-String对象

在JavaScript中，有字符串数据类型，也有字符串对象。可以将任何字符串类型数据作为字符串对象处理。当定义了一个字符串后，可以直接将其作为对象使用；也可以通过如下方法定义一个String对象：varstr=newString("abcdef")String对象有一个只读属性length，语法为str.length，该属性返回字符串的字符个数，当字符串为空时，则返回0。相关知识-Date对象Date对象可以存储任意一个日期时间。如果不指定时区，都采用UTC（世界时间）时区，与GMT（格林威治时间）在数值上是一样的。Date对象没有提供直接访问的属性。①使用Date对象之前，必须先使用New操作符创建一个实例。如果要创建一个初始值为当前时间的Date对象实例，可用如下格式：vartoday=newDate();如果要创建一个自定初始值的Date对象实例，可以用以下格式之一：newDate(yr_num,mo_num,day_num)newDate("mo_num/day_num/yr_num")newDate("monthday,yearhours:minutes:seconds")newDate(yr_num,mo_num,day_num,hr_num,min_num,sec_num)②获取日期和时间的方法，设置日期和时间的方法见表。假设已经创建了三个日期对象：DateName=newDate("August19,201101:25:30")CurDate=newDate("May

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论