Chapter 0

为什么读这本书?作为js入门书,补基础,由于本书代码demo较简单,并没有贴代码,只记录一些自己要注意的知识点以及代码脚本

Chapter 1: javascript简史

DOM全称是document object model(文档对象模型),假设把文档看做一个对象,那DOM就是如何利用HTML和XML去对这个对象进行操作和控制的标准

  1.2 AJAX(异步传输技术)引发了一次学习DOM脚本编程的热潮:  

  传统的Web应用交互由用户出发一个HTTP请求到服务器,服务器对其进行处理返回一个新的HTML到客户端,然后每当服务处理请求时,客户端只能等待,而使用AJAX的异步处理机制,就可以在不更新整个页面的前提下维护数据,这一特点主要基于XMLHTTP和XMLHTTPRequest

  1.3 HTML5新特性:

   <audio>和<video>控制媒体
  <canvas>具备了完善的绘图能力
  浏览器本地存储超越了cookie的限制:
  cookie: 4kb,每次请求一个新的页面都需要发送过去,不可以跨域调用
  localstorage: 始终有效, 存储大小为5mb

Chapter 2: Javascript语法


 
 2.1 数据类型

Javascript是一种弱类型语言,程序员可以在任何阶段改变变量的数据类型
var age = 'china';
age = 26;
如果想在变量中使用单引号或双引号,必须使用\对字符串进行转义
var mood = 'don\'t ask';  // don't ask

  2.2 数组

数组的定义:
var arrs = Array();
var arrs = Array(4);

关联数组:
var arrs = Array();
arrs['name'] = 'Carlton';
arrs['age'] = '26';
arrs['living'] = true;

  2.3 对象

2.3.1 对象是什么:由一些属性和方法组成的的无序集合,当此特性为函数时,我们称之为对象的方法(method), 不是函数时,则称之为对象的属性(proporty)

var obj1 = Object();

obj.name = 'Carlton';

obj.age = '26';

obj.living = function(){

  alert(true);

}

var obj2 = {
  name: "Carlton",
  age: "26",
  living: function(){
    alert(true);
  }
}

  2.3.2 对象有哪些:

  内置对象:Array,Date,Math等  

  宿主对象:Form,Image(可访问img标签), Element,document

Chapter 3: DOM

  3.1 DOM概述

DOM拆开来看就是Document(文档)、Object(对象)、Model(模型)
对于HTML来说,DOM中document就是HTML文档, Object是供JS操作DOM的一些对象, Model是对HTML文档建立的一种模型,以tree的形式呈现
HTML文档就相当于一颗树,由不同的节点构成,关于节点:
整个文档就是一个文档节点
每个HTML标签就是一个元素节点
包含在HTML元素中的文本是文本节点
每一个HTML属性是一个属性节点
注释属于注释节点

  3.2 获取元素

document.getElementById(id);//获取特定id的某个节点
document.getElementByTagName(tagName);//获取特定标签的节点集合
document.getElementsByClassName(classname);//获取特定类名的节点集合
获取和设置属性:
object.getAttribute(attr);//获取属性attr的值,object是一个节点
object.setAttribute(attr, value);//为属性attr设置相应值

Chapter 4: Javascript图片库

本章代码demo比较简单,在这里就不详细介绍,我只列了一些自己需要注意的点

Q:在点击某个链接时,留在这个网页而不是转到另一个窗口
A:通过增加一个“占位符”图片的方法在这个主页为图片预留一个浏览区域
Q:点击链接时,在当前网页上看到图片
A:使用return false取消网页默认行为
<a href="#" onclick="showPic(this);return false"></a>
另一个默认动作是form表单中的<input type="submit">

ChildNodes属性可以获取任何一个元素的所有子元素

document.getElementByTagName("body")[0].ChildNodes;//获取body所有的子元素

nodeType可以让我们知道自己正在与哪一种节点打交道

元素节点、属性节点、文本节点的nodeType分别为1,2,3

node.nodeValue可以改变一个文本节点的值

node.firstChild 等价于 node.ChildNodes[0]

node.lastChild 等价于 node.ChildNodes[node.ChildNodes.length - 1]

Chapter 5: 最佳实践

Chapter 6: 图片库改进版


  6.1 结构化程序设计

其中一个原则是:函数应该只有一个出口和入口 
如果一个函数有多个出口,应该将出口集中在开头部分,就可以接受了,例:
function prepareGallery(){
  if(!document.getElementByTagName) return false;
  if(!document.getElementById) return false;
  if(!document.getElementByClassName) return false;
}

  6.2 共享onload事件

addLoadEvent函数将完成的操作:
把现有的window.onload事件处理函数的值存入变量oldload
如果在这个处理函数上没有绑定任何函数,就像平时那样把心得函数添加给它
如果在这个处理函数上已经绑定了一些函数,就把新函数追加到现有的指令的末尾
function addLoadEvent(func){
  var oldonload = window.onload;
  if(typedef window.onload != 'function'){
    window.onload = func;
  } else {
    window.onload = function(){
      oldonload();
      func();
    }
  }
}

这就将那些在页面加载完毕时执行的函数创建为一个队列,如
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);

  6.3 使用三元操作符

若函数格式如下所示
if(whichpic.getAttribute("title")){
var text = whicpic.getAttribute("title");
} else {
var text = "";
}
则可以用三元操作符完成操作
var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : "";

Chapter 7: 动态创建标记

  7.1 document.write 和 innerHTML

document对象的write方法可以方便的将字符串插入文档中
document.write("<p>This is a test</p>")
innerHTML属性: 用来读或写指定元素内的HTML内容
<div id="testDiv">
<p>This is a test</p>
</div>
此时testDiv.innerHTML中的内容是<p>This is a test</p>

  7.2 DOM方法

  7.2.1 createElement方法

动态创建script引用

var head= document.getElementsByTagName('head')[0];

var script= document.createElement('script');

script.type= 'text/javascript' / script.setAttribute("type", "text/javascript");

script.src= 'call.js' / script.setAttribute("src", "call.js");

head.appendChild(script);

  7.2.2 createTextNode方法

var para = document.createElement("p");

document.getElementById("testDiv").appChilid(para);

var txt = document.createTextNode("Hello World");

para.appendChild(txt);

  7.2.3 insertBefore方法

parentElement.insertBefore(newElement, targetElement)

newElement: 你想插入的元素

targetElement: 你想将newElement插入哪个元素之前

parentElement: targetElement元素的父元素,即targetElement.parentNode

  

  7.2.4 自定义insertAfter方法

function inertAfter(newElement, targetElement){
  var parent = targetElement.parentNode;
  if(parent.lastChild == targetElement){
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement, targetElement.nextSibling);//目标元素的下一个兄弟元素
  }
}

  

  7.3 AJAX

  以前想要看到一个页面的变化,哪怕是很小的一部分,也要重新发送请求,刷新整个页面,而使用Ajax就可以只更新页面中的一小部分,其中的内容都不需要再更新,已经加载的页面只有一小部分会更新,而不必再次加载整个页面

Ajax最的的优势是对页面的请求以异步的形式发送给服务器,这样不需要等服务器返回请求数据也可以继续浏览网页,不极大的提升了用户体验

  7.3.1 XMLHttpRequest

var request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //ie浏览器创建对象
var request = new XMLHttpRequest();//其他浏览器创建对象
//示例代码
function getNewContent() {
  var request = XMLHttpRequest();
  if(request){
    request.open("GET", "example.txt", true);
    request.onreadystatechange = function(){
    //XMLHttpRequest对象送回响应的时候执行
    if(request.readstate == 4) { //4表示请求完成
      //一些操作
    }
  };
  request.send(null);
  } else {
    alert("fail");
  }
}

Chapter 8: 充实文档的内容

  8.1 DOCTYPE

在HTML5出现之前,我们一般使用XHTML文档规则,而不是用HTML,因为HTML有很多不方便的地方
HTML规则即允许使用小写(<a>)也允许使用大写字母(<A>),也可以省略结束标签(</p>,</li>)
使用XHTML规则
<!DOCTYPE html PUBLIC ".." "https://..">
使用HTML5规则
<!DOCTYPE html> 同样支持HTML和XHTML规则

Javascript DOM编程艺术的更多相关文章

  1. 读书笔记:JavaScript DOM 编程艺术(第二版)

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  2. JavaScript DOM 编程艺术·setInterval与setTimeout的动画实现解析

    先贴上moveElement()函数的大纲,为了方便观看,删了部分代码,完整版粘到文章后面. function moveElement(elementID,final_x,final_y,interv ...

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

    嗯,经过了一周的时间,今天终于将<JavaScript DOM编程艺术(第2版)>这本书看完了,感觉受益匪浅,我和作者及出版社等等都不认识,无意为他们做广告,不过本书确实值得一看,也值得推 ...

  4. JavaScript DOM编程艺术第一章:JavaScript简史

    本系列的博客是由本人在阅读<JavaScript DOM编程艺术>一书过程中做的总结.前面的偏理论部分都是书中原话,觉得有必要记录下来,方便自己翻阅,也希望能为读到本博客的人提供一些帮助, ...

  5. 《JavaScript dom 编程艺术》 placeholder占位符IE8兼容办法。

    在<JavaScript dom 编程艺术>第11章学来的. 相对于用JavaScript替换文本框的提示语句 <!DOCTYPE html> <html lang=&q ...

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

    刚刚开始自学前端,如果不对请指正:欢迎各位技术大牛指点. 开始学习<javascript dom编程艺术>,整理一下学习到的知识.今天刚刚看到第六章,记下get到的几个知识点. 优雅降级 ...

  7. 《JavaScript DOM 编程艺术》

    前几天京东买了一本书,在豆瓣上好评如潮,买下了啃一啃,书名<JavaScript DOM 编程艺术>,在好好深造一下javaScript.一边啃,一边敲.当然应该要做好笔记.一些简单的就看 ...

  8. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  9. 《JavaScript Dom 编程艺术》读书笔记-第4章

    我的前端入门第一本书是<JavaScript Dom 编程艺术>,网上查找资料发现前端的入门推荐书籍最受好评的就是这本和<JavaScript 高级程序设计>了.之所以先选这本 ...

  10. Javascript DOM 编程艺术(第二版)读书笔记——基本语法

    Javascript DOM 编程艺术(第二版),英Jeremy Keith.加Jeffrey Sambells著,杨涛.王建桥等译,人民邮电出版社. 学到这的时候,我发现一个问题:学习过程中,相当一 ...

随机推荐

  1. doc-remote-debugging.html

    https://studio.zerobrane.com/doc-remote-debugging.html

  2. MQTT学习笔记——Yeelink MQTT维修 采用mqtt.js和paho-mqtt

    0 前言     2014年8月yeelink推出基于MQTT协议的开关类型设备控制API.相比于基于HTTP RESTful的轮训方式,通过订阅相关主题消息,能够远程控制类应用实时性更好. 本文使用 ...

  3. Android 自己定义ScrollView ListView 体验各种纵向滑动的需求

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38950509.本文出自[张鸿洋的博客] 1.概述 群里的一个哥们有个需求是这种: ...

  4. SP2010 3D标签云Web部分--很酷的效果,强烈推荐!!

    SP2010 3D标签云Web部分--很酷的效果.强烈推荐! ! 项目描述叙事         基于简单Flash的3D标签云Web部件.SP Server 2010使用. 建立在内置标签云Web部件 ...

  5. 【甘道夫】HBase开发环境搭建过程中可能遇到的异常:No FileSystem for scheme: hdfs

    异常: 2014-02-24 12:15:48,507 WARN  [Thread-2] util.DynamicClassLoader (DynamicClassLoader.java:<in ...

  6. WIZnet通过启动在线培训活动:计算机网络TCP/IP协议而事实上,现在的方法

    为了给大家营造更好的学习环境.WIZnet特此举办第一期培训活动,由WIZnet一线project师为你分享最最前沿和有用的网络技术知识,帮你解答开发过程中的疑问.欢迎前来交流.名额有限(20名满), ...

  7. 【iOS发展-61】更换plist经过资源,执行iOS一旦数据仍显示在模拟器的外观,如何解决?

    (1)案例介绍 --我们首先导入plist文件做项目,模拟的观看效果. --删除plist,更换一个新的plist,CMD+R模拟执行,或者找到该程序界面上显示最后一个数据. (2)原因 是由于第一次 ...

  8. UVA 11769 All Souls Night 的三维凸包要求的表面面积

    主题链接:option=com_onlinejudge&Itemid=8&page=show_problem&problem=2869">点击打开链接 求给定的 ...

  9. 【网络流量最大流量】poj3281Dining

    /* EK算法版本号,哦,慢.....见下文dinic版本号 ----------------------------------------- 最大的问题是网络流量问题 -------------- ...

  10. JAVA Socket传输Object(对象)注意的问题

    在java中,可以通过socket将一个对象进行传递,通过ObjectOutputStream,ObjectInputStream来进行写入和读取(具体的方法参考http://blog.csdn.ne ...