VOOZH about

URL: https://read01.com/NNmddn.html

⇱ day12—JavaScript基礎 - 壹讀


Sunday, Apr 12, 2026

day12—JavaScript基礎

2016/03/12 來源:CSDN博客
JavaScript


應用方式

語法規範

流程控制

常用內置對象

window對象

什麼是JavaScript:

JavaScript是一種基於對象和事件驅動的客戶端腳本語言,同時也是一種廣泛應用於客戶端Web開發的腳本語言,常用來給HTML網頁添加

動態功能,比如響應用戶的各種操作。

JavaScript 作為一種腳本語言(腳本語言是一種輕量級的程式語言),可以向 HTML 頁面添加交互行為,通常被直接嵌入 HTML 頁面。

JavaScript作為客戶端程序嵌入網頁有三種方式:

直接在HTML標記中(事件處理程序中使用JavaScript)

使用script標記

使用外部文件

嵌入式:<script> 標籤

可以在頁面上嵌入 <script></script> 標籤,並在標籤中放置 JavaScript 代碼,然後在 HTML 元素的事件中調用它。

<script type="text/javascript" language="javascript" > function method1 { alert("hello in method1."); } </script>文件調用方式:js 文件

可以將 JavaScript 代碼寫入一個單獨的文件,並保存為後綴為 js 的文件,然後在html 頁面的 <head> 中引用外部的 .js 文件。

<script language="JavaScript" src="myJS.js" type="text/javascript"> </script>

語法規範

JavaScript 是一種弱類型的語言,因此,在變量聲明時,使用 var 關鍵字即可,不用指定變量的數據類型,代碼如下所示:

var a = 10; var b = 'abc' var x;

沒有初始化的變量則自動取值為 undefined。

變量命名同標識符的規則,且大小寫敏感。

數據類型轉換函數

toString:轉換成字符串,所有數據類型均可轉換為 string 類型;

parseInt:強制轉換成整數,如果不能轉換,則返回 NaN(not a number);

parseFloat:強制轉換成浮點數,如果不能轉換,則返回 NaN

typeof:查詢數值當前類型,返回 string / number / boolean / object;

isNaN:判斷是否為數值,返回 true/false。

JavaScript常用內置對象

簡單對象:String、Number、Boolean

組合對象:Array、Math、Date

複雜對象:Function、Regex、Object等

x.toLowerCase、x.toUpperCase:大小寫轉換方法;

x.charAt(index):返回指定位置的字符;

x.charCodeAt(index):返回指定位置字符的Unicode編碼;

x.indexOf(findstr,index)、x.lastIndexOf(findstr,index):獲取指定字符;

x.substring(start, end): 獲取子字符串;

x.replace(findstr,tostr):替換子字符串;

x.split(bystr): 拆分子字符串。

ps:通常可以用x.lastIndexOf(findstr,index)和x.substring(start, end)方法結合使用,獲取文件後綴名

String 對象的 replace、split、search和 match 方法經常結合正則表達式使用,以實現更為複雜的功能。比如:

var str1 = "abc123def";

var str2 = str1.replace(/\d/gi,"*");

alert(str2);//abc***def

var array = str1.match(/\d/g);

alert(array.toString);//1,2,3

var index = str1.search(/\d/);

alert(index);//3

上述代碼中,「/\d/g「是一個正則表達式,結合string 對象的replace方法使用,將替換所有的數字;而match方法將返回所有的數字所組成的數組;search方法將返回複合條件的第一個子字符串的位置。

更多正則表達式的使用,請見:



Array 對象

Array 對象用於在單個的變量中存儲多個值。創建 Array 對象的語法:

new Array;length 欄位為 0

new Array(size); length 欄位為 size

var arr = [12,true,」aaa」];// 簡單數組創建

需要注意的是,JavaScript 本身是一種弱類型的語言,因此,在數組中,也可以存入不同數據類型的數值。

Array 對象的常用方法

1、join 方法。把數組中的所有元素放入一個字符串,元素是通過指定的分隔符進行分隔的。

arrayObject.join(separator) //參數 separator可選,表示要使用的分隔符。如果省略該參數,則使用逗號作為分隔符。

2、toString 方法

某些情況下,需要顯式地調用該方法。

3、concat 方法,用於連接兩個或多個數組,該方法不會改變現有的數組,而僅僅會返回被連接數組的一個副本。

arrayObject.concat(arrayX,arrayX,......,arrayX)

4、slice 方法

arrayObject.slice(start,end) 從已有的數組中返回選定的元素。

Array數組倒轉與排序

1、reverse 方法

arrayObject.reverse用於顛倒原數組中元素的順序。

2、sort 方法

arrayObject.sort(sortby)用於對數組的元素進行排序。

Math 對象

Math 對象用於執行數學任務

Math 對象的常用屬性都是數學常數,如Math.E(自然數)、Math.PI(圓周率)、Math.LN2(ln2)、Math.LN10 (ln10)等。

其他常用屬性和方法:

三角函數:Math.sin(x) 、 Math.cos(x)、 Math.tan(x) 等;

反三角函數:Math.asin(x) 、 Math.acos(x) 等;

計算函數:Math. sqrt(x) 、 Math.log(x) 、 Math.exp(x)等;

數值比較函數:Math.abs(x)、 Math.max(x,y,...)、Math.random、 Math.round(x)、Math.pow(底數,幾次方)等。

ps:其中 Math.random—取0~1間的隨機數,Math.pow(底數,幾次方)比較常用

Number 對象

Number 對象是原始數值的包裝對象。創建 Number 對象的語法如下

var myNum=new Number(value);

var myNum=Number(value);

Number 對象的常用方法

1、toString(radix) 方法

2、NumberObject.toFixed(num)方法 //常用

四捨五入為指定小數位數的數字。

RegExp 對象

RegExp 對象表示正則表達式,它是對字符串執行模式匹配的強大工具。創建正則表達式對象有兩種方式:

直接量語法:

/pattern/attributes

創建 RegExp 對象的語法:

new RegExp(pattern, attributes);

其中,參數 pattern 是一個字符串,指定了正則表達式的模式或其他正則表達式;參數 attributes 是一個可選的字符串,包含屬性 "g"、"i" 和 "m",分別用於指定全局匹配、區分大小寫的匹配和多行匹配。

如果 pattern 不是合法的正則表達式,或 attributes 含有 "g"、"i" 和 "m" 之外的字符,則會拋出異常。

RegExp 對象的常用方法

正則表達式對象在 JavaScript 中,除了可以配合 String 對象的 split/replace/search/match 方法使用之外,還可以使用正則表達式對象自身的方法,實現對文本字符串的匹配測試。

正則表達式對象最常用的方法就是 test 。該方法用於檢測一個字符串是否匹配某個模式,語法如下:

RegExpObject.test(string)

Date對象

Date 對象用於處理日期和時間。創建 Date 對象的語法如下:

var nowDate=new Date

使用上述代碼創建 Date 對象時,會自動把當前日期和時間保存為其初始值。

也可以在創建 Date 對象時,指定其日期和時間,代碼如下所示:

var myDate=new Date("2014/3/20 11:12");

Date 對象的常用方法分為三種:

1、獲取日期數據

getDate、getDay、getFullYear、getMonth等。// 日 ,星期幾,年 ,月

2、修改日期數據

setDate、setDay、setFullYear、getMonth等。

3、獲取日期格式的字符串

toString、toLocaleTimeString、toLocaleDateString等。 //第二個函數返回單天的時分秒,第三個函數返回當天的年月日

Function 對象

函數是定義一次卻可以調用或執行任意多次的一段 JavaScript 代碼。在 JavaScript 中,函數實際上是功能完整的對象,Function 類可以表示開發者定義的任何函數。

不傳遞參數

function subname{}

傳遞參數

function subname(p1){}

傳遞多個參數

function subname(p1,p2){}

返回值

function subname(p1){return p;}

window 對象

所有瀏覽器都支持 window 對象,所有的 JavaScript 全局對象、函數以及變量均自動成為 window 對象的成員。因為它是全局對象,表示最頂層的瀏覽器窗口,要引用當前窗口對象調用方法只需要寫方法即可。

window 對象的常用屬性有:

document:窗口中顯示的 HTML 文檔對象

history:瀏覽過窗口的歷史記錄對象

location:窗口文件地址對象

navigator:有關瀏覽器的信息

event:事件對象

screen:屏幕對象

name:窗口名稱

opener:打開當前窗口的 window 對象

window 對象的常用方法有:

alert,confirm,prompt:對話框

close,open:關閉、打開窗口

focus,blur:窗口獲得焦點或者失去焦點

moveBy,moveTo移動窗口

resizeBy,resizeTo:調整窗口大小

scrollBy,scrollTo:滾動窗口中網頁的內容

窗口和對話框

1、alert(message)用於顯示帶有一條指定消息和一個 OK 按鈕的警告框

2、confirm(message)

用於顯示一個帶有指定消息和 OK 及取消按鈕的對話框。

其中,參數 message要在 window 上彈出的對話框中顯示的純文本(而非 HTML 文本)。如果用戶點擊確定按鈕,則 confirm 返回 true。如果點擊取消按鈕,則 confirm 返回 false。

3、prompt(text,defaultText)

用於顯示可提示用戶進行輸入的對話框。其中參數 text 可選,為要在對話框中顯示的純文本,參數 defaultText 也是可選的,表示默認的輸入文本。

窗口的打開和關閉

window.open(URL,name,features,replace)

用於打開一個新的瀏覽器窗口或查找一個已命名的窗口

URL:一個可選的字符串,聲明了要在新窗口中顯示的文檔的 URL。如果省略了這個參數,或者它的值是空字符串,那麼新窗口就不會顯示任何文檔。

name:一個可選的字符串,該字符串是一個由逗號分隔的特徵列表,其中包括數字、字母和下劃線,該字符聲明了新窗口的名稱。這個名稱可以用作標記 <a> 和 <form> 的屬性 target 的值。如果該參數指定了一個已經存在的窗口,那麼 open 方法就不再創建一個新窗口,而只是返回對指定窗口的引用。在這種情況下,features 將被忽略。

features:一個可選的字符串,聲明了新窗口要顯示的標準瀏覽器的特徵。如果省略該參數,新窗口將具有所有標準特徵。

replace:一個可選的布爾值。規定了裝載到窗口的 URL 是在窗口的瀏覽歷史中創建一個新條目,還是替換瀏覽歷史中的當前條目。

定時器

通過使用 JavaScript,可以作到在一個設定的時間間隔之後來執行代碼,而不是在函數被調用後立即執行,我們稱之為定時事件。定時器多用於網頁動態時鐘、製作倒計時、跑馬燈效果等。有兩種定時器:

周期性時鐘:以一定的間隔執行代碼,循環往復

一次性時鐘:在一個設定的時間間隔之後來執行代碼

周期性定時器

按照指定的周期(以毫秒計)來調用函數或計算表達式,且不停地調用函數,直到 clearInterval 被調用或窗口被關閉。

setInterval(code,millisec[,"lang"])

參數 code 必需,表示要調用的函數或要執行的代碼串;

參數 millisec 也是必需,表示周期性執行或調用 code 之間的時間間隔,以毫秒計。

該方法返回所啟動的定時器對象,可以傳遞給 Window.clearInterval 從而取消對 code 的周期性執行的值。

一次性定時器

用於啟動一個一次性定時器,該方法在指定的毫秒數後調用函數或計算表達式。語法如下:

setTimeout(code,millisec)

參數 code 必需,是要調用的函數後要執行的 JavaScript 代碼串;millisec 也是必需的 ,表示在執行代碼前需等待的毫秒數。

需要注意的是,setTimeout 只執行 code 一次。如果需要實現多次調用的效果,請使用 setInterval 或者讓 code 自身再次調用 setTimeout。

clearTimeout 方法可取消由 setTimeout 方法設置的 timeout,只需要傳入由 setTimeout 返回的 ID 值即可。
最新文章 / 服務條款 / 私隱保護 / DMCA / 聯絡我們

壹讀/READ01.COM