JSON筆記

JavaScript中建立JSON物件


var myCats = [
{
"id": 1,
"name": "水果",
"code": "P01",
  "lv": ["A", "B", "C"]
},

{
"id": 2,
"name": "蔬菜",
"code": "P02",
  "lv": ["A", "A+"]
}

];


.NET 建立JSON字串

JavaScriptSerializer JSS =  new JavaScriptSerializer();

Object Obj = new
{
  id = 1,
  name= "水果",
  code=  "P01"
}

string JSONString = JSS.Serialize(Obj );

.NET 解析JSON字串成物件

           
string JSONString = "[\"A\", \"B\",\"C\"]";
List<string> SelGuidList = new JavaScriptSerializer().Deserialize<List<string>>(JSONString );



參考網址：http://blog.roodo.com/syshen/archives/1410294.html

套用JQuery的日期選擇器Datepicker

介紹目前如何使用JQuery-UI - Datepicker！

使用步驟

1、載入相關css與js檔案

先到JQuery官方網站下載，http://jqueryui.com/download！

進入頁面後，先刪除全部的選取，然後只選擇 Datepicker！


再來選擇想要的樣式及版本，並按Download！！

JQuery相關套件下載

下載完成後會有個壓縮檔，取出下列的檔案！

• js/jquery-1.4.2.min.js
• js/jquery-ui-1.8.4.custom.min.js
• css/redmond/jquery-ui-1.8.4.custom.css
• css/redmond/images/所有圖檔

再下載繁體語系檔，http://jqueryui.com/ui/i18n/jquery.ui.datepicker-zh-TW.js！

全下載完，將載入所有的 css 與 js檔案！

<link type="text/css" href="css/redmond/jquery-ui-1.8.4.custom.css" rel="stylesheet" />    
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.datepicker-zh-TW.js"></script>    


2、套用Datepicker的 js 語法


<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>

相關設定語法參考：http://jqueryui.com/demos/datepicker/

3、最後設定要使用的文字方塊控制項

 <input type="text" id="datepicker"/>

HTML5-新Tag應用

在最新的HTML5標準中新加了video的標籤！

主要是可以顯示影片的DOM，使得不一定要用瀏覽器外掛的軟體(ex:flash)才可執行影片！

範例：

<video width="320" height="240" controls="controls" loop="loop" autoplay="autoplay" >

<source src="movie.mp4" type="video/mp4" >

Your browser does not support the video tag.

</video>

參考網址：http://www.w3schools.com/html5/tag_video.asp

在Flash中使用AS3.0將圖片水平反轉

package flashAs {

import flash.display.BitmapData;

import flash.geom.Matrix;

//具有圖片反轉功能的類別

public class ImageRotation extends Sprite{

private var matrix:Matrix;

private var sourceBD:BitmapData;

//建構子, 設定圖片來源和座標

public function ImageRotation (BD:BitmapData, X:int, Y:int){

sourceBD= BD;

this.x = X; this.y = Y;

//--設定變型矩陣的物件

matrix = new Matrix();

matrix.a=-1;

matrix.b = Math.sin( (180/180) * Math.PI);

matrix.tx= sourceBD.width;

this. goRecovery();

}

//進行水平反轉

public function goRotation (){

this.graphics.clear();

this.graphics.beginBitmapFill(sourceBD, matrix, false);

this.graphics.drawRect(0, 0, sourceBD.width, sourceBD.height);

this.graphics.endFill();

}

//恢復原始圖片

public function goRecovery(){

this.graphics.clear();

this.graphics.beginBitmapFill(sourceBD);

this.graphics.drawRect(0, 0, sourceBD.width, sourceBD.height);

}

}

}

flash使用AS3.0水平反轉圖片

使用Matrix來實現, 假設sourceBD是原始圖片, 則newBD為反轉後的圖片

----------------------------------------------

import flash.geom.Matrix;

import flash.display.BitmapData;

var sourceBD:BitmapData = new BitmapData():

var matrix:Matrix = new Matrix(-1, Math.sin( (180/180) * Math.PI), 0, 0, 0, 0);

matrix.a = -1; //把x反向縮放1倍

matrix.b = Math.tan( (180/180) * Math.PI); //表示y軸傾斜180度

matrix.tx= sourceBD.width;

newBD= new BitmapData(BD.width, BD.height);

newBD.draw(BD,matrix);

判斷使用者是否正選取本頁面

在製作聊天室的網頁時，需要使用到這個功能！

例如有人對你說話時，而你並不在聊天室的那個頁面視窗時！

可以經由這個判斷來提醒使用者，如果沒有在聊天室頁面，

就將網頁的TITLE顯示如"XXX對你說"類似的資訊！

這樣就能達到不在聊天室也能知道是不是有人對你說話了！

下面是判斷的程式碼：

<script type="text/javascript" src="../Scripts/prototype.js"></script>

var _FOCUSED = true;

//適用IE

if(navigator.userAgent.indexOf("MSIE") > 0){

Event.observe(document, 'focusout', function(){

_FOCUSED = false;

}, false);

Event.observe(document, 'focusin', function(){

_FOCUSED = true;

}, false);

}

else{

//適用FF

window.onblur = function(){

_FOCUSED = false;

}

window.onfocus = function(){

_FOCUSED = true;

}

}

prototype.js套件下載

解決IE6的PNG透明圖

在IE6中並不支援PNG的透明圖片，但可依照下面方法達到透明圖。

一開始需載入jquery.js與jquery.ifixpng.js的套件，

還有一個重點就是需要將此套件使用到的圖片 pixel.gif 儲存到 images/pixel.gif 中，

若想要更改圖片擺放位置，可以到query.ifixpng.js檔案中搜尋"images/pixel.gif"並修改即可，

下面是將全部的物件都使用透明化的概略程式碼

==============================================

<script type="text/javascript"> 

<!--  

$(function(){

     $("*").ifixpng(); 

}); 

//--> 

</script>

==============================================

若只針對PNG來做透明化可用：$('img[@src$=.png]').ifixpng();

此套件著作網址：http://jquery.khurshid.com/ifixpng.php

Smarty樣板常用語法

宣告變數
{assign var=v value=1default:0}

foreach用法
{foreach from=$items item=value}
show:{$value}
{foreachelse}
is empty.
{/foreach}
詳細用法請參考：http://www.smarty.net/manual/en/language.function.foreach.php


if用法
{if $var=="aa"}
var:aa
{elseif $var=="bb}
var:bb
{else}
var:cc
{/if}

section用法
{section name="forLoop" start=1 loop=10}
forLoop is 1 to 10
{/section}



參考網址：http://www.jaceju.net/blog/?cat=8

JavaScript常用內建函數

• confirm(String)
  跳出詢問視窗，有是和否的選項可選擇，選是則傳回True，否為False。
• alert(String)
  跳出訊息視窗。

JavaScript的內建字串函數

• indexOf(findString, [startingIndex])
  傳回某字串在字串物件內的位置。 findString 是要找尋的字串； startingIndex 是選擇性參數， 表示要由字串物件開頭的第幾個字元開始找尋， 如果沒有指定， 就由開頭第一個字元開始找。 如果找不到該字串， 就傳回 -1。 註：字串的第一個字元的位置是 0。
  
• lastIndexOf(findString, [startingIndex])
  與 indexOf 相似， 不同之處在於 lastIndexOf 是由字串結尾開始找， startingIndex 也是由字串結尾數起。
  
• toUpperCase() 和 toLowerCase()
  將 text 字串變數內的所有字元轉成大階或小階
  
• charAt(index)
  傳回字串物件內某個位置的字元。 index 是字串物件內的位置， 數值可以由 0 至text.length - 1
  
• substring(firstIndex, lastIndex)
  傳回字串物件某個部份的字串。 firstIndex 和 lastIndex 分別是該部份字串在字串物件內的開頭和結尾位置。
  
• escape(string)
  傳回 string 的 16 進制編碼得出來的字串
  
• eval(string)
  把 string 當作 JavaScript 的敘述來執行
  
• isNaN(test_value)
  檢查 test_value 是否"非數目"型態 (is Not a Number)
  
• parseFloat(string)
  傳回 string 轉成浮點小數後的數目
  
• parseInt(string, base)
  傳回 string 轉成 10 進制後的整數； base 是 string 的數制， 它是選擇性的參數， 如果不指定就把 string 當作 10 進制。
  
• unescape(string)
  傳回以 16 進制編碼字串的原本字串， 功能與 escape() 剛好相反
  
• length
  取得字串的長度
  
• charCodeAt
  傳回字元的 ASCII 值
  
• fromCharCode
  將 ASCII 值轉成字元
  
• 
  

參考網址：
http://www.2cdclasses.com/?action-viewthread-tid-540 ,
http://taiwantc.com/js/js_tut_b_string0.htm

使用JavaScript的window.open開啟新視窗

window.open('開啟網址,'視窗名稱', '參數設定','記錄設定');

open函數中的四個參數說明如下所示：

[開啟網址]
新視窗的網址。

[視窗名稱]
新視窗的識別名稱，可為空字串，此用名稱來對此視窗作一些操作指令，如：關閉…等等。

[參數設定]
設定視窗的屬性（如：選單、工具列、視窗大小…等等）。
可設定的屬性如下：

• width：定義視窗寬度，最小值是 100。
• height：定義視窗高度，最小值是 100。
• resizable：是否能調整視窗大小，設定值為：yes(default)和no（或1與0）。
• menubar：是否顯示主功能表，設定值為：yes(default)和no。
• toolbar：是否顯示工具列，設定值為：yes(default)和no。
• location：是否顯示網址欄位，設定值為：yes(default)和no。
• scrollbars：是否顯示捲軸，設定值為：yes(default)和no。
• status：是否呈現狀態列，設定值為：yes(default)和no。
• directories：是否呈現額外的按鈕（例如：「連結」列，以及「標準按鈕」以外的其他按鈕），設定值為：yes(default)和no。
• copyhistory：是否複製原有瀏覽器視窗的瀏覽歷程（history），設定值為：yes(default)和no。
• fullscreen：是否以全螢幕開啟新視窗（適用IE），設定值為：yes和no(default)。
• left：新視窗的 X 座標。
• titlebar：是否顯示標題列，設定值為：yes(default)和no。
• top：新視窗的 Y 座標。
  

[紀錄設定]
新視窗是否繼承原視窗之瀏覽記錄，輸入的值有兩種

(1). true =>表示要繼承，此為預設值
(2). false=>表示不要繼承。

[注意事項]
在IE7使用時，視窗名稱不可有空白，不然可能會發生"錯誤的引數"的錯誤！

參考網址：
http://www.study-area.org/coobila/tutorial_275.html
http://swf.com.tw/?p=46
http://weblog.gilbert.tw/public/scripts/js_windowopen.html

增加鎖右鍵或其它防止COPY頁面資訊的JS基本語法

只要在body標籤中加入相關屬性的設定，即可簡單的防止COPY頁面資訊，如下面所描述

<body oncontextmenu="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()">

也可打在javascript的標籤中

<script type="text/javascript">
document.oncontextmenu = function (){ return false;}
document.onselect= function (){ document.selection.empty();}
document.oncopy= function (){ document.selection.empty();}
</script>

使用windows工作排程執行網頁，執行後並關閉

在製作訪客的計數器時，有遇到一個小功能，那就是當一天結束後需要將當日訪客歸零，

這時我使用了windows系統本身的工作排程，只要新增一個工作使它每天00:00時候執行某網頁，

而此網頁就是將當日訪客的數字歸零的流程，則該如何製作ㄧ個批次檔.BAT來執行網頁呢？

方法很簡單，先建立個新txt檔案，將它改名為test.bat並在開啟檔案編輯它，而內容如下：

test.bat
===========================================
cd C:\Program Files\Internet Explorer\
iexplore "http://127.0.0.1/"
===========================================

首先是到要使用的瀏覽器程式路徑(cd C:\Program Files\Internet Explorer\)，

再來就是使用此瀏覽器執行檔(iexplore)來執行想要網頁(http://127.0.0.1/)，

請注意網址需要使用雙引號"包起來，這樣網址中有參數時加了&的字元才不會出錯

這樣就大功告成了，由於開啟網頁並讀取結束後它不會自己關閉，

所以可在網頁中加入JavaScript的關閉視窗語法，程式內如下：
===========================================
<script language="javascript">
window.opener=null;
window.open("","_self");
window.close();
</script>
===========================================

自動關閉視窗的JS語法參考

各種轉UTF-8編碼的函數

[Java]
會處理#字元為%23，空白字元轉換為+，中文字拆開每BYTE處理為ASCII

第二個String 為編碼格式(UTF-8,UTF-16等)
java.net.URLEncoder.encode(String args,String args)
java.net.URLDecoder.decode(String args,String args)

[JavaScript]
會處理#字元為%23，空白字元轉換為+，中文字處理為UniCode
escape(String args)
unescape(String args)

不會處理#字元，空白字元轉換為%20，中文字拆開每BYTE處理為ASCII
encodeURI(String args)
decodeURI(String args)

會處理#字元為%23，空白字元轉換為%20，中文字拆開每BYTE處理為ASCII
encodeURIComponent(String args)
decodeURIComponent(String args)

[PHP]
會處理#字元為%23，空白字元轉換為+，中文字拆開每BYTE處理為ASCII
urlencode
urldecode

會處理#字元為%23，空白字元轉換為%20，中文字拆開每BYTE處理為ASCII
(RFC 1738 )
rawurlencode
rawurldecode



參考網址：用javascript轉UTF-8編碼

避免沒斷行文字破壞網頁格式

經常在製作網頁時，遇到的一個問題！

就是表格中有連續英文或數字太長的話，都會將版面用亂！

所以在網路上找到了將文字斷行的解決方法！


參考網址為：http://blog.blueshop.com.tw/petlife/

只要在<head></head>標籤間加入下面語法即可：

<style type="text/css">
<!--
td {word-break:break-all}
-->
</style>