首頁 > 開發者 > JavaScript

javascript的一些東西

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
文章目錄
  • 舊的語法
  • 新的語法
  • 宣告不支援JavaScript的語法
  • 原生資料型態(Primitive Data Type)
  • 特殊資料型態
  • 組合 (引用) 資料型態
  • 資料型態轉換
  • 宣告
  • 命名
  •  
  • 文字瀏覽器不可用(假連結)
  • 文字瀏覽器可用
  • 顯示遊標所在位置的說明
  • 在狀態列顯示說明
  • 滑鼠指標指到時的樣式
  • Window
  • 設定文字欄位的輸入遮罩( input mask ) : 只能輸入數字
  • 設定文字欄位的欄位驗證 : 只能輸入數字
  • 遊標停留在文字欄位中文字的最後面
  • 將文字欄位的東西拷貝至剪貼簿
  • 循序取出欄位的值
  • 預防自動蒐集email名單的機器人
  • 簡介
  • 瀏覽器的支援差異
  • 宣告
  • 基本使用
  • 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在瀏覽器上顯示文字
javascript程式碼 瀏覽器畫面
<html>
<body>

<script type="text/javascript">
document.write("Hello World!")
</script>

</body>
</html>

 Hello World!

以JavaScript在瀏覽器上顯示html
javascript程式碼 瀏覽器畫面
<html>
<body>

<script type="text/javascript">
document.write("<h6>Hello World!</h6>")
</script>

</body>
</html>

 Hello World!
javascript在html中的位置
在head區段
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>

在body區段
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
布林 布林資料型態卻只能有 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)語言
自動轉換原則

  1. 運算式中有數字的字串且使用(+)，運算式視為字串
  2. 運算式中有數字的字串且使用(-*/....)其他運運算元，運算式視為數值
  3. null乘以任何數皆為0
  4. undefined乘以任何數皆為NaN(Not a Number)
強制轉換
  1. 將字串強迫轉為數值：eval("字串")
  2. 將字串強迫轉為指定底數的數值：parseInt("字串",[底數])
  3. 將字串強迫轉為浮點數：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}
物件模型DOMWindow屬性

由於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>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
formatmoney javascript javascript getdatetime unlink javascript hmac javascript javascript session javascript addslashes javascript bindto
相關文章
漂亮簡單Javascript 調色盤代碼
javascript的indexOf忽略大小寫方法_javascript技巧
JavaScript的parseInt 取整使用
用js一招破解所有網頁的加密原始碼的方法
Wireshark基本介紹和學習TCP三向交握，wiresharktcp
jQuery AJAX timeout 逾時問題詳解，jqueryajax

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More