廣告聯播

顯示具有 Java Script 標籤的文章。 顯示所有文章
顯示具有 Java Script 標籤的文章。 顯示所有文章

2013年7月3日 星期三

JavaScript 動態陣列方法

From: Polin Wei

 JavaScript 的動態陣列方法正確的作法如下:

var i = 0;
var aryRow = new Array();
$.each( row, function( key, value ) {
    aryRow[i] = new Array();
    aryRow[i]['key']=key;
    aryRow[i]['value']=value;
    i++;
});


錯誤的寫法:

var i = 0;
var aryRow = new Array();
$.each( row, function( key, value ) {
    var aryRow[i] = new Array();
    aryRow[i]['key']=key;
    aryRow[i]['value']=value;
    i++;
});

2010年8月12日 星期四

Datetime Picker 兩款 jQuery 的日期時間選擇器

From: Polin Wei

撰寫網頁程式時,日期選擇器是很常見,但要有日期與時間同時選擇的 javascript 還有點難找到,找到了兩款可供開發網頁時使用。

■ Date-Time-Picker with jQuery UI Datepicker
評論:在一般的網頁上沒有問題;但用在 XOOPS2 的網頁上,IE 流覽器在流覽時,CSS 的設置有些問題。
■ DateTimepicker
評論: IE 、FireFox 流覽在一般網頁或 XOOPS 網頁時均正常。


繼續詳細閱讀

2009年5月7日 星期四

[FCKeditor] 用 Java Taglib 使用 FCKeditor

From: Polin Wei

FCKeditor 是所見即所得(WYSIWYG)的線上編輯器, 支援多國語言, 多種瀏覽器支援, 可更換SKIN,還可以用JavaScript控制按鈕,功能十分多樣化,外掛的功能也是十分強大,支援瀏覽器管理檔案...等多樣化外掛。

支援語言: ASP.Net, ASP, ColdFusion, PHP, Java, Active-FoxPro, Lasso, Perl, Python
支援流覽器: IE, FireFox, Safari, Opera, Google Chrome, Camino
支援平台: MS Windows , MAC , Linux
版權: under the GPL, LGPL and MPL open source licenses

在 Java 的平台上有一個很好用的工具 Taglib , 可以讓你的 jsp 程式簡單化.配置如下

FCKeditor: FCKeditor_2.6.4.zip
FCKeditor.Java: fckeditor-java-2.4.1-bin.zip
FCKeditor.Java 文件參考: http://java.fckeditor.net/
SLF4j: slf4j-1.5.6.zip
Application Server: Tomcat 6.x.x

step01:
在 WebContent 目錄下建立一個目錄 fckeditor , 並將 FCKeditor_2.6.4.zip 解開的資料放在這個目錄下.

step02:
解開 fckeditor-java-2.4.1-bin.zip , 將 fckeditor-java-core-2.4.1.jar, 及 lib 目錄下的三個檔案 commons-fileupload-1.2.1.jar, commons-io-1.3.2.jar, slf4j-api-1.5.2.jar , 複製到 WEB-INF\lib

step03:
解開 slf4j-1.5.6.zip , 將slf4j-api-1.5.6.jar, slf4j-simple-1.5.6.jar 複製到 WEB-INF\lib

step04:
在 WEB-INF\web.xml 檔增加下列程式碼
<servlet>
 <servlet-name>Connector</servlet-name>
 <servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>
 <load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Connector</servlet-name>
  <url-pattern> /fckeditor/editor/filemanager/connectors/*
  </url-pattern>
</servlet-mapping>


step05:
在 WEB-INF 目錄下增加一個檔案 FCKeditor.tld , 內容如下:
<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/j2ee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
 http://java.sun.com/xml/ns/j2ee/web-jsptaglibrary_2_0.xsd"
 version="2.0">
 <description>
  The FCKeditor Tag Library offers a very convenient way to create
  several FCKeditor instances with different configurations.
  Additionally, you can check for user-based capabilities.
 </description>
 <display-name>FCKeditor Tag Library</display-name>
 <tlib-version>2.4</tlib-version>
 <short-name>FCK</short-name>
 <uri>http://java.fckeditor.net</uri>
 <tag>
  <description>
   Creates a FCKeditor instance with the given parameters. Any
   parameter except instanceName which is empty or contains
   whitespaces only will be ignored.
  </description>
  <display-name>editor</display-name>
  <name>editor</name>
  <tag-class>net.fckeditor.tags.EditorTag</tag-class>
  <body-content>JSP</body-content>
  <attribute>
   <description>
    The unique instance name under which the editor can be
    retrieved through the API.
   </description>
   <name>instanceName</name>
   <required>true</required>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <attribute>
   <description>
    Width of the FCKeditor instance in the browser window.
   </description>
   <name>width</name>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <attribute>
   <description>
    Height of the FCKeditor instance in the browser window.
   </description>
   <name>height</name>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <attribute>
   <description>
    The toolbar set which shall be displayed to the user.
   </description>
   <name>toolbarSet</name>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <attribute>
   <description>
    The path/folder in which the editor is deployed under
    the given context. The context path will be attached
    automatically. (e.g. '/fckeditor')
   </description>
   <name>basePath</name>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <attribute>
   <description>
    Passes any content to the FCKeditor document. Use the
    jsp:attribute tag for large inline content. \r, \n, and
    \t will be truncated.
   </description>
   <name>value</name>
   <rtexprvalue>true</rtexprvalue>
   <type>java.lang.String</type>
  </attribute>
  <example><![CDATA[
<FCK:editor instanceName="editorDefault" height="500px" />]]>
  </example>
 </tag>
 <tag>
  <description>
   Sets a config property of the editor to the supplied value.
   You may provide any attribute you want for the editor. Set
   at least one attribute per tag or several attributes with
   one tag. This tag can only be nested within an editor tag.
   For all configuration options click
   <![CDATA[<a href="http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Configuration/Configuration_Options">here</a>]]>.
  </description>
  <display-name>config</display-name>
  <name>config</name>
  <tag-class>net.fckeditor.tags.ConfigTag</tag-class>
  <body-content>empty</body-content>
  <dynamic-attributes>true</dynamic-attributes>
  <example>
   <![CDATA[
<FCK:config SkinPath="/skins/silver/" AutoDetectLanguage="true" />]]>
  </example>
 </tag>
 <tag>
  <description>
   Displays session-dependent and compatibility-related
   information. This tag is intended for developers only.
   Response messages cannot be localized, they are English
   only.
  </description>
  <display-name>check</display-name>
  <name>check</name>
  <tag-class>net.fckeditor.tags.CheckTag</tag-class>
  <body-content>empty</body-content>
  <attribute>
   <description>
    Provide the feature name you want to check. Valid
    features are [FileUpload, FileBrowsing,
    CompatibleBrowser]
   </description>
   <name>command</name>
   <required>true</required>
   <type>java.lang.String</type>
  </attribute>
  <example><![CDATA[
<FCK:check command="FileUpload" />
<FCK:check command="CompatibleBrowser" />]]>
  </example>
 </tag>
</taglib>


step06:
建立一個 fck.jsp 來測試, 程式碼如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="show.jsp" method="post" target="_blank">
<FCK:editor instanceName="fckEdit"  width="700" height="500"  toolbarSet="Default" />
<input type="submit" value="Submit">
</form>


</body>
</html>



成果如下圖:


fckeditor-java-2.4.1 的設定比較簡便, 就連上載檔案, 也只要在step04: 設定好 servlet : Connector 就可以了. 不需要太繁瑣. 不過若要上載檔案, 不要忘了要在 classpath 建立一個檔案 fckeditor.properties , 內容如下:
fckeditor.toolbarSet=Basic
connector.userActionImpl=net.fckeditor.requestcycle.impl.UserActionImpl
connector.userFilesPath=/userfiles
connector.resourceType.file.extensions.allowed=txt|doc
connector.resourceType.image.extensions.allowed=jpg|png


這樣才不會有問題. 參數說明:
connector.userFilesPath : 是伺服器上要存放檔案的地方.如 /userfiles
connector.resourceType.file.extensions.allowed : 可以限制上傳到/userfiles/file 目錄的附加檔名有那些
connector.resourceType.image.extensions.allowed: 可以限制上傳到/userfiles/image 目錄的附加檔名有那些

因為上載的檔案只能存在這個 application WEBcontent 的目錄內, 所以若將 java 打包成 war 檔在 JBoss 上使用, 則會有問題.

2009年4月1日 星期三

[JAVA] Tag 自訂標籤第一支程式

From: Polin Wei

上一篇 [JAVA] Tag 自訂標籤簡介 大致介紹了 Tag 自訂標籤 的方便性, 及如何使用, 現在就來看如何撰寫 Tag 自訂標籤 及 如何在 JSP 網頁上, 使用自己撰寫的 Tag 標籤

Step1: 撰寫 Tag 的 Java 程式檔: jsDemoTag.java
package com.demos.tag;

import javax.servlet.jsp.JspException;
import javax.servlet.jsp.JspWriter;
import javax.servlet.jsp.tagext.BodyContent;
import javax.servlet.jsp.tagext.BodyTagSupport;

public class jsDemoTag extends BodyTagSupport {

    
    @Override
    public int doEndTag() throws JspException {
        // TODO Auto-generated method stub
        try {
            StringBuffer sb = new StringBuffer();
            // 利用 pageContext Object 取得 JSP 網頁輸出資料流 .getOut() , 才能將產生的 Java Script 寫到客戶端
            JspWriter out = pageContext.getOut();

            // 利用 BodyContent Objext 及 getBodyContent() 函式取得資料
            BodyContent bodyContent = getBodyContent();

            if( bodyContent!=null ){
                String bodyMessage = bodyContent.getString();
                sb.append("<script language=\"javascript\"> \n  \n");
                sb.append("alert('"+ bodyMessage.trim() +"');");
                sb.append("  \n</script> \n");
               
                // 將資料寫回客戶端
                out.write(sb.toString());              
            }
           
        } catch (Exception e) {
            // TODO: handle exception
            System.err.print(e);
        }
        return EVAL_PAGE;
    }   
}



Step2: 建立標籤程式庫描述元 demo.tld , 並放在 WEB-INF 目錄下
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE taglib PUBLIC "-//Sun Microsystems, Inc.//DTD JSP Tag Library 1.1//EN" "http://java.sun.com/dtd/web-jsptaglibrary_1_1.dtd" >
<taglib>
  <tlibversion>1.0</tlibversion>
  <jspversion>1.1</jspversion>
  <shortname>demo</shortname>  
  <info>Demo Customization Tag </info>
  <tag>
    <name>message</name>
    <tagclass>com.demos.tag.jsDemoTag</tagclass>
    <info>Display Alert Box</info>
  </tag>
</taglib>


tld檔中, 在<attribute> </attribute>中可設定 name, required, rtexprvalue 等三個屬性條件,<required>用來指定屬性是否一定要使用,若設定為true,則一定要使用指定的屬性,設定為false表示屬性為可選的(optional),<rtexprvalue>用來表示屬性指定時,是否可以使用表示式等動態屬性,例如 EL ${param.who}這樣的指定,如果設定為true表示可以,設定為false表示必須為靜態屬性。


Step3: 建立 JSP 網頁 HelloTag.jsp 來測試
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="uDemo"  uri="/WEB-INF/demo.tld"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo Customization Tag Library</title>
</head>
<body>
<uDemo:message>Hello Tag !! This is first Tag Library</uDemo:message>
</body>
</html>

2009年1月19日 星期一

[JQuery] Java Script 中 物件(objects) 與 陣列 (arrays) 的區分與值的取得

From: Polin Wei

在 Java Script 中, 物件 objects 與 陣列 arrays , 常會令人困惑, 查了一下 JQuery 的官方網站. 它所舉的例子就淺而易懂了.

整理一下 物件(objects) 與 陣列 (arrays) 的區分如下:

物件(objects):

1. 以 {} 包含
2. 有 Key & Value , 如: var obj = { one:1, two:2, three:3, four:4, five:5 };

陣列 (arrays):
1. 以 [] 包含
2. 只有 Value , 但內含 index , 如: var arr = [ "one", "two", "three", "four", "five" ]; 所以 arr[0] = one , arr[1] = two ...

知道這樣的特性後, 就可以用 JQuery 的函數 $.each() 來取得 物件(objects) 與 陣列 (arrays) 的值了. 再來看一下程式碼:
<script>
$(document).ready(function(){

    var arr = [ "one", "two", "three", "four", "five" ]; ==> 這是陣列 , 陣列只有 , 內含 index
    var obj = { one:1, two:2, three:3, four:4, five:5 }; ==> 這是物件 (one,two,three,four,five) 是 Key , 相對應的 為 (1,2,3,4,5)

   jQuery.each(arr, function() {
      $("#" + this).text("My id is " + this + ".");
      return (this != "four"); // will stop running to skip "five"
   });

   jQuery.each(obj, function(i, val) {
      $("#" + i).append(document.createTextNode(" - " + val));
   });

});
</script>


執行結果為
My id is one. - 1
My id is two. - 2
My id is three. - 3
My id is four. - 4
- 5

2008年10月14日 星期二

巴布(Buboo) 心情隨手貼

From: Polin Wei

  寫網誌...文筆沒有那麼豐富, 也沒有那麼多時間; 有時只是想隨手寫寫當時的心情, 有什麼工具可以留下當時那一點點思緒的發洩呢?

  不妨可以安裝 巴布(Buboo) , 註冊好帳號後, 登入巴布(Buboo) ->巴布工具 -> 留言版型,將程式碼複制到你的網站內,就可以了.



  成果就像下圖一樣

2008年10月6日 星期一

[DOM] W3C DOM 文件物件模型(Document Object Model,DOM)

From: Polin Wei

文件物件模型(Document Object Model,DOM)是給 HTML 與 XML 文件使用的一組 API。它提供了文件的結構表述(representation),讓你可以更動其中的內容及可見物。其本質是建立網頁與 Script 或程式語言溝通的橋樑。

[全球資訊網協會](World Wide Web Consortium,W3C)建立了 [DOM] 的標準,稱之為「W3C DOM」。在當今主要瀏覽器都已正確實作的情況下,W3C DOM 使強大、跨瀏覽器的應用程式成真。


  現在舉個 HTML檔案 實例來說明 DOM(Document Object Model,DOM)文件物件模型,這樣比較能瞭解。


W3CDOM.html

<html>
<head>
<script type='text/javascript'>
function showTd(){
   var nodes = document.getElementsByTagName("td");
   for(var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      alert(node.childNodes[0].nodeValue);
    }
}
function showTitle(){
   document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}
</script>
</head>
<body>
<input value="showTitle" onclick="showTitle();" type="button"><br>
<input value="showTDValues" onclick="showTd();" type="button"><br>


<div id="myTitle"></div>
<table>
  <tbody>
    <tr>
      <td>EmpID</td>
      <td>UserID</td>
      <td>UserName</td>
    </tr>
    <tr>
      <td>E0001</td>
      <td>Polin</td>
      <td>我</td>
    </tr>   
  </tbody>
</table>
</body>
</html>



  DOM 對 W3CDOM.html 檔案視為一個標籤文件,每個標籤視作一個節點,這些節點從<html>
標籤開始作為根標籤,上面的 W3CDOM.html 可以用下圖來表示(下圖中標示出相對於橘色tr節點的屬性):

PS:可以使用hasChildNodes()來測試目前的DOM節點物件是否有子節點。

  在JavaScript中可以使用document物件取得HTML文件中節點的值,如標籤上的id屬性id="myTitle",可以使用getElementById()並指定id名稱來取得節點的DOM物件,例如:

function showTitle(){
   document.getElementById("myTitle").innerHTML ="<h2>我與小崴崴</h2>";
}


  您也可以操作getElementsByTagName()並指定標籤名稱來取得節點,例如可使用以下的程式片段,顯示上例的表格文字內容:

function showTd(){
   var nodes = document.getElementsByTagName("td");
   for(var i = 0; i < nodes.length; i++) {
      var node = nodes[i];
      alert(node.childNodes[0].nodeValue);
    }
}


您可以使用DOM節點的innerHTML屬性來設定節點中的HTML內容,不過innerHTML並不是W3C DOM規範中的標準屬性,只是目前剛好大部份的瀏覽器都有支援,標準的作法是要懂得各種DOM上建立、設定節點的方法,可以深入瞭解這 innerHTML屬性。

2008年10月5日 星期日

[AJax] AJax 基本觀念與實作

From: Polin Wei

  AJax 技術是目前網頁流行的趨勢,在工作上也時常運用此技術.那什麼是 AJax 呢?節錄一段 WIKI 上的 AJax 文章如下:

AJAX全稱為「Asynchronous JavaScript and XML」(非同步JavaScriptXML),是一種創建互動式網頁應用的網頁開發技術。根據Ajax提出者Jesse James Garrett建議[1],它:

  • 使用XHTML+CSS來表示資訊;
  • 使用JavaScript操作DOM(Document Object Model)進行動態顯示及互動;
  • 使用XMLXSLT進行資料交換及相關操作;
  • 使用XMLHttpRequest物件與Web伺服器進行非同步資料交換;
  • 使用JavaScript將所有的東西繫結在一起。
  • 使用SOAPXML的格式來傳送方法名和方法參數。
對架構有興趣的網友再自行細讀.接下來我們要以實作來瞭解AJax的運作,在實作之前再說明一下, JavaScript要放在網頁中的兩種模式:

第一種:JavaScript 嵌入 HTML 中的作法,有下列兩種模式


A: <script type="text/javascript"> .code </script>
B: <script type="text/javascript" src="url"></script>


建議使用 B 為宜,因為這樣程式碼分離,閱讀及 Debug 都較為方便.

第二種:搭配 XHTML,若是搭配嚴謹的XHTML格式則必須使用 cdata 將 JavaScript 用註解格式封裝

<script type="“text/javascript”">
<![CDATA[//>
<!— Javascript Code here … //-->
<!]]>
</script>

AJAX 處理的順序大致可以分成下列五個步驟
1.Create the object : XMLHttpRequest
2.Set the readystatechange event trigger
3.Open the Request
4.Send the Request
5.Check the readyState property

整個架構圖如下:


  下面就舉實例來說明 AJax 這五個步驟,在這個實例中需要兩個檔案 AJax.html & HelloAjax.txt,透過 AJax.html 是來取得網站內 HelloAjax.txt 檔案裡的資料。

AJax.html 檔案

<html>
<head>
<script type='text/javascript'>
var myXmlHttp;
function createXmlHttpObj(){
if(window.XMLHttpRequest) {
myXmlHttp = new XMLHttpRequest();
} else if(window.ActiveXObject) {
myXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}

function handleStateChange(){
var txtresp;
var xmlresp;
if(myXmlHttp.readyState == 4) {
if(myXmlHttp.status == 200) {
//以純文字方式取回伺服器回傳資料
txtresp = myXmlHttp.responseText;
//以 XML 方式取回伺服器回傳資料
xmlresp = myXmlHttp.responseXML;

//5.Check the readyState property
if (txtresp) {
document.getElementById("myTxtResp").innerHTML = txtresp;
}
}
}
}

function sendRequest(){
// 1.Create the object : XMLHttpRequest
createXmlHttpObj();
if(myXmlHttp) {
// 2.Set the readystatechange event trigger
myXmlHttp.onreadystatechange = handleStateChange;

// 3.Open the Request
myXmlHttp.open('get', 'HelloAjax.txt');

// 4.Send the Request
myXmlHttp.send(null);

}else {
alert("您的瀏覽器不支援這個Ajax程式的功能");
}
}
</script>
</head>

<body>
<input value="click me(介紹 AJax 的功能)" onclick="sendRequest();" type="button"><br>
<a href="#" onClick="sendRequest();" >click me(介紹 AJax 的功能)</a>
<div id="myTxtResp"></div>
</body>
</html>


HelloAjax.txt 檔案

Hello AJax
這是由 AJax 技術取得伺服器後端 HelloAjax.txt 的檔案資料

參考:

AJax 基本觀念與實作

2008年8月22日 星期五

[教學] MyMiniCity 我的小城市 - PolinWei 巿

From: Polin Wei

  在別人的網誌上常看到下面這種圖示:





  一直不曉得那是要作什麼用的,一時興起就 google 一下,才知道那是 MyMiniCity。它號稱不需要註冊、不需要下載,只需要依靠網友的點擊就可以發展你的小城市。嗯!!看自己的城市慢慢發展起來的感覺好像滿有趣的,於是我就立即申請了一個 MyMiniCity 叫作: PolinWei City



  但問題來啦,難道只能連到PolinWei City看嗎? 不能放在自己的部落格內的話,這樣就沒什麼意思了。幸好已經有網友寫好 MyMiniCity 的 widget 了。基本的語法如下:


<script src="http://widgets.evenrain.net/swfobject.js" type="text/javascript"></script>
<script src=http://widgets.evenrain.net/myminicity.php?city=yourCityName&width=240&m=1&tr=1 type="text/javascript" charset="UTF-8"></script>



  上面的 yourCityName 要改成你自己的城巿名,其餘的參數如下
參數說明:

city:城市名稱 (必要參數)
width:widget 寬度 (數字就好,單位為 px,預設 165)
f1:標題的字體大小 (數字就好,單位為 px,預設 14)
c1:標題的字體顏色 (不需加 #,預設為 ffffff)
bg1:標題的背景色 (不需加 #,預設為 9dc55e)
f2:數據的字體大小 (數字就好,單位為 px,預設 12)
c2:數據的字體顏色 (不需加 #,預設為 000000)
bg2:數據的背景色 (不需加 #,預設為 c9fd79)

至於詳細的參數設定可以參考 Abend 的專案頁面

參考文獻: ABend 的[Widget] MyMiniCity 我的小城市

2008年8月21日 星期四

[Java Script] 用 Java Script 來作圖片的廣告輪撥

From: Polin Wei

今天工作時, 為了要讓使用者可以看圖片瞭解要公告的事項, 所以改寫了跑馬燈的 Java Script, 程式如下:

<script language="JavaScript">
<!--
var t = 500; // 顯示的時間
var tt = 0;
var ttt = 0;
var isOnPic = false;  => 判斷滑鼠是否在圖片上
var ry= 1;
function random_imglink(){
        var myimages=new Array()
        //以下放置要顯示的圖片.不夠的話自己加上
        myimages[1]="image01.png"
        myimages[2]="image02.png"


        //以下放置圖片相對的網址.不夠的話自己加上
        var imagelinks=new Array()
        imagelinks[1]="http://tw.myblog.yahoo.com/polinwei/"
        imagelinks[2]="http://polinwei.blogspot.com/2008/08/html.html"

        // alt 浮現視窗要顯示的文字
        var imagealt="new" Array()
        imagealt[1]="我與小崴崴的生活日記"
        imagealt[2]="用 HTML 語法讓圖片上也可以作連結"        
        
        var adv=document.getElementById("adv");    
        // 滑鼠若在圖片上時, 則不輪詢
        if (!isOnPic){
            ry=Math.floor(Math.random()*myimages.length);            
        }
        if (ry==0) ry=1

        adv.innerHTML = '<a onmouseover="isOnPic=true;" onmouseout="isOnPic=false;" href='+'"'+imagelinks[ry]+'"'+'target="_blank"><img src="'+myimages[ry]+'" width="530" height="250" border="0" alt=""'+imagealt[ry]+'">" </a>';
        ttt = 5*t;
        tt += ttt;
        setTimeout("random_imglink()", ttt);        
}
//-->
</script>


整個 HTML 檔案如下:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>資訊公告</title>
<script language="JavaScript">
<!--
var t = 500; // 顯示的時間
var tt = 0;
var ttt = 0;
var isOnPic = false;  => 判斷滑鼠是否在圖片上
var ry= 1;
function random_imglink(){
        var myimages=new Array()
        //以下放置要顯示的圖片.不夠的話自己加上
        myimages[1]="image01.png"
        myimages[2]="image02.png"


        //以下放置圖片相對的網址.不夠的話自己加上
        var imagelinks=new Array()
        imagelinks[1]="http://tw.myblog.yahoo.com/polinwei/"
        imagelinks[2]="http://polinwei.blogspot.com/2008/08/html.html"

        // alt 浮現視窗要顯示的文字
        var imagealt="""new""" Array()
        imagealt[1]="我與小崴崴的生活日記"
        imagealt[2]="用 HTML 語法讓圖片上也可以作連結"       
       
        var adv=document.getElementById("adv");   
        // 滑鼠若在圖片上時, 則不輪詢
        if (!isOnPic){
            ry=Math.floor(Math.random()*myimages.length);           
        }
        if (ry==0) ry=1

        adv.innerHTML = '<a onmouseover="isOnPic=true;" onmouseout="isOnPic=false;" href='+'"'+imagelinks[ry]+'"'+'target="_blank"><img src="'+myimages[ry]+'" width="530" height="250" border="0" alt=""""'+imagealt[ry]+'">""" </a>';
        ttt = 5*t;
        tt += ttt;
        setTimeout("random_imglink()", ttt);       
}
//-->
</script>
</head>

<body>

<div name="adv" id="adv">
    <script>
        random_imglink();
    </script>
</div>
</p>
</body>
</html>





2008年8月5日 星期二

[教學] How jQuery Works <<如何讓 jQuery 正常運作>>

From: Polin Wei

  jQuery 在前面的 [文章] 初談 jQuery 有大致的介紹,但對一般開始要學習 jQuery 的人來說,還是有點學習的障礙,今天就大概來說一下該如何快速進入 jQuery 的世界,若你對原文(英文)的閱讀是無障礙的,那你可以讀這一篇 Tutorials:How jQuery Works本篇也是參考這文章

   1. 首先建立一個新的網頁 HTML 檔案 jQueryDemo.HTML ,就像下面:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// Your code goes here
</script>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
</body>
</html>
  

  2. 在上面的檔案中編輯 src 的屬性,如果 jquery.js 的 JavaScript 檔案與這個網頁jQueryDemo.HTML 是同目錄的話,就不需修改,就像下面

 <script type="text/javascript" src="jquery.js"></script>
  
  若你有需要 jQuery 的檔案,則可以在 Downloading jQuery 取得

  3. 因為網頁在網路上讀取時,有時所有的 JavaScript 還沒有下載完畢,所以有時執行時會不如預期,為了避免這種情況發生,一般 JavaScript 的程式應該在 Document Ready 時才開始執行,為此,有兩種方法可以來解決:
方法一:

 window.onload = function(){ alert("abc") }

方法二:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
(document).ready(function(){
// Your code here
});

</script>
</head>


  至於 jQuery 的一些範例則可以參考 [文章] 初談 jQuery

[文章] Java Script 建立物件的方法

From: Polin Wei

方法一是:

  • var MyObject = function(){
  • /*Your Code Here*/
  • };


方法二是:

  • var MyObject = function(){
  • return{
  • /*Your Code Here*/
  • }
  • }();

範例: 建立一個 MyObject

MyObject = function() {
// private variables : 私有屬性或稱為區域變數
// private functions : 私有方法或稱為區域方法
// public space
return {
// public properties, e.g. strings to translate : 公有屬性或稱為公開變數

// public methods : 公有方法或稱為公開方法
init: function() {
alert('Application successfully initialized');
}
};
}();
實例如下:

  • MyObject = function() {
  • var myFirstName='WEI'; //私有屬性或稱為區域變數
  • var myLastName='Polin' ;
  • function getFirstName(){
  • alert(myFirstName);
  • }
  • function getLastName(){
  • alert(myLastName);
  • }
  • return {
  • NickName1: 'Super WEI', // public properties 公有屬性或稱為公開變數
  • NickName2: 'Good Luck',
  • init: function() {
  • alert(this.NickName1); //在Public zone裡面的需要使用this.xxxx來存取變數
  • alert(myFirstName); //在Public zone裡面的直接使用 xxx來存取 private zone裡面的變數
  • }, // end of init
  • other : function(){
  • alert(this.NickName2); //在Public zone裡面的需要使用this.xxxx來存取變數
  • alert(myLastName); //在Public zone裡面的直接使用 xxx來存取 private zone裡面的變數
  • } //注意結尾的,需要去除不然龜毛的IE會拒絕執行 end of other
  • }; // end of return
  • }(); // end of MyObject


有幾點重點要注意


第一個是變數的宣告方式:
Private zone的變數使用分號(;)隔開舉例如下:

  • var 變數1;
  • var 變數2;
但是在Public zone裡面的變數要使用逗號(,)隔開(註:其實這是JSON寫法的變型)舉例如下:

  • 變數1:變數1的值,
  • 變數2:變數2的值 //注意結尾的逗點在IE無法通過檢查


第二個是function(或稱方法)的宣告方式:
Private zone的使用方法如下:

  • function fun1(){
  • /*Your code HERE*/
  • };
  • function fun2(){
  • /*Your code HERE*/
  • };

在但是在Public zone的使用方法如下,(註:還這是JSON寫法的變型):

  • fun1: function() {

  • /*Your code HERE*/
  • },
  • fun2: function() {

  • /*Your code HERE*/
  • }


WordPress 架站必備外掛