javascript之传智播客

张孝祥JavaScript网页编程第一章 HTML基础
注释标签不可以嵌入。
特殊字符的表示：
< <
> >
 空格
©&copt;版权符号。
&&
"“
格式标签：
<p align="left"></p> 表示段落
<br> 换行
<nobr></nobr> 用于防止浏览器将过长的文字换行显示
<blockquote></blockquote> 加入的文本按缩进的方式显示
<center></center> 居中
<marquee></mqrquee> behavior="slide" "scroll" "alternate" direction="up" "down" "left" "right"
<dl></dl><dt></dt><dd></dd>创建一个普通的列表，以及列表上层的项目和下层的项目
文本标签：
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
<h7></h7>字号从大到小
<b></b> 粗体
<em></em> 显示需要突出，粗体加斜体
<sub></sub> 下标
<sup></sup> 上标
<i></i> 斜体
<u></u> 加一划线
<tt></tt> 用于以打印字体的方式显示
<cite></cite>引用方式的文本
<strong></strong> 要加重的文本，黑体加粗体
<font></font> 对显示文本的,face,size,color.分别表示字体的名称，字体的大小，字体的颜色。
超链接标签：
<a href=" "></a>用于在文本或图像的两端
<a href="mailto: admin@it315.org"></a>将启动电脑上的邮件发送程序
name属性定义定位标记。例如：<a name="标记1">第一部分，使用用<a href="#标记1">跳转到第一部分</a>就可以定位到网页中标记的这个位置。
<a href="#"></a>将会将网页文件定位到自己本身
<a href=""></a>指向网页文件所在的目录，若在WWW服务器上，将会打开目录下的默认网页。
URL是Uniform Resource Locator的简写，中文是统一资源定位符，用来表示Internet网络资源的位置。
通常的URL一般由协议，主机名，端口号，资源名。
例如：http://www.it215.org:8080/index.html
Http协议归定了浏览器从WWW服务器上获取网页文件的方式。
URL中的端口号部分用来指定客户端所要连接的网络服务器的监听端口号，每一种标准的网络协议都有一个默认的端口号，例如：Http协议的默认端口号为80.如果使用的某种协议使用的是默认端口号，那么，我们在访问这个服务器的URL时不需要指定端口号。
URL是大小写敏感的，在很多时候，人们使用相会URL来增加灵活性，不包括协议和主机地址信息。/表示主机上某种协议的根目录，../表示父目录，../../表示父目录的父目录，直接使用文件名表示当前目录。
为URL指定参数，他们在向WWW服务器传送地址的时候还可以带上参数，每一个参数由参数名和参数值组成。如下：
http://www.it35.org/dearlregister.html?name=zhangsan&passward=12
只有参数名没有参数值也是允许的，但是一定要有等号，URL地址与参数之间用？隔开，每个参数之间用&隔开。接受参数的Internet网络资源通常都是一个可以在服务器上运行的程序，在WWW服务器上可以将这个程序以某种方式映射成为网络文件的格式。
带有定位标记的URL：
http://www.it315.org/index.html#section2
URL编码：
在HTTP协议中，浏览器不能向WWW服务器传递某些特殊字符，需要通过URL编码后传递。
mailtoURL
mailto协议可以带一部分参数，但是里面的空格必须使用20%表示。可以带的参数及其意义是：
subject 主题
CC 抄送
BCC 暗送
body 邮件的正文
关于抄送和暗送的区别：
使用抄送可以使得收件人知道你抄送给了哪些人，使用暗送收件人就不会知道你把这封邮件暗送给了哪些人。
如：
mailto:zxx@it315.org?subject=Feedback&body=how20%are20%you!
URL编码规则：
空格转化为+号
对0-9，a-z,A-Z保持不变。
对于其他所有的字符，用这个字符的16进制格式表示并在每个字节前加一个%号。
对于空格也使用它的十六进制表示，即20%表示。
+ 2B%
= 3D%
& 26%
如果确信URL串的特殊字符没有引起使用上的岐义，你也可以对这些字符不进行编码，而是直接传递给服务器，如：
http://www.it315.org/dealregister.html?name=中国&password=123
如果URL中的特殊字会产生岐义，则要对其进行编码如+&
对于服务器端开发人员则要考虑使用URL编码。
图像标签：
<img src="">还可以设置如下属性:alt,align,border,width,height
alt属性表示当鼠标放在图像上面时，图像上方所显示的文本，当src属性的图像无法加载时，浏览器也会显示alt属性所设置的值。
align属性指示了它与周围文本的对齐方式。
<img>标签用于实现网页计数器的一种方式。
<hr>size,color,width,noshade
图像地图
有时候我们需要把一个图像分成几个区域，每个区域指向不同的URL，如，将一幅中国地图招安省市划分不同的区域，这些区域被称为热点，单击热点区域，就可以链接到与之相应省市有关的页面，分为服务器端图像地图和客户端图像地图
怎么样产生图像地图？
首先必须定义出图像上的各热点区域的形状，位置，坐标及其指向的URL地址。这个过程叫作图像热点映射，图像热点映射需要使用<map name=mapname></map>标签对进行说明，其中的name属性为该图像热点映射指定了一个名称。
图像热点映射中的各个区域用<area>标签来说明，<area>标签的格式是：
<area shape="" coords=" " href="">href也可以用nohref替换，表示在该区域单击鼠标无效。<area>标签可以有一个target属性，用来手续费示浏览器在哪个窗口中显示href属性所指向的网络资源。
定义好了图像热点映射后，接着就要在<img>图像标签中增加一个名为usemap的属性设置，usemap指定该图像被用作图像地图，其设置值为所使用的图像热点映射名称，格式为<map>标签的name属性前多加一个#号，如<img src="china.jpg" usemap="#mymap">
图像地图举例：
<img src="china.gif" usemap="#mymap">
<map name="mymap">
<area shape="rect" href="a.html" coords="140,20,280,60">
<area shape="poly" href="b.html" coords="100,100,180,4180,200,140">
<area shape="circle" href="c.html" coords="80,100,60">
</map>
shape属性设置说明：
rect 矩形，左上角和右下角的坐标
poly 多边形，各顶点坐标，

circle 圆形，圆心坐标和半径。

张孝祥javascript第二章 HTML高级部分
表格标签，最明显的好处是行列可以对齐，可以用于对Web页面的规划。
<table></table>
属性如下：bgcolor,border,bordercolor,bordercolorlight,bordercolordark,cellspacing,cellpadding,width,height,
<tr></tr>
<th></th>
属性：align,valign,bgcolor
<td></td>
属性：width,height,align,valign,colspan,rowspan,nowrap
cellspacing:表示在整个单元格当中每个单元格与每个单元格之间的间距，。
cellpadding:表示在每个单元格当中该单元格边框与其中的内容之间的间距。
colspan:单元格所占的列数
rowspan:单元格所占的行数
nowrap:禁止浏览器对过长的内容进行自动换行。浏览器在过长的文本内容中进行换行的依据是空格，中文字符，-。
问题：当表格中的内容过长时，该表格会被撑的很大。该如何解决，在HTML中无法解决，要与将要学到的CSS级联样式表结合就可以控制。
<caption></caption>表格的标题
帧标签
分帧的作用：将一个浏览器文档窗口分隔成多个窗口，每个窗口都实现一个独立的网页文件。即可实现导航式菜单的效果。
考虑如下一段代码：
<frameset rows="20%,*">
<frame src="top.html" name="top">
<frameset cols="30%,*">
<frame src="left.html" name="left">
<frame src="right.html" name="right">
</frameset></frameset>
在left.html中代码如下：
<a href="right1.html" target="right"></a>
<a href="right2.html" target="right"></a>
<frameset>标签属性：rows,cols,border,frameborder
<frame>标签属性：src,name,scrolling,noresize
<noframes></noframes>当浏览器窗口不支持时显示
表单元素一
<form></form>表单的开始和结束标签。<form>标签具有action,method,target,title,enctype等属性。
zction属性用来设置接收和处理浏览器表单内容的服务器程序的URL。
例如：<form action="http://www.it315.org/counter.cgi">
method属性用来定义浏览器将表单中的内容提交给服务器端程序的处理方式。取值可以为get,post.
method属性的默认值为get,使用get属性表示浏览器将表单内容作为URL参数的形式发送给WWW服务器，使用get传送的数据量是有限的。它不能超过1kb.
使用post：浏览器将把表单信息作为HTTP的实体内容发送给WWW服务器，这时URL不会包含参数。通过post传递的数据我们无法直接看到，它传送的数据可以大的多。
一般包含口令或会引起WWW服务器上数据变化的信息如注册信息要采用post方式。
target属性用来指定服务器返回结果的目标窗口或目标帧。
title用来设置当网站访问者的鼠标在表单上的任一位置停留数秒后，浏览器用黄色小浮标显示的文本，如表单的描述和名称。
title属性是许多HTML元素都具有的一个属性，它的使用频率也是高的。
enctype属性指示浏览器使用哪种编码方法来将表单数据传送给WWW服务器，该属性可以有两种取值：aplication/x-www-form-urlencoded和multipart/form-data;
<form>中的各种标签：
<input type="submit">提交按钮
<input type="reset">重置按钮，重置按钮的名称和值都不会传递给WWW服务器。
<input type="text">单行文本输入区域，有一个size属性，指示文本输入框的宽度，有一个value属性，指示初始值，而且当点击重置按钮后也会显示初始值，。maxlength用来限制最多输进的字符个数。readonly属性表示该对话框可以获得焦点，但是不能改变其值，disabled属性表示该表单输入域不会获得焦点。而且其信息也不会传递给WWW服务器。
<input type="checkbox">复选框，checked是复选框的首选属性，这是一个不需要赋值的属性，只要设置了这个属性，表示其为选中，value表示复选框的参数值一同传送给WWW服务器。
<input type="radio">单选按钮，只要将若干个单选按钮的name属性设为一样，它们就成为了一组单选按钮，浏览器只允许一个单选按钮被选中，checked表示其实例状态被选中。
<input type="hidden">创建隐藏的表单字段元素，浏览器不会显示隐藏的表单字段元素，但是当用户提交表单的时候，浏览器会将它的name属性和value属性的值传送给WWW服务器。可以预设某些要传递的信息，。
例如：一个网站注册部分分为两部分，第一部分为用户名，第二部分为其他信息，在第二部分提交时也要把第一部分提交，因此需要使用隐藏表单。
<input type="password">密码区域，对于密码的表单，你最好将它的递交方式设置为post.
表单元素二
<input type="file">用于将用户的文件上传，会出现一个单行文本区域和一个浏览按钮，如果要将文件真正的上传到WWW服务器，需要将method属性设为post,enctype设为multypart/form-data.
<input type="image">可以在表单上创建一个图形元素，这个图像的源文件由src属性指定，单击这个图像，这个图像的X,Y坐标及其他元素的信息传递给了WWW服务器，X,Y坐标的参数值分别为该图像的name属性必加.x,.y.
<select></select><option></option>
<select>具有两个属性，size,multiple
size属性用来设置在列表框中可以看得见的列表列的数目，默认值为1.当size属性设置的值大于1时，会出现一个滚动条。但是通过这种方式一次只能选择一项，如果想要选择多项，就需要设置它的multiple属性，只要将其加入到标签中即可。不需要对其设值，在列表中想多选的话按住CTRL键。
<option>标签的属性：value,selected
如果选择以后，这个<option>的value值和<select>的name值一同作为参数传递给WWW服务器，如果<option>没有设置value,浏览器就会将<option></option>标签对之间的文本作为参数传递给WWW服务器，selected用来指示初始选中项。。。还可以设置一个选项，使其value值为空。表示放弃选择。
<textarea></textarea>用来表示可以输入多行文本的文本输入域。
属性：cols,rows,用来设置列数，行数。它没有一个可以用来设置初始值的value值。如果想设置初使值，则需要在该标签对中加入值即可。
<label>标签的作用：如果想使用快捷键对表单元素之间进行切换。就需要使用该标签。
对于需要快捷键设置的表单元素，需要设置它的id值。
考虑如下一段代码：
<label for="usr" accesskey="a">用户名</label>
<input type="text" name="usr" id="usr">
即设置了该表单元素的快捷键ALT+A.
meta标签：
有两种类型的meta标签，用不同的属性名来划分。这两种属性名分别为name和http-equiv.即如下两种格式;
<meta name="某个设置值" content="对该设置值进行补充说明信息">
<meta http-equiv="某个设置值“ content="对该设置值进行补充说明信息">
name属性用于在网页中加入一些关于网页的描述信息，例如：网页的关键字（可供网页搜索引擎机器人查找，分类），网页的描述信息等。
http-equiv属性用于在HTML文档中模拟HTTP协议的响应消息头，例如：告诉浏览器是不是应该缓存该网页，使用什么样的字符集来显示网页内容，隔多长时间自动刷新网页等。
meta标签的name属性设置：
keywords 将其content值作为关键字，若有多个关键字，用逗号隔开。例如：
<meta name="keywords" content="vc,java,培训">
description 把content所填入的内容作为网页的简要描述。
robots content设置值如下：index noindex follow nofollow all none
index表示可以检索和收录这个页面
noindex表示不可以搜索和收录这个页面
follow表示可以让搜索引擎顺着这个页面的超链接继续往下查找
nofollow与follow相反
all=index+follow
none=noindex+nofollow
4. Generator用于说明编辑这个网页时所使用的工具名称
5.Author 网页作者
6. Copyright版权符号声明，均在content中表示详细内容
meta的http-equiv属性
1.content-type用来说明网页的MIME类型以及文本内容使用的字符编码。
如：<meta http-equiv="content-type" content="text/html;charset=gb2312">
用来说明当前使用的文档是HTML文档，它所使用的字符集是国标2312。
2.Refresh用来模拟http协议的refresh头的作用。用来告诉浏览器在多长时间后自动刷新页面或跳转到另一个页面上。
例如：<meta http-equiv="refresh" content="1;url=http://www.it315.org">
将会在该网页打开一秒后自动打开http://www.it3415.org
3.Expires头 Content的设置值应该是一个GMT的时间文本
例如：<meta http-equiv="Expires" content="MOM,12 may 2001 00:20:00 GMT">
将content设置为0.可以禁止浏览器缓存页面。
4.Windows-target:可以强制某个页面在固定的窗口中显示。
例如：要防止自己的网页被别人当作一个frame页面调用，可以使用<meta http-equiv="Windows-Target" content="_top">即让自己的网页在最顶端显示。
5.Pragma头禁止浏览器在本地计算机上缓存
如下：<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
6.Page-Enter和Page-Exit
用于告诉浏览器刚进入或着刚退出某个页面时所采用的显示效果。
<meta http-equiv="Page-Enter" content="revealTrans(Transition=23,Duration=1.000)">括号中的分别为显示类型和持续时间。
头元素
头元素通常是指位于<head></head>标签对之间的元素，包括：
<title></title>网页的显示标题
<base>
<link>
<meta>
<base>标签用于指定网页中超链接的基准地址，以改变网页中所有使用相对URL的基准地址。它通常的使用形式如下：
<base href="http://www.it315.com/techworld/" target="_blank">它有两个属性，href,target.href设定网页中所有使用HTTP协义的超链接的相对URL的基准地址。超链接的target属性用于设置网页中所有超链接设置的目标窗口。在<base>中设置以后，要以省得在所有<a>标签中设置。
<link>标签定义了当前网页和另一网页或资源的关系。有以下几个属性：
href:另一个文档或资源的URL。
rel与rev:定义了两个文档之间的关系。
title两个链接资源的关系。描述链接资源的字符串。
type给出了目标资源的MIME类型。如:type="text/css" type="text/javascript"
media属性：用于指定目标资源被接受的介质或媒体。一个网页可以在多种媒体上输出，只有当link标签被指定的媒体所接受，才会显示作用。可以取以下几个值。
screen被提交到屏幕上
print打印机
projection投影仪
tv电视机
rel,rev属性的设置情况，描述链接类型，基本特征。
可以取的设置值如下：
contents 链接文档作为表格内容出现
index 文档中提供当前文档的索引
glossary 这个链接所指向的文档提供当前文档的词汇表
coryright版权语句
next 指向一个文档序列中的下一个文档
previous 上一个文档
start 组合文档中的第一个文档
help 帮助文档
bookmark指向当前文档的书签
stylesheet样式表
例如:<link rel="stylesheet" href="url" type="text/css">
alternate说明当前指向的是当前文档的一份不同版本的文档
shortcut icon 表示指向的是一个默认图像，将出现在浏览器地址栏中，替换到系统的默认图标
<link rel="shortcut icon" href="ab.ico">
分区标签
<div></div>标签对，用于将若干相邻的组成一个区域块。用于对区域块设置。就可以对所有包含的设置。可以包含任何元素。
<span></span>专用于CSS。用于在同一行文本内选取一段文本。用于进行特殊设置。
<div><span>标签的区别举例：
<div>
<span></span>
<span></span>
<span></span>
</div>
CSS除了可以轻松设置网页元素的格式外，还可以产生滤镜，图像淡入淡出，网页淡入淡出。CSS的目标就是对网页实现与Woid一样的排版控制。
不一定要记到繁多的样式。实际上只要通过辅助工具就可以了。
样式规则选择器：
HTML元素选择器
Class选择器
Id选择器
关联选择器
组合选择器
伪元素选择器
样式规则的注释。样式属性：
CSS的样式属性分类，大概可以分为以下几类：
字体，背景，文本，位置，布局，边缘，列表。其它。
与字体相关的属性：主要包括字体大小，颜色，样式。
font-family:字体的名称。值可以设置多个字体名称，当用户浏览器无法识别第一种字体时，就会使用第二种字体或更后面的。
font-size:绝对大小的设置：small,x-small,xx-small,medium,large,x-large,xx-large.xx-small为最小值，xx-large为最大值。相对大小设为larger,smaller.
font-style:用来定义字体的样式是斜体还是正常字体。分别是italic,normal.
text-decoration: 用于在文本中添加下划线，中划线，上划线等效果。可以设置多个值，多个值要用空格隔开。underline,overline,line-throw.none.
font-weight:用于指示粗体字的大小。bolder,lighter.
font-variant:small-caps大写字母。
text-transform:字母的大小写转换。首字母大写，或全部大写。全部小写。
color:
CSS中的背景属性：背景颜色，图像。
background-color:
background-image:url(" ");
background-repeat:表示背景图像重复或者重复的方式。取值可以如下：no-repeat,repeat,repeat-x,repeat-y.
background-attachment:用于确定背景图像是不是随鼠标的滚动而滚动。fixed,scroll.
background-position:图像的水平位置和垂直位置。left,right,center,bottom,top,center,20px.
文本属性：距离，对齐，上标，下标。
word-spacing:单词间的间距。
letter-spacing:用来设置每个字符的间距。
vertical-align:sub下标，super上标，top,middle,bottom.相对于行高元素的百分比。
text-align:水平对齐，left,right,center,justify
text-indent:
white-space:如何处理文本中的空白字符。它的取值可以如下：normal,pre,nowrap.
line-height:行高。可以是精确的数字，也可以是百分比。
CSS滤镜(Filter)
Filter是CSS提供的一种用于产生多媒体效果的属性，使用这种技术可以把效果添加到网页中，对于视觉是很有用的。
首先根据下列的HTML代码体会Filter的作用：
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135)">
<div style="width:120;height:40;background-color:red;filter:Alpha(Opcity=80) Blur(Add=5,Direction=135) FlipV">
下面来看看其各个参数的作用：
Alpha说明一个元素与背景混合的程度，透明度。
Alpha(Opacity=?透明度级别0-100,Finishopacity=?渐变的透明效果，用来指示结束时的透明度,style=?透明的样式可以为0.1.2.3,startx=?渐变透明效果的X坐标,starty=?渐变透明效果的Y坐标,finishx=?;finishy=?);
BlendTrans(Duration=?)这个参数用于设置淡入和淡出的效果。Duration设置淡入淡出的时间值。
Blur（Add=?是否是在单个方向上糊糊，Direction=？模糊的方向，45的整数倍，Strength=?有多少个像素的宽度受到模糊的影响）用于设置模糊的效果。
Chroma（Color=？）将某种颜色设为透明，即是过滤掉某种颜色。
DropShadow（Color=?,offx=?水平偏移量,offy=?,Position=?布尔值，为真时建立外部阴影。)用于建立阴影效果。
FlipH：将元素水平方向上翻转。
FlipV:将元素垂直方向上翻转。
Gray：去年图像色彩
Xray:用于设置图像的轮廓、
Invert：翻转图像颜色，。
Light：用于设置光圆效果。
Glow（color=?,strength=?）用于设置元素边缘产生发光的效果。
Mask(color=?)用于在元素表面上覆盖一个透明的遮照。就像带着有色眼镜去看物体的效果一样。
RevealTrans（Duration=?切换的时间，Transition=?切换的方式，可以从0到23之间的一个数字。）用于建立初始状态的转换效果。
Shadow（Color=？，Direction=?。）用于建立另一种阴影效果。
Wave（Add=?设置原对象是不是按照波纹的效果扭曲。非零表示扭曲。，Freq=?波纹的频率。,LightStrength=?波纹效果的光照强度，0到100，Strength=?波浪的摇摆幅度。。,Phase=?）用于在元素上显示一种波纹的效果。
最后，我为大家提供一些学习上的建议：
HTML标签，CSS属性。使用工具软件来实现。但是知道有哪些标签可用，以及各个标签的作用。还是必要的。否则你对工具软件的应用只能不知所以然。用的多了。就会记住。常时间不用，自然会忘记。
苦干不如巧干，最聪明的是最会用工具的人。
要查找一些帮助资料来补回一些忘记的知道，而不是死记硬背。
查看优秀网页的源代码。
在当前网页中获取CSS文件和JavaScript文件的方法：
如果是外部文件，那么就把它的地址复制到地址栏上，浏览器会自动下载这个文件。
如果表格中的有一个单元格特别长，全部由字母组成，浏览器会增加表格的宽度，无论怎么设置，浏览器都不会根据表格宽度自动的换行。通过设置<td>标签的word-break,word-wrap.自动显示。
CSS的位置属性：
就是指定元素的位置，它可以用来控制任何元素在浏览器窗口中的位置。对网页元素进行定位控制。包括下面属性：
Position：定位方式。用于设置CSS的定位方式。可以取如下值：
absolute:绝对定位，精确的将元素定位在页面上的某个位置，而不考虑其他元素的位置。
relative:相对定位，相对于元素通常位置的一个偏移量。
static:：通用的定位方式。
left:用来设置元素左边的属性。
top:用来设置元素顶部的属性。
width:用于设置元素的宽度。
height:元素显示的高度。
Z-index：元素的层叠顺序。
边缘属性：
margin属性：用于设置元素的边界。
margin-right.
margin-top,
margin-left.
margin-bottom.
padding属性：用来设置元素边界与内容之间的空隙大小。
padding-top
padding-right
padding-left
padding-bottom
border-width属性：用来设置元素的边框的宽度。
border-top-width
border-bottom-width
border-right-width
border-left-width
border-color属性：用来设置元素边框的颜色。
border-right-color
border-left-color
border-top-color
border-bottom-right
border-style属性：用来设置边框的样式。
border-top-style
border-right-style
border-left-sstyle
border-bottom-style
它的设置值可以取如下样式：dotted点线,none,dashed,solid,double,groove,ridge,inset,outset.
列表属性：
list-style-type:用于指示列表目标项标记的类型。设置值有很多。disc实心圆。
list-style-image:目录列表项的图像。
list-style-position：用来指示列表项是显示在文本内，还是显示在文本外。inside,outside.
其它的属性：
Cursor:用于指示当鼠标移动到上面的时候，光标的形状。
取值有很多，hand手形。
filter:滤镜特效。
样式表中的注释：
/* */

什么是DHTML？
Javascript将浏览器本身，网页文档，以及网页文档中的HTML元素都用内置对象来表示，这些对象以及对象之间的层次关系统称为文档对象模型DOM。文档对象模型。
动态HTML。
window对象：
window对象代表浏览器的的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面。如改变状态栏上的显示文字，移动窗口，弹出对话框等。
对window对象属性和方法的引用，可以省略window.这个前缀。
window对象方法：
alert
confirm确认对话框
prompt方法
navigator
setInterval:每隔多长时间定时调用。
setTimeout:设置多长时间后去执行程序代码。
clearInterval：取消前面调用的setInterval所设置的方法。
clearTimeout
moveTo:
resizeTo:
open:
window对象中的event对象属性：
altKey:用于检测是否alt键按下。如果为真，表示按下。
ctrlKey::
shiftKey:
clientX,clientY:用于返回鼠标相对窗口的有效工作空间。，X,Y坐标。是指不包括菜单和滚动条的区域。
screenX,screenY:返回相对于屏幕的X,Y坐标。
offsetX,offsetY:返回鼠标相对事件源的顶点的X<Y坐标。
x:
y:
returnValue:事件的返回值
cancelBubble:取消事件的向下传递。
srcElement:事件源对象
keyCode:键盘按键的Unicode码值
<script language="javascript">
function onkeypressevent(){
alert(window.event.keyCode);
}
</script>
<body οnkeypress="onkeypressevent();">
button属性：
1为左键，2为右键。指示哪个鼠标键按下。
如下一段代码所示：
<script language="javascript">
function checkCancel(){
if(window.event.shiftKey)
window.event.cancelBubble=true;
}
function showSrc(){
if(window.event.srcElement.tagName=="img")
alert(window.event.srcElement.src);
}
</script>
window对象事件：
onload事件：
onunload事件：
onbeforeunload事件：
onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
onkeydowm
onkeyup
onkeypress
window对象属性、：
closed属性：返回窗口是不是关闭
opener:返回打开当前窗口的那个window对象
defaultstatus:用于返回窗口状态栏中缺省显示的内容
status:返回窗口状态栏当前正在显示的内容
screenTop:
screenLeft:
window对象中的对象类型的属性：
表示这个属性是对象类型的属性。
location对象：用于返回和设置当前网页文档的URL信息。
event对象：获取和设置当前所发生的有关信息
frames数组对象：表示某个窗口中所有的子窗口的集合。
screen对象：提供了显示器的分辨率和色彩信息。
clipboardData:提供了读取剪切板内容的若干方法
history:重新装载曾经访问过的URL的若干方法
navigator:用于获取浏览器的名称，版本号等信息，。
document:整个网页文档对象。
举例如下：
window.location.href="www.it315.com"。即让浏览器载入一个新的页面。
等效于：window.navigate("www.it3145.com");
location对象的replace方法也可用于载入一个新的页面。
location对象的reload方法用于刷新当前页面。
如何实现论坛列表的自动刷新功能：
document对象：
Cookie是什么？
在浏览器与服务器产生有状态信息会话的方式。
document对象的Cookie属性
是一系列字符串，设置的值与返回的值是不一样的。其设置格式如下：
name=value; expires=Fri,31,Dec 1999 23:59:59 GMT; path=/bookshop; domain=it315.org; secure;
读取格式：
expires用来设置该Cookie在浏览器中的有效时间。如果没有设置。这条Cookie信息将随浏览器关闭而消失。
domain:cookie信息在哪个域中保持有效。
path:设置在服务器哪个目录下有效。
secure:安全。
在Javascript中，通常都是采用escape函数对参数值进行编码，采用unescape函数对参数值进行解码。
cookie的存储位置：
一个Cookies文件夹
应用：
考虑下面一段代码：
<script language=javascript>
var never=new Date();
never.setTime(never.getTime()+10*365*24*60*60*1000);
var expstring="expires="+never.toGMTString()+";";
document.cookie="area="+escape("北京海淀")+";"+expstring;
document.cookie="zipcode=10000;";
</script>
下面是对其解码：
<html>
<head></head>
<body>
<script language="javascript">
var never=new Date();
never.setTime(never.getTime()+10*365*24*60*60*1000);
var expstring="expires="+never.toGMTString()+";";
document.cookie="area="+escape("北京海淀")+";"+expstring;
document.write(document.cookie);
</script>
<br><br><br>
<script language="javascript">
function getCookie(name){
var result=null;
var myCookie=" "+document.cookie+";";
var searchName=" "+name+"=";
var startOfCookie=myCookie.indexOf(searchName);
var endOfCookie;
if(startOfCookie!=-1)
{
startOfCookie+=searchName.length;
endOfCookie=myCookie.indexOf(";",startOfCookie);
result=unescape(myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
document.write(document.cookie+"<br>");
document.write("area is"+getCookie("area"));
document.write("area is"+getCookie("gData1059693014"));
</script>
</body>
</html>
document对象标签的属性
<script>
defer属性：不需要设置值的属性。提高浏览器的性能，意思是说在浏览器加载网页时先暂时不要加载脚本代码的内容，。等到对文档分析和加载完毕时，再加载脚本代码的内容，如果其中有document.write属性，将会覆盖掉原文档内容，。
language属性：脚本语言的类型。已经过时了。嘻嘻
type属性：用来代替language.type="text/javascript"
<meta http-equiv="Content-Script-Type" content="text/javascript">用来说明文档中的默认脚本代码。
src属性：引用外部文件
使用<script>标签的src属性实现为其它网页提供各种扩展功能。如对网页访问的计数。
如何在您的网页中显示访问者的IP地址和地区呢？
把下面一段代码加入到您的网页中就可以了。
<script src="http://www.it315.org/ip/inquire.asp">
</script>
document对象的对象属性：
forms[]数组：
anchors[]数组：
links[]数组：
images[]数组：
scripts[]数组
applets[]数组
all[]数组:用来表示文档中所有的标签对象的集合。
stylesheets[]数组对象
body对象：
title对象
考虑下面一段代码：
<img name=img1 src="samble.src">
对它的引用可以为：
document.all[7].src;
document.all.img1.src
document.all["img1"].src
document.all.item("img1").src
document.images[0].src
document.images.img1.src
document.images["img1"].src
document.images.item(0).src
document.images.item("img1").src
document对象的方法;
write
writeln
open:用于打开一个新的文档，于window相似。建议用window
close:关闭文档流。
clear:清除文档中所有内容。
getElementById
getElementByName
getElementByTagName
createElement
createStyleSheet
对网页文档内容进行加密的一般方式：
我们可以查看到源文件的内容
document对象中的属性：
与body标签相关的属性：
alinkColor
linkColor
vlinkColor
bgColor
fgColor:指定文本的默认前景颜色
描述网页文档信息的属性：
charset属性：用于设置和返回浏览器显示网页内容时所使用的当前字符编码集。
defaultCharset:缺省字符编码集。
cookie属性：是一个初学者比较难懂的问题。
fileCreatedData属性：用于返回网页文档的创建时间。
fileModifiedData属性
fileSize属性：返回当前网页文档的大小。
lastModified属性：
URL属性
URLUnecoded属性：返回经过URL解码的字符串
referrer:用于返回导航到当前网页的超链接源的文件。
body对象的对象属性：
all数组与style对象
all数组：
使用style对象编写一个隐藏和显示网页元素的代码：
<html>
<head></head>
<body>
<span id="b1" style="border:thin ridge;cursor:hand" οnclick="dealclick()">-</span>list1<br>
<ul id="list1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
list2
<script type="text/javascript">
function dealclick(){
var a=document.getElementById("b1");
if(a.innerText=="+"){
list1.style.display='block';
a.innerText="-";

}
else
{
list1.style.display="none";
a.innerText="+";
}
}
</script>
</body>
</html>
实现图像的漂移效果：
<html>
<head></head>
<body>
<textarea cols="500" rows="500" name="textarea1" id="textarea1">
将这个文本区域设置的很大，以便出现滚动条。
</textarea>
<div id="float_icon" style="visibility:hidden;position:absolute;top:0px;left:0px"><a href="#"><img src="31.jpg"></a></div>
<script type="text/javascript">
var dirx=1;
var diry=1;
var xpos=0;
var ypos=0;
var float_icon=document.getElementById("float_icon");
float_icon.style.top=0;
document.body.all.float_icon.style.left=0;
document.body.all("float_icon").style.visibility="visible";
window.setInterval("move()",100);
function move(){
xpos+=2*dirx;
ypos+=2*diry;
float_icon.style.top=ypos;
float_icon.style.left=xpos;
if(xpos<=0||xpos+float_icon.offsetWidth>=document.body.clientWidth)
dirx=-dirx;
if(ypos<=0||ypos+float_icon.offsetHeight>=document.body.clientHeight)
diry=-diry;
}
</script>
</body>
</html>
body对象的方法：
appendChild
考虑到下面一段代码：
<script type="text/javascript">
function createA(){
var oa=document.createElement("a");
oa.href="#";
oa.innerText="交流网";
document.body.appendChild(oa);
}
</script>
<body οnlοad="createA()">
body对象的属性、：：
专用属性：
background:网页背景图像的URL地址。
bgProperties:用来设置背景图像是否随鼠标的滚动而滚动。
text：用来设置文本的显示颜色。
topMargin
leftMargin
rightMargin
bottomMargin
通用属性：
id
name
className;返回class值
innerText:设置或返回元素标签对之间的内容
innerHTML;：
outerText:用于设置或返回标签本身以及其中的内容
outerHTML
offsetTop
offsetLeft:用于设置或返回元素边界左上角相对于它上层元素的左上角的垂直和水平位置。
offsetWidth:
offsetHeight:返回元素对象自身的宽度和高度
clientTop
clientLeft:客户区的左上角顶点与自身边界的垂直和水平位置。
clientWidth
clientHeight:返回元素上的可见客户区的高度和宽度。指显示出来的那部分，当有滚动条的时候。
scroll:yes,no.是否出现滚动条
scrollTop:
scrollLeft:左边界与当前被显示内容左边界的距离。
scrollWidth:
scrollHeight:整个内容的宽度和高度。包括没有显示出来的。
body对象的事件：
onselectstart:用于在用户选取网页内容的时候发生的。如果它返回false从而就可以阻止用户选取网页中的内容，从而阻止用户复制网页中的内容。
onscroll:可以实现用户无论怎么样拖动，不随着其发动。总是漂浮在网页中。
考虑如下的代码：
<script type="text/javascript">
function dealscroll(){
it315.style.top=document.body.scrollTop+50;
it315.style.left=document.body.scrollLeft;
}
</script>
<body οnscrοll="dealscroll()" onselectstart="return false">
<a id=it315 style="position:absolute;left:0;top:50">
form对象
onsubmit事件，最重要的事件。也是专有的事件。典型用法就是用来检测表单的合法性。一定要使用return 语句来返回处理的结果.false取消。true继续。
考虑下面一段代码：
<form name="myform" id="myform" method="post" οnsubmit="return dosubmit(this)">
会员号码（6位数字）：<input type=text name="mytext" id="mytext">
<input type=submit name="mysubmit" id="mysubmit" value="递交">
</form>
<script type="text/javascript">
function dosubmit(frm){
if(frm.mytext.value.length!=6)
{alert("必须是六位");return false;}
}
else{
var my_text=frm.mytext.value;
for(var i=0;i<my_text.length;i++){
if(my_text.charAt(i)<'0'||my_text.charAt(i)>9)
{alert("请输入数字";return false;}

}
return true;
}
</script>
form对象的对象属性：
all数组属性form标签下所有的子元素的集合。
elements[]数组属性：代表除了<input type=image> 之外的所有标签的集合。
children[]数组属性：包含其下的直接子元素的集合。
form对象的方法：
submit方法，模拟用户点击<input type="submit">。
item方法返回某个字段元素所对应的对象。，接受的参数可以是表单元素的名称。
form对象的属性：
name,target,title,enctype,encoding,method,action.
form表单中的字段元素对象
方法：
blur失去焦点
focus方法某个表单字段元素获得焦点
click方法
setCapture:捕获当前网页鼠标的事件。
releaseCapture:取消
select元素的add方法，用于在列表框中增加一个选择项。
表单字段元素的属性：
defaultValue:返回表单元素的默认值。
disabled用于设置和返回表单元素的该属性的状态，
form返回字段元素的表单对象
readOnly 用于设置和返回表单元素的readOnly状态
title用于返回表单元素的title属性。
value属性：用于返回表单元素的Value值
checked属性：单选按钮和复选按钮的选中状态，
列表框的专有属性、：
multiple
selectedIndex
options数组
表单元素对象事件：
onchange
onfocus
onselect
form表单元素对象实例
<html>
<head></head>
<body>
<form method="post">
用户名:<input type="text" name="user" id="user"><br>
密码： <input type="passward" name="pass" id="pass" οnfοcus="checkName(this.form)">
<br>
<input type="submit" name="submit1" id="submit1" value="递交">
</form>
<script language="javascript">
function checkName(frm){
if(frm.user.value=="")
{alert("你必须先输入用户名");frm.user.focus();}
}
</script>
</body>
</html>
实例二：
死锁现象，就是在两个文本框中一直来回的切换焦点。
实例三：用回车键在文本框中切换焦点
<form method="post">
用户名:<input type="text" name="user" id="user" οnkeydοwn="toNext(this.form)"><br>
密码： <input type="passward" name="pass" id="pass" >
<br>
<input type="submit" name="submit1" id="submit1" value="递交">
</form>
<script type="text/javascript">
function toNext(frm){
if(window.event.keyCode==13)
{
frm.pass.focus();
window.event.returnValue=false;
}
}
</script>

先说说学习方法吧：建议的学习方法：
学习JavaScript比较快速有效的方法是先熟悉一些基本的概念，然后经常查看网站中所使用的JavaScript源代码，积累一些有用的函数。长期不用且容易忘记的东西，
取好在计算机上留有留份。
只要熟悉了HTML，CSS。了解了DOM对象事件模型，了解了DOM对象之间的各种关系，又掌握了一些编程技巧和JavaScript语法，就可以编写出实现各种功能的代码。
现在的软件越做越大，涉及到的技术也越来越复杂，凭个人之力已经很难完整的完成一个软件，而且软件技术的更新很快，已经没有时间让你去学好每一门技术，所在
在当前这个时代，更要学会借力。把别人已经实现的东西或经验，拿来为我所用。
现在有一种说法，程序员离开了网站，就无法编程，要学会拿来主义，将别人的东西拿为自己所用。在编写一个JavaScript程序之前，先百度一些别人写好的程序，
然后仔细分析一遍，看能不能达到预期的效果。
下面是第六章的张孝祥的内容：
第六讲，脚本编程的相关技术
兼容Ie和NS的JavaScript代码：
两种浏览器之间的一些差别：
检查浏览器的类别：
通常有两种方式来检测浏览器的类别：
第一种方法：在IE中，页面上的每个可编程元素都是document.all集合中的一项，而在NS中，页面中的每个层，都是document.layers集合的一项，所以通过检查这些专有对象的存在与否，就可以判断出浏览器的类别。使用这种方法判断的程序代码如下：
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
function check(){
if(ns){

}
if(ie){

}
}
第二种方法是通过检测navigator对象的appName属性值来判断类别。
如下代码：
var ns=(navigator.appName=="Netscape")?true:false;
层对象的引用：
在Ie中，<div></div>与<span></span>都可定义层，<div>用于定义较大的块，<span>用于定义较小的文本行，NS同样支持这两个标记，但也引入了另外两个定义层的标记，<layer><ilayer>
<div id="layer1" style="position:absolute;left:200;top:200"></div>
在IE中和NS中引用这个层分别不同的方式是：
document.all.layer1或document.all["layer1"];
document.layers.layer1或document.layers["layer1"];
在IE中:layer1.style.left
在NS：document.layer1.left
层的显示和隐藏：
层对象的visibility属性有三个：
inherit元素的可见性与父元素的可见性相同。
visible,show,在IE中为visible,在NS中为show
hidden,hide在IE中为hidden,在NS中为hide.
如下一段代码是对其以上所学的简单应用：
<html>
<head></head>
<body οnlοad="setInterval('change()',1000)">
<div id="layer1" name="layer1" style="border-style:Double;border-color:'red';position:absolute;left:'200';top:'100';border-size:'1px'" width='100px' height='100px'>一个块</div>
<script type="text/javascript">
<!--
var bVisible=true;
var block;
var ns=(document.layers)?true:false;
var ie=(document.all)?true:false;
if(ns)
block=document.layer1;
if(ie)
block=layer1.style;
function showObject(obj){
if(ns)
obj.visibility="show";
if(ie)
obj.visibility="visible";

}
function hideObject(obj){
if(ns)
obj.visibility="hide";
if(ie)
obj.visibility="hidden";
}
function change(){
if(bVisible)
showObject(block);
else
hideObject(block);
bVisible=!bVisible;
}
//-->
</script>
</body>
</html>
层的定位
CSS-P的top,left,width,height等属性定义了层的位置和大小，在IE和NS中定义这些位置的方式完全一样，但读取这些属性的方式完全不一样，在IE中，这些属性的返回值并不是一个整数，而是在整数的后面加上px,为些，IE专门定义了pixelTop,pixelLeft,pixelWidth,pixelHeight,来分别对应CSS-P中的top,left,width,height来读取整数值，要读取一个整数值，使用如下的形式。parseInt(block.left)
浏览器客户端的宽度，在IE中是document.body.clientWidth,在NS中是window.innerWidth,
浏览器的滚动条向下滚动了多少像素，在IE中是document.body.scrollTop, 在NS中是window.pageYOffset.

javascript之传智播客相关推荐

《传智播客.Net培训.net视频教程》(.net视频asp.net培训传智播客asp.net视频教程开放课程c#视频移动开发winform SQL ADO.Net HTML JavaScript
本资源重要通知 2011年4月传智播客.Net培训-免费公开课现场视频 [重磅内容]微软移动开发介绍1-早起的鸟儿有食吃.rar 详情 53.2MB [重磅内容]微软移动开发介绍2-windows.p ...
ssh中c3p0连接mysql_JSP+SSH+Mysql+C3P0实现的传智播客网上商城
项目简介本系统是传智播客授课时的开发案例,基于JSP+SSH+Mysql的简单网上商城.在当代开发中,SSH的使用已经逐渐被SSM取代,但不代表我们不需要学习SSH,该系统简单,但功能齐全可以作为S ...
python四大软件-传智播客解析Python之移动端页面适配四大方式
前端在制作移动端页面时,会碰到适配各种手机屏幕的问题,而且还包括平板电脑,这么多种分辨率的屏幕,如何做到适配呢?传智播客为此总结了四种方式,具体如下: 传智播客解析Python之移动端页面适配四大方式 ...
Ubuntu16.04 ROS 深度学习_传智播客智能机器人软件开发学习路线图出炉！首发优惠！！...
黑马程序员微信号:heiniu526 传智播客旗下互联网资讯,学习资源免费分享平台智能机器人软件工程师学习计划很多朋友对机器人软件开发和人工智能感兴趣,不知道怎么学习,传智播客武汉校区在今年3月 ...
成都传智播客Java培训
成都传智播客Java培训,严格按照北京传智播客的教育模式,为西南IT行业培养了许多优秀的软件开发工程师. 我们有专为0基础.或者基础不够硬的学员开设的Java基础与加强班,让你轻轻松松跨进Java的世 ...
传智播客西安中心之Android课程大纲
2015年JavaEE+Android就业班课程详解全价22980元,优惠价18980元!(享受优惠价的条件是什么?) 前言:你已经错过做移动互联时代的领头羊,难道15年你还要继续埋没在茫茫人海中吗 ...
最炫丽的网页平面UI课程就在广州传智播客
最炫丽的网页平面UI课程就在广州传智播客哪里的网页平面UI课程最酷最炫,当然是广州传智播客了.传智播客广州网页平面UI培训课程分为六个阶段. 第一阶段:食品包装设计.企业形象识别系统设计.伊利牛奶广 ...
传智播客微金所项目实战
微金所项目实战(出处:传智播客) 1. 搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
传智播客技术社区_播客与网络技术的未来
传智播客技术社区 Episode zero? We recorded a test episode of The Versioning Show, and had so much fun doing ...

javascript之传智播客

javascript之传智播客相关推荐

最新文章

热门文章