`
jickcai
  • 浏览: 246781 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 学习笔记三 浏览器中的JavaScript

阅读更多
第五章 浏览器中的JavaScript
BOM(浏览器对象模型)
window-------document--------anchors
     frames----------forms
     history---------images
     location--------links
     navigator-------location
     screen
key      Object----------Array
1.窗口操作 139
moveBy(dx,dy)----把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素。dx值为负数,
向左移动窗口,dy值为负数,向上移动窗口。
moveTo(x,y)-----移动浏览器窗口,使它的左上角位于用户屏幕的(x,y)处。可以使用负数,不过这样
会把部分窗口移出屏幕的可视区域。
resizeBy(dw,dh)--相对浏览器窗口的当前大小,把它的宽度调整dw个像素,高度调整dy个像素。dw为负数,
缩小窗口的宽度,dy为负数,缩小窗口的高度。
resizeTo(w,h)----把窗口宽度调整为w,高度调整为h.不能使用负数。

<a href="javascript:window.moveBy(10,20)">window.moveBy(10,20)</a><br/>
<a href="javascript:window.resizeTo(150,300)">window.resizeTo(150,300)</a><br/>
<a href="javascript:window.resizeBy(150,0)">window.resizeBy(150,0)</a><br/>
<a href="javascript:window.moveTo(0,0)">window.moveTo(0,0)</a><br/>
2.导航和打开新窗口
用Javascript可以导航到指定的URL,并用window.open()方法打开新窗口。该方法接受四个参数,即要载入新窗口的页面的
URL、新窗口的名字(为目标所用)、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数,因为
最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。
如果使用第三个参数,该方法就假设应该打开新窗口。特性字符串使用逗号分隔的设置列表,它定义新创建的窗口的某些方面。
-----------------------------------------------------------------------------------------------
设置 值 说明
-----------------------------------------------------------------------------------------------
left Number 说明新创建的窗口的左坐标。不能为负数
top Number 说明新创建的窗口的上坐标。不能为负数
height Number 设置新创建的窗口高度。该数字不能小于100
width Nmuber 设置新创建的窗口的宽度。该数字不能小于100
resizable yes,no 判断新窗口是否能通过拖动边线调整大小。默认值是no
scrollable yes,no 判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no
toolbar yes,no 判断是否显示工具栏。默认值是no
status yes,no 判断新窗口是否显示状态栏。默认值是no
location yes,no 判断新窗口是否显示(Web)地址栏。默认值是no
-----------------------------------------------------------------------------------------
var onewWin=window.open("http://www.wrox.com/","wroxwindow","height=150,widht=300,top=10,left=10,resizable=yes");
oNewWin.moveto(100,100);
oNewWin.resizeTo(200,200);
3.系统对话框
alert(),confirm()和prompt()
prompt()方法接受两个参数,即要显示给用户的文本和文本框中的默认文本。
alert("Hello world");
if(confirm("Are you sure?")){
alert("I'm so glad you're sure!");
}else{
alert("I'm sorry to hrar you're not sure.");
}

var sResult=prompt("What is your name?","");
if(sResult!=null){
alert("Welcome,"+sResult);
}
4.状态栏
状态栏是底部边界内的区域,用于向用户显示信息。
一般说来,状态栏告诉了用户何时载入页面,何时完成载入页面。但可以用window对象的两个属性设置它的值,即status和
defaultStatus属性。如你所料,status可以使状态栏的文本暂时改变,而defaultStatus则可以再用户离开页面前一直改变该文本。
window.defaultStatus="You are surfring www.wrox.com";
<a href="javascript:goSomewhere(1,2,3,4)"  onmouseover="window.status='Information on Wrox books'"></a>
5.时间间隔和暂停
setTimeout("alert('Hello world')",5000);
setTimeout(function(){alert("Hello world!");},3000);
当然,还可以引用以前定义的函数:
function sayHelloWorld(){
alert("Hello world!");
}

setTimeout(sayHelloWorld,1000);
调用setTimeout()时,它创建一个数字暂停ID,与操作系统中的进程ID相似。暂停ID本质上是要延迟的进程的ID,
在调用setTimeout()后,就不应该再执行它的代码。
var iTimeoutId=setTimeout("alert('Hello world')",1000);
clearTimeout(iTimeoutId);

setInterval("alert('Hello world')",2000);
时间间隔用法的常见示例:
var iNum=0;
var iMax=100;
var iIntervalId=null;
function incNum(){
iNum++;
if(iNum==iMax){
clearInterval(iIntervalId);
alert(iNum);
}
}

iIntervalId=setInterval(incNum,500);
setTimeout示例:
var iNum=0;
var iMax=10;

function incNum(){
iNum++;
if(iNum!=iMax){
setTimeout(incNum,500);
}
}

setTimeout(incNum,500);
6.历史
go()方法只有一个参数,即前进或后退的页面数。如果实负数,就在浏览器历史中后退。如果是正数,就前进。
window.history.go(-1);
要前进一页,只需要使用正数1:
history.go(1);
另外,用back()和forward()方法可以实现同样的操作:
history.back();//go back one
history.forward();//go forward one
虽然不能使用浏览器历史中的URL,但可以用length属性查看历史中的页面数:
alert("There are currently "+history.length+" pages in histroy.");
document对象
document对象实际上是window对象的属性。
这个对象的独特之处是它是唯一一个既属于BOM又属于DOM的对象。从BOM角度看,document对象由一系列集合构成,
这些集合可以访问文档的各个部分,并提供页面自身的信息。
下面列出了BOM的document对象的一些通用属性:
---------------------------------------------------------------------
属性 说明
---------------------------------------------------------------------
alinkColor 激活的链接的颜色,如<body alink="color">定义的
bgColor 页面的背景颜色,如<body bgcolor="color">定义的
fgColor 页面的文本颜色,如<body text="color">定义的
lastModified 最后修改页面的日期,是字符串
linkColor 链接的颜色,如<body link="color">定义的
referrer 浏览器历史中后退一个位置的URL
title <title/>标签中显示的文本
URL 当前载入的页面的URL
vlinkColor 访问过的链接的颜色,如<body vlink="color">定义的
----------------------------------------------------------------------------
注意:反对使用这些属性,因为它们应用了<body/>标签中的旧HTML特性。应该用样式表脚本代替它们。

top.document.title="New page title";
document.URL="http://www.wrox.com/";
doucment对象也有许多集合,提供对载入的页面的各个部分的访问。
----------------------------------------------------------------
集合 说明
----------------------------------------------------------------
anchors 页面中所有锚的集合(由<a name="anchorname"></a>表示)
applets 页面中所有applet的集合
embeds 页面中所有嵌入式对象的集合(由<embed/>标签表示)
forms 页面中所有表单的集合
images 页面中所有图像的集合
links 页面中所有链接的集合(由<a href="somwhere.html"></a>表示)
------------------------------------------------------------------
document.write()
var oNewWin=window.open("about:blank","newwindow","height=150,width=300,top=10,left=10,resizable=yes");
oNewWin.document.open();
oNewWin.document.write("<html><head><title>new Window</title></head>");
oNewWin.document.write("<body>This is a new window!</body></html>");
oNewWin.document.close();
location对象
BOM中最有用的对象之一是location对象,它是window对象和document对象的属性(对此没什么标准,导致了一些混乱).
location对象表示载入窗口的URL,此外,它还可以解析URL.
hash----如果URL包含#,改方法将返回该符号之后的内容(例如,http://www.some_where.com/index#selection1的hash等于"#selection1").
host----服务器的名字(如www.wrox.com).
hostname--通常等于host,有时会省略前面的www.
href----当前载入的页面的完整的URL.
pathname--URL中主机名后的部分。例如,http://www.somewhere.com/pictures/index.htm的pathname是"/pictures/index.htm";
prot----URL中声明的请求端口。
protocol--URL中使用的协议,即双斜杠(//)之前的部分。例如,http://www.wrox.com中protocol属性等于http:
search---执行GET请求的URL中的问号(?)后的部分,又称为查询字符串。例如,http://www.somewhere.com/search.html?term=javascript
中的search属性等于?term=javascript
location.href是最常用的属性,用于获取或设置窗口的URl.
location.href="http://www.wrox.com/";
采用这种方式导航,新地址将被加到浏览器的历史栈中,放在前一个页面后,意味着Back按钮会导航到调用的该属性的页面。
assign()方法实现同样的操作:
location.assign("http://www.wrox.com");
如果不想让包含脚本的页面能从浏览器历史中访问,可使用replace()方法。该方法所作的操作与assign()方法一样,但它多了一步操作,
即从浏览器历史中删除包含脚本的页面,这样,就不能通过浏览器的Back和Forward按钮访问它了。
location.replace("http://www.wrox.com/");

location对象还有个reload()方法,可重新载入当前页面。reload()方法有两种模式,即从浏览器缓存中重复,或从服务器端重载。
究竟采用哪种模式由该方法的参数值决定,如果是false,则从缓存中载入,如果是true,则从服务器端载入(如果省略参数,默认值为false)。
location.reload(true);
从缓存重载当前页面:
location.reload(false);
location.reload();
注意: 本节采用示例介绍了location对象。记住,location对象是window对象和document对象的属性。所以window.location和
document.location互相等价,可以交换使用。
navigator对象
---------------------------------------------------------------------------------------------------------------------
属性/方法 说明 IE Moz Op Saf
---------------------------------------------------------------------------------------------------------------------
appCodeName 浏览器代码名的字符串表示(如:"Mozilla") X X X X
appName 官方浏览器名的字符串表示 X X X X
appMinorVersion 格外版本信息的字符串表示 X - - -
appVersion 浏览器版本信息的字符串表示 X X X X
----------------------------------------------------------------------------------------------------------------------

screen对象
availHeight---------窗口可以使用的屏幕的高度(以像素计),其中包括操作系统元素(如Window工具栏)需要的空间
availWidth---------窗口可以使用的屏幕的宽度(以像素计).
colorDepth---------用户表示颜色的位数。大多数操作系统采用32位。
height-------------屏幕的高度,以像素计。
width--------------屏幕的宽度,以像素计。

window.moveTo(0,0);
window.resizeTo(screen.availWidth,screen.availHeight);
分享到:
评论

相关推荐

    个人Javascript学习笔记 精华版

    本资源为个人Javascript学习笔记的精华版,涵盖了Javascript的基础知识、事件处理、对象和系统函数、浏览器对象等方面的内容。下面是对每个知识点的详细说明: 1. 什么是JavaScript? JavaScript是一种脚本语言,...

    JavaScript学习笔记,javascript基础知识,基础语法整理.pdf

    * JavaScript是客户端脚本语言,运行在用户的浏览器中 * JavaScript可以实现网页的交互功能 二、 JavaScript 中的函数 * 函数是JavaScript中的一种基本结构单元 * 函数可以封装一组语句,实现功能的复用 * 函数...

    JavaScript-学习笔记.pdf

    以上是JavaScript学习笔记中提到的一些核心知识点,通过对这些知识点的理解和熟练应用,可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中,结合具体的项目需求,这些知识会得到更深入的拓展和应用...

    javascript入门学习笔记

    这份"javascript入门学习笔记"旨在为初学者提供一个全面且深入的JavaScript学习路径。 一、基础语法 JavaScript的基础包括变量、数据类型、操作符、流程控制等。变量用于存储数据,数据类型分为基本类型(如字符串...

    javascript学习笔记

    以上是对给定文件中JavaScript学习笔记的部分内容进行的详细解读,涵盖了JavaScript的基础知识、语法、数据类型、函数、对象、数组、DOM编程、AJAX以及JSON和jQuery的简介,旨在为初学者提供全面的入门指南。

    javascript学习笔记讲解版参考.pdf

    JavaScript学习笔记讲解版参考.pdf是一份详尽的教程,涵盖了从基础到进阶的JavaScript知识。这份笔记首先从CSS样式表开始,引导读者理解网页样式的设置与应用。 1. CSS(Cascading Style Sheets)样式表是用于控制...

    javascript学习笔记整理知识点整理

    这份“javascript学习笔记整理知识点整理”是针对初学者的一份宝贵资料,涵盖了JavaScript的基础知识,旨在帮助新手快速入门并掌握这门语言的核心概念。 一、变量与数据类型 在JavaScript中,变量用于存储数据。...

    javascript学习笔记.docx

    这篇学习笔记主要涵盖了JavaScript的基础语法和客户端JavaScript的相关知识。 1. **JavaScript基本语法**: - **变量声明**:未声明的变量尝试读取时会产生错误,而写入未声明的变量会创建一个全局变量。 - **...

    JavaScript学习笔记.pdf

    JavaScript学习笔记是一本关于JavaScript编程语言的教材,该教材通过丰富的实例,系统地介绍了JavaScript的基础知识和实际应用技巧,帮助读者一步步掌握客户端编程技术。本书共分为九章,每一章都有其特定的主题,...

    javaScript学习笔记总结.docx

    JavaScript的书写位置有三种: 1. 内嵌式:直接将JavaScript代码写在HTML文件中。 2. 外链式:将JavaScript代码放在独立的.js文件中,通过`&lt;script&gt;`标签引入。 3. 行内式:将JavaScript代码作为HTML标签的属性,如`...

    javascript学习笔记1

    ### JavaScript 学习笔记1:数组、DOM与BOM简要总结 #### 数组方法概述 在JavaScript中,数组是一种非常重要的数据结构,用于存储多个值。数组对象提供了多种方法来帮助我们操作数组中的元素。 - **pop()**:从...

    javaScript学习笔记.rar

    这个“javaScript学习笔记.rar”压缩包显然包含了作者在学习JavaScript过程中的心得和记录,对于初学者或者想要深入理解JavaScript的人来说,是一份宝贵的资源。 JavaScript与Java虽然名字相似,但两者实际上是不同...

    JavaScript学习笔记讲解

    这只是JavaScript学习笔记的一小部分,JavaScript还有更多高级特性和概念,如对象、数组、函数、类、模块、闭包等,以及DOM操作、事件处理、Ajax异步请求等内容,需要进一步深入学习和实践才能掌握。

    Javascript学习笔记(传智播客视频学习笔记+代码)

    "Javascript学习笔记(传智播客视频学习笔记+代码)"是一份全面介绍JavaScript基础知识的学习资源,适用于初学者。这份笔记结合了传智播客的web前端培训视频内容,提供了丰富的理论讲解和实践代码,帮助读者从零开始...

Global site tag (gtag.js) - Google Analytics