JS入門

標籤：fine   迴圈結構   原則   載入   多次   下一步   資料   數值   入門   

一.

使用JS的三種方式
1HTML標籤內嵌JS
<button onclick="javascrpt:alert(222222222)" >11111</button>
2.HTML頁面中直接使用JS

<script type="text/javascript">

//JS代碼
</script>
3引用外部JS檔案
<script language="javascript" src="路徑"></script>
注意事項
1頁面中JS代碼與引用JS代碼可以嵌入到頁面任何位置，但不會影響JS代碼執行順序
例如：<script></script>在body前面會在頁面載入之前執行JS代碼；
2頁面中JS代碼使用type="text/javascript"
外部也用，使用language="javascript"
3引用外部JS檔案的<script></script>標籤必須成對出現且標籤內部不能有任何代碼

二.

JS中的變數
1JS中變數聲明的寫法：var width = 10;//使用var聲明的函數只在當前函數範圍有效
width1 = 11;//不使用var,直接賦值產生變數，預設全域改變，整個JS檔案有效
var a,b,c=1;同一聲明語句同時聲明多個變數，變數間用英文逗號分隔，但賦值需要單獨賦，如上式只有c賦為1，a/b為undefine(未定義)
注意1JS中所有型別宣告都用var關鍵字。變數的具體資料類型，取決於給變數賦值的執行
2同一變數，可以在多次不同賦值時，修改VARIANT 資料型別：
var width = 10;//為整形變數
width="哈哈"；//width 被改為字串類型
3變數可以使用var聲明，也可以省略var.區別：不使用var,預設為全域變數
4同一變數名可以多次用var聲明。但是沒有任何含義也不會報錯。第二次之後的聲明，為被理解為賦值；
2變數命名規範：
1變數名只能由字母數字底線$組成
2開頭不能是數字
3變數區分大小寫，大寫字母和小寫字母為不同變數
3變數名命名要符合駝峰法則：
變數開頭為小寫，之後每個單字首大寫（或單詞間用底線分隔）
jiaoYingCai√
jiao _ying_cai√
jiaoyingcai×
4JS中變數的資料類型
undefine:未定義，用var聲明的變數，沒有進行初始化賦值。var a;
null:null,表示空的飲用。var a = null;
boolean:真假，可選值true/false
number：數實值型別，可以是小數，也可以是整數。
string：字串類型。用""或‘‘包裹的內容，稱為字串
object：複雜資料類型：函數數組等
5常用的數值函數：
1 isNaN:用於判斷一個變數或常量是否為NaN（非數值）
使用isNaN判斷時，會常試用number（）函數進行轉換，如果能轉換成數字，則不是非數值，結果為false
"111"純數字字串，false""Null 字元串，false"1a"包括其他字元true
true/false布爾類型，false
2 number():將其他類型轉換為數實值型別
字串類型轉數字
1 字串為純數值字串，會轉化為數字
2 字串為空白字串會轉化成0
3字串包含其他非數字字元時，不能轉換:"111a" NaN
4 布爾boolean類型轉數值 null 0 ;undefine NaN
5object類型轉數值
先調用valueof函數，確定函數是否有傳回值，再根據上述各種情況判斷。
6parseint:將字串轉化為數實值型別
Null 字元串，不能轉，結果為NaN
純字串能轉"123" 123;"23.4" 23;(小數轉化時，抹掉小數點後邊的)
包含其他字元的字串。會截取第一個非數值字元前的數值部分。"123a1111" 123;"a1111" NaN;
parseint只能轉string類型，boolean/null/undefined均為NaN
7parsefloat:將字串轉化為數值
使用方式同parseint.但是當轉化小數字串時，保留小數點後邊的；轉化整數字字元時保留整數
⑤typeof: 用來檢測VARIANT 資料型別
未定義 ->Undefined 字串 -> Sting true/false -> boolean
數值 -> Number 對象/null -> object 函數 ->

三.JS輸出語句：document.weite()注意：除變數/常量以外的任何內容，列印時必須放在""中，變數/常量放在""外列印由多部分組成用+連起來。

    彈窗輸出： alert()使用方式同輸出語句

   彈窗輸入：prompt("請輸入您的名字"，"某某")；

* 兩部分參數：1輸入框上面的提示資訊
* 2輸入框裡面的預設資訊
* 兩部分之間用逗號分隔，唯寫一部分預設為提示資訊；
* 預設接收輸入的內容，為字元
* 可以定義變數接受輸入內容，例如var name = prompt("請輸入您的名字"，"薑浩")；；點擊確定按鈕，輸入成功；點擊取消按鈕，name = null;四。

四。運算子

 

1、算術運算
+ 加、- 減、* 乘、 / 除、 % 取餘、++ 自增、-- 自減

+:有兩種作用，連結字串/加法運算；當+兩邊均為數字時，進行加法運算；當+兩邊有任意一邊為字串時，進行字串連結，連結之後的結果認為字串；
++:自增運算子，將變數在原有基礎上+1；
--:自減運算子，將變數在原有基礎上-1；

【n++ 與 ++n 的異同】
n++: 先使用n的值進行計算，然後再把n+1;
++n: 先把n的值+1,然後再用n+1以後的值，去運算；
相同點：不論n++還是++n，在執行完代碼以後，均會把n+1；
eg:var a = 3;
var b,c;
b = a++ +2; // a=3 b=5 a=4
c = ++a +2; // a=4 a=5 c=7

2、賦值運算
= 賦值、 += -= *= /= %=

+=： a += 5;相當於 a = a + 5; 但是，前者的執行效率要比後者快。

3、關係運算
== 等於、=== 嚴格等於、 != 不等於、>、<、>=、<=

===: 嚴格等於；類型不同，返回false；類型相同，再進行下一步判斷；
==:等於； 類型相同，同===；類型不同，嘗試將等式兩邊轉為數字，再判斷；
特例：null == Undefined √ null === Undefined ×

4、條件運算子(多目運算)
a>b?true:false

有兩個關鍵符號： ?和:
當？前面的部分運算結果為true時，執行：前面的代碼；
當？前面的部分運算結果為false時，執行：後面的代碼；

>>>多目運算子可以多層嵌套：
例如：var jieguo = num>5?"輸入太大":(num==5?"蒙對了！":"輸入太小");

5、邏輯運算子
&& 與、|| 或、！ 非


[運算子的優先順序]
()
! ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各種賦值 = += *= /= %=

  五.JS中的分支結構

 

【if-else結構】
1、結構寫法：
if(判斷條件){
//條件為true時執行
}else{
//條件為false時執行
}
2、if()中的運算式，運算之後的結果應該為：
① Boolean： true 真false 假
② String：非Null 字元串為真Null 字元串為假
③ Number：0為假一切非0，均為真
④ Null/NaN/Undefined： 全為假
⑤ Object：全為真
3、else{}結構，可以根據具體情況省略；
*/
var num = {};

if(num){
//條件為true時執行
document.write("if條件成立");
}else{
//條件為false時執行
document.write("if條件不成立");
}
// num<10?document.write("if條件成立"):document.write("if條件不成立");



/* 【多重if、階梯if】
1、結構寫法：
if(條件一){
// 條件一成立
} else if(條件二){
// 條件一不成立&&條件二成立

// else-if 部分，可以有N多個
} else{
// 條件一不成立&&條件二不成立
}

2、多重if結構中，各個判斷條件是互斥的！只能選擇其中一條路。

3、if/else的{}可以省略，但是一般不提倡；
如果省略{} 則，if/else結構包含的代碼，僅為其後最近的一行(分號結束)；
如果省略{} 則，else結構永遠屬於其前方最近的一個if結構。

【嵌套if結構】
1、結構寫法：
if(條件一){
// 條件一成立
if(條件二){
// 條件一成立&&條件二也成立
}else{
// 條件一成立&&條件二不成立
}
}else{
//條件一不成立
}

2、if結構可以多重嵌套，但是原則上不超過3層
*/





/* 【Switch-Case結構】
1、結構寫法：
switch(運算式){
case 常量運算式1：
語句1；
break;
case 常量運算式2：
語句2；
break;
……
default：
語句N
break;
}
2、注意事項：
① switch()中的運算式，以及每個case後面的運算式，可以為任何JS支援的資料類型（對象和數組不行）；
② case後面的所有常量運算式，必須各不相同，否則只會執行第一個；
③ case後的常量可以是任何資料類型；同一個switch結構的不同case，可以是多種不同的資料類型；
④ switch在進行判斷的時候，採用的是全等判斷===。
⑤ break的作用：執行完case代碼後，跳出當前switch結構；
缺少break的後果：從正確的case項開始，依次執行所有的case和default。原因：⑥↓
⑥ switch結構在判斷時，只會判斷一次正確答案，當遇到正確的case項後，將會不再判斷後續項目。依次往下執行。
⑦ switch結構的執行速率要快於多重if結構。在多路分支時，可優先考慮使用switch結構。

六.迴圈·

【迴圈結構的步驟】
① 聲明迴圈變數
② 判斷迴圈條件
③ 執行迴圈體(while的{}中所有代碼)操作
④ 更新迴圈變數
然後，迴圈執行② ③ ④

【JS中迴圈條件支援的資料類型】
① Boolean： true 真false 假
② String：非Null 字元串為真Null 字元串為假
③ Number：0為假一切非0，均為真
④ Null/NaN/Undefined： 全為假
⑤ Object：全為真

while迴圈特點：先判斷，再執行；
* do-while迴圈特點：先執行，再判斷；即便初始條件不成立，do-while迴圈也至少執行一次；

【for迴圈】
1、for迴圈有三個運算式，分別為：①定義迴圈變數 ②判斷迴圈條件 ③更新迴圈變數
三個運算式之間，用;分隔。
for迴圈三個運算式均可以省略，兩個;缺一不可
2、for迴圈特點：先判斷，再執行；
3、for迴圈三個運算式，均可以有多部分組成，之間用逗號分隔;但是，第二部分判斷條件需要用&&連結，最終結果需要為真/假

JS入門