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

第五章:

1.题外话:首先大声疾呼,"js无罪",有罪的是滥用js的那些人。js的father 布兰登-艾克,当初为了应付工作,10天就赶出了这个js,事后还说人家js是c语言和self语言”约“的产物,(百度百科说的,这些)。。。。。一个可怜的孩子-js。然后命运弄“人”,js此时已世人皆知。可能是因为js的毁誉参半,它老爸才不想承认它吧。如果js会说话,它可能会给它布兰登-艾克说,“你当初怎么不把*******在墙上”。这让我想起了,一个老故事:老木匠干了一辈子,退休前,领导说,你再最后建一座房子,老木匠心里只想着辞职,房子建的着急,也不好。房子完工以后,老板把房子钥匙给了老木匠,说是送给他的。。人呐,还是认真工作,认真生活的好。事情永远总是猜不到的。

2.题外话:大家都在赶潮流,而不问实际需求,我们公司的客户就是这样的滴:“这个人家的网站有,我们也要有。”

3.1)平稳退化:①含义:让禁用了js的用户,以让可以访问网站。(网上大部分人说,没有人会去特意关闭js。还有还有-‘“关闭js的那些刁民,是不配享受这高大上的技术的呢”)

②这么做,虽然让禁用了js的用户体验不如没有禁用之前的好,但总比不能访问的好。

       ③平稳退化的:有利于seo,因为搜索机器人大都不认识js。

④说实话,除了书中例举的这个href的实例,我还没有想到其它的平稳退化的例子。。。。。。。。。。

3.2)渐进增强:①含义:分离内容(html),样式(css),行为(js)

②打个"碧玉":一颗糖,报上糖纸(样式)很漂亮,去掉糖纸依然,可以食用(内容)

3.3)向后兼容:①含义:铺好退路,做好预防----如果网页中,没有了正在使用的元素或者无法获取需要使用的元素怎么办。

       ②常用技术-对象检测技术(现在常用方法。使用时记得去掉括号,否则测试的将是结果。效果相当于对浏览器的一个警示牌:如果没有这个方法,请你离开)

-浏览器嗅探技术(随着浏览器的五花八门,这种技术多少显的有气无力)

4.小知识点:①获取当前链接的href属性-this.href

②return false;常常用于阻止a标签的默认跳转行为和表单的默认提交行为(submit)。含义是告诉浏览器:”按照该链接没有点击的情况采取行动“

1 <a href="https://www.baidu.com" onclick="windowOpen(this.href);return false;">点我哦</a>

       这里同时采用了一下书中提及的平稳退化的技术-即使用户关闭了js,js链接以前可以跳转。

③return  后面的代码不会执行(一般为了阅读性也写作return false),但是只对当前函数有效:

 1         (function(){
 2             if(1==2){
 3                 console.log("1");
 4                 return false;
 5             }
 6             for (var i = 0; i < 1; i++) {
 7                 console.log("2");
 8                 return false;
 9             }
10             console.log("3");
11         })();
12         console.log("4");

        最后会打印出2和4

5.题外话:网站不过是文档和数据的结合,图片不过是像素点的组成。万物归于简单,由简单又幻化出复杂。

6.题外话:前端收集用户数据---数据存入数据库----生成模型----用于决策等

决策----生成模型-----数据库生成数据---前端展示数据

7.题外话:这本书还是挺适合刚刚工作的人的。可以说是一种查漏补缺把

8.性能优化:①尽量少去访问dom:

工作的时候,会偷懒,写如下的代码:

1 if(document.getElementById("imgShow")){ 2 alert() 3 }

         但是这样写:a,每次判断,都会搜索整个dom树。效率低下,不如搜索一次,存在变量中的方法效率高。

②减少dom标签。

前几天,网站轮播需要修改,我想的是增加一个div+js去实现效果。而项目经理的意思是通过css去实现

        过多的dom标签会增加dom树的规模,增加搜索成本。

③合并和放置脚本:

一直都知道js应该放在末尾,当时具体在哪里不是很清楚。----应该放在文档末尾,</body>标签以前

④压缩脚本:

除了书中提及的三个工具,还可以使用grunt。

第六章:

  1.此章,主要是把上一张的思想,结合到实例中。

2.结构化程序设计:

工作中,会写出如下代码:

1                 if (222) {
2                   if(111){
3                     if(3333){
4
5                     }
6                   }
7                 }  

这些写,会对后期的修改带来很多不便。并且阅读不方便。

这样的思路是:如果正确就这行。可以修改一下思路为,如果错误就停止。则代码变成了:

                if (222) {return false;}
                if (111) {return false;}
                if (333) {return false;} 

也可以用if else-if结构去代替结构化的写法:

                if (222) {}
                else if (111) {}
                else if (333) {} 

3.小知识点:①for循环中经常用到i,变量命名为i是一种传统做法:i的含义是”increment“(递增)

②可以使用三元运算去代替if-else,使得代码简短,不过逻辑关系表达不明显。用哪个,看你心情喽

③onclick事件对于键盘的访问的支持已经不错了(ps:在所有浏览器里,用tab键移动到某个链接以后,然后按下回车都会出发onclick事件),所以无需特意去绑定一次键盘事件。

④如何让ul里面的li横向排列,并且居中呢?ul设置为text-align:center;li设置-display-inline即可。网上好多使用postion:relative的方法。好麻烦的说。

4.题外话:人生就好像在网上查东西,查着查着就跑偏了,你得经常问一下自己:”我在干嘛“。

5.题外话:有一种小时候记录流水账的感觉。不过能说出,看书的想法也是一种不错的感觉。

6.题外话:网上的太多东西都是抄袭,抄书(一字不差),抄百度百科,抄抄抄,换个背景就说自己是自己写的。。。。

时间: 2024-10-23 16:49:20

JavaScript DOM编程艺术-学习笔记(第五章、第六章)的相关文章

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

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

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编程艺术学习笔记-第二章JavaScript语法

一.JavaScript示例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>Just a Test</title> 6 </head> 7 <body> 8 <script src="example.js"></scr

JavaScript DOM编程艺术学习笔记(一)

第一章 JavaScript简史 1.1 JavaScript的起源 JavaScript是Netscape公司和Sun公司合作开发的.JavaScript的第一个版本,即JavaScript1.0版本,出现在1995年推出的Netscape Navigator2浏览器中.JavaScript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行. 1.2 DOM 简单地说,DOM是一套对文档的内容进行抽象和概念化得方法. 1.3 浏览器战争 1.3.1 DH

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

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

【干货】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编程艺术学习笔记(二)

第二章 JavaScript语法 2.1 准备工作 编写JavaScript的环境:文本编辑器 + Web浏览器 用JavaScript编写的代码必须通过HTML/XHTML文档才能执行.有两种方式可以做到这点. 第一种是将JavaScript代码放到文档<head>便签中的<script>标签之间: <!DOCTYPE html> <html lang="en"> <head> <meta charset="

JavaScript DOM编程艺术学习笔记(四)

第四章 案列研究: JavaScript图片库 利用JavaScript来创建图片库将是最佳的选择:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他. 时间处理函数(event handler)的作用是,在特定时间发生时调用特定的JavaScript代码.例如,如果想在鼠标指针悬停在某个元素上时触发一个动作,就需要使用onmouseover事件处理函数;如果想在鼠标指针离开某个元素时触发一个动作,就需要使用onmouseout事件处理函