JavaScript教程系列之----基础 VS BOM_vs bom是什么意思-CSDN博客

本文链接：https://blog.csdn.net/ejunnet/article/details/1525945

JavaScript 常被人们认为是编程语言中无足轻重的一员。这种观点的形成可以“归功”于其开发工具、复杂且不一致的面向 HTML 页面的文档对象模型以及不一致的浏览器实现。但 JavaScript 绝对不仅仅是一个玩具这么简单。几乎每个 Web 开发人员都曾有过诅咒 JavaScript 的经历。这个备受争议的语言受累于其复杂的称为文档对象模型 (DOM)的编程模型、糟糕的实现和调试工具以及不一致的浏览器实现。直到最近，很多开发人员还认为 Javascript 从最好的方面说是无可避免之灾祸，从最坏的方面说不过是一种玩具罢了。

然而 JavaScript 现在开始日益重要起来，而且成为了广泛应用于 Web 开发的脚本语言。JavaScript 的复苏使一些业界领袖人物也不得不开始重新审视这种编程语言。诸如 Ajax (Asynchronous JavaScript + XML) 这样的编程技术让 Web 网页更加迷人。而完整的 Web 开发框架，比如 Apache Cocoon，则让 JavaScript 的应用越来越多，使其不只限于是一种用于制作 Web 页面的简单脚本。JavaScript 的一种称为 ActionScript 的派生物也推动了 Macromedia 的 Flash 客户端框架的发展。运行在 JVM 上的实现 Rhino 让 JavaScript 成为了 Java™ 开发人员所首选的一类脚本语言。

Ajax 方面的专家Stuart Halloway说过：“到 2011 年，JavaScript 将被公认为是一种拥有开发现代应用程序所需的一整套新特性的语言” 。他继而介绍说 JavaScript 程序要比类似的 Java 程序紧密十倍，并继续展示了使其之所以如此的一些语言特性。

JavaScript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。

JavaScript历史

1992 Nombas ScriptEase

1995 Netscape javascript

Microsoft

Jscript

1997年 JavaScript1.1提交给欧洲计算机制造商协会（ECMA）。该协会制定了ECMA-262标准。并定义了叫做ECMAScript的全新脚本语言。

ECMAScript并不与任何浏览器相绑定，它可以为不同种类的宿主环境提供核心的脚本编程能国。ECMAScript仅仅是一个描述(语法、类型、语句、关键字、保留字、运算符、对象)，定义了脚本语言的所有属性、方法和对象。其它语言可以实现ECMAScript。JavaScript就实现了ECMAScript的相关接口。

ECMAScript

JavaScript

ActionScript

ScriptEase

JavaScript实现

JavaScript除实现了其核心内容ECMAScript之外，还实现了文档对象模型（DOM），浏览器对象模型（BOM）。

DOM是HTML和XML的应用程序接口（API）。DOM把整个页面规划成由节点层级构成的文档。HTML或XML页面的每个部分都是一个节点的衍生物。如下所示。

<html>

<head>

</head>

<body>

<p>这是一个段落标记。</p>

</body>

</html>

上面的代码可以用DOM绘制成一个节点层次图：

html

head

body

title

测试页

这是一个段落标记。

DOM通过创建树来表示文档，从而使开发者对文档的内容和结构具有空前的控制力。用DOM API可以轻松的删除、添加、修改每一个节点。

BOM可以对浏览器窗口进行访问操作。使用BOM，开发者可以移动窗口、改变状态栏中的的文本以及其它与页面内容不直接相关的动作。（BOM仅是JavaScript实现的一部分，没有任何相关的标准，各种浏览器的实现方法也有很大差异）

ECMAScript基础

1、语法

区分大小写

变量是弱类型的（用var定义变量，可以初始化为任意类型的值）

每行结尾的分号可有可无

注释与java完全相同

括号“{}”表明代码块

2、变量

用var关键字定义变量，无需明确类型声明。变量名需要遵守两条简单的规则：

（1）第一个字符必须是字母、下划线（_）或美元符号。（2）余下的的字符可以是下划线、美元符号或任何字母或数字。

以下定义变量均合法：

Var test1;

Var test1,test2

Var test1=”hello”,test2=3224;test3=true;

Var _test,$test;

ECMA-262中定义了以下关键字和保留字，不能用作变量名或函数名。

关键字：

break else new var case finally return void catch for switch while continue function this with default if throw delete in try do instanceof typeof

保留字：

abstract enum int short Boolean export interface static byte extends long super char final native synchronized class float package throws const goto private transient debugger implements protected volatile double import public

基本数据类型

Undefined : 当声明变量末初始化时，该变量默认为undefined类型。

Null : 等同于undefined 表示尚未存在的对象。

Boolean : true and false.

Number : 既可以表示32位的整数，也可表示64位的浮点数。

（注：NaN表示非数，常用方法isNaN()来判断是否为数）

String : 字符（字符串）包括java中的转义字符。

注: javascript中不区别单引号和双引号。“hello”等同于‘hello’

数据类型转换：

转为String 可用toString()方法。或+””;

转为数字：

parseInt();转为整型。

parseFloat();转为浮点型。

引用类型：

Object类: var ob=new Object();

Boolean类: Boolean bl=new Boolean(true);

Number类: Number nb=new Number(342.23);

String类: String st=new String(“sdfasfasdfas”);

运算符

基本上与java相同，以下为几个特殊的运算符：

Typeof() 判断数据类型 instanceof与typeof相似.

条件运算符：

Variable = Boolean_expression ? true_value : false_value;

语句：

与java基本相同.需要注意以下几点：

Do-while循环语句：

do{

Do something;

}while (expression)

例如：

var i=0;

do{

i+=2;

}while(i<10);

函数（方法）：

与java的区别:

1、无需声明参数类型。

2、无需声明返回值类型。

如：

function sayHello(name){

alert(name+”你好！”);

}

浏览器中的javascript

<html>

<head>

< !--

Do somthing ;

//-- >

</script>

</script>

</head>

<body>

</body>

</html>

对不支持javascript的浏览器可用<noscript/>标签

BOM基础

BOM可以对浏览器窗口进行访问操作。使用BOM，开发者可以移动窗口、改变状态栏中的的文本以及其它与页面内容不直接相关的动作。（BOM仅是JavaScript实现的一部分，没有任何相关的标准，各种浏览器的实现方法也有很大差异）.

BOM由一系列相关的对象构成。如下图所示。

window对象

window对象表示整个浏览器窗口，但不必表示其中包含的内容。此外，window还可用于移动或调整它表示的浏览器的大小，或者对它产生其他影响。

Window对象常用方法：

1窗口操作。

moveBy(dx,dy)——把浏览器窗口相对当前位置水平移动dx个像素，垂直移动dy个像素。dx值为负数，向左移动窗口，dy值为负数，向上移动窗口。

moveTo(x,y)——移动浏览器窗口，使它的左上角位于用户屏幕的(x,y)处。可以使用负数，不过这样会把部分窗口移出屏幕的可视区域。

resizeBy(dw,dh)——相对于浏览器窗口的当前大小，把它口的宽度调整dw个像素，高度调整dy个像素。dw为负数，把缩小窗口的宽度，dy为负数，缩小窗口的高度。

resizeTo(w,h)——把窗口的宽度调整为w，高度调整为h。不能使用负数。

IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小（显示HTML页的区域），但它们不是标准属性。

Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。

Opera和Safari提供与Mozilla相同的工具。

2导航和打开新窗口

用JavaScript可以导航到指定的URL，并用window.open()方法打开新窗口。该方法接受四个参数，即要载入新窗口的页面的URL、新窗口的名字（为目标所用）（_self、_parent、_top、_blank）、特性字符串和说明是否用新载入的页面替换当前载入的页面的Boolean值。一般只用前三个参数，因为最后一个参数只有在调用window.open()方法却不打开新窗口时才有效。

例如，要把页面载入名为“topFrame”的框架，可以使用下面的代码：

window.open(“http://www.wrox.com/”, opFrame);

如果使用第三个参数，该方法就假设应该打开新窗口。特性字符串是用逗号分隔的设置列表，它定义新创建的窗口的某些方面。下表显示了各种设置：

设置值说明

Left Number 说明新创建的窗口的左坐标。不能为负数*

Top Number 说明新创建的窗口的上坐标。不能为负数*

Height Number 设置新创建的窗口的高度。该数字不能小于100*

Width Number 设置新创建的窗口的宽度。该数字不能小于100*

Resizable yes,no 判断新窗口是否能通过拖动边线调整大小。默认值是no

Scrollable yes,no判断新窗口的视口容不下要显示的内容时是否允许滚动。默认值是no

Toolbar yes,no 判断新窗口是否显示工具栏。默认值是no

Status yes,no 判断新窗口是否显示状态栏。默认值是no

Location yes,no 判断新窗口是否显示（Web）地址栏。默认值是no

如：

window.open(“http://www.ejunnet.com” , “myframe”,”height=150,width=300,top=10,left=10,resizable=yes”);

window.open()方法将返回window对象作为它的函数值，该window对象就是新创建的窗口（如果给定的名字是已有的框架名，则为框架）。用这个对象，可以操作新创建的窗口：

var oNewWin=

window.open(“http://www.ejunnet.com” , “myframe”,”height=150,width=300,top=10,left=10,resizable=yes”);

oNewWin.moveTo(100,100);

oNewWin.close();

3系统对话框(三种)

Alert(“safsa”); confirm(“sdfasf”); prompt(“asfsd”,”sdfsdfa”);

4状态栏

Window.status window.defaultStatus

5. 时间间隔和暂停

setTimeout() clearTimeout() setInterval() clearInterval()

例：

Var iNum=0;

Var iMax=100;

Var iIntervalId=null;

Function incNum(){

iNum++;

if(iNum==iMax){

clearInterval(iTntervalId);

}

iIntervalId = setInterval(incNum,500);

6历史

History.go(-1); history.back() ; history.forward(); history.length

Document对象

document对象实际上是window对象的属性。这个对象的独特之处是它是唯一一个既属于BOM又属于DOM（下一章将讨论DOM中的document对象）的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分，并提供页面自身的信息。再有，由于BOM没有可以指导实现的标准，所以每个浏览器实现的document对象都稍有不同，这一节的重点是最常用的功能。

下表列出了BOM的document对象的一些通用属性：

document对象也有许多集合，提供对载入的页面的各个部分的访问。下表列出了这些集合：

Document还有write()和writeln()方法。用于输出文本。

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"。

port——URL中声明的请求的端口。默认情况下，大多数URL没有端口信息，所以该属性通常是空白的。像http://www.somewhere.com:8080/index.htm这样的URL的port属性等于8080。

protocol——URL中使用的协议，即双斜杠（//）之前的部分。例如，http://www.wrox.com中的protocol属性等于http:，ftp://www.wrox.com的protocol属性等于ftp:。

search——执行GET请求的URL中的问号（?）后的部分，又称为查询字符串。例如，http://www.somewhere.com/search.htm?term=javascript中的search属性等于?term=javascript

location对象的几个方法：

assign()作用和href相同。

replace()该方法所作的操作与assign()方法一样，但它多了一步操作，即从浏览器历史中删除包含脚本的页面，这样就不能通过浏览器的Back和Forward按钮访问它了。

reload()方法，可重新载入当前页面。reload()方法有两种模式，即从浏览器缓存中重载，或从服务器端重载。究竟采用哪种模式由该方法的参数值决定，如果是false，则从缓存中载入，如果是true，则从服务器端载入（如果省略参数，默认值为false）。

navigator对象

navigator对象是最早实现的BOM对象之一，Netscape Navigator 2.0和IE 3.0引入了它。它包含大量有关Web浏览器的信息。它也是window对象的属性，可以用window.navigator引用它，也可以用navigator引用。同样，缺乏标准阻碍了navigator对象的发展，因为各个浏览器决定支持该对象的属性和方法。下表列出了最常用的属性和方法以及最常用的四种浏览器（IE、Mozilla、Opera和Safari）中哪个支持它们。