版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
动态网页设计基础第一页，共一百六十五页，编辑于2023年，星期五第1章HTML基础12HTML常用元素HTML简介第二页，共一百六十五页，编辑于2023年，星期五HTML简介HTML常用元素1.网页与HTML目录HTML简介2.编写及显示HTML文件3.标签、元素和属性第三页，共一百六十五页，编辑于2023年，星期五1、网页与HTML
HTML是HyperTextMarkupLanguage的缩写，中文翻译为“超文本标记语言”，是制作网页的最基本语言。Page4第四页，共一百六十五页，编辑于2023年，星期五温馨提示：普及几个常用知识点Hyper（超）Text（文本）Markup（标记）用HTML制作的网页可以通过其中的链接从一个网页“跳转”至另一个网页。HTML是一种文本解释性的程序语言，即它的源代码将不经过编译而直接在浏览器中运行时被“翻译”。HTML的基本规则就是用“标记语言”——成对尖括号组成的标签元素来描述网页内容是如何在浏览器中显示的。Page5第五页，共一百六十五页，编辑于2023年，星期五1用标签元素描述网页的内容结构2用CSS描述网页的排版布局3用JavaScript描述网页的事件处理，即鼠标或键盘在网页元素上的动作后的程序。网站开发主要原则
第六页，共一百六十五页，编辑于2023年，星期五Page7(X)HTML与CSS核心基础HTML与CSS的关系HTML与XHTMLDOCTYPE（文档类型）的含义与选择
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head>…………第七页，共一百六十五页，编辑于2023年，星期五
(X)HTML与CSS核心基础XHTML与HTML的重要区别1.在XHTML中标记名称必须小写2.在XHTML中属性名称必须小写3.在XHTML中标记必须严格严格嵌套4.在XHTML中标记必须封闭5.在XHTML中，即使是空元素的标记也必须封闭6.在XHTML中属性值用双引号括起来7.在XHTML中属性值必须使用完整形式8.在XHTML中，应该区分“内容标记”与“结构标记”第八页，共一百六十五页，编辑于2023年，星期五2、编写及显示HTML文件
Page9第九页，共一百六十五页，编辑于2023年，星期五3、标签、元素和属性
标签HTML标签是由一对尖括号<>和标签名称组成。标签分为“起始标签”和“结束标签”两种，二者的标签名称是相同的，只是结束标签多了一个斜杠“/”。Page10第十页，共一百六十五页，编辑于2023年，星期五元素HTML元素是组成HTML文档的最基本的部件，它是用标签来表现的，一般“起始标签”表示元素的开始，“结束标签”表示元素的结束。第十一页，共一百六十五页，编辑于2023年，星期五属性在元素的起始标签中，还可以包含“属性”来表示元素的其他特性，它的格式是：<标签名称属性名=“属性值”>第十二页，共一百六十五页，编辑于2023年，星期五HTML简介HTML常用元素1.基本结构元素目录HTML常用元素2.常用块元素3.常用列表元素4.常用表格元素5.常用行元素6.表单元素7.一些特殊元素第十三页，共一百六十五页，编辑于2023年，星期五HTML常用元素HTML4.01制定的文档类型：严格型（Strict）框架型（Frameset）转换型（Transitional）常用元素大约96种12种HTML常用元素第十四页，共一百六十五页，编辑于2023年，星期五1、基本结构元素HTML的基本结构元素：html（HTML文档）元素body（主体）元素head（头）元素第十五页，共一百六十五页，编辑于2023年，星期五HTML的基本结构元素：body（主体）元素head（头）元素html（HTML文档）元素body元素是html文件的主体元素，它包含所有要在网页上显示的各种元素●title元素●link元素和style元素常用于CSS●script元素●meta元素每个网页文件中一般都包含有这3个元素，而且它们只能出现一次。html元素是网页文件的最外围的一对标签，它告诉浏览器整个文件是HTML格式，并且是从<html>开始，至</html>结束。
head元素包含的是网页的头部信息，它的内容主要被浏览器所用而不会显示在网页正文中。第十六页，共一百六十五页，编辑于2023年，星期五2.常用块元素标题类块元素段落块元素最常用的段落块元素：●p（段落）元素●pre（原样显示文字）元素●div（通用块）元素通用属性最常用的段落块元素：●id（元素标识）属性●title（提示）属性●style（CSS样式）属性●class（CSS分类）属性第十七页，共一百六十五页，编辑于2023年，星期五3.常用列表元素HTML的常用列表元素：ul元素li元素ol元素第十八页，共一百六十五页，编辑于2023年，星期五4.常用表格元素HTML的常用表格元素：table（表格）元素th（表头）元素tr（表格行）元素td（表格单元格）元素第十九页，共一百六十五页，编辑于2023年，星期五5.常用行元素HTML的常用行元素：●img（图像）元素●a（链接）元素●span（通用行）元素●sub（下标）●sup（上标）元素●b（粗体）●i（斜体）●br（换行）元素
●●●●●●行元素总是与其前后其他元素保持在同一行中的。第二十页，共一百六十五页，编辑于2023年，星期五6.表单元素HTML的表单元素：表单控件元素fieldset（表单控件组）元素label（表单控件名称）元素●input（输入框）元素●select（下拉框）元素●textarea（多行文本输入框）元素用于收集用户输入信息第二十一页，共一百六十五页，编辑于2023年，星期五7.一些特殊元素HTML的一些特殊元素：注释元素meta（描述网页信息）元素特殊字符doctype（文档类型的定义）与HTML文档的检验第二十二页，共一百六十五页，编辑于2023年，星期五第2章CSS基础12CSS基本语法CSS简介第二十三页，共一百六十五页，编辑于2023年，星期五CSS简介CSS基本语法1.图解CSS2.CSS定义3.CSS的特点目录CSS简介第二十四页，共一百六十五页，编辑于2023年，星期五1、图解CSS
Page25未应用CSS应用了CSS第二十五页，共一百六十五页，编辑于2023年，星期五2、CSS的定义Page26CSS是CascadingStyleSheets的缩写，中文为“层叠样式表”。第二十六页，共一百六十五页，编辑于2023年，星期五3、CSS的特点Page27CSS通过“样式”来表示网页的颜色、字体、背景色、边框线及网页内容的位置及大小尺寸等属性。1颜色3字体2背景色边框线4网页内容的位置5网页内容的大小尺寸61第二十七页，共一百六十五页，编辑于2023年，星期五一系列的样式组成了“样式表”。Page282第二十八页，共一百六十五页，编辑于2023年，星期五Page29
(X)HTML与CSS核心基础在HTML中引入CSS的方法行内式<h1style="color:white;background-color:blue">ThisisalineofText.</h1>内嵌式<styletype="text/css"> h1{ color:white; background-color:blue }</style>第二十九页，共一百六十五页，编辑于2023年，星期五Page30
(X)HTML与CSS核心基础在HTML中引入CSS的方法导入式<styletype="text/css"> @import"mystyle.css";</style>链接式
<linkhref="mystyle.css"rel="stylesheet" type="text/css"/>第三十页，共一百六十五页，编辑于2023年，星期五定义“样式表”有3种方式：外部样式表内部样式表元素中的样式表Page313第三十一页，共一百六十五页，编辑于2023年，星期五4在网页的标记中应用“样式”，时采用的是“层叠式”原则。Page32第三十二页，共一百六十五页，编辑于2023年，星期五CSS简介CSS基本语法1.样式和样式表2.CSS中的颜色和长度定义3.常用的样式属性4.定义样式表5.内部样式表和外部样式表6.层叠式应用规则目录CSS基本语法第三十三页，共一百六十五页，编辑于2023年，星期五1、样式和样式表
样式样式是由成对的属性名和属性值以冒号“：”相间组成。Page34第三十四页，共一百六十五页，编辑于2023年，星期五样式表一系列的“样式”以分号“；”相间组成为“样式表”。Page35第三十五页，共一百六十五页，编辑于2023年，星期五2、CSS中的颜色和长度定义
颜CSS中的颜色是由红、蓝、绿3种颜色组合而成的，每一种颜色用数字0至255表示1Page36第三十六页，共一百六十五页，编辑于2023年，星期五2长度定义CSS的长度单位：●in（英寸）●cm（厘米）●mm（毫米）●em（字高）●pt（点=1/72英寸）●pc（pica点=12点）●px（像素点）Page37第三十七页，共一百六十五页，编辑于2023年，星期五常用的样式属性：1.文字2.背景3.边框线4.高度和宽度5.间距和边距6.列表7.位置和布局3、常用的样式属性
Page38第三十八页，共一百六十五页，编辑于2023年，星期五4、定义样式表
指定“对象”来定义样式表的语法规则如下：对象1,对象2……{样式表}Page39第三十九页，共一百六十五页，编辑于2023年，星期五5、内部样式表和外部样式表
内部样式表1内部样式表是将定义样式表的内容放在style元素中，并且设置type属性为text/css。然后将style元素放在HTML文档的head元素中。Page40第四十页，共一百六十五页，编辑于2023年，星期五5、内部样式表和外部样式表
外部样式表2外部样式表放在一个文本文件中，一般都是以.css作为扩展名，然后在HTML文档的head元素中插入link元素，通过下属格式将外部样式表文件连接到HTML文档中。<linkrel="stylesheet"type="text/css"href="外部样式表文件.css">Page41第四十一页，共一百六十五页，编辑于2023年，星期五Page42(X)HTML与CSS核心基础基本CSS选择器含义和作用标记选择器类别选择器ID选择器h1color:red;font-size:25px;{}选择器属性值属性值声明声明.redcolor:red;font-size:25px;{}选择器属性值属性值声明声明#redcolor:red;font-size:25px;{}选择器属性值属性值声明声明第四十二页，共一百六十五页，编辑于2023年，星期五Page43(X)HTML与CSS核心基础复合选择器“交集”选择器 div.special{……} div#special{……}“并集”选择器 div,h1.first,p.specia{……}后代选择器 divh1.firstspan.firstLetter{……}第四十三页，共一百六十五页，编辑于2023年，星期五6、层叠式应用规则
Page44第四十四页，共一百六十五页，编辑于2023年，星期五Page45(X)HTML与CSS核心基础CSS的继承特性(13~15.htm)第四十五页，共一百六十五页，编辑于2023年，星期五Page46(X)HTML与CSS核心基础CSS的层叠特性(16.htm)
行内样式
>ID样式
>类别样式
>标记样式<p>这是第1行文本</p><pclass="red">这是第2行文本</p><pid="line3"class="red">这是第3行文本</p><pstyle="color:orange;"id="line3">这是第4行文</p><pclass="purplered">这是第5行文本</p>第四十六页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型什么是“模型”——本质特征的抽象布局的“模型”Page47第四十七页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型什么是“模型”——本质特征的抽象布局的“模型”Page48第四十八页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型div{ border-width:6px; border-color:#000000; margin:20px;padding:5px; background-color:#FFFFCC; }Page49第四十九页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型属性值的简写形式
方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：
如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。Page50第五十页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型属性值的简写形式
border-color:redgreen border-width:1px2px3px; border-style:dotteddashedsoliddouble;Page51第五十一页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型内边距（padding）#outerBox{ width:128px; height:128px; padding:20px20px10px;/*上
左右
下*/ padding-left:10px; border:10pxgraydashed; }Page52第五十二页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型外边距（margin）#outerBox{ width:128px; height:128px; padding:20px20px10px;/*上
左右
下*/ padding-left:10px; border:10pxgraydashed; }body{ border:1pxblacksolid; background:#cc0; }Page53第五十三页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型HTML与DOMPage54第五十四页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型标准文档流Page55第五十五页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型<div>标记与<span>标记div：块级元素（block）span：行内元素（inline）Page56第五十六页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型盒子在标准流中的定位原则实验1——行内元素之间的水平marginspan.left{ margin-right:30px; background-color:#a9d6ff;}span.right{ margin-left:40px; background-color:#eeb0b0;}span2span1margin-rightmargin-leftPage57第五十七页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子在标准流中的定位原则实验2——块级元素之间的竖直margin
<body> <divstyle="margin-bottom:50px;">块元素1</div> <divstyle="margin-top:30px;">块元素2</div></body>块元素2块元素1块元素1块元素2margin-bottom:50pxmargin-top:30pxPage58第五十八页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子在标准流中的定位原则实验3——嵌套盒子之间的marginPage59第五十九页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型<body><ul><li>第1个列表的第1个目内容</li><liclass="withborder">第1个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul><ul><li>第2个列表的第1个项目内容</li><liclass="withborder">第2个列表的第2个项目内容，内容更长一些，目的是演示自动折行的效果。</li></ul></body>CSS中的几何题ul{background:#ddd;margin:15px15px15px15px;padding:5px5px5px5px;}li{color:black;background:#aaamargin:20px20px20px20px;padding:10px0px10px10px;list-style:none}li.withborder{border-style:dashed;border-width:5px; border-color:black;margin-top:20px；
}
Page60第六十页，共一百六十五页，编辑于2023年，星期五深入理解盒子模型CSS中的几何题Page61第六十一页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动准备代码Page62第六十二页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验1——设置第1个浮动的divPage63第六十三页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验2——设置第2个浮动的divPage64第六十四页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验3——设置第3个浮动的divPage65第六十五页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验4——改变浮动的方向Page66第六十六页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验5——再次改变浮动的方向Page67第六十七页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验6——全部向左浮动Page68第六十八页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验7——使用clear属性清除浮动的影响Page69第六十九页，共一百六十五页，编辑于2023年，星期五第3课
深入理解盒子模型盒子的浮动实验8——扩展盒子的高度Page70第七十页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位广义的“定位”：当提到把希望某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定为的问题。狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词要翻译为中文，也是定位的意思，然而要使用CSS进行定位操作的手段，并不仅仅通过择个属性来实现，因此不要把把二者混淆。Page71第七十一页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。
fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。Page72第七十二页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。Page73第七十三页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位Relative：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。Page74第七十四页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位Absolute：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。Page75第七十五页，共一百六十五页，编辑于2023年，星期五第4课
盒子的浮动与定位盒子的定位Fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。Page76第七十六页，共一百六十五页，编辑于2023年，星期五什么是JavaScriptCSS基本语法目录编辑与调试JavaScript第一个JavaScript示例编辑与调试JavaScript1.浏览器2.编辑软件3.调试软件第七十七页，共一百六十五页，编辑于2023年，星期五1、浏览器1Microsoft的InternetExplorer2Mozilla的Firefox浏览器第七十八页，共一百六十五页，编辑于2023年，星期五2、编辑软件1MacromediaDreamweaver2MicrosoftFrontPage第七十九页，共一百六十五页，编辑于2023年，星期五3、调试软件1Microsoft的InternetExplorer2Mozilla的Firefox浏览器第八十页，共一百六十五页，编辑于2023年，星期五CSS的常用技巧CSS基本语法目录CSS用于网页布局设计CSS其他设计原则第一个JavaScript示例第八十一页，共一百六十五页，编辑于2023年，星期五第一个JavaScript示例1编写JavaScript2运行JavaScript程序3调试JavaScript程序第八十二页，共一百六十五页，编辑于2023年，星期五第5章JavaScript编程基础2表达式与运算符1
数据类型及变量3
基本语句4
函数5
对象6
事件及事件处理程序第八十三页，共一百六十五页，编辑于2023年，星期五1.数据类型目录2.常量与变量
数据类型及变量表达式与运算符
基本语句
数据类型及变量第八十四页，共一百六十五页，编辑于2023年，星期五1、数据类型1简单数据类型“数值”数据类型“文字”数据类型“真假”数据类型第八十五页，共一百六十五页，编辑于2023年，星期五2特殊数据类型“空”数据类型“无定义”数据类型第八十六页，共一百六十五页，编辑于2023年，星期五3复杂数据类型“数组”数据类型“函数”数据类型“对象”数据类型第八十七页，共一百六十五页，编辑于2023年，星期五JavaScript的常量通常又称为字面常量，它是不能改变的数据。2、常量与变量1常量第八十八页，共一百六十五页，编辑于2023年，星期五变量就是在计算机内存中暂时保存数据的地方。2变量第八十九页，共一百六十五页，编辑于2023年，星期五Page90变量的数据类型及其转换变量的作用范围34第九十页，共一百六十五页，编辑于2023年，星期五1.表达式目录2.运算符
数据类型及变量表达式与运算符
基本语句表达式与运算符第九十一页，共一百六十五页，编辑于2023年，星期五1、表达式第九十二页，共一百六十五页，编辑于2023年，星期五2、运算符123二目运算符：需要两个操作数的运算符。一目运算符：只需要一个操作数的运算符。三目运算符：需要三个操作数的运算符。温馨提示：第九十三页，共一百六十五页，编辑于2023年，星期五算数运算符运算符意义示例+数字相加2+3结果为5+字串合并"朋友"+"您好"结果为"朋友您好"-相减6-3结果为3-负数i=30;j=-i结果j为-30*相乘10*2结果为20/相除8/2结果为4%取模（余数）6%3结果0++递增1i=5;i++;结果i为6--递减1i=5;i--;结果i为41第九十四页，共一百六十五页，编辑于2023年，星期五运算符意义示例==等于5==3结果为false!=不等于5!=3结果为true<小于5<3结果为false<=小于或等于5<=3结果为false>大于5>3结果为true逻辑运算符2第九十五页，共一百六十五页，编辑于2023年，星期五续表运算符意义示例>=大于或等于5>=3结果为true&&与true&&false结果为false||或true||false结果为true!非!true结果为false第九十六页，共一百六十五页，编辑于2023年，星期五运算符意义示
例&位逻辑与0x0001&0x1001结果为0x0001|位逻辑或0x0001|0x1001结果为0x1001^位逻辑非0x0001^0x1001结果为false0x1000～位逻辑反～0x0001结果为0xFFFE<<左移0x0001<<1结果为0x0002>>右移0x0001>>1结果为0x0000位运算符3第九十七页，共一百六十五页，编辑于2023年，星期五操作后赋值运算符4Page98第九十八页，共一百六十五页，编辑于2023年，星期五运算符意义示例?:if–else运算符x=2;(x>3)?"Higherlevel":"Lowerlevel"结果为"Lowerlevel",最常用于for语句详见“5.3.3流程控制语句”delete删除对象或对象中的元素详见“5.5.3使用对象”new创建对象实例详见“5.5.3使用对象”this引用当前对象详见“5.5.3使用对象”typeof数据类型运算符typeof(20)结果为numbervoid无返回值运算符详见“7.2.4链接对象”特殊运算符5Page99第九十九页，共一百六十五页，编辑于2023年，星期五运算符顺序6Page100第一百页，共一百六十五页，编辑于2023年，星期五1.注释语句目录2.赋值语句3.流程控制语句
数据类型及变量表达式与运算符
基本语句
基本语句第一百零一页，共一百六十五页，编辑于2023年，星期五1、注释语句“单行”
注释语句“多行”
注释语句Page102第一百零二页，共一百六十五页，编辑于2023年，星期五2、赋值语句Page103第一百零三页，共一百六十五页，编辑于2023年，星期五3、流程控制语句1条件判断语句2特殊数据类型JavaScript的条件判断语句主要包括if、if-else、if-else
if…及switch等4种。JavaScript中循环语句主要包括while、dowhile、for、for…in、break及continue等6种。Page104第一百零四页，共一百六十五页，编辑于2023年，星期五1.定义函数目录2.使用函数3.函数的参数
数据类型及变量表达式与运算符
基本语句函数第一百零五页，共一百六十五页，编辑于2023年，星期五1、定义函数定义函数的语法规则如下：function函数名（[参数1,参数2,…]）{程序语句…[return值;]}其中，方括号中的内容为可选项。Page106第一百零六页，共一百六十五页，编辑于2023年，星期五2、使用函数Page107第一百零七页，共一百六十五页，编辑于2023年，星期五3、函数的参数1参数的传递参数的传递方式：1.按值传递参数2.按地址传递参数Page108第一百零八页，共一百六十五页，编辑于2023年，星期五2参数的个数Page109第一百零九页，共一百六十五页，编辑于2023年，星期五1.什么是对象目录2.定义对象3.使用对象
数据类型及变量表达式与运算符
基本语句对象第一百一十页，共一百六十五页，编辑于2023年，星期五JavaScript的对象就是这样一种特殊的数据类型，它不仅可以保存一组不同类型的数据（称做“对象的属性”），而且还可以包含有关“处理”这些数据的函数（称做“对象的方法”）。1、什么是对象Page111第一百一十一页，共一百六十五页，编辑于2023年，星期五JavaScript的对象包含：●JavaScript的内置对象●自定义对象●浏览器内置对象第一百一十二页，共一百六十五页，编辑于2023年，星期五2、定义对象第一百一十三页，共一百六十五页，编辑于2023年，星期五3、使用对象1创建对象第一百一十四页，共一百六十五页，编辑于2023年，星期五2使用对象的属性●通过圆点（.）运算符●通过属性名●通过循环语句●通过with语句第一百一十五页，共一百六十五页，编辑于2023年，星期五使用对象的方法对象作为函数的参数34第一百一十六页，共一百六十五页，编辑于2023年，星期五目录
数据类型及变量表达式与运算符
基本语句事件及事件处理程序第一百一十七页，共一百六十五页，编辑于2023年，星期五1、网页中的事件2、用JavaScript处理事件第一百一十八页，共一百六十五页，编辑于2023年，星期五第6章
JavaScript常用内置对象1234字串（String）对象数组（Array）对象数学（Math）对象日期（Date）对象第一百一十九页，共一百六十五页，编辑于2023年，星期五数组（Array）对象CSS基本语法目录字串（String）对象数学（Math）对象数组（Array）对象第一百二十页，共一百六十五页，编辑于2023年，星期五新建一个长度为零的数组。语法规则如下：var变量名=newArray()Page1211、新建数组
第一百二十一页，共一百六十五页，编辑于2023年，星期五菜单设计的内容：2.数组中的序列号3.引用数组元素4.动态数组5.数组对象的常用属性与方法6.排序数组Page122第一百二十二页，共一百六十五页，编辑于2023年，星期五数组（Array）对象CSS基本语法目录字串（String）对象数学（Math）对象字串（String）对象Page123第一百二十三页，共一百六十五页，编辑于2023年，星期五1.使用字串对象2.字串相加3.在字串中使用单引号、
双引号及其他特殊字符Page124第一百二十四页，共一百六十五页，编辑于2023年，星期五4.比较字串是否相等5.字串与整数、浮点数之间的转换6.串对象的属性与方法7.字串对象应用实例Page125第一百二十五页，共一百六十五页，编辑于2023年，星期五数组（Array）对象CSS基本语法目录字串（String）对象数学（Math）对象数学（Math）对象第一百二十六页，共一百六十五页，编辑于2023年，星期五1.使用数学对象2.数学对象的属性与方法3.特殊的常数和函数4.格式化数字5.产生随机数Page127第一百二十七页，共一百六十五页，编辑于2023年，星期五数组（Array）对象CSS基本语法目录字串（String）对象数学（Math）对象日期（Date）对象第一百二十八页，共一百六十五页，编辑于2023年，星期五新建日期日期对象的属性与方法日期对象应用实例Page129第一百二十九页，共一百六十五页，编辑于2023年，星期五第7章
JavaScript常用文档对象2
文档对象1
文档对象结构3动态改变网页内容和样式第一百三十页，共一百六十五页，编辑于2023年，星期五1.文档对象的节点树目录2.得到文档对象中元素对象的一般方法
文档对象结构
文档对象动态改变网页内容和样式
文档对象结构第一百三十一页，共一百六十五页，编辑于2023年，星期五1、文档对象的节点树文档对象节点树有以下特点：每一个节点树有一个根节点，如图7-4所示中的html元素；1234除了根节点，每一个节点都有一个父节点，如图7-4所示的除html元素以外的其他元素；每一个节点都可以有许多的子节点具有相同父节点的叫做“兄弟节点”第一百三十二页，共一百六十五页，编辑于2023年，星期五文档对象document文字内容“文档对象”文字内容“文档对象示例”……属性href文字内容“其他示例”根节点元素<html>p节点元素<p>a节点元素<a>头节点元素<head>主体节点元素<body>标题节点元素<title>h1节点元素<h1>文档对象的节点树图7-4第一百三十三页，共一百六十五页，编辑于2023年，星期五2、得到文档对象中元素对象的一般方法1、document.getElementById2、document.getElementsByTagName3．document.getElementsByName第一百三十四页，共一百六十五页，编辑于2023年，星期五1.文档对象的属性和方法2.文档对象的cookie属性3.表单（form）及其控件元素对象4.链接（link）对象5.图像（image）对象目录
文档对象结构
文档对象动态改变网页内容和样式
文档对象第一百三十五页，共一百六十五页，编辑于2023年，星期五1、文档对象的属性和方法第一百三十六页，共一百六十五页，编辑于2023年，星期五设置cookie取出cookie删除cookie2、文档对象的cookie属性第一百三十七页，共一百六十五页，编辑于2023年，星期五3、表单（form）及其控件元素对象参数的传递方式：1．表单中的控件元素对象2．列表及列表选项控件元素对象3．表单元素对象的应用实例添加列表选项删除列表选项在JavaScript中对列表进行添加、删除选项的操作如下：第一百三十八页，共一百六十五页，编辑于2023年，星期五4、链接（link）对象5、图像（image）对象第一百三十九页，共一百六十五页，编辑于2023年，星期五1.动态改变网页内容2.动态改变网页样式目录
文档对象结构
文档对象动态改变网页内容和样式动态改变网页内容和样式第一百四十页，共一百六十五页，编辑于2023年，星期五1、动态改变网页内容
innerHTML的方法添加、删除节点的方法12第一百四十一页，共一百六十五页，编辑于2023年，星期五2、动态改变网页样式第一百四十二页，共一百六十五页，编辑于2023年，星期五第8章
JavaScript其他常用窗口对象2
浏览器信息（navigator）对象1屏幕（screen）对象3窗口（window）对象4
网址（location）对象5历史记录（history）对象6
框架（frame）对象第一百四十三页，共一百六十五页，编辑于2023年，星期五目录屏幕（screen）对象浏览器信息窗口（window）对象屏幕（screen）对象第一百四十四页，共一百六十五页，编辑于2023年，星期五表8-1属性意义height显示屏幕的高度width显示屏幕的宽度availHeight可用高度availWidth可用宽度colorDepth每像素中用于颜色的位数，其值为1,4,8,15,16,24,32屏幕（screen）对象屏幕对象常用属性第一百四十五页，共一百六十五页，编辑于2023年，星期五目录屏幕（screen）对象浏览器信息窗口（window）对象浏览器信息（navigator）对象第一百四十六页，共一百六十五页，编辑于2023年，星期五属性意义appVersion浏览器版本号appCodeName浏览器内码名称appName浏览器名称platform用户操作系统userAgent该字串包含了浏览器的内码名称及版本号，它被包含在向服务器端请求的头字串中，用于识别用户language(除IE外)userLanguage(IE)systemLanguage(IE)browserLanguage(IE)浏览器设置的语言操作系统设置的语言操作系统缺省设置的语言浏览器设置的语言浏览器信息（navigator）对象浏览器信息对象常用属性表8-2第一百四十七页，共一百六十五页，编辑于2023年，星期五目录屏幕（screen）对象浏览器信息窗口（window）对象Page1481.窗口对象的常用属性和方法2.多窗口控制3.输入输出信息窗口（window）对象第一百四十八页，共一百六十五页，编辑于2023年，星期五表8-3 窗口对象常用属性属性意义document文档对象frames框架对象screen屏幕对象navigator浏览器信息对象length框架数组的长度1、窗口对象的常用属性和方法1窗口对象的常用属性第一百四十九页，共一百六十五页，编辑于2023年，星期五属性意义history历史对象Location网址对象name窗口名字opener打开当前窗口的窗口对象parent当前窗口的上一级窗口对象self当前窗口或框架status状态栏中的信息defaultStatus状态栏中的缺省信息续表第一百五十页，共一百六十五页，编辑于2023年，星期五方法意义alert(信息字串)打开一个包含信息字串的提示框confirm(信息字串)打开一个包含信息、确定和取消按钮的对话框prompt(信息字串，缺省的用户输入信息)打开一个用户可以输入信息的对话框表8-4 窗口对象常用方法2窗口对象的常用方法
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《简笔画上色技巧》课件
- 中心投影和平行投影课件
- 《压力管理》课件
- 《市场营销情景模拟》课件
- 单位管理制度集粹选集职工管理篇
- 单位管理制度汇编大全职员管理篇
- 单位管理制度合并选集人力资源管理篇
- 三峡复习课件
- 《精油的起源基础》课件
- 单位管理制度分享合集【人事管理】
- 八年级上册道德与法治期末试卷3（开卷）
- 机械工程学科研究前沿
- 朝鲜户籍制度
- 汽车电器DFMEA-空调冷暖装置
- 河北省沧州市2023-2024学年高一上学期期末考试语文试题（含答案解析）
- 2024届四川省成都市中考数学第一轮复习之中考考点研究《一次函数与反比例函数综合问题》教学
- 2023AECOPD诊治中国专家共识
- （正式版）JBT 14682-2024 多关节机器人用伺服电动机技术规范
- 2024年职业卫生技术人员评价方向考试题库附答案
- 医院与药企合作开展临床研究
- -如何上好一堂课
评论
0/150
提交评论