通过本章学习,应该掌握以下内容:
1,JavaScript的特点及运行环境
2,JavaScript编程基础
3,JavaScript事件驱动
4,JavaScript的对象第 13章 在网页中使用 JavaScript
13.1 脚本语言简介
JavaScript是 Netscape公司推出的跨平台,基于对象的脚本语言,用于客户端与服务器端的应用程序 。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 。 和 VBScript一样,它可以被嵌入到 HTML文件中,能直接被浏览器执行,从而产生各种各样的动态网页效果 。 JavaScript弥补了 HTML语言的缺陷,它与 HTML,CSS 结合被人们称为
DHTML。
( 1) 脚本编写语言
( 2) 基于对象
( 3) 简单性
( 4) 安全性
( 5) 动态性
( 6) 跨平台
13.1.1 JavaScript的特点
13.1.2 JavaScript的运行和编辑环境运行环境,Internet Explorer 4.0或 Netscape
Navigator 3.0以上 。
编辑环境:任何可以编辑 HTML文档的文本编辑器或专门的网页编辑器 ( FrontPage,Dreamweaver
等 ) 。
( 1) 使用 SCRIPT标记符插入脚本在网页中最常用的一种插入脚本的方式是使用
SCRIPT 标 记 符,方 法 是,把 脚 本 标 记 符
<SCRIPT></SCRIPT>置于网页上的 HEAD部分或 BODY部分,然后在其中加入脚本程序 。 尽管可以在网页上的多个位置使用 SCRIPT标记符,但最好还是将脚本代码放在 HEAD部分,以确保容易维护 。
13.1.3 在网页中使用 JavaScript
① 书写 JavaScript时应注意大小写,
② 在 JavaScript中,行尾用换行符作为一行完整代码的终止字符,
③ 若需要将几行代码放在一行中,应使用分号将它们分开,
④ 在 JavaScript中,/* 和 */也是注释标记 。
用户在编写 JavaScript时应注意以下几点:
( 2) 直接添加脚本
HTML可以直接在表单的输入元素标记符内添加脚本,以响应输入元素的事件 。
( 3) 链接脚本文件如果同一段脚本要在若干个 Web页中使用,则没有必要在多处维护相同的冗余代码,此时可以将脚本放在单独的一个文件里,然后再在任何需要该文件的
Web页中调用该文件 。
要引用外部脚本文件,应使用 SCRIPT标记符的 src
属性来指定外部脚本文件的 URL。
所谓变量,就是程序中一个已命名的存储单元 。
变量的主要作用是存取数据和提供存放信息的容器 。
JavaScript支持的数据类型如下,Number( 数字 ),Boolean( 布尔 ),String( 字符串 ),Null
( 空 ),Undefined( 未定义 ),Object( 对象 ) 。
13.2 JavaScript编程基础
13.2.1 JavaScript变量在 JavaScript中定义变量应遵循以下规则:
必须以字母或下划线 ( _) 开头 。
在所说明的范围内必须是唯一的 。
用 var来定义变量,也可以用赋值语句声明变量,但不能既不用 var声明变量,又不给它赋值 。
13.2.2 JavaScript运算符在 JavaScript中包括以下 8类运算符:
( 1) 算术运算符,+,-,*,/,%,++,--
( 2) 逻辑运算符,&&,||,!
( 3) 比较运算符,<,<=,>,>=,= =,! =
( 4) 字符串运算符,+( 字符串接合操作 )
( 5) 位操作运算符,&,|,^,-,~,<<,>>,>>>
( 6) 赋值运算符,=,+=,-=,*=,/ =,% =,&=、
( 7) 条件运算符:,?,
( 8) 其他运算符,,,[ ],( ),delete,new,void
13.2.3 JavaScript表达式表达式是运算符和操作数的组合 。 表达式通过求值确定表达式的值,这个值是对操作数实施运算符所确定的运算后产生的结果 。 有些运算符将数值赋予一个变量,而另一些运算符则可以用在其他表达式中 。
由于表达式是以运算符为基础的,因此表达式可以分为算术表达式,字符串表达式,赋值表达式以及逻辑表达式等等 。
13.2.4 JavaScript语句
( 1) 数据声明语句声明变量的语法如下:
var 变量名 [=初始值 ]
( 2) 赋值语句赋值语句是由赋值表达式组成的语句 。
( 3) 注释语句
//:表示单行注释,从,//”开始到本行结束都为注释 。
/*…… */:表示多行注释,从,/*”开始到,*/”结束为注释 。
1,一般语句在 JavaScript中提供了 if语句,if else语句以及
switch语句等三种条件语句 。
( 1) if语句
if( 条件 )
语句段;
( 2) if else语句
if( 条件 )
语句段 1;
else
语句段 2;
2,条件语句
( 3) switch语句如果需要对同一个表达式进行多次判断,那么就可以使用 switch语句,格式如下:
switch( 条件 )
{case value1,语句段 1;
case value2,语句段 2;
case value3,语句段 3;
…
default,语句段 4; }
( 1) for语句
for( 初始化;条件;增量 )
{
语句段;
}
( 2) while语句
while( 条件 )
{
语句段 ;
}
3,循环语句
( 3) do while语句
do
{
语句段 ;
}
while( 条件 )
( 4) break语句
break语句提供无条件跳出循环结构或 switch语句的功能 。
( 5) continue语句
continue语句的作用是终止当次循环,跳转到循环的开始处继续下一轮循环 。
4,其他语句除了以上条件语句和循环语句以外,JavaScript
中还包括以下语句:
函数调用语句 函数调用语句用于调用函数 。
return语句 用于返回函数调用的值 。
with语句 用于表示默认对象 。
for in语句 用于对一个对象的所有属性进行循环,直到每个属性都访问到 。
13.2.5 JavaScript函数数是已命名的代码块,代码块中的语句被作为一个整体引用和执行 。
定义函数的格式如下:
function 函数名 ( 参数 1,参数 2,..,)
{
语句段;
…
return 表达式;
}
通常鼠标或热键的动作称为事件 ( Event),
而由鼠标或热键引发的一连串程序的动作称为事件驱动 ( Event Driver) 。 比如,当单击鼠标按钮时就产生一个单击 ( onClick) 事件,当打开一个网页时就产生一个网页的载入 ( onLoad) 事件 。
13.3 JavaScript的事件驱动
13.3.1 什么是事件当用户单击鼠标按钮时,产生 onClick事件,同时
onClick指定的事件处理程序或代码被调用执行 。
OnClick事件通常在下列基本对象中产生:
( 1) button( 按钮 )
( 2) checkbox( 复选框 )
( 3) radio( 单选按钮 )
( 4) reset button( 重置按钮 )
( 5) submit button( 提交按钮 )
13.3.2 事件类型
1,单击事件 onClick
当用户改变表单元素的原有状态后,将产生该表单元素的 onChange事件 。
2,改变事件 onChange
当用户选中一段表单文本时,引发该事件 。
3,选中事件 onSelect
当用户单击鼠标或用 Tab键激活某一个表单元素时,产生该表单元素的聚焦事件,此时对象被选中 。
4,聚焦事件 onFocus
与 onFocus事件相反,当前激活表单元素从激活状态变为非激活状态,即不再拥有焦点,而退到后台时,引发该事件 。
5,失去焦点事件 onBlur
当 鼠 标 指 针 位 于 超 链 接 上 时,产生
onMouseOver事件 。
6,鼠标移动事件 onMouseOver
当文档载入时引发该事件 。 OnLoad事件的作用是在首次载入一个文档时检测 cookie的值,并用一个变量为其赋值,使其可以被源代码调用 。
7,载入文件 onLoad
当 Web页面退出时引发 onUnload事件 。
8,卸载文在件 onUnload
对象就是客观世界中存在的特定实体 。
13.4 JavaScript的对象
13.4.1 JavaScript的内部对象
JavaScript提供了一些内部对象,下面介绍三种常用的对象,即 String对象,Date对象和 Math对象 。
String对象用来存放字符串,是静态对象 。
( 1) String对象的属性
String对象只有一个属性,即 length,它表示字符串中的所有的字符个数,包括所有符号 。
( 2) String对象的方法
String对象的方法主要用于有关字符串在 Web中的显示,字体大小,颜色,大小写转换等 。 String对象有 19个方法 。
1,String对象创建日期对象可以使用以下 4种构造函数中的一种:
var variable=new Date( )
var variable=new Date( milliseconds)
var variable=new Date( string)
var variable=new Date( year,month,day,
hours,minutes,seconds,milliseconds)
( 1) 获取 Date对象的常用方法
( 2) 设置 Date对象的常用方法
2,Date对象
Math对象包含用来进行数学计算的属性和方法 。
( 1) Math对象的主要属性
Math中提供了 6个属性,即:常数 E,以 10为底的自然对数 ln10,以 2为底的自然对数 ln2,圆周率 PI( 3.1
4159),1/2的平方根 SQRT1-2,2的平方根 SQRT2。
3,Math对象文字修饰属性可以对特定选项的文本进行修饰,
它 的取值 为,none,underline,overline,line-
through,blink,默认值为 none,表示不加任何修饰 。 underline表示添加下划线; overline表示添加上划线; line-through表示添加删除线; blink表示添加闪烁效果 。
另外 IE浏览器并不支持文字修饰属性值 blink( 闪烁 ) 。
6,文字修饰属性 ( text-decoration)
行高属性决定了相邻行之间的间距 。 其取值可以是数字,长度或百分比,默认值是 normal。 当以数字指定值时,行高就是当前字体高度与该数字相乘的倍数 。 如果指定具体的长度值,则行高为该值 。 如果用百分比指定行高,则行高为当前字体高度与该百分比相乘 。 该属性不允许使用负值 。
7,行高属性 (line-height)
文本转换属性用于转换文本,取值为,capitalize、
uppercase,lowercase,none,默认值是 none表示使用原始值 。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示; uppercase值表示所有的文本都以大写显示; lowercase值表示所有文本都以小写显示 。
8,文本转换属性 (text-transform)
background属性是一个组合属性,可用于同时设置 background- color,background- image,
back2round-attachment,background-position,
background-repeat等背景属性 。
11.4.3 颜色与背景属性
1,background属性用于设置 HTML元素的背景颜色 。 此属性的默认值是 transparent,表示没有任何颜色,此时上级元素的背景可以在子元素中显示出来 。
2,background-color属性用于设置 HTML元素的背景图案,取值为 url或
none。 默认值为 none,即没有背景图案 。 该属性相当于 HTML中 BODY标签的 background属性,只是它可以定义更多元素的背景图像 。
3,background-image属性用于控制背景图像是否随内容一起滚动,取值为
scroll,fixed。 默认值为 scroll,表示背景图案随着内容一起滚动; fixed表示背景图案静止,而内容可以滚动 。
4,background-attachment属性用于指定背景图案相对于关联区域左上角的位置 。
该属性通常指定由空格隔开的两个值 。
5,background-position属性表示当使用背景图案时,背景图案是否重复显示 。 取值可以是,repeat表示在水平方向和垂直方向都重复,即像铺地板一样将背景图案平铺;
repeat-x表示在水平方向上平铺; repeat-y表示在垂直方向上平铺; no-repeat表示不平铺,即只显示一幅背景图案 。
6,background-repeat属性所有网页上的元素都有边框,只是大部分缺省没有显示出来 。 CSS边框属性设置包括三项:边框颜色 ( color),边框样式 ( style) 和边框宽度
( width),而边框又包括四个方向:上 ( top),
下 ( bottom),左 ( 1eft) 和右 ( right) 。 将边框设置和方向组合起来,则构成了多种属性 。 如:
border-bottom,border-bottom-color,border-
bottom-style,border-bottom-width,border-right-
color,border-right-style,border-right-width等等 。
11.4.4 布局属性
1,边框属性
CSS边界属性包括边界 margin,下边界 margin-
bottom,左边界 margin-left,右边界 margin- right
以及上边界 margin-top。
margin-left,margin-fight,margin-top 和
margin-bottom属性可以分别用来设置左,右,上,
下边界的宽度,它们的取值可以是长度,百分比或
auto。
margin属性可以同时指定上,右,下,左 ( 以此顺序 ) 边界的宽度 。
2,边界属性
CSS填充属性包括填充 padding,左填充 padding-
left,右填充 padding-right,上填充 padding-top以及下填充 padding-bottom。
padding-left,padding-right,padding-top 和
padding-bottom这四个属性用于设置左,右,上,下填充区的宽度,取值可以是长度和百分数 。
padding属性用于同时指定上,右,下,左四个方向填充的宽度 。
3,填充属性
CSS浮动属性包括 float和 clear。 float属性可以将元素的内容浮动到页面左边缘或右边缘,该属性的取值为,none,left,right,默认值为 none。 clear属性指定了元素是否允许浮动元素在它旁边,取值可以是:
none,left,right,both,默认值为 none,表示允许浮动元素在其旁边; left表示跳过左边的浮动元素;
right表示跳过右边的浮动元素,both表示跳过所有的浮动元素 。
4,浮动属性
CSS定位属性包括 position,top,bottom,left、
right和 z-index,宽,高属性包括 width和 height。
position属性用来规定元素怎样在 Web页上定位,
它的取值为,static( 默认值 ),relative或 absolute。
top和 left属性用来规定某个元素与其他元素之间的距离 。
width和 height属性可以控制元素的宽度和高度,
此时 position属性必须指定为 absolute。
11.4.5 定位和显示属性
1,定位属性和宽高属性在 CSS中,有两个属性可以控制元素的显示和隐藏,即 display属性和 visibility属性 。
display属性确定一个元素是否应绘制在页面上,
它的取值有多个,但在一般的浏览器中,只有一个
none值可以使用 。
visibility属性有时也被分类为定位属性,用来控制定位的元素是否可见,取值包括,visible( 可见 ),
hidden( 隐藏 ) 和 inherit( 继承 ),默认值为 inherit。
2,显示属性
CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状 。 通常情况下,鼠标呈指向左上方的箭头,
而当鼠标移到超链接上时呈手的形状 。 有了鼠标样式属性,用户就可以随意地设定鼠标的形状 。
CSS的鼠标样式是通过 cursor样式表属性定义的,
格式为:
cursor:属性值
11.4.6 鼠标样式属性列表样式属性用于设置页面中的列表格式 。 CSS中的列表样式属性包括,list-style,list-style-type,list-
style-image以及 list-style-position。
list-style-type属性用于设置项目符号和编号样式,
取值为,disc( 默认值,实心黑点 ),circle( 空心圆圈 ),square( 方块 ),decimal( 十进制数 1,2,3
等 ),lower-roman( 小罗马数字 ),upper-roman
( 大罗马数字 ),lower-alpha( 小写字母 ),upper-
-alpha( 大写字母 ) 和 none( 无 ) 。
11.4.7 列表样式属性滤镜 ( filter) 是 CSS的一种扩充 。 使用这种技术只用几句代码就可以把类似于 Photoshop中的滤镜效果添加到图片,文本等 HTML元素上 。
filter样式表的属性定义为:
filter:过滤器名称 ( 参数 )
11.4.8 CSS滤镜选择,窗口,|,CSS样式,命令可以打开,CSS
样式,面板,如图所示 。
11.5 在 Dreamweaver MX中 使用 CSS样式
11.5.1 CSS样式面板示范演示
11.5.2 新建一个 CSS样式表示范演示
11.5.3 重新定义 HTML标签示范演示
11.5.4 设置页面背景颜色示范演示
11.5.5 设置链接颜色
CSS样式建好之后,接下来就是要把它应用到文档中去 。 对于自定义的样式,需要将新样式应用到相应的对象上,而重新定义的 HTML标签样式是不需要应用的,只要选择相应的标签样式就能自动应用新样式 。
应用 CSS样式的方法如下:
将插入点移到需要套用样式的文本段落中,单击
CSS样式面板上的 CSS样式,则插入点所在的段落的文字就应用了新样式 。
11.5.6 应用 CSS样式
11.5.7 修改样式若要修改 CSS样式,首先打开 CSS样式面板,编辑样式,视窗,这时所有的 CSS样式 ( 包括自定义的
CSS样式和重新定义 HTML标签 ) 都出现在面板上 。
然后采用如下两种方法之一,打开样式定义对话框进行编辑修改 。
( 1) 在 CSS样式面板上双击该样式名 。
( 2) 选中要修改的 CSS样式,单击 CSS样式面板右下角的编辑样式按钮 。
链接一个外部样式表的操作步骤如下:
( 1) 选择,窗口,|“CSS样式,命令,打开 CSS样式面板 。
( 2) 单击该面板上的,附加样式表,按钮,或单击该面板顶部右边的三角按钮,从弹出的菜单中选择
,附加样式表,命令,出现,链接外部样式表,对话框 。
( 3) 在该对话框中选择,添加为,,链接,,并在
,文件 /URL”文本框中输入外部样式表文件名,或单击,浏览,按钮选择外部样式表文件 ( 外部样式表文件必须以,css为扩展名 ),单击,确定,按钮 。
11.5.8 链接外部 CSS样式表
E N D
1,JavaScript的特点及运行环境
2,JavaScript编程基础
3,JavaScript事件驱动
4,JavaScript的对象第 13章 在网页中使用 JavaScript
13.1 脚本语言简介
JavaScript是 Netscape公司推出的跨平台,基于对象的脚本语言,用于客户端与服务器端的应用程序 。
JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言 。 和 VBScript一样,它可以被嵌入到 HTML文件中,能直接被浏览器执行,从而产生各种各样的动态网页效果 。 JavaScript弥补了 HTML语言的缺陷,它与 HTML,CSS 结合被人们称为
DHTML。
( 1) 脚本编写语言
( 2) 基于对象
( 3) 简单性
( 4) 安全性
( 5) 动态性
( 6) 跨平台
13.1.1 JavaScript的特点
13.1.2 JavaScript的运行和编辑环境运行环境,Internet Explorer 4.0或 Netscape
Navigator 3.0以上 。
编辑环境:任何可以编辑 HTML文档的文本编辑器或专门的网页编辑器 ( FrontPage,Dreamweaver
等 ) 。
( 1) 使用 SCRIPT标记符插入脚本在网页中最常用的一种插入脚本的方式是使用
SCRIPT 标 记 符,方 法 是,把 脚 本 标 记 符
<SCRIPT></SCRIPT>置于网页上的 HEAD部分或 BODY部分,然后在其中加入脚本程序 。 尽管可以在网页上的多个位置使用 SCRIPT标记符,但最好还是将脚本代码放在 HEAD部分,以确保容易维护 。
13.1.3 在网页中使用 JavaScript
① 书写 JavaScript时应注意大小写,
② 在 JavaScript中,行尾用换行符作为一行完整代码的终止字符,
③ 若需要将几行代码放在一行中,应使用分号将它们分开,
④ 在 JavaScript中,/* 和 */也是注释标记 。
用户在编写 JavaScript时应注意以下几点:
( 2) 直接添加脚本
HTML可以直接在表单的输入元素标记符内添加脚本,以响应输入元素的事件 。
( 3) 链接脚本文件如果同一段脚本要在若干个 Web页中使用,则没有必要在多处维护相同的冗余代码,此时可以将脚本放在单独的一个文件里,然后再在任何需要该文件的
Web页中调用该文件 。
要引用外部脚本文件,应使用 SCRIPT标记符的 src
属性来指定外部脚本文件的 URL。
所谓变量,就是程序中一个已命名的存储单元 。
变量的主要作用是存取数据和提供存放信息的容器 。
JavaScript支持的数据类型如下,Number( 数字 ),Boolean( 布尔 ),String( 字符串 ),Null
( 空 ),Undefined( 未定义 ),Object( 对象 ) 。
13.2 JavaScript编程基础
13.2.1 JavaScript变量在 JavaScript中定义变量应遵循以下规则:
必须以字母或下划线 ( _) 开头 。
在所说明的范围内必须是唯一的 。
用 var来定义变量,也可以用赋值语句声明变量,但不能既不用 var声明变量,又不给它赋值 。
13.2.2 JavaScript运算符在 JavaScript中包括以下 8类运算符:
( 1) 算术运算符,+,-,*,/,%,++,--
( 2) 逻辑运算符,&&,||,!
( 3) 比较运算符,<,<=,>,>=,= =,! =
( 4) 字符串运算符,+( 字符串接合操作 )
( 5) 位操作运算符,&,|,^,-,~,<<,>>,>>>
( 6) 赋值运算符,=,+=,-=,*=,/ =,% =,&=、
( 7) 条件运算符:,?,
( 8) 其他运算符,,,[ ],( ),delete,new,void
13.2.3 JavaScript表达式表达式是运算符和操作数的组合 。 表达式通过求值确定表达式的值,这个值是对操作数实施运算符所确定的运算后产生的结果 。 有些运算符将数值赋予一个变量,而另一些运算符则可以用在其他表达式中 。
由于表达式是以运算符为基础的,因此表达式可以分为算术表达式,字符串表达式,赋值表达式以及逻辑表达式等等 。
13.2.4 JavaScript语句
( 1) 数据声明语句声明变量的语法如下:
var 变量名 [=初始值 ]
( 2) 赋值语句赋值语句是由赋值表达式组成的语句 。
( 3) 注释语句
//:表示单行注释,从,//”开始到本行结束都为注释 。
/*…… */:表示多行注释,从,/*”开始到,*/”结束为注释 。
1,一般语句在 JavaScript中提供了 if语句,if else语句以及
switch语句等三种条件语句 。
( 1) if语句
if( 条件 )
语句段;
( 2) if else语句
if( 条件 )
语句段 1;
else
语句段 2;
2,条件语句
( 3) switch语句如果需要对同一个表达式进行多次判断,那么就可以使用 switch语句,格式如下:
switch( 条件 )
{case value1,语句段 1;
case value2,语句段 2;
case value3,语句段 3;
…
default,语句段 4; }
( 1) for语句
for( 初始化;条件;增量 )
{
语句段;
}
( 2) while语句
while( 条件 )
{
语句段 ;
}
3,循环语句
( 3) do while语句
do
{
语句段 ;
}
while( 条件 )
( 4) break语句
break语句提供无条件跳出循环结构或 switch语句的功能 。
( 5) continue语句
continue语句的作用是终止当次循环,跳转到循环的开始处继续下一轮循环 。
4,其他语句除了以上条件语句和循环语句以外,JavaScript
中还包括以下语句:
函数调用语句 函数调用语句用于调用函数 。
return语句 用于返回函数调用的值 。
with语句 用于表示默认对象 。
for in语句 用于对一个对象的所有属性进行循环,直到每个属性都访问到 。
13.2.5 JavaScript函数数是已命名的代码块,代码块中的语句被作为一个整体引用和执行 。
定义函数的格式如下:
function 函数名 ( 参数 1,参数 2,..,)
{
语句段;
…
return 表达式;
}
通常鼠标或热键的动作称为事件 ( Event),
而由鼠标或热键引发的一连串程序的动作称为事件驱动 ( Event Driver) 。 比如,当单击鼠标按钮时就产生一个单击 ( onClick) 事件,当打开一个网页时就产生一个网页的载入 ( onLoad) 事件 。
13.3 JavaScript的事件驱动
13.3.1 什么是事件当用户单击鼠标按钮时,产生 onClick事件,同时
onClick指定的事件处理程序或代码被调用执行 。
OnClick事件通常在下列基本对象中产生:
( 1) button( 按钮 )
( 2) checkbox( 复选框 )
( 3) radio( 单选按钮 )
( 4) reset button( 重置按钮 )
( 5) submit button( 提交按钮 )
13.3.2 事件类型
1,单击事件 onClick
当用户改变表单元素的原有状态后,将产生该表单元素的 onChange事件 。
2,改变事件 onChange
当用户选中一段表单文本时,引发该事件 。
3,选中事件 onSelect
当用户单击鼠标或用 Tab键激活某一个表单元素时,产生该表单元素的聚焦事件,此时对象被选中 。
4,聚焦事件 onFocus
与 onFocus事件相反,当前激活表单元素从激活状态变为非激活状态,即不再拥有焦点,而退到后台时,引发该事件 。
5,失去焦点事件 onBlur
当 鼠 标 指 针 位 于 超 链 接 上 时,产生
onMouseOver事件 。
6,鼠标移动事件 onMouseOver
当文档载入时引发该事件 。 OnLoad事件的作用是在首次载入一个文档时检测 cookie的值,并用一个变量为其赋值,使其可以被源代码调用 。
7,载入文件 onLoad
当 Web页面退出时引发 onUnload事件 。
8,卸载文在件 onUnload
对象就是客观世界中存在的特定实体 。
13.4 JavaScript的对象
13.4.1 JavaScript的内部对象
JavaScript提供了一些内部对象,下面介绍三种常用的对象,即 String对象,Date对象和 Math对象 。
String对象用来存放字符串,是静态对象 。
( 1) String对象的属性
String对象只有一个属性,即 length,它表示字符串中的所有的字符个数,包括所有符号 。
( 2) String对象的方法
String对象的方法主要用于有关字符串在 Web中的显示,字体大小,颜色,大小写转换等 。 String对象有 19个方法 。
1,String对象创建日期对象可以使用以下 4种构造函数中的一种:
var variable=new Date( )
var variable=new Date( milliseconds)
var variable=new Date( string)
var variable=new Date( year,month,day,
hours,minutes,seconds,milliseconds)
( 1) 获取 Date对象的常用方法
( 2) 设置 Date对象的常用方法
2,Date对象
Math对象包含用来进行数学计算的属性和方法 。
( 1) Math对象的主要属性
Math中提供了 6个属性,即:常数 E,以 10为底的自然对数 ln10,以 2为底的自然对数 ln2,圆周率 PI( 3.1
4159),1/2的平方根 SQRT1-2,2的平方根 SQRT2。
3,Math对象文字修饰属性可以对特定选项的文本进行修饰,
它 的取值 为,none,underline,overline,line-
through,blink,默认值为 none,表示不加任何修饰 。 underline表示添加下划线; overline表示添加上划线; line-through表示添加删除线; blink表示添加闪烁效果 。
另外 IE浏览器并不支持文字修饰属性值 blink( 闪烁 ) 。
6,文字修饰属性 ( text-decoration)
行高属性决定了相邻行之间的间距 。 其取值可以是数字,长度或百分比,默认值是 normal。 当以数字指定值时,行高就是当前字体高度与该数字相乘的倍数 。 如果指定具体的长度值,则行高为该值 。 如果用百分比指定行高,则行高为当前字体高度与该百分比相乘 。 该属性不允许使用负值 。
7,行高属性 (line-height)
文本转换属性用于转换文本,取值为,capitalize、
uppercase,lowercase,none,默认值是 none表示使用原始值 。 capitalize值表示所选元素中文本的每个单词的首字母以大写显示; uppercase值表示所有的文本都以大写显示; lowercase值表示所有文本都以小写显示 。
8,文本转换属性 (text-transform)
background属性是一个组合属性,可用于同时设置 background- color,background- image,
back2round-attachment,background-position,
background-repeat等背景属性 。
11.4.3 颜色与背景属性
1,background属性用于设置 HTML元素的背景颜色 。 此属性的默认值是 transparent,表示没有任何颜色,此时上级元素的背景可以在子元素中显示出来 。
2,background-color属性用于设置 HTML元素的背景图案,取值为 url或
none。 默认值为 none,即没有背景图案 。 该属性相当于 HTML中 BODY标签的 background属性,只是它可以定义更多元素的背景图像 。
3,background-image属性用于控制背景图像是否随内容一起滚动,取值为
scroll,fixed。 默认值为 scroll,表示背景图案随着内容一起滚动; fixed表示背景图案静止,而内容可以滚动 。
4,background-attachment属性用于指定背景图案相对于关联区域左上角的位置 。
该属性通常指定由空格隔开的两个值 。
5,background-position属性表示当使用背景图案时,背景图案是否重复显示 。 取值可以是,repeat表示在水平方向和垂直方向都重复,即像铺地板一样将背景图案平铺;
repeat-x表示在水平方向上平铺; repeat-y表示在垂直方向上平铺; no-repeat表示不平铺,即只显示一幅背景图案 。
6,background-repeat属性所有网页上的元素都有边框,只是大部分缺省没有显示出来 。 CSS边框属性设置包括三项:边框颜色 ( color),边框样式 ( style) 和边框宽度
( width),而边框又包括四个方向:上 ( top),
下 ( bottom),左 ( 1eft) 和右 ( right) 。 将边框设置和方向组合起来,则构成了多种属性 。 如:
border-bottom,border-bottom-color,border-
bottom-style,border-bottom-width,border-right-
color,border-right-style,border-right-width等等 。
11.4.4 布局属性
1,边框属性
CSS边界属性包括边界 margin,下边界 margin-
bottom,左边界 margin-left,右边界 margin- right
以及上边界 margin-top。
margin-left,margin-fight,margin-top 和
margin-bottom属性可以分别用来设置左,右,上,
下边界的宽度,它们的取值可以是长度,百分比或
auto。
margin属性可以同时指定上,右,下,左 ( 以此顺序 ) 边界的宽度 。
2,边界属性
CSS填充属性包括填充 padding,左填充 padding-
left,右填充 padding-right,上填充 padding-top以及下填充 padding-bottom。
padding-left,padding-right,padding-top 和
padding-bottom这四个属性用于设置左,右,上,下填充区的宽度,取值可以是长度和百分数 。
padding属性用于同时指定上,右,下,左四个方向填充的宽度 。
3,填充属性
CSS浮动属性包括 float和 clear。 float属性可以将元素的内容浮动到页面左边缘或右边缘,该属性的取值为,none,left,right,默认值为 none。 clear属性指定了元素是否允许浮动元素在它旁边,取值可以是:
none,left,right,both,默认值为 none,表示允许浮动元素在其旁边; left表示跳过左边的浮动元素;
right表示跳过右边的浮动元素,both表示跳过所有的浮动元素 。
4,浮动属性
CSS定位属性包括 position,top,bottom,left、
right和 z-index,宽,高属性包括 width和 height。
position属性用来规定元素怎样在 Web页上定位,
它的取值为,static( 默认值 ),relative或 absolute。
top和 left属性用来规定某个元素与其他元素之间的距离 。
width和 height属性可以控制元素的宽度和高度,
此时 position属性必须指定为 absolute。
11.4.5 定位和显示属性
1,定位属性和宽高属性在 CSS中,有两个属性可以控制元素的显示和隐藏,即 display属性和 visibility属性 。
display属性确定一个元素是否应绘制在页面上,
它的取值有多个,但在一般的浏览器中,只有一个
none值可以使用 。
visibility属性有时也被分类为定位属性,用来控制定位的元素是否可见,取值包括,visible( 可见 ),
hidden( 隐藏 ) 和 inherit( 继承 ),默认值为 inherit。
2,显示属性
CSS的鼠标样式属性用于设置鼠标移到元素上时的鼠标形状 。 通常情况下,鼠标呈指向左上方的箭头,
而当鼠标移到超链接上时呈手的形状 。 有了鼠标样式属性,用户就可以随意地设定鼠标的形状 。
CSS的鼠标样式是通过 cursor样式表属性定义的,
格式为:
cursor:属性值
11.4.6 鼠标样式属性列表样式属性用于设置页面中的列表格式 。 CSS中的列表样式属性包括,list-style,list-style-type,list-
style-image以及 list-style-position。
list-style-type属性用于设置项目符号和编号样式,
取值为,disc( 默认值,实心黑点 ),circle( 空心圆圈 ),square( 方块 ),decimal( 十进制数 1,2,3
等 ),lower-roman( 小罗马数字 ),upper-roman
( 大罗马数字 ),lower-alpha( 小写字母 ),upper-
-alpha( 大写字母 ) 和 none( 无 ) 。
11.4.7 列表样式属性滤镜 ( filter) 是 CSS的一种扩充 。 使用这种技术只用几句代码就可以把类似于 Photoshop中的滤镜效果添加到图片,文本等 HTML元素上 。
filter样式表的属性定义为:
filter:过滤器名称 ( 参数 )
11.4.8 CSS滤镜选择,窗口,|,CSS样式,命令可以打开,CSS
样式,面板,如图所示 。
11.5 在 Dreamweaver MX中 使用 CSS样式
11.5.1 CSS样式面板示范演示
11.5.2 新建一个 CSS样式表示范演示
11.5.3 重新定义 HTML标签示范演示
11.5.4 设置页面背景颜色示范演示
11.5.5 设置链接颜色
CSS样式建好之后,接下来就是要把它应用到文档中去 。 对于自定义的样式,需要将新样式应用到相应的对象上,而重新定义的 HTML标签样式是不需要应用的,只要选择相应的标签样式就能自动应用新样式 。
应用 CSS样式的方法如下:
将插入点移到需要套用样式的文本段落中,单击
CSS样式面板上的 CSS样式,则插入点所在的段落的文字就应用了新样式 。
11.5.6 应用 CSS样式
11.5.7 修改样式若要修改 CSS样式,首先打开 CSS样式面板,编辑样式,视窗,这时所有的 CSS样式 ( 包括自定义的
CSS样式和重新定义 HTML标签 ) 都出现在面板上 。
然后采用如下两种方法之一,打开样式定义对话框进行编辑修改 。
( 1) 在 CSS样式面板上双击该样式名 。
( 2) 选中要修改的 CSS样式,单击 CSS样式面板右下角的编辑样式按钮 。
链接一个外部样式表的操作步骤如下:
( 1) 选择,窗口,|“CSS样式,命令,打开 CSS样式面板 。
( 2) 单击该面板上的,附加样式表,按钮,或单击该面板顶部右边的三角按钮,从弹出的菜单中选择
,附加样式表,命令,出现,链接外部样式表,对话框 。
( 3) 在该对话框中选择,添加为,,链接,,并在
,文件 /URL”文本框中输入外部样式表文件名,或单击,浏览,按钮选择外部样式表文件 ( 外部样式表文件必须以,css为扩展名 ),单击,确定,按钮 。
11.5.8 链接外部 CSS样式表
E N D