`
skeeey
  • 浏览: 33913 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

javascript的实践与总结(一)

阅读更多
第一次接触JavaScript是在上学的时候,当时和同学搞一个网页设计,那是对脚本语言知之甚少,只是觉得JavaScript只不过是美化一下页面,在没有什么可取之处了,所以一直鄙视,后来上了班,又是做web开发,JS当然也接触的多了,后来赶上web2.0,呵呵,对js又有了新的认识,加之现在做一个web的聊天系统,那js更是用的多了,所以现在,总结一下,孔子说:学而时习之,不亦说乎,温故而知新,呵呵,向他老人家学习一下。

先说点什么呢,那就从BOM和DOM说开吧。

自从netscape navigator2.0把js引入到浏览器中,js可谓与浏览器接下了不解之缘,而js在浏览器中执行的速度,也是现在各种各样的浏览器展示其牛*的主要指标之一。那BOM和DOM到底是什么类?

BOM:Browser Object Model,是浏览器相关的一组特性,由于和浏览器相关,那一定没有统一的标准了,原因是,有ms了......,不过庆幸的是,还是有一些事实标准的。

DOM:Document Object Model,这个就是标准了,由著名的w3c制定,目前最高的级别是level 3,不过3还没有彻底完成,目前主流的浏览器都可以支持到(仅仅是支持到哦,并不是完全遵守的)level 2,对html,也就是html4.x,目前最高的是4.01,后来w3c向把html统一向xml靠拢,于是就有了xhtml1.0,再后来,w3c想搞一个xhtml2.0,结果进度缓慢,加之各大厂商又不看好,于是就有了html5.0 (很牛的东东,有待尝试哦)。

对规范有兴趣可以浏览维基上的一篇文章:
wiki上的JavaScript

好了,BOM和DM的历史就先说到这里了,搞点实质性的东东,先说一下BOM的体系结构:



先从window说起,对于window,最简单的一句就是它是表示打开页面的浏览器窗口,并不包含页面的内容。请牢记后一句话,我在最开始的时候,就用它访问过页面的内容,结果当然是访问不到了。
既然是表示浏览器的窗口,那就一定包含:
  • 新建窗口(window.open()),
  • 关闭窗口(window.close()),
  • 改变窗口位置(resizeBy(),resizeTo()),
  • 移动窗口(moveBy(),moveTo),

还有一些其固有的特性,比如:
  • 打开新的连接,并可以指定打开方式
  • 弹出系统对话框(alert(),confirm(),prompt()),
  • 设置超时与暂停(setTimeout(),setInterval()),
  • 状态栏,

前面的那些操作使用的时候可以查阅文档,当然能记住更好。不过要注意不同的浏览器对这些方法的支持各不一样,Oh,My God,It's  a  confusion of world!后两个操作十分的不专业,最好不要使用。

对于特性要罗嗦一下咯,最后一个特性,不专业,尽量不要使用,第二和第三个,一看就知道了,也没啥说的,第一个还是有必要说一下的。

提一个问题,如何通过js实现在一个新的窗口打开连接,也就是通过js实现类似点击
<a href='http://www.sina.com' target='_blank'>sina</a>

的效果,用location么,错,虽然location有target这个属性,但,那是不行的,那怎么解决类?呵呵,答案是使用
window.open('http://www.sina.com','_blank');

这句代码的实际意思是把一个连接在一个指定的框架(frame)内打开,_self
,_top,_blank,
这些是专有的框架名。

然后再说一说让人迷惑的几个东东,parent,self,top,opener,,怎么样可区分清楚么?
其中self总是等于window,仅是名字不一样而已,不过正是由于这个特点,使用它可以使我们的代码更易于阅读,而top对象和parent对象,本人认为,只有在多框架(frames)下才会被用到,top对象指向最顶层的框架,也就是当一个页面使用了frame或iframe时,才会被用到。最后opener用于window.open()打开的子窗口。

然后下来说一说document和location对象,首先,我在上面的BOM的体系结构图中,将这两个对象标记为了红颜色,为什么类?简单,是由于混乱。

document是一个既属于BOM又属于DOM的对象,而location对象,则是一个既属于window,又属于document的属性。从BOM的角度来看,document对象中包含了页面中一些通用的属性和集合,不过document中的很多属性(alinkColor,bgColor,fgColor,linkColor,vlinkColor)是可以通过css控制的,所以我的建议是能使用css控制的尽量使用css,而剩下的属性(lastModifie
d,referrer,title,URL),基本上没有多大的用处,要说有用的,我认为只有referrer可能有点用,它可以告诉你用户是怎么访问到你的页面的。其实document的主要作用是用于DOM。

location对象表示载入窗口的URL,同时还可以用于解析URL,比如要获得GET请求后的参数可以使用
location.search


对于history和navigator对象,history对象提供了go(int),back(),forward()方法,他们的功能类似于浏览器的前进和后退,不过出于安全的考虑,history仅仅提供导航的功能,要想得到用户的浏览历史,仅靠这个对象是不行的。
PS:不过要想得到用户的历史也不是不可能,利用a标签的特点,呵呵,开动脑筋想一想吧

navigator对象,呵呵,常被用来判断用户的浏览器类型,和用户的操作系统类型。不过这两个问题也是十分复杂的问题,以后单独说吧

最后一个,screen对象,我实际的工作中没有用到过,基于没有实践,就没有发言权的伟大理论,我就不总结了

0
0
分享到:
评论

相关推荐

    JavaScript基础知识总结

    JavaScript 是一种广泛应用于网页和网络应用的轻量级编程语言,它主要用于增强网页的交互性和动态功能。JavaScript 能够直接嵌入 HTML 页面中,为设计师提供了一种无需深入编程就能实现动态效果的工具。本文将深入...

    JavaScript核心及实践

    以上是根据提供的文件内容总结的JavaScript核心及实践的知识点。由于文件内容不完整,部分章节的细节无法展开,但这些内容已经覆盖了JavaScript编程的核心概念和应用技术。在进一步深入学习和实践时,应参考完整的...

    javascript 面向对象编程.pdf javascript 设计模式与开发实践.pdf

    另一方面,"JavaScript 设计模式与开发实践.pdf"可能会详细讲解各种设计模式的原理、使用场景和实现方式,帮助开发者编写出更优雅、高效的代码。 通过学习这两本书,读者不仅可以掌握JavaScript的面向对象编程基础...

    Javascript总结导图

    以上只是JavaScript知识体系的一部分,"JavaScript总结导图"应包含更全面的内容,帮助开发者快速理解和回顾JavaScript的关键知识点。通过深入学习和实践,你可以掌握这门强大的语言,构建功能丰富的Web应用。

    JavaScript必看全面总结.zip

    这份名为“JavaScript必看全面总结.zip”的压缩包文件包含了一份深入的JavaScript学习笔记,旨在帮助开发者全面掌握这一动态类型的脚本语言。以下是根据标题和描述提炼出的JavaScript关键知识点: 1. **基础语法**...

    JavaScript学习总结

    本文将围绕“JavaScript学习总结”这一主题,深入探讨其基本概念、语法特性、DOM操作以及与CSS的协同使用。 一、JavaScript基础 JavaScript由Brendan Eich在1995年发明,最初是为了网页交互而设计,现在已经成为...

    JavaScript高级应用与实践PDF版本下载.txt

    根据提供的文件信息,本文将对《JavaScript高级应用与实践》这一主题进行深入解析,并提炼出相关的知识点。尽管提供的链接可以直接获取到PDF版本的资源,但为了更好地理解和掌握书中的核心内容,下面将从多个角度来...

    JavaScript王者归来源代码

    《JavaScript王者归来》分为五个部分循序渐进地与读者讨论了JavaScript的方方面面,从简单的语言基础到丰富的实际应用再到深入剖析语言本质的高级话题,字里行间包含着作者多年工作中对JavaScript实践乃至程序设计...

    JavaScript编程总结

    以上只是JavaScript编程中的一部分核心知识点,实际开发中还会涉及到更多高级特性和最佳实践,例如错误处理、类型检查、性能优化、AJAX请求、正则表达式等。不断学习和实践,才能更好地掌握这门语言。

    javascript操作DIV总结(弹出窗口篇)

    一、基本的JavaScript与DIV操作 1. 获取DOM元素:在JavaScript中,我们通常使用`document.getElementById()`,`document.querySelector()`或`document.querySelectorAll()`来获取页面上的指定DIV元素。例如,如果...

    JavaScript 知识点总结(思维导图10张)

    本文将围绕“JavaScript知识点总结(思维导图10张)”进行详细解析,涵盖从基础语法到高级特性,帮助你构建完整的JavaScript知识体系。 1. **JavaScript操作符与字符** (Javascript-operational-character.gif) - ...

    JavaScript语言基础知识点总结十张图

    本文将基于“JavaScript语言基础知识点总结十张图”这一主题,深入探讨JavaScript的基础概念、语法特性以及核心知识点。 1. **变量与数据类型** JavaScript有七种数据类型:Undefined、Null、Boolean、Number、...

    javascript得个人总结和一些特效实例

    JavaScript,作为一种广泛应用于Web开发的脚本语言,是前端开发中的核心技术之一。它以其灵活性、易学性和强大的功能,使得网页交互变得更加生动和丰富。这份名为"javascript"的压缩包文件,显然包含了作者对...

    web前端总结的一套JavaScript 语言基础知识点总结

    本文将基于一位有着丰富经验的40岁Web前端开发者所总结的JavaScript语言基础知识进行详细阐述。 一、变量与数据类型 在JavaScript中,变量的声明使用var、let或const关键字。var是函数作用域,let和const则是块级...

Global site tag (gtag.js) - Google Analytics