大家都知道,現在雖然是前後端分離,但是前端工程師必須瞭解一些後端的知識,而後端開發
的工程師也必學一些前端的知識,今天就和我一起來看看後端必學的一些前端知識,我是一個
學習java後端的,最近會更新一系列java後端要學的前端的知識.

JavaScript

基本概念:一門客戶端腳本語言

運行在客戶端瀏覽器中的,每一個瀏覽器都有JavaScript的解析引擎
腳本語言:不需要編譯,直接就可以被瀏覽器解析和執行了
功能:
- 可以來增強用戶和html頁面的交互過程,可以控制html元素,讓頁面有些動態的效果
發展史:
- 1992年,Nombase公司,開發出一門客戶端腳本語言,專門用於表單的校驗.命名爲:C–,後來更名爲ScriptEase
- 1995年,Netscape(網景)公司,開發了一門客戶端腳本語言:LiveScript,請來SUN公司對LiveScript進行改造,命名爲JavaScript
- 1996年,微軟抄襲了JavaScript語言
- 1997年,ECMA(歐洲計算機製造商協會),ECMAScript,就是所有的客戶端腳本的標準

總結:JavaScript =ECMAScript+JavaScript自己特有的東西(BOM+DOM)

ECMAScript:客戶端腳本語言的標準

1.基本語法

* 1.和html結合方式.

  * 1.內部
    * 定義<script>,標籤體內容就是js代碼

  * 2.外部
    * 定義<script>,通過src屬性引入外部的js文件,js文件中的代碼就是標籤中要執行的代碼

  * **注意**:<script>標籤可以定義在html頁面的任何位置,但是定義的位置會影響執行順序.並且<script>標籤可以定義多個

       <!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>內部結合方式</title>
       </head>
       <body>
       <!--        在html中定義<script>標籤,可以放在任意位置,但是會影響執行順序-->
           <script>
               alert("hello,world")
           </script>
       <!--因爲標籤放在html代碼之前,所以在html代碼之前執行-->
           <input type="text">

       <!--    外部結合方式指的是:在外部寫好javaScript代碼,然後通過<script>標籤引入-->
       </body>
       </html>

基本輸出語句:

  * document.write("");表示在頁面上輸出內容

* 2.註釋

  * 單行註釋:  //
  * 多行註釋:   /*   */

3.數據類型

  * 原始數據類型(基本數據類型)
    * 1.number(數字)整數/小數/NaN(not a number)一個不是數字的數字類型
    * 2.string:字符串   字符/字符串
    * 3.boolean:true和false
    * 4.null:一個對象爲空的佔位符
    * undefined:未定義(如果一個變量沒有給初始化,暗惡魔就就是undefined)
  * 引用數據類型(對象)

4.變量

  * 變量:一小塊存儲數據的內存空間

  * Java語言是強類型的語言,而JavaScript是一個弱類型的語言
    * 強類型:在開闢空間時,定義了空間將來存儲的數據的數據類型
    * 弱類型:在開闢變量存儲空間時,不定義空間將來存儲的數據的數據類型

  * 語法:
    * var 變量名 = 初始化的值;(也可以不初始化值)

        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title>原始數據類型</title>
        </head>
        <body>
            <script>

                /**原始數據類型:
                 *      number
                 *      string
                 *      boolean
                 *      null
                 *      undefined
                 * 引用數據類型
                 *
                 */
            var a = 5;
            var b = "abc";
            var c = true;
            var d = null;
            var e;
            document.write(typeof(a)+"<br>");
            document.write(typeof(b)+"<br>");
            document.write(typeof(c)+"<br>");
            document.write(typeof(d)+"<br>");
            document.write(typeof(e)+"<br>");
            </script>

        </body>
        </html>

5.運算符

1.一元運算符:只有一個運算數的運算符

        ++,--,+,-
        ++(自增)
        --(自減)
        注意這個運算符的位置(順序和java中的一樣的)

        +(正號)-(負號)
        注意:在JS中,如果運算數不是運算符所要求的類型,那麼js引擎會自動的將運算數進行書類型轉換

        其他類型轉爲number:
        1.字符串轉number
          var b =+"123"
          alert(b)
          如果自面子不是數字類型,那麼轉爲一個不是數字的數字(NaN)
        2.boolean轉爲number
        	true轉爲1
        	false轉爲0

算術運算符

    ```
    +,-,*,/,%

    和java沒有區別
    ```

賦值運算符

    ```
    =,+=,-=....
    ```

比較運算符

    ```
    >,<,>=,<= , == , ===(全等於)

    比較運算符的比較分爲:
    	1.類型相同的比較
    		直接比較
    			字符串按照字典順序比較;按位逐一比較,直到得出大小爲止
    	2.類型不同,先進行類型的轉換,再比較
    	
    	
    ===運算符
    全等於,在比較之前,先進行類型判斷,如果類型不一樣,則直接返回false.
    ```

    ```html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>比較運算符</title>
    </head>
    <body>
        <script>
            var a = 123;
            var b = "123";
            document.write(a ==b);
        </script>
    </body>
    </html>

    <!--返回的結果是true -->
    ```

邏輯運算符

    ```
    &&  || !

    之前有講如果類型不是運算符要求的類型,會進行自動的類型轉換

    其他類型轉換爲boolean:
    	1.number轉boolean:
    		0爲假,非0爲真
    	2.string轉boolean:
    		除了空字符串其他都是true
    	3.null&undefined
    		都是false
    	4.對象轉boolean:
    		所有對象都是true
    ```

三元運算符

    ```
    ?   :
    ```

6.流程控制語句

  * if..else

  * switch

    * 在java中switch可以接受的數據類型

      ```
      switch(變量)		
      	case 值:
      	
      	switch可以接受的變量的類型byte/int/short/char/枚舉(1.5之後)/string(1.7)之後
      ```

    * 在JS中switch可以接收任何**原始的數據類型**

  * while

  * do...while

  * for

* 7.特殊語法:

  ```
  1.語句以;語句,如果一行只有一行語句,那麼;可以省略
  2.變量定義問題:
  	變量的定義可以使用var關鍵字,也可以不使用任何關鍵字
  	用:定義的變量是局部變量
  	不用:定義的變量是全局變量(不建議使用)
  ```

8.練習99乘法表

2.基本對象

* Function對象:描述一個方法或者函數的對象

1.創建

    ```
    1.  var fun = new Function(形參列表,方法體);(不常用)
    2.	function 方法名稱(形參列表){
      		方法體
    }

    	例如:
    	function fun(a,b){
          alert(a+b);
    	}
    	fun(1,3);
    	
    3. var 方法名 = function(形參列表){
      		方法體
    }
    ```

2.方法

    * 調用:直接寫方法名和傳參就可以了

3.屬性

    * length:代表形參的個數

4.特點

方法定義時,形參的類型可以不寫
方法是一個對象,重名的方法,會覆蓋之前定義的方法
在JS中方法的調用只與方法的名稱調用有關,和參數列表無關.

在方法聲明中有一個隱藏的內置對象(數組),arguments,封裝傳進去的所有的實際參數.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>function對象</title>
</head>
<body>
    <script>

        /**     function對象(方法/函數)
         *          語法格式:
         *          1. var 方法名 = new function(形參列表){
         *              方法體
         *          }
         *          2. function 方法名(形參列表){
         *              方法體
         *          }
         *
         */
        function fun(a,b) {
            document.write(a+b);
        }
        fun(3,4);
        document.write("<br>")
        document.write(fun.length);
    </script>
</body>
</html>

Array:數組對象

1創建

    * 1.var arr = new Array(元素列表);
    * 2.var arr = new Array(數組的默認長度)
    * 3.var arr =[元素列表];

2.方法

    * join(參數):將數組的元素按照指定的分隔符拼接爲字符串
    * push():向數組的末尾添加一個或更多元素,並且返回新的長度
    *

3.屬性

length:數組的長度

4.特點

JS中,數組元素的類型是可變的
在JS中,數組的長度是可變的

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Array對象</title>
      </head>
      <body>
          <script>
              /**
               * 創建Array數組對象的方式
               *          1.var arr = new Array(元素列表);
               *          2.var arr = new Array(元素長度);
               *          3.var arr = new Array[元素列表];
               */
              var arr1 = new Array(1,2,3,4);
              var arr2 = new Array(5);
              var arr3 = [1,23,4];
              document.write(arr1);
              document.write("<br>");
              document.write(arr1[1]);//javaScript語法中Array對象也支持索引,並且下標也是從0開始
              document.write("<br>");
              document.write(arr2);
              document.write("<br>");
              document.write(arr3);
          </script>
      </body>
      </html>

Boolean

Date

1.創建

var Date = new Date();

2.方法

toLocaleString():返回當前date對象對應的時間本地字符串
getTime():獲取毫秒值,返回當前時間對象描述的時間和1970年1月1日零點的時間所過的毫秒值

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Date對象</title>
      </head>
      <body>
          <script>

              /**
               *  var Date = new Date();
               *  默認的顯示方式和java中的一樣,但是我們在java中要使用SimpleDateFormat才能進行格式轉換
               *  在javaScript中很簡便,調用toLocalString()方法就可以了
               */
              var date = new Date();
              document.write(date);
              document.write("<br>");
              document.write(date.toLocaleString());
              document.write("<br>");
              document.write(date.toLocaleDateString());
              document.write("<br>");
              document.write(date.getTime())
          </script>
      </body>
      </html>

      <!--輸出:
      Thu Apr 30 2020 00:28:29 GMT+0800 (中國標準時間)
      2020/4/30 上午12:28:29
      2020/4/30
      1588177709696 -->

Math:數學

1.創建

特點:該對象不需要創建可以直接使用

2.方法

1.random():返回0~1之間的一個隨機數(含頭不含尾,和java中很類似)
ceil():對數進行想向上上舍入
floor()對數進行下舍入
round():對數進行4舍5入爲最接近的整數
3.屬性
PI π值

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Math對象</title>
      </head>
      <body>
          <script>
              /**
               * Math對象比較特殊,不需要創建就可以直接使用
               */

              var a = Math.PI;
              document.write(a);
              document.write("<br>");

              document.write(Math.random());
              document.write("<br>");
              document.write(Math.ceil(5.32));
              document.write("<br>");
              document.write(Math.floor(5.98));
              document.write("<br>");
              document.write(Math.round(5.51));
          </script>
      </body>
      </html>
      <!--輸出:
      3.141592653589793
      0.06079875959909731
      6
      5
      6
      -->

Number

String

RegExp:正則表達式對象

1.正則表達式:定義字符串的組成規則的表達式

1.開始和結束符號

          以 ^ 開始
          以 $ 結束
          ```

        * 1.單個字符

          ```
          [a]表示字符a
          [ab]表示字符a或者字符b
          [a-z]表示字符a到字符z

          爲了簡便:
          \d:單個數字字符[0-9]
          \w:單個單詞字符[a-zA-Z0-9_]

2.量詞符號

         ?	表示出現0次或者1次
         *	表示0次或多次
         +	表示出現1次或者多次
         {m,n}	m<=表示出現次數<=n
         {,n}	m缺省表示至多n次
         {m,}	n缺省表示最少m次

正則對象:

1.創建
- var reg = new RegExp(“正則表達式”);
- var reg = /正則表達式/;
2.方法
- test(參數):驗證指定字符串是否符合正則表達式規範

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>RegExp正則對象</title>
      </head>
      <body>
          <script>
              /**
               * RegExp正則對象
               *  創建:
               *      1.var reg = new RegExp("正則表達式");
               *      2.var reg = /正則表達式/
               *
               *      方法:
               *      test()方法檢測是否符合正則表達式
               */

              var str = "zhangsan"
              var reg = new RegExp("//w{6,12}");
              document.write(reg.test(str));
          </script>
      </body>
      </html>

Global

1.特點:全局對象,這個Global中封裝的方法不需要對象就可以直接使用

2.方法:

1.encodeURL:url編碼
2.decodeURL url解碼
- encodeURLComponent:url編碼,編碼的字符更多
- decodeURLComponent:url解碼,解碼的字符更多
- parseInt:將一個字符串轉爲數字
  
  逐一判斷每一個字符是否爲數字,知道不是數字爲止,把前面的數字部分轉爲number
- isNaN():判斷是不是NaN
  - NaN六親不認,NaN參與的==比較都會返回false,所以沒辦法比較,因此有isNaN這個方法來判斷是不是NaN.
- eval():將JavaScript字符串,並將它作爲腳本代碼來執行

DOM簡單學習:爲了滿足案例要求

控制html文檔的內容
代碼:獲取頁面標籤(元素)對象 Element
- document.getElementById(“id值”):獲取元素的對象
操作Element對象
- 1.修改屬性值
  - 明確獲取的對象是哪一個,查看api文檔,找那些屬性可以設置
- 2.修改標籤體的內容
  - 屬性:innerHTML
事件簡單瞭解:
- 功能:某些組件被執行了某些操作後,觸發某些代碼的執行
- 如何綁定事件:
  - 1.直接在html標籤上,指定事件的屬性(操作),屬性值就是js代碼
    - οnclick="" 表示單擊事件
  - 2.通過js獲取元素對象,指定事件屬性,設置一個函數

BOM

概念:Browser Object Model瀏覽器對象模型
- 將瀏覽器的各個組成部分封裝成對象
組成:
- Window:窗口對象
  - 1.創建
  - 2.方法
    - 1.和彈出框有關的方法:
      - 1.alert()顯示帶有一段消息和一個確認鍵的警告框
      - 2.confirm():顯示帶有一段消息以及確認按鈕和取消按鈕的對話框
        
        如果用戶點擊確認按鈕,則返回true,否則返回false
      - 3.prompt();顯示可提示用戶輸入的對話框
        
        返回值是獲取用戶輸入的值
    - 2.和打開關閉有關的方法:
      - open(url地址):打開一個新的頁面,頁面的url地址傳入參數
      - close():誰(頁面)調用這個方法就關閉那個窗口
    - 3.和定時器有關的方法
      - 定時器:相當於鬧鐘
      - setTimeout():在指定的毫秒數後執行函數或者調用表達式
        
        參數:
        
        1.js代碼或者一個表達式
        
        方法名或者js代碼
        
        2.毫秒值
      - clearTimeout():取消由setTimeout()方法設置的timeout
        
        參數傳一個timeout的對象
      - setInterval():按照指定的週期(以毫秒記)來調用函數或計算表達式
        
        參數:
        
        1.js代碼或者一個表達式
        
        方法名或者js代碼
        
        2.毫秒值
      - clearInterval():取消由setInterval()設置的timeout
        
        參數傳一個timeout的對象
  - 3.屬性
    - 1.可以獲取其他BOM對象
      - history
      - location
      - Navigator
      - Screen
    - 2.獲取DOM對象
      - document
  - 4.特點
    - window不需要創建,可以直接使用.window.方法名()直接調用
    - window引用可以省略
- Navigator:瀏覽器對象
- Screen:顯示器[屏幕對象
- History:歷史記錄對象
- Location:地址欄對象
  - 1.創建(獲取):
    - window.location
    - location
  - 2.方法:
    - reload()重新加載當前文檔,刷新
  - 3.屬性;
    - href:設置或者返回當前的url地址
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自動跳轉</title>

    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }
    </style>

</head>
<body>
    <p>
        <span id="time">5</span>秒後自動轉跳到首頁
    </p>
```

            <script>
                /**
                 * 分析;
                 *      1.文字的控制用一個<p>便籤
                 *      2.控制讀秒,因爲要控制秒數,所以用一個<span>包裹
                 *          2.1
                 */
                var  second = 5;
                var time =document.getElementById("time");
                function showtime() {
                    second --;
                    if(second<=0){
                      	//特別注意一下這裏的href設置的格式,href是屬性,不是方法
                        location.href="https://www.baidu.com";
                    }
                    time.innerHTML =second+"";
                }
                //設置定時器
                setInterval(showtime,1000);
    
            </script>


        </body>
        </html>

DOM
- 概念: Document Object Model文檔對象模型
  - 將標記語言文檔的各個組成部分,封裝爲對象,可以使用這些對象,對標記語言文檔進行CRUD的動態操作
  - DOM定義了訪問HTML和XML文檔的標準
- W3C DOM標準被分爲3個不同的部分:
  - 核心DOM:針對任何結構化文檔的標準模型
    - document對象:文檔對象
    - Element:元素對象
    - Attribute:屬性對象
    - Text:文本對象
    - Comment:註釋對象
  - XML DOM:針對XML文檔的標準模型
  - HTML DOM:針對HTML文檔的標準模型
- 核心DOM
  - 1.document對象:
    - 1.創建:在htnl中可以使用window對象來獲取
      - window.document
      - document
    - 2.方法
      - 1.獲取Element對象:
        
        1.getElementById():根據id屬性值獲取元素對象,id屬性值一般是惟一的
        
        2.getElementByTagName():根據元素名稱獲取元素對象們,返回值是一個數組
        
        3.getElementByClassName():根據Class屬性值來獲取元素們,返回值是一個數組
        
        4.getElementByName():根據name屬性值獲取元素們,返回值是一個數組
      - 2.創建其他DOM對象
        
        createAttribute(name):
        
        createComment():
        
        createElement():
        
        createTextNode():
    - 3.屬性
  - 2.Element:元素對象
    - 1.創建/獲取:通過document來獲取和創建
    - 2.方法:
      - 1.removeAttribute():刪除屬性
      - 2.setAttribute():設置屬性
  - 3.Node:節點對象,其他5個對象的父對象
    - 節點可以是元素節點,屬性節點,文本節點,或者是任意一種節點類型
    - 特點:所有的DOM節點都可以被認爲是一個節點
    - 方法:
      - CRUD DOM樹:
        
        appendChild():向節點的子節點列表的結尾添加新的子節點
        
        removeChild():刪除(並返回)當前節點的指定子節點
        
        replaceChild():用新節點替換一個子節點
    - 屬性
      - parentNode : 返回節點的父節點
HTML DOM:
- 1.標籤體的設置和獲取:innerHTML
- 2.使用html對象的屬性
- 3.設置樣式
  - 1.使用元素的style屬性來設置樣式
  - 2.提前定義好類選擇器的樣式,通過元素.className屬性來設置class屬性值

事件監聽機制:

概念:某些組件被執行某些操作後,觸發某些代碼的執行.
- 事件:某些操作,如:單擊,雙擊,鍵盤按下了.鼠標移動了
- 事件源:組件,如按鈕,文本輸入框
- 監聽器:代碼
- 註冊監聽:將事件,事件源,監聽器結合在一起,當事件源上發生了某個事件,觸發執行這個監聽器執行代碼
常見的時間:
- 點擊事件:
  - 1.onclick:單擊事件
  - 2.ondblclick:雙擊事件
- 焦點時間:
  - 1.onblur:失去焦點:一般用來表單校驗(用戶名是否存在,是否合法等)
  - 2.onfocus:元素獲得焦點
- 加載事件:
  - 1.onload:(一個頁面,一張圖片完成加載)
- 鼠標事件:
  - 1.onmousedown :鼠標按鈕被按下了
    - 定義方法時,定義一個形參,接收event對象
    - event的button屬性可以獲取哪個鼠標按鈕被點擊了
    - 返回0鼠標左鍵1滾輪點擊了2鼠標右鍵
  - 2.onmouseup:鼠標按鈕被鬆開了
  - 3.onmousemove:鼠標被移動
  - 4.onmouseover:鼠標移動到某一元素上
  - 5.onmouseout:鼠標從某一元素移開
- 鍵盤事件:
  - 1.onkeydown:某個鍵盤按鈕被按下了
  - 2.onkeyup:某個鍵盤按鈕被鬆開了
  - 3.onkeypress:某個鍵盤按鍵被按下並鬆開
- 選中和改變:
  - onchange:域的內容被改變
  - onselect:文本被選中
- 表單事件:
  - 1.onsubmit:確認按鈕被點擊
  - 2.onreset:重置按鈕被點擊

JavaScript學java後端也得學??

JavaScript

文章目錄

基本概念:一門客戶端腳本語言

1.基本語法

基本輸出語句:

3.數據類型

4.變量

5.運算符

1.一元運算符:只有一個運算數的運算符

算術運算符

賦值運算符

比較運算符

邏輯運算符

三元運算符

6.流程控制語句

8.練習99乘法表

2.基本對象

1.創建

2.方法

3.屬性

4.特點

Array:數組對象

1創建

2.方法

3.屬性

4.特點

Boolean

Date

1.創建

2.方法

Math:數學

1.創建

2.方法

Number

String

RegExp:正則表達式對象

1.正則表達式:定義字符串的組成規則的表達式

1.開始和結束符號

2.量詞符號

正則對象:

Global

1.特點:全局對象,這個Global中封裝的方法不需要對象就可以直接使用

2.方法:

DOM簡單學習:爲了滿足案例要求

BOM

事件監聽機制: