Web基礎之JavaScript(一)

JavaScript概述:
+ 是一種網頁編程技術,用來向HTML頁面添加動態交互效果;
+ 是一種基於對象和事件驅動的解釋性腳本語言,具有與Java和C語言類似的語法;
+ 可直接嵌入HTML頁面,由瀏覽器解釋執行,不進行預編譯。
發展史
+ 正式名稱是“ECMSCript”,由ECMA組織發展和維護;
+ CMA-262是正式的JavaScript(Netscape)和JScript(Microsoft)。
+ 網景公司在Netscape2.0首先推出了JavaScript。微軟公司從IE3.0開始提供對客戶端JavaScript的支持,並另取名爲JScript。
特點
+ 可以使用任何文本編輯工具編寫,只需要瀏覽器就可以執行程序。
+ 解釋執行:事先不解釋,逐行執行。
+ 基於對象:內置大量現成對象。
+ 適宜:客戶端數據計算、客戶端表單合法性驗證、瀏覽器事件的觸發、網頁特殊顯示效果製作。
定義方式
+ 直接定義在事件中。如:

<input type="button" value="第一個按鈕" οnclick="alert('hello world');"/>

在標籤中嵌入標籤,在其中放置javaScript代碼;
+ 將代碼寫在單獨的.js文件中,在html頁面的裏使用

<head> <script language="javascript" src="myScript.js"></script> </head>

錯誤查看
+ 解釋性代碼,若代碼錯誤,則頁面無任何效果。
+ 使用瀏覽器裏的開發者工具;

註釋:單行使用// ; 多行使用:/**/

JavaScript基礎語法
編寫
+ 由Unicode字符集編寫。
+ 語句:表達式、關鍵字、運算符組成;大小寫敏感;使用分號結束。
常量、標識符和關鍵字
1)常量:直接在程序中出現的數據值(字面量),用完就丟棄了。如alert(“hello”);
2)標識符:由不以數字開頭的字母、數字、下劃線、$組成。常用於表示函數、變量等的名稱。不能和保留關鍵字重複,如break、if等。
3)關鍵字:只有系統才能用的標識符。
變量
1)聲明:使用關鍵字var聲明變量,如var x,y;
【注意:以var關鍵字聲明,聲明的時候不確定類型,變量的類型以賦值爲準。如:var x,y,z; x=10; y=”mary”; z=true;】
2)變量初始化:使用等號賦值。
【注意:沒有初始化的變量則自動取值爲undefined,如:var count = 0;】
3)變量命名同標識符的規則,大小寫敏感。
數據類型
1)基本類型:number數字、string字符串、boolean布爾
2)特殊類型:null空、undefined未定義
3)複雜類型:array數組、object對象
number數字
—> 不區分整型數值和浮點型數值:所有數字都採用64位浮點格式存儲,類似於double格式。
—> 整數:16進制數前面加上0x,8進制前面加0。
—> 浮點數:使用小數點記錄數據,如3.4,5.6;使用指數記錄數據,如4.3e23=4.3X10^23
string字符串:
—> 表示文本:由Unicode字符、數字、標點符號組成的序列。
—> 首尾由單引號或雙引號括起來。
—> 特殊字符需要轉義,用轉義符\,如:\n,\,\’,\“
【注意:可用在正則表達式,只允許錄入漢字[^\u4e00-\u9fa5$],每個漢字都有轉義符。】
boolean布爾
—>僅有兩個值:true和false;實際運算中true=1,false=0

數據類型的轉換
1)轉換方式
—> 隱式轉換:使用隱式自動轉換規則直接轉換
—> 顯式轉換:利用系統提供的函數
【注意:不建議使用隱式轉換】
隱式轉換
1)JavaScript屬於鬆散類型的程序語言
—> 變量在聲明時不需要指定數據類型。
—> 變量由賦值操作確定數據類型。
2)不同類型數據在計算過程中會自動進行轉換
—> ①數字+字符串:數字轉換爲字符串
—> ②數字+布爾值:true轉換爲1,false轉換爲0
—> ③字符串+布爾值:布爾值轉換爲字符串true或false
—> ④布爾值+布爾值:布爾值轉換爲數值1或0
顯式轉換
toString:轉成字符串,所有數據類型均可轉換爲string類型。
parseInt:強制轉換成整數,如果不能轉換,則返回NaN。(去尾法)
parseFloat:牽制轉換成浮點數,如果不能轉換,則返回NaN。
typeof:查詢數值當前類型,返回string/number/boolean/object。
NaN:not a number,非常特殊,它不是數字,所以任何數跟它都不相等,甚至NaN本身也不等於NaN
isNaN(str):is not a number,判斷文本是否爲數值,false爲數值,true爲非數值
null:null在程序中代表“無值”或者“無對象”。可以通過給一個變量賦值null來清除變量的內容。
undefined:聲明瞭變量但從未賦值或這對象屬性不存在。

  • 算術運算:+ - * / %
  • 關係運算:> < <= >= == != ===(嚴格相等,值與類型都相等) !==(非嚴格相等)
  • 邏輯運算:! && ||
  • 條件運算:? :
  • 流程控制:switch-case for while

JavaScript常用內置對象
*概念:
1)JavaScript是一種基於對象的語言,對象是JavaScript中最重要的元素。
2)JavaScript包含多種對象:內置對象、自定義對象、瀏覽器對象、HTML DOM對象、ActiveX對象
* 使用:
1)對象由屬性和方法封裝而成。
2)屬性的引用:使用點“.”運算符、通過下標的方式引用。
3)對象的方法的引用:ObjectName.methods()。
* 常用內置對象
1)簡單數據對象:String、Number、Boolean
2)組合對象:Array、Date、Math
3)複雜對象:Function、RegExp

String
1)創建:var str1 = “hello world”; var str2 = new String(“hello world”);
2)屬性:length;如:str1.length;
3)方法:
—> toLowerCase():轉爲小寫;
—> charAt(index)/charCodeAt(index):獲取index處的字符/Unicode編碼
—> indexOf(str) / lastIndexOf(str):查詢位置,沒有則返回-1
—> substring(start,end):截取
—> substr(start,length):截取
—> replace(oldStr,newStr):替換
—> split(bystr):分割
正則相關
—> replace(regexp,newstr):根據正則替換
—> match(regexp):返回匹配字符串的數組
—> search(regexp):返回匹配的首個字符串的索引值
匹配模式:JavaScript中使用正則表達式:使用兩個斜槓, / 表達式 / 匹配模式
① g:global,全局匹配;② m:multilin,多行匹配;③ i:忽略大小寫匹配。
如:var array=str1.match(/\d/g); //即全局匹配數字

  • Array
    一列有多個數據。可以有不同類型的數據。JavaScript只有數組沒有集合;
    1)創建:
    ① var arr = [“mary”,10,true];//用中括號!不是大括號;常用;聲明的同時並賦值。
    ② var arr = new Array(“mary”,10,true);//聲明的同時並賦值。
    ③ var arr = new Array();或var arr = new Array(7);//可有長度也可沒有長度。即便寫了長度,也能把第8個數據存入!先聲明後賦值。
    2)屬性:length;
    3)二維數組:通過指定數組中的元素爲數組的方式可以創建二維甚至多維數組。week[0][1] = “Monday”;
    4)方法:
    —> join(str):以bystr作爲連接數組中元素的分隔字符,返回拼接後的數組。
    //也可直接使用新的下標賦值,如:var arr = new Array(4);arr[5]=5;
    —>* toString()*:輸出數組的內容(以逗號隔開)。
    —> concat(value,…):value作爲數組元素連接到數組的末尾(數組連接),返回連接後的一個新數組。原數組內容不變。
    —> slice(start,end):截取從start開始到end結束(不包含end)的數組元素。end省略代表從start開始到數組結尾。
    —> reverse():數組反轉,改變原數組元素的順序。
    —> pop(): 刪除並返回最後一個元素
    —> shift():刪除並返回第一個元素
    —>unshift():向數組開頭添加一個或更多元素,並返回新的長度
    —> push():向數組末尾添加一個或更多元素,並返回新的長度
    —> splice():刪除元素,並向數據添加新元素
    —>toSource():返回該對象的源代碼。
    —> valueOf():返回數組對象原始值。
    —> sort():數組排序,默認按照字符串的編碼順序進行排序。
    —> sort(sortfunc):sortfunc用來確定元素順序的函數名。函數的形式如:
function(a,b) { return a-b; }

Math
用於執行數字相關。
1)沒有構造函數Math()。
2)不需要創建,直接把Math作爲對象使用就可以調用其所有屬性和方法。如:不需要創建var data=Math.PI; 直接使用Math.PI;像Java中的靜態類一樣。
3)常用屬性:都是數學常數,如:Math.E(自然數)、Math.PI(圓周率)、Math.LN2(ln2)、Math.LN10(ln10)等
4)常用方法:
①三角函數: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.random():是一個 >=0 且 <1 的正小數;②Math.floor(x):地板,小於等於x,並且與它最接近的整數。注意:將負數舍入爲更小的負數,而不是向0進行舍入。③Math.ceil(x):天花板,返回大於等於x,並且與它最接近的整數。注意:不會將負數舍入爲更小的負數,而是向0舍入。】

Number
是對原始數值的包裝對象。
1)創建:
① var myNum=new Number(value);
② var myNun=Number(value);
2)方法:
—>toString:數值轉換爲字符串
—>toFixed(n):數值轉換爲字符串,並保留小數點後n位數,多了就截斷,四捨五入。少了就用0補足,常用作數值的格式化。

RegExp
正則表達式對象。JavaScript中,正則表達式的應用分爲兩類:
① 和String對象的三個方法結合使用,實現對string的操作,如:replace/match/search
② 調用正則表達式對象的常用test方法測試,RegExpObject.test(string):如果字符串string中含有與RegExpObject匹配的文本,則返回true,否則返回false;
1)創建:
① var reg1=/^\d{3,6}/;varreg2=newRegExp(\d3,6 ”);

Date
用於處理日期和時間
1)創建:
① var now = new Date();//當前日期和時間
② var now = new Date(“2013/01/01 12:12:12”)/(“Oct 1, 2013”)/(2013,1,1);
2)方法:
—> 讀取相關:getDay()(星期)、getDate()、getMonth()、getFullYear()…
—> 修改相關:setDay()、setDate()、setMonth()、setHours() ……
—> 轉換字符串:得到某種格式的字符串顯式,常用於頁面顯式,如:toString()、toDateString()、toLocaleTimeString()

Function
函數。是一組可以隨時隨地運行的語句。Function對象可以表示開發者定義的任何函數。函數實際上是功能完整的對象。
1)定義::function 函數名(參數){ 函數體; return; }
【注意:由關鍵字function定義;函數名的定義規則與標識符一致,大小寫敏感;可以使用變量、常量或表達式作爲函數調用的參數;返回值必須使用return。】
2)調用:函數可以通過其名字加上括號中的參數進行調用。如果有多個參數,則參數之間用逗號隔開。
3)創建:
① 使用function關鍵字明文的聲明一個方法(最常用,用於功能相關的方法)
② 使用Function對象創建函數,語法:
var functionName=new Function(arg1,…argN,functionBody);//最後一個參數是方法體,前面的其它參數是方法的參數。

<input type="button" value="使用Function對象創建函數" οnclick="testFunction();" />
function testFunction(){
var f = new Function("a","b","alert(a+b);");
f(10,20);
}

【注意:需求:有些方法不需要顯式的存在,只是爲其他方法裏所使用(類似於java中的內部類);缺陷:方法體不能複雜。】

③ 創建匿名函數,語法:
var func=function(arg1,…argN){ func_body; return value; }
4)全局函數 :可用於所有內建的JavaScript對象。常用的全局函數有:
—> encodeURI(str):把字符串作爲URI進行編碼(大寫i)。
—> decodeURI(str):對encodeURI()函數編碼過的URI進行解碼。
—> parseInt/parseFloat:
—> isNaN(str):判斷文本是否爲數值
—> eval(str):用於計算某個字符串,以得到結果;或者用於執行其中的JavaScript代碼。【注意:eval(str)只接受原始字符串作爲參數,如果參數中沒有合法的表達式和語句,則拋出異常;如eval(“2+3”)。】

Arguments
1) 是一種特殊對象,在函數代碼中,代表當前方法被傳入的所有的參數,形成一個數組。
2)在函數代碼中,可以使用arguments訪問所有參數。
①arguments.length:函數的參數個數; ②arguments.[i]:第i個參數
3)JavaScript中,沒有傳統意義上的重載(方法名相同,但是參數不同),即:如果方法名相同,則以最後一次定義的爲準。如果想在JavaScript中實現類似於重載的效果,就需要使用arguments對象。即在同名方法體中判斷參數的個數來確定方法體。如

function(){ if(argumtents.length==1){…} else{…} }

博客地址:Web基礎之JavaScript(一)

發佈了46 篇原創文章 · 獲贊 7 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章