Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出。
Javascript组成
1.核心(ECMAScript)
2.文档对象模型(DOM)
3.浏览器对象模型(BOM)
1.核心(ECMAScript)
ECMAScript说白了是定义Javascript的标准,而这种标准与浏览器并无依赖关系。
我们现在前端所使用的Javascript只是遵循这一标准的,以浏览器为宿主平台的脚本语言。
遵循这一标准的脚本语言都可以称之为js。
而js的宿主平台除了我们最常用的浏览器平台之外,还有node,和Adobe flash等。
而这一部分的主要内容,一般指的是js的数据类型,变量的声明,语法等
2.DOM 文档对象模型
Dom这个概念相信许多人都知道
那么它具体是啥呢?
我在看JS高编之前也是知道有dom节点,bom节点等。但这个dom到底是什么呢?
我根据书中的描述是这样理解dom的。
dom相当于是对xml拓展后的针对html的API。
这么说可能不太好理解,那么这样说吧。
dom先将html页面映射为一个多层的有许多节点的对象,然后dom向我们提供一个操作这些映射的节点的方法。
我们通过这些操作节点的API来操作页面中的节点。
而dom节点就是我们可以通过这些API操作的节点(我是这样理解的)
在知道dom大概是啥之后,另一个问题随之而来。
DOM的级别?
我之前也在许多地方见过类似于DOM0级,DOM2级这样的概念。
那这里的DOM级别又指的是什么呢?
我们都知道,不同的浏览器之间有兼容性问题。
这种不同浏览器之间的差异,在不同的浏览器的DOM对象之间当然也是存在的。
这里就是IE在搞事了,低版本ie不管是获取节点的样式,还是其他的dom操作都和我们现在常用的有所区别。
那么DOM级别就是一个针对DOM的标准的版本,意思就是DOM对象由W3C制定了一套所有浏览器DOM都应该遵守的标准。
然后这个标准随着时间的推移有着不同的版本,对应不同版本标准的DOM对象就分出了级别。
首先是DOM0级,我们常说onclick 这些用户事件是dom0级事件,然而实际上dom0级是不存在的,这个版本指的往往是最初的DHTML的那个版本。
后面对DOM的标准的更新都以此为参考点,所以有了DOM1、DOM2、DOM3。
然后是DOM1,这个版本的标准主要针对的是规范dom映射过后的文档结构。
主要分为了两个部分,第一个部分:DOM核心 用于规定如何映射html文档结构
第二个部分:DOMhtml 定义了一些针对html的对象和方法。
这个版本是没有规定用户事件的相关标准的,所以我们常说的只有DOM0级事件 DOM2级事件 而没有DOM1级事件。
其次是DOM2,这个版本针对的就是页面了
比如一些对css样式操作的支持,扩充了鼠标和用户事件,拓展支持XML命名空间
在这个版本主要分为以下几个板块:
1. DOM视图:用于跟踪文档
2.DOM事件:事件和时间的处理
3.DOM样式:操作CSS的样式接口
4.DOM遍历和范围:如何遍历文档树和操作文档树
最后是DOM3,这个版本扩充了一些键盘的用户事件
添加了加载和保存文档的方法。
新增验证文档的方法。
对dom核心进行拓展:支持XML1.0
3.BOM 浏览器对象模型
Bom类似于DOM,他两的区别从名字上我们就可以看出端倪。
DOM是针对操作文档树的API接口,那么BOM对象就是用于操作浏览器行为的。
BOM的主要功能有:
1.弹出新浏览器窗口
2.移动、缩放、关闭窗口
3.提供浏览器的详细信息(navigator)

4.提供页面详细信息(location)

5.提供用户屏幕分辨率等信息(screen)

6.对cookie的支持
7.XMLHttpRequest 和 ActiveXObject
用于上述操作的对象可以说都是BOM
Javascript高级编程学习笔记(1)—— JS简介的更多相关文章
- Javascript高级编程学习笔记(3)—— JS中的数据类型(1)
前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...
- Javascript高级编程学习笔记(5)—— JS操作符
话不多说,开始今天的码字之旅. 突然有种日更小说的感觉,emm... 操作符 ECMAScript(JS核心)描述了一组用于操作数据值的操作符,也包括算术操作符等等 而JS中这些操作符最鲜明的特点就是 ...
- Javascript高级编程学习笔记(4)—— JS中的数据类型(2)
接着昨天的文章,今天这篇文章主要讲述JS中剩余的两种数据类型String,和Object String类型 对于该类型,书中给出的解释为:由0或多个16为Unicode字符组成的字符序列. 对于JS中 ...
- JavaScript高级编程学习笔记(第三章之一)
继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...
- Javascript高级编程学习笔记(97)—— WebGL(3) WebGL上下文(1)
WebGL上下文 在支持WebGL的浏览器中,WebGL的名字为 "experimental-webgl",这是由于 webgl 的规范仍未制定完成 制定完成后名字就会改为简单的 ...
- Javascript高级编程学习笔记(57)—— 事件(1)事件流
事件 JS与HTML的交互是通过事件实现的 而事件指的就是:文档或浏览器窗口特定的交互瞬间 可以通过侦听器来预定事件,以便在事件发生时执行相应的代码 这种模式也是设计模式中的观察者模式 事件流 有了事 ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(25)—— 函数表达式(3)模仿块级作用域
昨天写了闭包 今天就来聊聊块级作用域的事情 在绝大多数编程语言中,都有块级作用域这个概念 什么是块级作用域呢? 前面我们在刚开始讲的时候说过,JS中的大括号(不在赋值运算符的后面)表示代码块 块级作用 ...
随机推荐
- Nginx 中利用 Lua 脚本做访问控制
使用场景 需要在后端服务之前做访问控制,或没有后端服务的场景,如静态文件. 实验环境 Ubuntu 14.04 Nginx 1.4.6 安装 Lua 运行环境 sudo apt-get install ...
- css3——border-image属性的用法
项目需求是实现鼠标移到按钮上时,下方显示一张渐变的三角图片,于是想到使用border-image来实现. 实现;//向外偏移10px,可使边框内部的内容不是那么紧凑border-image-repea ...
- 为什么MySQL数据库要用B+树存储索引?
小史:树的话,无非就是前中后序遍历.二叉树.二叉搜索树.平衡二叉树,更高级一点的有红黑树.B 树.B+ 树,还有之前你教我的字典树. 红黑树 一听到红黑树,小史头都大了,开始抱怨了起来. 小史:红黑树 ...
- 使用Nexus搭建私有Nuget仓库
前言 Nuget是ASP .NET Gallery的一员,是免费.开源的包管理工具,专注于在.Net / .Net Core应用开发过程中第三方组件库的管理,相对于传统单纯的dll引用要方便.科学得多 ...
- sublime text 3 package Install 安装失败解决方法
失败原因为官网地址被墙,导致channel_v3文件无法访问. 解决方法: 点击Preferences——>Package Settings——>Package Control——> ...
- Spark内核
一些名词概念 AM : ApplicationMaster RM : ResourceManager NM : NodeManager Backend : 后台 RpcEnv : RPC 进程和进程的 ...
- 蓝桥杯 卡片换位(bfs)
卡片换位 你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子 在其中放5张牌,其中A代表关羽,B代表张飞,* 代表士兵.还有一个格子是空着的. 你可以把一张牌移动到相邻的空 ...
- linux查看空间情况----df与du命令
1.查看整个磁盘空间使用情况,可以使用命令 :df -h 2.获取当前的文件夹下的磁盘使用情况,可以使用如下命令:du --max-depth=1 -h 使用 du --max-depth=1 - ...
- native的详细用法
目录 1.JNI:Java Native Interface 3.用C语言编写程序本地方法 一.编写带有 native 声明的方法的java类 二.使用 javac 命令编译所编写的java类,生成. ...
- v-charts修改点击图例事件,legendselectchanged
html: <!--折线图--><ve-line :extend="item.chartExtend" :data-zoom="dataZoom&quo ...