JS new challenges

         A month HTML, Whether it's pc Neither end nor mobile end can escape from the fixed structure and syntax , The degree of acceptance is still ok, Then it began to enter the second stage JavaScript Learning from , Just four days' content is enough to sigh . The difficulty of the course itself , The rhythm of the teacher's class , A day or two before a week can be compared to flying , The next threeorfour days can be called riding a rocket , Abet ~~ Be stunned . This week I mainly studied ：

        One 、JavaScript summary

JavaScrip abbreviation JS, Is running on the 【javascript Interpreter perhaps In a specific engine 】 Of 【 interpreted 】【 Weak type 】【 object-oriented 】 Scripting language

    1、javascript Interpreter ：
        1、 Browser comes with js Interpreter
        2、 Install one separately js Interpreter - node.js when

    2、 A compiled ： Before running the program , You need to check whether the grammar is correct , If it is incorrect, it is not allowed to run , such as ：java、c、c++、c# - More stringent
       Interpreter ： Before running the program , Don't check whether the grammar is correct , Direct operation , If there is an error, it will stop running , such as ：javascript、php、node.js... - More freedom

    3、js characteristic ：
        1、 Code can be written with any text editor ：vscode hbuilder Notepad ...
        2、 Explanatory language , No need to compile
        3、 Weak type language ： There is no need to specify , Put whatever you want - Love freedom
             The data type of a variable is determined by its value

    4、js effect ：
        1、 Calculation of client data ： The shopping cart
        2、 Data validation of forms ：（ cell-phone number 、 Id card 、 mailbox 、 password ）
        3、 Provides events （ Click on 、 Move the mouse in and out 、 keyboard ...）
        4、 Everything on the web css Special effects that cannot be done , All by js complete
        5、 Interact with the server side ajax

        Two 、JavaScript Use

1、 Usage mode ：2 individual
        1、 stay HTML Write a label on the page ： 
            <script>
                js Code
            </script>

        2、 Create a xx.js file , Write in it js Code , Last in HTML The page introduce
            <script src="xx.js File path "></script>

 2、JS Debug statement for ： During code execution , If there's a mistake , Will report a mistake , But the subsequent code will not be executed , Even if it's just a logical error, not a grammatical error , That won't be wrong , We need a way to help us find out what's wrong
           *1、 Log output at the console ：console.log( What you want to output );// Piling output , Crazy piling
            2、 Output on the page ：document.write( What you want to output ); - Not to mention , If the event is bound , It will replace all the contents on the page
           3、 The pop-up box shows ：alert( What you want to output ); - The whole page will be blocked , Users cannot see it until it is closed HTML and CSS

 3、js Grammatical norms of ： It is strictly case sensitive , Don't Scribble
         such as ：
            console.log();// correct
            console.Log();// error

         3、 ... and 、JavaScript The sentence of

1、while loop ：
     grammar ：
    var Loop variable = A few ;
    while( The loop condition ){
         The loop body ;
         Changes in loop variables ;
    }

2、for loop ： and while What you can do is exactly the same , It's just that grammar is better than while It's simpler , It also looks more comfortable
     grammar ：
    for(var Loop variable = A few ; The loop condition ; Changes in loop variables ){
         The loop body ;
    }

3、if structure ：
    1、 One condition, one thing , If you are satisfied, do it. If you are not satisfied, do not do it
        if( Conditions ){
             operation
        }

    2、 A condition 2 thing , If you are satisfied, do 1 dissatisfaction 2
        if( Conditions ){
            1
        }else{
            2
        }

    3、 Multiple conditions, multiple things , Do what you want
        if( Conditions 1){
            1
        }else if( Conditions 2){
            2
        }else{
            3
        }

4、***** Array ：

        1、 Create array ：2 Ways of planting
           *1、 Direct measurement ：var arr=[];// An empty array
                   var arr=[ Elements , Elements ,...];

             2、 Constructor method ：var arr=new Array();// An empty array
                 var arr=new Array( Elements , Elements ,...);

         3、 ... and 、JavaScript The composition of

1、DOM Trees ：DOM take HTML As an upside down tree structure , But the roots are not what you understand HTML label
      * The root ： It's a document object ,document Objects do not need to be created by our programmers , By the browser JS Interpreter creation , There is only one page document
       effect ： Provides some properties and methods , We programmers can operate the whole DOM Trees （ Add, delete, modify and check each DOM node ）
       DOM node ： A label 、 Text 、 attribute 、 Elements

2、 Look for the element ：

           1、 adopt HTML Features to find elements

                1、id lookup ：var elem=document.getElementById("id value ");  // Single element

                2、 Tag name search ：var elems=document/ Found parent element .getElementsByTagName(" Tag name ");    // group

               *3、class lookup ：var elems=document/ The father who has been found .getElementsByClassName(" Tag name ");    // group

        2、 Find the relationship between nodes ： Premise ： You have to find someone first , To use relationships
     Father ：elem.parentNode;// Single element
     Son ：elem.children;// aggregate
     The first son ：elem.firstElementChild;// Single element
     The last son ：elem.lastElementChild;// Single element
     The last brother ：elem.previousElementSibling;// Single element
     The latter brother ：elem.nextElementSibling;// Single element

3、 Operational elements ：        

        1、 Content ：
              *1、innerHTML attribute ： obtain or Set up The content of an element , And can identify labels
                         Get content ：elem.innerHTML;
                         Set contents ：elem.innerHTML=" New content ";

               2、innerText attribute ： obtain or Set up The text of an element , The label cannot be recognized
                         Get content ：elem.innerText;
                         Set contents ：elem.innerText=" New content ";

              3、value attribute ： Specifically for single label （input） Operation content preparation
                        Get content ：input.value;
                        Set contents ：input.value=" New content ";

        2、 attribute ：

                1、 Get attribute value ：elem.getAttribute(" Property name ");
                2、 Setting property values ：elem.setAttribute(" Property name "," Property value ");

                simplify ：
                    1、 obtain ：elem. Property name ;
                    2、 Set up ：elem. Property name =" Property value ";

                defects ：1、 Cannot manipulate custom attributes , Only standard properties can be manipulated
                  2、class stay ES6 Upgrade to a keyword , So I want to write class In exchange for className

        3、 style ：

                 grammar ：
                         obtain ：elem.style.css Property name ;
                         Set up ：elem.style.css Property name ="css Property value ";

                 special ：1、css Property name , Where there is a horizontal line , Change to the small hump nomenclature
                      2、 At the time of acquisition , Dai Laoshi only handed over to everyone to get the inline style , Cannot get styles in style sheet

        

        4、 Element binding events ：
             Single element ：elem.οnclick=function(){
                     operation ;
                    this-> Single element binding event ,this->elem Bind this element of the event
                  }

             Multiple elements ：for(var i=0;i<elems.length;i++){
                    elems[i].οnclick=function(){
                             operation
                            this-> Multiple element binding events ,this-> The element that currently triggers the event
                    }
                  }

*** summary ：
   1、 All acquisition is for judgment
   2、 All settings are for modification
   3、 Never operate on a set , Or traverse to get all , Or take a subscript