JavaScript高级程序设计学习笔记(8)

刺骨的言语ヽ痛彻心扉 2022-03-01 13:20 223阅读 0赞

# JavaScript高级程序设计学习笔记 #

1.对JavaScript实现各个组成部分的详尽解读  
2.对JavaScript面向对象编程的全方位阐述  
3.DOM，BOM及浏览器事件模型的透彻剖析  
4.Web应用基本数据格式JSON，XML及存取  
5.Ajax，Comet服务器端通信和基于File API的拖放式文件上传  
6.ECMAScript 5定义的最核心语言特性  
7.HTML 5涵盖的表单，媒体，Canvas（包括WebGL）  
8.Selectors、Web Workers、地理定位及跨文档传递消息等最新API  
9.离线应用及客户端存储（包括IndexedDB）  
10.维护、性能、部署相关的最佳开发实践  
11.新兴API及ECMAScript Harmony展望

# \*\*DOM，BOM及浏览器事件模型的透彻剖析 \*\* #

## BOM ##

BOM提供很多对象，用于访问浏览器功能，这些功能与任何网页内容无关  
**1.window对象**（★★★）  
     BOM的核心对象是window，表示浏览器的一个实例。在浏览器里，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAJavaScript规定的Global对象。  
全局作用域  
     由于window对象同时扮演着ECMAJavaScript中global对象的角色，因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法

var age=20;
    function sayAge() {
        var age=30;
        alert(this.age);
    }
    sayAge();//20

窗口关系及框架  
     如果页面包含框架，则每个框架都拥有自己的window对象，并且保存在frames集合中，可以通过数值索引或者是框架名来访问相应的window对象。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]  
最好还是使用top并非window来引用这些框架（例如：top.frames\[0\]）

*  与top相对的另一个window对象是parent。parent（父）对象始终指向当前框架直接的上层框架。
 *  除非最高层窗口是通过window.open()打开的，否则其window对象的name属性不会包含任何值
 *  与框架有关的最后一个对象是self，始终指向window，实际上，self和window对象可以互换使用。
 *  在使用框架的情况下，浏览器中会有多个global对象

窗口位置  
     用来确定和修改window对象位置的属性和方法有很多。很多浏览器都提供了screenLeft和screenTop属性，分别用于表示窗口相对屏幕左边和上边的位置；screenX和screenY属性，提供相同的窗口位置信息，但是这两个属性在Opera不适用

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
     var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
     alert(leftPos);
     alert(topPos);
     window.moveTo(0,0);//移动到屏幕的左上角【移动到的位置】
      window.moveBy(0,100);//向下移动100像素【要移动的距离】

开始的两行是确定当前窗口的位置。后面是对窗口的移动。但是后面两个移动窗口的方法可能会被浏览器禁用  
窗口大小  
     确定窗口大小属性：innerWidth、innerHeight、outerWidth和outerHeight。

*  不同的浏览器返回的不一样

确定页面视口的信息：document.body.clientWidth和document.body.clientHeight  
     调整浏览器窗口大小：resizeTo()和resizeBy()。resizeTo()接受浏览器窗口新宽度和新高度；resizeBy()接受新窗口和原窗口的宽度和高度之差

窗口位置  
     window.open()：导航到一个一个特定的URL，也可以打开一个新的浏览器窗口。4个参数：要加载的URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

*  第二个参数：

//等同于<a href="http://www.wrox.com" target="topFrame"></a>
    window.open("http://www.wrox.com/",topFrame);

标签中的target的作用

*  第三个参数：  
         第三个参数是一个逗号分隔的字符串，表示新窗口显示的特性  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 1]

var wroxWin=window.open("http://www.wrox.com/","wroxWindow","height=400,width=400,top=10,left=10,resizeable=yes");
    wroxWin.resizeTo(500,500);//调整大小
    wroxWin.moveTo(100,100);//调整位置
    wroxWin.close();//弹出窗口又关闭

如果两个window对象之间要彼此通信，那么新标签就不能运行在独立进程中。

wroxWin.opener=null;

将opener属性设置为null就是告诉浏览器新创建的标签页不需要打开它的标签页通信，因此可以在独立进程中运行。

弹出窗口屏蔽程序  
     如果是浏览器内置的屏蔽程序阻止的弹出窗口，那么window.open()很有可能返回null。此时只要监测这个返回值就可以确定弹出窗口是否被屏蔽。  
![在这里插入图片描述][20190325203834303.png]  
     如果是浏览器扩展或者其他程序阻止的弹出窗口，那么window.open()通常会抛出一个错误。

间歇调用和超时调用  
     JavaScript是单线程语言，但它允许通过设置超时时值来调度代码在特定时刻执行。  
1）超时调用需要使用window对象setTimeout()的方法，它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待 多少毫秒）。  
![在这里插入图片描述][20190325204542803.png]  
注意：在使用setTimeout()时会返回一个数值ID，表示超时调用 。取消的代码`clearTimeout(timename);`timename为相应的超时调用的ID

2）setInterval()间歇调用与超时调用类似，但是它会按照指定的时间间隔重复执行，接受的参数与setTimeout()相同。  
![在这里插入图片描述][20190325205211179.png]  
注意：在不加干涉的情况下，间歇调用会一直执行到页面卸载。  
一般的会使用超时调用来模拟间歇调用。

系统对话框  
1）alert()  
     调用之后显示一个系统对话框，包括指定的文本和一个OK（“确定键”）按钮。  
![在这里插入图片描述][20190325210952865.png]  
2）confirm()  
     调用之后显示一个系统对话框，包括指定的文本、一个OK（“确定键”）按钮和一个Cancel（“取消”）。  
![在这里插入图片描述][20190325211217195.png]

if (confirm("are you ok?")) {
        document.write("ok");
    }else {
        document.write("no")
    }

3）prompt()  
     调用之后显示一个提示框，用于用户输入文本。包括输入的文本域、一个OK（“确定键”）按钮和一个Cancel（“取消”）。有两个参数：文本提示和文本输入域的默认值。  
![在这里插入图片描述][2019032521185757.png]

var result=prompt("are you ok?","say yes");
    if (result!=null){
        document.write("ok,your feeling is"+result);
    }

**2.location对象**（★★★）  
     location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。location既是window对象的属性，也是document对象的属性。window.location和document.location引用都是一个对象。

查询字符串参数  
     location.search

位置查询  
1）assign()方法`location.assign("http://www.wrox.com");`打开新的URL并且在浏览器的历史记录中生成一条记录  
2）location.href`location.href="http://www.wrox.com"`  
3）window.location`window.location="http://www.wrox.com"`  
4）通过上面方式修改URL时，历史记录会生成新纪录，用户通过后退可以返回上个页面。禁用这种行为，使用replace（）方法  
5）reload()方法。作用是重新加载当前显示页面（最好把reload()方法放在最后一行）  
![在这里插入图片描述][20190325215318197.png]  
**2.navigator对象**（★）  
检查插件  
非IE浏览器，使用plugins数组。数组每一项包含下列属性：

*  name：插件名字
 *  description：插件描述
 *  filename：插件文件名称
 *  length：插件处理的MIME类型数量  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 2]  
    **3.screen对象**（）  
    **4.history对象**（★★★）  
         history对象保存着用户上网的历史记录，从窗口被打开那一刻算起。history是window对象的属性。  
    1）go（）方法在用户的历史记录中任意跳转。  
    ![在这里插入图片描述][20190325220636211.png]  
         或者可以使用字符串，在页面进行任意跳转。  
    ![在这里插入图片描述][20190325220728704.png]  
    2）back（）方法和forward（）方法。模仿浏览器的前进后退按钮。  
    ![在这里插入图片描述][20190325220922875.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70]: /images/20220301/cc743ff25a9a4a47b6e420166ca4ab28.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 1]: /images/20220301/1e38ebcc03d842d4949b90b9f1071f28.png
[20190325203834303.png]: /images/20220301/9c127711430d4e5484c18599a21ecf07.png
[20190325204542803.png]: /images/20220301/f1575b04ee4e4be3b96bc0896f0fc625.png
[20190325205211179.png]: /images/20220301/6fbd7e978ada493ba496705ed9a1ec41.png
[20190325210952865.png]: /images/20220301/f814dda3a81c404abfd77badf961a69a.png
[20190325211217195.png]: /images/20220301/119e1e22d8444f3cbfa02c41b78cd9ee.png
[2019032521185757.png]: /images/20220301/0094588c87644c9eaec0e9ec86ebdc9f.png
[20190325215318197.png]: /images/20220301/99114b8a8bda4753af8cdc96655ba5ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lJWUlZSUJVUlVYSU4_size_16_color_FFFFFF_t_70 2]: /images/20220301/f363f9fb24724bbfb1499239ac1e5094.png
[20190325220636211.png]: /images/20220301/ec93aa78346340e7b48352a84508464a.png
[20190325220728704.png]: /images/20220301/9b06ab01aa264a318b8be5df1709f0f7.png
[20190325220922875.png]: /images/20220301/0037d55d1d9043b592d48e1130d284ec.png