2017 Java Script 應用範例

一. Java Script 簡介 :

JavaScript 是一個可以幫您在網站裡加入互動功能的程式語言（舉例來說，一個遊戲可能會在按鈕按下或資料被輸入
表單內時回應、動態更改樣式、以及展示動畫等）

JavaScript 是一個成熟的動態程式語言，應用於 HTML 文件(document)上時，就可以為網頁提供動態的互動功能。
JavaScript 是由 Mozilla project、Mozilla Foundation 和 Mozilla Corporation 的創辦人 Brendan Eich 所發明的。

你可以用 JavaScript 實現許多事情。你可以先從簡單的特性開始，如跑馬燈、相簿、動態版型、回應按鈕點擊等。
在你熟悉的這個程式語言以後，甚至可以製作遊戲、2D平面以及立體的圖像、資料庫系統等等的應用！

JavaScript 本身非常的簡潔，卻也充滿彈性，開發者們已經以 JavaScript 核心為基礎為她撰寫了相當多的工具，
讓各位可以感到事半功倍。這些工具包括：

內建在瀏覽器內的應用程式介面（Application Programming Interfaces，APIs）提供了多樣化的功能，像是動態產生
HTML 以及設定 CSS 樣式、擷取以及處理從使用者的網路攝影機錄下的影像、製作立體圖形或是聲音樣本。

第三方 API 允許開發者將他們的網頁與其他如 Twitter 或 Facebook 提供的內容合併在一起。

第三方框架和函式庫允許您將這些元件套用在您的 HTML 文件內，讓您可以迅速地建立網頁或應用程式。

出處 : MDN web docs moz://a Java Script 基礎
https://developer.mozilla.org/zh-TW/docs/Learn/Getting_started_with_the_web/JavaScript_basics

二. Java Script 學習資源與測試 :

https://www.w3schools.com 不僅僅是 Java Script 的重要學習網站, 也是所有前端網頁設計重要的學習網站, 上面可以
作很多的程式測試, 如下最簡單的 windows.alert() 的測試 :

(1) 點選您要測試的 Java Script 查看範例程式碼

(2) 點選 Try it Yourself 去看一下程式碼及執行的結果 :

這樣就可以快速的測試出 Java Script 執行後的結果, 若確定該 Script 是可以的, 您就可以直接將左邊的程式碼複製貼
上到您自行開發設計的網頁中, 這樣可以在開發階段快速查找 Script 也可以測試出結果.

三. Java Script 範例介紹網站 :

http://old4.yudans.net/javascript

http://mirlab.org/jang/books/javascript

四. 幾個會用到 Java Script 的客戶範例網站 :

http://www.minglake.com.tw

http://www.howardcenter.com.tw

http://www.duoimage.com.tw

http://www.easicolor.com

http://www.wwarc.tw

http://www.jamalady.com.tw

http://www.my-hiend.com

Java Script + CSS 在移動式裝置上面的應用

五. JAVA Script 網頁選單的應用說明 :

範例一 : http://www.sunee.com.tw (上一皮件選單)

使用圖片如下 :

image-top03-off.gif

image-top03-on.gif

image-top04-off.gif

image-top04-on.gif

image-top05-off.gif

image-top05-on.gif

使用 Java Script 程式如下 :

<script language="JavaScript">
<!--
function MM_swapImgRestore() { //圖片列表還原函數
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //圖片預載函數
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //物件尋找函數
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_swapImage() { //圖片切換函數
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

HTML 網頁內使用如下 :

(1) 先用 MM_preloadImages 將所有 on 的圖片載入到網頁中 
主要是採用 body 的 onLoad 事件

<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" background="image/bg-top.gif" 

onLoad="MM_preloadImages('image/image-top03-on.gif','image/image-top04-on.gif','image/image-top05-on.gif',
'image/image-top06-on.gif')">

(2) 再用 MM_swapImgRestore() 及 MM_SwapImage() 來將圖片更換
主要是採用 onMouseOut 及 onMouseOver

完整程式如下 :

<a href="index-main.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','image/image-top03-on.gif',1)"
target="mainFrame"><img name="Image3" border="0" src="image/image-top03-off.gif" width="97" height="34" alt="Company Profile"> </a>

<a href="product.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','image/image-top04-on.gif',1)"
target="mainFrame"><img name="Image4" border="0" src="image/image-top04-off.gif" width="109" height="34" alt="Products"> </a>

<a href="inquire.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','image/image-top05-on.gif',1)"
target="mainFrame"><img name="Image5" border="0" src="image/image-top05-off.gif" width="109" height="34" alt="Require"> </a>

<a href="contact.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','image/image-top06-on.gif',1)"
target="mainFrame"><img name="Image6" border="0" src="image/image-top06-off.gif" width="98" height="34" alt="Contact Us"> </a>

<img src="image/image-top07.gif" width="177" height="34">

範例二 : http://www.wujin.com.tw (中華民國五金工會)

六. Java Script 網頁資料檢測應用說明 :

範例一 : http://www.toyway.com.tw (東匯玩具)

使用 Java Script 程式如下 :

function check_input(field_name, field_size, message) {
  if (form.elements[field_name] && (form.elements[field_name].type != "hidden")) {
    var field_value = form.elements[field_name].value;

    if (field_value == '' || field_value.length < field_size) {
      error_message = error_message + "* " + message + "\n";
      error = true;
    }
  }
}

:
:
:
function check_password(field_name_1, field_name_2, field_size, message_1, message_2) {
  if (form.elements[field_name_1] && (form.elements[field_name_1].type != "hidden")) {
    var password = form.elements[field_name_1].value;
    var confirmation = form.elements[field_name_2].value;

    if (password == '' || password.length < field_size) {
      error_message = error_message + "* " + message_1 + "\n";
      error = true;
    } else if (password != confirmation) {
      error_message = error_message + "* " + message_2 + "\n";
      error = true;
    }
  }
}
:
:
:

function check_form(form_name) {
  if (submitted == true) {
    alert("這個表單已經送出，請按 Ok 後等待處理");
    return false;
  }

  error = false;
  form = form_name;
  error_message = "別急！別急！\n您的資料還沒填完喔！\n看看您漏掉哪些\n\n";

  check_radio("gender", "請選擇性別.");

  check_input("firstname", 2, "中文姓名不得少於 2 個字");
  check_input("lastname", 2, "暱稱不得少於 2 個字");

  check_input("dob", 10, "(例：05/21/1970)");

  check_input("email_address", 6, "電子郵件不得少於 6 個字");
  check_input("street_address", 5, "街道門牌號碼不得少於 5 個字");
  check_input("postcode", 3, "郵遞區號不得少於 3 個字");
  check_input("city", 3, "鄉/村鎮區不得少於 3 個字");
  check_select("zone_id", "", "請從下拉式選單中選取縣市");
  check_input("state", 2, "縣市最少必須 2個字");

  check_select("country", "", "請從下拉式選單中選取國別");

  check_input("telephone", 3, "電話號碼不得少於 3 個字");

  check_password("password", "confirmation", 5, "密碼不得少於5 個字", "密碼不符");
  check_password_new("password_current", "password_new", "password_confirmation", 5, "密碼不得少於
   5 個字", "新密碼不得少於5 個字", "密碼不符");

  if (error == true) {
    alert(error_message);
    return false;
  } else {
    submitted = true;
    return true;
  }
}

HTML 網頁內使用如下 :

(1) 先把 form 的 onSubmit 綁定到 check_form() 的 Java Script 函數

<form name="create_account" action="http://www.toyway.com.tw/create_account.php" method="post" 
onSubmit="return check_form(create_account);">

(2) 搞定收工 !!

範例二 : http://www.sunnyaroma.com.tw (旭麗純天然芳香舖)

七. Java Script 的搜尋引擎統計代碼 :

範例一 : http://www.pureuara.com.tw (純粹水晶)




使用 Java Script 程式如下 : 

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>

<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-879425-1");
pageTracker._trackPageview();
</script>

HTML 網頁內使用如下 :

(1) 直接將 Java Script 代碼貼到頁面內容就可以了

其他 Java Script 網路資源 :

1. Java Script 與前端程式設計入門自學參考
https://tw.twincl.com/javascript/*6731

2. Responsive Web Design (RWD) 響應式網站開發教決與心得
http://sweeteason.pixnet.net/blog/post/42130394

3. HTML 編輯軟體 KompoZer
http://kompozer.net