JS基礎篇

來源:互聯網
上載者:User

標籤:布爾類型   取消   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基礎篇

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.