Download presentation
Presentation is loading. Please wait.
1
Javascript 初步 簡單程式篇 簡單程式篇
2
本章內容 Javascript的物件 Javascript的事件 配合CSS使用 簡單程式篇
3
Javascript的物件 HTML裡有預設許多好用的物件 物件底下也內建很多好用的函式 善加利用可使程式撰寫更方便 簡單程式篇
4
Textarea window Layer Text Frame Link FileUpload navigator Password
Image Plugin document Hidden MimeType Area Submit Anchor location Reset Applet Radio Plugin Checkbox history Form Button 簡單程式篇 Select Option
5
物件的使用法 預設的物件裡面有很多內建的函式 使用時只要寫 物件名稱 . 呼叫的函式 即可
Ex) window.alert(“這是警告視窗”); 簡單程式篇
6
window物件 瀏覽器預設的物件，所以可以不用寫window.xxx() 可用來控制視窗的狀態，如開啟、關閉、視窗種類等等 簡單程式篇
7
警告視窗 alert(物件或字串); 當alert()傳入的參數可以轉為字串形式時，會自動轉成字串 如果是純字串則要加上 “ 和 ” 包起來
簡單程式篇
8
警告視窗 alert(123); alert(“這是警告視窗”); alert(msg); alert(window); 簡單程式篇
9
確認視窗 bool confirm(“視窗上的訊息”); 會出現確定或取消的選擇 如選擇確定則傳回true 如選擇取消則傳回false
簡單程式篇
10
確認視窗 if(confirm(“確定要離開本網站?”)) { alert(“不准你離開!!”); } else
簡單程式篇
11
輸入文字視窗 var prompt(“提示文字”, “預設值”); 讓使用者輸入文字的視窗，會將使用者輸入的字傳回來 也可不使用預設值
簡單程式篇
12
輸入文字視窗 var age=prompt(“請問您幾歲”, “20”); if(isNaN(age))
{ alert(“請輸入數字”); } else { alert(“您的歲數是”+age+“歲”); } 簡單程式篇
13
開新視窗 String open(“URL”, “視窗名稱”, “屬性”); 屬性有 width = 寬度 height = 高度
location = yes / no // 位址列顯示與否 directories = yes / no // 連結列顯示與否 menubar = yes / no // 選單列顯示與否 toolbar = yes / no // 工具列顯示與否 scrollbar = yes / no // 捲動軸顯示與否 resizable = yes / no // 是否可改變視窗大小 status = yes / no // 狀態列顯示與否 預設都是no 簡單程式篇
14
開新視窗 window.open(“http://mmdb19.ee.ntu.edu.tw/wwwcourse/free.html”,
“new”, “width=300, height=200, resizable=yes, menubar=yes”); 簡單程式篇
15
關閉視窗 視窗名稱.close(); 可用window.close();或self.close();來關閉自己 簡單程式篇
16
關閉視窗 window.close(); new.close(); self.close(); 簡單程式篇
17
狀態列文字 window.status=“要顯示的字串”; 狀態列的字就是由status這個變數決定的
簡單程式篇
18
狀態列文字 window.status=“歡迎光臨WWW網頁設計班網站”; 簡單程式篇
19
history物件 history物件是瀏覽器自動紀錄使用者瀏覽過的網頁 可用的函式有 history.back(); // 上一頁
history.forward(); // 下一頁 history.go(num); // 跳到第n頁(目前是0) 簡單程式篇
20
location物件 location物件記錄了目前瀏覽器的URL 可利用改變這個物件來換頁 語法為
location.href=“要連結的網址”; 可回到上一頁 location.replace(“要連結的網址”); 不可回到上一頁 簡單程式篇
21
document物件 document物件就是整個HTML網頁的內容，常用的函式有 document.write(“字串”);
簡單程式篇
22
Javascript的事件 當使用者在瀏覽網頁時的種種行為，就是一個個的事件 針對這些事件的發生Javascript定義了處理事件的函式
簡單程式篇
23
事件處理函式 onAbort onBlur onChange onClick onDblClick onDragDrop onError
onFocus onKeyPress onKeyDown onKeyUp onMouseDown onMouseUp onMouseOver onMouseOut onMouseMove onResize onLoad onUnload onReset onSelect onSubmit 簡單程式篇
24
處理函式的使用 直接加在HTML標籤裡 或是寫在javascript的程式中 簡單程式篇
25
處理函式的使用 <script language=“javascript”> function showMsg()
{ alert(“你剛剛按下按鈕”); } </script> <input type=“button” value=“按我按我” onClick=“showMsg();”> 簡單程式篇
26
處理函式的使用 <script language=“javascript”> function noCopy() {
if(event.button==2) alert(“請尊重智慧財產權”); } </script> <body onMouseDown=“noCopy();”> 簡單程式篇
27
處理函式的使用 鎖右鍵的另一種做法 <body oncontextmenu="return false"> 簡單程式篇
28
配合CSS使用 可在div中設定ID 用 ID.style.xxx 可以更改CSS的設定 或者使用 this 關鍵字 簡單程式篇
29
<script language="JavaScript"> function fontLarger() {
sizeNow = parseInt(d1.style.fontSize); sizeNow = sizeNow+2; d1.style.fontSize = sizeNow + "pt"; } </script> <input type="button" value="變大" onClick="fontLarger();"> <hr> <div id="d1" style="font-size:12pt"> 這是會變動大小的字唷</div> 簡單程式篇
30
<script language="JavaScript"> function fontLarger(abc) {
sizeNow = parseInt(abc.style.fontSize); sizeNow = sizeNow+2; abc.style.fontSize = sizeNow + "pt"; } </script> <div id="d1" style="font-size:12pt" onClick="fontLarger(this);"> 這是會變動大小的字唷</div> 簡單程式篇
Similar presentations
