在IE與FF的一些設計限制

PRB： 錯誤設定 table.innerHTML 在 Internet Explorer 中
table 的限制，在不同瀏覽器中的問題較大，需要另外處理~

IE中Table、 thead、tbody的innerHTML屬性是唯讀的!!
若用

document.getElementById("tablename").innerHTML = "XXXXX" ;

IE就會跳出「執行階段錯誤」.... ~~

另外要注意的是 table與 tr標籤元素，不能用innerHTML方式賦值，但.. td標籤是可以的喔!

在IE與FF的一些設計限制(設定css屬性、註冊事件、checkbox)

在FF與其他瀏覽器(不含IE)

1.若要設定元素的class屬性，可以用 setAttribute方法來設定，如下
var inputElmt = document.createElement('input');
inputElmt.setAttribute('class', 'column');

但IE不吃這套，而吃 className 屬性名稱，如下
inputElmt.setAttribute('className', 'column');

所以 ~完整解決方法
var inputElmt = document.createElement('input');
inputElmt.setAttribute('className', 'column');　
inputElmt.setAttribute('class', 'column');

寫上兩個～不需要另外辨別瀏覽器！


2.若要為其加入事件
if(document.all)　//for IE
{
inputElmt.onclick = function(){ pantosetedArea(this.value) ; };
}
else inputElmt.setAttribute('onClick', "pantosetedArea(this.value)");

其中pantosetedArea（參數）是自訂函式

3.另外，若要產生預設勾選的checkbox

function createInputcheck(elmtName,elmtValue) {

elmtName = elmtName ? elmtName : '';
elmtValue = elmtValue ? elmtValue : 'yes';
var ischecked = (elmtValue=='0')? "false" : "true" ;

var inputElmt = document.createElement('input');
inputElmt.setAttribute('type', 'checkbox');
inputElmt.setAttribute('name', elmtName);
inputElmt.setAttribute('value', elmtValue);
if(elmtValue=="yes") inputElmt.setAttribute('checked', ischecked);
inputElmt.setAttribute('onClick', "checkSMS(this)")
inputElmt.setAttribute('class', 'column');
return inputElmt;
}
var sendSMSInput = createInputcheck('sSMS');
var contentTdM = document.createElement('td');
contentTdM.appendChild(sendSMSInput);

var contentTr = document.createElement('tr');
contentTr.appendChild( contentTdM );

sendSMSInput.setAttribute('checked', true);

在FF中，函式中的此行 if(elmtValue=="yes") inputElmt.setAttribute('checked', ischecked);會馬上成立，但在IE中，要為checkbox 賦值，必須等到 appendchild後才可以操作checkbox 賦值

javascript 陷阱

當form裡頭有 sunmit按鈕時 如下


從外部函式觸發送出~ document.gegister.submit()

會發生 document.form.submit() is not a function 的錯誤~
解決方法就是把form裡頭的 submit弄掉就行了

在IE與其他瀏覽器中動態設定class屬性

有時候需要動態改變元素的class屬性
例如~ 點選完月曆日期連結後，要顯示點選日期的背景顏色~

Firefox中通常使用
var element = document.getElementById("elementID")
element.setAttribute("class","styleClass") ;
就可以了~ 但IE與Firefox中設定的方式有差異喔~

在IE中要用
element.setAttribute("className","styleClass");
因為IE只識別 " className"~

各大瀏覽器 javascript引擎比較

2008年，Javascript引擎逐漸成為流覽器領域的競爭焦點。
Webkit6月發佈了SquirrelFish引擎，然後SquirrelFish Extreme也出現。
Firefox8月發佈了TraceMonkey，
Google9月隨Chrome發佈了V8，
Opera的Futhark以及今年2月發佈了Carakan，
3月蘋果在Safari 4 beta中發佈了Nitro引擎。
IE 的Trident（MSHTML）於於四月發佈JavaScript5.8 (http://www.ithome.com.tw/itadm/article.php?c=54457)

性能比較
http://www.fwvv.net/info/2008/09/05/20080905-67045.shtml
http://pingyeh.blogspot.com/2008/09/google-chrome.html

技術文章:學習javascript必看

使用物件導向技術來建立進階 Web 應用程式
本文探討:

• JavaScript 為一原型語言
• 使用 JavaScript 設計物件導向程式
• JavaScript 的程式設計技巧
• JavaScript 的未來

參考

AJAJ, PHP JSON Javascript

javascript裡物件還有陣列(js的陣列其實也是物件)的一種簡略表示方法->JSON

什麼是 JavaScript

JavaScript

是一種直譯式語言，它可以被嵌入 HTML 的檔之中。可以用來處理一些畫面的特效，例如變換圖片、彈出式的選單、電子時鐘、拼圖遊戲等。不同於伺服器端腳本語言，例如PHP與ASP，JavaScript是client端腳本語言，其原始碼在發往客戶端執行之前不需經過編譯，而是將文字格式的字元代碼發送給瀏覽器由瀏覽器解釋執行，也就是說JavaScript是在用戶的瀏覽器上運行，不需要伺服器的支援而可以獨立運行，隨著網頁下載到你的電腦後，便會自動執行這些程式來做出特效，通過 JavaScript 可以做到回應用戶的需求事件（如表單的輸入），這樣當一位使用者輸入一項資訊時，它不需要通過網路傳送到伺服器端進行處理再傳回來的過程，而可以直接在用戶端進行事件的處理。但因為各家瀏覽器的不同，寫程式時要注意到相容性的問題，比方說獨大的IE就單純只參考W3C的規範，自訂自己的標準，寫程式時要特別注意~

優點是:

可以減少對伺服器的負擔。而隨著伺服器的強壯，雖然現在的程式員更喜歡運行於伺服端的腳本以保證安全，但JavaScript仍然以其跨平台、容易上手等優勢大行其道。

缺點是:

解釋語言的弱點是安全性較差，而且在JavaScript中，如果一條執行不了，那麼下面的語言也無法執行。而且由於每次重新載入都會重新解譯，載入後，有些代碼會延遲至運行時才解譯，甚至會多次解譯，所以速度較慢。

Javascript與Java

　　JavaScript 和 Java 很相似，但它們卻是完全不同的語言！ Java 是由 Sun Microsystem 公司開發的一種面向物件的程式設計語言，類似於C++，它需要多種編譯器和支援檔才能運行；但於 C++ 不同的是，Java 可以獨立於任何操作平臺，因此它就在當今 Internet 網路各種操作平臺的基礎上得以迅速發展。但它是一種比 JavaScript 複雜得多的標準程式語言。JavaScript 則是相對容易瞭解的函數式語言，JavaScript承襲了Java與Perl的語法，JavaScript 撰寫人員可以不那麼注重編程技巧，例如宣告所有的變數、類和方法，您也不必關心諸如 public、 private 或 protected 之類的費解的東西；更重要的是，它只能存在於一個 HTML Script中，而且只有在裝入一個相容的瀏覽器時才能運行，所以許多 Java 的特性在 JavaScript 中並不支持。現在，JavaScript 完全相容於 ECMA-262 標準（歐洲電腦製造協會的 JavaScript 標準）；如需瞭解的更多資訊，請參閱 Netscape 的有關 Netscape JavaScript 的介紹（微軟也有一個 JavaScript 的變種，稱之為 JScript）。

因 為Javascript與Java都可以在網頁上做出動態效果，而且JavaScript還可以控制網頁上的Java Applet，所以可以互相搭配。此外，他們也都能配合伺服端程式，做出一些特別的東西；例如Google Map就利用了JavaScript和後端程式的配合，讓地圖上每一格的圖片可以在使用者移動到看到它時才開始載入，以節省流量；此外，Google Mail和Yahoo!Mail的收件者裡打了一個字，通訊錄中以那個字為開頭的帳號就會出現在下方讓你選，這也是一樣的應用。這種技術，稱為AJAX。

JavaScript直譯式語言

編譯語言例 如Java。Java的源代碼在傳遞到客戶端執行之前，必須經過編譯，因而客戶端上必須具有相應平台上的模擬器或解釋器，它可以通過編譯器或解釋器實現 獨立於某個特定的平台編譯代碼的束縛。但是它必須在服務器端進行編譯，這樣就拖延了時間。但因為已經封裝，所以能保證安全性。

因為程式需要編譯後才能用，故就會牽涉到編譯器、連結器、函式庫 .... 等等各式各樣的跨平台問題，等著我們去傷腦筋。

然而，另外有一類的語言所寫出的程式是不需要「編譯」的，稱之為「直譯式語言」，這類語言只需要一個直譯器 (interpreter) 來做程式碼的翻譯，就可以完成我們想做的工作。故使用直譯式語言顯然就單純許多，比較沒有跨平台方面的問題。

語法特色~
JavaScript 是一種動態資料類型語言，也就是說，當聲明一個變數時不必指定資料的類型，當程式執行時它會自動將其轉換為所需要的類型。而當在一個運算式中將一個字串類型的值和數值型的值進行“+”運算時，JavaScript 會將數值轉換為字串

見鬼了 parseInt('08')

今天月曆顯示 8號 9號 應該 要出現連結變色才對~
月曆語法應該沒有問題啊~ 抓蟲結果.. 無解~?!!

alert("parseInt('10') = "+parseInt('10') + " parseInt('09') = "+parseInt('09')+"  parseInt('07') = "+parseInt('07')+"  parseInt('03') = "+parseInt('03'));

alert出來的結果是:
parseInt('10') = 10 parseInt('09') = 0 parseInt('07') = 7 parseInt('03') = 3
怎麼會這樣~

----------------------------------------------------------------------------------
原來啊~~

parseInt
語法
parseInt(numString, [radix])

描述: 轉換型別為string的數字，變成型別為number的數字
參數 :

• radix為 option，表示"進制"；
• numString有幾個可能性:

1. 前面部分是'0x' 的字串會被當作16進制，
2. 如果前面是'0' 的字串則被當作8進制。
3. 所有其它字符串都被當作是10進制。
4. 如果前面是無法解析的數字，比如XYZ ，則會顯示 'NaN'。

所以.. 08 09 被當作8進制~才會映出 '0' ~ 怪怪
因此~只要parseInt(numString, 10) 就好了~~

IE快取問題

再使用FF都沒問題的，但IE問題卻發生了~
載入的檔案沒有更新，在HTML裡已經宣告過標頭不快取了~但還是硬生生被鎖住，
按Ctrl+ F5，怪哉~發現居然還是讀到舊檔...
想想...我的程式是透過連結SERVER上的php檔來抓資料，所以就只要改PHP檔的標頭就好了吧~果然~ 一試OK~
如果有欲到IE快取問題，可以根據不同的需求，來做避免快取的動作吧~

以下是在不同檔案的避免快取辦法~

可以在HTML裡

<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<META HTTP-EQUIV="EXPIRES" CONTENT="Mon, 22 Jul 2002 11:12:01 GMT">
<META HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE">

在JSP裡:

要連結的網址後面加參數，名稱不一樣，瀏覽器就會被騙過去再載一次

window.location.href='linkpage.jsp?t='+new Date().getTime();

在PHP裡

程式碼最前面加上:

header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

在CSS連結~
簡易克服 CSS 被瀏覽器快取(Cache)的問題

參考 JSP: 避免用戶端快取網頁內容的幾種方法比較 裡面有幾個方法的測試

gdownload函式

寫網頁時，動態載入的函式使用的是google API，要注意，因為是非同步的方式，所以要處理資料的程式，應該要確保為request後所得到的資料的後面，才不會發生，要把資料秀出來時卻說資料未定義~

http://coolersport.info/csite/index.php?a=CDownloadUrl，這是人家寫好的，具有簡易判斷瀏覽器與XML識別，可以看做是gdownload()拆解~

暫放

簡易CSS語法教學，不含排版部分。新手適用!
CSS 語法教學

正規表達式，PHP繼承*NIX的一貫傳統，完全支援正規表達式的處理，split("-",$xx)函式是其中一例
PHP程式設計講義區

參考 Neo 's Blog，下面這篇提供了好幾個日期選擇器..
[Javascript] 免費、直覺的日期選擇元件

PHP與MySQL實務運用

新娘秘書專區 這個要講一下，這是個人Blog，重點不是在新娘..是在右下角的月曆，樣式蠻喜歡的~看了一下源碼是yahoo的API ..

問題是這樣的~
網頁一載入，就要有個日曆秀出哪幾天有資訊，點擊有資訊的那幾天會再秀出所有的時間點，
方法是用資料庫搜尋的方式, 先判斷當月哪幾天有資訊，if有，變更日期為可連結，點擊連結，責執行非同步下載當天資訊，再載入下拉式選單。

首先，google了關鍵字月曆、行事曆，但沒找到適合的，幾乎都是找到修初登入網頁時的當月月曆，後來看到"日期選擇器"，是用來讓使用者方便點擊來輸入生日等日期資訊用的，還是找不到適合的，
而這些都是人家做好的，有的是直接在網頁裡嵌入這些原碼或者是引用JS檔，但如要與資料庫連線，應該就不提供了，原本想偷懶的，但看到程式碼..好多啊~ 所以看了這麼久，只好自己寫了，
從最簡單的NVU這個IDE下手，NVU有提供一個月曆元件，也是只有提供最簡單的秀出當天日期，

作修改的話，首先要產生<< >> 兩個連結， 就是可以點擊上一個月份 下一個月分，
第二步，連結資料庫秀出哪幾天有資訊
第三部，寫javascript 動態載入所點擊之當天日期內所有時間點資訊

而月曆寫法，應該都大同小異，
用date()得到本機日期時間，判斷是否為閏年，計算本月第1號是在星期幾，在之前的表格都設為空，判斷月曆的列數，印出整個月~

比較要注意的就是，日期函式中，getMonth()函式所得的月份要+1 數字才對。

javascript 日期函式
Javascript实例教程(15) 日期函数



PHP程式設計講義區


以下是時間選擇器~

[Javascript]Time Picker視覺化的時間選擇器

http://jsgears.com/thread-134-1-1.html

http://www.study-area.org/coobila/tutorial_468.html2

http://blog.darkthread.net/blogs/darkthreadtw/archive/2007/09/04/code-javascript-time-picker.aspx

javascript 物件導向宣告

javascript控制html元素顯示/隱藏

1。編寫js函數

< script type="text/javascript">

function display(id){

vartraget=document.getElementById(id);
if(traget.style.display=="none"){
traget.style.display="";
}else{
traget.style.display="none";
}
}
< /script>

2.要顯示/隱藏的html元素加上id屬性

< table>

< tr id="menu" >

< td>控制這個tr的顯示/隱藏< /td>

< /tr> < /tr>

< /table> < /table>

3，添加按鈕，鏈接等觸發js函數

< input type="button" onclick="display( 'menu' )" value="顯示/隱藏"/>

< a href="#" onclick="display( 'menu' )" >顯示/隱藏< /a>
javascript顯示隱藏層
< div id="" style="display:none;">廣告< /div>
< input type="botton" onclick="函數">

< script language=javascript>
function函數{
if(thisdiv.style.display=='none'){
thisdiv.style.display=""
}
else
thisdiv.style.display="none"
}

< /script>

你先給div取個ID=“AA”thisdiv=AA
javascript隱藏/顯示表單對象


[SCRIPT language=javascript]
function expandIt(el) {
whichEl =document.getElementById(el)
if (whichEl.style.display == 'none') {
whichEl.style.display = '';
}
else {
whichEl.style.display = 'none';
}
}

[/SCRIPT]

el是對象的id，不管是tr或者table等等先設置一下id，然後進行調用。

例：

[a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a]

[tr id="ttchild"][td width="18"]Example[/td][/tr]

使用時把[]變成< >

javascript控制頁面控件隱藏顯示的兩種方法

javascript控制頁面控件隱藏顯示的兩種方法，方法的不同之處在於控件隱藏後是否還在頁面上佔位方法一：
document.all["PanelSMS"].style.visibility="hidden";
document.all["PanelSMS"].style.visibility="visible";

方法二：
document.all["PanelSMS"].style.display="none";
document.all["PanelSMS"].style.display="inline";
方法一隱藏後頁面的位置還被控件佔用只是不顯示類似於.net驗證控件的Display=Static
方法二隱藏後頁面的位置不被佔用類似於.net驗證控件的Display=Dynamic

AJAX概述

AJAX 也不是一項單獨的技術，它是由一堆現有的技術所組成的集合
它的組成技術有：
(1)XHTML(或者 HTML)加上CSS 來作為資料的呈現。
(2)利用DOM 以及JavaScript 來進行存取資料(大多為XML)的處理。
(3)利用XMLHttpRequest 物件與遠端的Web server 進行非同步的資料交換。

而AJAX 核心技術為XMLHttpRequest，其物件方法與屬性列於下

字元分割

JAVASCRIPT提供 split(',') //以逗點做字串分割

ex:
var stringArray = "123,456,789" ;
var getElement = stringArray.split(',')[1] ;

getElement 輸出即為 456 ~~~


PHP 提供 explode() //可以用特定字元切割字串，並存入陣列中

語法： ＄要被存入的陣列變數 ＝ explode("分隔符號",要被切割的字串);
ex :
$engWords = "abc,def,ghi,jkw" ;
$words = explode(",", $engWords);
echo $words[0]; // abc
echo $words[1]; // def


ref: http://tw.php.net/explode