JavaScript的基礎學習(一)
一、JavaScript概述
1.1?JavaScript的歷史
● 1992年Nombas開發出C-minus-minus(C--)的嵌入式腳本語言(最初綁定在CEnvi軟件中).后將其改名ScriptEase.(客戶端執行的語言)
●? Netscape(網景)接收Nombas的理念,( Brendan Eich) 在其Netscape Navigator 2.0產品中開發出一套livescript的腳本語言.Sun和Netscape共同完成.后改名叫Javascript
●? 微軟隨后模仿在其IE3.0的產品中搭載了一個JavaScript的克隆版叫Jscript.
●? 為了統一三家,ECMA( 歐洲計算機制造協會)定義了ECMA-262規范.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規范.
1.2 ECMAScript
盡管 ECMAScript 是一個重要的標準，但它并不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
●? 核心（ECMAScript）?
●? 文檔對象模型（DOM） Document object model (整合js，css，html)
●? 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
●? Javascript 在開發中絕大多數情況是基于對象的.也是面向對象的. ?
?簡單地說，ECMAScript描述以下內容:
● 語法
● 類型
● 語句
● 關鍵字
● 保留字
● 運算符
● 對象(封裝、繼承、多態)基于對象的語言，使用對象
1.3 JavaScript的引入方式
Title
二、JavaScript基礎
2.1 變量
x=12
y=16
z=x+y
在代數中，我們使用字母(比如x)來保存值(比如12)。
通過上面的表達式z=x+y,我們能夠計算出z的值為28.
在JavaScript中，這些字母被稱為變量。
0變量時弱類型的(很隨便)；
1、聲明變量時不用聲明變量類型，全部使用var關鍵字；
1 var a;
2、一行可以聲明多個變量，并且可以是不同類型；
1 var name='simon', age=23, job='teacher';
3、聲明變量時，可以不用var,如果不用var，那么它是全局變量。
4、變量命名，首字母只能是字母，下劃線，$美元符 三選一，且區分大小寫，x與X是兩個變量
5、變量還應遵循以下命名規則：
Camel 標記法
首字母是小寫的，接下來的字母都以大寫字符開頭。例如：
var myTestValue = 0, mySecondValue = "hi";
Pascal 標記法
首字母是大寫的，接下來的字母都以大寫字符開頭。例如：
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利類型標記法
在以 Pascal 標記法命名的變量前附加一個小寫字母（或小寫字母序列），說明該變量的類型。例如，i 表示整數，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";
注意：
function func1(){
var a = 123;
b=456
}
func1();
// alert(a);
// alert(b);
// 不推薦
2.2 基礎規范
1、每行結束可以不加分號，沒有分號會以換行符作為每行的結束
a=1;b=2
;
a=1 b=2;------
錯誤
a=1
b=2
//推薦
a=1
;
b=2
;
{
a=1
; b=2
; //推薦加tab a=1
; b=2
; }
2、注釋 支持多行注釋和單行注釋 /*? */? //
3、使用{}來封裝代碼塊
2.3 常量和標識符
常量 ?： 直接在程序中出現的數據值
標識符 ：
1、由 不以數字開頭 的字母、數字、下劃線(_)、美元符號($)組成
2、常 用于表示函數、變量等的名稱/
3、例如：_abc,$abc,abc,abc123是標識符，而1abc不是
4、JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符
?
三、 數據類型
?
3.1 數字類型(Number)
簡介
最基本的數據類型
不區分整型數值和浮點型數值
所有數字都采用64位浮點格式存儲，相當于Java和C語言中的double格式
能表示的最大值是±1.7976931348623157 x 10308
能表示的最小值是±5 x 10 -324
整數：
? ? ? ? ? ?在JavaScript中10進制的整數由數字的序列組成
? ? ? ? ? ?精確表達的范圍是?-9007199254740992 (-253) 到 9007199254740992 (253)
? ? ? ? ? ?超出范圍的整數，精確度將受影響
? 浮點數：
? ? ? ? ? ?使用小數點記錄數據
? ? ? ? ? ?例如：3.4，5.6
? ? ? ? ? ?使用指數記錄數據
? ? ? ? ? ?例如：4.3e23 = 4.3 x 1023
? 16進制和8進制數的表達
? ? ? ? ? ?16進制數據前面加上0x，八進制前面加0
? ? ? ? ? ?16進制數是由0-9,A-F等16個字符組成
? ? ? ? ? ?8進制數由0-7等8個數字組成
? ? ? ? ? ?16進制和8進制與2進制的換算
# 2進制: 1111 0011 1101 0100 <-----> 16進制:0xF3D4 <-----> 10進制:62420
# 2進制: 1 111 001 111 010 100 <-----> 8進制:0171724
3.2 字符串(String)
簡介
是由Unicode字符、數字、標點符號組成的序列
字符串常量首尾由單引號或雙引號括起
JavaScript中沒有字符類型
常用特殊字符在字符串中的表達
字符串中部分特殊字符必須加上右劃線\
常用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線
String數據類型的使用
● 特殊字符的使用方法和效果
● Unicode的插入方法
3.3 布爾型(Boolean)
簡介
Boolean類型僅有兩個值：true和false，也代表1和0，實際運算中true=1,false=0
布爾值也可以看作on/off、yes/no、1/0對應true/false
Boolean值主要用于JavaScript的控制語句，例如
if (x==1){
y=y+1;
}else {
y=y-1;
}
3.4 Null & Undefined
Undefined 類型
Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined";
Null 類型
另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。
盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用于表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那么找不到該對象時，返回的通常是 null。
var person=new Person()
var person=null
3.5 數據類型轉換
JavaScript屬于松散類型的程序語言
變量在聲明的時候并不需要指定數據類型
變量只有在賦值的時候才會確定數據類型
表達式中包含不同類型數據則在計算過程中會強制進行類別轉換
數字 +
字符串：數字轉換為字符串
數字 +
布爾值：true轉換為1，false轉換為0
字符串 + 布爾值：布爾值轉換為字符串true或false
3.6強制類型轉換函數
函數parseInt： 強制轉換成整數 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2"
)=1
函數parseFloat： 強制轉換成浮點數 parseFloat("6.12"
)=6.12
函數eval： 將字符串強制轉換為表達式并返回結果 eval("1+1")=2 ; eval("1<2")=true
3.7? 類型查詢函數( typeof )
ECMAScript提供了typeof運算符來判斷一個值是否在某種類型的范圍內。可以用這種運算符判斷一個值是否表示一種原始類型：如果它是原始類型，還可以判斷它表示哪種原始類型。
函數typeof ：查詢數值當前類型? (string / number / boolean /
object )
例如typeof("test"+3) "string"
例如typeof(null) "object "
例如typeof(true+1) "number"
例如typeof(true-false) "number"
// typeof:區分基本數據類型
console.log(typeof 123
);
console.log(typeof "hello"
);
console.log(typeof true
);
console.log(typeof null
);
console.log(typeof
undefined);
console.log(typeof [1,2,3,4
]); console.log(typeof {"name":"simon"});
顯示如下：
?
四、ECMAScript運算符
4.1?ECMAScript 算數運算符
加(＋)、 減(－)、 乘(*) 、除(/) 、余數(% ) 加、減、乘、除、余數和數學中的運算方法一樣 例如：9/2=4.5，4*5=20，9%2=1
-除了可以表示減號還可以表示負號 例如：x=-
y
+除了可以表示加法運算還可以用于字符串的連接 例如："abc"+"def"="abcdef"
遞增(+ +)、遞減(- -)
假如x=2，那么x++表達式執行后的值為3，x--
表達式執行后的值為1
i++相當于i=i+1，i--相當于i=i-1
遞增和遞減運算符可以放在變量前也可以放在變量后：--
i
var i=1
;
console.log(i++
);
console.log(++
i); console.log(i--
); console.log(--i);
一元加減法：
var a=1
;
var b=1
;
a=-a; //a=-1
var c="10"
;
alert(typeof
(c));
c=+c; //類型轉換
alert(typeof
(c));
// -------------------
var d="yuan"
; d=+
d; alert(d);//NaN:屬于Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會得到一個NaN數據 alert(typeof(d));//Number //NaN特點: var n=
NaN; alert(n>3
); alert(n<3
); alert(n==3
); alert(n==
NaN); alert(n!=NaN);//NaN參與的所有的運算都是false,除了!=
五、ECMAScript邏輯運算符
等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < ) ?大于等于(>=) 、小于等于(<=
)
與 (&&) 、或(||) 、非(!
)
&& 1 = 1 1 || 1 = 1
&& 0 = 0 1 || 0 = 1
&& 0 = 0 0 || 0 = 0
!0=1
!1=0
邏輯 AND 運算符(&&)
邏輯 AND 運算的運算數可以是任何類型的，不止是 Boolean 值。
如果某個運算數不是原始的 Boolean 型值，邏輯 AND 運算并不一定返回 Boolean 值：
- 如果某個運算數是 null，返回 null。?
- 如果某個運算數是 NaN，返回 NaN。?
- 如果某個運算數是 undefined，返回undefined。?
邏輯 OR 運算符(||)
與邏輯 AND 運算符相似，如果某個運算數不是 Boolean 值，邏輯 OR 運算并不一定返回 Boolean 值
六、ECMAScript賦值運算符
賦值 =
JavaScript中=代表賦值，兩個等號==
表示判斷是否相等
例如，x=
1表示給x賦值為1
if (x==1
){...}程序表示當x與1相等時
if(x==
“on”){…}程序表示當x與“on”相等時
配合其他運算符形成的簡化表達式
例如i+=1相當于i=i+1，x&=y相當于x=x&y
實例：
2 == “2
”
2 === “2
”
4 != “4
”
4 !== “4
”
var a = 2; var b = 4
;
var c = a
--
a; var c = a
--
a; var c = a
--
a; var c = a
--a;
七、ECMAScript等性運算符
執行類型轉換的規則如下：
- 如果一個運算數是 Boolean 值，在檢查相等性之前，把它轉換成數字值。false 轉換成 0，true 為 1。?
- 如果一個運算數是字符串，另一個是數字，在檢查相等性之前，要嘗試把字符串轉換成數字。?
- 如果一個運算數是對象，另一個是字符串，在檢查相等性之前，要嘗試把對象轉換成字符串。?
- 如果一個運算數是對象，另一個是數字，在檢查相等性之前，要嘗試把對象轉換成數字。?
在比較時，該運算符還遵守下列規則：
- 值 null 和 undefined 相等。?
- 在檢查相等性時，不能把 null 和 undefined 轉換成其他值。?
- 如果某個運算數是 NaN，等號將返回 false，非等號將返回 true。?
- 如果兩個運算數都是對象，那么比較的是它們的引用值。如果兩個運算數指向同一對象，那么等號返回 true，否則兩個運算數不等。?
八、ECMAScript關系運算符(重要)
var bResult = "Blue" < "alpha"
;
alert(bResult); //輸出 true
在上面的例子中，字符串 "Blue" 小于 "alpha"，因為字母 B 的字符代碼是 66，字母 a 的字符代碼是 97。
比較數字和字符串
另一種棘手的狀況發生在比較兩個字符串形式的數字時，比如：
var bResult = "25" < "3"
;
alert(bResult); //輸出 "true"
上面這段代碼比較的是字符串 "25" 和 "3"。兩個運算數都是字符串，所以比較的是它們的字符代碼（"2" 的字符代碼是 50，"3" 的字符代碼是 51）。
不過，如果把某個運算數該為數字，那么結果就有趣了：
var bResult = "25" < 3
;
alert(bResult); //輸出 "false"
這里，字符串 "25" 將被轉換成數字 25，然后與數字 3 進行比較，結果不出所料。
總結：
比較運算符兩側如果一個是數字類型，一個是其他類型，會將其類型轉換成數字類型。
比較運算符兩側如果都是字符串類型，比較的最高位的asc碼，如果最高位相等，繼續取第二位比較。
九、Boolean運算符(重要)
var temp=new Object();// false;[];0; null; undefined;object(new Object();)
if
(temp){
console.log("yuan"
)
}else
{
console.log("alex"
)
}
十、全等號和非全等號
等號和非全等號的同類運算符是全等號和非全等號。這兩個運算符所做的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。
十一、控制語句
11.1 if控制語句
if-else基本格式
if (表達式){
語句１;
......
}else{
語句２;
.....
}
功能說明
如果表達式的值為true則執行語句1,
否則執行語句2
var x= (new Date()).getDay();
//獲取今天的星期值，0為星期天
var y;
if ( (x==6) || (x==0) ) {
y="周末";
}else{
y="工作日";
}
alert(y);
//等價于
y="工作日";
if ( (x==6) || (x==0) ) {
y="周末";
}
if可以單獨使用
if語句嵌套格式
if (表達式1) {
語句1;
}else if (表達式2){
語句2;
}else if (表達式3){
語句3;
} else{
語句4;
}
if (x==1){
y="星期一";
}else if (x==2){
y="星期二";
...
}else if (x==6){
y="星期六";
}else if (x==0){
y="星期日";
}else{
y="未定義";
11.2 switch 選擇控制語句
switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定義";
}
switch比else if結構更加簡潔清晰，使程序可讀性更強，效率更高。
switch為什么高效率？
首先要看一個問題，if 語句適用范圍比較廣，只要是 boolean 表達式都可以用 if 判斷；而 switch 只能對基本類型進行數值比較。兩者的可比性就僅限在兩個基本類型比較的范圍內。
說到基本類型的數值比較，那當然要有兩個數。然后重點來了——
if 語句每一句都是獨立的，看下面的語句：
if (a == 1) ...
else if (a == 2) ...
這樣 a 要被讀入寄存器兩次，1 和 2 分別被讀入寄存器一次。于是你是否發現其實 a 讀兩次是有點多余的，在你全部比較完之前只需要一次讀入寄存器就行了，其余都是額外開銷。但是 if 語句必須每次都把里面的兩個數從內存拿出來讀到寄存器，它不知道你其實比較的是同一個 a。
于是 switch case 就出來了，把上面的改成 switch case 版本：
switch (a) {
case 0:
break;
case 1:
}
總結:
1.switch用來根據一個整型值進行多路分支，并且編譯器可以對多路分支進行優化
2.switch-case只將表達式計算一次,然后將表達式的值與每個case的值比較,進而選
擇執行哪一個case的語句塊
3.if..else 的判斷條件范圍較廣，每條語句基本上獨立的，每次判斷時都要條件加載
一次。
所以在多路分支時用switch比if..else if .. else結構要效率高。
十二、for循環控制語句
for循環基本格式
for (初始化;條件;增量){
語句1;
...
}
功能說明
實現條件循環，當條件成立時，執行語句1，否則跳出循環體
var attr=[111,222,333];
// for (var i=0; i
");
// document.write(attr[i])
// document.write("
");
// }
// for (var i in attr){
// document.write(i);
// document.write("
");
// document.write(attr[i])
// document.write("
");
// }
for (var i=1;i<=7;i++){
document.write("
hello
");
document.write("
");
}
----------------------------------------------
var arr=[1,"hello",true]//var dic={"1":"111"}
for (var i in arr){
console.log(i)
console.log(arr[i])
}
注意：
doms=document.getElementsByTagName("p");
for (var i in doms){
console.log(i); // 0 1 2 length item namedItem
//console.log(doms[i])
}
//循環的是你獲取的th一個DOM元素集，for in用來循環對象的所有屬性，dom元素集包含了你上面輸出的屬性。
//如果你只要循環dom對象的話，可以用for循環:
for (var i=0;i
結論：for i in 不推薦使用
十三、while循環控制語句
while循環基本格式
while (條件){
語句1；
. . .
}
功能說明
運行功能和for類似，當條件成立循環執行語句大括號{}內的語句，否則跳出循環
var i=1;
while (i<=7) {
document.write("
hello
");
document.write("
");
i++;
}
//循環輸出H1到H7的字體大小
練習：分別用for循環和while循環計算出1-100的和？
while循環實現：
// while循環實現
var x=0;
var i=1;
while (i<=100){
x+=i;
i++;
}
console.log(x)
for循環實現:
// for循環實現
var sum=0;
for (var i=0;i<101;i++){
sum+=i;
}
console.log(sum)
十四、異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
// 異常
try {
console.log(123);
throw Error("define error")
}
catch(e){
console.log(e)
}
finally{
console.log("finally")
}
?顯示：
?
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
