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:
- i can be seen as a local variable
- The loop conditions can be changed according to the actual situation
- When modifying loop conditions, make sure the loop can change towards the end
- 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>