javascript的一些东西
2005-09-03 19:24
369 查看
簡介
瀏覽器的支援差異
宣告
基本使用
javascript在html中的位置
資料型態(Data Type)
變數(Variable)
物件模型DOM
使用技巧
參考書目
網路資源
JavaScript是一個直譯型、並以物件為基礎的 Scripting 語言。JavaScript並不是另一個語言的縮減版 (它與 Java 之間並沒有什麼直接關連)，而且也不是其他任何軟體的簡化版。不過，它仍有一些限制。舉例來說，您無法使用它撰寫一些獨立式應用程式，而且它也沒有檔案讀寫與安全與繪圖的功能。
JavaScript甚至只能在直譯程式或"主機"上執行，如Active Server Pages (ASP)，Internet Explorer，或Windows Script Host。
JavaScript的語言型態並不嚴謹(Dynamically typed)，這表示您不需要非常明確地宣告變數的資料型態。JavaScript是跟HTML混合在一起的程式，可以在頁面上做出即時的特效，它會隨著網頁下載到你的電腦，然後瀏覽器自動執行跟HTML程式混在一起的JavaScript程式，做出特效來。
在指定瀏覽器上的表單物件時,IE可不指定document,而 mozilla則否, 例如mozilla需指定為 document.forms.text.value , 而IE可簡寫為 forms.text.value ,但還好我們可以先用一個變數來取代指定的麻煩, 如
var s="document.forms";
s.text.value=....... ;
以JavaScript在瀏覽器上顯示文字
以JavaScript在瀏覽器上顯示html
在head區段
在body區段
null 值和 undefined 值經比較後一律相等。
運算式中有數字的字串且使用(-*/....)其他運算子，運算式視為數值
null乘以任何數皆為0
undefined乘以任何數皆為NaN(Not a Number)
將字串強迫轉為指定底數的數值：parseInt("字串",[底數])
將字串強迫轉為浮點數：parseFloat("字串")
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)" />
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)" />
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()" />
function addClipboard2(obj) {
var r = obj.createTextRange() ;
r.execCommand("Copy") ;
}
//--> </script>
<input type="text" id="address" onClick="addClipboard2(this)">
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>
function AntiSpam(Name, Domain) {
location.href = 'mailto:' + Name + '@' + Domain
}
//--> </script>在寫電子郵件時，以下列語法呼叫上面的Javascript <a href="javascript:AntiSpam('peterju','pchome.com.tw');">聯絡作者</a>
瀏覽器的支援差異
宣告
基本使用
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 ,但還好我們可以先用一個變數來取代指定的麻煩, 如
var s="document.forms";
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"> document.write("Hello World!") </script> </body> </html> | Hello World! |
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <body> <script type="text/javascript"> document.write("<h6>Hello World!</h6>") </script> </body> </html> | 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> </html> |  |
| javascript程式碼 | 瀏覽器畫面 |
|---|---|
| <html> <head> </head> <body> <script type="text/javascript"> document.write("This message is written when the page loads") </script> </body> </html> | 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 內部把所有的數字表示成浮點值)。 特殊數值 NaN：用不正確的資料，像字串或未定義的值執行數學運算時，就會使用這個數值 Positive Infinity：當正數大到無法顯示在Jscript中時，就會使用這個數值 Negative Infinity：當負數大到無法顯示在Jscript中時，就會使用這個數值 Positive and Negative 0：JScript 區分正 0 和負 0。 |
| .0001; 0.0001; 1e-4; 1.0e-4; 0378; 0377; 0Xff |
布林 | d0f0布林資料型態卻只能有 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 | 遇到下列情況，會傳回未定義的值。也就是使用： 不存在的物件屬性 已經宣告，但未指定值的變數。 注意不能把變數拿來跟為定義的值比對，檢測這個變數是否存在，雖然您可以藉此檢查這個變數的型態是否為 "undefined"。從下列的程式碼範例中， 可以推測這個程式設計者嘗試要檢測變數x 是否已宣告： |
| if (typeof(x) == "undefined") ................. var currentCount; var finalCount = 1 * currentCount; // finalCount 的值是 NaN，因為 currentCount 為Undefined。 |
組合 (引用) 資料型態
物件 | |
| 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>在寫電子郵件時，以下列語法呼叫上面的Javascript <a href="javascript:AntiSpam('peterju','pchome.com.tw');">聯絡作者</a>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 关于javaScript的一些东西
- JavaScript常用的一些东西
- Javascript获取url里面的一些东西
- JavaScript中的一些重要却容易被忽视的东西
- javascript 一些需要知道的东西
- 关于javascript在作用域中的变量定义你所不知道的一些东西
- javaScript中的一些 正则表达式 的基础知识。
- Cocos2d-x里Javascript开发的一些要点
- 总结两个Javascript的哈稀对象的一些编程技巧
- JavaScript实用的一些技巧
- 随便记录一些东西
- 【转载】谈谈javascript语法里一些难点问题（二）
- javascript 获取链接url我一些位置的内容
- 微博上看到的一些东西
- VC生成的exe文件中, Dos头部分除了Dos Stub之外, 还多了一些东西
- 最近研究了一些东西，抽空该整理更新下了！！
- javascript的一些小技巧
- 正在研究一些Javascript的框架
- JS基础的一些东西
- javascript关于链接的一些用法