JavaScript
基礎
1.WWW的基礎
2.Client端網頁技術(前端或客戶端,即上網的一端)
JavaScript
VBScript
JScript
HTML
DHTML
3.Server端網頁技術(後端或稱伺服端,即放網頁和資料的一端)
ASP
PHP
JavaScript功能
表單驗證和送出
網頁處理
動態文件內容
更改HTML標籤的屬性和樣式
變數和運算子
事件處理
JavaScript開發環境
瀏覽方式→使用IE即可
JavaScript基本架構
<html>
<head>
<title>我的第一支JavaScript程式</title>
</head>
<body>
<script language="JavaScript">
document.write("我的第一支JavaScript程式<br>");
</script>
</body>
</html>
JavaScript變數
|
型態 |
說明 |
|
String |
含一個或多個字元,使用『'』或『"』括起來的字元 |
|
Number |
整數或浮點數 |
|
Boolean |
true或false |
JavaScript運算子 (如果x=5) 範例1.htm
|
運算子 |
說明 |
範例 |
|
- |
減法 |
10-6=4 |
|
+ |
加法 |
10+6=16 |
|
++ |
遞增 |
x++=6 |
|
-- |
遞減 |
x--=4 |
|
* |
乘法 |
3*2=6 |
|
/ |
除法 |
10/2=5 |
|
% |
餘數 |
16 % 3=1 |
流程控制
if 例 if.htm
if ~ else ~ 例 ifelse.htm
switch 例 switch.htm、switch1.htm、switch2.htm
for 例 for.htm
while 例 while.htm
do ~ while 例 dowhile
巢狀迴圈 例: DoubleFor.htm
JavaScipt函數
內建函數
parseInt( ) 例: parse.htm
parseFloat( )
如何建立JavaScript的函數 myfunction.htm
如何建立有參數的JavaScript函數 myfunction1.htm~myfunction4.htm
JavaScript的String物件
字串長度和大小寫 (例 string1.htm)
|
屬性 |
說明 |
|
length |
取字串長度 |
|
方法 |
說明 |
|
toLowerCase( ) |
將字串中的英文字母全部轉換成小寫 |
|
toUpperCase( ) |
將字串中的英文字母全部轉換成大寫 |
取字串的指定字元 (例 string2.htm)
|
方法 |
說明 |
|
charAt(index) |
取參數index位置的字元,索引值從0開始 |
|
CharCodeAt(index) |
取參數index位置的Unicode統一字碼 |
字串搜尋 (例 search.htm)
|
方法 |
說明 |
|
indexOf(string,index) |
傳回第一次搜尋到字串的索引位置,找不到傳-1 傳入的參數為搜尋的字串,index為開始的搜尋的索引位置 |
|
lastindexOf(string) |
同上,不同是從後面搜尋到前面 |
|
match(string) |
同上,不同在傳回的是找到的字串,如果找到傳回null |
|
Search(string) |
和indexOf( )功能相似 |
字串處理 (例 string3.htm)
|
方法 |
說明 |
|
replace(string1,string2) |
將找到的string1字串取代為string2 |
|
split(string) |
傳回Array物件,使用參數string做為分割的字串,將字串轉換成一個Array物件 |
|
substr(index,length) |
從index開始取出length個字元 |
|
substring(index1,index2) |
取出index1到index2間的字串 |
|
concat(string) |
將string字串新增到string物件的字串後 |
練習:請寫出可檢查身份證是否合法的程式 (id.htm)
JavaScript的Array物件
JavaScript的陣列 array1.htm~ array3.htm
var id=new array(5); // id.length
id[0]=”abc”
id[4]=”aaa”
var i=new array(100,200,300);
i[0]=100
|
屬性 |
說明 |
|
length |
取陣列的元素個數,也是陣列的尺寸 |
|
方法 |
說明 |
|
join( ) |
將陣列元素使用字串方式顯示 |
|
reverse( ) |
將陣列元素反轉 |
|
sort( ) |
將陣列所有元素排序 |
|
concat( ) |
將參數的陣列合併到目前陣列中 |
練習:請分別輸入6個不同值的整數,再利用程式由小排到大
JavaScript的Date 例 time1.htm
取得日期和時間
|
方法 |
說明 |
|
getDate( ) |
傳回日期值1~31 |
|
getDay( ) |
傳回星期值0~6,也就是星期日~星期六 |
|
getMonth( ) |
傳回月份值0~11,也就是1月~12月 |
|
getFullYear( ) |
傳回完整年份,如2007 |
|
getYear( ) |
傳回年份,如果在1900~1999之間,傳後兩碼,如1988則傳88,否則傳完整年份 |
|
getHours( ) |
傳回小時0~23 |
|
getMinutes( ) |
傳回分鐘0~59 |
|
getSeconds( ) |
傳回秒數0~59 |
|
getMilliseconds( ) |
傳回千分之一秒為單位的秒數,0~999 |
|
getTime( ) |
傳回自1/1/1970年開始的秒數,以千分之一秒為單位 |
設定日期和時間 例 time2.htm
|
方法 |
說明 |
|
setDate( ) |
設定日期1~31 |
|
setMonth( ) |
設定月份0~11,也就是1月~12月 |
|
setFullYear( ) |
設定完整年份,如2007 |
|
setYear( ) |
設定年份,如果在1900~1999之間,傳後兩碼,如1988則傳88,否則傳完整年份 |
|
setHours( ) |
設定小時0~23 |
|
setMinutes( ) |
設定分鐘0~59 |
|
setSeconds( ) |
設定秒數0~59 |
|
setMilliseconds( ) |
設定千分之一秒為單位的秒數,0~999 |
|
setTime( ) |
設定自1/1/1970年開始的秒數,以千分之一秒為單位 |
日期和時間的轉換 例 time3.htm
|
方法 |
說明 |
|
getTimezonOffset( ) |
傳回本地時間和GMT的時間差,以分為單位 |
|
toGMTString( ) |
傳回轉換成GMT時間的字串 |
|
toLocalString( ) |
傳回將GMT轉換成本地時間的字串 |
|
parse(Date) |
傳回參數Date物件從1/1/1970到本地時間的毫秒數,以千分之一為單位 |
|
UTC(Date) |
傳回參數Date物件從1/1/1970到GMT時間的毫秒數,以千分之一為單位 |
JavaScript的Math物件 例math.htm
|
屬性 |
說明 |
|
E |
自然數 e=2.7182814828459045 |
|
LN2 |
ln2=.0.6931471805599453 |
|
LN10 |
ln10=2.302585092994046 |
|
LOG2E |
log2e=1.442695040888633 |
|
LOG10E |
log2=0.4342944819032518 |
|
PI |
圓周率 π=3.141592653589793 |
|
SQRT 1/2 |
根號 |
|
SQRT2 |
根號 |
練習:請分別以亂數方式取出6個數字為1~42之間的任何整數的值,再利用程式由小排到大(rand.htm、loto.htm 、sort1.htm)
Windows物件
瀏覽程式的狀態列(status.htm)
|
屬性 |
說明 |
|
defaultStatus |
設定和取得瀏覽程式狀態列的預設訊息文字 |
|
status |
設定和取得瀏覽程式狀態列的訊息文字 |
Windows物件的計時器 (WindowsTime.htm)
|
只會執行一次 |
|
|
方法 |
說明 |
|
setTimeout(express,time) |
啟動計時器,當time參數所設定的時間到達時,執行express運算式,時間以千分之一為單位 |
|
clearTomeout( ) |
停止setTimeout方法啟動的計時器 |
|
可以週期性的執行 |
|
|
方法 |
說明 |
|
setInterval(express,time) |
啟動計時器,當time參數所設定的時間週期性地執行express運算式,時間以千分之一為單位 |
|
clearInterval( ) |
停止setInterval方法啟動的計時器 |
視窗的開啟關閉 (Windows.htm)
設定新視窗的特性 (newWindows.htm)
|
屬性 |
說明 |
|
left/screenX |
設定瀏覽程式左上角x座標單位為px,IE支援left,Netscape支援screenX |
|
top/screenY |
設定瀏覽程式左上角y座標單位為px,IE支援left,Netscape支援screenY |
|
height/innerHeight |
設定瀏覽程式顯示視的高,單位為px,最小值100,Netscape只支援innerHright |
|
width/innerWidth |
設定瀏覽程式顯示視的寬 ,單位為px,最小值100,Netscape只支援innerWidth |
|
directories |
顯示瀏覽程式連結列,這個屬性沒有屬性值 |
|
location |
是否顯示瀏覽程式的網址欄 |
|
menubar |
是否顯示瀏覽程式的功能表 |
|
resizble |
是否允許調整視窗的尺寸 |
|
scrollbars |
是否顯示垂直和水平的捲動軸 |
|
status |
是否顯示瀏覽程式下方的狀態列 |
|
titlebar |
是否顯示瀏覽程式上方的標題列 |
|
toolbar |
是否顯示瀏覽程式的工具列 |
更改視窗的尺寸和位置 (windowScreen.htm)
Screen物件屬性可以取得螢幕解析和色彩度,如:
|
屬性 |
說明 |
|
height |
螢幕解析度的高度 |
|
width |
螢幕解析度的寬度 |
|
availHeight |
螢幕視野的高度 |
|
availWidth |
螢幕視野的寬度 |
|
colorDepth |
螢幕的色彩度 |
Window物件提供的屬性可以取得瀏覽程式左上角的位置,如:
|
屬性 |
說明 |
|
screenLeft |
傳回左上邊界的座標 |
|
screenTop |
傳回上方邊界的座標 |
Window物件提供有調整視窗尺寸和移動視窗位置方法.,如
|
方法 |
說明 |
|
moveTo(x,y) |
將瀏覽程式移到座標x和y位置 |
|
moveBy(offsetx,offsety) |
將瀏覽程式目前的位置,移動參數的位移量, 位移量大於0表示向右和向下移, 小於0表示向左和向上移 |
|
resizeTo(width,height) |
將瀏覽程式視窗調整為參數width和height尺寸 |
|
resizeBy(offsetx,offsety) |
將瀏覽程式尺寸放大或縮小,參數大於0為放大尺寸, 小於0為縮小,尺寸 |
表單
Input物件的屬性 (input.htm)
|
屬性 |
說明 |
|
From |
取得欄位屬於那一個表單物件 |
|
Name |
欄位名稱,就是標籤的name屬性 |
|
Type |
傳回欄位的類型,也就是標籤的type屬性 |
|
Value |
設定或傳回欄位值,也就是標籤的value屬性 |
|
accessKey |
定義此欄位的快捷鍵 |
|
accept |
顯示伺服器支援的ContentType清單 |
|
align |
垂直或水平對齊欄位 |
|
alt |
設定或取得當瀏覽程式無法顯示欄位時的替代文字內容 |
|
defaultValue |
設定或取得欄位的預設值 |
|
disabled |
設定欄位是否有作用,true為沒有作用,false為有作用 |
|
tabIndex |
設定Tab鍵切換欄位時的順序值 |
|
maxLength |
設定或傳回文字欄位的最大字元數 |
|
readOnly |
設定文字或密碼欄位是否是一個唯讀欄位,true為是,false為否 |
|
size |
設定或傳回文字欄位的尺寸 |
選擇鈕和核取方塊 (RadCheck.htm)
|
屬性 |
說明 |
|
ckeched |
傳回或設定是否選取選擇鈕和核取方塊的選項 |
|
defaultChecked |
選擇鈕或核取方塊的預設值 |
select (select.htm)
|
屬性 |
說明 |
|
length |
共取得多少選項 |
|
multiple |
設定或取得選單是否為複選,true為複選,false為單選 |
|
options |
取得Option物件集合 |
|
selectedIndex |
傳回選擇的選項,這是索引值 |
|
size |
設定欄位為下拉式選單或清單方塊,suze大於1是清單方塊 |
option (option.htm)
|
屬性 |
說明 |
|
text |
存取選項的名稱 |
|
defaultSelected |
欄位的預選選項 |
|
index |
選項陣列的索引位置,由0開始 |
|
label |
設定和傳回選項的說明文字 |
|
selectde |
選項是否被選取,true表示有選取,false表示沒有選取 |
Textarea (textarea.htm、textarea1.htm)
|
屬性 |
說明 |
|
cols |
有多少欄,多少字元 |
|
rows |
有多少列 |
留言列表
