Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一部分东西的概念在初学时是无法完全弄懂的,很多时候都是学到很多东西后,串起来才能更进一步.而我的博客目地是自学与交流,所以我只能是暂时地用红字标注这些东西,以后弄懂了会补全这些(相应的,有些东西会删除).所以虽然说是某本书的读书笔记,但是写到后面绝对是不仅仅是局限于这本书了.所以不要指望着只看读书笔记…
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Netscape公司与Sun公司合作开发,在JavaScript之前,web浏览器只是显示文本文档的软件,JavaScript之后,网页内容不再局限于枯燥的文本,交互性显著改善.在JavaScript的第一个版本,即JavaScript 1.0版本,出现在1995年推出的Netscape Navigator…
这本书是一本很基础的书,但对于刚入前端不久的我来说是一本不错的书,收获还是很大的,对一些基础的东西理解得更加透彻了. 1.DOM即document object model的缩写,文档对象模型,JavaScript做的就是对DOM的操作,或者说对节点(node)的操作. 2.js中DOM.this这是都是对象,有属性有方法. 3.document对象有body属性,所以可以直接写成document.body,无需再获取body元素(document.getElementsByTagName("b…
1.DHTML DHTML曾被认为是HTML/XHTML.CSS和JavaScript相结合的产物,就像今天的HTML5那样,但把这些东西真正凝聚在一起的是DOM.如果真的需要来描述这一过程的话,“DOM脚本程序设计”更精确,它表示使用W3C DOM来处理文档和样式表. 2.关联数组 数组的下标不局限于数字,可以使用字符串来标识语义的数组. 3.宿主对象 除了内建对象,还可以在JavaScript脚本里使用一些已经预先定义好的其他对象.这些对象不是有JavaScript语言本身而是由它的运行环境…
1.DOM是什么 D=document(文档) O=object(对象) M=Model(模型) DOM又称节点树 一些术语: parent(父)   child(子)   sibling(兄弟)   node(节点) element node(元素节点)   text node(文本节点) 2.获取元素 1.getElementById(与typeof操作符) //getElementById 与 typeof //typeof操作符可以告诉我们它的操作数是一个字符串.数值.函数.布尔值还是对…
/* 渐进增强 平稳退化 网页 结构层(structural layer): HTML 表示层(presentation layer): CSS <link rel="stylesheet" href="style.css" media="screen"/> 行为层(behavior layer): JavaScript <script src="scripts.js"></script>…
第 5 章 最佳实践 平稳退化:现在基本所有带交互的网站都使用 Ajax,SAP 也火起来了,平稳退化真是很难实现了(看到第七章发现我之前的观点是错了) 分离 JS 向下兼容 性能考虑 第 6 章 案例研究:图片库改进版 键盘访问(提高可访问性) onclick 已经帮我们处理了,eg:下面这个绑定了 onclick 的按钮鼠标左键点击和 tab 然后回车一样弹出 "clicked" <!DOCTYPE html> <html lang="en"&…
最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发人员,喜欢前端,但是我不喜欢只知其然而不知其所以然的这个感觉,它让我感觉到恐惧.所以我决定充实一下自己的大脑.现在的人一说学习,都跑去网上看视频,跟着视频敲代码,说实话,这是一种快速入门的方法,能让我们快速的掌握这些开发技巧.但是也只有这点作用了,这就像工厂里面的工作一样,假如你是让别人告诉你第一步做什么,第…
介绍 JavaScript DOM编程艺术(第2版)主要讲述了 JavaScript.DOM 和 HTML5 的基础知识,着重讲述了 DOM 编程,并通过几个实例演示了具有专业水准的网页开发. 下面介绍一下各章节的讲到的内容. 第1章 JavaScript简史 本章主要讲解JavaScript的发展简史.不同的浏览器会采用不同的办法来完成一样的任务,这会影响JavaScript的发展,而DOM标准化,让这种情况有所改变.而本书要讲的就是JavaScript和DOM一起完成的任务,不需要讨论浏览器…
我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本是因为这本书从实例开始带领读者一步步学习,写作风格也如其名字一样具有艺术感,阅读起来很舒服.本书第一二三稍微有计算机基础的人阅读起来都不困难,也没有什么好记录的,从第四章开始,本书开始介绍案例图片库~每一节都是干货满满滴~ 第四章——案例研究:JavaScript图片库: 4.1 标记 无序清单元素<u…
嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad…
先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interval) { //测试JS兼容性代码 if (elem.movement) { clearTimeout(elem.movement); } //计算并移动elementID位置 var repeat = "moveElement('"+elementID+"',"+fi…
本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助,所以 如果您也看过这本书,希望不要喷小的"抄袭",其实我也懒得敲这些文字也想简单粗暴地上代码,但是只有实践没有理论不容易自己理解,为避免误导,该"抄"的地方还是要"抄"的,哈哈~~ 一.JavaScript的起源 JavaScript是Netscap…
在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function() { //需要判断…
刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 看到版本翻译为预留退路,刚刚看到个名词,我觉得很奇怪,以前没有听说过啊.不过看到英文注释就知道了Graceful degradation不就是优雅降级么,听说过! 书中举了个例子,点击一个链接,弹出一个窗口的方法. function popUp(WinURL){ window.open(WinURL,&quo…
前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看看就的了. JavaScript 语句 DOM…
目录 <JavaScript DOM 编程艺术> 学习笔记 第一章 js简史 第二章 js语法 准备工作 语法 第三章 DOM DOM中的D DOM中的O DOM中的M 第四章 js图片库 第五章 最佳实践 平稳退化 渐进增强 向后兼容 分离js 性能考虑 第六章 案例:图片库改进 第七章 动态创建标记 传统方法 DOM方法 Ajax 第八章 充实文档内容 <JavaScript DOM 编程艺术> 学习笔记 概念: 平稳退化 渐进增强 以用户为中心 第一章 js简史 可以使用DO…
最近把JavaScript DOM 编程艺术这本书看完了,觉得这本书很好 深入浅出地展示了渐进增强.平稳退化.结构和样式分离等编程思想,我对书中重要的知识进行了梳理总结. 一.网页 二.JavaScript 三.DOM 四.重要知识点 1.innerHTML (html属性,只有web文档支持) (1)读取 <div id="testdiv"><p>This is <em>my</em>content</p></div&…
JavaScript 简史 JavaScript 是Netscape公司与Sun公司合作开发的.在 JavaScript 1.0发布时,Netscape Navigator主宰着浏览器市场.微软在推出IE3的时候发布了自己的VBScript语言,同时以JScript为名发布了JavaScript 的一个版本,很快赶上了 Netscape 的步伐.面对微软公司的竞争,Netscape 和 Sun公司联合ECMA(欧洲计算机制造商协会)对JavaScript 语言进行了标准化,于是出现了ECMASc…
<JS DOM 编程艺术>笔记 一. 三种节点 元素节点.文本节点.属性节点 二. 获取元素 1.document.getElementById 2.(element)document.getElementsByTagName("*"),获取到数组对象(即使只有一个元素) 3.(element)document.getElementsByClassName("alpha beta"),获取到数组对象,需做兼容,获取多个类名无关顺序.无关其他类名 三. 获…
最近又看了一遍JS DOM编程艺术,照例来写一写读后感. 其实,我从中学到最深的是几个概念:1.平稳退化.当浏览器并不支持JS的时候网页的基本核心功能是还可以用的:2.逐渐增强.在原始的信息层上用其他层去增加其他信息.用CSS去增加效果,用JS去添加行为.当然某些浏览器可以支持部分的js,为了使旧浏览器可以用,不至于因为某些代码挂掉.3.将结构.表现.行为分离,而且分离越大越好. 然后我学到了简单的一点关于对象检测的技术,这在运用向后兼容原则时必要的,但文章太过保守,像:document.get…
动态创建标记 一些传统方法 document.write document.write()方法可以方便快捷的把字符串插入到文档里. 请把以下标记代码保存为一个文件,文件名就用test.html 好了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test</title> </head>…
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(2016年12月11): 1.js由网景和sun公司合作开发. ECMAscript-标准化的JS js最开始叫做LiveScript 2.Dom 是一套大家约定俗称的标准.比如,大家把那种有4个轮子,会跑的东西叫做汽车 dom是一种api.在软件开发领域来说,api是前端与后台约定好的一套标准,前端发送…
发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(2016年12月11): 1.js由网景和sun公司合作开发. ECMAscript-标准化的JS js最开始叫做LiveScript 2.Dom 是一套大家约定俗称的标准.比如,大家把那种有4个轮子,会跑的东西叫做汽车 dom是一种api.在软件开发领域来说,api是前端与后台约定好的一套标准,前端发送…
终于开始接着写我的读书笔记了. 17.DOM有insertBefore方法,但并没有提供insertAfter()方法.不过可利用已有的DOM方法和属性编写此函数: function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if(parent.lastChild == targetElement) { parent.appendChild(newElement); }else{…
今日看完了这本书,做完了最后一个综合性例子.说实话收获良多,终于明白前端-h5 具体做什么 越学习越无知,这个看来真是一个真理. 后期计划: 1.CSS + DIV 布局深入了解,重点实战 2.JavaScript 高级编程那本书吃透 3.后台与前端的数据交换 为什么我喜欢技术,很奇怪:-)…
阅读了本书第五章关于使用JavaScript的最佳实践,大部分的建议之前都有耳闻,不过阅读之后有更深的体会. 1.防止滥用JavaScript “不管你想通过JavaScript改变哪个网页的行为,都必须三思而后行.首先要确认:为这个网页增加这种额外的行为是否确有必要?” 个人认为,作者的这句话放在当前几乎无处不用JavaScript来增强Web页面交互体验的时代,可以理解为应该适当的使用JavaScript,而不要因为使用了实现酷炫效果的脚本导致网页加载缓慢或者兼容性极差而舍本求末,导致用户无…
三位一体的网页 结构层:由HTML或XHTML之类的标记语言负责创建: 表示层:由CSS负责完成: 行为层:负责内容应该如何响应事件这一问题.这是由JavaScript语言和DOM主宰的领域. 分离 使用(X)HTML去搭建文档的结构: 使用CSS去设置文档的呈现效果: 使用DOM脚本去实现文档的行为: 不过,在这三种技术之间存在着一些潜在的重叠区域:用DOM可以改变网页的结构,诸如createElement和appendChild之类的DOM方法允许你动态地创建和添加标记. 在CSS上也有这种…
<!--这章的内容略奇怪啊!可能是因为我之前没有接触过这些知识点,等以后用到的时候再回来翻阅吧,现在先简要介绍一下 js权限已通过,博客园好快的效率啊,谢谢O(∩_∩)O --> 缩略语 这段文本包含大量的缩略语,上面都已经用<abbr>标签把它们标识出来了. 有些浏览器会把文档中的缩略语(<abbr>标签)显示为带有下划线或下划点的文本,另一些浏览器则会把缩略语显示为斜体字. 缩略语(<abbr>标签)的title属性在浏览器里是隐藏的.有些浏览器会在你把…
最佳实践 平稳退化 网站的访问者完全有可能使用的是不支持Javascript的浏览器,还有一种可能是虽然浏览器支持Javascript,但用户已经禁用它了.如果没有考虑到这种情况,人们在访问你们的网站时就有可能遇到各种各样的麻烦,并因此不再来访问你们的网站. 如果正确使用了Javascript脚本,就可以让访问者在他们的浏览器不支持Javascript的情况下仍能顺利地浏览你的网站.这就是所谓的平稳退化,就是说,虽然某些功能无法使用,但最基本的操作仍能顺利完成. 下面来看一个在新窗口中打开一个链…