2022-07-12 The third group Lai Zhedong study notes


Today's focus: Document Object Model DOM, four loops
Knowledge point mastery: understand
Learning experience: I feel good today, I can basically keep up with the rhythm of the teacher, and I am more interested in learning than before. Keep going!

1.1 Naming rules for function names

1.1.1 Small hump

Variables are generally identified with a small camel case. Except for the first word, the first letter of other words is capitalized

let myStudentCount
1.1.2 Big hump method

Commonly used for class names, properties, namespaces, etc. The first letter of each word is capitalized

class = "DataBaseUser"

1.2 Cycle

1.2.1 for loop
  • let i = 0; initialization condition, when i=0, the loop starts and only goes once, initialized at the first loop
  • i < 10; the judgment condition will cooperate with the initialization condition to execute the loop
  • Loop body: what the loop is doing over and over again
  • i++ loop condition Make i change every time the loop body is executed
for(let i = 0;i <10; i++){
 	console.log(i);                    
}

Notice:

  1. i can be seen as a local variable
  2. The loop conditions can be changed according to the actual situation
  3. When modifying loop conditions, make sure the loop can change towards the end
  4. When developing, avoid infinite loops
1.2.2 for in loop

The for in statement can only do traversal operations

It can be understood that a is the subscript of the arr array by mapping to a

let arr = [1,2,3,4,5];
for(let a in arr){
  console.log(arr[a]);
}
1.2.3 while loop

grammar:

while(a < 100){     //loop judgment statement
	let a = 10; 	//initialization condition
    console.log(a);	//loop body
    a++;			//loop condition
}					

while if the condition is not true, do not execute once

practise:

​ The company has 10 people, and the company will recruit 10% of people every year

​ Q: In which year the number of the company exceeded 100 (this year is 2022)

<script>       
   function count(b, year) {
   while (b < 100) {
   b *= 1.1;
   year += 1;
}
   console.log(year + "year breakthrough" + b);
}
	count(10, 2022);
</script>

1.2.4 do...while loop

Statement:

let a = 10;			//initialization condition
do {
	console.log(a);	//loop body
	a++;			//loop condition
} while(a < 100);	

do...while executes once, and then judges whether the condition is true or not, executes it once

Infinite loop:

for(;;){}
while(true){}
do{}while(true);

1.3 DOM (emphasis)

1.DOM is the Document Object Model: When a web page is loaded, the browser creates the Document Object Model of the page.

2. Through the DOM, all elements of a JavaScript HTML document can be accessed.

1.3.1 By grabbing HTML elements
<body>
    <div class="div1" id="div1">
        <div class="div2" id="div2"></div>
    </div>
	<script>
//1. Grab by id
let div1 = document.getElementById("div1");  
//2. Grab HTML elements according to class
let div1 = document.getElementsByClassName("div1");
//3. Grab HTML elements according to tags (tags)
let div1 = document.getElementsByTagName("div");
//new method
// 1. Grab the first element according to the selector
let div = document.querySelector(".div1");
// 2. Get all elements according to the selector
let divs = document.querySelectorAll(".div1");
//Get everything inside an element, including HTML tags
console.log(div.innerHTML);
//Get the text inside the element will not get the inner HTML tag
console.log(div.innerText);
//change the content of an element
div.innerText = "<b>I am bold</b>";
console.log(div.innerText);
	</script>
</body>
1.3.2 Changing the content of an element
<body>
//change the content of an element
div.innerText = "<b>I am bold</b>";
console.log(div.innerText);
	</script>
</body>

1.4 Events

An event is an action or something that happens within the system when you program, and after the system responds to the event, you can respond to the event in some way if needed.

Do not place double quotes within double quotes or double quotes within single quotes or single quotes within double quotes

<body>
    <input type="text" onblur="valid()">
    <button type="button" ondblclick="jump('Hello')">button</button>
    <select onchange="change()">
        <option value="">Jilin Province</option>
        <option value="">Liaoning Province</option>
    </select>
    <script>
        //Events are actions that occur when we interact with HTML tag elements
        /*
            onclick click event
            ondblclick  double click event
            onblur  lose focus
            onfocus get the focus
            onchange change event
            onload  load event
        */
        //When the corresponding event is set, the target function will be executed
        //Click the button and a popup will pop up
        function jump(a) {
            alert("button was clicked" + a);
        }
        function valid() {
            console.log("lost focus");
        }
        function change() {
            console.log("has changed");
        }
    </script>
</body>

1.5 Practice

<script>
        // Requirement When the user name is admin and the password is 123456, it will prompt that the login is successful
        // Otherwise, the user name or password is displayed incorrectly.
        /*
            Idea: Add a click button to the button
            When clicking submit, get the values ​​entered in the username and password boxes        
            Then judge if() login is successful else username or password is wrong!
        */

        let text = document.querySelector("#username");
        let password = document.querySelector("#password");
        function jump() {
            //  value Take the content entered in the username box
            if (text.value == "admin" && password.value == "123456") {
                console.log("login successful");
                alert("login successful");
            } else {
                console.log("Username or password is incorrect!");
                alert("Username or password is incorrect!");
            }
        }
    </script>
<script>
        /* 
            Enter the username in both the username text boxes
            If the username is admin, the span shows that the username is already occupied
            Otherwise, show username available
            analyze:
            Need to add onchange onblur to the text box 
            The input function needs to write the content in the span innerText innerHTML
        */
        let input = document.querySelector("#username");
        let span = document.querySelector("span");

        function ll() {
            if (input.value == "admin" || " ") {
                span.innerText = "Username already taken";
            } else {
                span.innerText = "Username is available";
            }
        }
    </script>
<body>
    <select id="sheng" onchange="setShi()">
        <option>----Please select a province----</option>
        <option value="jl">Jilin Province</option>
        <option value="ln">Liaoning Province</option>
    </select>
    <select id="shi" onchange="setQu()">
        <option>----Please select a city----</option>
    </select>
    <select id="qu">
        <option>----Please select area----</option>
    </select>
    <script>
        function setShi() {
            /*
                Ideas:
                1.Grab the drop-down menu of provinces to know which province you have selected
                2.Determine which province to choose
                3.Build city dropdown menu options
                4.Grab the drop-down menu for the city

                District Notes:
                1.The initial state area has no options
                2.Province, District selected, no options
                3.Select the province, select the city, select the district, switch the province
            */
            let sheng = document.querySelector("#sheng").value
            let shi = document.querySelector('#shi');
            let qu = document.querySelector("#qu");
            //Clear once before writing options
            shi.innerHTML = null;
            qu.innerHTML = null;
            shi.innerHTML = '<option>----Please select a city----</option>';
            qu.innerHTML = '<option>----Please select area----</option>';
            let html = shi.innerHTML;
            let html1 = qu.innerHTML;
            if (sheng == 'jl') {
                //append
                html += '<option value="cc">Changchun City</option><option value="sp">Siping</option>';
                //Put the spliced ​​drop-down menu option back to the drop-down menu option through innerHTML
                shi.innerHTML = html;
            }
            if (sheng == 'ln') {
                //append
                html += '<option value="sy">Shenyang city</option><option value="dl">Dalian</option>';
                //Clear once before writing options
                //Put the spliced ​​drop-down menu option back to the drop-down menu option through innerHTML
                shi.innerHTML = html;
            }

        }


        function setQu() {
            let shi = document.querySelector('#shi').value;
            let qu = document.querySelector("#qu");
            qu.innerHTML = null;
            qu.innerHTML = '<option>----Please select area----</option>';
            let html1 = qu.innerHTML;
            if (shi == 'cc') {
                html1 += '<option value="ed">Erdao District</option><option value="ng">Nanguan District</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'sp') {
                html1 += '<option value="tx">Tiexi District</option><option value="td">Tiedong District</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'sy') {
                html1 += '<option value="hp">Heping District</option><option value="hg">Huanggu District</option>';
                qu.innerHTML = html1;
            }
            if (shi == 'dl') {
                html1 += '<option value="zs">Zhongshan Area</option><option value="">Xigang District</option>';
                qu.innerHTML = html1;
            }
        }
    </script>
</body>

Posted by boske on Tue, 12 Jul 2022 21:02:57 +0930