Javascript.DOM编程艺术 读书笔记(1-3章）

其余章节链接

• Javascript.DOM编程艺术 读书笔记(第4章）
• Javascript.DOM编程艺术 读书笔记(5-6章）
• Javascript.DOM编程艺术 读书笔记(第7章）
• Javascript.DOM编程艺术 读书笔记(8-9章）
• Javascript.DOM编程艺术 读书笔记(第10章）
• Javascript.DOM编程艺术 读书笔记(第11章）
• Javascript.DOM编程艺术 读书笔记(第12章）

JavaScript简述

• DOM是一套对文档内容进行抽象和概念化的方法
• W3C对DOM的定义：一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态的访问和修改文档的内容、结构和样式
• 最好的做法是把<script>标签放到HTML文档最后，标签之前，能使浏览器更加快的加载页面

JavaScript语法

• 自我提醒：有注释是好事情，用“//”来注释单行，用“/*”注释多行
• JavaScript允许直接对变量赋值而无需提前声明，如果程序猿在对某个变量赋值之前未声明，赋值操作将自动声明该变量。但是提前声明变量是一种良好的编程习惯

var mood;
var age;

• 变量和其他语法元素的名字都是区分字母大小写的，不允许变量名中包含空格或标点符号（“$”例外）
• 变量名允许包含字母、数字、美元符号和下划线，但第一个字符不允许是数字
• 驼峰格式是函数名、方法名和对象属性命名的首选格式（myName）
• 字符串必须包在引号里，''或""
• 字符串包含单引号，则把字符串放在双引号中，反之亦然
• JavaScript中用反斜线（\）对字符进行转义
• 代码中引号使用保持一致
• 数组：

var stars = array();
stars[0] = "Jay";
stars[1] = "Huahua";
stars[2] = "JJ";

var stars = Array("Jay","Huahua","JJ");

var stars = ["Jay","Huahua","JJ"];

• 数组中的任何一个元素都可以把一个数组最为它的值（多维数组）

var stars = ["Jay","Huahua","JJ"];
var names = [];
names[0] = stars;
var x = name[0][1];  //x值为Huahua

• 对象：对象的每个值都是对象的一个属性

var star = Object();
star.name = ""Huahua";
star.age = 29;
star.job = singer;

var star = {name:"Huahua",year:29,job:"singer"};

• 把多个字符串首尾相连在一起的操作叫做拼接：

var message = "I am feeling" + "happy";

var mood = "happy";
var message = "I am feeling" + mood;

• 把字符串和数值拼接在一起，其结果将是一个更长的字符串，数值将自动转换为字符串
• 如果用同样的操作符来“拼接”两个数值，其结果是这两个值的算术和
  +=，一次完成“加法和赋值”（或“拼接和赋值”）操作：

var year = 2000;
var message = "The year is";
message += year;
//message的值将是“The year is 2000”

• 条件语句，代码写在花括号里是一个好的编程习惯，增强可读性

if(condition){
    statements;
}else{
    statements;
}

• ==为比较操作符“等于”，单个等号（=）用于完成赋值操作
• 严格比较，使用全等操作符（===），不仅比较值，还比较变量的类型，严格不相等为(!==)
• 逻辑操作符：与（&&）、或（||）、非（!）
• for循环是while循环的一种变体，好处是循环控制结构更加清晰，与循环有关的内容都包含在for语句的圆括号部分
• 函数是一组允许在代码里随时调用的语句，作为一种良好的编程习惯，应该对函数做出定义再调用它们
• 可以传递数据给函数，这个数据称为参数，定义函数时可以声明任意多个参数，用逗号隔开

// 定义函数
function multiply(num1,num2){
    var total = num1*num2;
    alert(total);
}

//调用函数
multiplt(10,2);     //函数运行结果为20

• 命名变量时，用下划线来分隔各个单词；命名函数时，使用驼峰命名法
• 全局变量，可以在脚本的任何位置被引用；局部变量，只存在于声明它的那个函数内部，该函数外部无法引用
• 如果在某个函数中使用了var，那个变量就会被视为一个局部变量，它只存在于这个函数的上下文中；反正，如果没有使用var，那个变量就会被视为一个全局变量，如果脚本里已经存在一个同名变量，这个函数就会改变这个全局变量的值
• 在定义一个函数时，我们一定要把它内部的变量全都明确地声明为局部变量，在函数里使用var定义变量，能避免任何形式的二义性隐患
• 对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问——属性和方法
• 属性是隶属于某个特定对象的变量；方法是只有某个特定对象才能调用的函数
• 对象就是由一些属性和方法组合在一起而构成的一个数据实体

DOM(Document Object Model)

• 五个常用的DOM方法：getElementByID、getElementsByTagName、getElementsByClassName、getAttribute和setAttribute
• DOM把文档表示为一棵家谱树（节点树）：
  
• DOM的原子是元素节点，标签的名字就是元素的名字，元素可以包含其它的元素
• 文本节点总是被包含在元素节点内部，但并非所有的元素节点都包含文本节点
• 属性节点用来给元素节点给出更具体的描述，并非所有的元素都包含着属性，但属性一定被元素所包含
• CSS的继承， 子元素会继承父元素所拥有的属性
• id属性的用途是给网页里的某一个元素加上一个独一无二的标识符
• 获取元素的三种方法：

1.getElementById，通过元素id获取

document.getElementById("id");    //id值必须放在单引号或双引号里

调用将返回一个对象，对应着document对象里的独一无二的元素
2.getElementsByTagName，通过标签名字获取

document.getElementsByTagName("li");

调用将返回一个对象数组，每个对象分别对应着document对象里的一个列表项元素，数组里的每个元素都是一个对象;
通配符（"*"），必须放在引号里，区分乘号，用来获取文档里的所有元素 3.getElementsByClassName，通过类名来获取

document.getElementsByClassName("class");

调用将返回一个对象数组，每个对象分别对应着document对象里相同类名的元素，数组里的每个元素都是一个对象;
指定多个类名时，将参数用空格隔开，类名的实际顺序不重要

• getAttribute方法不属于document对象，所以不能通过document对象调用，只能通过元素节点对象调用object.getAttribute(attribute);
• if(something)与if(something!=mull)完全等价
• setAttribute用来设置属性节点的值，同样只能通过元素节点调用object.serAttribute(attribute,value);
• DOM的工作模式：先加载文档的静态内容，再动态刷新，动态刷新不影响文档的静态内容