世界因你而進步: javascript

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

vscode-Bracket Pair Colorizer-有了彩色括號不再眼花惹

code多了會對很多的括號們也一定會眼花, 今天在這不是要賣你藥吃, 吃了會一目十行百行, 因為你不是神童, 今天要來說一款好用Bracket Pair Colorizer外掛套件, 不廢言, 來吧.

雖然星星數不多, 反正好用就好了XD

如果你的NB或PC效能比較慢, 你會發現這個效果不會主立馬出現, 所以看你嘍XD

收工!

React component lifecycle chart

還是看不清楚嗎?不我看大圖XD

Unicode 轉換 NCR

資訊雖然有點久的了，但，好東西一定要下記錄，線上轉換才是王道阿～
將你的unicode字元，轉換成 NCR字碼，只要你有字碼轉換的需求，不多說，直看結果

網址滴佳
http://www.endmemo.com/unicode/unicodeconverter.php

Python Dictionary, 字典的應用

dictionary, 字典是指有一組以上的 key 與 value 所組成不多說, 直接展示吧...

"""建立hi_dict的dictionary"""

hi_dict = {'name': '王小明', 'age': 25, 'mail': 'sample@gmail.com'}

"""取得某key的值"""

print hi_dict.get('name')
"""或"""
print hi_dict['name']

"""加入一組 key 與 value"""
add_dict = {'blog','http://myblog.com'}
hi_dict.update(add_dict)
"""或"""
hi_dict.update({'blog','http://myblog.com'})

"""移除一組 key 與 value"""
hi_dict.pop('blog') """若key 'blog' 不存在時會回傳, KeyError: 'bolg' 訊息"""


"""複製dict"""
hi_dict2=hi_dict.copy()

PG專用最佳字型, Monaco font

不解釋, 看下面註解XD

var hello = function () {
        //再也不會搞不清楚是數字或英字大小寫 1,i,l,0,o,O
        var my_array = ["1", "i", "l", "0", "o", "O"];
    }

圖片淡出式說明描述 silde-description-fidein

讓圖片的項目, 更加生動活潑

Demo page click here

圖片滑出式說明描述 silde-description-show

讓圖片的項目, 更加生動活潑

Demo page click here

HTML5 教學範例

HTML5教學範例與資源, 以下30多個資源可幫你開始學習HTML5。

Blowing up HTML5 video and mapping it into 3D space（將HTML5視訊吹散並組成3D效果）
最近我研究了HTML 5中的Canvas 和Video標籤，並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3（用HTML5 和CSS3 打造向下相容的網頁）
HTML5更加語義化，使用HTML5 我們不必在網頁上佈滿沒有意義的div。它引入了有意義的tag，比如 navigations和 footers 使語法更有意義也更接近自然語言。

Coding A HTML 5 Layout From Scratch（HTML 5佈局）
這篇文章將教你

用原有技術將元素放置在特定位置
最新的技術潮流
Microformats與HTML5協同使用
介紹HTML5與CSS3的新特性

Coding a CSS3 and HTML5 One Page WebsiteTemplate（製作CSS3和 HTML5 一頁式網站樣板）
這篇文章介紹了如何利用CSS3 和jQuery的新特性製作HTML5 網頁模版。 HTML5
仍在完善當中，你也可以選擇性的下載XHTML版。

Comprehensive video tutorial on HTML5（全面的HTML5視訊指南）
這是一個叫Brad Neuberg的工程師製作的HTML5教學視訊。

Create modern Web sites using HTML5 and CSS3（用HTML5與CSS3打造時尚網站）
這篇文章介紹了許多HTML5的功能和語法及API，還有CSS3的新的選擇器，效果和特性。最後，還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章，你就能用HTML5和CSS3開發一個自己的網站啦。

Designing a blog with html5（用html5設計部落格）
許多HTML5 特性要結合JavaScript API一起使用，以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些，我們來看怎樣建立一個部落格。

Designing for the Future with HTML5 and CSS3 Tutorials and Best Practices（為未來設計：HTML 5 和 CSS3 指南與最佳案例）
這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳網站。

Design and Code a Cool iPhone App Website in HTML5（用HTML5設計和實現一個超酷 iPhone App 網站）

Have a Field Day with HTML5 Forms（建立HTML 5表格）
這篇文站將教你如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

How To Create A Nice Blog Design Touching The Future(不用photoshop，完成網頁設計)

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6（怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6）
這篇文章將教你如何用JavaScript和CSS，使 HTML5頁面向下相容，即使是IE6也不例外。

How to Make an HTML5 iPhone App（製作HTML5 iPhone應用）
這是一篇針對iPhone的指導，但是許多技術也可用在相容HTML5的手機瀏覽器上。

HTML 5 and CSS 3: The Techniques You』ll Soon Be Using（HTML 5 和CSS 3：你將用到的技術）
這篇文章使用HTML 5和CSS 3 搭建部落格頁面。如果你已經熟悉html 和CSS，將很容易跟上。

HTML5 for Beginners. Use it now, its easy!（HTML5初學指南）
給所有具有基礎HTML知識的初學者的HTML 5 入門指南

HTML5 Presentation
這篇文章介紹了HTML5 的發展歷史和它的基本特性

HTML5 Tutorial – Getting Started（HTML 5 入門指導）

How to Build Web Pages With HTML 5（怎樣建立HTML5網頁）

Simple Website Layout Tutorial Using HTML 5 and CSS 3（HTML5和CSS3佈局指南）
HTML5最令人期待的新標籤包括HTML5最令人期待的新標籤包括header, footer, aside,
nav,audio，同時它還包括畫圖，線下存儲資料，拖放等API。頁面佈局將會更易理解。這裡將介紹一個最簡單的HTML5佈局頁面，用CSS3 設定樣式。最終結果如下

Structural Tags in HTML5（HTML 5 結構標籤）
HTML5 有許多標籤幫助網頁結構化，這能省去以網頁中許多div

HTML5 Boilerplates（HTML 5樣板）
此文介紹了一些你能拿來就用的HTML5 樣板檔案

HTML 5 canvas – the basics (HTML 5 基礎——Canvas)
對HTML 5 Canvas使用方法的全面指導

HTML 5 Tutorials（HTML 5 指南）

Implementing HTML5 Drag and Drop: New Premium Tutorial (HTML 5 拖放)
HTML5 的一個新特性就是拖放，不過IE早在5.5時代就支援拖放了，而HTML 5
的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。

Preview of HTML 5
這是一篇比較老的文章，介紹了HTML5的特性和優點。

The HTML 5 Canvas For Flash Developers :Drawing (HTML 5 Canvas 的畫圖功能)

The Power of HTML 5 and CSS 3
介紹了HTML 5 與CSS3能創造的各種效果。

View Source Tutorial: Sticky Notes With HTML5 and CSS3（HTML5 和CSS3 打造便利貼效果）

webOS HTML5 Database Storage Tutorial（webOS HTML5資料存儲指南）
HTML5 的本機存儲功能將使資料存儲十分簡便。

Yes, You Can Use HTML 5 Today!
本文介紹了一些現已被支援的HTML 5 特性，對初學者十分有用

引自: http://ten2.tw/blog/html5教學/

Have a Field Day with HTML5 Forms（建立HTML5表格）

Have a Field Day with HTML5 Forms（建立HTML5表格）
這篇文站將教你如果用HTML 5 和進階CSS技術與最新的CSS3技術建立一個漂亮的表格。

引自: http://24ways.org/2009/have-a-field-day-with-html5-forms

顯示當前正在輸入密碼後自動隱藏 iPass

iPass 是一款, 讓網頁密碼輸入也能跟iphone般一樣, 擁有蒙面密碼輸入的提醒效果, 癈話不多說見下圖吧。

演示位置

引自: http://codecanyon.net/item/ipass/146135

jquery - Arrows and boxes 套件

一個可以產生類似像組織圖的套件, 感覺很不錯, 這是公司同事alex分享的, 趕快記錄下來
http://www.headjump.de/article/arrows-and-boxes

日前客戶有個產生條碼的需求, 隨便上網找找, 就有許多解決方案。來介紹一個名為 jquery-barcode 的套件, 這個套件是運用在網頁上, 能使網頁快速的產生條碼項目。因為已經有範例, 所以只提供位置給大家參考不做DEMO

http://code.google.com/p/jquery-barcode/
http://jquery-barcode.googlecode.com/svn/trunk/jquery-barcode/demo/demo.html
http://abgne.tw/jquery/jquery-plugins/jquery-barcode-plugin-0-3.html

JSON (javascript object notation)

JSON（Javascript Object Notation）是一種輕量級的資料交換語言，以文字為基礎，且易於讓人閱讀。儘管JSON是在Javascript的一個子集，但JSON是獨立於語言的文本格式，並且採用了類似於C語言家族的一些習慣。

下列 javascript code是生成JSON的資料結構方式

Ex1:

var mailingAddress = { 
     "Address"    :   "123 Anywhere St.", 
     "City"       :   "Springfield", 
     "PostalCode" :   99999
};

alert("The package will be shipped to postal code " + mailingAddress.PostalCode);

};

Ex2:

var contact = {
     "Name": "John Doe",
     "PermissionToCall": true,
     "PhoneNumbers": [ 
       {
           "Location": "Home",
           "Number": "555-555-1234"
       },
       {
           "Location": "Work",
           "Number": "555-555-9999 Ext. 123"
       }
     ]
};
if (contact.PermissionToCall)
{
  alert("Call " + contact.Name + " at " + contact.PhoneNumbers[0].Number);
}

下方幾個引用位置是不錯的學習地方 , 在此就不做範例過程

JSON in javascript
http://www.json.org/js.html

JSON + jQuery +Asp.Net C# 使用心得
http://chrisbalboa.pixnet.net/blog/post/30161616

An Introduction to JavaScript Object Notation (JSON) in JavaScript and .NET
http://msdn.microsoft.com/en-us/library/bb299886.aspx

jQuery.getJSON()
http://api.jquery.com/jQuery.getJSON/#urldatacallback

ASP.NET的JSON日期轉換
http://blog.darkthread.net/blogs/darkthreadtw/archive/2010/04/21/asp-net-json.aspx

javascript 控制 HTML 超文本的應用

[下拉式選單 (select elements)]

selectedIndex - Reference the value and text for the selected option.

將所選的順序, 文字, 值顯示出來

http://www.mredkj.com/tutorials/tutorial002.html

Use JavaScript to select options.

單選與複選, 利用javascript變更選單的值

http://www.mredkj.com/tutorials/tutorial003.html

Use JavaScript to select options.

複選選單列出所選的值

http://www.mredkj.com/tutorials/tutorial004.html

Add/remove options anywhere in a Select list - works in old and new browsers

新增/刪除下拉式選單 (select) 的選項內容

http://www.mredkj.com/tutorials/tutorial006.html

[表格 (tables)]

Add and delete columns dynamically in a table

增加/刪除欄

http://www.mredkj.com/tutorials/tableaddcolumn.html

Add and delete rows dynamically in a table

增加/刪除列

http://www.mredkj.com/tutorials/tableaddrow.html

你所意想不到的 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 還提供了 [] 語法，以更方便建構陣列，範例如下：

var a = new Array("abc", "xyz", 1000); 
// constructor 語法，陣列標準語法

陣列的元素可以是簡單的資料、其他物件，或是函數。舉個例子來在陣列裡面放函式：

// 使用函式作為陣列元素
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 中，物件本身就可以作為關連陣列。以關連陣列的方式初始化物件的範例如下：

// 顯示 Athens
var obj1 = {"a" : "Athens" , "b" : "Belgrade", "c" : "Cairo"};
alert(obj1["a"]);

// 使用函式作為物件屬性
var obj2 = { name: "Edward", showName: function() { alert(this.name); } }
// 顯示 Edward obj2.age = 23; 屬性可以動態加入
obj2.showName();

其中 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 + " ** "); 
} 

doloop(1, 10, func1); // 印出 1o 行 ** n ** 

doloop(20, 29, function(i) {
  document.writeln("## " + i + " ## "); 
 }
);

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物件與上一個範例中的 Array2物件有相同的作用，只不過這次是寫在原型物件之外。

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 有 mathod1, 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];
 }
 // ...
}

var obj = new main();
main.imports(new dynamic()); // 匯入 dynamic 物件之所有功能

這個 imports 函式可以動態的為 main 加上另一物件的所有操作。
這種 Mix in 的功能可是 C++/Java 的 static type 語言所望塵莫及的。

原文自: http://crazyrushstar.blogspot.com/2008/08/java-script.html

匈牙利標記法定義的 ECMAScript 變數首碼

程序員在撰寫源碼的過程中, 為了讓程式碼的清晰易懂, 在變數命名中介紹下列覺的可以當作參考的標記法, 來作為程序撰寫的幫助, 目的也是希望能夠減少了解程序運用的過程, 在以沒有其它工具輔助的環境下, 以純文字檔選寫 javascript 的腳本中, 建議以有規範的撰寫方式, 來達到程的一致性. 以Camel, Pascal, 匈牙利標記法, 此三種標記法由以下一一介紹...

Camel標記法:
以首字小寫字母為開頭, 後續單詞皆以大寫字母開頭
var myEngName = "Bruce";

Pascal標記法:
以首字大寫字母為開頭, 後續單詞皆以大寫字母開頭
var MyAge = 20;

匈牙利標記法:
此標記法為以Pascal為基礎, 在變數名前加上一個識別字母
var sEngName = "Bruce";
----------------------------------
陣列型: aEmailAddress
布林型: bGirl
浮點型(數字): fTax
函數型: fnCountingDay
整數型(數字): iAge
對向型: oCar
規則運算式: rePattern
字串型: sEngName
變型(可以是任意類型): vSuper
----------------------------------

JavaScript 取得目前網址 (取得目前網址URI資訊 )

http://www.dotblogs.com.tw/acacia/archive/2008/04/01/2373.aspx

訂閱：文章 (Atom)

世界因你而進步