网页设计与制作_第1页
网页设计与制作_第2页
网页设计与制作_第3页
已阅读5页，还剩43页未读， 继续免费阅读

下载本文档

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

文档简介

1、电子科技大学毕业设计（论文）论文题目：网页设计与制作学习中心（或办学单位）：电子科技大学指导老师：官晓波职 称：高级实马 学生姓名：钟华学 号:V080604411 专 业:计算继续教育学院电子科技大学制 网络教育学院2012年06月12日电子科技大学毕业设计（论文）任务书题目：网页设计与制作任务与要求：禾I用所学的语言做一个以介绍低碳生活为主题的静态网页以及网页多个模块的连接。时间：2012 年2 月28 日至 2012_年 6月4 日共8 周学习中心：（或办学单位）电子科技大学学生姓名：钟华学号：v08专业：计算机科学与技术指导单位或教研室：电子科技大学中山学习中心指导教师：官晓波职称：高

2、继续教育学院电子科技大学网络教育学院制2012年6月12日毕业设计（论文）进度计划表日期工作内容执行情况指导教师 签字4月15日至4月20日进行毕业资料收集和整理良好4月21日 至5月1日网页设计和制作良好5月2日 至5月10日经过中期检查后，对网页设 计与实现进行修改及完善良好5月11日 至5月22日论文的构思，修改撰写良好5月23日 至5月25日将论文由网上发给指导老 师良好5月曰至5月日论文的打印及装订良好6月曰至6月日论文提交良好教师对 进度计 划实施 情况总 评签名年 月日本表作评定学生平时成绩的依据之一摘要网页设计作为用户界面交互设计的延伸， 实在新的媒体和新的技术支持实现一 个全

3、新的设计创作领域。 设计创作网页与循环其特有的特点和结构思路， 具备可 实际行和外观时尚。 本论文将对网页设计的开发语言开展研究和讨论。 在网页设 计与制作语言的基础上，着重使用HTML作为工具语言进行网页设计与制作的 实际操作，分别对基于对象的 HTML、css、JavaScript 进行详细描述并实现网 页的开发。关键字 ：制作、设计、 HTMLSummaryWeb design as an extension of the interactive user interface design, it is a new media and new technologies to suppor

4、t a whole new field of creative design. Design creation of web pages and circulation of its unique characteristics and structure of ideas with the actual line and stylish 。 The webdesign of this paper will develop language tools to carry out the study and discussion 。 On the basis of a website on th

5、e design and production of language ， focus on using HTMLweb design and production operations as a tool for language, a detailed description of the object based HTML, CSS， JavaScript and web page development. 文档为个人 收集整理，来源于网络个人收集整理 , 勿做商业用途Keywords: production, design ， HTML目录第一章 绪论 61. 网页设计概述 61。2网

6、页设计的要素 . 7第二章HTML语言概述 72。1什么是HTM文件 72.3HTML格式 82。5HTML羊式 92。6HTM链接 92.7HTML表格 112.8HTML列表 132。9HTML表单 13第三章 Css 的运用 173。1Css 简介 173.2 Css 基础语法 173.3 派生选择器 . 183。4 id 和类选择器 183。5 Css 框架型结构 19第四章 Javascript 的运用 224.1JavaScript 介绍 224.2HTML包含 JavaScript 的方法 224.3 JavaScript 语句, 注释与变量 234。4JavaScript 常用

7、运算符 234.5JavaScript 条件语句 244。6函数的定义与应用 274.7HTML事件处理 28第五章WEB页面信息的交互一一窗体与框架 335。1 窗体基础知识 335.2 窗体中的基本元素 345。3窗体对象实例 385。 4 框架 415。 5 框架的访问 42第六章 结束语 47致 谢 47参考文献 47第一章 绪论随着 21 世纪的到来，人们更深切地感受到计算机在生活和工作中的作用越 来越重要， 越来越来的职业需要具有计算机的应用技能。 掌握计算机是职业的需 要，更是事业发展的需要。 网页设计与制作是计算机能力的具体表现， 本章主要 介绍网页设计的相关知识 .1. 网页

8、设计概述 网页是企业向用户和网民提供信息（包括产品和服务）的一种方式， 是企业 开 展电子商务的基础设施和信息平台，离开网站（或者只是利用第三方网站 ） 去谈 电子商务是不可能的。企业的网址被称为“网络商标” ，也是企业无形资产的组 成部分，而网站是INTERNET上宣传和反映企业形象和文化的重要窗口1.2网页设计的要素网页设计的两大要素是：整体风格和色彩搭配.一、确定网页的整体风格 在这里，我提供给大家一些参考经验：1 将你的标志logo,尽可能的放在每个页面上最突出的位置。2 突出你的标准色彩。3 总结一句能反映贵站精髓的宣传标语！4 相同类型的图像采用相同效果，比如说标题字都采用阴影效果

9、，那么在网页中出现的所有标题字的阴影效果的设置应该是完全一致的！二、网页色彩的搭配1 用一种色彩。这里是指先选定一种色彩，然后调整透明度或者饱和度，这 样的页面看起来色彩统一，有层次感。2 用两种色彩.先选定一种色彩，然后选择它的对比色。3. 用一个色系。简单的说就是用一个感觉的色彩，例如淡蓝，淡黄，淡绿； 或者土黄，土灰，土蓝.在网页配色中，还要切记一些误区：1 不要将所有颜色都用到，尽量控制在三至五种色彩以内 2 背景和前 文的对比尽量要大（绝对不要用花纹繁复的图案作背景），以便 突出主要 文字内容。第二章HTML语言概述2。1什么是HTML文件HTML勺英文全称是 Hypertext M

10、arked Language，中文叫做“超文本标记语言"。和一般文本的不同的是，一个 HTML文件不仅包含文本内容，还包含一些Tag,中文称“标记”。一个HTML文件的后缀名是.htm或者是.html 。用文本编辑器就可以编写 HTML文件。下面写个小HTML文件htmlhead<title>Title of page /title</head<body>Thisds imyfirsfehomepag®p <b>ThiSitfixt 曲d</b b谊心</body</html2.2 HTML 元素HTML元素指的是

11、从开始标签(start tag )到结束标签(end tag )的所有代码. HTML元素以开始标签起始 HTML元素以结束标签终止 元素的内容是开始标签 与结束标签之间的内容某些HTML元素具有空内容(empty content ) 空元素 在开始标签中进行关闭(以开始标签的结束而结束)大多数HTML元素可拥有属性2。3HTMI格式HTMI定义了一些文本格式的Tag,比如利用Tag，可以将字体变成粗体或者斜 体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示.Tag曰些说嗨弋tl A粗悻baldu i A斜体iteliudel文字当中划戟表疾删降u ins a文宇下划线

12、表存插入V 占 LI tn A下标c sup上标u block quote =-缩逬表示弓1用u pre a保留空格和换行-c code r=-表示计苴机代玛鼻等盘字体2.4 HTML的特殊字符显示有些字符在HTML!有特别的含义，比如小于号就表示 HTMLTag的开始，这 个小于号是不显示在我们最终看到的网页里的.那如果我们希望在网页中显示一 个小于号，该怎么办呢？这就要说到 HTML?符实体(HTMICharacter Entities) 了。一个字符实体(Character Entity )分成三部分：第一部分是一个&符号，英 文叫ampersand;第二部分是实体(Entity

13、)名字或者是#加上实体(Entity)编号;第三部分是一个分号。比如，要显示小于号，就可以写&lt ;或者&# 60;。用实 体(Entity )名字的好处是比较好理解，一看lt,大概就猜出是less than的意 思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity )编号，各种浏览器都能处理。注意：Entity是区分大小写的.最常用的字符实体如下图：昱示錯果说明Entity NameEntity Number显示一平空格&nbsp;小于8dt;>大于&gt;II双引号&quot;&#34;2。5HTML

14、羊式style属性的作用：提供了一种改变所有HTML元素的样式的通用方法。 样 式是HTML 4弓|入的,它是一种新的首选的改变 HTML元素样式的方式。通过 HTML样式，能够通过使用style 属性直接将样式添加到HTML元素，或者间 接地在独立 的样式表中(CSS文件)进行定义。2.6HTML链接HTML使用a> (锚)标签来创建连接另一个文档的链接锚可以指向网络 上的任何资源：一张HTML页面,一幅图像，一个声音或视频文件等 等。1) a和href属性HTMLffi a来表示超链接，英文叫 anchor。a>可以指向任何一个文件源：一个HTM网页，一个图片，一个影视文件等。

15、用法如下：<a i8(liiiiiS.CM/litalri title就网说赣顺勰与代鮒中飒加涨 网船臧伽a href =“ url “ > 链接的文字 </a>点击a/a当中的内容，即可打开一个链接文件，href属性则表示这个链 接文件的路径.比如链接到/html站点首页，就可以这样表示：2)target属性使用title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。3 )name属性使用name属性，可以跳转到一个文件的指定部位。使用name属性，要设置一对。一是设定name的名称，二是设定一个href指向这 个 name;4)

16、链接到email属性 在网站中，你经常会看到“联系我们”的链接，一点 击这个链接，就会触发你的邮件客户端，比如Outlook Express,然后显示一个新 建mail的窗口 .用a>可以实现这样的功能.代码如：<html>bodyvp>这是一个最简单的邮箱地址的链接：<a href= ” mailto : info sina。 com">新浪网站发信/a></p><P这个邮箱地址的链接写了 subject内容：<a href= ” mailto : info sina。 com?subject=Hello ” >

17、;给新浪网站发信 </a>/pp>这个邮箱地址链接写了 to, cc, bcc，subject, body 的内容：a href= ” mailto : info ?cc=webmaste &subject=l%20like%20your %20site &body=真是个好站点！ ”写信给新浪 </a/p><p>b注：</b>空格请用 20表示./p></body></html>显示效果如下图：这是一个最简单的邮箱地址的饶接；给新丫艮网站发信这个邮箱地址的链接写

18、了 subject内容：给新浪网站发信这个邮箱地址链接写F"g, bcc, subject, bodyK内容: 写信给新浪注:空格请用鴉0表示，图2-12.7HTML表格表格由<table> 标签来定义。每个表格均有若干行（由<tr标签定义） 每行被分割为若干单元格（由<td>标签定义）.字母td指表格数据（table data）,即数据单元格的内 容。数据单元格可以包含文本、图片、列表、段落、 表单、水平线、表格等等.示列如图2-2 :vhtmlbodyP表格所用到的Tag：整个表格开始要用table ;每一行开始要用tr ；每一单元格 开始要用td。

19、</ph4只有一行（RoW 一列（Column）的表格 </h4 <table border= ” 1"<trtd100 /td>/tr</tablevh4> 行三列的表格</h4<table border= ” 1">tr>td100</tdtd>200 /td<td300</td</tr/tablevh4>两行三列的表格</h4vtable border="1 ”tr>td>100 /tdtd>200 /tdtd>300</

20、td</tr><tr>td>400</td>td>500 /tdtd>600</td</tr></table</body/html>表梏所用到的Tn沪 整个表格幵始要用每一行开始真用 tr;毎一单元格幵贻要用2亠只有一'行(Row)列(Column的表搐两行三列的表格1002003004005006002。8HTML列表无序列表 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小 黑圆圈）进行标记.无序列表始于ul标签。每个列表项始于li有序列 表 同样，有序列表也是一列项目，列表项目使用数

21、字进行标记 有序列表始于 ol标签。每个列表项始于 li标签。示列如图23：列分 framehtmlframeset cols="25 % ,50%,25%"vframe src="./asdocs/html_tutorials/Frame_a.html"frame src=" 。./asdocs/html_tutorials/Frame_b 。html"frame src=". 。/asdocs/html_tutorials/Frame_c 。html ”/frameset/html，此程序无法显，此程李无法显示网页1出息

22、序无9最习蔭的甌3是：迢可応的豆因是：聂刁能注甌m*而f建到ii*不三博吏H la-temcto*刘f用*便朗站囲至！T喪阴帖驅匚问赣空刚站il在地址屮可f ft电址屮可鸵舉性銘V新罠-aM1您可氐尝妙下拗您可以豈试旦下劇乍：您可慎黑试以牖百轨勺Tut怆酉酗重新漣人顾重新奏入眩址.重新曜切理匾到上一页返用至11上而逅回知上,'T更薯信息更芳信息更旁信息图232。9HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素表单使用表单标签 （form）定义。10. HTML框架框架结构标签（frameset）定义如何将

23、窗口 分割为框架每个frameset 定义了一系列行或列rows/co lumns 的值规定了每 行或每列占据屏幕的面积Css示列如图2-4:htmlvhead title 输入用户姓名 </title /head>body>formadm in5 method= ” get ”action= ” /html/asdocs/htm l_tutorials/yourname.asp 请输入你的姓名：in put type= ” text ” n ame="your name” <input type="submit” valu

24、e="提交"</form </body</html>请输入你的姓名2.10 HTML 图片用<img>这个Tag可以在HTML里面插入图片。最基本的语法如下：img src="url ” > url 表示图片的路径和文件名。比如 url可以是 images/logo/blabla_logo01.gif,也可以是个相对路径是” o ./images/logo/blabla_logo01 。gif ”。图片 alt 属性 <img>中有一个 alt 属性，英文叫 alternate text 。例句如下：img s

25、rc = "。/images/html_tutorials/smile.jpg ” alt="smile face" 假使浏览器没有载入图片的功能，浏览器就会转而显示Alt属性的值。其实，现在大多数浏览器都支持图片载入。在此介绍Alt属性，是因为它的另外一个重要功能。目前搜索引擎抓取工具无法识别图像中所含的文字，所以用ALT属性写上 图片的说明，便于搜索引擎抓取你网页的内容示列如图2-5:<htmlvbodyvp将鼠标停留在图片上,你可以看到Alt属性里写的内容。/p><img src= ” ./images/logo/blabla_logo 。

26、 gif" alt="站长网 站长学院的 Logo标志”brvimg src= ”。./images/html_tutorials/frjj01。jpg ” alt="芙蓉姐姐照片:红配绿一台戏”/body/html将鼠标停留在圏片上，祢可以看到Alt属性里写肮内容。I叵站长网 站长学院的匚。即标志 辰芙暮姐姐頗片:红酉歸一合戏图252.11 HTML字体的大小在HTM里，可以用font这个元素及其属性来设定字体的大小,颜色和字体风 格.字体大小用字体大小属性（size）来设定字体的大小。示例代码如下：pfont size= ” 2”这一段的字体大小的值是2。v/

27、font /p字体风格用face属性来设定字体风格.示例代码如下：p font fac="arial”这一段的字体风格是arial。 /font /p字体颜色用颜色属性（color ）来设定字体颜色。字 体颜色代码请参见字体颜色代码请参见HTM!颜色参考字体颜色代码请参见 HTM颜色参考（HTML Color Referenee）。 p font color= ”# FF0000' 这一段 的字体颜色是红色/font/p注意HTML缁勺标准中，已经不建议使用font 及其属性来设定字体，而是建议用CSS来设定字体的大小，颜色，字体风格等。有关CSS中和文字的相关属性，请参见我

28、们教程中的。示列如图2-6 :vhtmlhead title 字体大小 font size /title /headvbody><p><fo nt size="1"> 这段文字的字体大小值为 1 p><fo nt size=<p> font size=Pvp>” 2” 这段文字的字体大小值为 ” 3” 这段文字的字体大小值为vfont size= ” 4"这段文字的字体大小值为font size="5 ” 这段文字的字体大小值为/font</p2。v/font> /p>3. &

29、lt;/font </p4<p>p> /body>font size= ” 6”这段文字的字体大小值为fo nt size="7"这段文字的字体大小值为 7。/font> /p>/font /p>6.</font </p>/font </p/html返段文字的字体大小値克2。这段文字的字体大小值为3。这段文字的字体大小值为4。这段文字的字体大小值为5。这段文字的字体人小值为6。 这段文字的字体大小 值为7。如图26第三章Css的运用3.1Css简介随着In ternet的迅猛发展，HTML被广泛应用，上

30、网的人们当然希望网页做得 漂亮些,因此HTML排版和界面效果的局限性日益暴露出来。为了解决这个问题,人们也走了不少弯路，用了一些不好的方法,比如给HTM出曾加很多的属性结果将 代码变得很臃肿，将文本变成图片,过多利用Table来排版,用空白的图片表示白 色的空间等.直到CSS出现。CSS可算是网页设计的一个突破，它解决了网页界 面排版的难题。可以这么说，HTML的Tag主要是定义网页的内容(Co nte nt)，而 CSS决定这些网页内容如何显示(Layout )。CSS的英文是 Cascading StyleSheets，中文可以翻译成串联式样式表.CSS按其位置可以分成三种:1 )内嵌样

31、式(Inline Style ) 2)内部样式表(Internal Style Sheet ) 3 )外部样式表 (External Style Sheet) 示列如图3 1：<html>vheadtitle> 内嵌式样式(Inline Style)v/title> /headvbody<P style="font size : 20pt; color : red"> 这个内嵌样式(Inline Style)定义段落里面的文字是20pt字体，字体颜色是红色。/p>p>a段文字没有使用内嵌样式。/p/body </html

32、这个内嵌样式(Inline Style) 义段 落里面的文字是字体.字体颜色 是红色口这段文字没有佚用内歆样式。3.2 Css基础语法CSS语法由三部分构成： 选择器、属性和值：selector property: value 选择器(selector)通常是你希望定义的HTML元素或标签，属性(property) 是你希望 改变的属性，并且每个属性都有一个值属性和值被冒号分开，并由花 括号包围，这样就组成了一个完整的样式声明(declaration ) : body color: blue 上面这行代码的作用是将body元素内的文字颜色定义为蓝色.在上述 例子中，body是 选择器，而包括在

33、花括号内的的部分是声明。声明依次由两 部分构成：属性和值，color为属性,blue为值。示列如图32：<HTML><HEAD><STYLEtype= ” text/css ”H1。mylayout border width: 1; border : solid; text align: center；coloured/STYLE></HEAD>BODY<H1 class="mylayout ”这个标题使用了 Style.</H1>H1这个标题没有使用Style。 /H1>/BODY</HTML>|

34、这个标题使用了 StylTL这个标题没有使用Style Q图3-23。3派生选择器通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁在CSS1中，通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors )，这是由于它们依赖于上下文关系来应用或者避免某项 规则.在CSS2中，它们 称为派生选择器，但是无论你如何称呼它们，它们的作 用都是相同的。派生选择器允许你根据文档的上下文关系来确定某个标签的样式.通过合理地使用派生 选择器，我们可以使HTML代码变得更加整洁。3。4 id和类选择器id 选择器可以为标有特定 id 的 HTML 元素指定特定

35、的样式。 id 选择器 以 ”#" 来定义。 下面的两个 id 选择器， 第一个可以定义元素的颜色为红色， 第二个定义元素的颜色为 绿色 : red color:red; green color ：green ；下面的 HTML 代码中 ,id 属性为 red 的 p 元素显示为红色，而 id 属性为 green 的 p 元 素显 示为绿色。 sidebar p font style ： italic; text align ： right ； margin-top ： 0.5em; #sidebar h2 font-size: 1em; font-weight: normal; f

36、ont-style： italic; margin: 0; line-height: 1.5 ；text-align ： right ； 3.5 Css 框架型结构CSS 框模型 ( Box Model) 规定了元素框处理元素内容、 内边距、 边框 和 外边距 的方 式。 元素框的最内部分是实际的内容， 直接包围内容的是内边距。 内边距呈现了元素的背景。 内边距的边缘是边框。边框以外是外边距，外边距 默认是透明的，因此不会遮挡其后的任何 元素。 内边距、 边框和外边距都是可 选的，默认值是零。但是， 许多元素将由用户代理样式表 设置外边距和内边距 . 可以通过将元素的 margin 和 pad

37、ding 设置为零来覆盖这些浏览器样 式。这可 以分别进行，也可以使用通用选择器对所有元素进行设置：在CSS中，width和 height 指的是内容区域的宽度和高度 . 增加内边距、边框和外 边距不会影响内 容区域的尺寸，但是会增加元素框的总尺寸。 假设框的每个边上有 10 个像素 的外边距和 5 个像素的内边距 .如果希望这个元素框 达到 100 个像素，就需要 将内容的宽度设置为 70 像素 示列如图 3-3 ： <html <head<title> 字体大小属性 font-size</title> STYLEBODYfont-size : 10pt

38、。si font size:16px 。 s2 font-size : 16pt 。s3 font size:80% .s4 font-size : larger 。 s5 font size : xx-large /STYLE></headvbodyp>这段文字大小是10pt。 /p<p class = "s1"> 这段文字大小是 16px。</p>p class =” s2"> 这段文字大小是 16pt o </p><p class = "s3"> 这段文字大小是 10

39、pt 的 80%. /p<p class = "s4” >这段文字的大小比10pt大。/p><p class =” s5"这段文字的大小是特大号(xx large)。</p/bodyv/htmliS段文字大小是lcie 0遠段文字大小是16pm这段文字大小是16pta建駁文字大小足七的汕虬这段文字的大小比lgt大"这卑文字旳大小是特犬号(xx-large)。图3-33.6定为基础和相对绝对定位CSS为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将 布局的一 部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能 完

40、成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置 应该出现的位置，或者 相对于父元素、另一个元素甚至浏览器窗口本身的位置。 显然，这个功能非常强大，也很让人吃惊。要知道，用户代理对 CSS2中定位的支持远胜于对其它方面的支持，对此不应感到奇怪。另一方面，CSS1中首次提出了浮动,它以Netscape在Web发展初期增加的一个功 能为基础。浮动 不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义.CSS有三种基本的定位机制：普通流、浮动和绝对定位。除非专 门指定，否则所有框都在普通流中定位。 也就是说， 普通流中的元素的位置由元 素在 X (HTML

41、) 中的位置决定。 块级框从上到 下 一个接一个地排列，框之间 的垂直距离是由框的垂直外边距计算出来。 行内框在一行中水平布置。 可以使 用水平内边距、 边框和外边距调整它们的间距。 但是， 垂直内边距、 边框和 外边距不影响行内框的高度。 由一行形成的水平框称为行框 (Line Box) ， 行 框的高度总是足以容纳它包含的所有行内框。 不过，设置行高可以增加这个框的 高度。 在下面的章节，我们会为您详细讲解相对定位、 绝对定位和浮动。 CSS 相 对定位 相对定位是一个非常容易掌握的概念。 如果对一个元素进行相对定位 , 它将出现在它所 在的位置上。然后，可以通过设置垂直或水平位置，让这个

42、元 素“相对于”它的起点进行移 动。 如果将 top 设置为 20px ，那么框将在原位 置顶部下面 20 像素的地方 . 如果 left 设 置为 30 像素, 那么会在元素左边创 建 30 像素的空间 , 也就是将元素向右移动 . CSS 绝对定位 绝对定位使元素的 位置与文档流无关， 因此不占据空间 . 这一点与相对定位不同， 相对 定位实际上 被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置 . 普通流中其它元素的布局就像绝对定位的元素不存在一样： 文档为个人收集整理，来源 于网络文档为个人收集整理 , 来源于网络第四章Javascript 的运用4。JavaScr

43、ipt 介绍JavaScript是属于网络的脚本语言！JavaScript被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies ，以及更多的应用。JavaScript 是因特网上最流行的脚本语言。在数百万张页面中,JavaScript被用来改进设 计、验证表单、检测浏览器、创建cookies ，等等等等。JavaScript 是因 特网上最流行的脚本语言，并且可在所有主要的浏览器中运行，比方说In ternet Explorer、Mozilla 、Firefox、Netscape、和 Opera。下面来看一下简单的 JavaScript的入门示列如图4 1。vhtmlhead

44、xtitle用 document。write 输出带格式的 HTML文本的 Javascript 示 例 v/title </head<body>vscript type="text/javascript ”document。write （”hlHello World ！/h1>”）v/script /body</html>Hello Won-IH I图4-14.2HTML包含 JavaScript 的方法Javascript程序放到一个后缀名为。js的文本文件里.这样做，可以提Javascript的复用性，减少代码维护的负担，不必将相同的Java

45、script代码拷贝到多个HTM网页里,将来一旦程序有所修改,也只要修改。js文件就可以，不 用再修改每个用到这个Javascript程序的HTMI文件。在HTML!引用外部文件里的 Javascript，应在 Head里写一句 vscript src= ” 文件名"</script> ，其 中src的值，就是Javascript所在文件的文件路径。示例代码如下：html>vheadscriptsrc= ” http:/www。 /script /head>body/body/html演示示例里的common.js其实就是一个文本文件，内容如下：fun cti

46、 on clickme ()alert (” You clicked me! ”)4.3 JavaScript 语句，注释与变量语句,JavaScript语句是发给浏览器的命令。这些命令的作用是告诉浏览"Hello器要做的事情t说!这个javascr訓删句告诉浏览器向网页输出world ”： document.write("Hello wodd =;_JavaScript 二 注释可以添加注释来对javaScript进行解释,或者提高其可读性't匕单行的注释以碎 开始。 JavaScript变量 正如代数一样，JayaSc£jp变量用于保存值或表达式。可以

47、给变量起一个简短名称，比如x，或者更有描述性的名称，比如length。-减洁-, 一，天:，亠 ”JavaScript、变量也可以保存文本值，比如carname= Volvo"。谨械*乘i去如果尤等于U3八等于3,结果等于1如果疋等于ID x+等于1丄如果y等于1匕y等干9逻辑运算符:运算符说明示例示例说阴=等于如果工等于為马等于=全等于1值相尊，数据奘型也帕等）龙=如果又等于整数2丹为字符串乜J 则艾二二二丫不咸立>大于x>y>=犬于等于小于丈星y< =小于等干x* =y1=环等于x!=y下全等于x!=»j/&&与(and)x &l

48、t; 10 衣散 y > 1III或(g)X" =3 11 / = =P赋值运算符:运算符运苴将说明示例示例说明赋值>c=s将整数5这个值賦给变星艾注意：请注意赋值（=和等于（=）的区别4.5JavaScript 条件语句在一般情况下，程序语句的执行是按照其书写顺序来执行的。前面的代码先执 行，后面的代码后执行但是这种简单的自上而下的单向流程只适于用一些很简 单的程序大多数情况下，需要根据逻辑判断来决定程序代码执行的优先顺序。 要改变程序代码执行的先后顺序，任何编程语言都需要用到条件语句和循环语 句，Javascript 也不例外。这一节我们主要介绍Javascript

49、条件语句。Javascript条件语句有以下几种：1） 单项条件结构（if条件语句）2）双向条件结构（if.。.else条件语句）3）多项条件结构（switch条件语句）4）单项条件结构（if条件语句）If条件语句的语法如下：if ( expression )statement1这句语法的含义是， 如果符合 expression 条件，就执行 statement1 代码, 反之， 则不执行 statement1 代码。下面的这个 Javascript 示例就用到了 Javascript 的 if 条件语句。首先用 .length 计算出字符串 What's up? 的长度，然后使用 i

50、f 语句进行判断，如果该字符串长度 <100,就显示 "该字符串长度小于 100。" 。 <html>vheadxtitle一个使用到 if 条件语句的 Javascript 示例 </title> /head <body<script type= ”text/javascript”var vText = "What 's up? ”；var vLen = vText.length;if (vLen < 100)document。write ("p> 该字符串长度小于 100。</p&g

51、t;") /script> /body></html>双向条件结构 ( if 。 .else 条件语句 ) If 。 else 条件语句的语法如下：if ( expression )statement1elsestatement2这句语法的含义是， 如果符合 expression 条件, 则执行 statement1 代码，反之， 则执行 statement2 代码。下面的 Javascript 示例使用了 if. 。 .else 条件语句 判断，如果 vHour 小于 17，显示”日安 ", 反之则显示 "晚安”。<html>

52、head title使用 if °°.else 条件语句的 Javascript 示例/title /head<body script type= ”text/javascript"var vDay = new Date（ ）var vHour = vDay.getHours（）if （vHour 17 ）document。write（ ” <b>日 安/b> ”）elsedocument。 write（"<b 晚安 /b>" ） /script /body /html 多项条件结构 （switch 条件语句

53、）Switch 条件语句的语法如下：switch （expression）case label1statement1breakcase label2 :statement2break。 .default ：statementdefault这句语法的含义是 , 如果 expression 等于 label1 ，则执行 statement1 代码；如 果 expression 等于 label2 ，则执行 statement2 代码；以此类推。如果 expression 不符合任何 label ，则执行 default 内的 statementdefault 代码。 Switch 条件 语句中的

54、break ，表示 switch 语句结束。 如果没有使用一个 break 语句 , 则多 个 label 块被执行。 下面的 Javascript 示例使用了 switch 条件语句 , 根据星 期天数的不同，显示不同的话。html <head>title> 使用 swith 条件语句的 Javascript 示例 /title> /head body><script type= ”text/javascript">var d = new Date（ ） theDay=d.getDay（ ） switch （theDay ） case 5

55、：document.write （”b>总算熬到星期五了。 /b"）breakcase 6 ：document。write （” b>哈哈,周末啦！ v/b>"）breakcase 0 ：document.write （” <b>明天又要上班，想想就烦。/b> ）breakdefault:document。write （ "<b>每个工作日慢得都象蜗牛爬啊！</b>"）</script </body /html 4。6 函数的定义与应用 函数是由事件驱动的或者当它被调用时执行的可重复

56、使用的代码块。 将脚 本编写为函数，就可以避免页面载入时执行该脚本。 函数包含着一些代码，这 些代码只能被事件激活，或者在函数被调用时才会执行。 你可以在页面中的任 何位置调用脚本 （ 如果函数嵌入一个外部的 。 js 文件, 那么甚至可 以从其他的 页面中调用 ） 。 函数在页面起始位置定义 , 即 <head 部分。4。7HTML事件处理JavaScript 使我们有能力创建动态页面。 事件是可以被 JavaScript 侦测到 的行为 . 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。 比方说，我们可 以在用户点击某按钮时产生一个 onClick 事件来

57、触发某个函 数。事件在 HTML 页面中定 义. onload 和 onUnload 当用户进入或离开页面时 就会触发 onload 和 onUnload 事件 . onload 事件常用来检测访问者的浏览器 类型和版本，然后根据这些信息载入特定版本 的网页。 onload 和 onUnload 事 件也常被用来处理用户进入或离开页面时所建立的 cookies 。例 如，当某用户 第一次进入页面时 , 你可以使用消息框来询问用户的姓名 . 姓名会保存在 cookie 中. 当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招 呼： ”WelcomeJohn Doe!" 。 onFocus, onBlur 和 onChange onFocus、 onBlur 和 onChange

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

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

最新文档

评论

0/150

提交评论