javaScript全面理解笔记（一）

来源：互联网发布：加强网络基础设施建设编辑：程序博客网时间：2024/06/05 04:15

关于（统一资源定位符）URL：

每一个 Web 页或文档都有一个被称为统一资源定位符（Uniform Resource Locator，简称 URL）的惟一地址。你可以把 URL 想象为一个 Web 页的电话号码。每一个 URL 包括四个部分：协议（通常为 HTTP）、服务、Web 服务器的域名或 Internet 协议地址（IP 地址）以及文件名。

超文本传输协议（Hypertext Transfer Protocol，简称 HTTP）负责管理用于 Web导航的超文本链接，可以认为 Web 是靠 HTTP 驱动的。HTTP 确保 Web 浏览器能够正确地处理和显示 Web 页面中所包含的不同类型的信息（文本、图形以及其他息）。URL 的协议部分后面紧接着的是一个冒号和两个斜杠，然后是服务，在万维网上服务通常是 www，代表了“World Wide Web”。域名是用来在 Internet 上标识计算机的惟一地址，这些计算机通常是 Web 服务器。域名包括两个部分，使用点号分开。域名的前一部分通常由一段简单的、标识一个人或一个组织的文本组成，例如 DonGosselin、Course。域名的后一部分则表示该站点的类型，例如 com（company 的简写）表示私营公司，gov（government 的简写）表示政府机构， edu （educational 的简写）表示教育部门。举一个例子， course.com 就是 CourseTechnology 的域名。像 http://www.DonGosselin.com 和 http://www.course.com 就是两个完整URL 的例子。

关于javascript：

JavaScript 是一种脚本语言。术语脚本语言是指在 Web 浏览器内由解释器解释执行的编程语言。每次运行程序的时候，解释器都会把程序代码翻译为可执行格式——每次一行。使用脚本语言编写的程序，例如 JavaScript，都是在脚本引擎装载 HTML 页面时解释执行的。脚本引擎是一个解释器，它是 Web 浏览器的一部分。一个包含翻译脚本的脚本引擎的Web 浏览器称为脚本宿主。

使用<SCRIPT>的 LANGUAGE 属性告诉浏览器使用何种脚本语言是明智的选择。也可以使用 LANGUAGE 属性指明所使用的 JavaScript 的版本。例如：

<SCRIPT LANGUAGE="JavaScript1.1">JavaScript 语句</SCRIPT>

装载一个 HTML 文档时，Web 浏览器会检查<SCRIPT>标签的 LANGUAGE 属性指明的 JavaScript 版本号。如果使用的 Web 浏览器不支持所指明的 JavaScript 版本，浏览器就会忽略<SCRIPT>...</SCRIPT>标签对中的所有语句。如果希望 Web 页能与老版本的 Web浏览器兼容，应该指明老版本浏览器支持的 JavaScript 版本。例如，Navigator 3.0 只支持JavaScript 1.1，所以如果想在 Navigator 3.0 版中显示 Web 页，就必须把 HTML 代码中的<SCRIPT>标签写成<SCRIPT LANGUAGE=''JavaScript1.1''>…</SCRIPT>。

除却脚本语言这一类型，javascript还是一种面向对象设计的编程语言，JavaScript 编程中最常用的对象是 Document 对象。Document 对象代表浏览器窗口中的内容。被显示的Web 页中的任何文本、图像或其他信息都是 Document 对象的一部分。Document 对象最常见的用法是向 Web 页中添加文本。可以使用 Document 对象的 write()方法和 writeln()方法在 Web 页添加新的文本。

在与 JavaScript 不兼容的浏览器中显示 HTML 文档时，通常希望显示某些信息告诉用户他们的浏览器与您的程序不兼容。可以使<NOSCRIPT>…</NOSCRIPT>标签对向使用不兼容浏览器的用户显示一条替换信息。<NOSCRIPT>…</NOSCRIPT>标签对通常跟在<SCRIPT>…</SCRIPT>标签对之后。如果用户停用了他们的浏览器的JavaScript支持，<NOSCIRPT>标签中替换信息也会被显示。

javaScript语法

变量：:程序设计最重要的特征之一就是存储和操作计算机内存单元中值的能力。存储在计算机内存单元中的值被称为变量。声明变量时 var 关键字并不是必须的。然而，忽略 var 关键字将影响变量在程序中使用的位置。不管是在程序的何处使用变量，使用 var 关键字声明变量都是一种好的编程习惯。提示：某些版本的 Web 浏览器，例如 Navigator 2.0 和 Internet Explorer 3.02 不能识别变量名中的美元符号。如果希望 JavaScript 程序可以在老版本的 Web 浏览器上运行，应该避免在变量名中使用美元符号。
定义函数：计算机程序里使用的单独的语句通常被组织成称为过程的逻辑单元。定义函数的语法为：
function name_of_function(parameters){
statements;
}
函数定义包括三个部分：
— 保留字 function 后跟函数名。保留字 function 通知 JavaScript 解释器下面的代码是一个函数。和变量相同，分配给函数的名字也叫做标识符，用于变量命名的规则和约定同样适合于函数名。
— 包含在函数名之后的圆括号中的所有函数所需的参数。
— 位于花括号{}之内的函数语句。
参数放在函数名后的圆括号内。参数或变元是在函数内部使用的变量。例如，写了一个名叫 calculate_square_root()的函数用来计算 number 变量所包含的数字的平方根。函数名
就应该写为 calculate_square_root(number)。函数可以包含多个用逗号分开的参数。包含三个数字型参数的函数 calculate_square_root() 可以写为 calculate_square_root (number1,
number2, number3)。
提示：参数并不是必需的。许多函数仅仅执行一项任务，并不需要外部数据。例如，一个用于向访问网站的用户显示相同信息的函数仅需要被执行，而不需要任何其他信息。
调用函数：通常函数在<HEAD>段创建，在<BODY>调用。HTML 文档的<HEAD>段总是在<BODY>段之前翻译，所以把函数放在<HEAD>段，函数调用放在<BODY>段能够确保函数在实际调用之前已经创建。如果程序试图在创建一个函数之前调用它，就会产生一个错
误。很多情况下，可能希望在一个函数中接收来自另外一个函数的值，并把它用在其他代码中。例如，如果有一个函数对传给它的数字做计算，可能希望收到计算结果。假设有一个函数将传给它的一系列数字计算平均值，如果看不到计算结果，这个函数是没有用的。
为了在调用语句中返回一个值，需要给调用语句赋一个变量。下面的语句调用函数average_numbers()并把返回值赋给变量 returnValue，同时这条语句把三个字面量传给函数。
var returnValue = average_numbers(1, 2, 3);为了能够把值返回给 returnValue 变量，必须在 average_numbers()函数中包含 return 语
句。下面的代码是 average_numbers()函数，它计算三个数字的平均值并使用 return 语句把
result 变量中的值返回给调用语句。
```
function average_numbers(a, b, c){var sum_of_numbers = a + b + c;var result = sum_of_numbers /3;return result;}
```
提示：返回值对函数来说不是必需的
javascript数据类型：

             JavaScript和Java一样存在两种数据类型：
               原始值（存储在栈Stack中简单数据）
               引用值（存储在堆heap中对象）
            5种原始数据类型：
               Undefined、Null、Boolean、Number 和 String
               JavaScript中字符串是原始数据类型
            通过typeof运算符，查看变量类型
            所有引用类型都是object
            通过instanceof 运算符解决typeof对象类型判断问题
            区分 undefined 和 null
              变量定义了未初始化/ 访问对象不存在属性 --- undefined
              访问的对象不存在 --- null

理解javascript对象

对象的属性也称为域。对象的属性在使用前必须赋值，否则将会报错：undefined。
如果为一个从构造器扩展的对象增加一个新的属性，那么这个新的属性只能在这个特定的对象中使用。这个属性在构造器函数和其他任何从同一个构造器扩展的对象中都是不可用的。但是，如果使用原型属性，创建的任何新属性在构造器函数和其他任何扩展该构造器的对象中都可以使用。原型属性是一个内置属性，它指定了对象所扩展的构造器函数。下面的代码为 Animal 构造器函数添加一个新的属性 size，这个新属性是 cat 对象的原型属性。通过使用原型属性，所有扩展 Animal 构造器函数的对象就可以访问 size 属性。
cat = new Animal("feline", "meow", "walk/run");
cat.prototype.size = "fat";在这种情况下，所有的 Animal 对象的 size 属性都是“fat”。因为并不是所有的动物都能用胖来形容，所以可以使用语句 cat.prototype.size= '' ''; 为 size 属性赋一个空值，然后为每一个对象的 size 属性单独赋值。给 cat 对象的 size 属性赋值的语句可以是 cat.size = ''fat'';。
javascript是单继承的。在继承时，为子类扩展对象定义，必须使用原型属性，并在后面跟上 new 关键字以及被扩展的对象定义名称。如下图所示：
javascript常用对象：Array对象数组对象，进行数组操作
String对象 ----- 字符串类型的引用类型
var s = new String("idjlkdjslst");
Number对象 ---- 数字原始类型引用类型
var n = new Number(100);
Boolean对象 ---- 布尔原始类型引用类型
var b = new Boolean(true);
Math对象执行数学任务
Date对象用于处理日期和时间
RegExp 对象正则表达式对象

事件的理解：

HTML标签和事件：

事件处理器

事件处理器的名称和事件同名，只是在前面加一个 on 前缀。例如，Click 事件的处理器是 onClick，Load 事件的处理器是 onLoad。

窗口和帧

1.用 JavaScript 语言，可以用窗口对象的 open()方法打开一个新的 Web 浏览器窗口。该方法的语法是：window.open("URL", "name",options)，参数 URL 表示要被打开的 Web 地址或文件名称。参数 name 用来赋值给新窗口对象的名称属性。注意要用引号将两个参数引起来。参数 options 代表了一个对新窗口的显示进行控制的字符串。可以在 open 方法里包括所有的三个参数，或者一个都不写。语句 window.open ("http://www.course.com");将在一个新的 Web 浏览器窗口中打开 Course Techonology 的站点。如果省略 URL参数，则会打开一个空白的网页。

javascript对象模型

窗口对象

窗口（window）对象包括了若干 Web 浏览器窗口信息的属性（例如，status 属性包含了显示于 Web 浏览器状态条中的信息。）及操作窗口所用的方法。

表 5-1列出了窗口对象的常见属性，表 5-2 列出了窗口对象的常用方法。

提示：Navigator 和 IE 都有自己独有的窗口对象的属性和方法。这里，只描述在Navigator 和 IE 中都有的方法和属性。

窗口的打开和关闭

用 JavaScript 语言，可以用窗口对象的 open()方法打开一个新的 Web 浏览器窗口。该方法的语法是：window.open("URL", "name",options)，参数 URL 表示要被打开的 Web 地址或文件名称。参数 name 用来赋值给新窗口对象的名称属性。注意要用引号将两个参数引起来。参数 options 代表了一个对新窗口的显示进行控制的字符串。可以在 open 方法里包括所有的三个参数，或者一个都不写。提示：如果open()方法的name参数已经被另一个存在的Web浏览器窗口占用，则JavaScript不会筹建新的窗口，而是将焦点转到已经存在的Web浏览器窗口中。当打开一个新的窗口后，可以利用 open()方法的options 参数来定制它的显示方式。表5-3 列出了在 open()方法中常用的 options 参数的选项。如：window.open("http://www.course.com","Course","height=300,width=600");

提示：如果在 options参数的字符串中包含了空格，有可能这些选项在Navigator中没法显示。因为open()方法在Navigator和IE中都能正确工作，但是要排除在options参数字符串中包含空格的情况。

窗口对象的名称属性可以被用来标识一个带有超文本链接的目标窗口或表单，但是不能在 JavaScript 代码里面使用。如果需要在代码中控制新创建的窗口，必须把用 open()方法新创建的窗口对象赋值给一个变量。语句应为：var newWindow=open("http://www.course.com");该语句将表示新窗口的对象赋值给名为 newWindow 的变量。然后，就可以通过newWindow 变量使用窗口对象的所有属性和方法。举例来说，如果想用窗口对象的 focus方法将焦点转移到新窗口来，可以用语句 newWindow.focus();。用的最多的窗口对象方法是 close()，用语句 newWindow.close();，可以关闭 newWindow 变量表示的窗口。提示：当需要列出一个对象的所有祖先时，没有必要将窗口对象包括在内。但是，文档对象同样包含名为 open()和 close()的方法，它们用来打开和关闭 HTML 文档。因此，在用窗口对象的 open()和 close()方法时，通常将前面的窗口对象表示出来，以便和文档对象的方法区分。

2. 超时设定和间隔设定。

setTimeout()：在过了指定的时间后，再执行代码。用 setTimeout()方法执行的代码仅执行一次。它的语法是：var variable=setTimeout("code ", milliseconds );。此处的变量声明将对 setTimeout()方法的引用赋给一个变量。其中的 code 参数必须用单引号或双引号引起来，可以是一行 JavaScript 语句，或者是一段语句体，还可以是一个函数调用。Web 浏览器需要等待指定的时间后，才执行 code参数表示的代码，而这段时间是用参数 milliseconds 来表示的。milliseconds 是一秒的千分之一，五秒钟等于 5000 milliseconds。而窗口对象的另一个方法 clearTimeout()用来在setTimeout()方法的代码执行之前取消其执行。clearTimeout()只有一个参数，该参数是一个标示了 setTimeout()方法调用的变量。

setInterval()和 clearInterval()。setInterval()方法和setTimeout()方法类似。二者不同的地方是，后者只执行代码一次，而前者会重复执行代码。clearInterval()方法和 clearTimeout()方法类似，它用来取消 setInterval()方法的调用。setInterval()和 clearInterval()通常用来启动和重复执行一段动画代码。setInterval()的语法和setTimeout()的语法是相同的：var variable = setInterval ("code ",milliseconds );。同样，clearInterval()函数也只接受一个参数，那就是代表了 setInterval()调用的变量。

帧结构

利用帧结构，可以将一个 Web 浏览器的窗口划分成多个窗口，每个窗口可以打开一个不同的 URL。帧是一个独立的、可滚动的 Web 浏览器窗口区域，每个帧都可以保留自己的 URL。JavaScript 将一个 HTML 文档里的每帧都作为独立的窗口处理。每个独立的帧都有自己的窗口对象，要和文档中的其他帧区别开来。此外，每帧都是定义它们的顶层 HTML文档的一部分。每帧的窗口对象都是从顶层 HTML 文档包含的窗口对象继承来的。虽然帧是 HTML 的元素，实际上并不是 JavaScript 创建的，JavaScript 还是可以用程序存取或控制单独的帧。

可以用 <FRAMESET>…</FRAMESET> 标签对将一个 HTML 文档分成若干帧。<FRAME> 和其他的 <FRAMESET>…</FRAMESET> 标签对是惟一可以放置在<FRAMESET>…</FRAMESET>标签对里面的项目。Web 浏览器忽略任何其他的文本和标签。 <FRAMESET>…</FRAMESET> 标签对替代了在没有帧的 HTML 文档中的<BODY>…</BODY>标签。要注意的是，在一个包含了<FRAMESET> … </FRAMESET>标签对的 HTML 文档中不能再包括 <BODY> 标签。如果包括了 <BODY> 标签，则<FRAMESET>标签会被忽略掉。

一个 HTML 文档中的帧可以水平划分、垂直划分，也可以在水平和垂直方向上都划分。<FRAMESET>标签的两个属性： ROWS 和 COLS，决定了是按照行还是列来划分帧。 ROWS决定在水平方向上创建多少帧，COLS 决定在垂直方向上创建多少帧。要确定帧的尺寸，需要赋给 ROWS 或 COLS 属性一个字符串，该字符串包含了行和列上的每帧尺寸应该占屏幕的百分比，或者像素值，并且用逗号将其隔开。例如，<FRAMESET ROWS="50%,50%"COLS="50%, 50%">创建两行两列、4 个帧，每帧的高度为屏幕高度的 50%，每帧的宽度为屏幕宽度的 50%。

用星号*来表示帧的尺寸是非常有用的，这样在文档里，就不必非要指定一个精确的像素值或百分比。星号将所有保留的屏幕空间都分配给一个单独的帧。如果有一个以上的帧使用了星号，则将所有保留的屏幕空间平均分配。例如，<FRAMESET COLS="100,*"> 创建分成两列的两个帧，其中一列用像素表示，而星号就代表另一列。左边列的帧将一直保持 100 像素的宽度，而右边列的帧会根据当前屏幕可用的空间进行调整。

帧结构使用的小例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> 测试帧及Target </title>  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""> </head><FRAMESET ROWS="50%, 50%" COLS="50%, 50%"><FRAME SRC="FirstURL.html"><FRAME SRC="SecondURL.html"><FRAME SRC="ThirdURL.html"><FRAME SRC="FourthURL.html"></FRAMESET><body></body></html>

效果图如下：

target属性介绍及相关例子展示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head>  <title> First</title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""> </head> <body>  <h1>First</h1>  <!-- TARGET 属性指定在哪个帧或 Web 浏览器窗口中打开 URL --><A HREF="FirstURL.html" TARGET="display">balalaika</A><BR><A HREF="banjo.html" TARGET="display">banjo</A><BR><A HREF="bassoon.html" TARGET="display">bassoon</A><BR><A HREF="bugle.html" TARGET="display">bugle</A><BR><!-- 与上面的效果相同 --><BASE TARGET="display"><A HREF="FirstURL.html">balalaika</A><BR><A HREF="banjo.html">banjo</A><BR><A HREF="bassoon.html">bassoon</A><BR><A HREF="bugle.html">bugle</A><BR> </body></html>

Frame标签的属性

默认情况下，浏览器自动地为帧添加滚动条，如果浏览的内容超过了可见的屏幕区域的话。可以通过 SCROLLING 属性将滚动条屏蔽掉。SCROLLING 属性可以取三种值：yes、no 和 auto。取值为 yes 将一直打开滚动条（即使内容全在可见区域内的话也会带着滚动条）；取值为 no 将取消滚动条（即使内容和可见区域并不十分合适）；取值为 auto，则根据帧中内容和可见区域的大小自动调整滚动条。选择 auto 的效果等同于在<FRAME>标签中不包括 SCROLLING 属性。

标签<NOFRAMES>…</NOFRAMES>在不支持帧结构的浏览器中显示给用户一条替代信息。

定位对象：定位对象允许用 JavaScript 语句改变到另一个 Web 页面。定位对象包含若干属性和方法，这些属性和方法都是用来操作浏览器当前窗口中的 URL 文档的。当使用这些属性和方法时，必须包含一个对定位对象的引用。举例来说，如果要利用 href 属性，必须写成 location.href=URL;。如下图,为定位对象的属性和方法：

定位对象包括两个方法：reload()和 replace()。reload()方法相当于 Navigator 里的重新载入按钮或 IE 里的重新刷新按钮。它重新打开浏览器中当前显示的页面。在使用 reload()方法时，可以不要任何参数，如 location.reload();，或者可以包含一个布尔型的参数。当该参数为真时，强迫浏览器从当前页面所在的服务器重新载入，即便网页没发生任何变化。举例来说，语句 location.reload(true);强制重新载入页面。如果参数为假，或者不包括任何参数，则浏览器只有在页面发生改变时才重新载入。

定位对象的 replace()方法用另一个不同的 URL 地址替换当前的 URL。该方法与通过改变 href 属性载入一个新文档有所不同。replace()方法实际上是用另一个文档重写了当前文档，并且用新的 URL 地址顶替了原地址在浏览器历史记录中的项目。相反，href 属性打开一个新文档，并且将其添加到历史记录中。

2.历史对象：历史对象包含了在当前浏览器链接期间曾经打开文档的历史记录。不管打开了多少个窗口或帧，每个 Web 浏览器窗口或帧都有自己内部的历史对象。

            历史对象常用的方法有back（相当于点击浏览器的后退按钮）、forward（相当于前进按钮）、go（打开历史记录中的指定文档）。语句 history.go(-2);将打开在历史记录中后退 2 个页面的那个 Web 页面。语句 history.go(3);将打开在历史记录中前进 3 个页面的那个 Web 页面。语句 history.go(-1);等同于方法 back()，语句 history. go(1)等同于方法 forward()。 go()方法还可以用曾经打开过的 Web 页面的 URL 地址字符串作为参数。如果只使用 URL 的一个部分或子串作为参数，则 go()方法打开最接近的历史记录。例如，下面的代码将打开 Course Technology 主页，通过语句 history.go("Course");。
    location.href = "http://www.course.com";
    location.href = "http://www.netscape.com";
    history.go("Course");

历史对象只有一个属性，即长度属性，它包含了在当前浏览器会话期间已经被打开的文档的数目。使用 length 属性的语法是 history.length;。长度属性并不包含文档的 URL 本身，而是曾经打开过的文档的一个计数。

3.领航员对象：领航员对象用来获得关于当前 Web浏览器的信息。

IE 并不支持在表 5-7 中列出的 language 属性。相反，IE 用其他两种属性来替代：userLanguage 和 systemLanguage。Netscape Navigator 和 IE 都有自己独有的、对方不兼容的方法和属性。例如，NetscapeNavigator 包括一个 home()方法，该方法用来打开浏览器公司的主页。IE 就不支持 home()方法。如果尝试在 IE 中运行一个包含有 home()方法的 JavaScript 程序，会收到一个错误。正是由于这些不兼容性，程序员用领航员对象的属性来判断是哪种类型的浏览器在运行。语句 browserType = navigator.appName;返回代码正在运行的 Web 浏览器的名称，并赋给变量 browserType。然后可以在需要指定浏览器类型的情况下，利用该变量进行判断

0 0

javaScript全面理解笔记（一）

关于（统一资源定位符）URL：

关于javascript：

javaScript语法

理解javascript对象

HTML标签和事件：

事件处理器

窗口和帧

窗口对象

窗口的打开和关闭

帧结构

2.历史对象：历史对象包含了在当前浏览器链接期间曾经打开文档的历史记录。不管打开了多少个窗口或帧，每个 Web 浏览器窗口或帧都有自己内部的历史对象。

3.领航员对象：领航员对象用来获得关于当前 Web浏览器的信息。