互联网学习记录：三件套_Javascript

Javascript快速入门

Javascript的来源

• JavaScript was developed by a gentleman named Brendan Eich, who was working for Netscape
• Mocha, then LiveScript, and finally JavaScript.
• The first browser to support JavaScript was Netscape Navigator 2.0, way back in late 1995
  #3 Javascript在页面中的使用方式
• embed your JavaScript code right inside script tags.

<script>
alert("I'm learning JavaScript");
</script>

• The second way to get JavaScript onto your page is to link to a .js file:

<script src="somefile.js"></script>

JavaScript简介

• JavaScript是一种基于对象的、事件驱动的脚本语言。它是第一个客户端脚本语言
• JavaScript作为一门动态语言，集过程式、对象式、函数式、事件驱动式和元编程于一身，其强大和优 雅绝对是超乎想象的。它宛如一只神奇的魔袋，乍看平淡无奇，却总能变出意想不到的宝贝
• JavaScript的优点是简单易用，局限性是速度慢、可扩展性差（跟安全性相关的局限性:不能将数据存 储在web服务器或用户计算机上，更不能访问用户计算机上的文件）
• JavaScript代码是以标签定界的

变量类型

var name = "Joe",
age = 45,
job = "plumber"; alert( name ); // Joe

String

alert( "John says \"What are you doing?\"" ); 
alert( '"Let\'s go out for lunch."' );

Numbers

alert( 3.45e5 ); // 345000 
alert( 123e-3 ); // 0.123

Booleans

true and false

Null and Undefined

Object

var obj = {
	name : "Andrew", 
	age : 20,
	awake : true, 
	company : {
	name : "XYZ Ltd.", 
	id : 12345
	}
};

var obj = { name : "Joe", age : 10 }; 
alert( obj.name ); // "Joe“
alert( obj["age"] ) ; // 10

Array

var arr = ["string", 20, false]; 
alert( arr[0] ); // "string"

Date

new Date("January 17, 2012")
new Date(2009, 3, 20, 17, 30)

Semicolons

var someVar = "value"; 
someFunction("parameter"); 
if (true) {
doThis();
}

注释

// This is a useless comment
/* file: navigtion.js
author: Andrew Burgess date: July 2, 2011
purpose: provides animation for the site navigation

*/

运算符

Arithmetic Operators

var four = 2 + 2, //addition operator hour = 24 - 13, // subtraction operator
seventy = 7 * 10, // multiplication operator avg_days_per_week = 365 / 52, // division operator remainder = 31 % 2, // modulus operator
msg = "the time is " + hour + " o'clock"; // addition operator used
on strings
console.log(four); // 4
console.log(hour); // 11
console.log(seventy); // 70
console.log(avg_days_per_week); // 7.019230769230769
console.log(remainder); // 1 console.log(msg); // "the time is 11 o'clock"

Comparison Operators

 alert( 10 < 5 ); // false 
 alert( 10 > 5 ); // true 
 alert( 4 <= 3 ); // false 
 alert( 4 === 3 ); // false
alert( "cat" > "dog" ); // false
alert( "bacon" > "chunks" ); // false 
alert( "cats" >= "cats" ); // true
alert( "fishing" <= "sleeping" ); // true 
alert( "cat" > "CAT" ); // true

Unary Operators

var i = 0;
 i++;
alert(i); // 1
++i;
alert(i); // 2 
i--;
alert(i); // 1
--i; 
alert(i); // 0

Assignment Operators

var num = 10;
num += 5; // same as num = num + 5 
alert(num); // 15
num -= 3; // same as num = num - 3 
alert(num); // 12
num *= 2; // same as num = num * 2 
alert(num); // 24
num /= 6; // same as num = num / 6 
alert(num); // 4
num %= 3; // same as num = num % 3 
alert(num); // 1

Boolean Operators

var a = true; 
var b = false;
alert( a && b ); // false 
alert( a || b ); // true

var day = 14, year = 2011;
alert( day > 10 || year === 2011 ); // true 
alert( day < 20 && year >= 2010 ); // true

条件语句

If Statements

var year = 2011, msg = "In the "; 
if (year > 2000) {
msg += "twenty-first century";
} else {
msg += "twentieth century";
}
console.log(msg); // In the twenty-first century

Switch Statements

var order_size = "medium"; 
switch (order_size) {
	case "small": 
	alert("small");
	break;
	case "medium":
	alert("medium");
	break;
	case "large": 
	alert("large");
	break;
	case "extra large": 
	alert("extra large");
	break; 
	default:
	alert("something else?");
}

Conditional Operator

var temp = 18,
	msg = (temp > 10) ? "Today was warm" : "Today was cold";
alert(msg);

循环语句

For Loops

var names = ["Ringo", "John", "Paul", "George"]; 
for (var i = 0; i < names.length; i++) {
	alert("Say hello to " + names[i]);
}
var i = 0;
for ( ; names[i] ; ) {
//do something 
	i++;
}

While Loop

var not_home = true, miles_driven = 0; 
while (not_home) {
	miles_driven += 1; // drive another mile 
	if (miles_driven === 10) {
	not_home = false;
}
}
alert(miles_driven);

For Loop, Revisited

var person = {
	name : "Jules Verne", 
	job : "Author", 
	year_of_birth: 1828,
	year_of_death: 1905
},
prop;
for (prop in person) {
	alert("His " + prop + " is " + person[prop]);
}

函数

Function is a object

function getGreeting(hour) 
{ var hour = 10,
message;
if (hour < 12) {
message = "Good Morning!";
} else if (hour < 17) {
	message = "Good Afternoon!";
} else {
	message = "Good Evening!";
}
return message;
}
var message = getGreeting( 16 ); // 4 PM 
alert(message); // Good Afternoon!

Functions

function getGreeting(hour) 
{ 	var hour = 10,
	message;
	var msg1 = getGreeting(10),
		msg2 = getGreeting(1,2,3,4,5,6, "and on"), 
		msg3 = getGreeting(),
		msg4 = getGreeting("five o'clock");
}
return message;
}
var message = getGreeting( 16 ); // 4 PM 
alert(message); // Good Afternoon!

function sum() 
{ var sum = 0, i;
	for ( i = 0 ; arguments[i]; i++) 
	{ sum += arguments[i];
	}
	return sum;
}
var sum1 = sum(1, 2),
sum2 = sum(100, 75, 40),
sum3 = sum(9, 1.4, 8, 2, 79, 3234, 6, 4, 5e3, 5);
alert(sum1); // 2
alert(sum2); // 215
alert(sum3); // 8348.4

Anonymous Functions

function () {
	return "this function has no name";

}
	var hi = (function () { return function () {
	return "Hi";

}
};

String Methods

• length
• indexOf
• slice, substr, and substring
• split
• toLowerCase and toUpperCase

Numbers Methods

• toExponential
• toFixed
• toPrecision
• parseInt
• parseFloat

Date Methods

• getDate, getDay, getFullYear, getHours, getMinutes, getMonth , getSeconds, getTime, getTimezoneOffset
• setDate, setMinute, setFullYear, …
• parse

Array Methods

• join
• pop / shift
• push / unshift
• reverse
• slice
• sort

["d", "e", "c", "a", "b"].sort(); 
[0, 5, 10, 15, 20, 25] .sort();

• var

arr = [5, 2, 3, 4, 1]; 
arr.sort(function (a, b) {
return a - b;
});
console.log(arr); // [1, 2, 3, 4, 5];

Math Methods

• min
• max
• random
• round / ceil / floor
• pow

this

this will reference the global object

var my_variable = "value";
function my_function () 
{	 return "another_value" } 
	alert( this.my_variable ); // "value”
	alert( this.my_function() ); // "another_value"

new

The new Keyword

function Truck(model) { this.num_of_tires = 4;
this.kilometers = 0; 
this.model = model;
}
var my_truck = new Truck("Hercules"); 
console.log(my_truck);

call and apply

two methods that functions have by default

```javascript
function Truck (model, num_of_tires) { this.num_of_tires = num_of_tires; 
this.kilometers = 0;
this.model = model;

}
var basic_vehicle = { year : 2011 }; 
Truck.call(basic_vehicle, "Speedio", 4); 
console.log(basic_vehicle);

对象内部的属性访问

var waitress = { name : "Ashley",
greet: function (customer) 
{ customer = customer || “there";
return "Hi " + customer + “! My name is " + this.name + "; what can I get you?";
}
};
alert( waitress.greet("Joe") );
// Hi Joe! My name is	Ashley; what can I get you?

Object Oriented JavaScript

function Computer (name, ram_amount, memory_amount) { this.name = name;
this.RAM = ram_amount; // in GBs 
this.space = memory_amount; // in MBs
}

my_computer = new Computer("MacBook", 2, 250000 ); 
console.log(my_computer);

function Computer (name, ram_amount, memory_amount) { this.name = name;
	this.RAM = ram_amount; 
	this.space = memory_amount; 
	this.files = [];
	this.store_file = function (filename, filesize) { this.files.push(filename);
	this.space -= filesize;
};
}

Computer.prototype.store_file = function (filename, filesize) { this.files.push(filename);
this.space -= filesize;
};

function Product(name) { if (name) {
this.name = name;
}
}
Product.prototype.name = "To be announced"; 
Product.prototype.rating = 3;
var ipad = new Product("iPad"); 
alert( ipad.name ); // "iPad"; 
alert( ipad.rating ); // 3

function Person(name) { this.name = name;
}
Person.prototype.legs = 2;
var person = new Person("Joe"), prop; for (prop in person) {
console.log(prop + ": " + person[prop]);
}
// in console:
// name : Joe
// legs: 2

闭包

var revealSecret = (function () { var secretNumber = 1024; 
return function (password) { if (password === "please") {
return secretNumber++;
}
return 0;
};
}());
console.log( revealSecret("please") ); // 1024 
console.log( revealSecret("please") ); // 1025

DOM

<p>We're learning about the <em>Document Object Model </em>, or
<strong>DOM</strong>.</p>

<div class="product">
<h2> Product Name </h2>
<img src="pic.jpg" />
<p> Description </p>
</div>

document.getElementById("id_name")
document.getElementsByClassName document.getElementsByTagName

var products = 
	document.getElementsByClassName("product"), 
	i = 0,
	child;
for ( ; i< products.length; i++) 
{ 	child = products[i].firstChild; 
	while (child.nodeType !== 1) {
	child = child.nextSibling;
}
console.log(child);
}

通过ID的属性获得对应的元素

// 原 始 的 w3c DOM document.getElementById(‘elementId’);
$(‘elementId’);	//Prototype, MooTools
$(‘#elementId’);	//jQuery 
Y.one(‘#elementId’);	//YUI3 
dojo.byId(‘elementId’);	//Dojo 
Ext.getDom(‘elementId’);	//Ext JS3

元素遍历

• 从具有指定id属性的元素开始，到达最近的class属性为category的

  元素然后遍历这个元素的兄弟元素直到遇到一个class属性为summary 的元素

  • $(‘someDeeplyNestedElement’).up(‘h2.category’).n ext(‘.summary’);

• //找到带有名为sifr的CSS class的元素，设置这些元素的直接容器的CSS文本缩进属性
  • $$(‘a.sifr’).invoke(‘up’).invoke(‘getStyle’, ‘text- indent: -9999px’);

设置元素样式

获取元素样式

更新元素内容

向元素中注入其他内容

Ajax

什么是Ajax

Ajax这个概念的最早提出者Jesse James Garrett这样说

• Ajax是Asynchronous JavaScript and XML的缩写。
• Ajax并不是一门新的语言或技术,它实际上是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用, 它包括
  • 使用XHTML和CSS标准化呈现
  • 使用DOM实现动态显示和交互
  • 使用XML和XSLT进行数据交换与处理
  • 使用XMLHttpRequest进行异步数据读取; 最后用JavaScript绑定和处理所有数据
• 技术上，Ajax极大地发掘了Web浏览器的潜力，开启了大量新的可能性
• 商业上，通过眼花缭乱的Ajax应用，普通大众更好地新一代Web应用
• Ajax采用一系列已有的甚至是老旧的技术， 将它们重新锻造、延伸，超越其原有的概 念，应付客户端所要面对的复杂情况

为什么需要Ajax富客户端

• 富客户端有两个要点：
  • “富”：是指客户端的交互模型要有多样化的输入方式和符合直觉的及时反馈手段
  • “客户端”：是与另一个独立的进程相互通信的程序，后者通常运行在服务器上。当多个客户端连接到同一个服务器上时， 可以在它们之间共享信息

传统Web应用的局限

• 网络延迟
  

• 异步交互

  • HTTP协议是一个请求/响应的无状态协议
  • 单向的通信协议
  • 客户端可以向服务器发起连接，但是服务器不可以向客户端发起连接
  • 传统的Web应用是建立在页面概念上的

AJAX与传统Web应用程序的对比

传统Web应用的局限

• 独占或瞬态的使用模式
  • Alan Cooper定义了两种主要的使用方式：瞬态的(transient)和独占的(sovereign)
  • 瞬态应用每天偶尔用一下，总是作为次要的活动，突发性的使用
  • 独占应用需要应付用户每天几个小时的持续使用
• 基于Web页面的方案对于瞬态应用是足够的，但是对于独占应用还远远不够

Ajax的四个基本原则

• 浏览器中的是应用而不是内容
  
• 服务器交付的是数据而不是内容
  • 传统Web应用中，服务器在每个步骤都需要把模板文件、内容和数据混合发送给浏览器。但是实际上当向购物车中添加一件物品的时候， 服务器真正需要相应的仅仅是更新一下购物车的价格
  • Ajax应用可以通过多种方式来做这个事情
  • Ajax应用的网络通信流量主要集中在加载的前期，此后通信效率则会有效得多。通信流量减少
    
    
• 用户交互变得流畅而连续
  
• 有纪律的严肃编程
  • Ajax应用编程提交给用户运行的应用将会一直运行，直到用户关闭程序为止。
  • 相比之下，Ajax的代码库会比传统的Web 应用大很多，对代码库进行良好的组织非常重要。

真实世界的Ajax富客户端

• Google Maps
• 是结合了地图浏览和搜索引擎的产物。地图可以自由地通过文本来查询。
• 地图是Ajax驱动的
  • 触发下载新地图数据的操作不是点击一个特定的链接，而是用户的操作，用户的工作流程并没有被与服务器的通信所打断
  • 请求本身是异步的，当获取新数据时，相关的链接、缩放控件以及其它功能仍然可用

Ajax概述

Ajax技术的特点

• 网页中包含JavaScript代码而不是冗长的数据
• 服务器不必重复构造新网页
• 减少网络负担
• Framework比较多，比如： MagicAjax.NET，Anthem.NET， Ajax.NET Professional，Atlas，
• jQuery, Google GWT, IBM Ajax Toolkit Framework(ATF)

标准Ajax交互

AJAX引擎中的几个主要技术

XMLHttpRequest

• XMLHttpRequest对象的方法
  
• XMLHttpRequest对象的属性
  
• 获得XMLHttpRequest对象
  
• XMLHttpRequest发送请求
  
• XMLHttpRequest的回调函数监测请求
  
  

DOM

• DOM是给HTML和XML文件使用的一组API。它提供了文件的结构表述，可以改变其中的内容及可见物。其本质是建立网页与Script或程序语言沟通的桥梁。所有Web开发人员可操作及建立文件的属性、方法及事件都以对象来展现

JavaScript

• 在AJAX中JavaScript则是XMLHttpRequest和DOM交互桥梁和Ajax 引擎工作的主要推动力。JavaScript通过调用XMLHttpRequest的属性和方法来获取服务端数据，然后调用DOM的API来更新Web页面的内容。实现整个页面的无刷新更新页面

CSS

• CSS为Web页面元素提供了一种可重用的可视化样式定义的方法，它提供了简单而又强大的方法，以一致的方式定义和使用可视化样式。在Ajax应用中，用户界面的样式可以通过CSS独立修改

XML

• 通过XML（Extensible Markup Language），可以规范的定义结构化数据， 是网上传输的数据和文档符合统一的标准。用XML表述的数据和文档，可以很容易的让所有程序共享。
• Ajax进行数据通信的数据规范还有其他的规范，如JSON

几种主要技术之间的关系

AJAX设计的目的和意义

• 减轻服务器的负担
• 无刷新更新页面，减少用户实际和心理等待时间
• 基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序
• AJAX可以调用外部数据
• AJAX使Web中的界面与应用分离

使用Ajax改进现有站点

• Customize Me Now 1.0 站点地图
  
• 原系统界面
  
• 采用Ajax后的系统界面
  
• Customize Me Now 2.0 站点地图
  

案例：使用Ajax和XSLT的动态搜索

• Ajax模型的流程图

  • 服务器端生成数据，客户端将这些数据直接插进页面

  

  • 通过Ajax将XML和XSLT文档合并，并且显示结果，避免了手工调用DOM方法，减少了JavaScript的代码

• 设置客户端

  • 根据用户的姓名搜索电话簿

• 启动搜索过程

  • 服务器端的PHP代码获得用户输入的信息，运行数据库查询，动态创建XML文档，静态的XSLT文档将动态创建的XML转换成HTML
  • 

• 服务器端的XML文档示例
  
  
  

• 合并XML和XSLT文档
  

• 对结果应用CSS
  

• 使Ajax支持书签
  
  

Node.js

JavaScript

• JavaScript真正意义上是两种，甚至可以说是三种形态存在
  • 上世纪90年代的作为对DHTML进行增强的小玩具
  • 到像jQuery那样严格意义上的前端技术
  • 一直到现在的服务端技术

服务端JavaScript

• JavaScript最早是运行在浏览器中，然而浏览器只是提供了一个上下文，它定义了使用JavaScript可以做什么，但并没有“说” 太多关于JavaScript语言本身可以做什么。事实上，JavaScript是一门“完整”的语言： 它可以使用在不同的上下文中，其能力与其他同类语言相比有过之而无不及
• Node.js事实上就是另外一种上下文，它允许在后端（脱离浏览器环境）运行JavaScript代码。
• 要实现在后台运行JavaScript代码，代码需要先被解释然后正确的执行。Node.js的原理正是如此，它使用了Google的V8虚拟机（Google的Chrome浏览器使用的JavaScript执行环境），来解释和执行JavaScript代码

Node.js

• Node.js事实上既是一个运行时环境，同时又是一个库

• 访问node.js官网，点击Download链接，然后选择Windows Installer，下载安装包

• 下载完成后直接双击安装，和其它一般软件安装一样

• 

  var http = require('http'); 
  http.createServer(function (req, res) 
  { res.writeHead(200, {'Content-Type': 'text/plain'}); 
  res.end('Hello World\n');
  }).listen(8888);
  console.log('Server running at http://127.0.0.1:8888/');
  

• 把上述文件存为index.js
  进入命令行,输入：node index.js
  在浏览器地址栏输入：127.0.0.1:8888

• Node.js 的结构大致分为三个层次：

  • Node.js 标准库，这部分是由Javascript 编写的，即我们使用过程中直接能调用的API。在源码中的 lib 目录下可以看到
  • Node bindings，这一层是 Javascript 与底层C/C++ 能够沟通的关键，前者通过 bindings 调用后者，相互交换数据。实现在 node.cc
  • 支撑Node.js 运行的关键，由 C/C++ 实现
    • V8：Google 推出的Javascript VM，也是Node.js 为什么使用的是Javascript 的关键，它为Javascript 提供了在非浏览器端运行的环境，它的高效是Node.js 之所以高效的原因之一
    • Libuv：它为Node.js 提供了跨平台，线程池，事件池，异步I/O等能力，是Node.js 如此强大的关键
    • C-ares：提供了异步处理DNS 相关的能力
    • http_parser、OpenSSL、zlib 等：提供包括http 解析、SSL、数据压缩等其他的能力

Libuv

• Libuv 是Node.js 关键的一个组成部分，它为上层的Node.js 提供了统一的API 调用，使其不用考虑平台差距，隐藏了底层实现
  

总结

• Node.js 通过libuv 来处理与操作系统的交互， 并且因此具备了异步、非阻塞、事件驱动的能力
• Node.js 实际上是Javascript 执行线程的单线程，真正的的I/O 操作，底层 API 调用都是通过多线程执行的
• CPU 密集型的任务是Node.js 的软肋

一个完整的基于Node.js的web应用

• 用户可以通过浏览器使用我们的应用。
• 当用户请求http://domain/start时，可以看到一个欢迎页面，页面上有一个文件上传的表单。
• 用户可以选择一个图片并提交表单，随后文件将被上传到http://domain/upload，该页面完成上传后会把图片显示在页面上。

index.js
var server = require("./server"); var router = require("./router");
var requestHandlers = require("./requestHandlers");
var handle = {};
handle["/"] = requestHandlers.start; handle["/start"] = requestHandlers.start; handle["/upload"] = requestHandlers.upload; handle["/show"] = requestHandlers.show;
server.start(router.route, handle);

 server.js
var http = require("http"); var url = require("url");
function start(route, handle) {
function onRequest(request, response) {
var pathname = url.parse(request.url).pathname; console.log("Request for " + pathname + " received."); route(handle, pathname, response, request);
}
http.createServer(onRequest).listen(8888); console.log("Server has started.");
}
exports.start = start;

router.js
function route(handle, pathname, response, request) { console.log("About to route a request for " + pathname); if (typeof handle[pathname] === 'function') { handle[pathname](response, request);
} else {
console.log("No request handler found for " + pathname); response.writeHead(404, {"Content-Type": "text/html"}); response.write("404 Not found");
response.end();
}
}
exports.route = route;

requestHandlers.js
var querystring = require("querystring"), fs = require("fs"),
formidable = require("formidable");
function start(response) {
console.log("Request handler 'start' was called.");
var body = ''+ ''+
'+ 'charset=UTF-8" />'+
''+ ''+
'
+ 'method="post">'+
''+ ''+
''
+ ''+ '';
response.writeHead(200, {"Content-Type": "text/html"}); response.write(body);
response.end();
}
function upload(response, request) { console.log("Request handler 'upload' was called.");
var form = new formidable.IncomingForm(); console.log("about to parse"); form.parse(request, function(error, fields, files) { console.log("parsing done");
fs.renameSync(files.upload.path, "/tmp/test.png"); response.writeHead(200, {"Content-Type": "text/html"}); response.write("received image:
"); response.write("");
response.end();
});
}
function show(response) {
console.log("Request handler 'show' was called."); fs.readFile("/tmp/test.png", "binary", function(error, file) { if(error) {
response.writeHead(500, {"Content-Type": "text/plain"}); response.write(error + "\n");
response.end();
} else {
response.writeHead(200, {"Content-Type": "image/png"}); response.write(file, "binary");
response.end();
}
});
}
exports.start = start;
exports.upload = upload; exports.show = show;

详细解释

详细解释

Node.js RESTful API

创建RESTful

• 创建一个json 数据资源文件users.json，内容如下
  

创建RESTful API

序号	URI	HTTP 方法	发送内容	结果
1	listUsers	GET	空	显示所有用户列表
2	addUser	POST	JSON 字符串	添加新用户
3	deleteUser	DELETE	JSON 字符串 删除用户
4	:id	GET	空	显示用户详细信息

获取用户列表

• 创建RESTful API listUsers，用于读取用户的信息列表
• server.js 文件
  

运行服务

• 运行node server.js
• 在浏览器中访问http://127.0.0.1:8081/lis tUsers
  

添加用户

显示用户详情

RESTful API :id（用户id）

删除用户

RESTful API deleteUser