Web前端——3.JavaScript對象

JavaScript一種直譯式腳本語言,是一種動態類型、弱類型、基於原型的語言,內置支持類型。它的解釋器被稱爲JavaScript引擎,爲瀏覽器的一部分,廣泛用於客戶端的腳本語言,ECMAScript,描述了該語言的語法和基本對象 文檔對象模型(DOM),描述處理網頁內容的方法和接口。瀏覽器對象模型(BOM),描述與瀏覽器進行交互的方法接口

常用於:

1.表單驗證

2.HTML特效

3.異步數據交互

本文主要參考網站:http://www.w3school.com.cn/css/index.asp

一、JavaScript有三大內置對象,分別爲字符串(String)、日期(Date)、數學(Math)

以下是各自的屬性和方法的介紹:

1.字符串(String)

1.String 對象

String 對象用於處理文本(字符串)。

創建 String 對象的語法:

new String(s);
String(s);

參數

參數 s 是要存儲在 String 對象中或轉換成原始字符串的值。

返回值

當 String() 和運算符 new 一起作爲構造函數使用時,它返回一個新創建的 String 對象,存放的是字符串 ss 的字符串表示。

當不用 new 運算符調用 String() 時,它只把 s 轉換成原始的字符串,並返回轉換後的值。

String 對象屬性

屬性 描述
constructor 對創建該對象的函數的引用
length 字符串的長度
prototype 允許您向對象添加屬性和方法

String 對象方法

方法 描述
anchor() 創建 HTML 錨。
big() 用大號字體顯示字符串。
blink() 顯示閃動字符串。
bold() 使用粗體顯示字符串。
charAt() 返回在指定位置的字符。
charCodeAt() 返回在指定的位置的字符的 Unicode 編碼。
concat() 連接字符串。
fixed() 以打字機文本顯示字符串。
fontcolor() 使用指定的顏色來顯示字符串。
fontsize() 使用指定的尺寸來顯示字符串。
fromCharCode() 從字符編碼創建一個字符串。
indexOf() 檢索字符串。
italics() 使用斜體顯示字符串。
lastIndexOf() 從後向前搜索字符串。
link() 將字符串顯示爲鏈接。
localeCompare() 用本地特定的順序來比較兩個字符串。
match() 找到一個或多個正則表達式的匹配。
replace() 替換與正則表達式匹配的子串。
search() 檢索與正則表達式相匹配的值。
slice() 提取字符串的片斷,並在新的字符串中返回被提取的部分。
small() 使用小字號來顯示字符串。
split() 把字符串分割爲字符串數組。
strike() 使用刪除線來顯示字符串。
sub() 把字符串顯示爲下標。
substr() 從起始索引號提取字符串中指定數目的字符。
substring() 提取字符串中兩個指定的索引號之間的字符。
sup() 把字符串顯示爲上標。
toLocaleLowerCase() 把字符串轉換爲小寫。
toLocaleUpperCase() 把字符串轉換爲大寫。
toLowerCase() 把字符串轉換爲小寫。
toUpperCase() 把字符串轉換爲大寫。
toSource() 代表對象的源代碼。
toString() 返回字符串。
valueOf() 返回某個字符串對象的原始值。

String 對象描述

字符串是 JavaScript 的一種基本的數據類型。

String 對象的 length 屬性聲明瞭該字符串中的字符數。

String 類定義了大量操作字符串的方法,例如從字符串中提取字符或子串,或者檢索字符或子串。

需要注意的是,JavaScript 的字符串是不可變的(immutable),String 類定義的方法都不能改變字符串的內容。像 String.toUpperCase() 這樣的方法,返回的是全新的字符串,而不是修改原始字符串。

在較早的 Netscape 代碼基的 JavaScript 實現中(例如 Firefox 實現中),字符串的行爲就像只讀的字符數組。例如,從字符串 s 中提取第三個字符,可以用 s[2] 代替更加標準的 s.charAt(2)。此外,對字符串應用 for/in 循環時,它將枚舉字符串中每個字符的數組下標(但要注意,ECMAScript 標準規定,不能枚舉 length 屬性)。因爲字符串的數組行爲不標準,所以應該避免使用它。


2.Date 對象

Date 對象用於處理日期和時間。

創建 Date 對象的語法:

var myDate=new Date()

註釋:Date 對象會自動把當前日期和時間保存爲其初始值。

Date 對象屬性

屬性 描述
constructor 返回對創建此對象的 Date 函數的引用。
prototype 使您有能力向對象添加屬性和方法。

Date 對象方法

方法 描述
Date() 返回當日的日期和時間。
getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。
getDay() 從 Date 對象返回一週中的某一天 (0 ~ 6)。
getMonth() 從 Date 對象返回月份 (0 ~ 11)。
getFullYear() 從 Date 對象以四位數字返回年份。
getYear() 請使用 getFullYear() 方法代替。
getHours() 返回 Date 對象的小時 (0 ~ 23)。
getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。
getSeconds() 返回 Date 對象的秒數 (0 ~ 59)。
getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒數。
getTimezoneOffset() 返回本地時間與格林威治標準時間 (GMT) 的分鐘差。
getUTCDate() 根據世界時從 Date 對象返回月中的一天 (1 ~ 31)。
getUTCDay() 根據世界時從 Date 對象返回週中的一天 (0 ~ 6)。
getUTCMonth() 根據世界時從 Date 對象返回月份 (0 ~ 11)。
getUTCFullYear() 根據世界時從 Date 對象返回四位數的年份。
getUTCHours() 根據世界時返回 Date 對象的小時 (0 ~ 23)。
getUTCMinutes() 根據世界時返回 Date 對象的分鐘 (0 ~ 59)。
getUTCSeconds() 根據世界時返回 Date 對象的秒鐘 (0 ~ 59)。
getUTCMilliseconds() 根據世界時返回 Date 對象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒數。
setDate() 設置 Date 對象中月的某一天 (1 ~ 31)。
setMonth() 設置 Date 對象中月份 (0 ~ 11)。
setFullYear() 設置 Date 對象中的年份(四位數字)。
setYear() 請使用 setFullYear() 方法代替。
setHours() 設置 Date 對象中的小時 (0 ~ 23)。
setMinutes() 設置 Date 對象中的分鐘 (0 ~ 59)。
setSeconds() 設置 Date 對象中的秒鐘 (0 ~ 59)。
setMilliseconds() 設置 Date 對象中的毫秒 (0 ~ 999)。
setTime() 以毫秒設置 Date 對象。
setUTCDate() 根據世界時設置 Date 對象中月份的一天 (1 ~ 31)。
setUTCMonth() 根據世界時設置 Date 對象中的月份 (0 ~ 11)。
setUTCFullYear() 根據世界時設置 Date 對象中的年份(四位數字)。
setUTCHours() 根據世界時設置 Date 對象中的小時 (0 ~ 23)。
setUTCMinutes() 根據世界時設置 Date 對象中的分鐘 (0 ~ 59)。
setUTCSeconds() 根據世界時設置 Date 對象中的秒鐘 (0 ~ 59)。
setUTCMilliseconds() 根據世界時設置 Date 對象中的毫秒 (0 ~ 999)。
toSource() 返回該對象的源代碼。
toString() 把 Date 對象轉換爲字符串。
toTimeString() 把 Date 對象的時間部分轉換爲字符串。
toDateString() 把 Date 對象的日期部分轉換爲字符串。
toGMTString() 請使用 toUTCString() 方法代替。
toUTCString() 根據世界時,把 Date 對象轉換爲字符串。
toLocaleString() 根據本地時間格式,把 Date 對象轉換爲字符串。
toLocaleTimeString() 根據本地時間格式,把 Date 對象的時間部分轉換爲字符串。
toLocaleDateString() 根據本地時間格式,把 Date 對象的日期部分轉換爲字符串。
UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
valueOf() 返回 Date 對象的原始值。


3.Math 對象

Math 對象用於執行數學任務。

使用 Math 的屬性和方法的語法:

var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);

註釋:Math 對象並不像 Date 和 String 那樣是對象的類,因此沒有構造函數 Math(),像 Math.sin() 這樣的函數只是函數,不是某個對象的方法。您無需創建它,通過把 Math 作爲對象使用就可以調用其所有屬性和方法。

Math 對象屬性

屬性 描述
E 返回算術常量 e,即自然對數的底數(約等於2.718)。
LN2 返回 2 的自然對數(約等於0.693)。
LN10 返回 10 的自然對數(約等於2.302)。
LOG2E 返回以 2 爲底的 e 的對數(約等於 1.414)。
LOG10E 返回以 10 爲底的 e 的對數(約等於0.434)。
PI 返回圓周率(約等於3.14159)。
SQRT1_2 返回返回 2 的平方根的倒數(約等於 0.707)。
SQRT2 返回 2 的平方根(約等於 1.414)。

Math 對象方法

方法 描述
abs(x) 返回數的絕對值。
acos(x) 返回數的反餘弦值。
asin(x) 返回數的反正弦值。
atan(x) 以介於 -PI/2 與 PI/2 弧度之間的數值來返回 x 的反正切值。
atan2(y,x) 返回從 x 軸到點 (x,y) 的角度(介於 -PI/2 與 PI/2 弧度之間)。
ceil(x) 對數進行上舍入。
cos(x) 返回數的餘弦。
exp(x) 返回 e 的指數。
floor(x) 對數進行下舍入。
log(x) 返回數的自然對數(底爲e)。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次冪。
random() 返回 0 ~ 1 之間的隨機數。
round(x) 把數四捨五入爲最接近的整數。
sin(x) 返回數的正弦。
sqrt(x) 返回數的平方根。
tan(x) 返回角的正切。
toSource() 返回該對象的源代碼。
valueOf() 返回 Math 對象的原始值。


4.全局函數(function)

全局屬性和函數可用於所有內建的 JavaScript 對象。

頂層函數(全局函數)

函數 描述
decodeURI() 解碼某個編碼的 URI。
decodeURIComponent() 解碼一個編碼的 URI 組件。
encodeURI() 把字符串編碼爲 URI。
encodeURIComponent() 把字符串編碼爲 URI 組件。
escape() 對字符串進行編碼。
eval() 計算 JavaScript 字符串,並把它作爲腳本代碼來執行。
getClass() 返回一個 JavaObject 的 JavaClass。
isFinite() 檢查某個值是否爲有窮大的數。
isNaN() 檢查某個值是否是數字。
Number() 把對象的值轉換爲數字。
parseFloat() 解析一個字符串並返回一個浮點數。
parseInt() 解析一個字符串並返回一個整數。
String() 把對象的值轉換爲字符串。
unescape() 對由 escape() 編碼的字符串進行解碼。

頂層屬性(全局屬性)

方法 描述
Infinity 代表正的無窮大的數值。
java 代表 java.* 包層級的一個 JavaPackage。
NaN 指示某個值是不是數字值。
Packages 根 JavaPackage 對象。
undefined 指示未定義的值。

全局對象描述

全局對象是預定義的對象,作爲 JavaScript 的全局函數和全局屬性的佔位符。通過使用全局對象,可以訪問所有其他所有預定義的對象、函數和屬性。全局對象不是任何對象的屬性,所以它沒有名稱。

在頂層 JavaScript 代碼中,可以用關鍵字 this 引用全局對象。但通常不必用這種方式引用全局對象,因爲全局對象是作用域鏈的頭,這意味着所有非限定性的變量和函數名都會作爲該對象的屬性來查詢。例如,當JavaScript 代碼引用 parseInt() 函數時,它引用的是全局對象的 parseInt 屬性。全局對象是作用域鏈的頭,還意味着在頂層 JavaScript 代碼中聲明的所有變量都將成爲全局對象的屬性。

全局對象只是一個對象,而不是類。既沒有構造函數,也無法實例化一個新的全局對象。

在 JavaScript 代碼嵌入一個特殊環境中時,全局對象通常具有環境特定的屬性。實際上,ECMAScript 標準沒有規定全局對象的類型,JavaScript 的實現或嵌入的 JavaScript 都可以把任意類型的對象作爲全局對象,只要該對象定義了這裏列出的基本屬性和函數。例如,在允許通過 LiveConnect 或相關的技術來腳本化 Java 的 JavaScript 實現中,全局對象被賦予了這裏列出的 java 和 Package 屬性以及 getClass() 方法。而在客戶端 JavaScript 中,全局對象就是 Window 對象,表示允許 JavaScript 代碼的 Web 瀏覽器窗口。

例子

在 JavaScript 核心語言中,全局對象的預定義屬性都是不可枚舉的,所有可以用 for/in 循環列出所有隱式或顯式聲明的全局變量,如下所示:

var variables = "";

for (var name in this) 
{
variables += name + "<br />";
}

document.write(variables);
5.JS event(事件)

事件通常與函數配合使用,這樣就可以通過發生的事件來驅動函數執行。

事件句柄

HTML 4.0 的新特性之一是有能力使 HTML 事件觸發瀏覽器中的動作(action),比如當用戶點擊某個 HTML 元素時啓動一段 JavaScript。下面是一個屬性列表,這些屬性可插入 HTML 標籤來定義事件動作。

屬性 當以下情況發生時,出現此事件 FF N IE
onabort 圖像加載被中斷 1 3 4
onblur 元素失去焦點 1 2 3
onchange 用戶改變域的內容 1 2 3
onclick 鼠標點擊某個對象 1 2 3
ondblclick 鼠標雙擊某個對象 1 4 4
onerror 當加載文檔或圖像時發生某個錯誤 1 3 4
onfocus 元素獲得焦點 1 2 3
onkeydown 某個鍵盤的鍵被按下 1 4 3
onkeypress 某個鍵盤的鍵被按下或按住 1 4 3
onkeyup 某個鍵盤的鍵被鬆開 1 4 3
onload 某個頁面或圖像被完成加載 1 2 3
onmousedown 某個鼠標按鍵被按下 1 4 4
onmousemove 鼠標被移動 1 6 3
onmouseout 鼠標從某元素移開 1 4 4
onmouseover 鼠標被移到某元素之上 1 2 3
onmouseup 某個鼠標按鍵被鬆開 1 4 4
onreset 重置按鈕被點擊 1 3 4
onresize 窗口或框架被調整尺寸 1 4 4
onselect 文本被選定 1 2 3
onsubmit 提交按鈕被點擊 1 2 3
onunload 用戶退出頁面 1 2 3

二、BOM對象(Browser object   model  瀏覽器對象模型)

在BOM對象中,包含有window、navigator、screen、history、location等對象。

1.window對象

1.Window 對象集合

集合 描述
frames[]

返回窗口中所有命名的框架。

該集合是 Window 對象的數組,每個 Window 對象在窗口中含有一個框架或 <iframe>。屬性 frames.length 存放數組 frames[] 中含有的元素個數。注意,frames[] 數組中引用的框架可能還包括框架,它們自己也具有 frames[] 數組。

Window 對象屬性

屬性 描述
closed 返回窗口是否已被關閉。
defaultStatus 設置或返回窗口狀態欄中的默認文本。
document 對 Document 對象的只讀引用。請參閱 Document 對象
history 對 History 對象的只讀引用。請參數 History 對象
innerheight 返回窗口的文檔顯示區的高度。
innerwidth 返回窗口的文檔顯示區的寬度。
length 設置或返回窗口中的框架數量。
location 用於窗口或框架的 Location 對象。請參閱 Location 對象
name 設置或返回窗口的名稱。
Navigator 對 Navigator 對象的只讀引用。請參數 Navigator 對象
opener 返回對創建此窗口的窗口的引用。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部寬度。
pageXOffset 設置或返回當前頁面相對於窗口顯示區左上角的 X 位置。
pageYOffset 設置或返回當前頁面相對於窗口顯示區左上角的 Y 位置。
parent 返回父窗口。
Screen 對 Screen 對象的只讀引用。請參數 Screen 對象
self 返回對當前窗口的引用。等價於 Window 屬性。
status 設置窗口狀態欄的文本。
top 返回最頂層的先輩窗口。
window window 屬性等價於 self 屬性,它包含了對窗口自身的引用。
  • screenLeft
  • screenTop
  • screenX
  • screenY
只讀整數。聲明瞭窗口的左上角在屏幕上的的 x 座標和 y 座標。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 對象方法

方法 描述
alert() 顯示帶有一段消息和一個確認按鈕的警告框。
blur() 把鍵盤焦點從頂層窗口移開。
clearInterval() 取消由 setInterval() 設置的 timeout。
clearTimeout() 取消由 setTimeout() 方法設置的 timeout。
close() 關閉瀏覽器窗口。
confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
createPopup() 創建一個 pop-up 窗口。
focus() 把鍵盤焦點給予一個窗口。
moveBy() 可相對窗口的當前座標把它移動指定的像素。
moveTo() 把窗口的左上角移動到一個指定的座標。
open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。
print() 打印當前窗口的內容。
prompt() 顯示可提示用戶輸入的對話框。
resizeBy() 按照指定的像素調整窗口的大小。
resizeTo() 把窗口的大小調整到指定的寬度和高度。
scrollBy() 按照指定的像素值來滾動內容。
scrollTo() 把內容滾動到指定的座標。
setInterval() 按照指定的週期(以毫秒計)來調用函數或計算表達式。
setTimeout() 在指定的毫秒數後調用函數或計算表達式。

Window 對象描述

Window 對象表示一個瀏覽器窗口或一個框架。在客戶端 JavaScript 中,Window 對象是全局對象,所有的表達式都在當前的環境中計算。也就是說,要引用當前窗口根本不需要特殊的語法,可以把那個窗口的屬性作爲全局變量來使用。例如,可以只寫document,而不必寫 window.document。

同樣,可以把當前窗口對象的方法當作函數來使用,如只寫 alert(),而不必寫 Window.alert()。

除了上面列出的屬性和方法,Window 對象還實現了核心 JavaScript 所定義的所有全局屬性和方法。

Window 對象的 window 屬性和 self 屬性引用的都是它自己。當你想明確地引用當前窗口,而不僅僅是隱式地引用它時,可以使用這兩個屬性。除了這兩個屬性之外,parent 屬性、top 屬性以及 frame[] 數組都引用了與當前 Window 對象相關的其他 Window 對象。

要引用窗口中的一個框架,可以使用如下語法:

frame[i]		//當前窗口的框架
self.frame[i]	//當前窗口的框架
w.frame[i]	//窗口 w 的框架

要引用一個框架的父窗口(或父框架),可以使用下面的語法:

parent		//當前窗口的父窗口
self.parent	//當前窗口的父窗口
w.parent 		//窗口 w 的父窗口

要從頂層窗口含有的任何一個框架中引用它,可以使用如下語法:

top		//當前框架的頂層窗口
self.top		//當前框架的頂層窗口
f.top		//框架 f 的頂層窗口

新的頂層瀏覽器窗口由方法 Window.open() 創建。當調用該方法時,應把 open() 調用的返回值存儲在一個變量中,然後使用那個變量來引用新窗口。新窗口的opener 屬性反過來引用了打開它的那個窗口。

一般來說,Window 對象的方法都是對瀏覽器窗口或框架進行某種操作。而 alert() 方法、confirm() 方法和 prompt 方法則不同,它們通過簡單的對話框與用戶進行交互。


2.Navigator 對象

Navigator 對象

Navigator 對象包含有關瀏覽器的信息。

註釋:沒有應用於 navigator 對象的公開標準,不過所有瀏覽器都支持該對象。

Navigator 對象集合

集合 描述
plugins[]

返回對文檔中所有嵌入式對象的引用。

該集合是一個 Plugin 對象的數組,其中的元素代表瀏覽器已經安裝的插件。Plug-in 對象提供的是有關插件的信息,其中包括它所支持的 MIME 類型的列表。

雖然 plugins[] 數組是由 IE 4 定義的,但是在 IE 4 中它卻總是空的,因爲 IE 4 不支持插件和 Plugin 對象。

Navigator 對象屬性

屬性 描述
appCodeName 返回瀏覽器的代碼名。
appMinorVersion 返回瀏覽器的次級版本。
appName 返回瀏覽器的名稱。
appVersion 返回瀏覽器的平臺和版本信息。
browserLanguage 返回當前瀏覽器的語言。
cookieEnabled 返回指明瀏覽器中是否啓用 cookie 的布爾值。
cpuClass 返回瀏覽器系統的 CPU 等級。
onLine 返回指明系統是否處於脫機模式的布爾值。
platform 返回運行瀏覽器的操作系統平臺。
systemLanguage 返回 OS 使用的默認語言。
userAgent 返回由客戶機發送服務器的 user-agent 頭部的值。
userLanguage 返回 OS 的自然語言設置。

Navigator 對象方法

方法 描述
javaEnabled() 規定瀏覽器是否啓用 Java。
taintEnabled() 規定瀏覽器是否啓用數據污點 (data tainting)。

Navigator 對象描述

Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進行平臺專用的配置。

雖然這個對象的名稱顯而易見的是 Netscape 的 Navigator 瀏覽器,但其他實現了 JavaScript 的瀏覽器也支持這個對象。

Navigator 對象的實例是唯一的,可以用 Window 對象的 navigator 屬性來引用它。


3.Screen 對象

Screen 對象包含有關客戶端顯示屏幕的信息。

註釋:沒有應用於 screen 對象的公開標準,不過所有瀏覽器都支持該對象。

Screen 對象屬性

屬性 描述
availHeight 返回顯示屏幕的高度分辨率 (除 Windows 任務欄之外)。
availWidth 返回顯示屏幕的寬度分辨率 (除 Windows 任務欄之外)。
bufferDepth 設置或返回調色板的比特深度。
colorDepth 返回目標設備或緩衝器上的調色板的比特深度。
deviceXDPI 返回顯示屏幕的每英寸水平點數。
deviceYDPI 返回顯示屏幕的每英寸垂直點數。
fontSmoothingEnabled 返回用戶是否在顯示控制面板中啓用了字體平滑。
height 返回顯示屏幕的高度的分辨率。
logicalXDPI 返回顯示屏幕每英寸的水平方向的常規點數。
logicalYDPI 返回顯示屏幕每英寸的垂直方向的常規點數。
pixelDepth 返回顯示屏幕的顏色分辨率(比特每像素)。
updateInterval 設置或返回屏幕的刷新率。
width 返回顯示器屏幕的寬度的分辨率。

Screen 對象描述

每個 Window 對象的 screen 屬性都引用一個 Screen 對象。Screen 對象中存放着有關顯示瀏覽器屏幕的信息。JavaScript 程序將利用這些信息來優化它們的輸出,以達到用戶的顯示要求。例如,一個程序可以根據顯示器的尺寸選擇使用大圖像還是使用小圖像,它還可以根據顯示器的顏色深度選擇使用 16 位色還是使用 8 位色的圖形。另外,JavaScript 程序還能根據有關屏幕尺寸的信息將新的瀏覽器窗口定位在屏幕中間。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章