javascript
Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)
一、Js簡介和入門
?繼續跟進JS開發的相關教程。
?
?
<!-- [使用JS的三種方式]
1、HTML標簽中內嵌JS（不提倡使用）：
示例：<button οnclick="javascript:alert('你真點啊！')">有本事點我呀！！！</button>
?
2、HTML頁面中直接使用JS:
<script type="text/javascript">
//JS代碼
</script>
?
3、引用外部JS文件:
<script language="JavaScript" src="JS文件路徑"></script>
?
[注意事項]
① 頁面中JS代碼與引用JS代碼，可以嵌入到HTML頁面的任何位置。但是，位置不同會影響到JS代碼的執行順序；
?例如：<script>在body前面，會在頁面加載之前執行JS代碼；
?
② 頁面中JS代碼，使用type="text/javascript"
? ?引用外部的JS文件，使用language="JavaScript"
? ?
③ 引用外部JS文件的<script></script>標簽，必須成對出現，且標簽內部不能有任何代碼！
?
-->
?
<script type="text/javascript">
//JS中的注釋
// 單行注釋。 Ctrl+/
/*
? ? ?段落注釋。 ?Ctrl+Shift+/
*/
//document.write("<h1>姜浩真帥！</h1>");
?
?
/* 【JS中的變量】
* 1、JS中變量聲明的寫法：
* ?var width = 10; //使用var聲明的變量，只在當前函數作用域有效
?width1 = 11; //不使用var，直接賦值生成的變量，默認為全局變量，整個JS文件有效
?var a,b,c=1; //同一聲明語句同時聲明多個變量，變量之間用英文逗號分隔。但，賦值需要單獨賦，例如上式中，只有c賦為1，a/b為undefined(未定義)
?
?[聲明變量注意事項]
① JS中所有變量類型聲明，均使用var關鍵字。變量的具體數據類型，取決于給變量賦值的類型
?
② 同一變量，可以在多次不同賦值時，修改變量的數據類型：
?var width = 10;//width 為整形變量
?width="哈哈";//width 被改為字符串類型
?
③ 變量可以使用var聲明，也可以省略var。[區別]不使用var，默認為全局變量
?
④ 同一變量名，可以多次用var聲明。但是并沒有任何含義，也不會報錯。第二次之后的聲明，只會被理解為賦值；
?
2、變量的命名規范：
? ① 變量名，只能有字母、數字、下劃線、$ 組成
? ② 開頭不能是數字
? ③ 變量區分大小寫，大寫字母與小寫字母為不同變量
?
3、變量名命名要符合駝峰法則：
? ? ? 變量開頭為小寫，之后每個單詞首字母大寫(或單詞之間用下劃線分隔)；
? jiangHaoIsShuaiGe √
? jiang_hao_is_shuai_ge √?
? jianghaoisshuaige ×
??
4、JS中的變量的數據類型
Undefined：未定義，用var聲明的變量，沒有進行初始化賦值。 var a;
Null:表示為空的引用。例如，空對象、空數組。
Boolean:真假，可選值 true/false
Number:數值類型。可以是小數，也可以是整數。
String:字符串類型。用""或''包裹的內容，成為字符串。
Object（復雜數據類型）：后續講解，函數、數組等。。。
?
5、常用的數值函數：
? ① isNaN():用于判斷一個變量或常量，是否為NaN(非數值)
? ? 使用isNaN判斷時，會嘗試使用Number()函數進行轉換，如果能轉換為數字，則不是非數值，結果為false
?"111" 純數字字符串，false "" 空字符串，false "1a"包含其他字符，true
?true/false 布爾類型，false
?
? ② Number():將其他類型轉換為數值類型
? [字符串類型轉數值]
? >>> 字符串為純數值字符串，會轉為對應的數字 ?"111"->111
? >>> 字符串為空字符串是，會轉為0 ?""->0
? >>> 字符串包含其他非數字字符時，不能轉換 ? "111a"->NaN
??
? [布爾Boolean類型轉數值]
? true -> 1 ? ? false -> 0
??
? [null/Undefined轉數值]
? null -> 0 ? ? Undefined -> NaN
??
? [Object類型轉數值]
? *(以后再了解) 先調用ValueOf方法，確定函數是否有返回值，再根據上述各種情況判斷。
??
? ③ parseInt:將字符串轉為數值類型
? >>> 空字符串，不能轉。結果為NaN
? >>> 純數值字符串，能轉。 "123" -> "123" ?"123.5" -> 123 (小數轉化時，直接抹掉小數點，不進行四舍五入)
? >>> 包含其他字符的字符串。會截取第一個非數值字符前的數值部分。
? ? ? "123a456" -> 123 ? "a123b456" -> NaN
? ? ??
? >>> parseInt只能轉String類型，Boolean/null/Undefined 均為NaN
??
? ④ parseFloat:將字符串轉為數值
? >>> 使用方式同parseInt。但是，當轉化小數字符串時，保留小數點；轉化整數字符串時，保留整數；
? ? ? "123.5" -> 123.5 ? ? ?"123" -> 123
? ? ??
? ⑤ typeof：用來檢測變量數據類型
? 未定義 -> Undefined字符串 -> Stringtrue/false -> boolean
? 數值 ?-> Number對象/null -> Object ? 函數 -> function?
?
?
*/
var a; //聲明變量
a=10;//給變量賦值
?
var width = 10;//聲明變量的同時，直接賦值
?
width="哈哈";
?
var x,y=9,z=10;
?
var b = {};
?
alert(d);
?
?
?
/* [JS中的輸出語句]
*?
* document.write();
* 輸出語句，將write的()中的內容打印在瀏覽器屏幕上；
*?
* 使用時注意：除變量/常量以外的任何內容，打印時必須放到""中。變量/常量必須放到""外。?
* 打印的內容同時有多部分組成時，之間用+鏈接：
* 例如：document.write("左手中的紙牌："+left+"<br/>");
*?
* alert();
* 彈窗警告，()中的使用方式，同上
*/
?
?
?
?
</script>
?
<script language="JavaScript" src=""></script>
</head>
?
?
<body>
<button οnclick="javascript:alert('小碧池！你真點啊！')">有本事點我呀！！！</button>
?
?
?
</body>
?
</html>
?
?
二、JS中的運算符
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
?
/*
算術運算
? ? ?+ 加、- 減、* 乘、 / 除、 % 取余、++ 自增、-- 自減
? ? ?
? ? ?
? ? ?
? ? ?+:有兩種作用，鏈接字符串/加法運算；當+兩邊均為數字時，進行加減運算；當+兩邊有任意一邊為字符串時，
? ? ?進行字符串鏈接，鏈接之后的結果仍為字符串。
? ? ?
? ? ?++：自增運算符，將變量在原來的基礎上加1；
? ? ?--：自減運算符，將變量在原來的基礎上減1；
? ? ?
? ? ?
? ? ?【n++與++n的異同】
? ? ?n++：先使用n的值進行計算，計算完然后再把n+1；
? ? ?++n：先把n的值+1，然后再把n+1的值 去運算
? ? ?
? ? ?相同點：不論n++還是++n，在執行完代碼之后，均會把a的值+1；
? ? ?案例：var a = 3;
?var b,c;
? ? ?b = a++ +2; // a=3 b=5 a=4
? ? ?c = ++a +2; // a=4 a=5 c=7
? ? ?document.write( abc ? )為557
? ? ?
? ? ?————————————————————————————————————————————————
? ? ?
?賦值運算
? ? ?= 賦值 ? ? += ? ? -= ?*= ?/= ?%=
? ? ?
? ? ?+=：a+=5；相當于a=a+5；但是前者的執行效率要比后者快
? ? ?————————————————————————————————————————————————
?
關系運算
? ? ?== 等于號、===嚴格等于、 ?！= 不等于、>、<、>=、<=
? ? ?
? ? ?===：嚴格等于：①類型不同直接返回FALSE ； ?②類型相同再進型下一步判斷；
? ? ?==：等于：①類型相同同===； ②類型不同，將等式兩邊均用number函數轉位數字，在判斷；
? ? ?[注意例外]
? ? ?null==undefined √；null===undefined ×
? ? ?document.write(123=="123")成立；
? ? ?————————————————————————————————————————————————
?
條件運算符(多目運算)
? ? ?a>b ? true : false?
? ? ?
? ? ?有兩個關鍵符號：?和:
? ? ?當?前面的部分運算結果為TRUE時，執行：前面的代碼；
? ? ?當?前面的部分運算結果為FALSE時，執行：后面的代碼；
? ? ?
? ? ?多目運算符可以多層嵌套
? ? ?例如：
? ? ?
? ? ? ————————————————————————————————————————————————
? 邏輯運算符
? ? ?&& 與、|| 或、！非
? ? ?
? ? ?____________________________________________________________________________________________________________________
? ? ?
? ? ?【運算符優先級】
? ? ?()
?! ?++ --
?% ?/ ?*
?+ -
?> ? < ? >= ? ?<=
?== ? !=
?&&
?||
?各種賦值= += ?*= ?/= ? %=
?
* */
?
?
?
?
?
?
</script>
?
?
</head>
<body>
?
?
</body>
</html>
?
?
?
三、JS中的分支結構
?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
?
<script type="text/javascript">
/*【if-else結構】
1、結構寫法：
if(判斷條件){
//條件為true時執行
}else{
//條件為false時執行
}
2、if()中的表達式，運算之后的結果應該為：
① Boolean： true 真false 假
② String：非空字符串為真空字符串為假
③ 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結構。
?
*/
var num2 = 5;
if(num2>5){
document.write("輸入過大");
} else if(num2<5){
document.write("輸入過小");
} else if(num2==5){
document.write("輸入正確");
}
?
if(num2==5) document.write("輸入過大");
?
if(num2==5) document.write("輸入過大");
else document.write("11");
?
document.write("22");
?
?
/* 【嵌套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結構。
*/
var num4 = 5;
switch (num4){
case 4:
document.write("這是9的case塊！");
//break;
case 5:
document.write("這是10的case塊！");
//break;
case 6:
document.write("這是11的case塊！");
//break;
default:
document.write("這是default的case塊！");
break;
}
?
?
?
</script>
?
?
?
</head>
?
?
<body>
</body>
</html>
?
?
?
四、JS中的循環結構
?
?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
?
<script type="text/javascript">
?
/* 【循環結構的步驟】
① 聲明循環變量
② 判斷循環條件
③ 執行循環體(while的{}中所有代碼)操作
④ 更新循環變量
?然后，循環執行② ③ ④
?
?【JS中循環條件支持的數據類型】
① Boolean： true 真false 假
② String：非空字符串為真空字符串為假
③ Number：0為假一切非0，均為真
④ Null/NaN/Undefined： 全為假
⑤ Object：全為真
?
*/
?
/*
* while循環特點：先判斷，再執行；
* do-while循環特點：先執行，再判斷；即便初始條件不成立，do-while循環也至少執行一次；
*/
?
var n = 1; // ① 聲明循環變量
while (n<=5){ // ② 判斷循環條件
document.write("HelloWhile<br />");// ③ 執行循環體操作
n++;// ④ 更新循環變量
}
?
var m = 1;
do{
document.write("HelloDoWhile<br />");
m++;
}while(m<=5);
?
/* 【for循環】
1、for循環有三個表達式，分別為：①定義循環變量 ②判斷循環條件 ③更新循環變量
三個表達式之間，用;分隔。
for循環三個表達式均可以省略，兩個;缺一不可
2、for循環特點：先判斷，再執行；
3、for循環三個表達式，均可以有多部分組成，之間用逗號分隔;但是，第二部分判斷條件需要用&&鏈接，最終結果需要為真/假
*/
?
?
/*
* 1-100求和，采用首尾相加
* (1+100)+(2+99)+……+(50+51)=5050
*/
//for (var n=1,j=5;n<=3&&j>=1;n++,j--) {
//document.write("HelloFor<br />");
//document.write(n+"/"+j);
//}
var sum = 0;
for (var i=1,j=100;i<j;i++,j--) {
if(i<50) document.write("("+i+"+"+j+")+");
else document.write("("+i+"+"+j+")=");
sum+=(i+j);
}
document.write(sum);
?
?
?
</script>
?
?
</head>
<body>
</body>
</html>
?
轉載于:https://www.cnblogs.com/liuyongqi/p/6667009.html
總結
以上是生活随笔為你收集整理的Javascript开发技巧(JS中的变量、运算符、分支结构、循环结构)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 为什么公司要努力发展数字化战略
- 下一篇： FloatingActionMenu 向