標籤:布爾類型 取消 alt 條件 src 互斥 字串類型 數實值型別 點擊
JS基礎使用JS的三種方法
1,在HTML標籤中,直接內嵌JS(不提倡使用) <button onclick="alert(‘你真點啊‘)">點我啊!!!</button> >>>不符合W3C內容與行為分離的要求!!!
2.在HTML頁面中,使用<script></script>包裹JS代碼:
<script type="text/javascript">
//js代碼
</script>
>>>script標籤可以放在頁面的任何位置。
3.引入外部的JS檔案:
<script language="JavaScript" src="js/01-筆記.js"></script>
【注意事項】
①script標籤可以嵌入頁面的任何位置,但是位置不同會導致JS代碼執行的順序不同;
比如:<script></script>放到<body>前面,則JS代碼會在頁面載入前就執行。
②引入外部的JS代碼<script></script>必須是成對出現的標籤,而且標籤中不能有任何的JS代碼
③JS中的多行注釋。Ctrl+shift+/,,,,JS中的單行注釋。Ctrl+/
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聲明為全域變數
④只用var聲明,不賦值,結果為undifined;
例如:var a;//a為undefined;
但是,如果不聲明也不賦值的a,直接使用會報錯;
⑤同一變數名可以多次使用var聲明。但是,後面的var並沒有任何用。第二次在使用var聲明時,只會被理解為賦值操作。
2,變數名的命名要求:
①變數名只能由字母,數字,底線組成;
②開頭不能是數字;
③變數名區分大小寫,大寫字母與小寫字母為不同變數;
3,變數名的命名規範:
①要符合小駝峰法則:首字母小寫,之後每個單詞的首字母大寫;
var myNameIsZiYu=1; √
②或者使用匈牙利命名法:
所有字母小寫,單詞之間用_分隔;
var my_name_is_zi_yu=1; √
③ var myonameisziyu=1; × 能用但是不規範
4,JS中的資料類型:
undefined:未定義。已經使用var聲明的變數,但是沒有賦值。var a;
none:表示空的引用。
boolean:布爾類型,表示真假只有兩個值:true/flase
number:數實值型別,可以是正數,也可以是小數;
string:字串類型,用雙引號或者單引號包裹的內容,稱為字串;
object:物件類型
5,【常用的數值函數】
①isNaN();判斷一個變數或者常量,是否是NaN(not a number 非數值)
使用isNaN();判斷時,會嘗試使用Number()函數進行轉換,如果最終結果能夠轉為數字,則不是NaN,結果為flase。
②Number()函數;將其他類型的資料,嘗試轉為數值型;
【字串類型】
>>>字串為純數字值字串,會轉為對應的數字;“111”->111
>>>字串為空白字串,會轉為0;“ ”->0
>>>字串包含其他任何字元時,都不能轉;"1a"->NaN
>>>Boolean類型,“true”->1;"flase"->0.
>>>None->0/undefined->NaN
>>>object*(後續講解)
③ParseInt():將字串轉為整數類型;(取整用他)
>>>純數值字串,能轉。“12”->12;"12.9"->12(小數轉化時,直接抹掉小數點,不進行四捨五入)
>>>Null 字元串,不能轉。" "->NaN
>>>包含其他字元的字串,會截取第一個非數值字串前的數字部分
“123a456”->123 "a123b456"->NaN
>>>ParseInt()只能轉字串,轉其他類型全是NaN。
【number函數與parseint函數的區別】
1,number可以轉任何函數類型,parseint函數只能轉字串類型
2,兩者在轉字串時,結果不完全相同
④ParseFloat:將字串轉為數實值型別:
轉換規則與parseint相同,只是如果有小數,則保留小數點;如果沒有小數,則依然是整數;
⑤typeof():檢測變數的數字類型:
字串->String 數值->Number 未定義->Undefined
true/flase->Boolean 對象/NULL->object 函數->Function
JS常用的輸入輸出語句
1.document.write(); 將()中的內容列印輸出到瀏覽器螢幕上
使用時需注意,除變數/常量外的所有內容,必須放到“”中。變數和常量必須放到“”外面;
如果同時有變數和字串,必須用+連結;
eg:document.write("左手中的紙牌:"+left+"<br />");
2.alert(); 使用彈窗輸出;
彈窗警告。()中的內容與上述要求相同。
3.prompt(); 彈框輸入;
接受兩部分參數:
①輸入框上面的提示內容,可選;
②輸入框裡面的預設資訊,可選;
當唯寫一部分是,表示輸入框上面的提示內容;
可以定義變數,接受輸入的內容。點擊確定按鈕,變數將被賦值為輸入的內容;
點擊取消按鈕,變數將會被賦值為null;
輸入內容時,預設接收的資料訊息都是字串!!!!!
簡單的例子一:
執行結果為:
JS運算子
1,算術運算(單目運算子)
+ 加、-減、*乘、 /除、 %取餘、++自增運算子 (在自身的基礎上加一個)、--自減運算子(在自身的基礎上減一個)
>>>+:有兩種作用,連結字串/加法運算,當+兩邊全為數字時,進行加法運算;
當+兩邊有任意一邊為字串時,起連結字串的作用,連結之後的結果為字串;
除加號外,其他符號在運算時,會嘗試將左右變數用NUMber函數轉為數字 ;
>>>/:結果將會保留小數點
>>> ++:自增運算子,將變數(x)在原有基礎上加一;
>>> --:自減運算子,將變數(x)在原有基礎上減一;
【a++和++a的異同】
相同點:無論a++還是++a運算完之後,a的值均會加一;
不同點:a++先用a的值去運算,再把a加一;
++a先把a加一,再用a加一以後的值去運算
eg:
var a=3,b,c;
b = a++ +2;//先用a運算,b=3+2 再把a+1,a=4
c = ++a +2; //先把a+1,a=5 ,在用a+1的值去運算,c=5+2;
alert(a); 5
alert(b); 5
alert(c); 7
2,賦值運算
= 賦值(把右邊的值賦給左邊) += -= *= /= %=
+=:a+=b 相當於a=a+b; 但是,前者的運算效率要比後者快,所以推薦使用+=的寫法;
3, 關係運算
==、 !=(不等)、!==(不全等),>、<、>=、<=
>>> 關係運算子,運算之後的結果,只能是boolean類型;
>>>判斷一個數字是否處於某個區間,必須使用&&連結;
a<10 && a>0 √ 10>a>0 ×
>>>===:嚴格等於,要求不但要類型相同,值也必須相同。類型不同,結果直接為flase;類型相同,在進行下一步判斷;
>>>==:類型相同與===效果一樣。類型不同時,會嘗試用number()函數將兩邊轉為數字,然後再進行判斷。
但是有個別特例,如:null==flase; ×
null==undefined;√
nan==nan; ×
4, 條件運算子(多目運算)
a>b?true:false
>>>有兩個重要符號:?和:
當問號前面部分,運算結果為true時,執行:前面的代碼;
當問號前面部分,運算結果為false時,執行:後面的代碼;
冒號兩邊可以為數值,則整個式子可用於賦值。var a=1<2?1:2;
冒號兩邊可以為代碼塊,將直接執行代碼。1<2?alert(1):alert(2);
多目運算子可以多層嵌套。var a =1<2?alert(1):(1>0?4:5);
5,位元運算符、 邏輯運算子
&、|、~ &&(與)、||(或)、!(非)
>>>&&:兩邊都成立結果為 true(&&的優先順序較高)
>>>||:兩邊有任意一邊成立,結果為true
6,運算子的優先順序
() //小括弧最高
!++ -- //單目運算子
* / %
+ -
> < >= <=
== !=
&& //與或同時存在時,&&比||高
||
-= += *= /= //最低的是各種賦值
簡單的例子二:
運行結果:
JS中的分支結構
【if-else結構】
1,結構的寫法:
if(判斷條件){
//條件為true時,執行if的{}
}else{
//條件為flase時,執行else的{}
}
2,注意事項:
①else語句塊可以根據情況進行省略。
②if和else後面的{}可以省略,但是省略{}後,if和else後面只能跟一條語句;(所以,並不建議省略{})
3,if的()中的判斷條件,支援的情況:
①boolean:true為真,flase為假;
②string:Null 字元串為假,所有非Null 字元串為真;
③number:0為假,一切非0數字為真;
④null,undefined,NaN全為假;
⑤object:全為真;
【多重if結構,階梯if結構】
1,結構寫法:
if(條件一){
//條件一成立時執行的操作;
}else if(條件二){
//條件一不成立,並且,條件二成立的操作;
}else{
//上述所有條件都不成立時,執行的操作;
}
2,多重if結構中,各個判斷條件是互斥的,只能選擇其中一條路執行。遇到正確選項並執行完成以後,直接跳出結構,
不再判斷後續分支。
【嵌套if結構】
1.結構寫法;
if(條件一){
//條件一成立
if(條件二){
//條件一成立&&條件二成立
}else{
//條件一成立&&條件二不成立
}
}else{
//條件一不成立
}
2,在嵌套if結構中,如果省略大括弧,則else結構永遠屬於離他最近的一個if結構。
3,嵌套結構可以多層嵌套,但是一般不推薦超過3層,能用多重if結構的一般不推薦使用嵌套if結構。
簡單的例子三:
運行結果為:
JS基礎篇