复杂的脚本可能包含上百行语句, 程序员使用函数、方法和对象来组织他们的代码。
函数
函数可以使用一系列语句组织成一个整体，以执行某一特殊任务
如果再不同地方有些任务要重复执行，可以重用函数
- 声明函数( function 关键字 )
即对函数命名,并在花括号里编写完成任务所需的语句- 调用函数
直接用函数名,即可调用函数- 提供参数
参数放在函数名后的括号内,在函数体内就可以使用参数- 调用需要参数的函数
在函数名后面的括号中制定参数值,可以是实参也可以是变量return返回函数的值
使用数组,函数可以返回多个值
var elMsg = 'Sign up to receive our newsletter for 10% off!';
function updateMessage(msg) {
var el = document.getElementById('message');
el.textContent = msg;
}
updateMessage(elMsg);
匿名函数(函数表达式)
当任务中只需要运行一次的代码,而非脚本中需要多次反复调用时,可用匿名函数.
起到区域封装,避免防止同名变量的情况
var area = function(width, height){
return width * height;
};
var size = area(3 * 4);
变量作用域
- 局部变量
在函数内部声明,只能用于函数内.
两个不同的函数使用同名变量不会引起冲突- 全局变量
在函数外部创建的变量,具有全局作用域
对象
对象将一组变量和函数组合起来,穿件模型
在对象中: 变量被认为是属性
在对象中: 函数被认为是方法
- 对象中,名称称为键,对应的数据为值
- 属性的值可以是字符串/数组/数字/布尔值/甚至是另一个对象
- 方法的值只能是函数
//这里 用字面量语法, 定义了一个酒店的对象,包括5个属性和一个方法
var hotel = {
name: "Quay",
rooms: 40,
booked: 25,
gym: true,
roomTypes: ['twin', 'double', 'suite'],
checkAvailability: function() {
return this.rooms - this.booked; //this关键字标识正在使用当前对象内的属性
}
};
访问对象的属性或方法
使用点号
.
var hotelName = hotel.name;
var roomsFree = hotel.checkAvailiability();
用 构造函数语法 创建一个对象
用
new关键字和object()构造函数进行创建(此函数为 JS 内置语法,用于创建对象)
穿件了空白对象后, 再使用点语法添加属性和方法
var hotel = new object();
hotel.name = 'Quay';
hotel.rooms = 40;
hotel.booked = 25;
hotel.checkAvailiability(){
return this,rooms - this.booked;
};
delete hotel.name //删除某个独享的属性,使用 delete 关键字
用 构造函数语法 创建很多对象
构造函数对象的名称, 首字母为大写
使用该函数创建对象示例时, 使用new关键字
- 在创建一个非常复杂的对象时就会用到这种技术, 这个对象在使用时是可用的,但又存在不被使用到的可能. 对象在函数中被定义,但是只有在使用时才会被创建.
function Hotel(name, rooms, booked){
this.name = name;
this.rooms = rooms;
this.booked = booked;
this.checkAvailiability = function(){
return this.rooms - this.booked;
};
};
var quayHotel = new Hotel('Quay', 40, 25);
var parkHotel = new Hotel('Park', 120, 70);
this 关键字
this 关键字通常在对象内部或函数内部使用
它通常指向当前函数所操作的对象
this 处在不同作用域, 根据上下文, 所指代的对象也不同, 这个需要在实践中慢慢熟悉这个概念
数组是对象
数组实际上是一个特殊的对象
数组的键是索引编号
//对象
costs = {
room1: 420,
room2: 120,
room3: 220,
room4: 520,
};
//数组
costs = [ 420, 120, 220, 520 ];
浏览器内置对象
浏览器附带了一系列内置对象, 用于创建交互式网页
详参: http://www.jianshu.com/p/55526066c23b
内置对象
当一个对象呗嵌套在另一个对象中时, 我们称之为子对象
- 浏览器对象模型
用于创建浏览器或窗口模型
最顶端的是 window 对象, 表示当前窗口
子对象展示浏览器的其他特征
子对象例: document history location navigator screen
//收集浏览器数据并储存在 msg 变量中
var msg = '<h2>browser window</h2><p>width: ' + window.innerWidth + '</p>';
msg += '<p>height: ' + window.innerHeight + '</p>';
msg += '<h2>history</h2><p>items: ' + window.history.length + '</p>';
msg += '<h2>screen</h2><p>width: ' + window.screen.width + '</p>';
msg += '<p>height: ' + window.screen.height + '</p>';
var el = document.getElementById('info');
el.innerHTML = msg;
alert('Current page: ' + window.location);
- 文档对象模型(DOM)
用于创建当前页面的模型
最顶端的对象是 document, 代表整个页面
子对象展现了当前页面上的其他项document属性:
document.title(当前文档的标题)
document.lastModified(文档最后一次被修改的日期)
document.URL(当前 URL 字符串)
document.domain(当前文本域)document方法:
document.write() (将文本写入文档)
document.getElementById() (返回 id 元素相匹配的元素)
document.querySelectorAll() (返回一组符合参数定于的 CSS 选择器)
document.createElement() (创建新元素)
document.createTextNode() (创建新的文本节点)
//msg收集并储存当前页面的信息
var msg = '<p><b>page title: </b>' + document.title + '<br />';
msg += '<b>page address: </b>' + document.URL + '<br />';
msg += '<b>last modified: </b>' + document.lastModified + '</p>';
var el = document.getElementById('footer');
el.innerHTML = msg;
- 全局 JavaScript 对象
不构成模型,是一些独立对象
首字母大写全局对象例:
String(处理字符串)
Number(处理数字)
Boolean(处理布尔值)
Date(处理日期)
Math(处理数字计算)
RegEx(匹配文字的字符串)
