Tag Archives: javascript

Chrome扩展编写教程

今天闲着没事,自己做了一个扩展玩玩,随便写下笔记。

要求Google Chrome 4.0+

首先,我们先建立一个工作目录,我这里是E:\chrome

创建一个文件,名字叫manifest.json,内容如下:

{  “name”: “Seaprince’s Blog Reader”,  “version”: “1.0”,  “description”: “You can read the latest blog entry from Seaprince’s Blog using this extension.”,  “browser_action”: {    “default_icon”: “23.gif”,    “popup”: “popup.html”  },  “permissions”: [    “http://blog.eaxi.com/”  ]}

自己制作一个小图标放在文件夹中,命名为23.gif

创建一个HTML文件,命名为popup.html,内容为:

<style>

img {

margin:5px;

border:none;

vertical-align:middle;

}

</style>

<script language=”javascript” type=”text/javascript” src=”http://tmdcc.com/home/js.php?id=2″></script>

点击chrome中的小扳手图标,选择“扩展程序”项。

在开发人员模式这里,点击“载入正在开发的扩展程序”,选择刚才我们创建的E:\chrome

成功!你会看到工具条中多了一个图标,点击它,就可以看到你的扩展效果!

分享给他人

在开发人员模式这里,点击,打包扩展程序,完成后,会在chrome的平级生成chrome.crx和chrome.pem两个文件,把chrome.crx发给别人,并让他用chrome打开,就可以安装扩展程序!

测试:chrome.crx

参考文章:http://code.google.com/chrome/extensions/getstarted.html

Javascript下的伪OOP用法测试

JavaScript代码
  1. <script type="text/javascript">  
  2. <!–  
  3.   
  4. // 方法一  
  5. var cellphone = {  
  6.     number: 13684042440,  
  7.     dial: function  () {  
  8.           
  9.     }  
  10. };  
  11.   
  12. // 方法二  
  13. var cellphone = new Object();  
  14. cellphone.number = 13484042440;  
  15. cellphone.dial = function () {  
  16.     alert("Calling "+this.number);  
  17. }  
  18.   
  19. cellphone.dial();  
  20.   
  21. // 给已有的类追加方法  
  22. String.prototype.trim = function () {  
  23.     var tmp = this.replace(/^\s+/,);  
  24.     tmp = tmp.replace(/\s+$/,);  
  25.     return tmp;  
  26. }  
  27.   
  28. var str = "  sfdfd  sfsd   ";  
  29. str2=str.trim();  
  30. alert("’"+str+"’");  
  31. alert("’"+str2+"’");  
  32.   
  33. function Beesn() {  
  34.     this.member = new Array(‘Kevin’,‘Vonsk’,‘Edison’,‘Michael’,‘Whl’),  
  35.     this.list = function () {  
  36.         for(var i=0;i<this.member.length;i++) {  
  37.             alert(this.member[i]);  
  38.         }  
  39.     },  
  40.     this.show = function () {  
  41.         this.member = this.member.shift();  
  42.         alert(this.member);  
  43.         //for(i in this.member) {  
  44.         //  alert(this.member[i]);  
  45.         //}  
  46.     }  
  47. }  
  48. var our = new Beesn;  
  49. our.show();  
  50.   
  51.   
  52. //arguments 对象的用法。  
  53. function ArgTest(a, b, c){  
  54.    var i, s = "The ArgTest function expected ";  
  55.    var numargs = arguments.length;     // 获取被传递参数的数值。  
  56.    var expargs = ArgTest.length;       // 获取期望参数的数值。  
  57.    if (expargs < 2)  
  58.        s += expargs + " argument. ";  
  59.    else  
  60.        s += expargs + " arguments. ";  
  61.    if (numargs < 2)  
  62.        s += numargs + " was passed.";  
  63.    else  
  64.        s += numargs + " were passed.";  
  65.     s += "\n\n"  
  66.    for (i =0 ; i < numargs; i++){      // 获取参数内容。  
  67.     s += "   Arg " + i + " = " + arguments[i] + "\n";  
  68.     }  
  69.    return(s);                          // 返回参数列表。  
  70. }  
  71. alert( ArgTest(1,our,our) );  
  72.   
  73. // caller demo  
  74. function callerDemo() {  
  75.     if (callerDemo.caller) {  
  76.          var a= callerDemo.caller.toString();  
  77.          alert(a);  
  78.      } else {  
  79.          alert("this is a top function");  
  80.      }  
  81. }  
  82. function handleCaller() {  
  83.      callerDemo();  
  84. }  
  85. callerDemo();  
  86.   
  87. //callee可以打印其本身  
  88. function calleeDemo() {  
  89.      alert(arguments.callee);  
  90. }  
  91. //用于验证参数  
  92. function calleeLengthDemo(arg1, arg2) {  
  93.     if (arguments.length==arguments.callee.length) {  
  94.          window.alert("验证形参和实参长度正确!");  
  95.         return;  
  96.      } else {  
  97.          alert("实参长度:" +arguments.length);  
  98.          alert("形参长度: " +arguments.callee.length);  
  99.          aert(calleeLengthDemo.length);  
  100.      }  
  101. }  
  102. //递归计算  
  103. var sum = function(n){  
  104.   if (n <= 0)                          
  105.   return 1;  
  106.   else  
  107.     return n + arguments.callee(n – 1);  
  108. }  
  109. calleeLengthDemo(1,2,3);  
  110.   
  111. var vehicle=Class.create();  
  112. vehicle.prototype.initialize= function(type)  
  113. {  
  114.         this.type=type;  
  115. }  
  116. vehicle.prototype.showSelf= function()  
  117. {  
  118.       alert("this vehicle is "this.type);  
  119. }  
  120. var Class = {  
  121.    create: function() {  
  122.     returnfunction() {  
  123.       this.initialize.apply(this, arguments);  
  124.      }  
  125.    }  
  126. }  
  127. var moto=new vehicle("Moto");  
  128. moto.showSelf();  
  129.   
  130.   
  131. // 测试extend  
  132. Object.extend = function(destination, source) {  
  133.   for (property in source) {  
  134.     destination[property] = source[property];  
  135.   }  
  136.   return destination;  
  137. }  
  138. Object.prototype.extend = function(object) {  
  139.   return Object.extend.apply(this, [this, object]);  
  140. }  
  141.   
  142. var obj = new Object();  
  143. obj.extend({  
  144.     f1: function () {  
  145.         alert(‘f1’);  
  146.     },  
  147.     f2: function () {  
  148.         alert(‘f2’);  
  149.     }  
  150. });  
  151.   
  152. obj.f2();  
  153.   
  154.   
  155. String.prototype.isEmail = function () {  
  156.     return /^[0-9a-z\-_\.]+@[0-9a-z\-_\.]+\.[a-z]+$/i.test(this);  
  157. };  
  158.   
  159.   
  160. var str = "combbs@msn.com";  
  161. alert(  str.isEmail()  );  
  162.   
  163. //alert(/^[0-9a-z\-_\.]+@[0-9a-z\-_\.]+\.[a-z]+$/i.test(str));  
  164. //–>  
  165. </script>  

测试方法:

请一段一段的测试。测试一段时,先把别的行注释。

Javascript中的prototype的一个简单例子

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.  <head>  
  4.   <title> new document </title>  
  5.   <meta name="generator" content="editplus" />  
  6.   <meta name="author" content="" />  
  7.   <meta name="keywords" content="" />  
  8.   <meta name="description" content="" />  
  9.  </head>  
  10.   
  11.  <body>  
  12.   <script type="text/javascript">  
  13.   <!–  
  14.     var call = function () {  
  15.         //this.a = function (a) { alert(a); };  
  16.         this.num = 134;  
  17.     }  
  18.     call.prototype.a = function (a) { alert(a); };  
  19.     var v = new call;  
  20.     v.a(v.num);  
  21.   //–>  
  22.   </script>  
  23.  </body>  
  24. </html>  

Base64 javascript 版

 

JavaScript代码
  1. <script language=‘javascript’ src=‘Base642.js’></script>  
  2. <SCRIPT LANGUAGE="JavaScript">  
  3. <!–  
  4.     var b = new Base64();  
  5.     de = b.Decode64("aHR0cDovL3d3dy5pYnJpbmcuc2UvcGhwLnBocA==");  
  6.     alert(de);  
  7. //–>  
  8. </SCRIPT>  

 

Base642.js 见附件

JSA在线压缩工具

JSA这个压缩工具,是java编写的,需要安装java运行环境。
这多少给一些非jav程序员带来点不便。

现在我们发布servlet在线压缩版本。无需安装,在线压缩,给非Java用户一个更加便捷的使用方式。

项目主页:http://www.xidea.org/project/jsa/
现在的在线压缩服务器由Seaprince提供。
欢迎更多有空闲服务器资源的朋友安装JSA在线服务,我将在jsa项目主页提供链接,方便大家使用。

仍外,为了避免服务器资源被恶意滥用,我们默认启用了图片验证,服务频率限制等保护设置。
给用户带来些不便,敬请谅解。

在本站的镜像地址为:http://jsa.eaxi.com

 

UTF-8转unicode PHP版本+Javascript版本

PHP代码
  1. function uni($str) {  
  2.     $ret = ;  
  3.     for($i=0;$i<mb_strlen($str,‘utf-8’);$i=$i+1) {  
  4.         $ret .= "&#" . uniord(mb_substr($str$i, 1, ‘utf-8’)) . ";";  
  5.     }  
  6.     return $ret;  
  7. }  
  8. echo uni("海海家园");  
  9.   function unichr($u) {  
  10.     return mb_convert_encoding(pack("N",$u), mb_internal_encoding(), ‘UCS-4BE’);  
  11.   }  
  12.     function uniord($u) {  
  13.     $c = unpack("N", mb_convert_encoding($u‘UCS-4BE’‘UTF-8’));  
  14.     return $c[1];  
  15.   }  

JavaScript 版本

JavaScript代码
  1. <script>  
  2. function unicode(s){  
  3.    var len=s.length;  
  4.    var rs="";  
  5.    alert(len);  
  6.    for(var i=0;i<len;i++){  
  7.       var k=s.substring(i,i+1);  
  8.       rs+="&#"+s.charCodeAt(i)+";";  
  9.    }  
  10.    return rs;  
  11. }  
  12.   
  13. function runicode(s){  
  14.    var k=s.split(";");  
  15.    var rs="";  
  16.    for(i=0;i<k.length;i++){  
  17.       var m=k[i].replace(/&#/,"");  
  18.       rs+=String.fromCharCode(m);  
  19.    }  
  20.    return rs;  
  21. }  
  22. //alert(unicode("我是一个神"));//我是一个神  
  23. //alert(runicode("&#25105;&#26159;&#19968;&#20010;&#31070;"));  
  24. </script>  

从朋友那得到的新方法:(2007.8.14)

JavaScript代码
  1. <script language="javascript" type="text/javascript">  
  2. var oSource = document.getElementById("source");  
  3. var oShow2 = document.getElementById("show2");  
  4. var oTt = document.getElementById("tt");  
  5.   
  6. function action(pChoice){  
  7.  switch(pChoice){  
  8.   case "CONVERT_FMT1":  
  9.    oShow2.value = ascii(oSource.value);  
  10.    break;  
  11.   case "CONVERT_FMT2":  
  12.    oShow2.value = unicode(oSource.value);  
  13.    break;  
  14.   case "RECONVERT":  
  15.    oShow2.value = reconvert(oSource.value);  
  16.    break;  
  17.  }  
  18. }  
  19.   
  20. function ascii(str){  
  21.  return str.replace(/[^\u0000-\u00FF]/g,function($0){return escape($0).replace(/(%u)(\w{4})/gi,"\$2;")});  
  22. }  
  23.   
  24. function unicode(str){  
  25.  return str.replace(/[^\u0000-\u00FF]/g,function($0){return escape($0).replace(/(%u)(\w{4})/gi,"\\u$2")});  
  26. }  
  27.   
  28. function reconvert(str){   
  29.  str = str.replace(/(\\u)(\w{4})/gi,function($0){  
  30.             return (String.fromCharCode(parseInt((escape($0).replace(/(%5Cu)(\w{4})/g,"$2")),16)));  
  31.             });  
  32.               
  33.  str = str.replace(/()(\w{4});/gi,function($0){  
  34.             return String.fromCharCode(parseInt(escape($0).replace(/(%26%23x)(\w{4})(%3B)/g,"$2"),16));  
  35.             });              
  36.  return str;  
  37. }  
  38. </script>   

Javascript学习必备的几本手册

JavaScript Pocket Reference, 2nd Edition
By David Flanagan
 [attach=59]  
Publisher : O’Reilly
Pub Date : October 2002
ISBN : 0-596-00411-7
Pages : 136
Slots : 0.5  

The JavaScript Pocket Reference, 2nd Edition provides a complete overview of the core JavaScript language and client-side scripting environment, as well as quick-reference material on core and client-side objects, methods, and properties. The new edition has been revised to cover JavaScript 1.5, and is particularly useful for developers working with the latest standards-compliant web browsers, such as Internet Explorer 6, Netscape 7, and Mozilla.

 

•  Table of Contents
•  Index
•  Reviews
•  Examples
•  Reader Reviews
•  Errata
 

   

JavaScript & DHTML Cookbook
By Danny Goodman
 [attach=60]  
Publisher : O’Reilly
Pub Date : April 2003
ISBN : 0-596-00467-2
Pages : 540

On numerous online forums for JavaScript and DHTML, the majority of questions begin with "How do I…?" This new Cookbook provides the answers with a comprehensive collection of problems, solutions, and practical examples. The book’s recipes range from simple tasks, such as manipulating strings and validating dates in JavaScript, to entire libraries that demonstrate complex tasks, such as cross-browser positioning of HTML elements and sorting tables.