javascript的一些东西
- 簡介
- 瀏覽器的支援差異
- 宣告
- 基本使用
- javascript在html中的位置
- 資料型態(Data Type)
- 變數(Variable)
- 物件模型DOM
- 使用技巧
- 參考書目
- 網路資源
簡介
JavaScript是由Netscape Communication與Sun Microsystem兩家公司所共同開發網頁瀏覽器專用的Script語言，在IE中稱為Jscript。無論是 JavaScript 或是 JScript，都滿足 ECMA（European Computer Manufacturer's Association，歐洲電腦製造商協會）所提出來的標準，滿足此標準的語言稱為 ECMAScript，當初 Netscape 和微軟也都有參與此語言的制訂。
JavaScript是一個直譯型、並以物件為基礎的 Scripting 語言。JavaScript並不是另一個語言的縮減版 (它與 Java 之間並沒有什麼直接關連)，而且也不是其他任何軟體的簡化版。不過，它仍有一些限制。舉例來說，您無法使用它撰寫一些獨立式應用程式，而且它也沒有檔案讀寫與安全與繪圖的功能。
JavaScript甚至只能在直譯程式或"主機"上執行，如Active Server Pages (ASP)，Internet Explorer，或Windows Script Host。
JavaScript的語言型態並不嚴謹(Dynamically typed)，這表示您不需要非常明確地宣告變數的資料型態。JavaScript是跟HTML混合在一起的程式，可以在頁面上做出即時的特效，它會隨著網頁下載到你的電腦，然後瀏覽器自動執行跟HTML程式混在一起的JavaScript程式，做出特效來。
瀏覽器的支援差異
javascript的撰寫在不同瀏覽器上的表現都有些許差異, 一般而言, IE對於錯誤的程式碼容忍度較高, Mozilla則較為嚴謹
在指定瀏覽器上的表單物件時,IE可不指定document,而 mozilla則否, 例如mozilla需指定為 document.forms.text.value , 而IE可簡寫為 forms.text.value ,但還好我們可以先用一個變數來取代指定的麻煩, 如
s.text.value=....... ;
宣告
舊的語法
| 行內宣告 <script language="JavaScript"> <!-- script //--> </script> |
預防瀏覽器不支援 <!-- --> 不讓-->成為JavaScript的一部份，需加入// |
宣告依版本而有不同 <script language="JavaScript"> <script language="JavaScript1.1"> <script language="JavaScript1.2"> <script language="JavaScript1.3"> <script language="JavaScript1.4"> <script language="JavaScript1.5"> <script language="JScript"> |
| 嵌入宣告 <script language="JavaScript" src="外部的.js檔案URL"> </script> |
新的語法
| 行內宣告 <script type="text/javascript"> <!-- script //--> </script> |
預防瀏覽器不支援 <!-- --> 不讓-->成為JavaScript的一部份，需加入// |
<script type="text/javascript"> </script> |
| 嵌入宣告 <script type="text/javascript" src="外部的.js檔案URL"> </script> |
宣告不支援JavaScript的語法
<noscript>本網頁使用了JavaScript</noscript>
基本使用
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <body> <script type="text/javascript"> </body> |
Hello World! |
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <body> <script type="text/javascript"> </body> |
Hello World! |
javascript在html中的位置
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <head> <script type="text/javascript"> function message() { alert("This alert box was called with the onload event") } </script> </head> <body onload="message()"> </body> |
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <head> </head> <body> <script type="text/javascript"> </body> |
This message is written when the page loads |
資料型態(Data Type)
JScript無法明確地宣告資料型態。在許多情況下，JScript 會在需要時自動執行轉換。例如，如果在文字 (字串) 所組成的項目中加入一個數字，這個數字就會轉換成文字。原生資料型態(Primitive Data Type)
字串 |
字串值是一串由 0 個或 0 個以上的 Unicode 字元(字母，小數點和標點符號)結合而成。 雙括號可以包含在括在單括號的字串裡，而單括號也可以包含在括在雙括號的字串裡。 |
| s="Happy am I; from care I'm free!"; s='"Avast, ye lubbers!" roared the technician.'; s="42"; s='c'; s=""; |
數字 |
Jscript 中的整數和浮點值並無明顯區分；兩者都可以作為 JScript 數字 (JScript 內部把所有的數字表示成浮點值)。 特殊數值 |
| .0001; 0.0001; 1e-4; 1.0e-4; 0378; 0377; 0Xff |
布林 |
布林資料型態卻只能有 2 種值，那就是 true 和 false。 |
| flag=true; flag=false; flag = (x == 2000); |
特殊資料型態
null 和 undefined 最大的不同是， null 就好比數字 0，而 undefined 好比特殊值 NaN (非數字)。null 值和 undefined 值經比較後一律相等。
Null |
一個包含null的變數，就是"無值" 或 "無物件"。換句話說，它是無效的數字、字串、布林值、陣列、或物件。您可以指定變數的值為null以刪除這個變數的內容，但又不刪掉這個變數。 JScript 的null 資料型態只有一個值：null。null 關鍵字不能拿來作為一個函數或變數的名稱。 |
Undefined |
遇到下列情況，會傳回未定義的值。也就是使用： 不存在的物件屬性 |
| if (typeof(x) == "undefined") ................. var currentCount; |
組合 (引用) 資料型態
物件 |
|
| hobby=["聽音樂","看電影"] |
陣列 |
|
資料型態轉換
JavaScript是一種動態類型(Dynamically typed)語言自動轉換原則
- 運算式中有數字的字串且使用(+)，運算式視為字串
- 運算式中有數字的字串且使用(-*/....)其他運算子，運算式視為數值
- null乘以任何數皆為0
- undefined乘以任何數皆為NaN(Not a Number)
強制轉換
- 將字串強迫轉為數值：eval("字串")
- 將字串強迫轉為指定底數的數值：parseInt("字串",[底數])
- 將字串強迫轉為浮點數：parseFloat("字串")
變數(Variable)=識別字(Identifier)
宣告
類型
| 區域變數 | var 變數名; | |
| 全域變數 | 變數名; |
方式
| 單一宣告 | var name; | |
| 多變數同時宣告 | var name,sex; | |
| 宣告時並賦予初值，否則其值為undefined | var name="peter",sex="女"; | |
| 雖然變數型態不同，宣告方式都一樣 | var num=30,flag=true; |
命名
提供作為命名變數，命名函數，提供迴圈的標籤。區分大小寫 |
var x; var X |
第一個字元必須是ASCII字母 (大小寫皆可)、底線 (_)字元 |
var _x; var x_1 |
複合字的第一個字建議要大寫 |
var MyFriend; |
變數名稱不能為保留字 |
以a標籤連結至javascript的函數有2種方式
文字瀏覽器不可用(假連結)
<a href='javascript:show_url("argument")' >連結至函數</a>
文字瀏覽器可用
<a href="#" onclick='show_url("argument");return false;' >連結至函數</a>
特殊連結程式碼？
| 上一頁 | javascript:window.history.go(-1) | javascript:window.history.back() |
| 下一頁 | javascript:window.history.go(1) | javascript:window.history.forward() |
| 重新整理 | javascript:location.reload() | |
| 列印 | javascript:window.print() | |
| 開啟視窗 | javascript:window.open() | |
| 關閉視窗 | javascript:window.close() |
滑鼠游標相關的動作
顯示游標所在位置的說明
利用title屬性，如 老闆的家在狀態列顯示說明
利用 onMouseOver與 onMouseOut屬性，配合 window物件模型如 老闆的家滑鼠指標指到時的樣式
利用a標籤的擬class「a:hover」屬性，如 a:hover{color:#ffffff; background-color:#0000ff}物件模型DOM
Window
屬性
由於windows物件是瀏覽器的最上層物件，因此再撰寫script可省略window描述| 屬性名稱 | 說明 | 是否可讀寫 |
|---|---|---|
| defaultstatus | 網頁載入完成後，狀態列上的預設文字 | 讀/寫 |
| status | 目前視窗狀態列上的文字 | 讀/寫 |
| history | 已經瀏覽過的URL資料 | 讀 |
| length | 傳回集合裡的元件數目 | 讀 |
| location | 網頁裡的URL位址 | 讀/寫 |
| name | 視窗名稱 | 讀 |
| navigator | 瀏覽器資訊 | 讀 |
| document | 瀏覽器內的網頁文件 | 讀 |
| opener | 傳回目前開啟著的物件 | 讀 |
| closed | 目前視窗是否關閉 | 讀 |
| parent | 目前視窗的母視窗 | 讀 |
| self | 目前視窗 | 讀 |
| top | 最上層視窗 | 讀 |
方法
| 方法 | 說明 |
|---|---|
| alert | 開啟警告對話框 |
| blur | 讓網頁失去焦點 |
| clearinterval | 取消setinterval的作用 |
| cleartimeout | 取消settimeout的作用 |
| close | 關閉瀏覽器視窗 |
| confirm | 開啟確認對話框 |
| execscript | 執行某個script,預設為javascript |
| focus | 讓網頁取得焦點 |
| navigate | 連結到其他網頁 |
| open | 新增瀏覽器視窗 |
| prompt | 開啟輸入對話框 |
| scroll | 將網頁視窗捲動X位移與Y位移 |
| setinterval | 固定的毫秒時間間隔來反覆執行某個函數 |
| settimeout | 固定的毫秒時間後執行某個函數 |
| showhelp | 開啟對話框 |
| showmodaldialog | 開啟modal視窗 |
事件
| 事件 | 說明 |
|---|---|
| onload | 載入網頁時發生 |
| onunload | 離開網頁時發生 |
| onfocus | 視窗取得焦點時發生 |
| onblur | 視窗失去焦點時發生 |
| onhelp | 按下F1按鍵時發生 |
| onresize | 使用者調整視窗大小時發生 |
| onscroll | 使用者滾動視窗前後時發生 |
| onerror | 載入網頁後出現錯誤時發生 |
使用技巧
設定文字欄位的輸入遮罩( input mask ) : 只能輸入數字
<script language="JavaScript" type="text/javascript"> <!--
function check_intkey(key){
if (key>=48 && key<=57) {
return true;
} else {
return false;
}
}
//--> </script>
<input type="text" name="birthday" onKeypress="return check_intkey(event.keyCode)" />
設定文字欄位的欄位驗證 : 只能輸入數字
<script language="JavaScript" type="text/javascript"> <!--
function fild_valid(obj){
var re = /^/d+$/;
if (obj.value!="" && !re.test(obj.value)) {
alert("您必須輸入數字喔");
obj.select();
return false;
} else {
return true;
}
}
//--> </script>
<input type="text" name="birthday" onBlur="fild_valid(this)" />
游標停留在文字欄位中文字的最後面
<script language="JavaScript" type="text/javascript"> <!--
function fild_center() {
var e = event.srcElement ;
var r = e.createTextRange() ;
r.moveStart('character',e.value.length) ;
r.collapse(true) ;
r.select() ;
}
//--> </script>
<input type="text" name="address" onClick="fild_center()" />
將文字欄位的東西拷貝至剪貼簿
<script language="JavaScript" type="text/javascript"> <!--
function addClipboard2(obj) {
var r = obj.createTextRange() ;
r.execCommand("Copy") ;
}
//--> </script>
<input type="text" id="address" onClick="addClipboard2(this)">
循序取出欄位的值
<script language="JavaScript" type="text/javascript"> <!--
for( var i = 1; i<= 40; i++ ) {
if ( typeof( eval( "document.tform.chk"+i ) ) == "undefined" ){
break;
}
if (eval("document.tform.chk"+i+".value")=="Y") {
.......................
}
}
//--> </script>
<select name="chk1" > <option value="Y">是</option> <option value="N">否</option> </select>
<select name="chk2" > <option value="Y">是</option> <option value="N">否</option> </select>
.........
...假設一頁最多有40個select，或可能不足40個
........
<select name="chk40" > <option value="Y">是</option> <option value="N">否</option> </select>
預防自動蒐集email名單的機器人
<script language="JavaScript" type="text/javascript"> <!--
function AntiSpam(Name, Domain) {
location.href = 'mailto:' + Name + '@' + Domain
}
//--> </script>
<a href="javascript:AntiSpam('peterju','pchome.com.tw');">聯絡作者</a>