前端开发学习笔记（二）JavaScript DOM编程技术（一、二）

陆陆续续看了将近2周的时间，其实书中的内容不难理解，只不过最近的事情较多，不能静下心来。

第一章 JavaScript简史

采用标准化的思路来建立网站，引入“WEB标准”技术。XHTML + CSS + DOM
DOM属于第三方技术，但由W3C批准。其可以改善文档的可交互性。

1.起源

JavaScript由Netscape于Sun合作开发，为了给网页增加可交互性。
其1.0版本在1995年推出，而后Netscape和Sun联合ECMA（欧洲计算机制造商协会）对JavaScript语言进行了标准化，也就是ECMAScript语言
1996年推出JavaScript 1.1版本

　　JavaScript是脚本语言，不能脱离Web浏览器而独立运行（目前有Node.js后台也可）

　　DOM：是一套对文档的内容进行抽象和概念化的方法

2.浏览器之争

1997年 NN4 和IE4发布，极大扩展了DOM和DHTML（HTML+CSS+JAVASCRIPT)，但由于浏览器的兼容性问题，很快被大家所忘记
1998年浏览器厂商携手W3C的DOM标准，推出了DOM Level 1，从此开始不同浏览器对DOM兼容
到了NN6和IE5，都加大了对W3C标准的支持

　　W3C对DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的对内容、结构和样式进行访问和修改。

　　是DOM将HTML、CSS、JavaScript凝聚在一起。

DOM脚本编程的原则：

1）平稳退化

2）渐进增强

3）以用户为中心

最佳实践：

分离。HTML负责结构；CSS负责样式；JavaScript负责交互

第二章 JavaScript语法

　　命名规则

变量区分大小写
一般采用驼峰风格命名，函数命名首字母小写（例如：prepairData();）、变量最好加入下划线（例如：my_Data）、对象首字母大写（例如：Person）
变量可以不用事先声明而直接赋值

　　数组使用

在声明时指定长度，例如：var list = Array(4);
在声明时不指定长度，例如：var list = Array();
声明时初始化，例如：var list = Array("John", "Paul");
声明时初始化，使用中括号，例如：var list = ["John", "Paul"];
关联数组的使用，即不使用数字下标，而使用字符串（名称），例如：lennnon["name"] = "John"; 类似于key = value 的方式。这种方式可读性较强，但一旦使用关联数组后，就不能使用数字下标访问

　　对象使用

对象声明，例如：var lennon = new Object(); Object是对象，lennon是实例
对象赋值，使用“.”操作符，例如：lennon.name = "John";
对象初始化，使用大括号，例如：var lennon = {name: "John", Year: 1940};
三类：用户定义对象（在脚本中定义）、内建对象（JavaScript内建，如：Date、Array等）、宿主对象（Web浏览器等，如Form、Window等）

　　全等操作符

===，三个等号，用于比较两个变量的值和类型均相等。而==只用于比较值相等
例如：var a = false; b = ""; if (a == b) { ... } 比较结果为 True ，因为空串与 False 的值相同

　　循环操作

while ( ) { ... } 执行 0 次 / 多次。
do { ... } while ( ) 执行 1 次 / 多次。
for ( ; ; ) { ... } 事先清楚执行的次数

　　注意事项

<script>标签最好放在Html文档的最后</body>标签之前，这样可以使刘拉起更快的加载页面。
+操作符可以操作数字和字符串，因此在进行+操作时一定要注意两边的值类型，否则非常容易出错。例如："10" + 20 = 1020
注意==比较运算符和=赋值操作符，尤其是在写条件语句时，一定不能出错，否则很有可能导致错误
函数正在的价值体现在，我们还可以把它们当做一种数据类型来使用，而这意味着我们可以把一个函数的调用结果赋值给一个变量
作用域：全局、局部、实例。局部变量的优先级大于全局变量，在函数内定义了局部变量后，如果存在重名的全局变量，则操作的变量就是局部变量，需要注意。

第三章 DOM

D(文档)

O (对象) 主要指Document对象

M (模型/地图) 文档的表现形式（节点树）

1.节点（指文档树中的树枝和树叶）

　　节点类型

元素节点（element Node)用于形成文档的结构，根是HTML元素；
文本节点（text Node)形成文档的内容，其总被包含在元素节点内部；
属性节点（attribute Node) 对元素做出更具体的描述，其总是被包含在元素节点中，而且是放在起始标签里。

2.CSS（层叠样式表）

　　用于设置显示效果，其作用于文档。

　　CSS的设置具有继承特点，如：作用于<body>元素，则会将显示风格一直覆盖到<body>内所有的元素中。

　　为了将显示效果作用于特定的元素上，需要使用“挂钩”

使用标签名TagName，如<div>
使用类名className，如自定义的warning
使用ID（一个页面中唯一），如pwd

　　DOM提供接口来查找这些挂钩。

3.常用方法

　　查找节点

getElementById(id)，通过Id属性检索元素对象，返回一个对象
getElementsByTagName(tagName)，通过标签名来检索元素，返回元素数组。标签名支持通配符”*“，表示所有节点
getElementsByClassName(className)，通过类名来检索元素，返回元素数组（HTML5新增）不支持通配符。如果一个元素节点包含多个类名，如：class="shop sale important"，支持查找多个类名（参数className中包含多个类型），且类名的先后顺序不影响。

　　通常我们一般使用Document对象的上述方法来查找，也可以在指定对象上查找下属节点，例如：

　　var shopping = document.getElementById("purche"); //查找Id属性为purche的元素

　　var lists = shopping.getElementsByTagName("*"); //查找该元素下的所有子节点

　　节点属性

getAttribute(attrName) 查询元素属性。如果不存在，则返回空字符串
setAttribute(attrName, attrValue) 设置元素属性。如果不存在，则创建该属性

　　不属于document对象，只能通过元素节点对象调用（文本节点不支持）

第四章 JavaScript美术馆（案例）

1.元素对象的属性访问有两种方式

使用getAttribute/setAttribute方法
使用元素对象的属性，例如：Image.src

第二种方式的可读性强，但第一种方法的兼容性更好。

2.事件处理器

　　事件处理器 = ”语句“ ，如：onclick = " ... "

语句可以有多条，用”；“分割即可
如果事件处理器有默认处理程序，则执行完自定义程序后，还会继续处理默认程序
使用返回值，可以指示默认处理程序是否执行。如：<a οnclick="return false">则用户单击该链接，将不会跳转到指定的网页，因为返回false表示默认处理程序不执行

3.childNodes属性

　　元素的所有子元素，返回一个数组。包含了所有元素节点和文本节点。

4.nodeType节点类型

　　节点类型有12个值。但常用的只有三个：1-元素节点；2-属性节点；3-文本节点

5.文本节点值

　　nodeValue属性。文本节点一般是作为元素节点的子节点，文本节点没有其他的属性值，nodeValue表示文本内容。

　　元素节点没有nodeValue属性

第五章 JavaScript编程原则、良好习惯、最佳实践

　　1.最佳实践

不要滥用JavaScript，遵循”用户至上“的原则设计网页。使用前确认：这样做对用户的浏览体验产生怎样的影响。（个人理解：主要是JavaScript在不同浏览器中的兼容性，以及个别用户禁用JavaScript功能后的体验）
应该只在有绝对必要的情况下才使用弹出窗口，这将涉及到网页的可访问性问题。如果网页上的某个链接将弹出新窗口，最好在这个链接本身的文字中予以说明
Css技术的特点是将文档结构同文档样式分离，可以确保各有关网页都有预留退路
如果想用JavaScript给某个网页添加一些行为，就不应该让你的JavaScript代码对这个网页的结构有任何依赖。
JavaScript脚本只应该用来充实文档的内容，要避免使用DOM技术来直接插入核心内容。

　　2.编程原则

平稳退化。例如：<a href="Images\A.jpg" οnclick="showPic(this); return false;" title="..." >。若我们不设置href为有效的地址，如果用户禁用了JavaScript功能，用户将无法访问。
渐进增强。标记良好的内容就是一切，只有正确的使用标记语言才能对内容作出准确的描述。用一些额外的信息层去包裹原始数据，按此原则创建出来的网页几乎都符合”预留退路“原则。（个人理解：用户体验做的再好，核心还是内容，不要舍本逐末）。例如：第一步：内容 + 标记（保证可用）；第二步：CSS显示效果（可用不可用）；第三步：Js + DOM交互动作（可用不可用）。渐进增强 = 分离（解耦）通过挂钩（class、id等）
分离JavaScript。分离元素的事件处理函数；在文档加载时把事件添加到元素上。可以借鉴css，使用Class或者ID设置，在JavaScript中根据查找到的元素来设置。
向后兼容。对DOM的操作做到向后兼容。
- 对象监测 if (method) { ... } 用来监测浏览器对于语句的支持情况，注意: method方法不能带()；
- 浏览器嗅探技术（不推荐）
性能考虑。
- 尽量减少访问DOM/尽量减少标记。访问DOM会搜索整个树，如果多次调用会增加性能问题。如必须访问，则尽量将查询结果保存到变量中；过多不必要的元素只会增加DOM树的规模，增加遍历的时间。
- 合并和放置脚本。将外部脚本尽可能合并，减少加载页面时发送的请求数量；脚本在标记中的位置对页面的初次加载时间也有很大的影响，推荐将<script>标签放到</body>标签之前，就可以让页面变得更快。
- 压缩脚本。去除空格、注释、更短的变量名等减少文件大小，可以使用工具完成（JSMin、YUICompressor、Closure Compiler等）；保存两个版本：工作版和精简版，精简版命名中加入min字样（如：scriptname.min.js）

第九章 DOM-CSS

　　用JavaScript影响样式。

　　网页 = 结构层（文本+结构 | text + tag） + 表示层（css） + 行为层（JavaScript + DOM）

　　也可以理解为：文章 = 名词 + 形容词 + 动词

利用元素的style属性，可以访问样式（但访问不到css中设置的样式）强烈不推荐。
样式应有CSS负责，尽量避免使用JavaScript。但也可以使用JavaScript来处理一些特殊样式。css3以及各种类库中，收录了大量的补充的样式设置功能，如跟位置有关的tr: nth-child(odd) { ... }表示选择表格中的基数行。
各种浏览器对于CSS的特性支持不同，为了兼容的更好，也需要使用一些JavaScript脚本。
何时使用CSS、何时使用DOM来设置样式？原则是最简单、最容易实现的方法。
如果想改变某个元素的呈现效果应使用CSS、如果想改变某个元素的行为使用DOM，如果根据某个元素的行为去改变它的呈现效果：自己考虑（简单、兼容性好）
用DOM对元素的样式（style属性）直接进行设置是不推荐的。建议间接使用DOM设置元素的className，让CSS起作用。
对函数进行抽象，就是将有针对性的小范围变成通用的大范围，也就是通过参数化来提高代码的可重用性
DOM与CSS相比的优势：可以周期性的重复执行一组操作；通过周期性的改变样式信息，可以实现CSS无法实现的效果。

第十一章网站实战

　　重点学习了如何一步步将一个网站变为现实，其中涉及到了一些思路、方法和步骤，非常值得边思考边实践。

　　需求

　　1.目标：为一个虚拟的乐队创建一个网站，向大众提供信息

　　2.要求：可交互。良好的访问性、支持搜索

　　3.材料：文字信息、照片、演出日程

　　开始

　　1.创建一份网站地图（结构）

存储目录
- /images 存储图片
- /styles 存储样式表
- /scripts 存储JavaScript脚本
页面（网站地图）
- 访问照片 Photos photos.html
- 演出目录 Live　live.html
- 交流联系 Contact contact.html
- 简介 About about.html
- 主页 Home index.html
模板: 为页面创建通用模板

　　2.网页结构

页面组成：标题、导航、内容（确定网页的结构性元素，架构）
使用<div>标签，形成页面结构（HTML5中增加了新的标签：Header、Footer、Nav等）
保存为模板

　　3.视觉效果（图形设计工具PS等）

使用图形设计工具制作效果图
经过多次沟通修改后定稿
切图（配色、图标、图片）。图片存入/images文件夹中，命名要可读

　　4.CSS样式

根据视觉效果，形成CSS样式表
形成多个样式表。layout.css与页面布局有关；color.css与颜色有关；typegraphy.css与字形有关；basic.css将上述文件引入，作为页面link的文件
编制颜色样式
编制布局样式
编制字体样式

　　5.JavaScript交互

增加特效
增加Form表单验证工作

　　高质量

足够健壮
足够的预留退路
层次分离（HTML、CSS、JavaScript）
使用有意义的标记来构造内容；使用CSS把样式信息与核心内容分离开来；使用有着足够预留退路的JavaScript脚本添加操作行为

第十二章 HTML5（第二版增加）

　　主要介绍了HTML5的一些新特性和标准的历程。

新标签。如：Header、Footer、Section、Article、Nav等
CSS3。增加了动画、渐变、位置相关的选择器
新动作。<canvas>、<video>、<audio>等新增了对应的JavaScript API和DOM API。

最后一章库（第二版增加）

　　1.库的定义，可重用的代码包

　　优势

经过了大量的测试和验证
很容易与现有的开发框架继承
为大多数日常琐碎的DOM编程工作提供了方便、简洁的方案。每个函数都能节省很多行代码
很好的解决了跨浏览器问题
极大地提升了工作效率

　　不足

别人编写的很难调试BUG
加重了页面加载的负担
多个库很有可能造成冲突

　　建议：不仅要会使用库，更应该了解其工作机制。

　　2.如何选择库

具备你需要的所有功能？尽量少使用功能重复的多个库
功能比你想的要多？过多的无用功能会导致性能问题
是否模块化？是否可以动态加载所需模块
支持情况如何？开发社区的活跃度、使用人数的多少
有文档吗？
许可适合吗？

　　3.内容分发网络（CDN）

可以解决分布共享库的问题，在多个服务器上存储库的副本，当用户访问时提供最快的服务，解决系统瓶颈问题。
为了提高可用性，可以设置多个库链接

转载于:https://www.cnblogs.com/lijie726/p/4974512.html

前端开发学习笔记（二）JavaScript DOM编程技术（一、二）相关推荐

前端开发学习笔记（一）：HTML
前端开发学习笔记(一):HTML 文章目录前端开发学习笔记(一):HTML 一. HTML的文档结构二.标签属性 2.1. 标签属性 2.2. 文字格式化标签 2.3. html实体转义三. t ...
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发
Polyworks脚本开发学习笔记(十六)-用C#进行Polyworks二次开发 Polyworks支持C#二次开发,用对应的SDK文档试着做一下开发样例. 新建一个C#项目,在解决方案中右键添加引用 ...
前端开发学习笔记（一）深入浅出Javascript
从事开发工作已经有十几年时间了,但一直没有真正涉猎WEB开发,这在当今IT业界听起来有些不可思议哈.从今天开始静下心来,全面深入的学习WEB开发的有关知识.将学习的体会和要点记录下来,以作备忘. 深入 ...
HTML+CSS前端开发学习笔记
HTML+CSS 学习路线: 1.HTML 1.1基础概念 web标准: 基本结构标签: html骨架: <!DOCTYPE>标签:文档类型的声明标签 <!DOCTYPE html& ...
前端开发学习笔记（二）
天下文章一大抄,本文大部分为网页摘抄哦啊. 一直记不住这两个单词的意思.column:列:row:行 min-height: 最小高度兼容代码: .minheight500{min-height:50 ...
前端开发学习笔记04---JavaScript
内容摘自w3school JavaScript 是一门脚本语言,被设计为向 HTML 页面增加交互性.JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及 ...
前端开发学习笔记 - 1. Node.JS安装笔记
Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...
Web前端开发学习笔记（一）
Day 1 课程内容一.字符编码字符编码(英语:Character encoding)也称字集码,是把字符集中的字符编码为指定集合中某一对象(例如:比特模式.自然数序列.8位组或者电脉冲),以便文 ...
Web前端开发学习笔记（2）（css3新特性）
一.圆角边框与阴影圆角边框(border-radius) border-top-left-radius 左上角的形状 border-top-right-radius 右上角的形状 border-bo ...

前端开发学习笔记（二）JavaScript DOM编程技术（一、二）

前端开发学习笔记（二）JavaScript DOM编程技术（一、二）相关推荐

最新文章

热门文章