实验五 JavaScript基础-BOM和DOM
实验五JavaScript基础-BOM和DOM
班级:11信管_2_班姓名:_________ 学号:_______完成日期:_________成绩:_________
一、实验目的
JavaScript是行为层标准之一,它给网页设计人员和开发人员提供一个交互效果制作的手段,其目的是对用户的操作做出响应以加强用户体验。本次实验的目的是:掌握JavaScript 编程的基本方法,掌握JavaScript操作BOM和DOM的方法。
二、实验内容
1.在网页上加入一个下拉列表(select),设计脚本使得选中某个选项时打开相对应的网页。
2.为了更好地显示页面的布局,通常设计几种定宽布局的网页以适应不同分辨率的屏幕,请设计一个脚本检测用户屏幕分辨率,然后打开相对应的页面。
3.制作含有4个选项的Tab选项卡面板。
4.设计一个注册表单,自行设计CSS样式,用JavaScript编写必填项目的输入验证脚本,要求用系统对话框进行提示。(思考一下,如果不用系统对话框,用动态修改DOM的方式显示提示信息,应该怎么做?)
实验要求:
(1)能自己编写关键代码。
(2)理解程序的设计思路。
(3)代码尽可能精简、符合规范。
(4)其他样式通过CSS加入网页中。
(5)在IE和Firefox浏览器进行测试,比较。
三、实验结果
将实验网页上传到服务器。
实验报告打印上交。截止日期2013-6-7
四、思考并回答问题
1 ECMAScript、JavaScript、JScript有什么不同?
JavaScript是由netscape工程师设计完成的一门脚本语言,用于web开发的前端脚本。
当时Netscape的JavaScript使其在与ie的浏览器大战中独占鳌头,而后ie 创建了jscript应对Netscape的JavaScript,而事实上jscript基本上抄袭的JavaScript,jscript与JavaScript有一些语法上的不一样,但二者均是同一类web开发技术
JavaScript核心都为ecmascript
2BOM和DOM的主要作用是什么?
在DOM 中,文档中的各个组件(component),可以通过object.attribute 这种形式来访问。一个DOM 会有一个根对象,这个对象通常就是document。
而BOM 除了可以访问文档中的组件之外,还可以访问浏览器的组件,比如问题描述中的navigator(导航条)、history(历史记录)等等。
4:JavaScriptjavaDOM
JavaScript制作页面特效课后练习 1.在某页面中有一个图片和五个超链接,如下图所示,单击不同的数字超链接显示不同的 图片: 图1 图片幻灯片显示效果 提示: (1)默认显示一个图片,五个超链接调用同一个传参函数,参数设置为显示图片的名称。 (2)使用“对象名.属性值”或setAttribute()的方式改变图片的名称。 2.做一个模仿删除用户的页面,功能如下: 默认情况下,在一个Table 里面放置若干用户信息,后面有“删除”链接:
图2 模仿删除用户的页面效果1 点击“删除”链接,弹出对话框,提示用户是否继续操作: 图3 模仿删除用户的页面效果2 用户点击确定后,要删除的一行,自动加上删除线,表示处于删除状态: 图4 模仿删除用户的页面效果3 提示: (1)使用confirm 弹出确认框,如果用户点击“确定”,则返回true,进行下一步操作; (2)定义一个类样式,用来标识删除状态,如果用户点击了“确定”按钮之后,该行所对 应的tr 标签,自动应用该类样式。 3.做一个横向导航菜单,并且每一项均包含一个二级的菜单,效果图如下:
图5 横向导航菜单 当鼠标不在菜单上时,二级菜单不显示,当鼠标移动到任一项上时,显示该项对应的二级菜 单。 提示: (1)使用对象的display 属性可以控制对象的显示与隐藏; (2)使用相对定位/绝对定位来控制二级菜单的显示位置; (3)使用鼠标的两个事件(onmouseove/onmouseout)来触发控制函数。 4.做一个横向不间断滚动的特效,效果图如下:
图6 图片横向滚动特效 要求:图片始终横向向左滚动,并且每一张图片首尾相连,不存在间断。 提示: (1)若要使图片不间断,则需要将图片列表重复一次,这样第一遍的末尾图片和第二遍的 开始图片就能相连了,即使用innerHTML 属性让图片内容翻倍;(2)使用setInterval()方法,可以控制一个函数每隔多少毫秒执行一次; (3)使用绝对定位与相对定位结合,可以使图片所在的层相对于父层的位置可控,方便随 着计时器的执行,left 的值递减;
《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 (课程英文名称) 课程编号:201509210011 学分:5学分 学时:64学时(其中:讲课学时:45 上机学时: 19 ) 先修课程:计算机基础、计算机网络、计算机应用 后续课程:UI设计、 JavaScript网页特效 适用专业:信息及其计算机相关专业 开课部门:计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课,涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习,学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向,熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事(2学时) [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准,明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作,能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面(4学时) [相关案例] 【案例1】简单的网页: 【案例2】新闻页面: 【案例3】图文混排: [知识点] HTML文档基本格式
网页设计与制作项目教程(HTML+CSS+JavaScript)(一般)
《网页设计与制作项目教程()(一般)》试卷 得分 一、单选题(每题2分,共计30分) 1.关于<>标记的描述,下列选项中正确的是()。() A、是表格中的单元格标记 B、可以单独使用 C、是表格中的行标记 D、没有属性 2.若超链接的属性,需要链接到页面中的锚点,以下书写正确的是()() A、 B、 C、 D、 3.中,通过链接伪类可以实现不同的链接状态。下列用来定义未访问时超链接状态的是()()A、 B、 C、 D、4.下列有关样式,说法正确的是()。() A、样式必须写在一对;标签内部 B、用于设置页面中的文本内容、图片的外形以及版面的布局等外观显示样式 C、只有外部的文件才是符合结构与表现分离的特点 D、目前流行的版本为3 5.下列样式代码中,可以实现相对定位模式的是()。() A、: ; B、: ; C、: ; D、: ; 6.关于样式代码“{:200; :15; :20;}”下列说法正确的是()。() A、的总宽度为200 B、的总宽度为270 C、的总宽度为235 D、以上说法均错误 7.关于行内式引入样式表,以下书写正确的是()() A、 :12; ;段落文本; B、 :12, ;段落文本; C、 :12; ;段落文本; D、 :12; ;段落文本; 8.使用标签指定式选择器,让段落应用名为的类,下列写法正确的是( )() 总分题号一二三四五题分 得分
A、 {;} B、{;} C、{;} D、{;} 9.下列选项中,调用名为"" 的函数正确的是()() A、 B、() C、() D、 10.认真阅读下面代码,并按要求进行作答。1=" a "2=" "312;根据上述代码,3的运算结果是()() A、 B、 C、 D、 11.关于有序列表的描述,下列说法正确的是()() A、有序列表没有排列顺序 B、有序列表按顺序排列,并不带有序号 C、有序列表按顺序排列并通过属性定义序号样式 D、有序列表不可以和无序列表嵌套使用 12.若要在网页中插入样式表,以下用法中正确的是()() A、; B、; C、; D、; 13.下列选项中,用于删除当前节点的子节点的方法是()() A、() B、() C、() D、() 14.以下属性中,不能增加盒子尺寸的属性是()。() A、 B、 C、 D、 15.网页程序设计中,运行下面的代码,则对话框中将显示()。< ""> 3 2 (2)(z);<>() A、2 B、2.5 C、5 D、16 得分 二、多选题(每题3分,共计15分)
web开发知识练习(HTML标签和JavaScript脚本)
网上客服培训考核 ---阶段二HTML标签和JavaScript脚本 试题类型:HTML标签和JavaScript脚本 考核类型:开卷
1. HTML(Hypertext Markup Language超文本标记语言)是一种用来制作超文本文 档的简单标记语言。利用各种标记(tags)来标识文档的结构以及标识超链(Hyperlink)的信息 2.HTML的标记总是封装在由 < 和 > 构成的一对尖括号之中。 除少数几个转义序列之外,HTML标记忽略大小写,即
、
、、
等众多的标记它们所定义的文本、图像等将会在浏览器的框内显示出来,标记中还可以有很多属性,以下是主要的几种设置背景颜色bgcolor =”颜色码”,设置文本颜色 text = “颜色码”,设置链接颜色 link = “颜色码”,设置已使用的链接的颜色 vlink = “颜色码”,设置正在被击中的链接的颜色 alink = “颜色码”。 7.
……,一共有六对标题的标记对 13.用来使文本以粗体效果的形式输出; 14.用来使文本以斜体效果的形式输出; 15.用来使文本以带下划线的形式输出。 16.则用来输出加重语气文本(通常也是斜体加黑体)。 17. 是一对很有用的标记对,它可以对输出文本的字体大小、颜色进 行随意地改变,这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。 size属性用来改变字体的大小,取值范围从1到7;而color属性则用来改变文本的颜色 18. 是单标记,它通过src属性指定当前位置要插入的图像文件,标记还有alt、关于JavaScript DOM的学习总结
关于JavaScript的学习总结 通过对《JavaScript DOM编程艺术》这本书的学习,总共学习到三大部分的内容:JavaScript1,JavaScript DOM和CSS样式表。CSS和JavaScript 都是通过控制页面标签的方式,来完善页面,使页面更美观,内容更丰富。 一、JavaScript部分 1.关于JavaScript js脚本语言 JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。 2.JS变量 2.1 JS的变量为易变量,没有类型的限制可以等于所有的类型。 2.2 JS变量的命名规则和java相同,且区分大小写。 JS的数据类型有7种:Number 数字类型、String 字符串类型、Boolean 布尔类型、Array 数组类型、Object 对象、Null 空对象、Undefined 未定义。 2.3 变量的声明,直接用var关键字声明即可:var a=90。也可以一次性声明多个变量:var b=1,c=2,d=3。如果一个变量没有声明就使
用,或是声明了没有设置值都是undefined。 3.数据类型的定义 数值类型: var age=33; 字符串类型: var mood=”happy” 布尔值类型: var add=true; 数组类型: var list= Array(2) list[0]=”jhon”; list[1]=33; 或者: var list=Array(“jhon”,33) (注:数组内可定义任意类型的数据,且数组下标从0 开始) NULL类型: var name=null ;或name=””; Undefined类型: var person; 对象类型: var jer= new person; 对象类型是一种非常重要的数据类型.对象是自我包含的数据集合,包含在对象里的数据可以通过两种方式--属性(property)和方法(method) 访问 例如: person.age Math.round() 4.JS操作符 算数操作符:加法(+),减法(-),乘法(*),除法(/) 如: var num=1+1; var num=num-1; var num=num*num; var num=num/2;
JAVASCRIPT
Javascript 114、alert怎样换行? \r\n 115、什么情况用HTML控件,什么情况用WEB控件,并比较两者差别 如果有数据提交到server端时用web control好。一般为了提高效率能用html control在客户端执行,就用html control。 116、JavaScript中的对象. JavaScript中的Object是一组数据的key-value的集合,有点类似于Java中的有这些数据都是Object里的property.通常情况下,JavaScript中建立一个对象用”new”加上constructor function来实现.如new Date(),new Object()等. var book=new Object(); https://www.360docs.net/doc/cf2504690.html,="JavaScript is Cool"; book.author="tom"; book.pages=514; 上面例子中的name和page就是名为book的对象中的property.我们可以用delete 来删除Object中的property:“delete https://www.360docs.net/doc/cf2504690.html,;”.除了Object,Date等buildin 的对象外,我们可以写自己的constructor function,然后使用new就可以建立自己的对象.如上面的book可以写成: function Book(name,author,page){ https://www.360docs.net/doc/cf2504690.html,=name; this.author=author; this.page=page; } var abook=new Book("JavaScript is Cool","tom",514); 117、function的用法 在JavaScript中,function是一种数据类型,所有的function都是从buildin的Function object衍生的对象.所以在JavaScript中function可以作为参数传递,可以作为Object的property,也可以当作函数返回值.function在JavaScript中有两种用法,一种是当作constructor,前面加上new keyword用来建立对象.一种是当作method,为其他对象调用. 注意function和method在中文里的意思相当,在有些语言里也可以通用.但是在JavaScript中,它们还是有所区别的.function本身是是一个对象,而当作为一个方法他属于一个对象时,就成为了一个这个对象的method,相当于一个对象种的属性.也就是说method是相对于一个对象而言的,function在某些情况下成为了一个对象的method. function Book(name,author,page){ https://www.360docs.net/doc/cf2504690.html,=name; this.author=author; this.page=page;
javascript_dom
什么是DOM? 通过JavaScript,您可以重构整个HTML文档。您可以添加、移除、改变或重排页面上的项目。 要改变页面的某个东西,JavaScript就需要对HTML文档中所有元素进行访问的入口。这个入口,连同对HTML元素进行添加、移动、改变或移除的方法和属性,都是通过文档对象模型来获得的(DOM)。 在1998年,W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。 所有的浏览器都执行了这个标准,因此,DOM的兼容性问题也几乎难觅踪影了。 DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。 DOM被分为不同的部分(核心、XML及HTML)和级别(DOM Level 1/2/3): Core DOM 定义了一套标准的针对任何结构化文档的对象 XML DOM 定义了一套标准的针对XML文档的对象 HTML DOM 定义了一套标准的针对HTML文档的对象。 HTML DOM 节点 HTML文档中的每个成分都是一个节点。 节点 根据DOM,HTML文档中的每个成分都是一个节点。 DOM是这样规定的: ?整个文档是一个文档节点 ?每个HTML标签是一个元素节点 ?包含在HTML元素中的文本是文本节点 ?每一个HTML属性是一个属性节点
注释属于注释节点 Node 层次 节点彼此都有等级关系。 HTML文档中的所有节点组成了一个文档树(或节点树)。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点,并由此继续伸出枝条,直到处于这棵树最低级别的所有文本节点为止。 文档树(节点数) 请看下面这个HTML文档:
DOM Lesson one
Hello world! 上面所有的节点彼此间都存在关系。 除文档节点之外的每个节点都有父节点。举例, 和的父节点是节点,文本节点"Hello world!"的父节点是节点。 大部分元素节点都有子节点。比方说,节点有一个子节点:和是同辈,因为它们的父节点均是节点。 节点也可以拥有后代,后代指某个节点的所有子节点,或者这些子节点的子节点,以此类推。比方说,所有的文本节点都是节点的后代,而第一个文本节点是节点的后代。 节点也可以拥有先辈。先辈是某个节点的父节点,或者父节点的父节点,以此类推。比方说,所有的文本节点都可把节点作为先辈节点。JavaScript对Table操作大全
js对Table操作大全