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