一、简介HTML
1、HTML(Hyper Text Mark-up Language超文本标记语言)的缩写(标记:就是用来描述网页内容的一些特定符号)。HTML不是编程语言,而是一种描述性的标记语言,用于描述网页内容的显示方式,比如文字的颜色、大小,这些都是利用html标记来实现的。
2、HTML文档的创建方式:
- 手工直接编写(例如记事本)
- 通过图形化的HTML开发软件Dreamweaver
- 由web服务器上的动态网页程序生成
二、HTML的语法
HTML最基本的语法就是<标记符>内容</标记符>,标记符通常都是承兑使用的,有一个开始标记和一个结束标记。结束标记只是在开始标记的前面加上一个斜杠/当浏览器打开html文件后,就会理解里面的标记符,然后把标记符对应的功能表达出来。
HTML标记的类型:单标记与双标记
1、单标记
- <标记名称>:单一型,无属性值。如<br/>
- <标记名称 属性="属性值">:单一型,有属性值。如<hr width="80%" />
- <标记名称>...</标记名称>:没有属性值。如<title>...</title>
- <标记名称 属性="属性值">...</标记名称>:有属性值。如<body bgcolor="red">...</body>
- 标记与属性、属性之间以空格分隔
- 属性不区分先后顺序,且属性不是必须的
- 虽然在HTML中标记不区分大小写,但在XHTML中所有的标记都必须小写,所以建议所有标记都采用小写
所有的网页文件,通常由四对标记来构成文档的骨架,它们是:
<html>:标识网页文件的开始和结束,所有的html元素都要放在这对标记中
<head>:标识网页文件的头部信息,如标题、搜索关键字等
<title>标题</title>:标识文件的标题
</head>
<body>:标识文件的主体部分
正文
</body>
</html>
(一)、meta标记用于定义文件信息
meta标记用于定义文件信息,对网页文件进行说明,放置于<head></head>之间
- 设置关键字:<meta name="keywords" content="value">,多个关键字内容之间可以用逗号分隔。
- 设置描述:<meta name="description" content="value"/>
- 设置作者:<meta name="author" content="value"/>
- 设置字符集:<meta http-equiv="content-type" content="text/html;charset=gb2312"/>
- 设置页面定时跳转:<meta http-equiv="Refresh" content="2;http://www.itcast.com"/>
(二)、网页主体标记body
1、注释:<!--注释内容-->
2、body属性:
<body bgcolor="背景颜色" background="背景图片" text="文本颜色" link="链接文本颜色" vlink="访问过的链接文本颜色" alink="激活的链接文本颜色" leftmargin="zuobianjie" rightmargin="右边界" topmargin="上边界" bottommargin="下边界">
(三)、字体修饰
1、<font>标记:
<font color="文本颜色" size="字号" face=""></font>
2、字符格式
3、段落控制标记
<p align="对齐方式"></p>
属性名称:align,属性值:left(默认)、center、right
4、段落标题
<hx align="对齐方式"></hx>
x取值[1-6]:hx内的文本对自动加粗显示。
注:hx针对的对象时段落,font针对的对象时任意文本
5、换行:<br/>换行不换段
6、水平直线:<hr/>
(三)、特殊标记
1、定义一个块引用:使用文本缩进
格式:<blockquote>...</blockquote>
属性名称:cite,属性值:url,说明:被引用的地址
2、居中标记<center>内容</center>(被废弃的标签)
3、预格式化:<pre></pre>
4、显示已经格式化好的文字,不加此标记的话,HTML浏览器会忽略所有空格和制表符
(四)、列表标记
1、列表标记的用途:列表标记可以创建一般的无需列表、编号列表,以及定义列表的三种方式。还可以在一种列表中嵌套另一种列表。便于概括显示一系列相关的内容。
- 无需列表:<ul>...</ul>
- 有序列表:<ol>...</ol>
- 定义列表:<dl>...<dl>
- 语法:<ul type="项目符号类型"> <li type="项目符号类型">内容1</li> <li>内容2</li> </ul>
- 语法:<ol start="列表起点" type="项目符号类型"> <li>内容1</li> <li>内容2</li> </ol>
- 语法:
(五)、图片
1、web上支持的图片格式
- GIF(图形交换格式):GIF格式文件最多只能保存256种颜色。该格式支持透明色,支持动画效果。
- JPEG(联合图像专家组):改格式不支持透明色及动画,颜色可达1670万种。
- PNG(网格可移植格式):该格式支持透明色,但不支持动画,颜色从几十种至1670万种。
- 绝对路径:提供目标文档的完整主机名称、路径信息、及文档全称
- 相对路径:从当前文档开始的路径
- 根相对路径:从站点根目录开始的路径,以/开头
四、表格
(一)、表格结构和属性
1、因为表格中可以包含任何内容,所以在使用DIV+CSS之前,网页设计师是使用表格对网页内容进行排版与布局的
2、表格基本结构:
- <table>...</table>--------定义表格
- <tr>...</tr>----------定义行
- <td>...</td>-----------定义列(单元格)
- <th>...</th>-----------定义标题栏(文字加粗)
3、表格的属性<table>
4、<table>标签下的边框设置
4、行的属性<tr>
5、列的属性<td>
(二)、表格的结构化
1、结构化格式:
- <table>
- <thead>...</thead>---------表头区
- <thead>...</thead>---------表体区
- ..........
- <tfoot>...</tfoot>----------表尾区
- </table>
3、表格的标题:<table> <caption>...</caption> </table>
五、超链接
一个网站由多个网页组成的,网页之间通过连接实现相互关联。
(一)、连接的概念
实现当前文档到目标文档的一种跳转。
(二)、链接语法
<a href=连接的目标 title="注释" target="打开链接窗口的形式">...</a>
- _blank:在新窗口中打开
- _self:在自身窗口中打开(默认)
- _parent:在上一级窗口中打开
- _top:在本窗口中打开
- <a href=目标文档位置及全称>
- <a href=URL>
- <a href=mailto:电子邮件地址>
- 创建锚点:<a name="锚点名称">...</a>
- 链接锚点:<a href="#锚点名称">...</a>
5、空链接:就是没有目标端点的链接
- <a href="#"></a>
A、设为首页:<a href="#" onClick="this.style.behavior='url(#default#homepage)';this.sethomepage('http://www.sohu.com')">设为首页</a>
B、添加收藏:<a href="#" onClick="javascript:window.external.addfavorite('http://www.sohu.com','搜狐')">加入收藏夹</a>
6、脚本链接:是一种特殊的链接,当单机设置脚本链接的文本或图像时,可以运行相应的JavaScript语句。
例如:
<a href=javascript:window.open(“http://www.163.com”)>新浪</a>
- 关闭窗口:输入javascript:window.close()
- 打开窗口:输入javascript:window.open ('文件名')
六、表单
(一)、表单的功能
1、表单的作用是从访问您web站点的用户那里获取信息,访问者可以使用诸如文本框、列表框、单选框及复选框之类的表单元素输入信息,然后单击某个按钮提交这些信息。
2、客户端和服务器端进行交流的途径。
(二)、表单标记
1、form标记用于创建一个表单,定义表单的开始和结束,它是一个容器,用于包含其他表单元素,例如文本框、单选框等。表单元素必须写在form标记内才有用。
2、格式:
<form action=URL(处理表单信息的服务器端应用程序) method=处理表单数据的方法(POST/GET)如果不写默认为GET name=表单名称>...</form>
3、表单元素标记:
A、单行文本框:
<input name="文本框名称" type="text" value="初始值" size="显示字符数" maxlength="最多容纳字符数" readonly="readonly"(设置为只读) disabled="disabled"(设置为不可操作) />
B、密码框:
<input name="密码框名称" type="password" value="初始值" size="显示字符数" />
C、多行文本框:
<textarea name="文本框名称" cols="每行的字符数" rows="显示的行数"></textarea>
D、单选框:
<input name="单选框名称" type="radio" value="提交值" checked="checked"(是否被选中)/>
E、复选框:
<input name="复选框名称" type="checkbox" value="提交值" checked="checked" />
F、标注:
<label for="man">男</label> <input type="radio" name="sex" value="男" id="man">
G、列表框:
- 菜单式:
<select name="列表框名称">
<option selected="selected"(哪个为初始值就添加selected语句) value="提交值">列表1</option>
<option value="提交值">列表2</option>
......
</select>
分组:<optgtoup label="分组名称"></optgroup>
- 列表式
H、按钮:
<input type="按钮类型(reset重置表单、submit提交表单、button普通按钮)" name="按钮名称" value="按钮显示文本" />
I、图片按钮:
<input name="按钮名称" type="image" src="图片路径" />
J、隐藏域:
<input name="名称" type="hidden" value="提交值" />
K、浏览框:
<input name="名称" type="file" size="显示长度" />
L、表单外框:
<fieldset >...</fieldset>--------定义围绕表单中元素的边框
<legend>...</legend>---------legend为fieldset定义标题
七、插入多媒体元素标记
1、Flash动画的插入
2、插入MP3音乐
3、插入背景音乐
<bgsound src="音乐文件名及路径" loop="循环次数" />(如果loop=-1即为无限循环)
4、插入视频wmv格式
<embed src="tmcq.wmv"></embed>
5、网络流媒体文件的插入
<embed src="http://player.youku.com/player.php/sid/XMzA1MDE5MDMy/v.swf" allowFullScreen="true" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">
</embed>
6、滚动字幕
<marquee>滚动的文字</marquee>
- direction="滚动方向"(left、right、up、down)
- behavior="滚动方式"(scroll、slide、alternet)
- loop="循环次数"(若未指定则循环不止,loop=infinite)
- bgcolor=""
- onMouseOver="this.stop()" onMouseOut="this.start()"
- scrollamount=""
- scrolldelay=""
八、框架--实现网页之中嵌套网页
1、框架的功能:
将浏览器划分为不同的区域,每个区域可以包含不同的网页。以实现多个网页在一个浏览器窗口中显示的效果。
2、框架的格式:
写框架时,不需要写body语句。
<frameset rows="行数及行高" cols="列数及列宽" framespcing="框架间距" frameborder="是否显示边框(yes,no/0,1)" border="边框宽度" bordercolor="边框颜色">
<frame src="文件地址及名称" name="框架名称" noresize="是否允许改变尺寸(true/false)" scrolling="滚动条显示(yes/no/auto)">
</frameset>
3、内嵌式框架
<iframe src="被嵌套的网页地址及名称" width="宽度" height="高度" frameborder="是否显示边框(0,1)" scrolling="滚动条显示(yes/no/auto)">
</iframe>
九、从html迈向xhtml
1、什么是XHTML?
XHTML是The Extensible Hyper Text Markup Language的缩写,xhtml的意思是可扩展标识语言。
XHTML是HTML向XML过度的一个桥梁,Xhtml是基于html的,这是更严密、代码更简洁的HTML版本。
2、DOCTYPE
DOCTYPE是document type(文档类型)的简写,主要用来说明你用的XHTML或HTML是什么版本。浏览器根据DOCTYPE定义的DTD来解释页面代码,并展现出来。所以,建立符合标准的网页,DOCTYPE声明是必不可少的关键组成部分。
3、XHTML1.0提供了三种DTD声明:
- 过度的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.0.1的标记(但是要符合xhtml的语法),完整代码如下:
- 严格的(Strict):要求严格的DTD,你不能使用任何表现层的标记和属性,例如<br>,完整代码如下:
- 框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种DTD。完整代码如下:
4、XHTML与HTML的区别:
- XHTML标签必须被正确的嵌套;
- XHTML标签必须被关闭;
- 标签名必须用小写字母;
- 属性名必须用小写,必有值,值必加引号;
一、Web标准简介
1、什么是web标准?
web标准不是某一个标准,而是由W3C和其他标准化组织指定的一系列的标准集合,包含我们熟悉的HTML、XHTML、JavaScript、CSS等。
2、web标准的目的?
在于创建一个统一的用于web表现层的技术标准,以便于通过不同浏览器或终端设备向最终户展示信息内容。
3、采用web标准的好处?
- 提高页面浏览速度:使用css方法,比传统的设计方法至少节约50%以上的文件尺寸。
- 缩短改版时间,将表现(样式/外观)与内容(信息/数据)相分离:只需要简单的修改几个css文件就可以重新设计一个有成千上万页面的站点。
- 降低网站流量的费用:带宽要求降低(代码更简洁),成本降低。
- 更容易被搜索引擎搜索到:提高网站在百度或谷歌上的排名。
- 内容能被更广泛的设备访问:包括屏幕阅读、手持设备、搜索机器人、打印机、电冰箱等等。
- 结构(structure)
- 表现(presentation)
- 行为(behavior)
5、理解表现和结构的分离
基本的概念:内容、结构、表现和行为
- 内容:就是制作者放到页面内真正想让访问者浏览的信息。
- 结构:使内容更加具有逻辑性和易用性(类似于一级二级标题、正文、列表等称为结构)
- 表现:用于修饰内容外观的样式
- 行为:对内容的交互及操作效果,如通过JavaScript判断表单提交等
(二)、CSS语法结构
1、选择符{ 属性:值 }
例如:body{ font-size : 12px; }
参数说明:
- 选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,如body、h1等;也可以是定义了特定的ID或class的标签,如#main选择符表示选择<div id="main">,即一个被指定了main为id的对象。
- 属性(Property):选择符的样式属性,如颜色、大小、定位、浮动方式等。
- 值(Value):指属性的值。
2、CSS长度单位
3、CSS颜色单位
4、CSS控制字体
(三)、CSS在网页中的应用方式
1、内联式样式表:直接写在现有的标记中,如:
<p style="color:red">...</p>
2、嵌入式样式表:使用<style></style>标签嵌入到HTML文件的头部<head>标记内,如:
<style type="text/css">...</style>
3、外部链接式:将样式表写在一个独立的css文件中,然后再页面head区<head>标记内用<link>标签调用它,如:
<link href="main.css" rel="stylesheet" type="text/css">
4、导入式样式表:导入式样式表和链接式样式表的功能基本相同,只是语法和动作方式略有不同,同样也将导入式样代码写在<head>标记内,如:
<style type="text/css">
@import url(basic.css);
</style>
(四)、CSS选择符类型
1、类型选择符:就是HTML文档中的元素,如:
p{属性:值}
2、类选择符:可以自定义样式,应用于一个或多个网页元素,类在网页中可以出现多次用于定义重复的样式,类以.开头,后面的名称自己定义,类定以后还需要在网页中加入class=类名称,加以调用。如:
.warning{属性:值}
<p class="warning">...</p>
3、ID选择符:与类基本相似,只是以英文#开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。如:
#main{属性:值}
<p ID="main">...</p>
(五)、CSS样式的特点
1、继承:
- 网页中子元素将继承父元素的样子,例如:要控制段落p中的文字大小,可以直接给body标记家样式。
2、层叠(覆盖):
- 网页中子元素定义了与父元素相同的样式,则子元素的样式将覆盖掉父元素中的样式
- 定义后面的样式会覆盖前面的样式
(七)、CSS控制文本
(八)、CSS控制链接
三、CSS高级
(一)、CSS选择符的详细使用
1、类型选择符:
- 就是html文档中的元素[作用于html标记]。如:p{属性:值}
2、类选择符:
- 可以自己定义样式,应用于一个或多个网页元素,类在网页中可以出现多次,用于定义重复的样式。类以英文.开头,后面的名字自己定义,类定以后还需要在网页中加入"class=类名称",加以调用。如: .waring{属性:值} <p class="waring">...</p>
3、ID选择符:
- 与类基本相似,只是以英文#开头,因为ID具有唯一性,所以在网页中只能出现一次,用于定义只出现一次的样式。如: #main{属性:值} <p ID=main></p>
4、通配选择符:
- 用于定义所有元素。如:*{属性:值}
5、包含选择符:
- 所有被e1包含的e2。如:table td{属性:值}
- 同时给某个元素应用多个类和ID。如:<p class="a1 a2" id="a6">...</p>
6、选择符分组:
- 将同样的样式定义用于多个选择符,选择符之间用逗号隔开。如:body,div,p{属性:值}
7、标签指定式选择符:
如果既想使用id或class,也想使用标签选择符,那么,
- h1#content{}:表示针对所有id为content的h1标签;
- h1.content{}:表示针对所有class为content的h1标签;
8、组合选择符:
将以上选择符组合使用,那么,
- h1 .content{}:表示在h1下所有class为content的标签;
- h1 .content,#content h1{}
(二)、CSS常用属性
1、CSS控制边框属性:
功能 | 语法 |
设置边框粗细 | border-top-width:12px |
设置边框样式 | border-bottom-style:slide(实线)、dashed(虚线) |
设置边框颜色 | border-right-color:#000000 |
设置某一边框的属性 | border-边框位置:线宽 线型 颜色 |
设置四条边的属性 | border:线宽 线型 颜色 |
2、CSS控制背景:
功能 | 语法 |
背景 | background:颜色 图片 平铺方式 固定方式 位置 |
背景颜色 | background-color:#ccc |
背景图片 | background-image:url |
背景图片的重复方式 | background-repeat:【repeat,no-repeat,repeat-x,repeat-y】 |
背景图片的依附方式 | background-attachment:【scroll,fixed】 |
背景图片的位置 | background-position:top【left、center、right】 center【left、center、right】 bottom【left、center、right】,x坐标y坐标(左上角是0,0,单位是像素px) |
3、CSS控制列表:
功能 | 语法 |
列表属性 | list-style:list-stylet-ype list-style-position list-style-image |
列表项目类型 | list-style-type:none,disc,circle,square,decimal,lower-roman,upper-roman,lower-alpha,upper-alpha |
列表项目位置 | list-style-position:inside,outside |
列表项目图片 | list-style-image:url,none |
4、CSS控制元素的尺寸:
功能 | 语法 |
设置元素的宽度 | width:100px |
设置元素的高度 | height:100px |
设置元素最小宽和高 | min-width:50px,min-height:50px |
设置元素最大宽和高 | max-width:50px,max-height:50px |
设置元素的外边距 | margin:上 右 下 左 |
设置元素的内边距 | padding:上 右 下 左 |
四、CSS+DIV布局
(一)、网页元素分类
1、div是什么?
div是一个容器,能放置内容,例如:<div>内容</div>。
说明:XHTML中每一个标签对象几乎都可以成为一个容器,例如:<h1>标题</h1>。
div是xhtml中指定的,专门用于布局设计的容器对象。CSS布局中,div是这种布局的核心对象,做一个简单的布局只需要两样东西div与css,因此也有人称CSS布局为div+css布局。
(二)、盒子模型
1、盒子模型:W3C组织建议把所有网页中的对象都放到一个盒子中。
- 设计师可以通过创建定义来控制这个盒子的属性,这些对象包括段落、列表、标题、图片及层<div>。
2、盒子模型主要定义这四个区域:内容(content)、填充(padding)、边框(border)、边界(margin)。
3、整个盒子模型在页面中所占的宽度:左边界+左边框+左填充+内容+右填充+右边框+右边界。
示意图如下:
3D示意图如下:
(三)、CSS布局
1、元素的分类:不同的元素在文档类型定义DTD(Document Type Difinition)内有默认的分类,可以通过css修改分类的定义。
【1】、块级元素:{display:block}
- 每个块级元素都从一个新行开始,而且其后的元素也需要另起一行开始,如:div[层]、标题、段落、表格、body等;
- 块级元素只能作为其他块级元素的子元素,而且需要一定的条件;
【2】、内联元素:{display:inline}
- 内联元素不需要在新行显示,而且也不强迫后面的元素换行,如:a、em、span等;
- 内敛元素可以作为任何元素的子元素;
【3】、隐藏元素:{display:none}
- 当某个元素被设置为display:none时,浏览器会完全忽略这个元素,此元素将不会被显示;
2、浮动与清除浮动
【1】、浮动(float)
浮动(float)是CSS实现布局的一种方式,包括div在内的任何元素都可以浮动的方式展示。
值:
- none:不浮动
- left:对象向左浮动,而右侧的内容流向对象的右侧
- right:对象向右浮动,而左侧的对象内容流向对象的左侧
【2】、浮动的清理(clear)
清理时浮动的又一个有用的工具,实现拒绝浮动对象对后面对象的影响。
技巧:
- 当浮动了许多元素之后,突然需要另起一行时,可以制作一个空白的div标签,为其设置clear:both清楚左右的浮动
【3】、溢出(overflow)
设置当前对象的内容超出其指定高度和宽度时,如何管理内容。
- visible:默认值,不剪切内容,也不添加滚动条;
- auto:在必须时,对象内容才会被剪切,或显示滚动条;
- hidden:不显示超过尺寸的内容;
- scroll:总是显示滚动条;
【4】、定位(position)
设置对象的定位方式。
- static:静态定位,页面中没一个对象的默认值;
- absolute:绝对定位,将对象从文档流中分离出来,通过设置left、right、top、bottom四个方向,相对于父级元素进行绝对定位;
- relative:相对定位,对象不从文档流中分离出来,通过设置left、right、top、bottom四个方向,相对于自身位置进行相对定位;
4、CSS布局方式
- 默认文档流方式:以默认的html元素的结构顺序显示;
- 浮动布局方式:通过html元素的float属性显示;
- 定位布局方式:通过设置html元素的position属性显示;
#box{
width:300px;
height:300px;
position:relative;
}
#first{
width:300px;
height:300px;
position:absolute;top:10px;
right:20px;
}
#second{
width:300px;
height:300px;
position:absolute;top:100px;
left:200px;
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
5、清除浮动的方式
【1】、额外标签法:w3c推荐,在浮动元素的最后添加一个空标签
.clear{
clear:both;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
<div class="clear">...</div>
</div>
【2】、overflow方法:
#box{
width:300px;
height:300px;
overflow:hidden;
}
<div id="box">
<div id="first">...</div>
<div id="second">...</div>
</div>
【3】、利用伪对象after方法(网上最流行的清除浮动代码)
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}
.clearFix{zoom:1}
第三部分:JavaScript
一、JavaScript简介
1、JavaScript概述
JavaScript是基于对象和事件的脚本语言。
特点:
- 安全性(不允许直接访问硬盘),他可以做的是信息的动态交互。
- 跨平台性。(只要是可以解释执行JS的浏览器都可以执行,和平台无关)
2、JavaScript和Java的不同之处
- JS是Netscape公司的产品,Java是SUN(现在是Oracle)公司的产品。
- JS是基于对象,Java是面向对象。
- JS只需要解释执行,Java需要先编译成字节码文件,再执行。
- JS是弱类型,Java是强类型。
3、JavaScript和HTML结合的方式
想要将其他代码融入html中,都需要以标签的形式
- 代码放在<script>...</script>标签中
- 使用script标签的src属性引入一个js文件,方便后期更新,及维护。例如:<script type="javascript" src="test.js"></script>
二、JavaScript语法
1、变量
通过关键字var来定义,弱类型即是不用指定具体类型。
例如:var x = 12; x = "hello";
注:JS中特殊的常量undefined,当变量没有初始化就被使用,该变量的值就是undefined(未定义)。
2、语句
- 判断结构(if语句)
注:在JS中0就是false,非0就是true(通常用1表示)
- 选择结构(switch语句)
注:没有具体类型限制
- 循环结构(while语句,do...while语句,for语句)
3、函数
- 一般函数
格式:
function 函数名(形式参数...)
{
执行语句;
renturn 返回值;
}
函数是多条语句的封装体,只有被调用才会被执行。
注意:调用有参数的函数,但没有给其赋值,函数一样可以运行;或者调用没有参数的函数,给其传值,也一样运行。简单地说,只要写了函数后面的小括号,函数就可以运行。
其实,在函数中有一个参数数组对象(arguments),该对象将传递的参数都封装在一个数组中。例如:
function demo(){
alert(arguments.length);
}
demo(123,"hello",true);//调用函数,弹出对话框的结果为3。
通过for循环遍历该数组,如:
for(var x=0;x<arguments.length;x++){
alert(arguments[x]);
}
函数在调用时的其他写法:
var show = demo()//show变量接收demo()函数的返回值
var show = demo //这种写法是可以的,意为show和demo是一个函数,那么该函数也通过show()的方式运行
- 动态函数
通过JS的内置对象function实现,例如:
var demo = new function("x,y";"alert(x+y)";);
demo(4,6);
和一般函数不同的是,动态函数、参数及函数体都可以通过参数传递,动态指定。
- 匿名函数
格式:function(){...},例如:
var demo = function(){...}
demo();
通常在定义事件属性的行为时,较为常用。
匿名函数就是一种简写格式。
4、数组
方便操作多元素的容器,可以对其中的元素编号。
特点:可以存任意元素,长度是可变的。
格式:
var arr = new Array();
arr[0] = "hello";
arr[1] = 123;
var arr =["hello",123,true,"abc"];
for(var x=0;x<arr.length;x++){
alert(arr[x]);
}
5、对象
JS除了已经提供的内置对象外,也可以自定义对象。
例如:
function Person(){}
var p = new Person();
p.name = "zhangsan"
p.age = 13;
p.function(){
alert("run");
}
或:
funtion Person(){
this.name = name;
this.age = age;
}
var p = new Person("zhangsan",13);
with语句
格式:
with(对象){}
应用:
当调用一个对象中多个成员时,为了简化调用,避免"对象. "这种形式的重复书写,可以写成:
var p = new Person(“zhangsan”,20);
with(p)
{
alert(name+”,”+age);
}
with语句定义了某个对象的作用域,在该域中可以直接调用该对象的成员。 for...in语句
用于遍历对象属性。
例:
var p = new Person(“zhangsan”,20);
for(x in p){
alert(x);//结果是两个对话框,一个是name,一个是age。
alert(x+”:”+p[x]);//可以得到属性与属性的值。p[x]:p对象就是个数组,要通 过指定的元素名获取元素的值。
}
三、window对象
1、navigator对象
- appName属性:浏览器的名称
- AppVersion属性:浏览器的版本号
2、location对象
- href属性:获取或者设置地址
3、screen对象
- height与availHeight属性:获取屏幕的高度,是否去除任务栏
- width与availWidth属性:获取屏幕的宽度,是否去除任务栏
4、event对象
- keyCode属性:获取键盘按键
- returnValue属性:获取或者设置某个属性的返回值
- srcElement属性:获取某个事件的源对象
5window方法
- confirm:弹出一个确认对话框,返回值的值为true或false
- focus:使某个元素获得焦点,并执行onfocus时间制定的代码
- moveBy与moveTo:移动
- open:打开窗口,可以制定标题、打开方式、窗口属性(标题栏、滚动条、可变大小等)
- prompt:显示一个提示框,有一条消息和一个输入框
- setTimeout与clearTimeout:间隔多长时间之后执行
- setInterval与clearInterval:每间隔多长时间执行