我在乐字节学习的第八天(Java)

今天是我在乐字节学习的第八天,学了有一个星期之后还是提升了不少,老师讲课也易懂,讲课方式也是很nice的哦,幽默风趣,我也是从小白刚开始接触的,学习一周下来,收获不少呀,下面是我今天学习的内容:

如果在web中使用JavaScript,BOM(浏览器对象模型)便是其核心。BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关 下图为DOM与BOM的关系


1.window对象

8.1.1全局作用域

所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。例: var age=12; function sayAge(){ alert(this.age); } alert(window.age); //12 sayAge(); //12 window.sayAge(); //12 例子中的age变量和sayAge()函数,被自动归为window对象。

1.2窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的 window 对象,并且保存在 frames 集合中。

<html>

<frameset>

<frame src="frame.htm" name="topFrame">

<frameset cols="50%,50%">

   <frame src="a" name="leftFrame">

   <frame src="b" name="rightFrame">

</frameset>

</frameset>

</html>

复制代码

top

不过最好使用 top 来引用这些框架>(top.frames[0]),因为 top 对象始终指向最高>(最外)层的框架,也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。

因为对于在一个框架中编写的任何代码来说,其中的 window 对象指向的都是那个框架的特定实例,而非最高层的框架。

parent

与 top 相对的另一个 window 对象是 parent。顾名思义,parent(父)对象始终指向当前框架的直接上层框架。

在某些情况下,parent 有可能等于 top;但在没有框架的情况下,parent 一定等于 top(此时它们都等于 window)。

self

与框架有关的最后一个对象是 self,它始终指向 window;实际上,self 和 window 对象可以互换使用。引入 self 对象的目的只是为了与 top 和 parent 对象对应起来,因此它不格外包含其他值。

所有这些对象都是 window 对象的属性,可以通过 window.parent、window.top 等形式来访问。同时,这也意味着可以将不同层次的 window 对象连缀起来,例如 window.parent.parent.frames[0]。

1.3窗口位置

IE,Safari,Opera和Chrome都提供了screenLeft属性和screenTop属性,分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox则提供了screenXscreenY的属性,提供相同的窗口信息,Safari和Chrome也同时支持两个属性。 例: var  left=(typeof  window . screenLeft == "number")? window . screenLeft : window . screenX; var top = (typeof  window . screenTop == "number")? window . screenTop : window . screenY; 例子中利用二元操作符先确定screenLeft和screenTop属性是否存在,若存在,则取得两个属性的值。若没有,则取得 screenX和 screenY的值。

使用moveTo()和moveBy()方法也可取得窗口的精确值 例: window.moveBy(100,100); // 将窗口向右下方向各移动100像素 window.moveTo(100,100); //将窗口移动到(100,100)处

1.4窗口大小

窗口大小 打开窗口,具有4个属性:

innerWidth、innerHeight、outerWidth 和 outerHeight。 另外resizeTo()和resizeBy()方法可调整浏览器窗口的大小。不过,resizeBy()接收的是新窗口与旧窗口的宽度和高度之差。例: window.resizeTo(100,100);    //调整到100100 window.resizeBy(100,50);      //调整到200150

1.5导航与打开窗口

window.open()方法可以导航到一个特定的url,接受四个参数,url、窗口目标、 一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。对于传入的第二个参数,它与标签里面的target的值相似,指定在哪打开这个url,可以是已有的窗口名称,也可以是_blank等等

1.6弹出窗口

1:如果第二个参数不是已有的窗口,那么就会根据第三个参数的字符串创建一个新的窗口 2.若第三个参数也没有,那么就会创建一个带有全部默认设置的新窗口 3.在不打开新窗口时,第三个参数被忽略 4.第三个参数是一个以逗号分隔的设置字符串,表示新窗口显示哪些特性,下面是部分设置选项

1.7系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息

alert()方法:接受一个字符串并将其显示给用户

显示一个系统对话框,其中包含指定的文本和一个 OK(“确定”)按钮

第二种对话框是调用 confirm()方法生成

注:二者的主要区别在于“确认”对话框除了显示 OK按钮外,还会显示 一个 Cancel(“取消”)按钮,两个按钮可以让用户决定是否执行给定的操作

2.location对象

location对象提供了与当前窗口加载的文档有关的信息 它是window对象和document对象的属性

下面是location的所有属性


2.1查询字符串参数

解析查询字符串,然后返 回包含所有参数的一个对象

function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号var qs = (location.search.length > 0 ? >location.search.substring(1) : ""), //保存数据的对象args = {},//取得每一项items = qs.length ? qs.split("&") : [],item = null,name = null, value = null, //在 for 循环中使用i = 0,len = items.length; //逐个将每一项添加到 args 对象中for (i=0; i < len; i++){item = items[i].split("=");name = decodeURIComponent(item[0]);value = decodeURIComponent(item[1]); if (name.length) {args[name] = value;}}return args; }

2.2位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置

最常用:使用 assign()方法并为其传递一个 URL

修改location对象的其他属性也可以改变当前加载的页面

下面是一些修改url的方法

  //假设初始 URL 为 http://www.wrox.com/WileyCDA/

//将 URL修改为"http://www.wrox.com/WileyCDA/#section1"

  location.hash = "#section1";

//将 URL修改为"http://www.wrox.com/WileyCDA/?q=javascript"      

  location.search = "?q=javascript";

  //将 URL 修改为"http://www.yahoo.com/WileyCDA/"

  location.hostname = "www.yahoo.com";

  //将 URL 修改为"http://www.yahoo.com/mydir/"

  location.pathname = "mydir";

  //将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/"

  location.port = 8080;

复制代码

三、navigator 对象

Navigator常见的对象属性如下:

appCodeName : 返回浏览器的代码名。

appMinorVersion : 返回浏览器的次级版本。

appName : 返回浏览器的名称。

appVersion : 返回浏览器的平台和版本信息。

browserLanguage : 返回当前浏览器的语言。

cookieEnabled : 返回指明浏览器中是否启用 cookie 的布尔值。

cpuClass : 返回浏览器系统的 CPU 等级。

onLine | 返回指明系统是否处于脱机模式的布尔值。

platform : 返回运行浏览器的操作系统平台。

systemLanguage : 返回 OS 使用的默认语言。

userAgent : 返回由客户机发送服务器的 user-agent 头部的值。

userLanguage : 返回 OS 的自然语言设置。

每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法,以及支持它们的浏览器版本。

3.1 检测插件

用plugins数组来检测浏览器是否安装了特定插件 数组每一项包含下列属性

name:插件名字 description:插件描述 filename:插件的文件名 length:插件所处理的MIME类型的数量

在Firefox、Safari、Opera、Chrome中用下面方法检测插件

  //检测插件(在 IE中无效)

   function hasPlugin(name){    

   name = name.toLowerCase();    

   for (var i=0; i < navigator.plugins.length; i++){    

        if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){      

              return true;      

                 }     }

   return false;

   }

    //检测 Flash

    alert(hasPlugin("Flash"));

    //检测 QuickTime

    alert(hasPlugin("QuickTime"));

复制代码

用下面方法检测所有浏览器的插件

//检测所有浏览器中的Flash

function hasFlash(){    

var result = hasPlugin("Flash");    

if (!result){        

result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");    

}

return result;

}

//检测所有浏览器中的QuickTime

function hasQuickTime(){    

var result = hasPlugin("QuickTime");    

if (!result){        

result = hasIEPlugin("QuickTime.QuickTime");    

}    

return result;

}

//检测 Flash

alert(hasFlash());

//检测 QuickTime

alert(hasQuickTime());

复制代码

3.2 注册处理程序

Firefox2为navigator对象新增 registerContentHandler()和registerProtocolHandler()方法,这两个方法可以让一个站点指明它可以处理特定类型的信息。

前者接受三个参数,要处理的MIME类型、可以处理该MIME类型的页面的URL、应用程序的名称

后者也接受三个参数,要处理的协议、处理该协议的页面的URL、应用程序名称

4.screen 对象

screen 对象基本上只 用来表明客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。每个浏览器 中的 screen 对象都包含着各不相同的属性,下表列出了所有属性及支持相应属性的浏览器。

5. history对象

history对象用于保存历史记录,每个浏览器窗口、标签页、框架都有自己的history对象与特定的window对象关联

用go()方法可以在用户的历史记录中随意跳转,接受一个要跳转的页面数,向前或向后跳转

也可以传一个字符串,就会跳转到包含该字符串最近的URL页面

用back()和forward()来前进一页或后退一页

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,277评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,689评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,624评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,356评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,402评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,292评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,135评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,992评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,429评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,636评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,785评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,492评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,092评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,723评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,858评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,891评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,713评论 2 354

推荐阅读更多精彩内容