Embed Size (px)
Citation preview
測試在智慧手機模擬器上執行已經寫好的javascript 程式
1. 練習 1：到哪裡複製 JavaScript(js)/JavaApplet(java)網頁語法：...................................2
2. 執行 Server2Go，架站伺服器（可以執行 php網頁的 Apache伺服器）（測試網
址：http://127.0.0.1:4001/...）...............................................................................................3
3. 使用智慧手機模擬器(網頁版)：.Opera Mobile Emulator手機模擬瀏覽器（測試網
址：http://127.0.0.1:4001/...）...............................................................................................5
4. 練習 2：使用 dreamweaver來建立一個新網頁：製作漫天飛雪效果，並在 Opera手
機模擬器上來測試..................................................................................................................6
5. 練習 3：下載貓走路動畫，在手機模擬器上測試......................................................10
6. 練習 4：製作滑鼠移至圖片會淡化的效果..................................................................11
7. 練習 5：水平移動跑馬燈..............................................................................................16
8. 練習 6：防止偷圖（製作不能按右鍵下載圖片的效果）...........................................20
1. 練習 1：到哪裡複製 JavaScript(js)/JavaApplet(java)網頁語法：
方法 1：到 google，輸入關鍵字來搜尋網站，即可下載（幾乎都是免費的）搜尋關鍵字 1：JavaScript 教學搜尋關鍵字 2：js 教學搜尋關鍵字 3：JavaApplet 教學方法 2：幾個國內比較有名的網站網站建置百寶箱http://www.sphs.hc.edu.tw/webpages../unit_administration/computer/%D1%EA%E6%A2/%B8%C9%B8%EA%A4G%A9%BE/%B8%C9%B8%EA%A4G%A9%BE/41/Demon/%BA%F4%AF%B8%AB%D8%B8m%A6%CA%C4_%BDc%A1qhttp--dob_tnc_edu_tw-%A1r%C5w%AA%EF%B1z.htm
動力資訊網 http://www.powerpc.idv.tw/
OECSPACE網頁製作教學 http://www.hsiu28.net/
2. 執行 Server2Go，架站伺服器（可以執行 php 網頁的Apache 伺服器）（測試網址：http://127.0.0.1:4001/...）
下載官方版本（任何一版皆可，但若要使用資料庫 SQLite，或MYSQL的話，就要選有該功能的選項）
解壓縮，執行
結果：
所以，等一下要測試執行的網頁，就要放在：Server2Go\htdocs]目錄來執行測試的網址是：http://127.0.0.1:4001/ try.html （舉例：測試 try.html）
3. 使用智慧手機模擬器(網頁版)：.Opera Mobile Emulator手機模擬瀏覽器（測試網址：http://127.0.0.1:4001/...）
下載.Opera Mobile Emulator手機模擬瀏覽器，執行安裝
選 Launch，結果：
4. 練習 2：使用 dreamweaver 來建立一個新網頁：製作漫天飛雪效果，並在 Opera 手機模擬器上來測試
開啟新網頁，存檔 snow.html
到網站建置百寶箱http://dob.tnc.edu.tw/
單元：選擇『java script』
http://dob.tnc.edu.tw/themes/old/showPage.php?s=3519&t=6&at=9
先看看範例
使用方法步驟 1 ： 複製程式碼onload="snow();"
貼到<body >的裡面即可
步驟 2 ： 複製程式碼<script type="text/javascript">// 程式作者：風痕影（[email protected]）// 作者網站：風痕水影（http://hit1205.blogdns.org/）// 製作日期：2004年 11月 15-17日// 更新日期：v1.1 2004年 12月 25日n=6; // 雪花數目wind=0; // 風力re=60; // 更新vy=4; // 雪花速度vx=4; // 搖晃程度img="http://dob.tnc.edu.tw/authorHD/1/snow.gif"; // 圖檔img_h=30; // 雪花高h=250; // 效果範圍高w=300; // 效果範圍寬for(i=0;i<n;i++){document.write("<div id=\"snow"+i+"\" style=\"position:absolute;top:-"+(Math.random()*h+img_h)+"px;left:"+Math.random()*(w-img_h)+"px;\"><img src=\""+img+"\" border=\"0\"></div>");} function snow(){
for(i=0;i<n;i++){dgs=document.getElementById("snow"+i).style;if((parseInt(dgs.top)<h)&&(parseInt(dgs.left)<w)&&(parseInt(dgs.left)>-
img_h)){if(Math.round(Math.random())==1){o=1;}else{o=-1;}dgs.top=parseInt(dgs.top)+vy+"px";dgs.left=parseInt(dgs.left)+Math.random()*vx*o+wind+"px";}
else{dgs.top=-(Math.random()*h+img_h)+"px";dgs.left=Math.random()*(w-img_h)+"px";}
}setTimeout("snow();",re);
}</script>
貼到<body>….</body>的裡面即可
存檔 snow.html結果
將 snow.html複製到 Server2Go\htdocs目錄底下在Opera手機模擬器上來測試輸入：http://127.0.0.1:4001/snow.html結果：
5. 練習 3：下載貓走路動畫，在手機模擬器上測試下載貓走路動畫將 cat.zip複製到 Server2Go\htdocs目錄底下解壓縮在Opera手機模擬器上來測試輸入：http://127.0.0.1:4001/ 3-setTimeout03.html結果：dobule_Click雙按可以放大畫面
6. 練習 4：製作滑鼠移至圖片會淡化的效果滑鼠點按則圖片清楚，滑鼠離開則圖片淡化
開啟Work2.html
到網站建置百寶箱http://dob.tnc.edu.tw/
單元：選擇『java script』
http://dob.tnc.edu.tw/themes/old/showPage.php?s=2549&t=6&at=27
先看看範例
使用方法步驟 1 ： 複製程式碼<script language="JavaScript1.2">
function high(which2){theobject=which2if (window.downlighting) clearInterval(downlighting)
highlighting=setInterval("highlightit(theobject)",50)}
function low(which2){clearInterval(highlighting)theobject=which2downlighting=setInterval("downlightit(theobject)",50)}
function highlightit(cur2){if (cur2.filters.alpha.opacity<100)cur2.filters.alpha.opacity+=5else if (window.highlighting)clearInterval(highlighting)}
function downlightit(cur2){if (cur2.filters.alpha.opacity>40)cur2.filters.alpha.opacity-=20 //修改滑鼠移開圖示後的亮度，數字越小就越亮else if (window.downlightit)clearInterval(downlighting)}</script><center><img src="http://www.lineage.com.hk/lineage/image/community/fansite/princess-icon.gif" style="filter:alpha(opacity=40)" onmouseover="high(this)" onmouseout="low(this)" width="100" height="100">
貼到<body>….</body>的裡面即可
指定所要淡化的圖片把最後一段<img src……>剪下
先去點選要淡化的圖片
然後看程式碼
將剛剛剪下的部分貼上
把設定淡化的指令剪下來，貼到指定淡化的圖片上
刪除殘餘的指令
結果，預覽滑鼠點按則圖片清楚，滑鼠離開則圖片淡化
也將下一張圖片設定淡化效果
7. 練習 5：水平移動跑馬燈
開啟Work2.html
到網站建置百寶箱http://dob.tnc.edu.tw/
單元：選擇『java script』
http://dob.tnc.edu.tw/themes/old/showPage.php?s=69&t=6&at=4
先看看範例
使用方法步驟 1 ： 複製程式碼<SCRIPT Language="JavaScript">var msg="這是用 JAVA Script 所做出來的跑馬燈，打字效果的喔！";var interval = 100;seq = 0;
function Scroll() {document.tmForm.tmText.value = msg.substring(0, seq+1);seq++;if ( seq >= msg.length ) { seq = 0 };window.setTimeout("Scroll();", interval );} </SCRIPT>
貼到</head>的前面
步驟 2 ： 複製程式碼OnLoad="Scroll();"
貼到</head>的前面
步驟 3 ： 複製程式碼<FORM Name=tmForm><INPUT Type=Text Name=tmText Size=35></FORM>
先去點選所要放置跑馬燈的位置
然後切換到程式碼區，貼上語法
結果，預覽
修改文字這是王小華的個人部落格，及多媒體工作室網站！
預覽結果
8. 練習 6：防止偷圖（製作不能按右鍵下載圖片的效果）
放在網頁上的圖片很容易被按右鍵『另存圖片』
開啟work3.html
如何才能防止偷圖呢？方法 1：鎖住滑鼠右鍵
到網站建置百寶箱http://dob.tnc.edu.tw/
單元：選擇『java script』選擇專欄：滑鼠游標文章：新滑鼠時鐘
http://dob.tnc.edu.tw/themes/old/showPage.php?s=367&t=6&at=2
先看看範例
使用方法oncontextmenu="window.event.returnValue=false;alert('版權所有請勿複製')"
複製程式碼
貼到<body…………>的裡面即可
修改警告文字：版權所有，不可以隨便下載別人辛苦做的圖片
結果，瀏覽
