说明：以前都是在有道云笔记上记录我每天学的东西，可是它不具有共享功能，现在好多公司都需要你又自己的技术博客，所以，把云笔记上的东西搬到csdn博客了，希望能帮到其他人。
这本书挺适合作为入门书籍研读的，它涵盖了JavaScript的主要的内容，不像红皮书或者犀牛书那样内容繁多，那两本书适合作为工具书，用到了的时候作为查询用。当然，闲来没事的时候，可以研读研读。
下面我把书中我认为重要的东西摘抄下来，以便以后查阅。
第一章：
渐进增强模型：结构层HTML 表现层css 行为层JavaScript
好处：各层分离，文件结构优雅简单；可以缓存css和JavaScript，提升速度；增加新功能，适应新趋势
html代码量越少性能越好，减少需要解析的元素
css应该全部写在一个文件里，这样性能比较好，
因为每多加一个css文件就会产生一次http请求
css、meta、title 等一些看不见的元素写在head标签里
第二章
javascript下载优先级最高，
要下载javascript时，其他资源必须停止。
所以将 javascript文件放在最后，放在body里，但是最后面，即当html和css下载完之后再执行http请求javascript
网站呈现的效果是由渲染引擎决定的，不同的浏览器渲染引擎不同
项目开发：性能第一，即请求http数量第一
javascript的基本功能：
修改html文档
与服务器通信：通过javascript与服务器通信大部分情况下指的是ajax
存储数据：在客户端存储数据，跟数据库差不多
javascript辅助工具：javascript控制台
网上工具， 检查错误，www.jslint.com
问题：怎样关闭浏览器的javascript功能
所以将 javascript文件放在最后，放在body里，但是最后面，即当html和css下载完之后再执行http请求javascript
网站呈现的效果是由渲染引擎决定的，不同的浏览器渲染引擎不同
项目开发：性能第一，即请求http数量第一
javascript的基本功能：
修改html文档
与服务器通信：通过javascript与服务器通信大部分情况下指的是ajax
存储数据：在客户端存储数据，跟数据库差不多
javascript辅助工具：javascript控制台
网上工具， 检查错误，www.jslint.com
问题：怎样关闭浏览器的javascript功能
第三章：javascript术语解析
DOM 文档对象模型 document object model
变量可以是函数
定义全局变量的3种方式：
1、在函数外使用var关键字 var functionName（）
2、将要定义的变量加入window对象 window.functioname()
3、不加var，在使用时直接定义
在函数中加入using strict ；用更为严格的规则来解析代码，产生更多的错误
Cookies：可以存放在用户本地存储空间中的数据，浏览器可以访问
json：易于与javascript集成的数据格式
函数是经由某个事件所触发的一段代码
匿名函数：使用时即刻声明，没有函数名
回调函数：一个函数作为另一个函数的参数
在程序中处理用户反馈：事件机制
第四章 操作DOM
<html>
<head> //<head>和</head>里的所有东西包括head均为元素节点
<title>Listing 4.2</title> //haohao为文本节点
<meta charset="utf-8"> //charset="utf-8"为属性节点
</head>
<body>
<h1>haohao</h1>
<p>haohao<strong>haohao</strong></p>
</body>
</html>
JavaScript是一门操作DOM的语言，因此了解如何获取dom元素非常重要
dom模型由元素节点 属性节点 文本节点组成
只要可以，最好用id访问元素
根据id获取这个元素：document.getElementById("header")
根据标签名获得元素，获取一组元素：document.getElementsByTagName("p")
根据class属性获得元素 document.getElementsByClassName("header")
使用css选择器来定位节点
document.querySelector("#header") 得到id为header的元素
document.querySelector(".dropcap") 得到dropcap类的第一个元素
document.querySelectorAll(".dropcap") 得到所有元素
得到元素后，就可以处理其属性
getAttribute()
setAttribute()
removeAttribute()
hasAttribute()
处理文本节点
document.getElementById("hao").innerHTML="<p>hao<p/>"
DOM中动态的添加和移除节点
createElement()
createTextNode()
appendChild()
removeChild()
childNodes：直系，不包括孙子
具体程序见书
第五章 javascript数据存储
5.1 变量：区分大小写
加引号为字符串，不加引号为数字或boolean
数组
var breakfast=["hao","meat","milk"];
带[]的为数组
breakfast["hao"]="ba"
对象{}
var meatball={bread:"",meat:"",cheese:""} bread meat cheese可以带引号
breakfast.push("vegetable");
数组方法：
join : breakfast.join(",") 输出 hao,meat,milk
slice: breakfast.slice(1,2) 输出meat
shift: breakfast.shift() 删除首个元素
unshift: breakfast.unshift("meat") 将meat添加到数组的首位
pop: breakfast.pop() 将最后一个元素移除
concat:breakfast.concat(lunch,dinner) 将三个数组合并为一个数组，原来的数组不受影响
pop slice contact shift and unshift sort
5.11 h5中的网络数据存储方式
在浏览器端进行数据存储，以前用cookies，现在用localStorage
localStorage.setItem("favorite","meat"); 存储
localStorage.getItem("favorite"); 获取
localStorage.removeItem("favorite");删除
将JSON对象转换为字符串并保存在浏览器端 JSON.stirngify(对象名)
将字符串转成JSON对象 JSON.parse(字符串名)
功能检测，是否支持一项新技术，将是开发过程需要考虑的重要问题
第六章
函数声明
function myhello（）{}
匿名函数：动态的，直接执行，无法调用
(function (){alert("haohao")})();
不理解的地方 JSON对象的写法 class对象的写法
target = document.getElementsByTagName("body")[0],
target = document.getElementsByTagName("body")[0],
target.innerHTML += '<p><a href="mailto:'+ email +'">' + name + '</a>!</p>';
第7章 以事件处理实现用户交互
事件监听器：element.addeventListener("event",function(){},false)；99%的情况下第3个参数为false
移除监听器：element.removeEventListener("click",function(){},false)
第8章 通过ajax与服务器通信
浏览器和服务器通信的一个技术，中间件：ajax引擎
异步ajax，随时进行，不需要在意http请求
XMLHttpRequest对象是ajax的核心
1 创建ajax对象，还要检查浏览器是否支持该项技术
var xhr=new XMLHttpRequest()
xhr.open("get","data/contacts.json","true"); get表示请求方式，第二个参数表示待获取的文件，第3个表示用异步请求
xhr.send();不需要附加任何信息，只想获取文件
2 创建ajax调用：向服务器发送请求 然后处理服务器传来的数据 ，
发送请求时，get比post性能好，但是get保密性差，提交的东西都会出现在url中
第10章 jQuery
jQuery是最流行的JavaScript程序库，其实就是一堆JavaScript代码，其在制作小型的营销网站和大型的网络应用程序都很有用 jquery.com提供全套api文档，分为不带空格的产品版本，和带有注释和空格的开发版本
JavaScript的核心：$(document).ready(function(){}); 在文档末尾引入一份脚本文件，等dom加载好了，会执行
$是jQuery的标志
$('#container')获取id为container的元素
最流行的用法之一：将事件与css()方法结合起来制作动画
典型ajax异步连接服务器
<html>
<head>
<title>ajax</title>
<meta charset="utf-8">
<script type="text/javascript">
var xmlhttp;
function createXMLHttpRequest()
{
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
}
function HandleStateChange(){
if(xmlhttp.readyState==4&&xmlhttp.status==200){
alert("服务器返回的结果是"+xmlhttp.reponseText);
}
}
function test(){
createXMLHttpRequest();
xmlhttp.open("GET","1.php",true);
HandleStateChange();
xmlhttp.onreadystatechange=HandleStateChange();
xmlhttp.send(null);
}
</script>
</head>
<body>
<input type="button" onClick="test()" value="测试ajax"/>
</body>
</html>
进阶
JavaScript的实现由3个部分组成
1 ECMAScript
2 dom：文件对象模型
3 bom浏览器对象模型：窗口是对象树的顶层，其下包括：window navigator frames document history location
screen
BOM 用于窗口与窗口之间的通信
字符串字母大小写转换
var city="shang hai";
city.toLowerCase();
获得字符的Unicode编码
city.charCodeAt(2);
获得字符的UIcode对应的字符串
city.formCharCode()
转换成字符串 city.toString() 转换成数字：city.parseInt() parseFloat()
二 数组
var a=new Array();
var b=new Array(8)
var c=new Array("abc","lovw","you")
BOM基础
window对象
1、alert()
2、confirm(str);带有确定和取消两个按钮
3、prompt() 有确定和取消按钮，允许用户输入文字
document对象
对象属性：body cookie domain lastModified referrer title URL
对象方法：close() 关闭用document.open()打开的输入
write() 向文档写html表达式或者JavaScript代码
location对象
获取或者设置窗体的url
属性
navigator对象
判断用户是否开启了cookie
navigator.cookieEnabled
数据类型
NAN: not a number
JavaScript全是值传递，可以把局部变量想象成局部变量
DOM模型 元素节点 属性节点 文本节点
DOM innerHTML
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<script type="text/javascript">
function innerHtml()
{
var myDiv=document.getElementById("myTest");
alert(myDiv.innerHTML);
myDiv.innerHTML="<img src='image/1.jpg' title='美丽心灵'>";
}
</script>
</head>
<body οnlοad="innerHtml()">
<div id="myTest">
<span>图库</span>
</div>
</body>
</html>
改变css(提前有id，找到后改变css)
document.getElementById(id).style.property=new style
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<script type="text/javascript">
function changeStyle()
{
document.getElementById("p1").style.color="blue";
document.getElementById("p2").style.fontFamily="黑体";
}
</script>
</head>
<body οnlοad="innerHtml()">
<p id="p1">段落1</p>
<p id="p2">段落2</p>
<input type="button" οnclick="changeStyle()"></input>
</body>
</html>
使用className属性（提前有css，找到后将名字赋值）
DOM
节点类型：node总的类型，所有的节点都是node类型，属性：nodeValue nodeName nodeType
操作节点：appendChild() insertBefore() removeChild() replaceChild()
1、document类型
2、元素类型 element
3、文本类型 text
4、属性类型 attr，是节点，但不认为是dom树的一部分
js事件
window.οnlοad=function(){}
页面全部加载完成后执行，甚至是图片
JavaScript事件
DOM0级 DOM1级 IE事件
html: οnclick=function(){}
javascript: btn.addListener("click",function(){},false)
IE attachEvent
window对象的函数：setInterval(function(){},1000)过1s后重复执行和setTimeout(function(){},1000)超时执行
属性是JavaScript对象的内在性质，每个属性都包含名称和值。特性不是JavaScript的原生概念，它适用于dom元素。
302
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
