基礎
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 | 有多少列 |
全站熱搜
留言列表
