JavaScript quick start

Posted by aysx on Thu, 30 Dec 2021 17:58:01 +0100

JavaScript is a client-side scripting language. Running in client browsers, each browser has an engine to parse JavaScript.
Scripting language: it can be parsed and executed directly by the browser without compilation.
The core function is to enhance the interaction between users and HTML pages and make the pages have some dynamic effects. To enhance the user experience!
Implementation steps
Create an HTML.
Write a < script > tag under the tag.
Write code in the < script > tag.
View via browser

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS quick get start</title>
</head>
<body>
    <button id="btn">Order me</button>
</body>
</html>

Method 1 of introducing js: internal method

<script>
    document.getElementById("btn").onclick=function () {
        alert("What am I doing?");
    }
</script

Mode 1 of introducing js: external mode

Create js file

document.getElementById("btn").onclick=function () {
    alert("What am I doing?");
}

Reference external js files in html

```
<script src="js/my.js"></script>
```
component
```
ECMAScript,DOM,BOM
```
Combined with HTML

Internal mode:<script></script>
External mode:<script src=File path></script>

Basic JavaScript syntax

Single-Line Comments
```
// Contents of notes
```
multiline comment
```
/*
Contents of notes
*/
```
Input / output statement
Input box prompt("prompt content");
Pop up the warning box alert("prompt content");
Console output console Log ("display content");
Page content output document Write ("display content");
variable and constant

JavaScript is a weakly typed language and does not distinguish between specific data types when defining variables.
Define local variable let, variable name = value;

//1. Define local variables
let name = "Zhang San";
let age = 23;
document.write(name + "," + age +"<br>");

Define global variable name = value;

//2. Define global variables
{
    let l1 = "aa";
    l2 = "bb";
}
//document.write(l1);
document.write(l2 + "<br>");

Define const constant name = value;

//3. Define constants
const PI = 3.1415926;
//PI = 3.15;
document.write(PI);

typeof is used to determine the data type of the variable

let age = 18; 
document.write(typeof(age)); // number

Ternary operator

Ternary operator format

(compare expressions)? Expression 1: expression 2;
Execution process

If the comparison expression is true, the expression 1 is taken

If the comparison expression is false, take expression 2

Process control and loop statements

if statement

//if statement
let month = 3;
if(month >= 3 && month <= 5) {
    document.write("spring");
}else if(month >= 6 && month <= 8) {
    document.write("summer");
}else if(month >= 9 && month <= 11) {
    document.write("autumn");
}else if(month == 12 || month == 1 || month == 2) {
    document.write("winter");
}else {
    document.write("Wrong month");
}

document.write("<br>");

switch statement

//switch Statements 
switch(month){
    case 3:
    case 4:
    case 5:
        document.write("spring");
        break;
    case 6:
    case 7:
    case 8:
        document.write("summer");
        break;
    case 9:
    case 10:
    case 11:
        document.write("autumn");
        break;
    case 12:
    case 1:
    case 2:
        document.write("winter");
        break;
    default:
        document.write("Wrong month");
        break;
}

document.write("<br>");**for loop**

for loop

//for loop
for(let i = 1; i <= 5; i++) {
    document.write(i + "<br>");
}

while loop

//while Loop 
let n = 6;
while(n <= 10) {
    document.write(n + "<br>");
    n++;
}

array

The use of arrays is basically the same as that in java, but arrays in JavaScript are more flexible, and there are no restrictions on data types and lengths.

Define format

let array name = [element 1, element 2,...];

Define format

- let Array name = [Element 1,Element 2,...];

Array length

Array name length

for(let i = 0; i < arr.length; i++) {
    document.write(arr[i] + "<br>");
}
document.write("==============<br>");

Array advanced operators

Array copy

 //Copy array
 let arr2 = [...arr];
 //Traversal array
 for(let i = 0; i < arr2.length; i++) {
 document.write(arr2[i] + "<br>");
 }
 document.write("==============<br>");

Merge array

//Merge array
let arr3 = [40,50,60];
let arr4 = [...arr2 , ...arr3];
//Traversal array
for(let i = 0; i < arr4.length; i++) {
document.write(arr4[i] + "<br>");
}
document.write("==============<br>");

String to array

//Convert string to array
let arr5 = [..."heima"];
//Traversal array
for(let i = 0; i < arr5.length; i++) {
document.write(arr5[i] + "<br>");
}

function

Function is similar to the method in java. You can extract some code to achieve the effect of reuse
Define format

function Method name(parameter list) {
    Method body; 
    return Return value; 
}

Variable parameters

function Method name(...Parameter name) {
    Method body; 
    return Return value; 
}

Anonymous function

function(parameter list) {
    Method body; 
}

Summary

Comments: single line / / multiple lines/**/
Input / output statements: prompt(), alert(), console log(),document.write()
Variables and constants: let, const
Data types: boolean, null, undefined, number, string, bigint
typeof keyword: used to determine the data type of a variable
Operators: arithmetic, assignment, logic, comparison, ternary operator
Process control and loop statements: if, switch, for, while
Array: there is no limit on data type and length. let array name = [length / element]
Function: use similar methods to extract code and improve reusability
DOM introduction
DOM(Document Object Model): document object model.
Encapsulate each component of an HTML document as an object. With these objects, you can add, delete, modify and query HTML documents dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Element acquisition</title>
</head>
<body>
    <div id="div1">div1</div>
    <div id="div2">div2</div>
    <div class="cls">div3</div>
    <div class="cls">div4</div>
    <input type="text" name="username"/>
</body>
<script>
    //1. getElementById() gets the element object according to the id attribute value
    let div1 = document.getElementById("div1");
    //alert(div1);

    //2. getElementsByTagName() gets the element objects according to the element name and returns an array
    let divs = document.getElementsByTagName("div");
    //alert(divs.length);

    //3. getElementsByClassName() gets the element objects according to the class attribute value and returns an array
    let cls = document.getElementsByClassName("cls");
    //alert(cls.length);

    //4. getElementsByName() gets the element objects according to the name attribute value and returns an array
    let username = document.getElementsByName("username");
    //alert(username.length);

    //5. Sub element object The parentElement property gets the parent element of the current element
    let body = div1.parentElement;
    alert(body);
</script>
</html>

Addition, deletion and modification of Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Addition, deletion and modification of elements</title>
</head>
<body>
    <select id="s">
        <option>---Please select---</option>
        <option>Beijing</option>
        <option>Shanghai</option>
        <option>Guangzhou</option>
    </select>
</body>
<script>
    //1. createElement() creates a new element
    let option = document.createElement("option");
    //Add text content for option
    option.innerText = "Shenzhen";

    //2. appendChild() adds the child element to the parent element
    let select = document.getElementById("s");
    select.appendChild(option);

    //3. removeChild() deletes child elements through parent elements
    //select.removeChild(option);

    //4. replaceChild() replaces the old element with the new element
    let option2 = document.createElement("option");
    option2.innerText = "Hangzhou";
    select.replaceChild(option2,option);

</script>
</html>

Action for Attribute

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operation of property</title>
    <style>
        .aColor{
            color: blue;
        }
    </style>
</head>
<body>
    <a>Order me</a>
</body>
<script>
    //1. setAttribute() add attribute
    let a = document.getElementsByTagName("a")[0];
    a.setAttribute("href","https://www.baidu.com");

    //2. getAttribute() get attribute
    let value = a.getAttribute("href");
    //alert(value);

    //3. removeAttribute() deletes the attribute
    //a.removeAttribute("href");

    //4. Add style to style attribute
    //a.style.color = "red";

    //5. Add the specified style to the classname attribute
    a.className = "aColor";

</script>
</html>

Operation of Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Operation of text</title>
</head>
<body>
    <div id="div"></div>
</body>
<script>
    //1. innerText adds text content without parsing labels
    let div = document.getElementById("div");
    div.innerText = "I am div";
    //Div.innertext = "< b > I am div < / b >";

    //2. innerHTML adds text content and parses tags
    div.innerHTML = "<b>I am div</b>";

</script>
</html>

JavaScript events

Events are events that trigger the execution of some code after some components perform some operations.
Event operation

Binding event
Mode 1

Bind through the event attribute in the tag.

<button id="btn" onclick="Functions performed"></button>

Mode II

Binding through DOM element attributes.

document.getElementById("btn").onclick = Functions performed

Event summary

Events are events that trigger the execution of some code after some components perform some operations.
Common events onload onsubmit onclick ondbllick onblur onfocus onchange
Binding event mode
- Method 1: bind through the event attribute in the tag.
- Method 2: bind through DOM element attributes.

Implementation of add function

//1, Add function
    //1. Bind click event for add button
    document.getElementById("add").onclick = function(){
        //2. Create row element
        let tr = document.createElement("tr");
        //3. Create 4 cell elements
        let nameTd = document.createElement("td");
        let ageTd = document.createElement("td");
        let genderTd = document.createElement("td");
        let deleteTd = document.createElement("td");
        //4. Add td to tr
        tr.appendChild(nameTd);
        tr.appendChild(ageTd);
        tr.appendChild(genderTd);
        tr.appendChild(deleteTd);
        //5. Get the text information of the input box
        let name = document.getElementById("name").value;
        let age = document.getElementById("age").value;
        let gender = document.getElementById("gender").value;
        //6. Create 3 text elements according to the obtained information
        let nameText = document.createTextNode(name);
        let ageText = document.createTextNode(age);
        let genderText = document.createTextNode(gender);
        //7. Add 3 text elements to td
        nameTd.appendChild(nameText);
        ageTd.appendChild(ageText);
        genderTd.appendChild(genderText);
        //8. Create hyperlink elements and displayed text, and add href attributes
        let a = document.createElement("a");
        let aText = document.createTextNode("delete");
        a.setAttribute("href","JavaScript:void(0);");
        a.setAttribute("onclick","drop(this)");
        a.appendChild(aText);
        //9. Add hyperlink element to td
        deleteTd.appendChild(a);
        //10. Get the table element and add tr to the table
        let table = document.getElementById("tb");
        table.appendChild(tr);
    }
</script>
</html>

Analysis of delete function

Add a click event attribute for each delete hyperlink.
Define the method of deletion.
Gets the table element.
Gets the tr element.
Delete tr through table.

//2, Deleted features
//1. Add a click event attribute for each delete hyperlink tag
//2. Define the deletion method
function drop(obj){
//3. Get the table element
let table = obj.parentElement.parentElement.parentElement;
//4. Get tr element
let tr = obj.parentElement.parentElement;
//5. Delete tr through table
table.removeChild(tr);
}

Topics: Javascript Front-end html

Programmer Think