Posts Tagged ‘ javascript

几种网页转址与“301 永久搬移”的语法

转址的方式分为:

  • 302: 暂时搬移 (Temporarily Moved)
  • 301: 永久搬移 (Permanently Moved)

Read more

doiMenu - 简单好用的 DHTML 选单程式 *

doiMenu 是一支简单好用的 DHTML 选单程式,目前的版本是 1.5。

相关网页

Flash Bar Code 1.0 - Flash 条码产生器 *

档案下载

这是一个简单好用一维条码产生器,使用 Flash 设计而成,程式使用的条码格式是 "EAN-13" ,前三码为国码 (台湾为471) + 四码厂商码 + 五码资料码 + 一码检查码,只要在设计网页时,将 "Code" 参数传给 "FBC10.swf" 就可以了。
Read more

一些给网站使用的 WYSIWYG 的编辑器

网页上的 WYSIWYG 编辑器算是以后设计网页的趋势...

比较推荐的有:

还不错的有:

功能较阳春的:

很不错,但要钱的有:

参考网页

[转载]你所想像不到的 JavaScript

转载自: 爱德华日志


这不是一篇教你如何在网页中应用 JavaScript 的教材。这是一篇让你明了看似简单的 JavaScript,其实其核心语法功能强大。我将在这篇文章中说明 JavaScript 物件导向的特性,并说明如何透过这些特性,达到传统程式语言 (C++/Java) 所难以完成的功能。

Everything is Object in JavaScript

开宗明义:在 JavaScript 中任何东西都是物件:变量是物件、函式是物件,常数也是物件。证明方式:

alert (typeof('abc'));
alert (typeof(123));
var ary = [123, "abc"];
alert (typeof(ary));

上面的 typeof 会显示物件资料型态。得到结果分别是 string, number, object。

Create Objects in JavaScript

既然任何东西都是物件,那建立物件的方法就多了。直接看个例子:

var main = new Object;     // 建立新物件
main.x = 123; // 设定物件成员变量(属性)之一
main["y"] = "XYZ"; // 设定物件成员变量(属性)之二
alert(main["x"]); // 取得物件属性并输出
alert(main.y);

可以看到在 JavaScript 中,main.x 与 main["x"] 这两种语法是通用的。其实在其他语言中,这两种表示法的语意并不相同。我稍后再作说明。

List All Members in an Object

这是 JavaScript 的必杀技,使用 JavaScript 的人务必要学会这个技巧。底下函式可以传回一个物件的所有成员的字串表达式,包括物件中的属性及方法。在物件导向程式设计中,这种技术叫 reflection。

function listMember(main) {
  var s = "";
  for( key in main )  // 使用 in 运算子列举所有成员
  s += key + ": " + main[key] + "\n";
  return s;
}

范例码中的 key 会对应到物件中的属性名称,如 “x” 或 “y”,而 main[key] 则对应到属性值。

说这项技巧是必杀技的原因是,你可以透过这项技巧,将物件封装的黑箱打开来,看看里面藏有什么东西。我常用这项技巧来看看 IE 与 Mozilla 的 Dom 物件模型有何不同。试试看下面呼叫范例,就可以知道这项技巧的强大了:

var ary = [123, "abc"];
alert (listMember(ary));
alert (listMember(document.location));

Construct Object with Initial Value

要在建立物件的同时指定物件初始值,必须先透过 function 建立一个“原型物件”(或称为 constructor),再透过 new 运算子建立新物件。例如以下程式码会建立一个二维阵列的原型,再产生一个新的二维物件。

function Array2DVar(x,y) {  // 定义二维阵列原型
  this.length = x;
  this.x = x;  // x 维度长度
  this.y = y;  // y 维度长度
  for(var i = 0; i < this.length; i++)  // 初始各元素值为 null
  this[i] = new Array(y);  // this 代表物件本身
}

var a2dv = new Array2DVar(10, 10);  // 建立新的 10*10 的二维阵列
a2dv[1][3] = "ABC";  // 设定二维阵列元素值
a2dv[2][6] = "XYZ";
a2dv[9][9] = 1000;

alert( a2dv[1][3]);  // 取得二维阵列元素值,并显示出来
alert( a2dv[2][6]);
alert( a2dv[9][9]);

Initial Array Object

在 JavaScript 中阵列也是物件 (其实近代多数语言中阵列也都是物件,只有像 C 或 Assembly 这类古老的语言才不把阵列看成物件),因此也可以用 constructor 的语法来建构。当然 JavaScript 还提供了 [] 语法,以更方便建构阵列,范例如下:

a = new Array("abc", "xyz", 1000); // constructor 语法,或
a = ["abc", "xyz", 1000]; // 阵列标准语法

阵列的元素可以是简单的资料、其他物件,或是函数。举个例子来在阵列里面放函式:

b = [ // 使用函式作为阵列元素
  function () { alert("这个好玩!") },
  function () { alert("再按一次离开!") },
  function () { alert("再来一次!") },
  function () { alert("最后一次!") }
];

for (var i = 0; i < b.length ; i++)
b[i]();

最后一个 for 循环是个有趣的应用。由于 b 阵列中现在存放的所有元素都是函式,因此我们可以对 b 的每个元素进行呼叫。

Object as Association Array

关联阵列 (Assocation Array) 又称作 Map 或 Dictionary,是一种物件容器,其中可以放置许多的 key-value pair,以存取子物件。在JavaScript 中,物件本身就可以作为关连阵列。以关联阵列的方式初始化物件的范例如下:

obj1 = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"};
alert(obj1["a"]);  // 显示 Athens
obj2 = {
  name: "Edward",
  showName: function() { alert(this.name); }  // 使用函式作为物件属性
}
obj2.showName();  // 显示 Edward
obj2.age = 23;  // 属性可以动态加入

其 中 obj1 储存了三个子元素,其键 (key) 为 “a”, “b” 与 “c”,而值 (value) 为 “Athens”, “Belgrade” 与 “Cairo”。obj2 中 showName 键所对应的值为 function,因此 obj2.showName() 即为函式呼叫。

Object as Return Value

虽然 Javascript 的函式只能传回一个变量,但您却可以将传回值设定为物件,达到传回 1个以上变量值的效果

function a () {
  return [32, 17];
}
b = a();
alert( b ); // 或
alert(a());
function pixel () {
  return {"x": 32, "y":17};
}
point = pixel ();
alert (point.x + "\n" + point.y);  // 或
alert (pixel().x + "\n" + pixel().y);

Delegation Function Object

函式也是物件,只是其中包含的是程式的逻辑。这项特性可拿来作为委任式的程式设计,亦即使用委任函式当作另一函式的参数:

function doloop(begin, end, func) {  // 这个函式是个 iterator
  for (var i = begin; i < end; i++) {
    func(i);
  }
}
function func1(i) {  // 印出 ** n **
  document.writeln("** " + i + " **<br>");
}
doloop(1, 10, func1);  // 印出 10 行 ** n **
doloop(20, 29,
  function(i) {  // 印出 10 行 ## n ##
    document.writeln("## " + i + " ##<br>");
  }
);

Object = Properties + Behaviors

古有明训:程式 = 资料结构 + 算法。而物件是建构程式的基本单位,自然的具有相同的性质。物件除了有属性 (property),也可具有操作 (behavior),也就是函式。

假如我们要使用一维阵列来模拟二维阵列,那么就无法使用 ary[x][y] 这种表示法来设定或取得阵列成员。不过我可以定义一个 set 方法来设定成员变量,而以 get 方法来取得成员变量值。原型函式定义如下:

function Array2D(x,y){  // 以一维阵列模拟二维阵列的原型物件
  this.length = x * y;  // 阵列总长
  this.x = x;  // x 维度长度
  this.y = y;  // y 维度长度
  for(var i = 0; i < this.length; i++)  // 初始各元素值为 null
    this[i] = null;
  this.get = function(x,y){  // 成员函式:取得阵列第 [x,y]个元素值
    return this[x*this.x + y];
  }
  this.set = function(x,y,value){  // 成员函式:设定阵列第 [x,y] 个元素值
    this[x*this.x + y] = value;
  }
}

我们接着来使用它:

var a2d = new Array2D(10, 10);  // 建立新的“二维”阵列

a2d.set(1, 3, "ABC");  // 设定“二维”阵列元素值
a2d.set(2, 6, "XYZ");
a2d.set(9, 9, 1000);

alert( a2d.get(1,3) );  // 取得“二维”阵列元素值,并显示出来
alert( a2d.get(2,6) );
alert( a2d.get(9,9) );

Member Function Outside of Constructor

我们也可以将物件成员函式写于原型物件之外。以下的 Array2D 物件与上一个范例中的 Array2D 物件有相同的作用,只不过这次是写在原型物件之外。

function Array2D(x,y){  // 以一维阵列模拟二维阵列的原型物件
  this.length = x * y;  // 阵列总长
  this.x = x;  // x 维度长度
  this.y = y;  // y 维度长度
  for(var i = 0; i < this.length; i++)  // 初始各元素值为 null
    this[i] = null;
  this.get = Array2DGet;  // 用这种方式把成员函式挂进来
  this.set = Array2DSet;
}

function Array2DGet(x,y){  // 成员函式:取得阵列第 [x,y] 个元素值
  return this[x*this.x + y];
}

function Array2DSet(x,y,value){  // 成员函式:设定阵列第 [x,y] 个元素值
  this[x*this.x + y] = value;
}

Dynamic Object Function

这里说明如何为一个已定义物件,动态的加上其他操作的方法。

如果一物件已定义完成,而您也使用它来建立了新的物件,这时候您想为原型物件增加新的操作 (而不修改原型物件的原始码),让所有该物件的复本都能使用该操作,该如何达成呢?方法是使用物件的 prototype 属性。以下这个例子,为 Array 这类 Object 在执行期加入一个 max 方法,以取得阵列元素之最大值 (修改自微软 jscript.chm之范例):

function array_max(){  // 定义求取 Array 最大值之函式
  var i, max = this[0];
  for (i = 1; i < this.length; i++){
  if (max < this[i])
    max = this[i];
  }
  return max;
}
Array.prototype.max = array_max;  // 在 Array 原型中加入 max 函式

上面的程式码,首先建立一个 array_max 方法,以求取阵列之最大元素。接着将这个方法设定给 Array 原型物件。

var x = new Array(1, 2, 3, 4, 5, 6);  // 透过 Array 建构子建立一阵列,想求取 x 中某一元素之最大值
var y = x.max( );  // 取得 x 之最大元素

Dynamic Mix in

假如物件 dynamic 有 method1, method2 两个函式;而另一物件 main 有 methodA 及 methodB 两个函式。现在我想把 dynamic 的所有特性 (feature) 汇入到 main 中,我们可以在 main 中加上一个 imports 函式:

function main(){  // main 之建构子
  // ...
  this.imports =
    function (object) {
      if( typeof object == "object")
        for( value in object )
          this[value] = object[value];
    }
  // ...
}
obj = new main();
main.imports(new dynamic());  // 汇入 dynamic 物件之所有功能

这个 imports 函式可以动态的为 main 加上另一物件的所有操作。这种 Mix in 的功能可是 C++/Java 的 static type 语言所望尘莫及的。

[转载]Unicode 脱逸序列转换

转载自: IT Inside


这里提供一段程式码,可以透过 JavaScript 将文字转换为 Unicode 脱逸序列。这段程式码,不论是对网页开发人员,还是对 java resource bundle 的翻译人员,都有很大的方便性。使用时只要将底下的程式码复制起来,以 html 副档名储存,就可以用 browser 执行了。

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
<script language=javascript>
<!--
function StringToUniCode(source) {
  sret = "";
  // Unicode 跳脱序列之格式为 \u00ff
  for(var i=0; i < source.length; i++) {
   var num = new Number( source.charCodeAt(i));
   sret += "\\u" + num.toString(16);
  }
  return sret;
}
function convert(){
  document.forms.content.result.value = StringToUniCode(document.forms.content.source.value);
}
//-->
</script>
将文字转成 Unicode 跳脱序列
<form name=content>
来源:<input type=TEXT name=source size=40 value="常用连络人"><br />
结果:<input type=TEXT name=result size=40><br />
<input type=button value=转换 onclick="convert()">
</form>

Cookie 是什么?

很多网站在你浏览网页之后,会在你的电脑系统中留下一些小小的档案,也就是所谓的 Cookie。当你再去浏览这些网站时,系统便会去读取这些 Cookie 再更新储存一遍。

Cookie 不是“饼干”,Cookie 是服务器暂存在你电脑上的一笔资料,好让服务器用来辨认你的电脑。就好比是格林童话故事中,沿途撒下面包屑避免在森林中迷路的小孩。

为什么需要 Cookie?

HTTP 的协议本身是“无记忆状态 (Stateless) ”的,无论是用户端还是 Web 服务器,每一个页面都没有关联,每一次的请求都是单独的请求。服务器借由 Cookie 来让同一个用户的各项操作都可以产生关联。

当你在浏览网站的时候,服务器会先送一小小资料放在你的电脑上,Cookie 会帮你在网站上所打的文字或是一些选择,都纪录下来。当下次你再光临同一个网站,WEB 服务器会先看看有没有它上次留下的 Cookie 资料,有的话,就会依据 Cookie 里的内容来判断使用者,送出特定的网页内容给你。

Cookie 的使用很普遍,许多有提供个人化服务的网站,都是利用 Cookie 来辨认使用者,以方便送出使用者量身定做的内容,像是 Web 接口的免费 email 网站,都要用到 Cookie。

Cookie 会不会有危险?其实 Cookie 中记载的资料相有限,Cookie 是安全的。网站不可能经由 Cookie 获得你的 email 地址或是其他私人资料,更没有办法透过 Cookie 来存取底的电脑。

但是如果你实在不喜欢 Web 服务器乱丢饼干(Cookie)到你家,当然可以让浏览器拒绝网站存放 Cookie 到你的电脑。

IE 浏览器从“工具”选单 -> Intertnet 选项 -> 安全性,按“自订层级”,到 Cookie 的部分,全都设为关闭,按确定,关闭浏览器,再重新启动浏览器即可。

当你关闭 Cookie 之后,很多网站的个人化服务功能很可能也不能再使用了。

IE 的 Cookie 默认存放位置是在:C:\WINDOWS\Temporary Internet Files

你可以直接删掉这里面的东西或是利用“Internet 选项”里的清除档案按钮来清除。

Cookie 的内容

部份网友对 Cookie 的内容很有兴趣,想到这个问题,知不知道如何得知哪个网站有设 Cookie?你的 Cookie 资料又为何?其实,用非常简单的一行 JavaScript 指令就可以一清二楚了。

首先,开启一个网站,例如 http://www.google.com ,一旦网站开启后,在浏览器的位址列中输入以下的一行 JavaScript 指令:

javascript:alert("Cookie:"+document.cookie)

javascript:document.write(document.cookie)

按下 Enter 后,你会见到跳出一个小警告视窗,上面便会标明出你的 Cookie 资料。试试看吧?!当然,如果你的浏览器的 Cookie 功能被关闭,那你当然就见不到囉。

比较新的浏览器 Chrome 与 Firefox 都有内建“开发人员工具”,只要按 F12 开启“开发人员工具”,可以在“Application”或“储存空间”页签看到网站所储存的 Cookie 内容。

什么是 Session?

讲到 Cookie 就会有人提到 Session。

Session 的资料是存放在 Web 服务器端。用解释的不好解释,我们先来举个例子...

有一家咖啡店要举办咖啡买三送一的活动,若以“Cookie”或“Session”的作法来看:

  • Cookie:
    相当于是店家发给你一张“小卡片”,每次你来买一杯咖啡就在卡片上盖个印章,集满三个印章,那咖啡店就会送你一杯免费的咖啡。
    其中,购买咖啡的记录是留在你携带的卡片上,如果卡片遗失你的记录就不存在了。
  • Session:
    相当于是店家请你加入他们的会员,然后发给你一张“会员卡”(Session ID)。每次你拿会员卡来买咖啡都会在公司的电脑里留下记录,买了三杯咖啡就会送你一杯免费的咖啡。
    其中,购买咖啡的记录是储存在店家的电脑里,如果会员卡遗失了可以透过核对会员的资料来重新取得会员卡。未来这张会员卡甚至可能在它的连锁店使用。

可以说,Cookie 只做一件事,就是存取服务器暂存在客户端的资料。而 Session 则是一个涵盖范围比较广、比较完整的保存机制。并且 Session 仍需借由 Cookie、网址或表单...等三种方式来识别用户的 Session ID,才能接续之后服务器要做的事情。

只要“网站是将任何用户的资料储存在服务器,并且用 Cookie、网址或表单来识别单一用户”,这样就已经是在实作 Session 了。由于“识别用户”是很普遍的功能,你所使用的程式框架 (Framework) 有可能在无声无息之中就已经帮你完成整个机制了,你只要把心思用在程式的其它部份即可。

参考网页

return top