javascript 高级程序设计(1-2章)

第一章:javascript简介

本章内容:

  • javascript历史回顾
  • javascript是什么
  • javascript与ECMAScript的关系
  • javascript的不同版本
javascript

关于ECMAScript

ECMA - 欧洲计算机制造协会

它规定了这门语言下列组成部分:

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象

ECMAScript就是对实现该标准规定的各个方面内容的语言描述。

然后由不同的浏览器对其进行实现,最后我们输写遵守语法规则的程序,完成应用开发需求。

关于DOM

文档对象模型(DOM, Document Object Model)是针对XML但经过扩展用于html的应用程序编程接口。

DOM1级

主要目标:映射文档的结构。

根据DOM的定义(HTML和XML应用程序接口)可知DOM由两个部分组成,针对于XML的DOM即DOM Core和针对HTML的DOM HTML

那DOM Core 和DOM HTML有什么区别与联系呢?

DOM Core的核心概念就是节点(Node)。DOM会将文档中不同类型的元素(这里元素并不特指<div>这种tag,还包括属性,注释,文本之类)都看作为不同的节点。

节点结构图

上图描述了DOM CORE的结构图,比较专业,来看一个简单的:

<div id="container">
    <span>hello world</span>
</div>    

来看一下这段代码在标准浏览器里的DOM表现:

DOM树

div和span元素被展现成了一个元素节点,对应到节点结构图中的Element元素

"hello world"和div与span之间的间隔,被展现成了文本节点,对应到节点结构图中的CharacterDate元素

DOM CORE在解析文档时,会将所有的元素、属性、文本、注释等等视为一个节点对象(或继承自节点对象的对象,多态、向上转型),根据文本结构依次展现,最后行成了一棵"DOM树"

DOM HTML的核心概念是HTMLElement,DOM HTML会将文档中的元素(这里的元素特指<body>这种tag,不包括注释,属性,文本)都视为HTMLElement。而元素的属性,则为HTMLElement的属性

再来看一个示例:

从Node接口提供的属性

myElement.attributes["id"].value;很明显myElement.attributes["id"]返回一个对象.value是得到对象的value属性

Element实现的方法返回

myElement.getAttributes("id");很明显此时id现在只是一个属性而已,这只是一个得到属性的操作。

其实上DOM Core和DOM html的外部调用接口相差并不是很大,对于html文档可以用DOM html进行操作,针对xhtml可以用DOM Core。

DOM2级

DOM2引入了新模块,也给出了众多新类型和新接口的定义。

  • DOM视图(DOM Views): 定义了跟踪不同文档(例如:应用css之前和之后的文档)视图的接口;
  • DOM事件(DOM Events):定义了事件和事件处理的接口;
  • DOM样式(DOM Style): 定义了基于CSS为元素应用样式的接口;
  • DOM遍历和范围(DOM Traversal and Range): 定义了遍历和操作文档树的接口;
DOM3级

进一步的扩展DOM,引入以同一方式加载和保存文档的方法--在DOM加载和保存(DOM Load and Save)模块中定义;新增验证方法--在DOM验证(DOM Validation)模块中定义。DOM3级也对DOM核心进行了扩展,开始支持XML1.0规范,涉及XML Inforset、XPath、和XML Base。

关于BOM

可以访问和操作浏览器窗口的浏览器对象模型(BOM, Browser Object Model)

BOM

BOM与浏览器紧密结合,这些对象也被称为是宿主对象,即由环境提供的对象。

下面是一些这样的扩展:

  • 弹出新窗口的功能;
  • 移动、缩放、关闭浏览器窗口的功能;
  • 提供浏览器详细信息的navigator对象;
  • 提供浏览器所加载页面的详细信息的location对象;
  • 提供用户显示器分辨率的screen对象;
  • 对cookie的支持;
  • 像XMLHttpRequest和IE的ActiveXObject这样的自定义对象

这里要强调一个奇怪的对象Global对象,它代表一个全局对象,Javascript是不允许存在独立的函数,变量和常量,如果没有额外的定义,他们都作为Global对象的属性或方法来看待.像parseInt(),isNaN(),isFinite()等等都作为Global对象的方法来看待,像NaN,Infinity等"常量"也是Global对象的属性。像Boolean,String,Number,RegExp等内置的全局对象的构造函数也是Global对象的属性.但是Global对象实际上并不存在,也就是说你用Global.NaN访问NaN将会报错。实际上它是由window来充当这个角色,并且这个过程是在javascript首次加载时进行的。

小结:

javascript是一种专门为网页交互而设计的脚本语言,由以下三个部分组成:

  • ECMAScript,由ECMA-262定义,提供了核心语言功能;
  • 文档对象模型(DOM),提供访问和操作网页内容的方法和借口;
  • 浏览器对象模型(BOM),提供与浏览器交互的方法和借口;

参考:

理解Javascript_03_javascript全局观


第二章:在html中使用javascript

本章内容:

  • 使用script元素
  • 嵌入脚本与外部脚本
  • 文档模式对javascript的影响
  • 考虑禁用javascript的场景

在html文档里嵌入客户端的javascript有四种方法:

  • 内联:放置在<script></script>之间;
  • 放置在<script>标签的src属性制定的外部文件中;
  • 放置在html事件处理程序中,该事件处理程序由onclick或onmouseover这样的html属性来制定;
  • 放在一个URL里,这个URL使用特殊的“javascript:"协议;(保存在书签中或href='javascript:' 只要书签不返回值,它就可以操作当前显示的任何文档,而不是把文档换成新的内容

2.1.3 异步脚本

<script type='text/javascript' src='sample.js' async ></script>

async只适用于外部脚本文件,并告诉浏览器立即下载文件,但与defer不同的是,async的脚本并不保证按照指定的他们的先后顺序来执行

小结:

把javascript插入html页面中使用<script>元素。使用这个可以把javascript嵌入到html页面中,让脚本与标记混合在一起。也可以包含外部的javascript文件。而我们需要注意的有:

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

推荐阅读更多精彩内容