[Head First Html5 Programming notes] Chapter 4 JavaScript对象和函数

Chapter 4 JavaScript对象和函数

1 JavaScript Function

1. 对没有声明的变量赋值，JavaScript将其视为全局变量

   function() {
   	var x = 1;	//局部变量
   	y = 1;		//没有声明变量y，向其赋值，视为全局变量
   }
   

2. 全局变量与局部变量

   • 编程原则: 尽可能使用局部变量，只在合适的地方使用全局变量
   • 作用域 (scope): 局部变量只在定义的作用域 (function/block) 内有效，全局变量在全局作用域 (对于JavaScript, 即为window) 内有效

3. HTML使用多个JavaScript文件时，如果不同文件中有多个同名函数，将使用浏览器最后看到的函数

2 JavaScript Object

1. 访问对象属性的方法

   var fido = {
   	name: "fido",
   	weight: 20
   };
   

   (1) . 访问: console.log(fido.name);

   (2) []访问: console.log(fido["name"]); //属性名需用""括起

2. 删除属性

   del fido.name;
   

   删除成功返回true，反之 (如受保护的变量) 返回false

3. 向函数传递对象

   ​ JavaScript向function传递object时，传递的是指向object的引用的副本，因此在函数中修改对象属性时，修改的是原对象的属性

4. 对象的构造函数

   fuction Dog(name, weight){
   	this.name = name;
   	this.weight = weight;
   }
   var fido = new Dog("fido", 20);
   

   使用构造函数时通过new创建对象

5. this关键字

   (1) this是指向调用该方法的对象的引用变量

   (2) 如果没有调用一个对象方法，this的值为undefined

6. window对象

   windows
   location, status, onload, document
   alert, prompt, open, close, setTImeout, setInterval

   (1) window是个全局对象，表示JavaScript程序的全局环境

   (2) property

   • location: 包含页面的URL
   • status: 包含将在浏览器状态区显示的一个字符串
   • onload: 包含了页面完全加载时要调用的函数
   • doucument: 包含DOM

   (3) method

   • alert: 通过弹窗显示一个提醒
   • prompt: 通过弹窗从用户得到信息
   • open: 打开一个新的浏览器窗口
   • close: 关闭窗口
   • setTimeout: 指定的时间间隔后调用处理程序
   • setInterval: 以指定的时间间隔反复调用处理程序

7. doucument对象

   document
   domain, title, URL
   getElementById, getElementsByTagName, getElementsByClassName, createElement

   (1) property

   • domain: 提供文档的服务器的域，如zju.edu.cn
   • title: 文档的标题
   • URL: 文档的URL

   (2) method

   • getElementById: 根据元素id获取元素对象
   • getElementsByTagName: 根据标记获取元素对象
   • getElementsByClassName: 根据类名获取元素对象
   • createElement: 创建新的元素

8. 元素对象

   p
   innerHTML, childElementCount, firstChild
   appendChild, insertBefore, setAttribute, getAttribute

   p. s. 所有元素对象都支持以上属性和方法

   (1) property

   • innerHTML: 被元素标记所包围的内容
   • childElementCount: 元素的子元素数量
   • firstChild: 元素的第一个子元素

   (2) method

   • appendChild: 在DOM中向元素增加子元素

   • insertBefore: ?

   • setAttribute: 设置元素的属性

     p.setAttribute("class", "redText");
     

   • getAttribute: 获取元素的属性

     p.getAttribute("id");