Table of contents

6. JavaScript commonly used operation element methods:

1. Javascript concept:

1.1 Introduction to Javascript:

Javascript is a lightweight scripting language, a scripting language that runs on the client side ( Script means script, scripting language: does not need to be compiled, and is interpreted line by line by the js interpreter (js engine) during operation and execute). Unlike Java programs running in the JVM, Javascript runs directly in the browser and is mainly used to implement page functions and business logic.

1.2 Composition of Javascript:

Javascript mainly consists of three parts:

ECMAscript

DOM

BOM

ECMAScript : It stipulates the programming grammar and basic core knowledge of JS , and is a set of JS grammar industry standards that all browser manufacturers abide by .

DOM: Document Object Model ( DocumentObject Model , referred to as DOM ), is a standard W3C organization for processing Extensible Markup Language. Through the interface provided by DOM , various elements on the page can be operated (size, position, color, etc.).

BOM: Browser Object Model (Browser Object Model , referred to as BOM) refers to the browser object model, which provides a content-independent object structure that can interact with the browser window. Through the BOM , you can operate the browser window, such as pop-up boxes, control browser jumps, and obtain resolutions.

1.3 How to introduce Javascript:

There are three ways to import Javascript:

Inline: Write a single line or a small amount of JS code in the event attribute of the HTML tag ( the attribute starting with on ).
<input type="button" value="点我试试" onclick="alert('Hello World')" />
Embedded: You can write multiple lines of JS code into the script tag. Embedded JS is a common way to learn
 
    <script>
        // 输出方式
        alert("弹窗式");
        console.log("控制台");
        let str=prompt("请输入数据：");
        console.log(str);
    </script>
External introduction: It is conducive to the structure of the HTML page code, and separates large sections of JS code from the HTML page, which is not only beautiful, but also convenient for file-level reuse

2. Javascript basic syntax:

2.1 Commonly used input and output statements:

In order to facilitate testing and viewing we can use input and output statements:
 // 输出方式
        alert("弹窗式");
        console.log("控制台");
        let str=prompt("请输入数据：");
        console.log(str);

2.2 Variables:

Declaration of variables in Java: data type variable name; while variables in Javascript are passed through let, its type depends on what data type is passed in to the right of the equal sign, if it is a number, then it is a number, if it is a character string, then a string. To sum up: A variable is a memory space for storing data, and the type of a variable depends on the data on the right side of the equal sign . And this variable can be assigned different data types, what type is given to it, he will continue, very flexible.

2.3 Data type:

JavaScript data types are divided into:

simple data types ( Number,String,Boolean,Undefined,Null )

complex data type ( object )

Simple data types are divided into:

important point:

1. The string type can be any text in quotation marks, and its syntax is double quotation marks "" and single quotation marks ''

2. A variable that is not assigned a value after declaration will have a default value of undefined ( if you connect or add, pay attention to the result)

var variable;
console.log('你好' + variable); // 你好undefined
 console.log(11 + variable); // NaN
 console.log(true + variable); // NaN

3. A declared variable gives a null value, and the value stored in it is empty

var vari = null; 
console.log('你好' + vari); // 你好null 
console.log(11 + vari); // 11 
console.log(true + vari); // 1

2.3.1 Conversion between data types:

Variables of one data type are converted to another data type, usually in three ways:

convert to string

convert to numeric

Convert to Boolean

2.3.1.1 Convert to character type:

    // 字符转换
        console.log(num);
        console.log("num:"+num.toString);

2..3.1.2 Convert to digital type:

2.3.1.3 Convert to Boolean:

important point:

1. Values representing empty and negated will be converted to false , such as '' , 0 , NaN , null , undefined

2. The rest of the values will be converted to true

3. Javascript array:

There are two ways to create arrays in Javascript:

Create an array with new

var 数组名 = new Array() ； var arr = new Array(); // 创建一个新的空数组 12

Creating Arrays Using Array Literals

//1. 使用数组字面量方式创建空的数组 
var 数组名 = []； 
//2. 使用数组字面量方式创建带初始值的数组 
var 数组名 = ['小白','小黑','大黄','瑞奇'];

Four: Javascript function:

4.1 Use of arguments

When you are not sure how many parameters to pass, you can use arguments to get it. In JavaScript , arguments is actually a built-in object of the current function. All functions have a built-in arguments object, which stores all the actual parameters passed. The arguments display form is a pseudo-array, so it can be traversed. Pseudo-arrays have the following characteristics:

Has a length property

Store data by index

push , pop methods without arrays

important point:

1. Use this object inside the function, and use this object to obtain the actual parameters passed when the function is called

4.2 Variable scope:

Generally speaking, the name used in a piece of program code is not always valid and usable, and the code scope that limits the availability of this name is the scope of this name. The use of scope improves the locality of program logic, enhances the reliability of the program, and reduces name conflicts. There are two scopes in JavaScript ( before es6 ):

global variable

local variable

Global variables can be used anywhere in the code. Variables declared with var in the global scope are global variables. In special cases, variables declared without var in functions are also global variables (not recommended)

Local variables are variables declared in the local scope called local variables (variables defined inside the function). Local variables can only be used within the function. Variables declared with var inside the function are local variables. The formal parameters of the function are actually local variables.

important point:

1.Javascript does not have block scope, and block scope is included by { }. { } in the Java code is a scope, and the variable num declared in it cannot be used "{ }" ; if it is used, it will compile and report an error. Javascript doesn't.

4.2.1 The difference between global and local variables:

Global variables: can be used anywhere, and will only be destroyed when the browser is closed, so it takes up more memory

Local variable: used only inside the function, it will be initialized when the code block where it is located is executed; it will be destroyed when the code block runs, thus saving more memory space

5. JavaScriptDOM and its application:

5.1 Introduction to DOM:

Document Object Model ( Document Object Model , DOM for short ) is a standard programming interface for processing Extensible Markup Language (html or xhtml ) recommended by the W3C organization . W3C has defined a series of DOM interfaces, through which the content, structure and style of web pages can be changed.

The DOM tree is also called the document tree model, which maps documents into a tree structure, processes them through node objects, and the processed results can be added to the current page.

Document: A page is a document, which is represented by document in DOM

Node: All content in the web page is a node (label, attribute, text, comment, etc.) in the document tree, represented by node

Label node: All labels in a web page, usually called element nodes, also referred to as " elements " , are represented by element

5.2 Get elements:

Why get page elements?

For example: if we want to operate a certain part on the page ( show / hide, animation ) , we need to obtain the corresponding element of the part first, and then operate on it.

Ways to get elements:

 <!--四种选择器：
         1.id选择器
        2.class选择器
        3.标签选择器
         4.css选择器
         -->
         <script>
            window.onload=function(){

            }
            // id选择器
            let btn1=document.getElementById("btn1");
            console.log(btn1);
            // class选择器
            let btn2=document.getElementsByClassName("btn2");
            console.log(btn2);
            // 标签选择器
            let btn3=document.getElementsByTagName("button");
            console.log(btn3);
            // css选择器
            let btn4=document.querySelector("button");
            let btn5=document.querySelectorAll("button")

6. Javascript events:

6.1 Event overview:

JavaScript enables us to create dynamic pages, and events are actions that can be detected by JavaScript . Simple understanding: trigger --- response mechanism . Every element in a web page can generate certain events that can trigger JavaScript. For example, we can generate an event when the user clicks a button, and then perform certain operations.

Three elements:

Event source (who): The element that triggered the event

Event type (what event): e.g. click event

Event handler (what to do): the code to be executed after the event is triggered ( in the form of a function ) , the event handler function

Code demo:

Common mouse events:

7. Commonly used methods of manipulating elements in JavaScript :

7.1 Change element content:

<button>显示当前系统时间</button>
 <div>某个时间</div> 
<p>1123</p>
 <script> 
// 当我们点击了按钮， div里面的文字会发生变化
 // 1. 获取元素
 var btn = document.querySelector('button'); 
var div = document.querySelector('div');
 // 2.注册事件
 btn.onclick = function() { 
// div.innerText = '2019-6-6';
 div.innerHTML = getDate(); }

important point:

The difference between innerText and innerHTML :

The difference when getting content: innerText will remove spaces and newlines, while innerHTML will retain spaces and newlines

The difference when setting the content: innerText will not recognize html , but innerHTML will recognize

Front-end "three-piece suit" - HTML, CSS, Javascript (3)

1. Javascript concept:

2. Javascript basic syntax:

3. Javascript array:

Four: Javascript function:

5. JavaScriptDOM and its application:

6. Javascript events:

7. Commonly used methods of manipulating elements in JavaScript :

Guess you like