顯示具有 JavaScript 標籤的文章。 顯示所有文章
顯示具有 JavaScript 標籤的文章。 顯示所有文章

2012年4月7日 星期六

常用的regular expression


這篇會慢慢增加內容,所以我也會更新發布日期。
JavaScript
    var mac = /^\s*([\d[a-f]{2}:){5}[\d[a-f]{2}\s*$/i;
    var ip = /^((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))\.((\d)|(([1-9])\d)|(1\d\d)|(2(([0-4]\d)|5([0-5]))))$/;


C language
    char *mac =  "([[0-9a-fA-F]{2}:){5}[0-9a-fA-F]{2}";
    char *ip = "^(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))\\.(([0-9])|(([1-9])[0-9])|(1[0-9][0-9])|(2(([0-4][0-9])|5([0-5]))))$";


    參考資料
  1. http://en.wikipedia.org/wiki/Regular_expression



2012年1月29日 星期日

JSON-C


JSON-C是一套用C寫的JSON format的parser和generator,可以將JSON字串正確parse,並且存成json_object進行操作(新增/刪除/修改),也可以將json_object轉成JSON字串,個人還蠻推薦的。

官方網站:JSON-C

安裝步驟
brook@vista:~/src$ git clone https://github.com/json-c/json-c.git json-c
Cloning into json-c...
remote: Counting objects: 448, done.
remote: Compressing objects: 100% (169/169), done.
remote: Total 448 (delta 315), reused 405 (delta 274)
Receiving objects: 100% (448/448), 125.68 KiB | 76 KiB/s, done.
Resolving deltas: 100% (315/315), done.
brook@vista:~/src$ cd json-c/
brook@vista:~/src/json-c$ ./autogen.sh
autoreconf: Entering directory `.'
autoreconf: configure.in: not using Gettext
autoreconf: running: aclocal 
autoreconf: configure.in: tracing
autoreconf: running: libtoolize --install --copy
libtoolize: Consider adding `AC_CONFIG_MACRO_DIR([m4])' to configure.in and
libtoolize: rerunning libtoolize, to keep the correct libtool macros in-tree.
libtoolize: Consider adding `-I m4' to ACLOCAL_AMFLAGS in Makefile.am.
autoreconf: running: /usr/bin/autoconf
autoreconf: running: /usr/bin/autoheader
autoreconf: running: automake --add-missing --copy --no-force
autoreconf: Leaving directory `.'
brook@vista:~/src/json-c$ ./configure
checking for a BSD-compatible install... /usr/bin/install -c
checking whether build environment is sane... yes
checking for a thread-safe mkdir -p... /bin/mkdir -p
...
brook@vista:~/src/json-c$ make
make  all-am
make[1]: Entering directory `/home/brook/src/json-c'
/bin/bash ./libtool --tag=CC   --mode=compile gcc -DHAVE_CONFIG_H -I.    -Wall -Wwrite-strings -Werror -std=gnu99 -D_GNU_SOURCE -D_REENTRANT -g -O2 -MT arraylist.lo -MD -MP -MF .deps/arraylist.Tpo -c -o arraylist.lo arraylist.c
...
brook@vista:~/src/json-c$ make check
make  test1 test2 test4 test_parse_int64 test_null test_cast
make[1]: Entering directory `/home/brook/src/json-c'
gcc -DHAVE_CONFIG_H -I.    -Wall -Wwrite-strings -Werror -std=gnu99 -D_GNU_SOURCE -D_REENTRANT -g -O2 -MT test1.o -MD -MP -MF .deps/test1.Tpo -c -o test1.o test1.c
test1.c: In function ‘sort_fn’:
test1.c:14:8: error: assignment discards ‘const’ qualifier from pointer target type [-Werror]
test1.c:15:8: error: assignment discards ‘const’ qualifier from pointer target type [-Werror]
cc1: all warnings being treated as errors

make[1]: *** [test1.o] Error 1
make[1]: Leaving directory `/home/brook/src/json-c'
make: *** [check-am] Error 2
brook@vista:~/src/json-c$ sed -i 's/-Werror //' Makefile
brook@vista:~/src/json-c$ make check
make  test1 test2 test4 test_parse_int64 test_null test_cast
make[1]: Entering directory `/home/brook/src/json-c'
...
brook@vista:~/src/json-c$ ./test1
my_string= 
my_string.to_string()="\t"
my_string=\
my_string.to_string()="\\"
my_string=foo
my_string.to_string()="foo"
my_int=9
my_int.to_string()=9
my_array=
 [0]=1
 [1]=2
 [2]=3
 [3]=null
 [4]=5
...


Parser
可以利用json_tokener_parse()直接將字串轉成json_object,或是利用json_object_from_file()直接將檔案轉成json_object。
#include <stdio.h>
#include <stdlib.h>
#include <stddef.h>
#include <string.h>

#include "json.h"


int main(int argc, char **argv)
{
  json_object *new_obj;

  MC_SET_DEBUG(1);

  new_obj = json_tokener_parse("/* more difficult test case */ { \"glossary\": { \"title\": \"example glossary\", \"GlossDiv\": { \"title\": \"S\", \"GlossList\": [ { \"ID\": \"SGML\", \"SortAs\": \"SGML\", \"GlossTerm\": \"Standard Generalized Markup Language\", \"Acronym\": \"SGML\", \"Abbrev\": \"ISO 8879:1986\", \"GlossDef\": \"A meta-markup language, used to create markup languages such as DocBook.\", \"GlossSeeAlso\": [\"GML\", \"XML\", \"markup\"] } ] } } }");
  printf("new_obj.to_string()=%s\n", json_object_to_json_string(new_obj));
  json_object_put(new_obj);

  return 0;
}


Generator基本上就是用json_object_to_json_string()將json_object轉成字串。

更多的範例可以參考source code裡面的test1.c。



2011年10月22日 星期六

javascript(6.1) - event, onkerpress


onkeypress當鍵盤被按下時觸發,這個event算蠻常用的,尤其是想要限制使用者的輸入範圍時。 其範例如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>   <title></title> </head> <body>   <script type="text/javascript">     function noNumbers(e)     {        var keynum        var keychar        var numcheck        if (window.event) { // IE          keynum = window.event.keyCode        } else if(e.which) { // Netscape/Firefox/Opera          keynum = e.which        }        alert(keynum)        keychar = String.fromCharCode(keynum)        numcheck = /\d/        return !numcheck.test(keychar)     }   </script>   <form>     <input type="text" onkeypress="return noNumbers(event)">     <input type="text" id="k">   </form>   <script type="text/javascript">     document.getElementById("k").onkeypress = noNumbers;   </script> </body> </html>
這邊要注意的是,不同的瀏覽器會由不同的方式取得該event的值。


參考資料:W3schools, onkeypress Event


2009年10月8日 星期四

AJAX - Asynchronous JavaScript And XML


AJAX算是一個不算是一個新的技術,利用非同步的方式,提供互動式的網頁,AJAX面對最大的問題就是各個Browser之間對Java Script的標準與設計不一,常常寫好的能在FireFox上執行,在IE卻不能執行,所以在設計AJAX的時候最好考慮一下相容性的問題。
簡單的來說,AJAX提供XMLHttpRequest送出request給Web Server,接著等待回應,並處理回應的資料。

XMLHttpRequest

由於Browser之間對Java Script的標準與設計不一,所以下面的寫法可以用於大多數的形況。
// Provide the XMLHttpRequest class for IE 5.x-6.x: // Other browsers (including IE 7.x-8.x) ignore this // when XMLHttpRequest is predefined if (typeof(XMLHttpRequest) == "undefined") { XMLHttpRequest = function() { try { return new ActiveXObject("Msxml2.XMLHTTP.6.0"); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.4.0"); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP.3.0"); } catch(e) {} try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} throw new Error("This browser does not support XMLHttpRequest."); }; } xmlHttpRequest = new XMLHttpRequest(); 有了XMLHttpRequest之後,我們就可以送出request並且處理資料

xmlHttpRequest.onreadystatechange = function () { //處理來自Server的回應 if(xmlHttpRequest.readyState==4) { alert(xmlHttpRequest.responseText); // Server回應的內容 // 如果回傳的是XML資料可以使用responseXML } } xmlHttpRequest.open("GET","my.php", true); // 設定送出的method(GET/POST), 以及對象(URL) // 基於安全考量,你不能呼叫不同網域的網頁。如果網域不同時會出現「權限不足,拒絕存取」的錯誤。 // 第三個參數設定此request是否不同步進行,如果設定為TRUE,則即使伺服器尚未回傳資料,也會繼續執行其餘的程式。 xmlhttp.send(null); // 送出request
StateDescription
0The request is not initialized
1The request has been set up
2The request has been sent
3The request is in process
4The request is complete



2009年7月30日 星期四

javascript(5) - function


在java script中,函數必須以關鍵字(key word) function開頭,function name可寫可不寫(named/anonymous function)。可以有0個以上的參數,參數會被存放於arguments中。
function f1() { alert('f1'); } f2 = function (x) { alert('f2'); }; /* 注意; */ (function() { alert('f3'); })(); /* defined anonymous function and invoke. 注意後面的(); */ f1(); f2();
arguments
當pass的參數少於function定義的參數時,少的這些參數會被視為undefined。
function pass(x) { alert(x); } pass(); pass(123); 其實,function的參數會被儲存在arguments(Arguments類別)中。
function max() { var max = arguments[0]; for (var i = 1; i < arguments.length; i++) { if (max < arguments[i]) max = arguments[i]; } return max; } alert(max(9, 7, 1, 3)); arguments並不是一個真的array,而是一個Arguments,當改變function的參數時,也會同步改變arguments。
function print(x) { alert(x); arguments[0] = null; alert(x); } print('123');
callee
另外arguments還有另外一個常用的properties - 'callee',用於傳回正在執行的Function物件,常用於匿名的function的遞迴(recursive)。
function factorial(n) { if (n <= 0) return 1; else return n * arguments.callee(n - 1) } alert(factorial(3));
function's properties
function在JavaScript中算是個object,所以自然就有properties,這邊介紹幾個properties,length取得function參數數量。
var f1 = function(x) {return x * x}; var f2 = function(x, y) {return x + y}; alert(f1(3)); alert(f1.length); alert(f2.length);
apply()/call()
call()/apply()讓使用者暫時的將function當成某個object的method.
如f.call(obj, 1, 2) 等同於
obj.m = f;
obj.m(1,2);
delete obj.m;
apply()和call()很像, 只是apply的參數必須是array
f.apply(obj, [1,2]);



2009年7月25日 星期六

JSON


JavaScript Object Notation(JSON)是一個language-indepent的資料交換格式,他源自於ECMA-262 3rd edition中的子集合,相關資訊可以參考RFC-4627。JSON可以表示JavaScript中的資料型態,包含四種原生資料型態(string、number、boolean和null),以及兩種結構化資料型態(object和array)。JSON的主要設計理念是希望能設計出可移植,且最小化的JavaScript表示法。

JSON用name:value表示properties的name與value,在value的表示方式上,object用{}表示,array用[]表示,properities之間用","分開。
比如:
{
  "Image": {
    "Width":  800,
    "Height": 600,
    "Title":  "View from 15th Floor",
    "Thumbnail": {
      "Url":    "http://www.example.com/image/481989943",
      "Height": 125,
      "Width":  "100"
    },
    "IDs": [116, 943, 234, 38793]
  }
}


2009年7月24日 星期五

javascript(4) - Object


object的建立可以透過JSON format或者new()兩種方式:
var e = {};
var p = {x:10, y:20};
var name;
for (name in p) {
   alert('p.' + name + '=' + p[name]);
}

透過new可以建立新的object(呼叫constructor進行初始化),比如new Object(),會建立一個empty object(constructor為{})。可以透過.或者[]存取object的properties,透過delete移除object的properties。用var宣告的properity不能被delete。
var person = new Object();
person.name = "Brook";
person.age = 30;
person['weight'] = 50;
alert(person['name']);
alert(person.age);
alert(person.weight);
delete person.weight;
alert(person.weight);

檢查property是否存在
var p = {x:10, y:20};
if ('x' in p) alert('p has property "x"');
if ('y' in p) alert('p has property "y"');
if ('z' in p) alert('p has property "z"');

constructor()
類似C++/JAVA的constructor function。
function Animal() {
}
var bird = new Animal();
alert(bird.constructor == Animal);
alert(bird.constructor == Object);  

toString()
每當object要被需要被轉成string時會被呼叫。

valueOf()
每當object需要被轉成primitive type時會被呼叫。

hasOwnProperty()
用以判斷object是否有自己定義properties。

Array
Array算是一種特別的Object,可以透過.或[]存取element。要移除element必須用shift()/pop()/splice()不能用delete。
var a1 = new Array();
a1[0] = "hello";
a1.x = "xx";
alert(a1['x']);
alert(a1[0]);

var a2 = [];
for (var i = 1; i < 10; i++) {
  a2[i] = i*i;
}
a2.shift(); // remove first element
a2.pop(); // remove last element.
alert(a2);
a2.splice(5);
alert(a2);
a2['x'] = 'xx';
a2['y'] = 'yy';
alert(a2.length);
a2.length =3;
alert(a2);
a2.length = 5;
alert(a2);
Array.length回傳的是目前用的index最大值+1,index最大值為2^32-1,因此length並不保證有這麼多element,而直接改變index會造成Array的truncating和enlarging。

JavaScript並不支援multi-dimensional array,但是允許element可以是array(array本來就是object的一種)。
var t = new Array(3);
for (var i = 0; i < t.length; i++) {
  t[i] = new Array(5);
}

for (var r = 0; r < t.length; r++) {
  for( var c = 0; c < t[r].length; c++) {
    t[r][c] = r * c;
  }
}
alert(t);

Array.join()
將所有的element轉成string之後串在一起。
var a = new Array(1,2,3);
var b = new Array(3);
alert(a.join());
alert(b.join());

Array.reverse()
將所有element順序反轉(reverse the order)。
var a = new Array(1, 2, 3);
alert(a.reverse().join());

Array.sort()
將所有element做排序,可以給sort一個compare function進行排序。
var a = new Array(3, 1, 2);
alert(a.sort().join());
alert(a.sort(function(a, b) { return b - a; }).join());

Array.concat()
將回傳新的Array,包含新的element加上原本array中的element(不會改變原本的array)。
var a = new Array(1, 2, 3);
var a1 = a.concat(4,[5]); // [1, 2, 3, 4, 5]
alert(a1);
var a1 = a.concat([4, [5]]); // [1, 2, 3, 4, [5]]
alert(a1);

Array.slice()
回傳新的Array(不改變原來的array),包含指定的(satrt, end]之element。
var a = new Array(1, 2, 3, 4, 5);
alert(a.slice(1));
alert(a.slice(2,3));
alert(a.slice(-1));
alert(a.slice(-2, 3));
alert(a.slice(2, -3));
alert(a.slice(-2, -3));

Array.splice()
用於insert/remove element。
var a = new Array(1, 2, 3, 4, 5);
a.splice(4);
alert(a);
a.splice(2, 1);
alert(a);
var a = new Array(1, 2, 3, 4, 5);
a.splice(4);
alert(a);
a.splice(2, 1);
alert(a);
var a1 = a.splice(1,2, 'a', 'b'); /* a[1]開始, 取代後面2個, 為'a', 'b' */
alert(a);
alert(a1);
a1 = a.splice(1,0, 'a', 'b'); /* a[1]開始, 取代0個(insert的意思), 為'a', 'b' */
alert(a);
alert(a1);

Array.push()/Array.pop()
從Array後面新增/刪除。
var a = [];
alert(a.push('a'));
alert(a.push('b'));
alert(a.pop());
alert(a.pop());

Array.unshift()/Array.shift()
從Array前面新增/刪除。
var a = [];
alert(a.unshift('a'));
alert(a.unshift('b'));
alert(a.shift());
alert(a.shift());

global/call object
當JavaScript一啟動後,便會建立global object,而所有的全域變數/全域函數都是這個global object的屬性,當呼叫另外一個function時,就會建立call object,區域變數/內部函數也成為這個call object的屬性。

2009年7月23日 星期四

javascript(3) - statement


statment部分,大致上也和C/C++/JAVA相同,所以這邊只有提出一些不同於C/C++的部分。

switch
switch會先運算switch(x),接著再運算每一個case的內容,只要運算完的結果相符(==),就會執行該case的內容,所以case可以是任何的運算式,不過不建議使用side-effect的case,因為對於執行結果很不直覺。
var four = new Number(4);
var ten = 10;
for (x = 0; x <= 10; x++) {
  switch(x) {
    case 1*2:
      alert("the result is 1*2");
      break;
    case 3:
      alert("the result is 3");
      break;
    case four:
      alert("the result is four");
      break;
    case four+1:
      alert("the result is four+1");
      break;
    case --ten:
      alert("not recommend");
      break;
    default:
  }
}

for/in
利用for/in可以依序取得array或object的element,但沒有一定的順序,可能會因為不同的JS implementation而有所差異。
var obj = new Object();
obj.x = 100;
obj.y = function() { alert('ya') }
obj.z = new Date();
for (variable in obj) {
   alert("obj." + variable + " = " + obj[variable]);
}

label
在java script中,label等於是對statment進行命名(naming),可以使用continue重複進入該label/(naming statment),或者break跳過該statment。
test1 : for (var i = 0; i < 3; i++) {
   test2 : for (var j = 0; j < 3; j++) {
      if (i == 1 && j == 1) {
         continue test1;
      } else {
         alert("i = " + i + ", j = " + j);
      }
   }
}

var i = 0;
test2:
while(++i) {
   if (i > 10) {
      break test2;
   }
   alert(i);
}

throw/try/catch/finally
透過try進行捕捉exception,當在try這一block的code發生exception後,就會進入catch執行,而finally是不管有沒有發生exception都會被執行,而exception是透過throw丟出。
function f(x) {
  if (x == 0) throw new Error("x can't be zero");
}

for (var i =5; i > -5; ) {
  try {
    f(i);
  } catch (e) {
    alert(e);
  } finally {
    i--;
  }
}

with
with用來暫時改變scope chain,比如with(object)則會將object加到目前的scope chain中,雖然在使用上可以省略打一些字,但是java script很難對with進行最佳化,以及變數使用上可能會有問題,所以不建議使用。
with(Math) {
  alert(PI);
  alert(E);
}


2009年7月21日 星期二

javascript(2) - operators


基本上Java Script的operators和C/C++/JAVA大致相同,所以這邊只有提出一些不同於C/C++的operators。

=== (identical)
如果資料型態相同,內容相同回傳true,否則回傳false。對於primitive type只要內容相同即可。對於reference type(object/array/function)則是要refence到相同的物件。
var n1 = 123;
var n2 = 123;
var no = new Number(123);
alert("n1 == no ? " + (n1 == no));
alert("n1 === no ? " + (n1 === no));
alert("n1 == n2 ? " + (n1 == n2));
alert("n1 === n2 ? " + (n1 === n2));

var s = "123";
var so = new String("123");
alert("s == so ? " + (s == so));
alert("s === so ? " + (s === so));

in operator
當in為 left-side operator時,可以取值。當in為 right-side operator時,則判斷是否存在。
var point = { x:1, y: 1};
var has_x_coord = "x" in point;
alert("x is set ? " + has_x_coord);
alert("x is set ? " + ("z" in point));
for (p in point) {  
    alert("point." + p + "=" + eval("point." + p));
}

instanceof operator
為判斷是否為該object的instance。
var d = new Date();
alert((d instanceof Date));
alert((d instanceof Object));
alert((d instanceof Number));

>> shift right with sign, >>> Shift right with zero fill
這邊就要提到java script的number是如何儲存的,所有的number在java script中,都是以64-bit的IEEE 754表示。所以,思考一下執行完的結果吧。
alert(-1 >> 1);
alert(1 >> 1);
alert(-1 >>> 1);
alert(1 >>> 1);

typeof return a string indicating the datatype of the operand.
var s = "123";
var d = new Date();
alert("typeof s = " + (typeof s));
alert("typeof d = " + (typeof d));


2009年7月9日 星期四

javascript(1) - javascript introduction


statment
avascript一個statment的結束可以是換行或是分號。
alert('1')
alert('2');

如果跨行要再後面加'\'。
alert('1 \
2');

註解
javascript的註解和C++一樣,支援單行和多行。
// one-line comment
/* multiple-line
* comment */

變數
javascript的變數可以儲存任何的資料型態,沒有用var宣告的變數,會被視為global variable。
a = 1; /* global variable */
var b = 2; /* global variable */
function c() {
    var d = 3; /* local variable */
    e = 4; /* global variable */
}

變數的有效範圍為宣告的函數所涵蓋之範圍,如
var v = "global";
function fn() {
    alert(v); // 顯示'undefined', 不是'global'
    var v = "local";
    alert(v); // 顯示local
}

原生資料型
javascript中的變數可以是任何的資料型態,其原生資料型態有undefined, Null, Number, String, Boolean, Native Objects(array...).
  • undefined,所謂的undefined是指沒有初始化的變數。
  • Null通常是指已經初始化,被指向空的(empty)。
alert(null == undefined)
alert(null === undefined)

  • Number就是數值,1, 2.3, 4.5e, 07(8進制), 0x89(16進制)。
  • String就是字串,javascript並沒有所謂character的資料型態。
str = "hello"
alert(str.charAt(0))

  • Boolean不是true就是false。
alert(true == 1);
alert(true === 1);
alert(false == 0);
alert(false === 0);

  • Native Objects
剩下的應該都可以歸類為Native Objects吧(包含array)。
array = [];
array.push("str");
array.push(1)
array[2] = "i2";
array["x3"] = "si3";
alert(array[0]);
alert(array["x3"]);
alert(array.x3);