《JavaScript Dom 编程艺术》读书笔记-第7章

JavaScript DOM编程艺术读书笔记(三)

第七章动态创建标记在web浏览器中往文档添加标记,先回顾下过去使用的技术: <body> <script type="text/javascript"> document.write("<p>This is inserted.</p>"); </script> </body>document.write:缺点就是违背了"行为与表现分离的原则",即使把这句语句挪到外部,还是…

第五章最佳实践平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某些功能无法使用,但是最基本的操作仍能顺利完成 window.open(url,name,features); 打开一个新的窗口这个函数是使用BOM的好案例url 新窗口的链接name 新窗口的名字代码里边可以通过这个name和新窗口通信features 新窗口的各种属性比如尺寸或者被启用或者…

JavaScript DOM编程艺术读书笔记(一)

第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML(Dynamic HTML):动态HTML的简称,不是一项新技术,而是通过HTML CSS 和Javascript组合的.DHTML背后的含义其实就是: 利用HTML把网页标记为各种元素: 利用CSS设置元素样式和它们显示的位置: 利用JavaScript实时地操纵页面和改变样式. 但是虽然浏览器制造…

JavaScript DOM编程艺术 - 读书笔记1-3章

1.JavaScript语法准备工作一个普通的文本编辑器,一个Web浏览器. JavaScript代码必须通过Html文档才能执行,第一种方式是将JavaScript代码放到文档<head>标签中的<script>标签之间:一种更好的方式是把JavaScript代码存为一个扩展名为.js的独立文件,在文档<head>部分放一个<script>标签,并把它的src属性指向该文件. 但最好的做法是把<script>标签放到HTML文档的最后,&l…

JavaScript DOM编程艺术读书笔记

2. JavaScript语法 2.1 注释 HTML允许使用"<!--"注释跨越多个行,但JavaScript要求这种注释的每行都必须在开头加上"<!--"来作为标志.JavaScript解释器对"<!--"的处理与对"//"的处理是一样的. 2.2 变量在JavaScript语言中,变量和其他语法元素的名字都是区分字母大小写的. JavaScript语法不允许变量中包含空格…

JavaScript DOM编程艺术读书笔记(四)

第十章实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"; 第一个参数是个字符串,所以需要单引号!!! move_elem = setTimeout(repeat,interval); //复制给一个变量,当我们想取消一个正在排队等待执行的函数,可以用clearTimeout(mov…

JavaScript DOM编程艺术-学习笔记（第二章）

1.好习惯从末尾加分号:开始 2.js区分大小写 3.程序界万能的命名法则:①不以,数字开头的数字.字母.下划线.美元符号 ②提倡以下划线命名法来命名变量,以驼峰命名法来命名函数.但是到了公司往往会身不由己的.不过是个好习惯 4.数据类型:①标量:(数字,字符串,布尔值) - 标量,在任何时刻只能有一个值. ② 集合:(数组[ 索引数组,关联数组 ],对象) 5.闲话布尔值:电子设备的终极原理:0和1.他们远比人心简单,0就是0 ,1就是1.不会说是吗0包含1,1包含1之类的人生哲学. * 6…

《javascript dom编程艺术》笔记（一）——优雅降级、向后兼容、多个函数绑定onload函数

刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级看到版本翻译为预留退路,刚刚看到个名词,我觉得很奇怪,以前没有听说过啊.不过看到英文注释就知道了Graceful degradation不就是优雅降级么,听说过! 书中举了个例子,点击一个链接,弹出一个窗口的方法. function popUp(WinURL){ window.open(WinURL,&quo…

JavaScript DOM编程艺术学习笔记（一）

嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推荐给想了解HDOM的相关人员!首先非常感谢作者写出了这么好的一本书,谢谢!书中的内容比较多,我仅记下我认为对自己和他人有所帮助的一些内容! 嗯,首先还是让代码来说话吧! 下面是两段此书中反复强调且通用的经典代码段 1:相当的经典和实用,尤其是当需要为页面加载函数绑定多个函数的时候 /** * [addLoad…

JavaScript DOM编程艺术-学习笔记

发现基础不是很好,补习一下.37买了2本书(dom编程和高级程序设计). 以前读书总是自己勾勾画画,有点没意思.现在写下来,说不定会成为传世经典.哈哈...........随便扯扯淡. 第一天(2016年12月11): 1.js由网景和sun公司合作开发. ECMAscript-标准化的JS js最开始叫做LiveScript 2.Dom 是一套大家约定俗称的标准.比如,大家把那种有4个轮子,会跑的东西叫做汽车 dom是一种api.在软件开发领域来说,api是前端与后台约定好的一套标准,前端发送…

《JavaScript DOM编程艺术》笔记一

1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagName.getElementsByClassName返回对象数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>Sh…

【JavaScript DOM 编程艺术】笔记

第一章:JavaScript 简史 1.1 javascript的起源 JavaScript是一种脚本语言,通常只能通过web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,需要由Web浏览器进行解释和执行. 1.2 DOM DOM是一套对文档的内容进行抽象和概念化的方法. DOM是一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地访问和修改文档的内容.结构和样式. 1.3 浏览器战争 1.3.1 DHTML DHTML是 "Dynamic HTML” (动态HTML…

JavaScript DOM编程艺术学习笔记-第二章JavaScript语法

一.JavaScript示例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Just a Test</title> </head> <body> <script src="example.js"></script> </bod…

JavaScript DOM编程艺术学习笔记-第一章JavaScript简史

一,JavaScript的起源 JavaScript是Netscape与Sun公司合作开发,它是一种脚本语言,通常只能通过Web浏览器去完成一些操作.JavaScript为程序员提供了一些操控Web浏览器的手段. 二,DOM DOM是一套对文档的内容进行抽象化的方法. DHTML(动态HTML)的含义: 利用HTML把网页标记为各种元素利用CSS设置元素样式和它们的显示位置利用JavaScript实时地操控页面和改变样式三,制定标准 W3C于1998年完成了第一个DOM标准,随后,各大厂商…

【干货】JavaScript DOM编程艺术学习笔记4-6

四.案例研究:JavaScript图片库 js: function showPic(whichpic){ //取得链接 var source=whichpic.getAttribute("href"); //取得占位图 var placeholder=document.getElementById("placeholder"); //改变占位图src属性 placeholer.setAttribute("src",source); //取得文字描…

【干货】JavaScript DOM编程艺术学习笔记1-3

从7月29号到8月8号,断断续续地看完了这本书,做了部分实践联系.总体感觉本书真的只能算是个入门,学完之后看到库的那一章才感觉是个大坑,实践中大部分应该都是用的现成的库吧,所以还要重新学习一个库,但是这本书也算是给这门语言包括DOM的学习打下了个基础,明白了这些底层的东西,才能将库这些用的更好吧.总体来说,难度入门级,阅读体验良好.注:看完书一定要自己敲敲代码,会出现很多你意想不到的错误,自己学着调试找出错误并改正,这也是一项必备能力吧. 一.JavaScript简史 JavaScript语言使…

《javascript dom编程艺术》笔记（二）——美术馆示例

这几天把这本书看完了,里面大部分知识我已经会了,所以看得就略简单,好多地方都没有再去动手去做,我知道这样是不对的,以后补吧. 现在我要做的是把这本书的笔记完结掉,不然总觉得有啥事没有做. 这个版本不是书中的最后版本,好像是第二版吧.后面还有动态创建结点的一版本,我已经在别的地方实践过了,就不再做了. 只贴出两个函数. //显示图片方法 function showPicture (whichpic) { //综合绑定的事件考虑,条件执行失败,希望浏览器可以让用户打开图片,因此在onclick处re…

JavaScript DOM编程艺术-学习笔记（第八章、第九章）

第八章 1.小知识点: ①某些浏览器要根据DOCTYPE 来决定页面的呈现模式(标准模式 / 怪异模式--也称兼容模式): 兼容模式意味着浏览器要模仿老一辈的浏览器的怪异行为,来让老站点得到运行,并让不规范的页面得到运行. 使用时应避免出发兼容模式. html5 DOCTYPE默认的是标准模式 ②abbr标签--简称.缩写.此标签到ie7才被ie支持 2.js只能充实文档内容,避免使用dom技术来创建核心内容. 避免使用dom设置重要样式第九章 1.css正在利用伪类(例如:hover.…

JavaScript DOM编程艺术-学习笔记（第七章）

第七章: 1.dom方法创建并且插入标签:(这种方法并没有改变文档的物理内容,而是在改变dom树) ①创建元素节点:createElement(); ②内部前插入:appendChild() ③创建文本节点:createTextNode(); ④设置属性节点:setAttribute(); ⑤外部前插入:父元素.insertBefore(插入的元素,目标元素); 插入的元素被插入到,目标元素的前面. ⑥没有inserAfter()函数. 2.小知识点:①appe…

JavaScript DOM编程艺术-学习笔记（总结一）

1.1)dom-core方法:(不专属于js,支持dom的任何一种程序设计语言都可以使用它,它们的用途,也不仅限于处理网页,也可以用来处理任何一种标记语言编写处理的文档) ①getElementById() ②getElementsByTagName() ③getElementsByClassName() ④getAttribute() ⑤setAttribute() 2)html-dom方法:(是html专用属性,不能用于任何其他标记语言文档) ①document.write(); ②…

JavaScript DOM编程艺术-学习笔记（第五章、第六章）

第五章: 1.题外话:首先大声疾呼,"js无罪",有罪的是滥用js的那些人.js的father 布兰登-艾克,当初为了应付工作,10天就赶出了这个js,事后还说人家js是c语言和self语言"约"的产物,(百度百科说的,这些).....一个可怜的孩子-js.然后命运弄"人",js此时已世人皆知.可能是因为js的毁誉参半,它老爸才不想承认它吧.如果js会说话,它可能会给它布兰登-艾克说,"你当初怎么不把*******在墙上".这…

JavaScript DOM编程艺术-学习笔记（第三章、第四章）

第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯一一个没有被其它元素包含的元素. 3.元素节点并非直接包含文本节点,例如:<ul><li>你好</li><ul> ul元素并没有直接包含文本元素 4.获取元素的方法: ①getElementById() ②getElementsByTagName () …

【干货】JavaScript DOM编程艺术学习笔记10-12【完】

十.用JavaScript实现动画效果鼠标放到链接上,每次只显示图片的一小部分,加快加载速度. js: function prepareSlideshow(){ //对象检测 if(!document.getElementsByTagName) return false; if(!document.getElementById) return false; if(!document.getElementById("linklist")) return false; //创建窗口元素…

【干货】JavaScript DOM编程艺术学习笔记7-9

七.动态创建标记在文档中不写占位图片和文字代码,在能调用js的情况下动态创建,文档支持性更好. 在原来的addLoadEvent prepareGallery showPic的基础上增加函数preparePlaceHolder 最后调用preparePlaceHolder和prepareGallery两个函数 function preparePlaceHolder(){ //对象检测 if(!document.createElement) return false; if(!document.…

JavaScript DOM编程艺术-学习笔记（第十二章）

第十二章 1.本章是综合前面章节的所有东西的,一个综合实例 2.流程:①项目简介:a.获取原始资料(包括文本.图片.音视频等) b.站点结构(文件目录结构) c.页面(文件)结构 ②设计(切图) ③css - base.css用于引入使用的css文件 color.css - 用于设置样式 layout.css - 用于设置布局 Typography.css - 用于设置版式 3.题外话:①在实际开发中,即使是一个空白项目也往往不会从一无所有做起,而借助的平台一般会提供目录结构,所以需要把自己…

JavaScript DOM编程艺术-学习笔记（第十章、第十一章）

第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页面中移动" 4.动画经常遇到的问题:鼠标来回移动,则动画就会出问题. 原因:队列事件积累. 解决:判断,如果此时有动画,则清空队列. 5.小知识点:①ceil 向上取整 ②floor 向下取整 ③round 取最近的整数第十一章 1."html5 问世背后的明争暗斗就像是一步韩国肥皂剧&…

《JavaScript DOM 编程艺术》笔记

一:这本书由几个案列带入知识点,通俗易懂.最大的收获莫过于作者多次提到的逐渐增强和平稳退化. "渐进增强"指的是给所用用户同等的基本使用体验,再根据用户终端的级别给予更高级的用户更为高效轻松的用户体验."平稳退化"同样是给所有用户同等的一个基准,但其方向却是与渐进增强相反,此方法是剥夺低级用户的一些体验. 二:解决部分浏览器不兼容html5.css3 的问题使用modernizr解决 https://modernizr.com/download?setclasse…

《JavaScript DOM编程艺术》笔记

1. 把<script>标签放到HTML文档的最后,<body>标签之前能使浏览器更快地加载页面. 2. nodeType的常见取值元素节点(1) 属性节点(2) 文本节点(3) 3. <a href="http://www.baidu.com" onclick="popUp(this.href);return false;">Example</a>…

DOM编程艺术读书笔记（须熟读）

http://www.qdfuns.com/notes/39151/00d8bc6322359f00450f492ae56bf69e.html…

Javascript DOM 编程艺术（第二版）读书笔记——基本语法

Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一部分东西的概念在初学时是无法完全弄懂的,很多时候都是学到很多东西后,串起来才能更进一步.而我的博客目地是自学与交流,所以我只能是暂时地用红字标注这些东西,以后弄懂了会补全这些(相应的,有些东西会删除).所以虽然说是某本书的读书笔记,但是写到后面绝对是不仅仅是局限于这本书了.所以不要指望着只看读书笔记…

【《JavaScript Dom 编程艺术》读书笔记-第7章】的更多相关文章