JS10Word格式文档下载.docx
《JS10Word格式文档下载.docx》由会员分享，可在线阅读，更多相关《JS10Word格式文档下载.docx（28页珍藏版）》请在冰豆网上搜索。
;
student.age=13;
student.sex="
M"
functioncheckProperty（）{
alert（"
Thisisastudent"
）;
}
student.property=checkProperty（）;
student.property（）;
/script>
document.write（Math.sin（Math.PI））;
三、课后小结
今天上课的内容简单，但要求大家多多练习，以熟能生巧，特别是在网页中超链接的应用等。
四、课后练习
functioncalcBallVol（radius）{
return（4/3）*（Math.PI*Math.pow（radius,3））;
alert（calcBallVol（5））;
第7周第1次课
JavaScript对象编程
（二）
一、对象的属性和方法
●JavaScript对象是属性和方法的集合。
●属性是一个或者一组值，是对象的成员之一，方法是对象的一个函数，也是对象的成员。
二、对象属性
●对象的属性使用跟在对象后面的标识符表示，对象和标识符之间用“.”分隔，下面是对象属性的标准表示规则：
●object.property
●object是对象名，property是属性名。
●在定义了一个对象后，可以动态地给对象添加属性。
三、对象方法
●对象的方法也通过跟在对象后面的标识符表示，对象和标识符之间用“.”分隔，不同的是，对象的方法名后面有一对括号。
下面是对象属性的标准表示规则：
●object.method（）;
●object是对象名，method是方法名。
四、实例
五、课后练习
varnewDate=newDate（）;
document.write（"
今年是"
+newDate.getYear（）+"
年"
+"
br>
"
newDate.setYear（2007）;
明年是"
明年的今天是：
+newDate）;
第7周第2次课
JavaScript对象编程（三）
1、熟悉Math等对象的应用方法。
熟悉Date等对象的应用方法。
熟悉Number，String等对象的应用方法。
一、Math对象
●Math对象具有一系列的常量和方法，能够实现比较复杂的算术运算逻辑。
●Math对象是由解释器自动生成的，因此在使用的时候不需要首先生成实例，而是可以直接访问。
二、Date对象
●Date对象提供了十分灵活的操作时间和日期的方法。
●Date对象拥有一系列属性和方法，可以用来表示任意的日期和时间，获取系统当前时间或者获取两个时间的间隔。
●Date对象是从1970年1月1日00:
00:
00.000GMT开始计时的，并且以毫秒为单位。
GMT是格林威治标准时间。
三、Number对象
●Number对象是提供基本数据类型中数值型的JavaScript内置对象，Number对象还提供数值型常数。
●需要注意是，在介绍数据类型的时候，提到过浮点类型的对象是要求介于±
5×
10-324和±
1.7976×
10308之间的。
四、Sring对象
●String对象是提供基本数据类型中字符串型的JavaScript内置对象。
String对象提供的方法十分丰富。
●String对象的惟一属性是长度属性，这个属性指出了String对象代表的字符串的长度。
五、Array对象
●当创建一个数组时，实际上创建了一个Array对象。
●Array对象一个非常重要的属性是其长度属性。
Array对象的长度属性返回数组中现有的元素个数。
由于Array对象索引值从0开始的缘故，长度属性返回的值也是Array对象下一次动态增加元素的索引值。
六、练习
varthisDate=newDate（）;
document.write（thisDate.toString（））;
document.write（thisDate.toUTCString（））;
document.write（thisDate.toGMSString（））;
《/script>
设置超链接的样式
1、丰富的超链接特效。
2、按钮式超链接。
按钮式超链接。
一、丰富的超链接特效
1、动态超链接
伪类别选择嚣：
伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。
它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。
我们最常用的是4种a元素的伪类，它表示动态链接在4种不同的状态：
link、visited、active、hover。
CSS2还定义了首字和首行（first-letter和first-line）的伪类，可以对元素的首字或首行设定不同的样式。
格式：
选择器：
伪类{属性：
值;
}
如：
a:
link{color:
#FF0000;
}?
锚伪类别：
link
visited
hover
active
必须按以下顺序设置，否则在IE中无效
a:
?
/*未访问的链接*/
visited{color:
#00FF00;
}/*已访问的链接*/
hover{color:
#FF00FF;
/*鼠标移动到链接上*/
active{color:
#0000FF;
/*选定的链接*/
1.2.12、按钮式超链接
.a2:
link,.a2:
visited{color:
#fff;
background:
#ee251e;
text-decoration:
none;
border-top:
1pxsolid#B7B7B7;
border-left:
border-right:
1pxsolid#408080;
border-bottom:
hover{color:
#FFFFFF;
#5555FF;
1pxsolid#b7b7b7;
二、学生练习
设置超链接的样式
（二）
三、源码
h1>
一、丰富的超链接特效<
/h1>
1、动态超链接<
p>
/p>
伪类<
spanlang="
EN-US"
xml:
lang="
>
{<
/span>
属性：
值<
}<
&
nbsp;
<
link<
{color:
link&
visited&
hover&
active&
必须按以下顺序设置，否则在IE中无效<
div>
palign="
left"
/*<
未访问的链接<
*/<
visited<
}/*<
已访问的链接<
hover<
鼠标移动到链接上<
active<
选定的链接<
/div>
tablewidth="
780"
border="
0"
cellspacing="
cellpadding="
tr>
tdcolspan="
8"
imgsrc="
pic/tongdefuben.jpg"
width="
950"
height="
140"
/>
/td>
/tr>
td>
divalign="
center"
ahref="
#"
首页<
/a>
系部简介<
专业设置<
报考信息<
成绩查询<
毕业事宜<
规章制度<
联系我们<
953"
站内新闻<
/table>
四、课后小结
第7周第3次课
3、浮雕式超链接
.a3:
link,.a3:
font-family:
宋体"
font-size:
14px;
width:
100px;
height:
30px;
text-align:
center;
padding-left:
0px;
font-weight:
bold;
underline;
.table{background:
url（./pic/dhbg.gif）repeat-x;
16px;
vertical-align:
middle;
.td{
border-right-width:
1px;
border-top-style:
none;
border-right-style:
double;
border-bottom-style:
border-left-style:
border-right-color:
#ff0;
学生练习操作
第8周第1次课
设置页面滚动条的样式
1、学生熟练掌握设置页面滚动条的知识。
页面滚动条
一、页面滚动条
滚动条相关颜色属性：
face-color：
滑块颜色
hightlight-color：
高亮颜色
3dlight-color：
三维光线颜色
darkshadow-color：
暗影颜色
shadow-color：
阴影颜色
arrow-color：
箭头颜色
tack-color：
滑道颜色
二、源码：
body{scrollbar-3dlight-color:
scrollbar-highlight-color:
#000;
scrollbar-face-color:
#ff0;
scrollbar-shadow-color:
scrollbar-darkshadow-color:
#ccc;
scrollbar-arrow-color:
purple;
scrollbar-base-color:
.largetext{scrollbar-3dlight-color:
#80c4de;
#f00;
#00f;
三、效果图
五、课后小结
第8周第2次课
无需表格的菜单
（一）
1、掌握项目列表的用法。
2、制作无需表格的菜单。
制作无需表格的菜单。
一、项目列表
1、列表的符号（ol：
有序ul:
无序，加上list-style-type后没有实际区别）
值
描述
none
无标记。
disc
默认。
标记是实心圆。
circle
标记是空心圆。
square
标记是实心方块。
decimal
标记是数字。
decimal-leading-zero
0开头的数字标记。
（01,02,03,等。
）
lower-roman
小写罗马数字（i,ii,iii,iv,v,等。
upper-roman
大写罗马数字（I,II,III,IV,V,等。
lower-alpha
小写英文字母Themarkerislower-alpha（a,b,c,d,e,等。
upper-alpha
大写英文字母Themarkerisupper-alpha（A,B,C,D,E,等。
lower-greek
小写希腊字母（alpha,beta,gamma,等。
lower-latin
小写拉丁字母（a,b,c,d,e,等。
upper-latin
大写拉丁字母（A,B,C,D,E,等。
hebrew
传统的希伯来编号方式
armenian
传统的亚美尼亚编号方式
georgian
传统的乔治亚编号方式（an,ban,gan,等。
cjk-ideographic
简单的表意数字
hiragana
标记是：
a,i,u,e,o,ka,ki,等。
（日文片假名）
katakana
A,I,U,E,O,KA,KI,等。
hiragana-iroha
i,ro,ha,ni,ho,he,to,等。
katakana-iroha
I,RO,HA,NI,HO,HE,TO,等。
水上运动
o自由泳
o仰泳
o蛙泳
o蝶泳
o个人混合泳
o自由泳接力
2、图片符号
ul{font:
12px;
color:
#0066FF;
list-style-type:
circle;
.ul{list-style-image:
url（pic/bt1.jpg）;
.li{background:
url（pic/bt1.jpg）no-repeat;
25px;
三、学生练习制作个人栏目列表项。
第8周第3次课
无需表格的菜单
（二）
三、无需表格的菜单源码：
#navigation{width:
200px;
#navigationul{list-style-type:
/*不显示项目符号*/
margin:
padding-lef
升级会员 