Javascript Widget入門學習是本文要介紹的內容，主要是來了解并學習Javascript Widget應用，一起來看詳細內容。復習一下兩個Javascript函數：

Javascript可以動態生成網頁代碼，比如：

document.write(’<div id=”photo”>123</div>’);  

這段代碼可以讓網頁里顯示出一個叫photo的層，里面還有數字123。

此外，Javascript可以動態改變網頁內容，比如這段代碼：

document.getElementById(’photo’).innerHTML=’abc’;  

就可以讓這個photo層里顯示abc，而不是原來的123了

別看這么一段小代碼，其實這就是整個widget的核心了

技術原理：

widget有3個重要部分組成：數據、外殼、腳本。

數據：就是你希望顯示出來的內容，比如你要顯示flickr上最近的照片，那么照片就是數據；

外殼：就是容納數據的容器，比如上述照片，你把他們包裹到一個叫photo的div里，那么這個div就是外殼。

腳本：腳本的作用是生成外殼，并把數據填充到外殼里，主要就是Javascript代碼，當然也可以帶一些css

所以，理論上，一個原始的widget代碼應該是這樣的：

<script type=”text/javascript”>//調用Javascript腳本  
document.write(’<div id=”photo”></div>’); //Javascript腳本生成外殼photo  
document.getElementById(’photo’).innerHTML=’abc’; //Javascript腳本把數據abc填充到外殼photo  
</script> 

是不是很簡單？是很簡單，可惜太長了，于是把上面四行代碼的中間兩行提取出來，復制放到一個wJavascript.Javascript文件里：

document.write(’<div id=”photo”></div>’); //Javascript腳本生成外殼photo  
document.getElementById(’photo’).innerHTML=’abc’; //Javascript腳本把數據abc填充到外殼photo 

這樣只需要調用一下就可以使用widget了：

<script type=”text/javascript” src=”wJavascript.Javascript”></script>  

好了，到這里你已經學會了最簡單的widget制作，快去實驗一下吧。

基礎進階：

那么，如果數據不是abc怎么辦呢？ 很簡單，把數據獨立出來就可以了。我們改造一下wJavascript.Javascript代碼：

document.write(’<div id=”photo”></div>’);   //利用Javascript建立photo層，生成外殼  
document.write(’<script type=”text/javascript” src=”widget.Javascript”></script>’); //Javascript填充數據 

數據就在widget.Javascript里，我們分析一下其代碼，只有一句：

document.getElementById(’photo’).innerHTML=’xxx’; 

這樣的話，要改變數據，只需要把widget.Javascript里的xxx換成任何內容即可，而無需改動wJavascript.Javascript

中級進階：

如果要自動動態改變數據xxx，只需要把widget.Javascript也做成動態的，以php為例，首先把wJavascript.Javascript修改一下：

document.write(’<div id=”photo”></div>’);   //利用Javascript建立photo層，生成外殼  
document.write(’<script type=”text/javascript” src=”widget.php?user=howard></script>’); //Javascript填充數據 

注意里面的widget.Javascript換成了widget.php，后面還跟了一串變量，這樣就可以顯示為howard量身定制的數據了，看看widget.php的代碼：

<?php 
Header( “Content-type: text/javascript”); //聲明文件類型為Javascript  
$user=$_GET['user']; //讀取user變量 (howard)  
echo “document.getElementById(’photo’).innerHTML=’hi, my name is $user’; “;  
//輸出動態內容(hi, my name is howard)  
?> 

到這里，我們已經可以根據不同變量來自動顯示不同的數據了。后面就很簡單了，把widget.php任意改造，讀取數據庫，可以輸出各種各樣關于howard的數據。

實戰應用：

事實上，實際應用中，wJavascript.Javascript也被改造成了動態文件，比如wsj.php，這樣你的用戶howard只需要在其blog里插入以下代碼，就可以真正實現個性數據調用：

<script type=”text/javascript” src=”http://domain.com/wJavascript.php?user=howard”> </script>  

wJavascript.php的內部代碼是這樣的：

<?php 
Header( “Content-type: text/javascript”); //聲明文件類型為Javascript  
$user=$_GET['user']; //讀取user變量 (howard)  
echo “document.write(’<div id=”photo”></div>’);”   //利用Javascript建立photo層，生成外殼  
echo “document.write(’<script type=\”text/javascript\” src=\”widget.php?user=$user\”></script>); “; //動態調用widget.php  
?> 

這樣，widget.php收到了user變量之后，就能顯示出howard的個性數據。

先寫到這，大家可以先回去測試一下。真正能用的widget，代碼和上面有很大區別，但是原理是相同的。

小結：剖析Javascript Widget入門學習的內容介紹完了，希望通過Javascript Widget應用內容的學習能對你有所幫助！