本章目标
1、了解JS中的常用事件
2、使用浏览器对象的属性和方法
事件：网页上发生的操作。
event对象
提供了有中事件的信息：事件类型、事件发生时光标的位置。
常用的事件：
onClick
onChange
onFocus
onBlur
onMouseOver
onMouseOut
onLoad
onSubmit
onMouseDown
onMouseUp
onResize
通用的浏览器对象
1.window对象：表示浏览器的窗口。
1)document：表示浏览器窗口中的HTML文档。
2)event：表示事件的状态。
3)frames：
4)history：包含有关客户访问过的URL的信息。
5)location：饮食有关当前URL的信息。
6)navigator：将指定的URL加载到当前窗口。
7)screen：包含有关客户有屏幕和显示性能的信息。
属性：
document
event
history
loation
name
screen
status
方法
alert()
blur()
close()
focus()
navigate(“URL”)
open(“URL”,”windowName”)
2.Document对象
1)属性：
i.aLinkColor
ii.bgColor
iii.body
iv.fgColor
v.linkColor
vi.location
vii.title
viii.URL
ix.vlinkColor
https://www.doczj.com/doc/c26707795.html,stModified
2)方法
i.clear：清除当前文档
ii.close：关闭输出流并强制显示发送的数据。
iii.open：打开一个文档以收集write()方法或writeln()方法的输出。
iv.write：向指定的窗口中的文档写入一个或多个HTML语句。
v.writeln:
3.History对象
1)back：加载History列表中的上一个URL。
2)forward：加载History列表中的下一个URL。
3)go：加载History列表中的一个URL。
4.Location对象
1)属性
i.hash：设置或检索井号（#）后的href属性的锚点。
ii.host：设置或检索URL的主机名和端口号。
iii.hostname:
iv.port
v.pathname
vi.href
vii.protocol
2)方法
i.assign(“URL”)：加载新的HTML文档。
ii.reload()：重新加载当前页。
iii.replace(“URL”)：通过加载指定URL处的文档来替换当前文档。
5.总结
1)事件是网页上发生的操作。
2)每个事件都有与之相关的事件对象。
3)事件有一个生命周期，开始于触发事件的操作和条件，终止于事件处理程序的最终
响应。
4)浏览器是用来显示HTML文档的应用程序。
5)浏览器还公开一些可在脚本中访问和使用的对象。
6)window对象用来表示浏览的窗口。
7)模型中所有其他对象都继承自window对象，而且是通过window对象访问的。DOM：文档对象模型。
1、分析下段代码输出结果是（） var arr = [2,3,4,5,6]; var sum =0; for(var i=1;i < ;i++) { sum +=arr[i] } (sum); A．20 B．18 C．14 D．12 2、以下关于 Array 数组对象的说法不正确的是（） A．对数组里数据的排序可以用 sort 函数，如果排序效果非预期，可以给 sort 函数加一个排序函数的参数 B．reverse 用于对数组数据的倒序排列 C．向数组的最后位置加一个新元素，可以用 pop 方法 D．unshift 方法用于向数组删除第一个元素 3、以下代码运行的结果是输出( ) var a = b = 10; (function(){ var a=b=20 })(); (b); A．10 B．20 C．报错 D．undefined
4、以下代码运行后的结果是输出( ) var a=[1, 2, 3]; ()); A．123 B．1,2,3 C．1 2 3 D．[1,2,3] 5、在 JS 中，’1555’+3 的运行结果是( ) A．1558 B．1552 C．15553 D．1553 6、以下代码运行后弹出的结果是( ) var a = 888; ++a; alert(a++); A．888 B．889 C．890 D．891 7、关于变量的命名规则，下列说法正确的是（） A．首字符必须是大写或小写的字母，下划线（_）或美元符（$）B．除首字母的字符可以是字母，数字，下划线或美元符 C．变量名称不能是保留字 D．长度是任意的 E．区分大小写
8、下列的哪一个表达式将返回值为假（） A．!(3<=1) B．(4>=4)&&(5<=2) C．(“a”==“a”)&&(“c”!=“d”) D．(2<3)||(3<2) 9、下面代码，k的运行结果是（） var i = 0,j = 0; for(;i<10,j<6;i++,j++){ k = i + j; } A．16 B．10 C．6 D．12 10、var x = 1; function fn(n){n = n+1}; y = fn(x); y 的值为（）A．2 B．1 C．3 D．undefined 11、[1,2,3,4].join("0").split("") 的执行结果是（） A．"1,2,3,4" B．[1,2,3,4] C．[“1”,“0”,“2”,“0”,“3”,“0”,“4”] D．"1,0,2,0,3,0,4"
-------------------------------------- 装-------------------------------------- 订------------------------------ 线---------------------------------------- 选择题（每题2分，共计100分） 1.当表单各项添写完毕，鼠标单击提交按钮时可以触发（）事 件。 A. onenter B. onsubmit C. onmouseDrag D. onmouseOver 2.分析下面的JavaScript代码段，输出结果是（）。 var a=15.59; document.write(Math.round(a)); A. 15 B. 16 C. 15.5 D. 15.4 3.使用JavaScript实现下面的功能：在一个文本框中内容发生 改变后，单击页面的其他部分将弹出一个消息框显示文本框 中的内容。下面语句正确的是（）。 A. B. C. D. 4.假定今天是2006年4月1日星期六，请问下列JavaScript代 码在页面上的输出结果是（）。 var time=new Date(); document.write(time.getDate()); A. 2006 B. 4 C. 1 D. 6 5.在HTML中，表单中的input元素的（）属性用于指定表单元 素的名称。 A. value B. name C. type D. caption 6.下面描述正确的是（）。 A. switch语句用于重复执行一个语句块的操作 B. switch语句根据表达式的值执行若干语句块之一，如果没 有匹配项，则执行默认语句块中的语句 C. switch语句表达式中的值不能与后面case语句中的常量 相匹配时将出现运行错误 D. switch语句又叫循环语句 7.分析如下JavaScript代码，b的值为（）。 var a=1.5 ,b;
零基础js入门试题
————————————————————————————————作者：————————————————————————————————日期：
1,什么是Javascript? 答：Javascipt是一种脚本语言，由web浏览器进行解释和执行。 2,JavaScript是由那几个部分组成？ 答：主要分为以下三种： ECMAScript : 核心 DOM : 文档对象模型 BOM : 浏览器对象模型 3,请写出两种将Javascript的应用到网页的方式 答： 方法一：将javascript代码插入html文档
部分的 方法二：将javascript代码存放在一个独立的文件。用.js作为文件的扩展名，再利用 4,如何定义一个变量？变量的命名规则有哪些？ 答：变量由var 运算符加变量名定义,如： var num = 24; var name= ‘金团网’; 命名规则第一个字符必须是字母、下划线(_)、或美元符号($); 变量名中不能包含空格或标点符号（$ 除外); 变量名区分大小写; 不能使用保留字; 为了让变量名有更好的可读性，可以在变量名中适当的插入下划线分隔，如：var my_name = ‘金团网’; 5,Javascript的常用的几种数据类型有哪些？1、选择题：9题 1、要求用JavaScript实现下面的功能：在一个文本框中内容发生改变后，单击页面的其他部分将弹出一个消息框显示文本框中的内容，下面语句正确的是（） A． B． C． D． 正确答案是: B 2、在HTML页面中，下面关于Window对象的说法不正确的是（）。 A．Window对象表示浏览器的窗口，可用于检索有关窗口状态的信息 B．Window对象是浏览器所有内容的主容器 C．如果文档定义了多个框架，浏览器只为原始文档创建一个Window对象，无须为每个框架创建Window对象 D．浏览器打开HTML文档时，通常会创建一个Window对象 正确答案是: C 3、window的哪个方法可以显示输入对话框？（） A．confirm() B．alert() C．prompt() D．open() 正确答案是: C 4、open()方法的哪个外观参数可以设置是否显示滚动条？（） A．location B．menubar C．scrollbars D．toolbar 正确答案是: C 5、在Javascript语言中，当元素失去了焦点时激发的事件是( ) A.Focus B.UnLoad C.MouseOver D.Blur 正确答案是: D 6、DHTML不具备的优点是（） A.动态样式 B.动态语法 C.动态内容 D.动态定位
几个常用的 JavaScript 框架比较 JavaScript 是面向对象的脚本语言，长期以来用作 Web 浏览器应用程序的客户端脚本接口。JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象，并提供了一个能够动态操作这些对象的平台。在最初引入 JavaScript 时，通常只用于提供 Web 页面上的一些不重要的特性，如时钟功能和浏览器状态栏中的滚动文本等。另一个常见的特性是“rollover link”，就是当用户将鼠标移到图片或文本链接上时，图片或文本链接的颜色会改变。然而，近年来，随着 Asynchronous JavaScript and XML (Ajax) 概念将基于 Web 的编程的交互性提升到一个新高度，JavaScript 也变得越来越重要。在出现 Ajax 之前，所有服务器端处理或数据库访问都需要“刷新” 整个页面或通过浏览器呈现一个新页面。这不仅减慢了速度并使用户感到沮丧，而且还浪费带宽和资源。 Ajax 表示 Asynchronous JavaScript and XML，但是将其称为 XML 已不再合适，因为 Ajax 请求可以返回多种格式的响应，而不限于 XML，例如 JSON (JavaScript Object Notation)。Ajax 的工作方式是允许 JavaScript 异步提交 HTTP 请求到 Web 服务器，并且在不刷新或呈现新页面的情况下呈现响应。相反，开发人员通常使用 DOM (Document Object Model) 操作来修改部分 Web 页面，显示其变化或由 HTTP 响应返回的数据。 JavaScript 本身就是一种功能强大的语言，您不需要额外的框架就可创建富互联网应用程序（RIA）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现跨浏览器兼容简直是个噩梦。 J avaScript 框架或库是一组能轻松生成跨浏览器兼容的 JavaScript 代码的工具和函数。每一个库都在众多流行的 Web 浏览器的现代版本上进行了可靠的测试，因此，您可以放心地使用这些框架，您的基于 JavaScript 的 RIA 将会在不同浏览器和平台上以类似的方式工作。 除了解决跨浏览器问题，使用 JavaScript 框架可以更容易地编写检索、遍历、操作 DOM 元素的代码。它们不仅提供获取 DOM 元素引用的快捷函数，而且还允许 DOM 遍历函数以菊花链 （daisy-chaining）方式查找任意深度的父元素、子元素、兄弟元素。最后，框架还提供一系列函数来更轻松地操作这些对象，可以改变、添加或删除内容本身；或者使用 CSS 样式类来改变元素的外观。 框架的另一重要特性是其改进的事件处理支持。由于不同浏览器的实现方式各不相同，跨浏览器事件处理将会非常艰难。因此 JavaScript 框架通常封装浏览器事件，并提供一组有用的跨浏览器兼容的函数来进行处理。有些框架还会提供一组标准键盘代码来表示基于键盘的事件（如按下 Escape 键、Return 键、光标键，等等）。 所有这些特性都非常有用，但 JavaScript 框架有一个特性对于它最近的流行非常重要—支持Ajax。与 JavaScript 的其他许多方面一样，每个 Web 浏览器往往以不同方式支持 Ajax，这使得以一种在所有 Web 浏览器中都受支持的方式处理 Ajax 变得十分复杂。几乎所有 JavaScript 框架都包含某种形式的 Ajax 库支持，通常提供 Ajax 请求和响应对象，以及用于评价响应、更新 DOM 元素、查询特定请求的帮助函数（helper）。 现在，让我们看一看大多数 JavaScript 框架都具备的有用特性。包括： ?选择器（Selector） ?DOM 遍历 ?DOM 操作 ?实用（Utility）函数 ?事件处理 ?Ajax 在解释每个特性时，我将会用以下的一个或几个 JavaScript 框架举例说明：Prototype、jQuery、YUI、ExtJS 和 MooTools。尽管每个框架的实现和语法都各不相同，但概念都是相同的。每个框架都有一个详细的 API 参考，可帮助您理解如何使用该特定库中的特性。 选择器
（1）、JavaScript中声明一个变量所用的关键字是var。（2）看以下JavaScript程序 var a,b,c; a=“2”； b=2； c=a+b; 运行以上程序后，变量c的值为“22”。 （3）看以下JavaScript程序* var x,y; x=10； y=x++； 运行以上程序后，变量y的值为10 。 （4）看以下JavaScript程序** var i,j; i=0； j=i&&(++i)； 运行以上程序后，变量j的值为 0 。 （5）看以下JavaScript程序* var i; i=8； do{ i++; }while(i>100); 运行以上程序后，变量i的值为9 。 （6）看以下JavaScript程序* for(var i=1;i<=10;i++){
if(i= =5) continue; if(i= =8) break; alert(i); } 运行以上程序后，弹出的对话框依次输出的值为1,2,3,4,6,7。 （7）看以下JavaScript程序 var str1,str2,str3,str4; str1=""; str2="8"; str3=str1+str2; alert(str3); str4=Number(str1)+Number(str2); alert(str4); 运行以上程序后，弹出的对话框依次输出的值为 , 。（8）定义JavaScript函数所用的关键字是function。 （1）alert（）；的作用是：（ A ） A、弹出对话框，该对话框的内容是该方法的参数内容。 B、弹出确认对话框，该对话框的要用户选择“确认”或“取消”。 C、弹出输入对话框，该对话框的可让用户输入内容。 D、弹出新窗口。 （2）看以下JavaScript程序 var num; num=5+true; 问：执行以上程序后，num的值为（D）
javascript中top、clientTop、scrollTop、offsetTop 的讲解 scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的高度offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 以上主要指IE之中，FireFox差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border
H5-JS基础试题 姓名：班级：成绩： 一、单选题（每小题1分，20小题，共60分） 1、null，undefined，”string"，20，true和false的共同点是（） A、都是对象 B、都有相同的实例属性 C、都是原始值 D、都是函数 2、下列哪个正确的引入了myScript.js（） A、 新代码(可在IE和MF中运行)： ... 此外，如果新代码中第一行不改，与老代码一样的话(即 gotoSubmit 调用没有给参数)，则仍然只能在IE中运行，但不会出错。所以，这种方案 tpl 部分仍与老代码兼容。 4. HTML 对象的 id 作为对象名的问题 (1)现有问题 在 IE 中，HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用。在 MF 中不能。