Neeke » JavaScript http://www.ineeke.com (function f(a){if(a == '堕落'){return f('上进');}else{alert( '保持'+a+'！加油！！！');}})('上进') Tue, 07 Sep 2010 11:23:33 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 JavaScript回车切换焦点 http://www.ineeke.com/archives/switch-the-focus-by-enter-key-in-javascript/ http://www.ineeke.com/archives/switch-the-focus-by-enter-key-in-javascript/#comments Fri, 02 Jul 2010 06:56:42 +0000 Neeke http://www.ineeke.com/archives/switch-the-focus-by-enter-key-in-javascript/ 一般情况下，在一个form表单中如果存在一个input标签的type值为submit，那么直接敲回车键这个表单就提交了。且，一般情况下，网页中切换焦点都是使用Tab键来控制，顺序则由标签的index属性值来控制。
不过，为了使用者的方便（并不一定方便，而是客户的需求，客户觉得Tab不方便。），我们需要用JavaScript来重新实现一番，要能够通过回车切换焦点而不提交表单。
可以这么来实现：每个input都赋予唯一id值，且id是有规律有次序的（如共有n个，则id值依次为：i1,i2,i3…in）。首先获取所有的input标签：

var inputs = document.getElementsByTagName('input');

接下来遍历并处理onkeyup事件，回车键的ASCⅡ码值为13，当keyCode值为13时，使用JavaScript正则表达式取出当前当input标签中id索引值，从而拼出下一个待获得焦点的input标签的id，接着使用document.getElementById()找到该标签并调用自身的focus()方法使其获得焦点。

1
2
3
4
5
6
7
8
9
10
11

for(var i = 0; i < inputs.length; i++){
	inputs[i].onkeyup = function(event){
		event = event || window.event;
		if(event.keyCode == 13){
			var next = document.getElementById('i' + (parseInt(this.id.match(/\d+/)[0]) + 1));
			if(next){
				next.focus();
			}
		}
	}
}

但是这时候点击回车表单依旧会提交。可以这么处理：将submit改成button，然后监听onclick通过JavaScript提交表单。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/switch-the-focus-by-enter-key-in-javascript/feed/ 10 Java模拟腾讯微博的网页登录失败 http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-failed/ http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-failed/#comments Wed, 23 Jun 2010 13:43:10 +0000 Neeke http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-failed/ 想模拟腾讯微博的网页登录呢，结果没成功，暂时还没找到原因，我觉得应该没问题了啊，记录下来，等有空了继续折腾。
腾讯微博登录页面在这里：http://ui.ptlogin2.qq.com/login_weibo.html
已成功，可以选择继续阅读，或查看[Java模拟腾讯微博的网页登录成功]。
通过分析得到如下信息：
主要JS文件：

http://ui.ptlogin2.qq.com/login_t.js

验证码获取地址：

http://ptlogin2.qq.com/check?uin=9920317&appid=46000101&r=0.2535580481721431

在登录页载入的时候这个请求被发送，这个返回的是一个JavaScript，类似这么个格式：

ptui_checkVC(’0′,’!Y2D’)

在页面上通过eval()执行，将第二个参数（验证码）赋给表单的隐藏域。
登录时的请求：

http://ptlogin2.qq.com/login?u=9920317&p=33FB075FEFD31C2BBD38E3D1CD71491D&verifycode=!Y2D&aid=46000101&u1=http://t.qq.com&h=1&from_ui=1&fp=loginerroralert

通过测试发现登录时的参数p的值（MD5加密后的密码）每次都不一样，刚开始有点纳闷，假设数据库里面存的是33FB075FEFD31C2BBD38E3D1CD71491D，而我登录的时候发送的是33FB075FEFD31C2BBD38E3D1CD71491A或者33FB075FEFD31C2BBD38E3D1CD71491E，他这是怎么判断密码是否一致的？后来分析了login_t.js，其实腾讯的这个登录与之前我做过的[支付宝接口开发]和[支付宝接口开发（ColdFusion版）]是同一个道理。
从login_t.js中可以找到如下代码：

1
2
3
4

var f = "";
f += e.verifycode.value;
f = f.toUpperCase();
b += md5(md5_3(e.p.value) + f)

先将输入的原始密码A通过md5_3()加密得到字符串B，接着将验证码追加到B之后得到C，再用md5()加密C得到D。原始密码当然是不变的，而验证码每次都不一样（当然也有几率一样），这就是为什么每次发送的MD5值都不一样的原因了。
从登录的请求中可以找到verifycode这个参数，打眼一看就知道是验证码啦，从客户端将上面得到的D与verifycode都发送到服务器端，服务器端通过u值（QQ号）查出上面的密码B，然后在服务器端对B+verifycode进行md5求值，将结果与发送过来的D进行比较，一致则登录成功，反之失败。（这些都是结合支付宝那个猜的）
其它参数基本上都是死值，除了获取验证码时传递的那个随机数r。
都分析清楚了，我就用Java开工了，写了下面这么个类（因为是瞎捣鼓，所以没考虑什么规范）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

public class QQ {
 
	public String md5(String p){
		return hex_md5(p);
	}
 
	public String md5_3(String p){
 
		int s[] = null;
	    s = core_md5(str2binl(p), p.length() * 8);
	    s = core_md5(s, 16 * 8);
	    s = core_md5(s, 16 * 8);
	    return binl2hex(s);
	}
 
	public String hex_md5(String p) {
	    return binl2hex(core_md5(str2binl(p), p.length() * 8));
	}
 
	public int[] core_md5(int[] s, int k){
		s[k >> 5] |= 128 << (k % 32);
		s[(((k + 64) >>> 9) << 4) + 14] = k;
		int o = 1732584193;
		int n = -271733879;
		int m = -1732584194;
		int l = 271733878;
		for (int g = 0; g < s.length; g += 16) {
	        int j = o;
	        int h = n;
	        int f = m;
	        int e = l;
	        o = md5_ff(o, n, m, l, s[g + 0], 7, -680876936);
	        l = md5_ff(l, o, n, m, s[g + 1], 12, -389564586);
	        m = md5_ff(m, l, o, n, s[g + 2], 17, 606105819);
	        n = md5_ff(n, m, l, o, s[g + 3], 22, -1044525330);
	        o = md5_ff(o, n, m, l, s[g + 4], 7, -176418897);
	        l = md5_ff(l, o, n, m, s[g + 5], 12, 1200080426);
	        m = md5_ff(m, l, o, n, s[g + 6], 17, -1473231341);
	        n = md5_ff(n, m, l, o, s[g + 7], 22, -45705983);
	        o = md5_ff(o, n, m, l, s[g + 8], 7, 1770035416);
	        l = md5_ff(l, o, n, m, s[g + 9], 12, -1958414417);
	        m = md5_ff(m, l, o, n, s[g + 10], 17, -42063);
	        n = md5_ff(n, m, l, o, s[g + 11], 22, -1990404162);
	        o = md5_ff(o, n, m, l, s[g + 12], 7, 1804603682);
	        l = md5_ff(l, o, n, m, s[g + 13], 12, -40341101);
	        m = md5_ff(m, l, o, n, s[g + 14], 17, -1502002290);
	        n = md5_ff(n, m, l, o, s[g + 15], 22, 1236535329);
	        o = md5_gg(o, n, m, l, s[g + 1], 5, -165796510);
	        l = md5_gg(l, o, n, m, s[g + 6], 9, -1069501632);
	        m = md5_gg(m, l, o, n, s[g + 11], 14, 643717713);
	        n = md5_gg(n, m, l, o, s[g + 0], 20, -373897302);
	        o = md5_gg(o, n, m, l, s[g + 5], 5, -701558691);
	        l = md5_gg(l, o, n, m, s[g + 10], 9, 38016083);
	        m = md5_gg(m, l, o, n, s[g + 15], 14, -660478335);
	        n = md5_gg(n, m, l, o, s[g + 4], 20, -405537848);
	        o = md5_gg(o, n, m, l, s[g + 9], 5, 568446438);
	        l = md5_gg(l, o, n, m, s[g + 14], 9, -1019803690);
	        m = md5_gg(m, l, o, n, s[g + 3], 14, -187363961);
	        n = md5_gg(n, m, l, o, s[g + 8], 20, 1163531501);
	        o = md5_gg(o, n, m, l, s[g + 13], 5, -1444681467);
	        l = md5_gg(l, o, n, m, s[g + 2], 9, -51403784);
	        m = md5_gg(m, l, o, n, s[g + 7], 14, 1735328473);
	        n = md5_gg(n, m, l, o, s[g + 12], 20, -1926607734);
	        o = md5_hh(o, n, m, l, s[g + 5], 4, -378558);
	        l = md5_hh(l, o, n, m, s[g + 8], 11, -2022574463);
	        m = md5_hh(m, l, o, n, s[g + 11], 16, 1839030562);
	        n = md5_hh(n, m, l, o, s[g + 14], 23, -35309556);
	        o = md5_hh(o, n, m, l, s[g + 1], 4, -1530992060);
	        l = md5_hh(l, o, n, m, s[g + 4], 11, 1272893353);
	        m = md5_hh(m, l, o, n, s[g + 7], 16, -155497632);
	        n = md5_hh(n, m, l, o, s[g + 10], 23, -1094730640);
	        o = md5_hh(o, n, m, l, s[g + 13], 4, 681279174);
	        l = md5_hh(l, o, n, m, s[g + 0], 11, -358537222);
	        m = md5_hh(m, l, o, n, s[g + 3], 16, -722521979);
	        n = md5_hh(n, m, l, o, s[g + 6], 23, 76029189);
	        o = md5_hh(o, n, m, l, s[g + 9], 4, -640364487);
	        l = md5_hh(l, o, n, m, s[g + 12], 11, -421815835);
	        m = md5_hh(m, l, o, n, s[g + 15], 16, 530742520);
	        n = md5_hh(n, m, l, o, s[g + 2], 23, -995338651);
	        o = md5_ii(o, n, m, l, s[g + 0], 6, -198630844);
	        l = md5_ii(l, o, n, m, s[g + 7], 10, 1126891415);
	        m = md5_ii(m, l, o, n, s[g + 14], 15, -1416354905);
	        n = md5_ii(n, m, l, o, s[g + 5], 21, -57434055);
	        o = md5_ii(o, n, m, l, s[g + 12], 6, 1700485571);
	        l = md5_ii(l, o, n, m, s[g + 3], 10, -1894986606);
	        m = md5_ii(m, l, o, n, s[g + 10], 15, -1051523);
	        n = md5_ii(n, m, l, o, s[g + 1], 21, -2054922799);
	        o = md5_ii(o, n, m, l, s[g + 8], 6, 1873313359);
	        l = md5_ii(l, o, n, m, s[g + 15], 10, -30611744);
	        m = md5_ii(m, l, o, n, s[g + 6], 15, -1560198380);
	        n = md5_ii(n, m, l, o, s[g + 13], 21, 1309151649);
	        o = md5_ii(o, n, m, l, s[g + 4], 6, -145523070);
	        l = md5_ii(l, o, n, m, s[g + 11], 10, -1120210379);
	        m = md5_ii(m, l, o, n, s[g + 2], 15, 718787259);
	        n = md5_ii(n, m, l, o, s[g + 9], 21, -343485551);
	        o = safe_add(o, j);
	        n = safe_add(n, h);
	        m = safe_add(m, f);
	        l = safe_add(l, e);
	    }
		int[] rs = new int[16];
		rs[0] = o;
		rs[1] = n;
		rs[2] = m;
		rs[3] = l;
		return rs;
	}
 
	public int[] str2binl(String p){
 
		int[] s = new int[16];
		int a = 254;
		for(int i = 0; i < p.length() * 8; i += 8){
			s[ i >> 5] |= ((p.charAt(i / 8)) & a + 1) << (i % 32);
		}
		return s;
	}
 
	public static void main(String[] args){
		QQ q = new QQ();
		String verifyURL = "http://ptlogin2.qq.com/check?uin=9920317&appid=46000101&r=0.37908964480776913";
		String loginURL = "http://ptlogin2.qq.com/login?";
		String redirectURL = "";
		String cookie = "";
		String qqn = "9920317";
		String md5Pass = "";
		String verifyCode = "";
 
		HttpURLConnection urlConn = (HttpURLConnection)(new URL(verifyURL)).openConnection();
		urlConn.setDoOutput(true);
		urlConn.setDoInput(true);
		urlConn.setUseCaches(false);
		urlConn.setAllowUserInteraction(false);
		urlConn.setRequestMethod("GET");
		urlConn.connect();
		String cookie1 = urlConn.getHeaderField("Set-Cookie");
		BufferedReader br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));
		StringBuffer sb = new StringBuffer();
		String str = br.readLine();
		while(null != str){
			sb.append(str);
			str = br.readLine();
		}
		br.close();
		urlConn.disconnect();
		verifyCode = sb.substring(18, sb.length() - 3);
 
		loginURL += "u=9920317&p=";
		loginURL += qq.md5(qq.md5_3("") + verifyCode.toUpperCase());
		loginURL += "&verifycode="+verifyCode.toUpperCase()+"&aid=46000101&u1=http%3A%2F%2Ft.qq.com&h=1&from_ui=1&fp=loginerroralert";
		urlConn = (HttpURLConnection)(new URL(loginURL)).openConnection();
		urlConn.setDoOutput(true);
		urlConn.setDoInput(true);
		urlConn.setUseCaches(false);
		urlConn.setAllowUserInteraction(false);
		urlConn.setRequestProperty("Cookie", cookie1);
		urlConn.connect();
		String[] setCookies = urlConn.getHeaderFields().get("Set-Cookie").toString().split(";");
 
		String cookie2 = "";
		cookie2 += setCookies[30];
		cookie2 += setCookies[27];
		cookie2 += setCookies[24];
		cookie2 += setCookies[4];
		cookie2 = cookie2.replace(',', ';');
		cookie2 = cookie2.substring(2, cookie2.length());
		out.print(cookie2 + "<hr />");
		br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));;
		str = br.readLine();
		sb = new StringBuffer();
		while(null != str){
			sb.append(str);
			str = br.readLine();
		}
		br.close();
		urlConn.disconnect();
	}
 
	public int md5_cmn(int h, int e, int d, int c, int g, int f){
		return safe_add(bit_rol(safe_add(safe_add(e, h), safe_add(c, f)), g), d);
	}
 
	public int md5_ff(int g, int f, int k, int j, int e, int i, int h) {
	    return md5_cmn((f & k) | ((~f) & j), g, f, e, i, h);
	}
	public int md5_gg(int g, int f, int k, int j, int e, int i, int h) {
	    return md5_cmn((f & j) | (k & (~j)), g, f, e, i, h);
	}
	public int md5_hh(int g, int f, int k, int j, int e, int i, int h) {
	    return md5_cmn(f ^ k ^ j, g, f, e, i, h);
	}
	public int md5_ii(int g, int f, int k, int j, int e, int i, int h) {
	    return md5_cmn(k ^ (f | (~j)), g, f, e, i, h);
	}
 
	public int safe_add(int a, int d){
		int c = (a & 65535) + (d & 65535);
		int b = (a >> 16) + (d >> 16) + (c >> 16);
		return (b << 16) | (c & 65535);
	}
 
	public int bit_rol(int a, int b){
		return (a << b) | (a >>> (32 - b));
	}
 
	public String binl2hex(int[] c) {
	    String b = "0123456789ABCDEF";
	    String d = "";
	    for (int a = 0; a <c.length * 4; a++) {
	    	char x = (char)b.charAt((c[a >> 2] >> ((a % 4) * 8 + 4)) & 15);
	    	char y = (char)b.charAt((c[a >> 2] >> ((a % 4) * 8)) & 15);
	    	d += x;
	    	d += y;
	    }
	    return d.substring(0, 32);
	}
}

跑了几次都返回的是：

ptuiCB(’7′,’0′,”,’0′);

提示：您的输入有误, 请重试。
而按理来说返回的应该是：

ptuiCB(’0′,’0′,’http://t.qq.com’,’0′);

密码错误则是：

ptuiCB(’3′,’0′,”,’0′);

用同样的参数在我写的和官方JavaScript产生的请求地址是一模一样的，可就是不成功。
目前想到的两点：
1.我使用了两次HttpURLConnection，Session不一致。
2.服务器上对Referer进行了验证。

虽说没成功，但是也学到了不少，NND，光这个login_t.js里面的算法就够学的了 n:-gg 。
发现一个有意思的地方：在login_t.js的str2binl函数中有如下一行代码（chrsz是个常数8，我的代码中直接写的8）：

c[b>>5] |= (d.charCodeAt(b / chrsz) & a) << (b % 32)

而我用Java语言来写这个方法时必须得写成这样：

s[i>> 5] |= ((p.charAt(i / 8)) & a + 1) << (i % 32);

不然结果就不一致。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/java-simulation-of-micro-bos-homepage-tencent-login-failed/feed/ 0 JavaScript动态时钟 http://www.ineeke.com/archives/javascript-dynamic-clock/ http://www.ineeke.com/archives/javascript-dynamic-clock/#comments Mon, 26 Apr 2010 04:43:25 +0000 Neeke http://www.ineeke.com/archives/javascript-dynamic-clock/
JavaScript dynamic clock

JavaScript dynamic clock


继续玩JavaScript CanvasRenderingContext2D。前面画出来的都是“死”的，下面结合前面两个例子做一个“动”态时钟。当然还是得先了解一下即将用到的一些新属性及方法。
方法
save()：
将当前图形信息存储在栈中。

restore()：
从栈中取出图形信息并应用。

clearRect(float x, float y, float width, float height)：
清空指定区域的图像并透明化。

translate(float dx, float dy)：
为画布的变换矩阵添加水平的和垂直的偏移。参数 dx 和 dy 添加给后续定义路径中的所有点。

scale(float sx, float sy)：
横纵缩放。

rotate(angle)：
旋转，angle为弧度数。

lineTo(float x, float y)：
指定线条终点坐标。

fill()：
填充图形。

属性

lineWidth：
线条宽度

lineCap：
指定线段如何结束。只有绘制较宽线段时，它才有效。这个属性的合法值如下表所示。默认值是：”butt”。
“butt” 这个默认值指定了线段应该没有线帽。线条的末点是平直的而且和线条的方向正交，这条线段在其端点之外没有扩展。
“round” 这个值指定了线段应该带有一个半圆形的线帽，半圆的直径等于线段的宽度，并且线段在端点之外扩展了线段宽度的一半。
“square” 这个值表示线段应该带有一个矩形线帽。这个值和 “butt” 一样，但是线段扩展了自己的宽度的一半。
其它方法及属性可参见JavaScript CanvasRenderingContext2D在canvas上绘图及JavaScript绘制笑脸。
下面给出代码：

function clock(){
	var now = new Date();
	var ctx = document.getElementById('clock').getContext('2d');
	//保存状态，将当前状态压栈
	ctx.save();
	//清理图像
	ctx.clearRect(0,0,150,150);
	//已(75, 75)为原点，将图像复制
	ctx.translate(75, 75);
	//横纵比
	ctx.scale(0.5, 0.5);
	//逆转90°
	ctx.rotate(-Math.PI/2);
	//设置线条颜色
	ctx.strokeStyle = "black";
	//设置填充颜色
	ctx.fillStyle = "white";
	//设置线条宽度
	ctx.lineWidth = 8;
	//设置线边角为圆角
	ctx.lineCap = "round";
	//保存状态，将当前状态压栈
	ctx.save();
	//画出12个时刻
	for (var i=0;i&lt;12;i++){
		//以当前原点为圆心
		ctx.beginPath();
		//旋转30°
		ctx.rotate(Math.PI/6);
		//以圆心外100像素处为起点，120像素处为终点画线
		ctx.moveTo(100,0);
		ctx.lineTo(120,0);
		//画出这条路线
		ctx.stroke();
	}
	//出栈，将取出的状态作为当前状态
	ctx.restore();
	//再将状态压栈，保存起来
	ctx.save();
	//设置线条宽度
	ctx.lineWidth = 5;
	//画出60个分钟
	for (i=0;i<60;i++){
		//因为时针就是每五分钟的点了，所以跳过不画了
		if (i%5!=0) {
		  ctx.beginPath();
		  ctx.moveTo(117,0);
		  ctx.lineTo(120,0);
		  ctx.stroke();
		}
		//旋转6°
		ctx.rotate(Math.PI/30);
	}
	//出栈，将取出的状态作为当前状态
	ctx.restore();
 
	//取出当前秒
	var sec = now.getSeconds();
	//取出当前分
	var min = now.getMinutes();
	//取出当前时
	var hr  = now.getHours();
	//判断是否是24小时计时法，是则减12
	hr = hr>=12 ? hr-12 : hr;
	//再将状态压栈，保存起来
	ctx.save();
 
	// 画出时针
	//时针转向当前位置
	ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec );
	//设置时针宽度
	ctx.lineWidth = 14;
	//以当前原点为圆心
	ctx.beginPath();
	//反向延长20个像素
	ctx.moveTo(-20,0);
	ctx.lineTo(80,0);
	//画线
	ctx.stroke();
	ctx.restore();
 
	//画分针
	ctx.save();
	ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
	ctx.lineWidth = 10;
	ctx.strokeStyle = 'blue';
	ctx.beginPath();
	ctx.moveTo(-28,0);
	ctx.lineTo(112,0);
	ctx.stroke();
	ctx.restore();
 
	//画秒针
	ctx.save();
	ctx.rotate(sec * Math.PI/30);
	ctx.strokeStyle = "red";
	ctx.fillStyle = "red";
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.moveTo(-30,0);
	ctx.lineTo(120,0);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0,0,10,0,Math.PI*2,true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(90,0,10,0,Math.PI*2,true);
	ctx.stroke();
	ctx.fillStyle = "black";
	ctx.arc(0,0,3,0,Math.PI*2,true);
	ctx.fill();
	ctx.restore();
 
	//加一个表盘
	ctx.beginPath();
	ctx.lineWidth = 14;
	ctx.strokeStyle = 'gray';
	ctx.arc(0,0,142,0,Math.PI*2,true);
	ctx.stroke();
	ctx.restore();
}

在浏览器里面看看吧 n:-wx ！咦！为什么没有动呢？这可不是GIF图片啊！怎么动呢？

function initClock(){
	clock();
	setInterval(clock,1000);
}

再加一段如上代码进去，然后调用initClock()方法，现在再看看，动了吧。其实每次看到的都是一张静止的图片，只是每隔一秒将当前的时间以钟表的样子画上去而已。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-dynamic-clock/feed/ 0 JavaScript绘制笑脸 http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/ http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/#comments Fri, 23 Apr 2010 02:18:31 +0000 Neeke http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/
smile face

smile face


可别看这张脸简单啊，你要知道这里面可是用了平面几何中的圆啊！（π值你能背到第几位？）所以必须得知道圆的定义：1.平面上到定点的距离等于定长的点的集合叫圆,2.平面上一条线段，绕它的一端旋转360°，留下的轨迹叫圆，另外还得知道坐标系以及CanvasRenderingContext2D提供的方法。
以下是将要用到的几个CanvasRenderingContext2D的方法及属性：
方法

  1. beginPath()
    • 清除任何已定义的路径并创建一个新的路径。当canvas的context被第一次创建时，该方法将自动被调用并设置当坐标点为(0, 0)。
  2. moveTo(float x, float y)
    • 该方法将画笔移动到(x, y)并以此为起点开启一条子路径。如果再此之前已经存在了一个子路径，且该路径中只存在一个点，那么这个路径将被删除。
  3. arc(float x, float y, float radius, float startAngle, endAngle,boolean counterclockwise)
    • x,y
      • 圆心坐标
    • radius
      • 半径
    • startAngle,endAngle
      • 弧度
    • counterclockwise
      • true为逆时针，false为顺时针
  4. stroke()
    • 画出当前路径的几何图形，其视觉效果依靠strokeStyle，lineWidth,，lineCap,，lineJoin及miterLimit 属性。

属性

  1. strokeStyle
    • 设置几何图形的颜色

这个圆不简单吧，需要这么多知识，不过应该不是很难吧。下面给出代码：

var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
//注意：默认起始坐标（0, 0）位置在左上角
ctx.beginPath();
//设置图形为红色
ctx.strokeStyle = 'red';
//以（75, 75）点为圆心，50为半径，弧度数为0到2π（360°），逆时针画圆
ctx.arc(75, 75, 50, 0, Math.PI*2, true);
//画笔移动至（110, 75）
ctx.moveTo(110, 75);
//因为嘴巴是个半圆，所以弧度数是0到π，嘴巴长在下面而不是上面，所以顺时针画
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
//画出左眼
ctx.arc(60, 65, 5, 0, Math.PI*2, true);
ctx.moveTo(95, 65);
//画出右眼
ctx.arc(90, 65, 5, 0, Math.PI*2, true);
//这时候你在浏览器上是什么也看不到的，必须调用下面的方法才能够看到
ctx.stroke();

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/draw-a-smile-face-with-javascript/feed/ 1 JavaScript CanvasRenderingContext2D在canvas上绘图 http://www.ineeke.com/archives/scripted-drawing-by-canvasrenderingcontext2d-createradialgradient/ http://www.ineeke.com/archives/scripted-drawing-by-canvasrenderingcontext2d-createradialgradient/#comments Thu, 22 Apr 2010 02:28:30 +0000 Neeke http://www.ineeke.com/archives/scripted-drawing-by-canvasrenderingcontext2d-createradialgradient/ canvas

canvas

看到旁边的图，如果要问是怎么画的，估计第一反应是Photoshop，其实这是用JavaScript在canvas标签上通过CanvasRenderingContext2D对象画出来的。接下来看看如果通过JavaScript画出这张图来。
首先需要了解以下知识：
HTML中用于脚本画图的canvas元素
目前Firefox 1.5, Safari 1.3,及Opera 9以上版本都支持此元素，鸟IE都出8了，还是不支持，想在IE上看可以安装http://excanvas.sourceforge.net来模拟效果。

  1. 属性
    • height默认值300
    • width默认值300
  2. 方法
    • getContext()返回一个CanvasRenderingContext2D对象用于在canvas上绘图，你必须传入字符串参数“2d”

CanvasGradient

可以将该对象赋值给CanvasRenderingContext2D对象的strokeStyle及fillStyle属性。CanvasRenderingContext2D对象的createLinearGradient()及createRadialGradient()返回类型均为CanvasGradient。

该对象的addColorStop(float offset, String color)方法可以改变指定点的颜色。该方法至少要使用一次，否则绘图将是透明的。

CanvasRenderingContext2D.createRadialGradient( )

  1. 方法介绍
    • CanvasGradient createRadialGradient(float xStart, float yStart, float radiusStart, float xEnd, float yEnd, float radiusEnd)
  2. 参数
    • xStart, yStart
      • 起始圆圆心坐标
    • radiusStart
      • 起始圆半径
    • xEnd, yEnd
      • 结束圆圆心坐标
    • radiusEnd
      • 结束圆半径
  3. 返回值
    • 一个CanvasGradient对象

样例
以下是实现上图效果的JavaScript代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var radial = ctx.createRadialGradient(60, 75, 0, 100, 75, 60);
radial.addColorStop(0, '#000');
radial.addColorStop(0.5, 'red');
radial.addColorStop(1, '#999');
ctx.fillStyle = radial;
ctx.stroke();
ctx.fillRect(0, 0, 200, 150);

或许你会对下面这些文章感兴趣：

  • 2010年04月26日 -- JavaScript动态时钟
    继续玩JavaScript CanvasRenderingContext2D。前...
  • 2010年04月23日 -- JavaScript绘制笑脸
    可别看这张脸简单啊，你要知道这里面可是用了平面几何中的圆啊！（π值你能背到第几位...
  • 2010年07月2日 -- JavaScript回车切换焦点
    一般情况下，在一个form表单中如果存在一个input标签的type值为subm...
  • 2010年06月23日 -- Java模拟腾讯微博的网页登录失败
    想模拟腾讯微博的网页登录呢，结果没成功，暂时还没找到原因，我觉得应该没问题了啊，...
  • 2010年04月14日 -- 构建自己的JavaScript库
    外面有一批流行的JavaScript库，如jQuery、 ExtJS及Dojo等...
  • 2010年04月13日 -- JavaScript闭包
    我们知道，在JavaScript中函数可以被嵌套，可以被用做数据，并且使用语法作...
  • 2010年04月13日 -- JavaScript函数作用域链
    如JavaScript变量作用域一文所说，JavaScript函数体的执行是局部...
  • 2010年04月12日 -- JavaScript函数属性和方法
    我们知道在JavaScript编程中，函数可以当作数据来使用。typeof运算符...
  • 2010年04月8日 -- JavaScript变量作用域回顾
    在JavaScript变量作用域一文完全基于JavaScript代码词汇结构的定...
  • 2010年04月6日 -- JavaScript变量与对象属性
    你很可能已经注意到JavaScript的变量和对象属性有很多相似处。它们以同样的...
]]> http://www.ineeke.com/archives/scripted-drawing-by-canvasrenderingcontext2d-createradialgradient/feed/ 0 构建自己的JavaScript库 http://www.ineeke.com/archives/build-your-own-javascript-libraries/ http://www.ineeke.com/archives/build-your-own-javascript-libraries/#comments Wed, 14 Apr 2010 03:58:53 +0000 Neeke http://www.ineeke.com/archives/build-your-own-javascript-libraries/ jQuery、 ExtJS及Dojo等。通过下面的一个简单的框架，我们也可以构建出属于自己的JavaScript库。]]> 外面有一批流行的JavaScript库，如jQuery、 ExtJS及Dojo等。通过下面的一个简单的框架，我们也可以构建出属于自己的JavaScript库。

(function(){
	//一个新的命名空间，防止与其它库冲突
	window['Neeke'] = {};
 
	//自己编写的一些方法
	var alert = function(msg){
		window.alert(msg+'www.ineeke.com');
	}
	//纳入自己的库中
	window['Neeke']['alert'] = alert;
	//销毁变量
	alert = null;
	delete alert;
})();

上面只是一个样例，是不是很简单呢？你可以在其基础上扩展，可以将自己编写或者收集一些经常用到的JavaScript方法放进去。
用法：

window.Neeke.alert('Hello');

由于所有全局变量都是window的属性，所以上面的代码可以精简一下：

Neeke.alert('Hello');

与ExtJS对比一下：

Ext.Msg.alert('Hello', 'www.ineeke.com');

很相像吧！至于后两行代码，有人说不再使用的变量置为null即可，有人说对它执行delete也行，然后就让垃圾回收器自己去处理。两个都使用是我在ExtJS官方论坛的一篇帖子中无意中（貌似发生在去年的某一天 n:-hd ）看到的，那个老外称之为“full destroy”。

或许你会对下面这些文章感兴趣：

  • 2010年01月8日 -- 打印Ext组件中的内容
    描述一下大概功能需求：从Ext的GridPanel中选择一条记录，将这条记录的详...
  • 2009年09月1日 -- Ext代码优化并减少编码量
    Ext做的项目里经常要将几个组件合起来做成一个具有某一功能的组件，而且这样的功能...
  • 2010年07月11日 -- Ext中无法触发自定义事件
    Ext中的自定义事件是个好东西，对于某些特殊需求的实现，用它是个很不错的选择。然...
  • 2010年07月2日 -- JavaScript回车切换焦点
    一般情况下，在一个form表单中如果存在一个input标签的type值为subm...
  • 2010年06月23日 -- Java模拟腾讯微博的网页登录失败
    想模拟腾讯微博的网页登录呢，结果没成功，暂时还没找到原因，我觉得应该没问题了啊，...
  • 2010年04月26日 -- JavaScript动态时钟
    继续玩JavaScript CanvasRenderingContext2D。前...
  • 2010年04月23日 -- JavaScript绘制笑脸
    可别看这张脸简单啊，你要知道这里面可是用了平面几何中的圆啊！（π值你能背到第几位...
  • 2010年04月22日 -- JavaScript CanvasRenderingContext2D在canvas上绘图
    看到旁边的图，如果要问是怎么画的，估计第一反应是Photoshop，其实这是用J...
  • 2010年04月15日 -- jQuery EasyUI
    又出现了一个JS库，是基于jQuery的，名为jQuery EasyUI。看官方...
  • 2010年04月13日 -- JavaScript闭包
    我们知道，在JavaScript中函数可以被嵌套，可以被用做数据，并且使用语法作...
]]> http://www.ineeke.com/archives/build-your-own-javascript-libraries/feed/ 0 JavaScript闭包 http://www.ineeke.com/archives/javascript-closures/ http://www.ineeke.com/archives/javascript-closures/#comments Tue, 13 Apr 2010 02:42:57 +0000 Neeke http://www.ineeke.com/archives/javascript-closures/

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

JavaScript使用嵌套函数实现闭包

我们知道，在JavaScript中函数可以被嵌套，可以被用做数据，并且使用语法作用域的交互来实现令人惊奇且强大的效果。下面我们开始探索，考虑一下一个函数g被定义在一个函数f中。当f被调用时，作用域链将在存储全局对象之后将函数f的call对象也存储进去。函数g被定义在函数f中，所以它的作用域链将作为函数g的定义的一部分被保存。当函数g被调用时，作用域链中将含有三个对象：函数g的call对象，函数f的call对象及全局对象。
嵌套函数在他们被定义的同一语法域中被调用是很容易理解的，下面的代码并没有做任何令人特别惊讶的事情：

var x = 'global';
function f(){
	var x = 'local';
	function g(){
		alert(x);
	}
	g();
}
f();	//调用该函数时显示“local”

在JavaScript中，函数像其它值一样也是数据，所以它们也可从函数中被返回，例如可以将函数向对象属性赋值，存储在数组中等等。这不会导致任何奇怪的问题，除非嵌套函数被调用。考虑下面的代码，一个函数返回一个嵌套函数。每次它被调用时都返回一个函数。返回的函数的JavaScript代码也都是一样的，但其在被创建时的作用域每次都略有不同，因为每次调用传递进来的参数值都不同。如果你将返回的函数保存在一个数组里并逐一调用，你会发现每次都将返回一个不同值。由于每个函数都有完全相同的代码，并且都在同一作用域中被调用，唯一能够导致返回不同值的因素就是这些函数被定义时的作用域。

//每次调用该函数都将返回一个函数
//每次调用，函数被定义的时的作用域都不同
function makeFunction(x){
	return function(){
		return x;
	}
}
//调用几次makeFunction并将结果存在数组中
var a = [makeFunction(0), makeFunction(1), makeFunction(2)];
//现在调用这些函数并显示它们的值
//虽然函数体都是一样的
//但是它们的作用域及返回值都是不同的
alert(a[0]);	//显示0
alert(a[1]);	//显示1
alert(a[2]);	//显示2

这段代码的结果正是你所期望的严格遵守语法域规则的应用：函数执行在它被定义时的作用域中。造成这个结果的原因令人惊讶，然而，是你希望在函数退出时将局部作用域也销毁。当一个函数被调用时，JavaScript解释器将为其创建一个call对象并放入作用域链中。当函数退出时，对应的call对象也将被从作用域链中移除。当没有嵌套函数被调用时，作用域链中将只涉及call对象。当此对象被从该链中移除时，链中没有任何元素，此时垃圾回收器将其处理。
如果你在全局作用域中存放一个嵌套函数的引用事情就完全不同了。你可以通过将嵌套函数作为外部函数的返回值或者将嵌套函数作为其它对象的属性来达到这个效果。这两种方式在上例中都有使用到。JavaScript代码无法通过任何途径直接访问call对象，但是它被定义为任何嵌套函数作用域链的一部分。（记住：如果一个外部函数存储了两个嵌套函数的全局引用，这两个嵌套函数共享同一个call对象，任意一方发生改变对另一方都是可见的。）
JavaScript函数是将被执行的代码及执行他们的作用域的集合。在计算机科学中这称之为闭包。如果你理解了闭包，理解了作用域链和函数的call对象，你才是真正的高级JavaScript程序员。

JavaScript闭包样例

有时你想编写一个函数，它能够记住一个值并且跨调用。该值不能存储在函数的局部变量中，因为call对象不能保持跨调用。使用全局变量可以实现，但是这样会侵入全局命名空间。在JavaScript函数属性和方法中我们命名了一个uniqueInteger()函数，它使用自身的一个属性来存储这个值。你可以使用闭包的方式进一步改进并且创建一个持久化的私有变量。下面是一个未使用闭包的函数：

//每次调用都返回一个不同的整型值
uniqueID = function(){
	if(!arguments.callee.id){
		arguments.callee.id = 0;
	}
	return arguments.callee.id++;
};

上面代码的问题在于，任何时候都可以将uniqueID.id修改为0，这将违反我们的要求。为了防止这样的问题发生，你可以将持久化值存储在闭包中，只有你的函数可以访问它：

uniqueID = (function(){		//此函数的call对象管理我们的值
	var id = 0;		//这是一个私有的持久化值
	//外部函数返回一个能够访问这个持久化值的嵌套函数
	//正是这个函数存储着我们的uniqueID
	return function(){
		return id++;	//返回并递增
	}
})();	//定义完后调用

IE浏览器的中JavaScript的闭包和内存泄露

微软IE浏览器为ActiveX对象及客户端DOM元素使用了弱的垃圾回收器。这些客户端对象的引用数被统计下来，当引用数为0时就将它释放。当出现循环引用时这样的设计是失败的，例如一个核心JavaScript对象指向一个文档元素，并且这个元素的一个属性回指这个核心JavaScript对象。
在IE的客户端程序设计中使用闭包，这样的引用循环将会反复出现。当你使用闭包时，记住函数的内附call对象包含所有的函数参数及局部变量，它们都与闭包的生命周期一致。如果函数中任何一个参数或者局部变量指向一个客户端对象，你很可能创建了一个内存泄露。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-closures/feed/ 0 JavaScript函数作用域链 http://www.ineeke.com/archives/javascript-function-scope/ http://www.ineeke.com/archives/javascript-function-scope/#comments Tue, 13 Apr 2010 02:34:18 +0000 Neeke http://www.ineeke.com/archives/javascript-function-scope-and-closures/ JavaScript变量作用域一文所说，JavaScript函数体的执行是局部作用域的。接下来我们将解释一些作用域问题以及JavaScript闭包。]]>

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

如JavaScript变量作用域一文所说，JavaScript函数体的执行是局部作用域的。接下来我们将解释一些作用域问题以及JavaScript闭包。

JavaScript语法域

JavaScript中的函数是语法域而不是动态域。意思就是说，它们运行在被定义的作用域中，而不是它们被执行的作用域中。当一个函数被定义时，当前的作用域链被保存为该函数的一个内部状态，在最外层函数中，作用域链只包含全局对象，这与语法域没有什么关系。当你定义一个嵌套函数时，该作用域链也包括包含函数。也就是说，嵌套函数可以访问包含函数的所有的参数及局部变量。

注意，虽然当一个函数被定义时作用域链是固定的，但是在作用域链中定义的属性确不是固定的。作用域链是“活”的，当函数被调用时，它可以访问当前作用域链中绑定着的任何内容。

JavaScript Call对象

当JavaScript解释器调用一个函数时，实际上是在函数被定义时它第一次将作用域放入作用域链。接着，它又放入一个call对象（在ECMAScript规范中的术语为“激活对象”）到作用域链的最前面。call对象在初始化时伴随着一个arguments属性，该属性指向函数的Arugments对象。函数中命名的参数被放在call对象之后。通过var声明的任何局部变量也都被定义在该对象中。由于call对象处在作用域链的头部，所以局部变量、函数参数以及Arguments对象都出于函数的作用域中了。这就意味着，任何排在作用域链后面的同名属性都将被隐藏。

注意，与arguments不同的是，this是一个关键字，而不是call对象的一个属性。

Call对象作为命名空间

定义一个函数去创建一个call对象来当作一个临时的命名空间有时是很有用的，这样你可以在该命名空间中定义变量或创建属性而不会侵入全局命名空间。例如你有一个JavaScript代码文件需要被用到一堆不同的JavaScript程序中。假如这段代码像大多数代码一样，定义变量并存储计算出来的中间值。问题在于，由于这段代码被用在各种不同的程序中，你不知道里面的变量是否会与其它程序中的变量发生冲突。
解决办法很简单，就是将代码放进一个函数中，接着调用这个函数。这么一来，变量将被定义在这个函数的call对象中：

function init(){
	//在这里声明的任何变量都将成为call对象的属性
	var name = 'Neeke';
	var blog = 'http://www.ineeke.com';
}
//别忘记要调用一下
init();

上面的代码将只在全局命名空间中增加一个init属性，而这个init属性指向对应的函数。如果定义一个属性你都觉得太多，那么你可以试试匿名函数：

(function(){	//这个函数没有名字
	//在这里声明的任何变量都将成为call对象的属性
	var name = 'Neeke';
	var blog = 'http://www.ineeke.com';
})();	//结束函数语法并调用它

注意，函数语法外面的圆括号在JavaScript的语法规则中是必须的。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-function-scope/feed/ 0 JavaScript函数属性和方法 http://www.ineeke.com/archives/javascript-function-properties-and-methods/ http://www.ineeke.com/archives/javascript-function-properties-and-methods/#comments Mon, 12 Apr 2010 01:22:23 +0000 Neeke http://www.ineeke.com/archives/javascript-function-properties-and-methods/

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

我们知道在JavaScript编程中，函数可以当作数据来使用。typeof运算符应用于函数时将返回“function”，然而，JavaScript中的函数是一有特点的。当函数当作对象时，它同样有属性及方法，就像Date和RegExp对象一样。

函数长度属性

在函数体中，arguments数组的length属性值是我们调用函数时实际传递的参数个数，函数自身的length属性则是定义函数时声明的预期的参数个数。函数能够以传递任意个参数调用，所有的参数都存在arguments数组中。与arguments.length所不同的是，函数的length属性在函数内外均可以访问。
下面的代码定义了一个名为check()的函数，接收的是另一个函数的arguments数组。它判断arguments.length和Function.lenght（可以通过arguments.callee.length访问）是否一致（实际传递的参数个数与函数定义时的参数个数是否一致）。

//来自： www.ineeke.com
function check(args){
	var actual = args.length;	//实际参数个数
	var expected = args.callee.length;	//预期的参数个数
	if(actual != expected){
		alert('实际参数个数与预期参数个数不一致');
	}
}
 
function f(x, y, z){
	//检查函数f被调用时的参数个数和预期参数个数
	check(arguments);
 
	return x + y + z;
}

定义自己的函数属性

假设我们想要定义一个函数，无论何时被调用都返回一个唯一整型值。为了能够实现这样的功能，你很可能会选择声明一个全局变量去存储它，然而，这是没必要的，因为我们只想让函数自己来管理这个值。在下面的例子中，无论函数何时被调用都将返回一个唯一整型值：

//来自： www.ineeke.com
//创建并初始化一个“静态”变量
//因为函数在被执行前就已经被解释器处理，所以我们可以在函数被声明前使用它
uniqueInteger.counter = 0;
 
//函数每次都返回一个不同的值
function uniqueInteger(){
 
	//递增并返回该“静态”变量
	return uniqueInteger.counter++;
}

函数的apply()和call()方法

ECMAScript为所有的函数指定了两个方法，apply()及call()。这两个方法允许我们将一个函数当作其它对象的一个方法使用。它们的第一个参数是一个对象（谁来调用这个函数），在函数中可以通过this关键字引用该对象。call()方法的其它参数都将传递给被调用的函数。例如，传递两个数字给函数f()并作为对象o的方法来调用，你可以像这样来做：

f.call(o, 1, 2);

下面的代码与上面的代码是相似的。

o.m = f;
o.m(1, 2);
delete o.m;

apply()方法与call()方法唯一不同的是，其它参数是以数组的方式传递。

f.apply(o, [1, 2]);

例如，为了找出一个数组中最大的数字，你可以使用apply()方法将该数组传递给Math.max()函数：

var biggest = Math.max.apply(null, array_of_numbers);

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-function-properties-and-methods/feed/ 1 JavaScript变量作用域回顾 http://www.ineeke.com/archives/variable-scope-revisited/ http://www.ineeke.com/archives/variable-scope-revisited/#comments Thu, 08 Apr 2010 07:16:56 +0000 Neeke http://www.ineeke.com/archives/variable-scope-revisited/ JavaScript变量作用域一文完全基于JavaScript代码词汇结构的定义：全局变量有全局作用域，函数中声明的变量拥有局部作用域。如果一个函数被嵌套在另一个函数中定义，那么该函数中声明的变量就有嵌套的局部作用域。]]> 在JavaScript变量作用域一文完全基于JavaScript代码词汇结构的定义：全局变量有全局作用域，函数中声明的变量拥有局部作用域。如果一个函数被嵌套在另一个函数中定义，那么该函数中声明的变量就有嵌套的局部作用域。现在，我们知道全局变量是全局对象的属性，局部变量是特殊的call对象的属性，可以回顾并思考一下。对作用域的新的描述让我们对JavaScript变量在各种情况下有了新的思考，对其工作原理有了新的理解。
每一个JavaScript执行上下文都有一个作用域链与之关联。这个作用域链是一个列表或者一个链对象集合。当JavaScript代码需要查找一个变量neeke的值时（一个被称为变量名解析的进程），它便开始从链表中的第一个对象查起。如果当前的对象拥有一个属性neeke，那么该属性的值将被使用并停止查询。如果第一个对象没有属性neeke，JavaScript将继续查询下一个对象。如果第二个对象也没有属性neeke，接着查询下一个对象，如此循环下去。
在顶级JavaScript代码中（不被包含在任何函数中），作用域链只关联一个对象全局对象。所有的变量都在该对象中查询。如果某一个变量不存在，那么这个变量就是undefined。在一个非嵌套的函数中，无论如何，作用域链中都关联两个对象。第一个对象是函数的call对象，第二个是全局对象。当该函数引用一个变量时，call对象第一个被检查，其次是全局对象。一个嵌套函数可能有三个到三个以上的对象在它的作用域链中，下图说明它的查找过程。
The scope chain and variable resolution

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/variable-scope-revisited/feed/ 0 JavaScript变量与对象属性 http://www.ineeke.com/archives/variables-as-properties/ http://www.ineeke.com/archives/variables-as-properties/#comments Tue, 06 Apr 2010 07:42:46 +0000 Neeke http://www.ineeke.com/archives/variables-as-properties/

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

你很可能已经注意到JavaScript的变量和对象属性有很多相似处。它们以同样的方式被赋值，以同样的JavaScript表达式来使用，等等。难道变量i与对象o的属性i之间真的不存在任何根本性差异吗？答案是，JavaScript中的变量与属性从根本上都是一致的。
JavaScript全局对象
当JavaScript解释器启动时，在它执行任何JavaScript代码之前，它都要创建一个全局对象。这个对象的属性是JavaScript程序的全局变量。当你声明一个JavaScript全局变量时，实际上你是在这个全局对象上定义了一个属性。
JavaScript解释器在初始化这个全局对象的同时也初始化了一些预定义的成员。
在客户端JavaScript中，Window对象作为全局对象，是所有JavaScript代码的容器。这个全局Window对象拥有一个自引用属性window，可以被用来代替this。Window对象定义了核心全局成员，例如parseInt，Math，navigator等。
局部变量：call对象
如果全局变量是特殊全局变量（Window）的属性，那么局部变量呢？它们也同样是一个对象的属性。这个对象就是call对象。call对象的生命周期比全局对象要短，但是它的用途是一样的。当函数体被执行时，函数的所有参数及局部变量都将被作为call对象的属性存储起来。当作一个完全独立的对象使用可以允许JavaScript防止局部变量复写同名全局变量。
JavaScript执行上下文
每当JavaScript解释器开始执行一个函数时，它都会为其创建一个新的函数执行上下文。一个执行上下文就是任何一段JavaScript代码在执行时的环境（感觉有点绕口）。上下文中重要的一部分就是变量的定义。每一个JavaScript函数以及它的call对象都运行在它自己独有的执行上下文中。
有趣的一点是，JavaScript的实现允许多个全局执行上下文对应多个不同的全局对象。显而易见的例子就是客户端JavaScript，每一个浏览器窗口或者窗口中的任何一个框架，都有其自己的全局执行上下文。客户端的窗口或者任何一个框架中的JavaScript代码都运行在它们自己的执行上下文中，并且拥有自己的全局对象。而且，这些独立的全局对象都有一个属性将它们互相联系起来，JavaScript代码中，一个框架来源于另一个框架的表达式为：

parent.frames[1]

在第二个框架中可以通过如下表达式访问第一个框架中的全局变量neeke

parent.frames[0].neeke

我们不需要完全明白它们是如何联系起来的，而需要明白的是JavaScript是非常灵活的，能够在一个JavaScript解释器中执行不同全局执行上下文中的脚本，并且这些上下文之间是可以互相访问的。
最后需要考虑的一点。当JavaScript代码在一个执行上下文中可以读写属性并且执行函数被定义在另一个执行上下文中时，复杂度太高，需要考虑安全性。以客户端JavaScript为例。假设窗口A正在执行一段脚本或者包含有你本地intranet信息，此时窗口B正在执行一段来自Internet上一未知站点的脚本。一般而言，你并不希望B中的代码能够访问A中的属性。反之，B就能够访问并偷取敏感信息。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/variables-as-properties/feed/ 4 JavaScript变量作用域 http://www.ineeke.com/archives/javascript-variable-scope/ http://www.ineeke.com/archives/javascript-variable-scope/#comments Fri, 02 Apr 2010 01:01:32 +0000 Neeke http://www.ineeke.com/archives/javascript-variable-scope/

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

变量的作用域取决于它在程序中被定义时的位置。一个全局变量就有全局作用域；它在你的JavaScript代码的任何地方都是可见的。换句话说，被声明在函数体中的变量，它只存活于该函数体中，它是局部变量，作用域也是局部的。函数参数也同样是局部变量，被定义在函数体中。
在函数体中，一个局部变量能够覆盖掉与它同名的全局变量。如果在全局变量中存在与你的函数参数名或局部变量相同的变量，那么全局变量将被隐藏。下面的代码将输出“local”：

var scope = 'global';	//声明一个全局变量
function checkScope(){
	var scope = 'local';	//声明一个同名局部变量
	document.write(scope);	//输出的是局部变量，而不是全局变量
}
checkScope();	//输出“local”

尽管你可以在写代码时候不使用var关键字来声明全局变量，但是你最好使用var来声明局部变量。考虑一下这种情况下会发生什么事情：

scope = 'global';	//声明一个全局变量
function checkScope(){
	scope = 'local';	//注意！我们修改了全局变量
	document.write(scope);		//使用的是全局变量
	myscope = 'local';		//这里声明了一个新的全局变量
	document.write(myscope);	//使用新的全局变量
}
checkScope();	//输出“locallocal”
document.write(scope);		//输出“local”
document.write(myscope);	//输出“local”

通常，函数中我们并不知道有哪些变量被定义在全局作用域中或者它们是被用来做什么的。如此，一个函数使用了一个全局变量，很可能会改变它在另一部分程序中的值。解决这一问题的方法其实很简单，那就是所有的变量都通过var来声明。
函数可以嵌套使用，每一个函数都有其自己的局部作用域，所以，很有可能存在作用域的嵌套。例如：

var scope = 'global scope';		//一个全局变量
function checkScope(){
	var scope = 'local scope';		//一个局部变量
	function nested(){
		var scope = 'nested scope';		//一个嵌套的局部变量
		document.write(scope);		//输出“nested scope”
	}
	nested();
}
checkScope();

与C,C++及JAVA等所不同的是，JavaScript不存在区块级作用域。无论在函数种的任何地方声明变量，它们都将被定义在整个函数之中。在下面的代码中，变量i,j及k都有同样的作用域：三个都被定义在整个函数之中。

function test(o){
	var i = 0;		//i被定义在整个函数之中
	if(typeof o == 'object'){
		var j = 0;		//j被定义在所有地方，不仅仅是if区块内
		for(var k = 0; k < 10; k++){	//k被定义在所有地方，不仅仅是在循环中
			document.write(k);
		}
		document.write(k);		//k依旧被定义，输出10
	}
	document.write(j);		//j依旧被定义，但很可能未被初始化
}

这种情况会产生意想不到的结果，下面的代码将会告诉你：

var scope = 'global';
function f(){
	alert(scope);	//显示“undefined”，而不是“global”
	var scope = 'local';	//变量在此被初始化，但被定义在所有地方
	alert(scope);	//显示“local”
}
f();

你很可能在想第一次调用aler()的时候应该显示“global”，因为var声明的局部变量语句此时还未执行。然而，由于作用域规则，它与你所想的截然不同。这个局部变量被定义在整个函数之中，也就是说，同名的全局变量被隐藏了。虽然这个局部变量被定义在整个函数之中，但是由于它此时的确还未通过执行var语句来初始化。因此，上面的代码实际上等同于下面的代码：

function f(){
	var scope;		//局部变量在函数开始处被声明
	alert(scope);		//此时变量存在，但是它的值依旧是“underfined”
	scope = 'local';	//现在我们初始化并赋予它值
	alert(scope);		//现在它有值了
}

以上案例告诉我们，为什么说在编程时将所有的变量一起声明在函数的开始处是一个好的习惯。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-variable-scope/feed/ 2 JavaScript原始数据类型包装对象 http://www.ineeke.com/archives/primitive-datatype-wrapper-objects/ http://www.ineeke.com/archives/primitive-datatype-wrapper-objects/#comments Thu, 01 Apr 2010 08:45:07 +0000 Neeke http://www.ineeke.com/archives/primitive-datatype-wrapper-objects/

声明：本文系本人为学习英语及JavaScript基础而翻译《JavaScript The Definitive Guide》第五版，均为个人理解，略有删改，切勿完全信以为真，走火入魔。因本文引起的一切后果，读者自负，与本人无关。

JavaScript中的字符串有一些奇怪的特点：操作字符串时，可以使用对象操作符。先看一段简单的字符串操作代码：

var s = "http://www.ineeke.cn";
var addr = s.substring(s.indexOf(":")+2, s.length);

如果你不是很了解，你会认为s是一个对象，可以调用它的方法并读取其属性值。
出什么问题了呢？字符串是对象吗？或者它是原始数据类型？typeof操作符告诉我们字符串的类型为“string”，是与“object”类型完全不同的。那么，为什么字符串能够使用对象操作符呢？
实际上，这三个主原始数据类型（数值，字符串及布尔）每一个都有其对应的对象类。JavaScript中不仅提供了数值型，字符串型及布尔型，它还提供了数值类，字符串类及布尔类。这些类将对应的原始数据类型包装了起来，它不但拥有其原始数据值，而且还定义了属性和操作值的方法。
JavaScript能够很灵活的转换各种数据类型。当你访问一个字符串的属性或方法时，JavaScript内部会自动创建其包装对象。这个字符串包装对象将替换原始字符串值，它拥有已定义的属性和方法，所以这样的使用方法是正确的。
谨记，只有当字符串被以对象的方式使用时，它的对象才会被创建，并且这个对象是临时性的。在访问了它的属性或方法之后，即不再被使用，它将被系统所回收。假设s是一个字符串，我们以下面的方式读取它的长度：

var len = s.length;

那么，s依旧是一个字符串，原始字符串值本身没有发生改变。而一个新的临时性的字符串对象被创建了，它允许你访问length属性，接着，它被抛弃（回收）且不影响s的原始值。这种方式好像既优雅又错综复杂，通常情况下，这些都是JavaScript内部实现转换的，我们只需要了解，我们不必担心出问题。
如果在你的程序中需要明确的创建一个非临时性的字符串对象，你只需要使用new关键字即可：

var s = "www.ineeke.com";//这是一个原始数据值
var S = new String('www.ineeke.com');//这是一个字符串对象

当你已经创建了字符串对象S，你能用它做些什么呢？对应的原始字符串值什么都不能做。typeof操作将告诉你S的确是一个字符串对象而不是字符串值，除了这种方式，你会发现你无法区分出字符串值和字符串对象。字符串在需要的时候会自动的转换为字符串对象。当你对S使用+运算符时，一个对应的原始字符串值将被创建，以便执行运算。
记住，这里讨论的所有内容都同样作用于数值型和布尔型。最后一点，所有的数值，字符串及布尔都可以通过Object()函数转换成其对应的对象：

var number_wrapper = Object(22);

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/primitive-datatype-wrapper-objects/feed/ 0 打印Ext组件中的内容 http://www.ineeke.com/archives/print-the-contents-of-ext-components/ http://www.ineeke.com/archives/print-the-contents-of-ext-components/#comments Fri, 08 Jan 2010 09:56:05 +0000 Neeke http://www.ineeke.com/?p=1147 描述一下大概功能需求：从Ext的GridPanel中选择一条记录，将这条记录的详细信息呈现在Ext的Window当中，将Window中呈现的数据按其格式用打印机打印出来。
要处理这个有两种方式：
1.在前台用JavaScript调用打印机打印
2.在后台服务器端处理
由于需求的原因，这里只允许使用第一种方式。想来应该也不难，JavaScript调用一下window.print()（注意：不是Ext.Window），结果失败了。window.print()打印出来的是整个当前浏览器中所呈现的内容，而不是我所要的Ext.Window中的内容。
（突然在想为什么不让每个dom都有print()方法去打印自身中的内容呢？郁闷…）
既然只能打印浏览器window中的，那我把Ext.Window中要打印的内容赋给浏览器的window，不就可以打印了么。
于是乎开始coding…

var win = new Ext.Window({
 
  title: '明细',
  width: 600,
  height: 400,
  buttons: [{
    text: '打印',
    handler: function(){
      //把当前的页面存起来
      var c = window.document.body.innerHTML;
      //把win中要打印的内容赋给当前浏览器
      window.document.body.innerHTML = win.body.dom.innerHTML;
      //开始打印
      window.print();
      //再转回去
      window.document.body.innerHTML = c;
    }
  }]
});

先不说打印是否成功，由于整个项目是Ext做的，这样一来回折腾，整个页面直接变成只能看不能操作了，晕倒~再想办法吧。
coding…

var win = window.open('','printer', '');
win.document.body.innerHTML = win.body.dom.innerHTML;
win.print();

没问题，可是弹出来了一个窗口，我想能不能把它隐藏起来呢，可是突然又想到弹窗会被某些浏览器拦截，这个方法也放弃。
还有什么办法呢？再次突然想起frame与frame之间如何用JavaScript传值，一个frame中含有一个window对象，那么…
接着coding…

var win = new Ext.Window({
 
  title: '明细',
  width: 600,
  height: 400,
  html: '<iframe />',
  buttons: [{
    text: '打印',
    handler: function(){
      var c = win.body.fist().dom.innerHTML;
      var printer = win.body.last().dom.contentWindow;
      printer.document.body.innerHTML = c;
      printer.print();
    }
  }]
});

在Ext.Window中用html配置选项创建一个空iframe标签，在Firebug下可以看到html所配置的内容会出现在win.body中且位于最后，win.body是Ext.Element对象，通过它可以取到要打印的内容c和打印机printer(frame中的window)，然后赋值，接着打印。
想的好好的，打印出来的竟然和第一个方式一样，⊙﹏⊙b汗
问题出在哪了？难道因为iframe没有获得焦点？printer.print()之前加上printer.focus()，再打印一张出来，搞定！同理也可以打印Ext.Panel等。

或许你会对下面这些文章感兴趣：

  • 2009年09月1日 -- Ext代码优化并减少编码量
    Ext做的项目里经常要将几个组件合起来做成一个具有某一功能的组件，而且这样的功能...
  • 2009年12月17日 -- Ext DatePicker大小自适应
    不知道为什么Ext的DatePicker明明是有height和width配置选项...
  • 2009年08月17日 -- Ext TabPanel items高度宽度自适应
    写Ext的时候经常会遇到一些莫名其妙，令人感到非常神奇的问题，甚至都没办法用语言...
  • 2009年07月14日 -- Ext DataView自身拖拽
    Ext的examples中有组件与组件之间的数据拖拽，可就是没找到组件自身中的数...
  • 2009年06月17日 -- Ext desktop无法完全模式化
    在桌面应用系统中，有时需要对当前打开的窗体模式化，即用户只能进行当前的操作，禁止...
  • 2009年05月21日 -- ExtJS desktop
    接下来我可能要开发Windows了，而且还得用Ext来开发，呵呵O(∩_∩)O~...
  • 2009年05月21日 -- ExtJS GridPanel动态列
    要实现动态更改GridPanel的列就必须先了解固定列是怎么弄出来的。GridP...
  • 2009年05月18日 -- 最近在写ExtJS时遇到的一些问题
    之前要我解决的那个东西，上个星期我已经搞定并交付了。开发期间遇到了一些问题，总结...
  • 2009年05月11日 -- Ext DataView分页+过滤+查询+拖拽
    Seven说让先把另外两个问题放放，让我先完成如图所示的一个sample。 ...
  • 2009年02月23日 -- ExtJS将GridPanel放入TabPanel中
    完整的GridPanel也有了，我现在需要将它组装到后台管理中去。现在要求点击一...
]]> http://www.ineeke.com/archives/print-the-contents-of-ext-components/feed/ 0 Ext代码优化并减少编码量 http://www.ineeke.com/archives/ext-code-optimization-and-to-reduce-the-amount-of-coding/ http://www.ineeke.com/archives/ext-code-optimization-and-to-reduce-the-amount-of-coding/#comments Tue, 01 Sep 2009 07:57:40 +0000 Neeke http://www.ineeke.com/archives/ext-code-optimization-and-to-reduce-the-amount-of-coding/ Ext做的项目里经常要将几个组件合起来做成一个具有某一功能的组件，而且这样的功能组件会在很多地方以不同的形式被应用。例如一个带数据分页功能的Grid，就至少需要JsonStore（也会是其它的）、PagingToolbar及GridPanel这三个组件，它们所构成的组件是非常常用的，最大不同应该就是所要呈现的数据了。

Ext.namespace('Neeke.myext');
 
/*一个由JsonStore、GridPanel及PagingToolbar构成的常用的GridPanel，优化代码并减少日后的代码书写量。*/
Neeke.myext.BaseGrid = Ext.extend(Ext.grid.GridPanel, {
 
  //是否服务器端排序
  remoteSort: false,
 
  //数据源
  storeURL: '',
 
  //字段
  storeFields: [],
 
  //分页大小
  pageSize: 10,
 
  constructor: function(cfg){
 
    if(cfg){
 
      Ext.apply(this, cfg);
    }
    this.store = new Ext.data.JsonStore({
 
      url: this.storeURL,
      root: 'data',
      remoteSort: this.remoteSort,
      totalProperty:'totalCount',
      fields: this.storeFields
    });
    Neeke.myext.BaseGrid.superclass.constructor.call(this, {
 
      store: this.store,
			bbar: new Ext.PagingToolbar({
 
					pageSize: this.pageSize,
					store: this.store,
					displayInfo: true,
					displayMsg: '当前显示 {0} - {1} 条记录，共 {2} 条记录',
					emptyMsg: '暂无数据'
			})
    })
  },
 
  getSelected: function(){
 
    var sm = this.getSelectionModel();
    if(sm.getCount() &gt; 0){
 
      return sm.getSelected();
    }else{
 
      Ext.Msg.alert('提示', '请选择一条记录');
      return null;
    }
  }
});

那么，可以结合这三者构成一个基类（代码如上），抽取出此三者中需要动态修改的配置选项作为该基类的配置选项，如PagingToolbar中的displayMsg这样的配置选项在项目中一般都是风格统一的，所以可以将其写“死”，如此一来，创建一个带分页的GridPanel就简单的多了。

var grid = new Neeke.myext.BaseGrid({
 
  columns: [
 
    {header: '批次号', dataIndex: 'orbano', menuDisabled: true, sortable: true},
    {header: '渠道商', dataIndex: 'channame', menuDisabled: true, sortable: true}
  ],
  viewConfig: {forceFit: true},
  storeURL: 'batchOrder.do?method=getBatchOrderList',
  pageSize: 22,
  remoteSort: true,
  storeFields: [
 
    'orbaid','orbano'
  ]
});

某些常用的方法也同样可以优化，如要获取当前选中的记录，之前可以这么做：

var record = grid.getSelectionModel().getSelected();

JavaScript中的对象每“.”一次就要查询一遍，项目中N个地方都用这种方式好吗？写起来不觉得长吗？且多数情况下还要判断是否有选中项并给出提示。所以这些常用的方法也可以封装在这个基类中，以后基于这个基类的扩展只需点一次即可。
当然或许有比这更好的，仅为自己总结的一些想法。

或许你会对下面这些文章感兴趣：

  • 2010年01月8日 -- 打印Ext组件中的内容
    描述一下大概功能需求：从Ext的GridPanel中选择一条记录，将这条记录的详...
  • 2009年12月17日 -- Ext DatePicker大小自适应
    不知道为什么Ext的DatePicker明明是有height和width配置选项...
  • 2009年08月17日 -- Ext TabPanel items高度宽度自适应
    写Ext的时候经常会遇到一些莫名其妙，令人感到非常神奇的问题，甚至都没办法用语言...
  • 2009年07月14日 -- Ext DataView自身拖拽
    Ext的examples中有组件与组件之间的数据拖拽，可就是没找到组件自身中的数...
  • 2009年06月17日 -- Ext desktop无法完全模式化
    在桌面应用系统中，有时需要对当前打开的窗体模式化，即用户只能进行当前的操作，禁止...
  • 2009年05月21日 -- ExtJS desktop
    接下来我可能要开发Windows了，而且还得用Ext来开发，呵呵O(∩_∩)O~...
  • 2009年05月21日 -- ExtJS GridPanel动态列
    要实现动态更改GridPanel的列就必须先了解固定列是怎么弄出来的。GridP...
  • 2009年05月18日 -- 最近在写ExtJS时遇到的一些问题
    之前要我解决的那个东西，上个星期我已经搞定并交付了。开发期间遇到了一些问题，总结...
  • 2009年05月11日 -- Ext DataView分页+过滤+查询+拖拽
    Seven说让先把另外两个问题放放，让我先完成如图所示的一个sample。 ...
  • 2009年02月23日 -- ExtJS将GridPanel放入TabPanel中
    完整的GridPanel也有了，我现在需要将它组装到后台管理中去。现在要求点击一...
]]> http://www.ineeke.com/archives/ext-code-optimization-and-to-reduce-the-amount-of-coding/feed/ 7 frame与frame之间如何用JavaScript传值 http://www.ineeke.com/archives/JavaScriptValueFromFrameToFrame/ http://www.ineeke.com/archives/JavaScriptValueFromFrameToFrame/#comments Sun, 05 Oct 2008 16:00:26 +0000 Neeke http://ineeke.com/archives/frame%e4%b8%8eframe%e4%b9%8b%e9%97%b4%e5%a6%82%e4%bd%95%e7%94%a8javascript%e4%bc%a0%e5%80%bc/ 这个依然是为我的项目而服务的，因为项目的功能需要此技术来实现，或许对很多人来说这个不难，可是对我这个不太对JavaScript感冒的人来说就不是那么容易了，办法只有一个：找资料现学呗。

]]> 这个依然是为我的项目而服务的，因为项目的功能需要此技术来实现，或许对很多人来说这个不难，可是对我这个不太对JavaScript感冒的人来说就不是那么容易了，办法只有一个：找资料现学呗。

先来了解一下相关知识：要实现框架中多窗体的不同元素的访问，则必须使用window对象中的Frames属性。Frames属性同样也是一个数组，它在父框架集中为每一个子框架设有一项。通过下标实现不同框架的访问:
parent.frames[Index1].docuement.forms[index2]
通过parent.frames.length确定窗口中窗体的数目。除了使用数组下标来访问窗体外还可以使用框架名和窗体名来实现各元素的访：
parent.framesName.document.getElementById()
OK，这么点资料就够用了，我们来小试一把。首先创建一个theFather.html，其代码如下：

 
  1. <html>
  2. <head>
  3. <title>frame get Value test</title>
  4. </head>
  5. <iframe frameborder="1" height="78" marginheight="0" marginwidth="0" scrolling="no" width="100%" src="theSon.html"></iframe>
  6. <h3>这是theFather的文本框</h3>
  7. <input type="text" name="txtFather" id="txtFather" />
  8. </html>

 

接下来创建theSon.html，其代码如下：

 
  1. <html>
  2. <head>
  3. <title>the son frame</title>
  4. <script type="text/javascript">
  5. //此方法用于向其父文本框类赋值
  6. function setValue(){
  7.   
  8.   //获得子类文本框中的值
  9.   var sonValue=document.getElementById("txtSon").value;
  10.   //弹出信息，此处仅用于测试
  11.   alert("theSon的值为："+sonValue);
  12.   //向父类文本框赋值
  13.   parent.document.getElementById("txtFather").value=sonValue;
  14. }
  15. </script>
  16. </head>
  17. <body>
  18. <h3>这是theSon的文本框及按钮</h3>
  19. <input type="text" name="txtSon" id="txtSon" />
  20. <input type="button" name="btnSon" id="btnSon" value="提交" onclick="setValue();" />
  21. </body<
    span class="tag">>
  22. </html>

 

接下来运行测试，达到了预期的效果，现在可以正式融入项目中了。

 

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/JavaScriptValueFromFrameToFrame/feed/ 4 javascript对象模型 http://www.ineeke.com/archives/javascript-model/ http://www.ineeke.com/archives/javascript-model/#comments Thu, 08 May 2008 01:05:58 +0000 Neeke http://ineeke.com/archives/javascript%e5%af%b9%e8%b1%a1%e6%a8%a1%e5%9e%8b/ 基于类的面向对象的语言，如 Java 和 C++，建立于两个不同的实体概念之上：类（classes）和实例（instances）。 一个类定义所有的描述对象集合的属性（如 Java 中的方法的域，以及 C++ 中的成员及属性），它是个抽象的东西，不象对象所描述的特定成员； 一个实例是类的实际表现（题外话：如果您了解 FLASH 的话，那么这好象是 Symbol 和 Instance 的关系），即是它的成员。

]]> 基于类的面向对象的语言，如 Java 和 C++，建立于两个不同的实体概念之上：类（classes）和实例（instances）。 一个类定义所有的描述对象集合的属性（如 Java 中的方法的域，以及 C++ 中的成员及属性），它是个抽象的东西，不象对象所描述的特定成员； 一个实例是类的实际表现（题外话：如果您了解 FLASH 的话，那么这好象是 Symbol 和 Instance 的关系），即是它的成员。

 　　基于原型的语言如 JavaScript，没有这种区别，它只具有对象。一个基于原型的语言具有原型对象的概念，一个对象是一个模板，它为一个新对象提供最初的属性。任何对象都可以指定它自己的属性，不管是您创建的还是在运行时的。另外，任何对象都可以同另一个对象联合为一个原型，允许第二个对象分享第一个对象的属性。 定义一个类　　在基于类的语言中，类的定义是在一个单独的类定义中进行，在类定义中您可以指定其特有的方法，称为构造函数来创建类的实例。一个构造函数可以为实例的属性指定初始值并在其创建时执行其它初始化工作。您可以用 new 操作符来动态地用构造函数创建类的实例。

　　JavaScript 具有类似的模型，但没有与构造函数分离的类定义，而是定义一个构造函数来创建具有特定属性及其值的集合的对象。任何 JavaScript 函数都可以用作构造函数，您可以用 new 运算符和构造函数来创建一个新对象。 子类和继承　　在一个基于类的语言，您可以通过类定义创建一个类的层次；在类定义中，您可以指定一个新类是一个已存在的类的子类。子类继承了父类的所有属性并可以有自己特定的新属性或修改它继承的属性。例如辅乳动物类有两个属性：会移动、会产子，而它的子类猫类又有一个新属性，它会“喵喵”叫，那么猫类就有三个属性：会移动、会产子、会“喵喵”叫。

　　JavaScript 同样具有继承性，它允许您用构造函数来关联原型，但它与上例又有所不同，以上例的辅乳类来讲：首先您用构造函数定义辅乳动物，指定会移动、会产子两个属性；接下来定义猫构造函数，指定会“喵喵”叫这个属性，最后您为猫构造函数赋于一个新的辅乳动物对象，这时您就创建了一个新的猫对象，它继承了辅乳动物的两个属性。 添加和删除属性　　在基于类的语言中，您是在编译时创建一个类，而在编译时或运行时来实例化一个类的实例。当定义了类后您不能再改变类属性的数目和类型。而在 JavaScript 中，您可以在运行时从任何对象中添加或删除属性，如果您为对象集合原型的一个对象添加了一个属性，那么该原型的所有对象同时获取了这个新属性。

总结基于类（Java）和基于原型（JavaScript）的对象体系比较 Java JavaScript 类和实例是不同的实体 所有对象都是实例 用类定义定义类，类的实例化用构造函数方法 用构造函数定义和创建对象集合 用 new 操作符创建一个对象 相同 用类定义来定义已存在的子类以构造一个对象的层次 用构造函数关联原型，并通过把对象赋予原型创建对象层次 通过类链来继承属性 通过原型链继承属性 类定义指定一个类中所有实例的属性，不能在运行时动态添加属性 构造函数或原型指定一套初始属性集合，可以动态地为单独对象或整个对象集合添加或删除属性

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/javascript-model/feed/ 0 在HTML中植入JavaScript http://www.ineeke.com/archives/html-javascript/ http://www.ineeke.com/archives/html-javascript/#comments Thu, 08 May 2008 01:04:26 +0000 Neeke http://ineeke.com/archives/%e5%9c%a8html%e4%b8%ad%e6%a4%8d%e5%85%a5javascript/ 您可以简单地象下面的语句一样植入一个 JavaScript 脚本：

<SCRIPT>
　　JavaScript 语句...
</SCRIPT>

指定语言及版本
　　因为在不同的浏览器版本中支持不同版本的 JavaScript，以及还有一些其它的脚本语言如：JScript、VBScript 等等，因此我们有必要在 <SCRIPT> 标记中使用 LANGUAGE 属性来指定您所用的脚本语言及其版本，这样当用户浏览器不支持该脚本语言时，<SCRIPT> </SCRIPT>标记中的代码将会被忽略，如下：

]]> 您可以简单地象下面的语句一样植入一个 JavaScript 脚本：

<SCRIPT>
　　JavaScript 语句…
</SCRIPT>

指定语言及版本
　　因为在不同的浏览器版本中支持不同版本的 JavaScript，以及还有一些其它的脚本语言如：JScript、VBScript 等等，因此我们有必要在 <SCRIPT> 标记中使用 LANGUAGE 属性来指定您所用的脚本语言及其版本，这样当用户浏览器不支持该脚本语言时，<SCRIPT> </SCRIPT>标记中的代码将会被忽略，如下：

<SCRIPT LANGUAGE="JavaScript1.2">

下表为 JavaScript 和 Navigator 版本的关系

Navigator 版本  缺省的 JavaScript 版本  支持的 <SCRIPT> 标记 
Navigator 2.0之前  不支持 JavaScript  无 
Navigator 2.0  JavaScript 1.0  <SCRIPT LANGUAGE="JavaScript"> 
Navigator 3.0  JavaScript 1.1  <SCRIPT LANGUAGE="JavaScript1.1"> 及之前 
Navigator 4.0-4.05  JavaScript 1.2  <SCRIPT LANGUAGE="JavaScript1.2"> 及之前 
Navigator 4.06-4.5  JavaScript 1.3  <SCRIPT LANGUAGE="JavaScript1.3"> 及之前 

我们还可以用 HTML 的注释标记将 JavaScript 代码隐藏起来，而一个浏览器将会忽略它不认识的标记，这样 <SCRIPT> 和 </SCRIPT> 标记都会被忽略，虽然那些不支持 <SCRIPT> 标记可能已经绝迹，您不必非得这样做，但这也是一个尊重用户的好习惯。

指定 JavaScript 代码文件
　　当然，我们也可以指定一个 JavaScript 源文件来代替在 HTML 文件中引用，这样您就可以在不同的 HTML 文件中引用相同的 JavaScript 源程序，如：

<SCRIPT SRC="common.js"></SCRIPT>

一个外部的 JavaScript 文件不能包含任何 HTML 标记，它的内容只能是 JavaScript 代码。

在HTML属性值中使用 JavaScript 表达式
　　使用 JavaScript 实体（entities），您可以指定一个 JavaScript 表达式作为一个 HTML 属性的值，实体值是动态赋予的，这就是说，您可以创建更灵活的 HTML 结构，因为 HTML 元素的属性依赖于页内先前放置元素信息。您可能对 HTML 的字符实体有所了解—它用（&）符后接一个名称并以分号（;）结束。如一个版权符号的字符实体为—&copy; 等等。类似的，JavaScript 实体也用（&）开始，以分号（;）结束，不同的是它以一个用大括号（{ }）封装的 JavaScript 表达式来代替其名称和数字。如，假设您定义了一个变量 barWidth，那么您可以将其用于水平标尺的宽度百分比属性中：

<HR WIDTH="&{barWidth};%" ALIGN="LEFT>

引号标记
　　当您在一个字符串直接量中需要一个引号字符时，那么用单引号（’）来将其与字符串直接量区分开来。如下例中的函数 bar 包含一个在双引号属性值中的字符串“left”：

function bar(widthPct) {
　　document.write(" <HR ALIGN=’left’,WIDTH=" + widthPct + "%>")
}

又如：<INPUT TYPE="button" VALUE="Press Me" onClick="myfunc(‘astring’)">

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/html-javascript/feed/ 0 JavaScript 的值 http://www.ineeke.com/archives/399/ http://www.ineeke.com/archives/399/#comments Sun, 27 Apr 2008 16:46:02 +0000 Neeke http://ineeke.com/archives/javascript-%e7%9a%84%e5%80%bc/ JavaScript 承认以下几种值：

  1. 数值：例如85或3.1415等；
  2. 逻辑（布尔）值：如 true 和 false；
  3. 字符串：如“您好”；
  4. null：空值，它是 JavaScript 的保留值，因为 JavaScript 的大小写敏感性，因此它不同与如 Null 或 NULL 等其它变量；
  5. undefined：值的顶级属性是未定义的，它也是一个保留值。

　　JavaScript 是一种动态数据类型语言，也就是说，当您声明一个变量时不必指定数据的类型，当程序执行时它会自动将其转换为您所需要的类型。而当您在一个表达式中将一个字符串类型的值和数值型的值进行“+”运算时，JavaScript 会将数值转换为字符串，如下：

x="The answer is"+23　　 //将返回"The answer is 23"

而在含别的运算符的语句中，却不会发生这种事情，如：

x="23"-2　　 //将返回21

]]> JavaScript 承认以下几种值：

  1. 数值：例如85或3.1415等；
  2. 逻辑（布尔）值：如 true 和 false；
  3. 字符串：如“您好”；
  4. null：空值，它是 JavaScript 的保留值，因为 JavaScript 的大小写敏感性，因此它不同与如 Null 或 NULL 等其它变量；
  5. undefined：值的顶级属性是未定义的，它也是一个保留值。

　　JavaScript 是一种动态数据类型语言，也就是说，当您声明一个变量时不必指定数据的类型，当程序执行时它会自动将其转换为您所需要的类型。而当您在一个表达式中将一个字符串类型的值和数值型的值进行“+”运算时，JavaScript 会将数值转换为字符串，如下：

x="The answer is"+23　　 //将返回"The answer is 23"

而在含别的运算符的语句中，却不会发生这种事情，如：

x="23"-2　　 //将返回21

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/399/feed/ 0 植入JavaScript http://www.ineeke.com/archives/398/ http://www.ineeke.com/archives/398/#comments Sun, 27 Apr 2008 16:43:05 +0000 Neeke http://ineeke.com/archives/%e6%a4%8d%e5%85%a5javascript/ 我在上一节曾经讲过，JavaScript 只能在 HTML 脚本中才能得以执行；那么，如何在 HTML 语言中植入一个 JavaScript 脚本呢？一个完整的语句应象下面一样：
<SCRIPT LANGUAGE="JavaScript">
<!--
......
//-->
</SCRIPT>
LANGUAGE 指定了一个 JavaScript 语言，但现在您也可以不用写该属性，因为目前几乎所有的浏览器都将其设为缺省值。

]]> 我在上一节曾经讲过，JavaScript 只能在 HTML 脚本中才能得以执行；那么，如何在 HTML 语言中植入一个 JavaScript 脚本呢？一个完整的语句应象下面一样：
<SCRIPT LANGUAGE="JavaScript">
<!--
......
//-->
</SCRIPT>
LANGUAGE 指定了一个 JavaScript 语言，但现在您也可以不用写该属性，因为目前几乎所有的浏览器都将其设为缺省值。一段 JavaScript 代码可以放置于 HTML 中的任意部位，但大多数情况下我们习惯将其放于 <HEAD>...</HEAD> 区段中，因为一些代码可能需要在页面装载起始就开始运行。但您可以不必拘泥于这项规定，您愿意如何放置都可以，甚至于您可以在 HTML 外部装入一个 JavaScript 程序，如下例：
<SCRIPT LANGUAGE="JavaScript" SRC="url">
......
</SCRIPT>
这里，url 当然是一个外部的 JavaScript 程序，在 Netscape 承认以后缀名为 .js 的程序，而 IE 对这个要求就比较宽松，只要它符合 MIME 格式就行了。这样，如果我们有很多的页面需要该段程序，只需编写一个外部程序就可以在多个页面中进行调用，是不是很方便。在上例中，不知您是否注意到 <!- - 和 - -> 标记，它为那些不支持 JavaScript 的浏览器提供了一个忽略它的方法，而 // 标记则是一段注释的开始。

或许你会对下面这些文章感兴趣：

]]> http://www.ineeke.com/archives/398/feed/ 0