javaScript基礎

1. javaScript的由來【了解】

• 為什么會出現js

  早期出現js的原因就是為了解決一個問題: 用戶和瀏覽器(網頁)進行交互其他了解:
  系統程序員Brendan Eich 設計了js語言, js語言1借鑒C語言的基本語法; (2)借鑒Java語言的數據類型和內存管理; (3)借鑒Scheme語言，將函數提升到"第一等公民"(first class)的地位; (4)借鑒Self語言，使用基于原型(prototype)的繼承機制。
  

• 為什么要學javaScript？

  1. 現在的js依然可以解決實現用戶和瀏覽器(網頁)進行交互
  2. 今天的js能夠解決的問題更多? js游戲開發? 實現應用級別的程序? 地理定位
  

2. javaScript學習路徑

? javaScript學習準備工作

1. 知識點javaScript組成 【了解】

   • ECMASCRIPT : js語法(目前我們這個階段就是在學習ECMASCRIPT)
   • BOM : 通過js操作瀏覽器相關的效果
   • DOM: 通過js操作網頁中相關的效果(通過js操作網頁, 操作網頁中的標簽和網頁中的css)

2. 知識點javaScript書寫位置(參照css的書寫位置學習)

   • 內嵌式(必須掌握的)

     將js代碼嵌入到html頁面中步驟:1. 新建一個網頁2. 在網頁的任何一個位置 添加一個 <script></script> 標簽3. 在 <script></script> 內部寫上js代碼
     

     [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-WCbReptV-1582980108301)(img/1582943890993.png)]

   • 外聯式(必須掌握)

     實際開發中用外聯是較多,學習階段內嵌式為主步驟:
     1. 新建一個html頁面
     2. 單獨新建一個js文件
     3. 直接在j文件中寫js代碼, 不能在js文件中設置 <script></script> 標簽
     4. 在網頁中的任何一個位置,通過 <script></script>
     

     [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-AUMZaHos-1582980108303)(img/1582944276317.png)]

     • 外聯式寫法注意事項

       1. 可以在網頁中引用多個js文件

       2. 內嵌式和外聯式不能使用同一個 script 標簽

          [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-vAiEvRJ3-1582980108304)(img/1582944502775.png)]

   • 行內式(了解)

     將js代碼寫到標簽內部1. 在標簽內部寫個事件名稱: 事件[網頁中用戶的每一個動作都叫一個事件]onclick(點擊事件,代表用戶的點擊動作)
     

     [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-hhC2pRwU-1582980108304)(img/1582944962406.png)]

3. 知識點-javaScript輸出消息的方式

   1. 要通過js輸出消息的方式引出其他要講的知識點
   2. 為了讓大家體會一下js的特點
   

   • 在網頁控制臺中輸出消息

     console.log('');   
     

   • 在網頁中body標簽中輸出消息

     document.write();注意:
     document.write() 可以在網頁中輸出html標簽例如: document.write('<h1>我是一個標題標簽</h1>');
     

   • 在網頁中接收用戶輸入的信息

     prompt('請輸入您的姓名');
     

   • 在網頁中獲取用戶選擇的結果

      //通過js獲取用戶的選擇結果confirm('確定今天講的js大家都能聽明白么?');
     

   • 在網頁中輸出消息

     alert();
     

   • 通過以上js代碼總結

     注意:
     1. 如果中輸出的是一段文字或者字母,必須要加 引號(單引號或者雙引號)
     2. js中是區分字母大小寫的
     3. js中遇到的所有特殊符號都必須是 英文輸入法下的符號
     4. js中輸出數字的時候,可以加引號也可以不用加
     

?javaScript學習重點內容

1. 知識點-javaScript中變量

   • 字面意思理解變量

     變量: 可以變化的值,數據
     

   • 通過程序的角度理解變量

     程序中的變量:  其實就是一個用來保存數據的一個容器變量本質上就是一個容器.
     

   • 變量的作用

     變量的作用就是用來保存數據的.
     

   • 變量的定義

     var  自定義的變量名;例如:
     var  myname;
     注意:
     1. 變量是不需要加引號的
     

   • 變量的賦值

     變量名 = 值;注意:
     1. '=' 叫賦值運算符
     2. '=' 賦值運算符作用 將右側的結果 賦值給左側的變量(先執行右側的代碼,在執行左側的代碼)
     3. '=' 賦值運算符不能比較是否相等
     4. 如果輸出的結果是一個變量,那么變量不能使用引號
     5. 如果程序中操作的是一個變量,那么不需要加引號.
     

   • javaScript中定義變量及命名規范

     • 變量的名字命名規則與CSS類名的規則相似(最好有語義性)

       1. 變量的名稱最好具有語義性(單詞, 拼音)
       2. 變量的命名最好以駝峰命名法(第一個單詞的首字母小寫,后面單詞的首字母大寫)

     • 不合法的變量名

       [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FcXUf0kU-1582980108305)(img/1582957721340.png)]

   • javaScript中變量賦值及總結

     • 在程序中,同一個變量一次只能保存一個值
     • 同一個變量保存的值是最后一次的賦值結果
     • 操作同一個變量的時候,變量只需要定義一次就可以了,不需要重復定義

2. 知識點-javaScript中的數據類型

   1. 簡單數據類型

      • 數字類型(number)[掌握]

        1. 什么是數字類型?

           如果一個變量的值是數字,且不帶引號,那么該變量就是數字類型.
           

        2. 數字類型有什么特點

           數字類型相加后得到的結果還是一個數字類型(最后的結果還是一個數字)
           

      • 字符串類型(string)[掌握]

        1. 什么是字符串類型?

           如果一個變量的值帶有引號(單引號和雙引號都可以),那么該變量就是字符串類型
           

        2. 字符串類型有什么特點?

           如果字符串相加,那么最后的結果就是將變量中的值拼接到一起(拼接字符串)
           

      • 布爾類型(boolean)

        1. 什么是布爾數據類型?

           如果一個變量的值 是  true 或者  false,那么該變量的數據類型就是布爾類型
           

        2. 布爾數據類型有什么特點?

           布爾數據類型只有兩個值,一個是 true 一個是 falsetrue :  代表正確的,真的,條件滿足的    -----> 后面學習條件語句的時候就會用到false : 代表錯誤的,假的,條件不滿足  
           

      • undefined類型(undefined)

        1. 什么是undefined類型?

        如果一個變量的值是 undefined 或者 變量沒有賦值 ,那么當前這個變量就是 undefined 類型
        

        2. undefined類型有什么特點?

           如果一個變量沒有賦值,其實該變量的默認值就是 undefined,所以對應的數據類型就是 
           undefined 類型
           

   2. 獲取數據類型typeof

      通過 typeof 獲取當前變量的數據類型var  a = '123';   
      //獲取變量的數據類型
      console.log(typeof(a));
      

3. 知識點-數據類型轉換

   1. 強制類型轉換（顯示類型轉換）

      • 轉換為數字類型

        1. 通過  Number(變量)  --->  將變量轉化為數字類型
        2. 通過  parseInt(變量)  ---> 將變量轉化為數字類型
        3. 通過  parseFloat(變量)  ----> 將變量轉化為數字類型區別:
        Number:  通過Number在進行數據類型轉換的時候,變量原來是什么值,轉化后還是原來的值
        parseInt: 通過parseInt進行數據類型轉換的時候,最后的結果就是保留整數部分,忽略小數部分	`
        parseFloat: 
        如果變量的值是一個非數字的字符串,那么通過parseFloat只能獲取數字部分,如果都是數字,那么會將變量原來的值保存下來.
        

      • 轉字符串類型

        1. 變量.toString()
        2. String(變量)區別:1. toString() 不能將任何值都轉化為字符串類型, 除 undefined2. String() 可以將任何的值都轉化為字符串類型原型知識點(js的高級中才會涉及到...)
        

      • 轉布爾類型

        Boolean(變量)  ----> 轉化為布爾類型注意:
        1. 什么情況下可以轉化為 false如果變量的值是 0 | undefined |  null  | 空字符串2. 除以上幾個特殊值之外,都可以轉為 true
        

   2. 隱式類型轉換【了解】

4. 知識點-運算符

   1. 算數運算符

   2. 賦值運算符

   3. 一元運算符【循環語句中】

   4. 比較運算符

   5. 邏輯運算符

) ----> 轉化為布爾類型

    注意:1. 什么情況下可以轉化為 false如果變量的值是 0 | undefined |  null  | 空字符串2. 除以上幾個特殊值之外,都可以轉為 true```

2. 隱式類型轉換【了解】

3. 知識點-運算符

   1. 算數運算符

   2. 賦值運算符

   3. 一元運算符【循環語句中】

   4. 比較運算符

   5. 邏輯運算符