1. 程式人生 > >初識JavaScript

初識JavaScript

嵌套if bject 信息 定義變量 重復 導致 src 匈牙利 als

寫在前面:

經過前段時間對於H5語言的學習,開始慢慢適應現在的生活節奏和代碼語言。從一開始的毫無頭緒到現在可以大概地寫出部分的網站靜態頁面,用了兩個周的時間。作為一個之前從未接觸過計算機語言的初學者來說,在感受著代碼語言神奇的同時也更期待可以更深入的了解和掌握更多的相關知識,個人能力有限,但盡量做好眼前的每一件事,與大家共勉。

Java Script 是世界上最流行的編程語言

JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後,可由所有的現代瀏覽器執行。

JavaScript 很容易學習。

【使用JS的三種方式】


1、在HTML標簽中直接使用,直接內嵌JS(但是不提倡使用);
>>>不符合W3C關於內容和行為分離的要求;
eg:
<button onclick="alert(‘你還真的敢點啊~‘)"> 有本事點我啊!</button>

2、在HTML頁面中使用<script> </script>標簽包裹JS代碼;
>>>script標簽可以放到頁面的各種位置;
eg:
<script type="text/javascript">
JS代碼
</script>
3、引入外部的JS文件使用<script> </script>標簽;
eg:
<script languag

e="JavaScript" src="JS/01.js"></script>

[註意事項]


①、<script> </script>可以嵌入到頁面的任意位置,但是位置的不同將會導致JS代碼的執行順序不同;
比如:<script> </script>放到<body></body>前面,則JS文件會在頁面加載之前就執行。
②、引入外部的JS代碼 <script> </script> 必須是成對出現的標簽,而且標簽內部 不能再用任何的JS代碼。



【tips】



1、JS中的多行註釋。 ( Ctrl+shift+/ )


2、JS中的單行註釋。(Ctrl+/ )


PART-1 JS中的變量和輸入輸出


【JS中的變量】


1、JS中的變量聲明寫法:(變量的作用域)

var num=10; 使用var聲明的變量,屬於局部變量,只在當前的區域之內有效;

num=10; 不用var聲明的變量,默認為全局變量,在整個JS文件中都有效;

var x=8,y,z=10; 使用一行語句,同時聲明多個變量。 上式中,y屬於已經聲明,但是未賦值狀態,結果為undefined;


[聲明變量的註意事項]

①、JS中,所有變量的聲明均使用var關鍵字。變量具體是什麽數據類型,取決於給變量賦值的類型;

②、JS中,同一個變量可以在多次不同的賦值中,修改變量的數據類型。
var a=10; //在初始聲明時,a屬於整數型;
a="haha"; //重復賦值時,整數型的a被修改為字符串類型;

③、變量可以使用var聲明,也可以不使用;
[區別]使用var聲明的變量,屬於局部變量,不用var聲明的變量,默認為全局變量;

④、只用var聲明,但是不賦值,結果為undefined;

例如: var a; // a為undefined;
但是如果不使用var,也不進行賦值,執行結果會報錯。

⑤、同一個變量名可以多次使用var聲明;

但是後面的var沒有什麽用了。第二次在使用var聲明時,只會被理解為普通的賦值操作;

2、變量名的命名要求:
①、變量名只能由字母/數字/下劃線組成。
②、開頭不能是數字。
③、變量名區分大小寫,大寫字母和小寫字母為不同變量。

3、變量名的 命名規範:
①、要符合小駝峰法則:首字母小寫,之後每個單詞的首字母大寫;myNameIsWangQiang; √

②、或者使用匈牙利命名法:所有字母小寫,單詞之間用下劃線分開; my_name_is_wang_qiang;√
③、 mynameiswangqiang √ 但是不規範;

4、 JS中的數據類型: (均用var引用,但是賦值類型不同) ("▔□▔)"重點!!!
①、Undefined:已經使用var進行了聲明,但是未進行賦值;eg:var=a; 此時a為未賦值的變量,運行顯示undefined;
②、Null:表示空的引用;
③、Boolean:布爾類型:只有兩個值:true、false,表示真假;
④、Number:數值類型。可以為整數,也可以為小數;
⑤、String:字符串類型;用"或"包裹的內容,稱為字符串;
⑥、Object:對象類型;


5、【常用的數值函數】

①、isNaN();判斷一個變量或者常量是不是NaN(not a number);
使用isNaN();判斷時會嘗試使用number()函數進行轉換,如果最終結果能夠轉換為數字,則不是NaN.結果為false;

②、Number():將其他類型的數據嘗試轉換為數值形式;

[字符串類型]


>>>字符串為純數值字符串,這會轉換成相應的數值;"111">111
>>>字符串為空的字符串,會轉為0; "">0
>>>字符串包含其他任何類型的字符時,均不能進行轉換;"1a">NaN

[Boolean類型] ture>>1 false>>0

[Null/Undefined類型] Null>0 Undefined>NaN

[Objiect類型] 待講

③、ParseInt() 將字符串轉換成整數類型;!!!

>>>純數值字符串,能轉。"12">12 "12.9">12 小數在轉換時直接被抹掉,不進行四舍五入;
>>>空字符串,不能轉。"">NaN
>>>包含其他字符的字符串,會截取第一個非數值字符串前的數字部分;"123a456">123; "a123">NaN
>>>ParseInt() 只能轉字符串,轉其它類型都是NaN;

【Number()與ParseInt() 的區別】("▔□▔)"重點!!!

①、Number()能轉所有類型的數據類型,ParseInt() 只能轉字符串;

②、兩者在轉字符串時,結果不完全相同。

④、ParseFloat() :將字符串轉換為數值類型;!!!

轉換規則與PaseInt相同,如果有小數,則保留小數點。如果沒有小數,則依然是整數。


⑤、TypeOf() 檢測變量的數據類型:
字符串>string 數值>Number true/false>Boolean
未定義>Undefined 對象/Null>object 函數>function

【JS中常用的輸入輸出語句】
1、document.write();將括號中的內容打印輸出到瀏覽器的屏幕上;
使用時需要註意除了變量常量外的所有內容必須要放到""中。變量和常量必須放到""外面。
如果同時有變量和常量,必須使用+連接。
eg:document.write("右手中的紙牌 "+right+" <br/> <br/>");
2、alert()使用彈窗輸出;
彈窗警告,()中的內容必須 與上述要求相同。
3、prompt 彈窗輸入;
接受兩部分參數:
①、輸入框上部的提示內容,可選。
②、輸入框裏面的提示信息,可選。
當只寫一部分時,表示輸入框上部的提示內容。
可以定義變量,接受輸入的內容。點擊確定按鈕,變量將被賦值為輸入的內容;
點擊取消按鈕,變量將被賦值為Null;
輸入內容時,默認接收的數據類型都是字符串!!!
eg:
var name= prompt("請輸入你的名字","王強") ;
alert("您輸入的是"+name);


PART-2 JS中的運算符


1、 算術運算(單目運算符)

+ 加 、-減、*乘、 /除、 %取余數、 ++自增 、--自減

①、+ : 有兩種作用:連接字符串、加法運算
當 + 兩端全部為數值時,進行加法運算。當 + 兩側中任意一邊存在字符串時,就會起到連接字符串的作用,鏈接之後的結果為字符串。
除了+之外,其余的符號在運算時會嘗試將左右變量用Number()將它們轉換成數字。

②、/ : 結果會保留小數點 。不限制位數。
③、++ :自增運算符,將變量在原有的基礎上面+1;

【a++和++a的異同】
>>相同點: 無論a++還是++a,運算之後的值均會+1;
>>不同點:a++先用a的值去運算,再把a+1;
++a先把a+1,再用結果去運算;

eg:var a=3,b,c;
b=a++ +2;
c=++a +2;

>>>a=5 , b=5 , c=7


④、-- : 自減運算符,將變量在原有的基礎上-1;

2、賦值運算

=賦值 += -= *= /= %=

①、+=: a+=b; 相當於a=a+b。 但是推薦使用前者,運算速度快;
eg:
var a=3;
a +=3;
alert(a);
>>6

3、關系運算

==等於、 ===全等、 !=不等、!==不全等、>、<、>=、<=

① 關系運算符運算之後的結果只能是Boolean類型;
② 判斷一個數字屬否處於某個區間必須用&&連接;
a<10 && a>0 √
10>a>0 ×
③ === 為嚴格等於,要求不但要類型相同,值也必須相同;類型不同,結果直接為false;相同的話再進行下一步運算;
④ == 為等於 , 類型相同,與===效果一樣;類型不同時,會先嘗試用Number()將兩邊函數轉換為數字,再進行運算。
但是存在各別的個例: Null===false; ×
Null==Undefined; √


4 條件運算符(多目運算)

a>b?true:false

有兩個重要符號: ? :
當?前面部分運算結果為true時,執行:前面的代碼;
當?後面部分運算結果為false時,執行:後面的代碼;
冒號兩邊可以為數值,則整個式子可用於賦值。
冒號兩端可以為代碼塊,將直接執行代碼。
多目運算符號可以多層嵌套;

5、位運算符、 邏輯運算符

&& 與、||或、 ! 非

&&:兩邊都成立,結果為true;
||:兩邊有一邊成立,結果為true;
&& 和 ||同時存在時候,&&的優先級高;



6、運算符的優先級:
() 小括號優先級最高
! ++ --
* / %
+ -
> < >= <=
== !=
&& // && 和 ||同時存在時候,&&的優先級高;
||
= += -= *= /= 各種賦值優先級最低;


PART-3 JS中的分支結構


【if-else結構】
1、結構寫法:
if(判斷條件){
條件為true時執行if的代碼
}
else{
條件為false時候執行else的代碼
}
2、註意事項:
①、else{}語句塊可以根據情況進行省略;
②、if和else後面的{}可以省略,但是省略了之後,它們之後只能跟一條語句,所以不建議省略{};
3、if的()中的判斷條件,支持的數據類型: 重點!!!
① Boolean類型:true-真 ;false-假;
② String:空字符串為假,非空字符串為真;
③ Number:0為假,一切非零數字為真;
④ null/Undefined:全為假;
⑤ Object:全為真;

【else-if結構/多層if結構 /階梯if結構】

1、結構寫法:
if(條件一) { }
else if(條件二){ }
else{ }
2、多層if結構中,各個判斷條件之間互斥,執行選擇符合條件的第一條進行執行,執行之後跳出結構體系,不再繼續分支;

【嵌套if結構】
1、結構寫法:
if(條件一){ 條件一成立
if(條件二){ 條件一成立,並且條件二也成立; }
else{ 條件一成立,但是條件二不成立; }
}
else{ 條件一不成立 }
2、在嵌套if結構中,如果省略{},則else{}結構屬於距離自己最近的if{}結構;
3、嵌套結構可以多層嵌套,但是一般不推薦超過三層;能用多層if就不要用嵌套if;






初識JavaScript