章节学习第二章静态网页_第1页
章节学习第二章静态网页_第2页
章节学习第二章静态网页_第3页
章节学习第二章静态网页_第4页
章节学习第二章静态网页_第5页
已阅读5页，还剩124页未读， 继续免费阅读

下载本文档

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

文档简介

计算机软件技术基础

第二章静态网页信息技术系徐家臻本课主要内容HTMLCSSJavaScript静态网页说明：按照HTML/CSS/JavaScript规范编写的网页，需要浏览器进行解释，而不同的浏览器对同一网页的解释效果可能是不同的。HTML超文本标记语言(HyperTextMarkupLanguage)HTML不是一种编程语言，而是一种标记语言

(markuplanguage)。HTML使用标记标签(markuptag)来描述网页，通常也称为HTML标签(HTMLtag)。HTML标签是由尖括号包围的关键词，比如<html>HTML标签通常是成对出现的，比如<b>和</b>所谓网页，其实就是以HTML规范书写的文档，它包含HTML标签和纯文本。HTMLHTML文档示例<html><body><h1>MyFirstHeading</h1><p>Myfirstparagraph.</p></body></html><html>与</html>之间的文本描述网页<body>与</body>之间的文本是可见的页面内容<h1>与</h1>之间的文本被显示为标题<p>与</p>之间的文本被显示为段落HTML工具介绍 使用VisualStudio或者DreamWeaver编辑HTML文档HTML语法HTML元素语法HTML标签对大小写不敏感HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容（emptycontent）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性

HTML语法HTML元素语法<html>标签出现在HTML文档的最前面，用来标记HTML文档的开始。</html>标签出现在HTML文档的最后面，用来表示HTML文档的结束。嵌套大多数HTML元素可以嵌套（可以包含其他HTML元素）。HTML文档由嵌套的HTML元素构成。HTML语法示例<html><body><p>Thisismyfirstparagraph.</p><p>Thisismysecondparagraph.</p><br/></body></html>HTML属性HTML属性HTML标签可以拥有属性。属性提供了有关HTML元素的更多的信息。属性总是以名称/值对的形式出现，比如：name="value"。属性总是在HTML元素的开始标签中规定。属性例子1:HTML链接由<a>标签定义。链接的地址在href属性中指定：<ahref="">访问华中师范大学</a>HTML属性属性例子2:<h1>定义标题的开始。<h1align=“center”>拥有关于对齐方式的附加信息。属性例子3:<body>定义HTML文档的主体。<bodybgcolor=“yellow”>拥有关于背景颜色的附加信息。属性例子4:<table>定义HTML表格。<tableborder="1">拥有关于表格边框的附加信息。HTML标题HTML标题标题（Heading）是通过<h1>-<h6>标签进行定义的。<h1>定义最大的标题。<h6>定义最小的标题。<h1>Thisisaheading</h1><h2>Thisisaheading</h2><h3>Thisisaheading</h3>HTML标题合理使用标题请确保将HTMLheading标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将h1用作主标题（最重要的），其后是h2（次重要的），再其次是h3，以此类推。HTML水平线HTML水平线<hr/>标签在HTML页面中创建水平线。hr元素可用于分隔内容。<p>Thisisaparagraph</p><hr/><p>Thisisaparagraph</p><hr/><p>Thisisaparagraph</p>HTML注释HTML注释可以使用<!--和-->将注释插入HTML代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。<!--Thisisacomment-->如何查看源代码只需在浏览器中单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面HTML代码的窗口。HTML段落HTML段落段落是通过<p>标题定义的。<p>Thisisaparagraph</p><p>Thisisanotherparagraph</p>HTML换行如果希望在不产生一个新段落的情况下进行换行（新行），请使用<br/>标签：<p>Thisis<br/>apara<br/>graphwithlinebreaks</p>HTML段落当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。如果需要多个空格，使用

<p>ab</p><p>a      b</p>HTML文本格式化标签描述<b>定义粗体文本。<big>定义大号字。<em>定义着重文字。<i>定义斜体字。<small>定义小号字。<strong>定义加重语气。<sub>定义下标字。<sup>定义上标字。HTML可定义很多供格式化输出的元素，比如粗体和斜体字。HTML文本格式化设置字体颜色<fontcolor=#颜色代码>#后面接6位16进数，每两位分别指定红、绿、蓝的值。设置字体大小<fontsize=字号>有七种字号，1号最小，7号最大。缺省字号为3。不赞成使用font标签和属性，相关的设定最好通过CSS完成。HTML超链接超链接可以是文本，也可以是图片，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。通过使用<a>标签在HTML中创建链接。有两种使用<a>标签的方式：通过使用href属性-创建指向另一个文档的链接通过使用name属性-创建文档内的书签语法<ahref="url">Linktext</a>

href属性规定链接的目标。开始标签和结束标签之间的文字被作为超链接文字来显示。HTML超链接name属性name属性规定锚（anchor）的名称。name属性用于创建HTML内部的书签。当使用命名锚（namedanchors）时，可以创建直接跳至页面中某个节的链接，这样使用者就无需不停的滚动页面来寻找他们需要的信息。命名锚的语法：创建HTML文档内部的锚：<aname=“tips”>UsefulTipsSection</a>创建指向相同文档中“有用的提示”部分的链接：<ahref="#tips">VisittheUsefulTipsSection</a>示例：书签HTML超链接邮件链接邮件链接可使访问者在浏览页面时，只需单击电子邮件链接就能打开默认的邮件编辑软件，向指定的地址发送邮件<ahref=".cn">发送邮件</a>HTML表格HTML表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。字母td指表格数据（tabledata）。单元格的内容可以包含文本、图片、列表、段落、表单、水平线、表格等等。边框属性

<tableborder="1">

表头使用<th>标签进行定义示例：表格

HTML表格有通栏的表格有横向通栏的表格用<tdcolspan=“”>属性说明有纵向通栏的表格用<tdrowspan=“”>属性说明示例通栏表格背景和背景图像属性bgcolor="颜色"background="图片路径"HTML列表无序列表无序列表是一个项目的列表，此列项目使用粗体圆点进行标记。无序列表始于<ul>标签。每个列表项始于<li>。有序列表有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于<ol>标签。每个列表项始于<li>标签。示例列表HTML图像在HTML中，图像由<img>标签定义。要在页面上显示图像，你需要使用源属性（src）。src指"source"。源属性的值是图像的URL地址。定义图像的语法是：

<imgsrc="url"/>示例：调整图片大小图片超链接HTML表单HTML表单用于接受不同类型的用户输入。表单是一个包含表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（<form>）定义。多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。HTML表单文本框（Text）<form>Firstname:<inputtype="text"name="firstname"/><br/>Lastname:<inputtype="text"name="lastname"/></form>单选按钮（Radio）<form><inputtype="radio"name="sex"value="male"/>Male<br/><inputtype="radio"name="sex"value="female"/>Female</form>HTML表单复选框（Checkbox）<form><inputtype="checkbox"name="bike"/>Ihaveabike<br/><inputtype="checkbox"name="car"/>Ihaveacar</form>示例：表单HTML表单表单的动作属性（Action）和确认按钮当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。<formname="input"action="auth.aspx"method="post">Username:<inputtype="text"name="user"/><inputtype="password"name="pwd"/><inputtype="submit"value="Submit"/></form>HTML表单标签描述<form>定义供用户输入的表单<input>定义输入域<textarea>定义文本域(一个多行的输入控件)<fieldset>定义域<legend>定义域的标题<select>定义一个选择列表<option>定义下拉列表中的选项<button>定义一个按钮部分表单标签作用列表HTML头元素HTML头元素的内容包含在<head>标签中头元素内部的标题信息不会显示在浏览器窗口中。头元素包含关于文档的概要信息，也称为元信息（meta-information）。Meta意为“关于某方面的信息”。根据HTML标准，仅有几个标签在HTML的头部分是合法的，如<link>,<meta>,<title>,<style>和<script>等。CSS层叠样式表CascadingStyleSheetCSS将呈现方式的功能从HTML中剥离出来，实现了内容与呈现的分离通过设立样式表，使网页的结构更加清晰。CSS扩展了HTML的呈现能力，例如能精确指定网页元素位置，外观以及创建特殊效果等。CSS使开发者可以统一地控制HMTL中各标志的显示属性，使人更能有效地控制网页外观。CSS示例CSS示例页面的HTML <divid="wrapper"><divid="header"><h1>聚义厅</h1></div><ulid="menu"><li><ahref="#">菜单1</a></li><li><ahref="#">菜单2</a></li><li><ahref="#">菜单3</a></li><liclass="last"><ahref="#">菜单4</a></li></ul></div><divid="content"><p>宋江，字公明，绰号：及时雨，呼保义。…</p><p>林冲外号豹子头，东京（现河南开封）人。…</p><p>李逵是中国古代小说《水浒传》中的一位重要人物，…</p></div><divid="footer">©水泊梁山</div></div>CSS示例CSS文件格式body{text-align:center;margin:0auto;width:950px;}#header{background-color:#0A55A3;color:#FCFCFC;padding:10px;margin-top:10px;}#menuli.lasta{border-bottom:solid1px#2A3B63;}#menulia:hover{background-color:#2A3B63;color:White;}CSS语法CSS的定义是由三个部分构成:选择符(selector)属性(properties)属性的取值(value)例如body{color:black}效果是使页面中的文字为黑色。指定CSS样式的方式在页面头部指定在单独的CSS文件中指定，并在页面头部引用该文件内联样式指定CSS样式的方式(1)在页面头部指定CSS样式<html>

<head>

<title>文档标题</title>

<styletype="text/css">

<!--

body{font:10pt"Arial"} h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon} h2{font:13pt/15pt"Arial";font-weight:bold;color:blue} p{font:10pt/12pt"Arial";color:black}

-->

</style> </head>

<body>

…指定CSS样式的方式(2)在页面上指定引用的CSS文件样式控制放在单独的CSS文件中css/basic.css:body{font:10pt"Arial"}h1{font:15pt/17pt"Arial";font-weight:bold;color:maroon}h2{font:13pt/15pt"Arial";font-weight:bold;color:blue}p{font:10pt/12pt"Arial";color:black}

指定CSS样式的方式(2)在页面上指定引用的CSS文件方法一...<head>... <linkhref="/css/basic.css"rel="stylesheet"type="text/css"/> ...方法二...<head>... <styletype="text/css"> <!-- @importurl("/css/advanced.css"); --> </style>...指定CSS样式的方式(3)内联样式<pstyle="color:green">Thistextisgreen.</p>

选择符HTML标签body、p、h1、ul、li、a、table、tr、td、input…ID ——对特定一项页面元素进行样式控制HTML中<ulid="menu"><li><ahref="#">菜单1</a></li><li><ahref="#">菜单2</a></li><li><ahref="#">菜单3</a></li></ul>

CSS中#menu{float:left;}选择符类（class）——对特定一类页面元素进行样式控制HTML中<liclass="last">菜单4</li>CSS中.last{border-bottom:solid1px#2A3B63;}ID和类的区别一个页面上，每个元素有唯一不重复的ID，但可以有多个元素属于同一个类选择符DIV&SPAN作用：将某些页面元素看成一个整体，统一进行格式控制<divid="content"><p>宋江...</p><p>林冲...</p><p>李逵...</p></div>DIV和SPAN的区别：DIV会“换行”，SPAN不会。或者说，两个并列的DIV会垂直显示，而两个并列的SPAN会平行显示。DIV、SPAN和其他HTML标签一样，可以嵌套使用选择符选择符可以组合使用<ul><li>列表A</li><li>列表B</li></ul>

<ulid="menu"><li><ahref="#">菜单1</a></li><li><ahref="#">菜单2</a></li><li><ahref="#">菜单3</a></li><liclass="last"><ahref="#">菜单4</a></li></ul>

#menuli

{list-style:none;margin-top:0;margin-bottom:0;}#menuli.lasta{border-bottom:solid1px#2A3B63;}伪类用于对页面元素的特定状态进行样式控制示例：a:link

对未访问的超链接的显示a:visited

对已访问的超链接的显示a:hover

当鼠标移到超链接时tr:hover

当鼠标移到表格的行上时input:focus

输入框成为焦点时CSS优先级对于一个<h1>标签，如果CSS中定义了

h1{color:blue;}

body

h1{color:red;}

<h1>会如何显示？CSS选择符特殊性高者决定显示。特殊值计算：每个内联样式x1000+每个IDx100+每个类/伪类x10+每个其他元素x1示例：ul#navlia:hover1+100+1+1+10=113CSS属性CSS背景设置背景颜色 p{background-color:gray;}设置背景图片body{background-image:url(img/bg_01.gif);}

设置背景重复可对背景图像进行重复平铺。repeat-x和repeat-y分别导致图像只在水平或垂直方向上重复，no-repeat则不允许图像在任何方向上平铺。background-repeat:repeat-y;CSS属性CSS字体指定字体系列body{font-family:sans-serif;}h1{font-family:Georgia;}字体风格font-style属性取值normal-文本正常显示italic-文本斜体显示p.normal{font-style:normal;}CSS属性字体大小h1{font-size:60px;}h2{font-size:40px;}p{font-size:14px;}如果没有规定字体大小，普通文本（比如段落）的默认大小是16像素(16px=1em)。font-size值可以是绝对或相对值。CSS属性CSS字体尺寸单位em相对长度单位。相对于当前对象内文本的字体尺寸。 1em等于当前的字体尺寸。如果一个元素的font-size为16像素，那么对于该元素，1em就等于16像素。在设置字体大小时，em的值会相对于父元素的字体大小改变。浏览器中默认的文本大小是16像素。因此1em的默认尺寸是16像素。示例emCSS属性CSS文本通过文本属性，可以设置文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。缩进文本p{text-indent:5em;}水平对齐h1{text-align:center}h2{text-align:left}h3{text-align:right}CSS属性文本装饰text-decoration的取值可以为：none 无underline 下划线overline 上划线line-through 贯穿线例如，超链接默认会有下划线。如果希望去掉超链接的下划线，可以使用a{text-decoration:none;}CSS属性其他属性CSS布局框模型(BoxModel)CSS布局由一个个大大小小互相嵌套的框组成selector{margin:5px;padding:5px;border:solid5pxblack;}CSS布局CSS中的Width、Height指的是内容部分的宽、高#myBox{margin:10px;padding:5px;width:70px;}CSS定位相对定位

——

从框原来该在的位置，需要偏移多少#myBox{position:relative;left:20px;top:20px;}CSS定位绝对定位——相对于最近的已定位的祖先元素，需要偏移多少。如果没有已定位的父元素，则是相对于最初的包含块，需要偏移多少#ancestor{position:relative;}#ancestor#child{position:absolute;right:20px;bottom:20px;}如果没有用relative对ancestor块进行定位，child就会去找包含它的最外层的那个块CSS定位z-index属性因为块之间会互相重叠遮盖，可以设置块的z-index属性（无单位的整数值，可为负数），属性值大的在上层。块浮动(Floating)#floatBox{float:left;}块浮动块浮动Clear——消除浮动的影响.clear{clear:both;}如图，因为浮动块不占页面正常布局空间，所以外层块包裹不住它们。如果希望在浮动块下面再增加内容，需要先增加一个空块，其CSS设定为清除浮动块的影响。这样外层块包裹空块时，会把浮动块的位置也“包裹”进来一个简单的页面结构menucontentfooterbodywrapperheaderJavaScriptJavaScript是一种运行在客户端浏览器上的，增强网页的用户交互能力和显示效果的编程语言。JavaScript被设计用来向HTML页面添加交互行为。JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。JavaScript由数行可执行计算机代码组成。JavaScript通常被直接嵌入HTML页面。JavaScript是一种解释性语言（就是说，代码执行不进行预编译）。所有的人无需购买许可证均可使用JavaScript。JavaScript能做什么JavaScript可以对事件作出响应JavaScript可以读取及改变HTML元素的内容。在数据被提交到服务器之前，JavaScript可被用来验证数据JavaScript可被用来检测访问者的浏览器，为这个浏览器载入相应的页面。JavaScript可被用来创建cookies，用来存取位于访问者的计算机中的信息。通过AJAX等手段，JavaScript可以与服务器进行数据交换JavaScript不能做什么JavaScript不是运行在服务器上的脚本，不能直接对服务器的内容进行处理JavaScript不能访问数据库JavaScript不能在用户本地计算机上读写文件JavaScript没有3D图形显示功能JavaScript和Java的差别JavaScript是一种象文件一样的描述语言，透过浏览器就可以直接执行；而Java像正统的程序语言（如C/C++）一样，必须先进行编绎和连接等动作才可执行。JavaScript的结构较为自由松散，譬如，程序中使用变数前并不需要明确的定义，而Java和正统的程序语言一样，结构较为严谨。JavaScript不具有读写文件及网络控制等功能，Java则有提供这些功能。除了语法类似之外，完全是两个不同的东西。Helloworld!<html><body>

<scripttype="text/javascript"> document.write("HelloWorld!");

</script></body></html>

如果需要把一段JavaScript插入HTML页面，我们需要使用<script>标签（同时使用type属性来定义脚本语言）。document.write

字段是标准的JavaScript命令，用来向页面写入输出。在哪里放置JavaScript置于head置于body置于head和body在head中添加外部引用当页面载入时，会执行位于body部分的JavaScript。当被调用时，位于head部分的JavaScript才会被执行。在哪里放置JavaScript页面中的脚本会在页面载入浏览器后立即执行。我们并不总希望这样。有时，我们希望当页面载入时执行脚本，而另外的时候，我们则希望当用户触发事件时才执行脚本。位于head部分的脚本：当脚本被调用时，或者当事件被触发时，脚本就会被执行。当你把脚本放置到head部分后，就可以确保在需要使用脚本之前，它已经被载入了。<html><head><scripttype="text/javascript">....</script></head>....在哪里放置JavaScript位于body部分的脚本：在页面载入时脚本就会被执行。当你把脚本放置于body部分后，它就会生成页面的内容。<html><head></head><body><scripttype="text/javascript">....</script></body></html>在哪里放置JavaScript使用外部JavaScript有时，你也许希望在若干个页面中运行JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，你可以将JavaScript写入一个外部文件之中。然后以.js为后缀保存这个文件。注意：外部文件不能包含<script>标签。然后把.js文件指定给<script>标签中的“src”属性，就可以使用这个外部文件了：<html><head><scriptsrc="xxx.js">....</script></head><body></body></html>变量变量是用于存储信息的容器：x=5;length=66.10;JavaScript变量名称的规则：变量对大小写敏感（y

和Y

是两个不同的变量）变量必须以字母或下划线开始

可以通过var语句来声明JavaScript变量：varx;varcarname;或者：varx=5;varcarname="Volvo";也可以不声明直接使用（隐式声明）：x=5;carname="Volvo";运算符算术运算+、-、*、/>、<、=、>=、<=、==逻辑运算与：&&或：||非：!字符串运算符连接运算：+条件表达式条件?A:B流程控制语句if语句if(条件)elseif(条件1)else…while语句while(条件)…switch语句switch(i)casei1:…casei2:…default:…fordo…while事件事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个onClick事件来触发某个函数。事件在HTML页面中定义。事件举例：鼠标点击页面或图像载入鼠标悬浮于页面的某个热点之上在表单中选取输入框确认表单键盘按键onload和onUnload当用户进入或离开页面时就会触发onload和onUnload事件。onload事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。onload和onUnload事件也常被用来处理用户进入或离开页面时所建立的cookies。例如，当某用户第一次进入页面时，你可以使用消息框来询问用户的姓名。姓名会保存在cookie中。当用户再次进入这个页面时，你可以使用另一个消息框来和这个用户打招呼："eJohnDoe!"。onFocus,onBlur和onChangeonFocus、onBlur和onChange事件通常相互配合用来验证表单。下面是一个使用onChange事件的例子。用户一旦改变了域的内容，checkEmail()函数就会被调用。<inputtype="text"size="30"id="email"onchange="checkEmail()">onSubmitonSubmit用于在提交表单之前验证所有的表单域。下面是一个使用onSubmit事件的例子。当用户单击表单中的确认按钮时，checkForm()函数就会被调用。假若域的值无效，此次提交就会被取消。checkForm()函数的返回值是true或者false。如果返回值为true，则提交表单，反之取消提交。<formmethod="post"action="xxx.htm"onsubmit="returncheckForm()">

onMouseOver和onMouseOutonMouseOver和onMouseOut用来检测鼠标进入/移出指定区域的滑动情况举例事件部分JavaScript事件事件名称含义onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onsubmit提交按钮被点击onunload用户退出页面JavaScript对象面向对象编程JavaScript是面向对象的编程语言(OOP)，对象拥有属性和方法。属性属性指与对象有关的值。在下面的例子中，我们使用字符串对象的长度属性来计算字符串中的字符数目。<scripttype="text/javascript">vartxt="HelloWorld!"document.write(txt.length)</script>JavaScript对象方法方法指对象可以执行的行为（或者可以完成的功能）。在下面的例子中，我们使用字符串对象的toUpperCase()方法来显示大写字母文本。<scripttype="text/javascript">varstr="Helloworld!"document.write(str.toUpperCase())</script>JavaScript内建对象字符串日期数组String（字符串）对象举例indexOf()定位字符串中某一个指定的字符串首次出现的位置。

<scripttype="text/javascript">varstr="Helloworld!"document.write(str.indexOf("Hello")+"<br/>")document.write(str.indexOf("World")+"<br/>")document.write(str.indexOf("world"))</script>输出：0-16String（字符串）对象match()查找字符串中特定的字符串，并且如果找到的话，则返回这个字符。<scripttype="text/javascript">varstr="Helloworld!"document.write(str.match("world")+"<br/>")document.write(str.match("World")+"<br/>")document.write(str.match("worlld")+"<br/>")document.write(str.match("world!"))</script>输出：worldnullnullworld!String（字符串）对象replace()在字符串中用某些字符替换另一些字符<scripttype="text/javascript">varstr="VisitMicrosoft!"document.write(str.replace(/Microsoft/,"W3School"))</script>输出VisitW3School!Date（日期）对象日期对象用于处理日期和时间。Date()获得当日的日期和时间。getTime()返回从1970年1月1日至今的毫秒数。setFullYear()设置具体的日期…vard=newDate()d.setFullYear(1992,10,3)注意：表示月份的参数介于0到11之间。也就是说，如果希望把月设置为8月，则参数应该是7。日期则是从1开始Array（数组）对象定义数组以下方法均可varmycars=newArray()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"varmycars=newArray(3)mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"varmycars=newArray("Saab","Volvo","BMW")Array（数组）对象for…in语句循环输出数组中的元素varmycars=newArray()mycars[0]="Saab"mycars[1]="Volvo"mycars[2]="BMW"for(xinmycars){document.write(mycars[x]+"<br/>")}Array（数组）对象concat()合并数组vararr=newArray(3)arr[0]="George"arr[1]="John"arr[2]="Thomas"vararr2=newArray(3)arr2[0]="James"arr2[1]="Adrew"arr2[2]="Martin"document.write(arr.concat(arr2))Array（数组）对象join()将数组的所有元素组成一个字符串vararr=newArray(3);arr[0]="George"arr[1]="John"arr[2]="Thomas"document.write(arr.join());document.write("<br/>");document.write(arr.join("."));Array（数组）对象sort()排序functionsortNumber(a,b){returna-b}vararr=newArray(6)arr[0]="10"arr[1]="5"arr[2]="40"arr[3]="25"arr[4]="1000"arr[5]="1"document.write(arr+"<br/>")document.write(arr.sort(sortNumber))Math（算数）对象Math对象提供多种算数值类型和函数。round()对一个数进行四舍五入。random()返回0到1之间的随机数。max()返回两个给定的数中的较大的数。min()返回两个给定的数中的较小的数。JavaScriptHTMLDOM对象HTMLDOM是W3C标准（是HTML文档对象模型的英文缩写，DocumentObjectModelforHTML）。HTMLDOM定义了用于HTML的一系列标准的对象，以及访问和处理HTML文档的标准方法。通过JavaScript，您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。要改变页面的某个东西，JavaScript就需要获得对HTML文档中所有元素进行访问的入口。这个入口，连同对HTML元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。HTMLDOM独立于平台和编程语言。它可被任何编程语言诸如Java、JavaScript和VBScript使用。JavaScriptHTMLDOM对象HTMLDOM把HTML文档呈现为带有元素、属性和文本的树结构（节点树）。节点彼此都有等级关系。HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。Document对象每个载入浏览器的HTML文档都会成为Document对象。Document对象使我们可以从脚本中对HTML页面中的所有元素进行访问。部分document方法方法描述close()关闭用document.open()方法打开的输出流，并显示选定的数据。getElementById()返回对拥有指定id的第一个对象的引用。getElementsByName()返回带有指定名称的对象集合。getElementsByTagName()返回带有指定标签名的对象集合。open()打开一个流，以收集来自任何document.write()或document.writeln()方法的输出。write()向文档写HTML表达式或JavaScript代码。writeln()等同于write()方法，不同的是在每个表达式之后写一个换行符。HTMLDOMgetElementById()方法getElementById()返回对拥有指定ID的第一个对象的引用。语法document.getElementById(id)HTMLDOM定义了多种查找元素的方法，除了getElementById()之外，还有getElementsByName()和getElementsByTagName()。不过，如果需要查找文档中的一个特定的元素，最有效的方法是getElementById()。在操作文档的一个特定的元素时，最好给该元素一个id属性，为它指定一个（在文档中）唯一的名称，然后就可以用该ID查找想要的元素。HTMLDOMgetElementById()方法举例<html><head><scripttype="text/javascript">functiongetValue(){varx=document.getElementById("myHeader")alert(x.innerHTML)}</script></head><body><h1id="myHeader"onclick="getValue()">Thisisaheader</h1><p>Clickontheheadertoalertitsvalue</p></body></html>HTMLDOMgetElementsByName()方法getElementsByName()返回带有指定名称的对象的集合。该方法与getElementById()方法相似，但是它查询元素的name属性，而不是id属性。语法document.getElementsByName(name)因为一个文档中的name属性可能不唯一（如HTML表单中的单选按钮通常具有相同的name属性），所有getElementsByName()方法返回的是元素的数组，而不是一个元素。HTMLDOMgetElementsByName()方法实例

getElementsByNameHTMLDOMgetElementsByTagName()方法getElementsByTagName()返回带有指定标签名的对象的集合。语法document.getElementsByTagName(tagname)getElementsByTagName()方法返回元素的顺序是它们在文档中的顺序。如果把特殊字符串“*”传递给getElementsByTagName()方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。传递给getElementsByTagName()方法的字符串可以不区分大小写。举例varx=document.getElementsByTagName("input");alert(x.length);HTMLDOMwrite()方法write()向文档写入HTML表达式或JavaScript代码。可列出多个参数(exp1,exp2,exp3,...)，它们将按顺序被追加到文档中。语法document.write(exp1,exp2,exp3,....)使用document.write()向输出流写文本document.write("HelloWorld!");使用document.write()向输出流写HTMLdocument.write("<h1>HelloWorld!</h1>")document.write("HelloWorld!","HelloYou!","<pstyle='color:blue;'>HelloWorld!</p>")HTMLDOMRadio对象Radio对象代表HTML表单中的单选按钮。在HTML表单中<inputtype=“radio”>每出现一次，一个Radio对象就会被创建。单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。当单选按钮被选中或不选中时，该按钮就会触发onclick事件句柄。Radio对象属性举例radioHTMLDOMTableCell对象TableCell对象代表一个HTML表格单元格。在一个HTML文档中<td>标签每出现一次，一个TableCell对象就会被创建。innerHTML属性可设置或返回单元格的开始标签和结束标签之间的HTML。语法tabledataObject.innerHTML=textHTMLDOMTableCell对象示例tablecellWindow对象Window对象表示浏览器中打开的窗口没有应用于window对象的公开标准，不过所有浏览器都支持该对象。Window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中，Window对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。例如只写alert()，而不必写Window.alert()。HTMLDOMopen()方法open()打开一个新的浏览器窗口或查找一个已命名的窗口。语法window.open(URL,name,features,replace)

URL一个可选的字符串，声明了要在新窗口中显示的文档的URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。name一个可选的字符串，，该字符声明了新窗口的名称。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features将被忽略。features一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。replace一个可选的布尔值。规定了装载到窗口的URL是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true-URL替换浏览历史中的当前条目。false-URL在浏览历史中创建新的条目。HTMLDOMopen()方法举例<head><scripttype="text/javascript">functionopen_win(){window.open("")}</script></head><body><inputtype=buttonvalue="OpenWindow"onclick="open_win()"/></body>HTMLDOMopen()方法举例按照指定的长度和宽度打开空白窗口，写入一些内容，并将窗口设置为焦点myWindow=window.open('','','width=200,height=100')myWindow.document.write("Thisis'myWindow'")myWindow.focus()HTMLDOMclose()方法close()用于关闭浏览器窗口。语法window.close()方法close()将关闭有window指定的顶层浏览器窗口。某个窗口可以通过调用self.close()或只调用close()来关闭其自身。只有通过JavaScript代码打开的窗口才能够由JavaScript代码关闭。这阻止了恶意的脚本终止用户的浏览器。HTMLDOMalert()方法alert()用于显示带有一条指定消息和一个OK按钮的警告框。语法alert(message)message要在window上弹出的对话框中显示的纯文本（而非HTML文本）HTMLDOMconfirm()方法confirm()显示一个带有指定消息和OK及取消按钮的对话框。语法confirm(message)如果用户点击确定按钮，则confirm()返回true。如果点击取消按钮，则confirm()返回false。在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用confirm()时，将暂停对JavaScript代码的执行，在用户作出响应之前，不会执行下一条语句。HTMLDOMconfirm()方法举例confirmHTMLDOMsetInterval()方法setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInte

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

温馨提示

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

最新文档

评论

0/150

提交评论