Hello everyone, the editor will answer your question about why the exclamation mark appears in the lower left corner of the web page. Many people still don’t know that javascript appears in the lower left corner of the computer browser, let’s take a look now!
Table of Contents
Introduction to JS
JS consists of three parts:
ECMAScript core syntax (explained in this article)
DOM document object model:
BOM Browser Object Model
function
JS function overloading problem
Global variables and local variables
Data types in JS
Undefined
Number
About NaN
About the usage of isNaN function? Edit
Use of parseInt(), parseFloat(), Math.ceil() functions
?edit
Boolean (don’t underestimate it, there is something in it)
String type
Common functions (methods) and attributes of strings:
Test point: What is the difference between substr and substring?
Object type (important!!!)
prototyoe
The difference between the three values of null, NaN, and undefined (test points, important)
The difference between == and === in JS (important, especially the third point)
JS events
Focus event:
Mouse events:
Keyboard events:
Form events:
Special Event:
Two ways to register events
The loading and execution sequence of JS code, and the use of load events!
Modify styles through events
Keyboard event details
JS operators
JS Introduction
JS is a scripting language that runs in the browser. It is an event-driven program. It is a weakly typed language and has no compilation process. For example: declare a variable in Java String name =”Zhang San”;
But in JS, it is var name= “Zhang San”; This var is arbitrary. Your name can be any data type. When the browser is running, it directly determines the value type you assigned to it to determine the data of the name. Type, in Java, if you do not give the variable data type when defining it, then an error will be reported during compilation for all operation symbols in Python. But JS will not, because it does not compile this step.
JS includes three parts:
ECMAScript core syntax (content explained in this article)
There is nothing easy to explain about the core grammar.
DOM Document Object Model:
It’s like the body part of the browser
BOM Browser Object Model
Equivalent to the upper part of the browser header
function
A function in JS is equivalent to a method in Java. It is a piece of code that can be reused and represents a certain function.
JS function overloading problem
JS does not have the problem of function overloading. When two functions have the same name, the latter one automatically overrides the previous one. So generally speaking, JS will not set two functions with the same name.
Global variables and local variables
Secondly, please memorize it again: if a variable is defined without adding var, then it will be a global variable no matter where you define it.
Data types in JS
Note: The return value of typeof num is a string! ! !
for example:
Undefined
Number
Integers, decimals, positive numbers, negative numbers, not numbers, and infinity (Infinity) all belong to the Number type
About NaN
About the usage of isNaN function
Usage of parseInt(), parseFloat(), Math.ceil() functions
Boolean (Don’t underestimate it, there’s something in it)
First of all, what remains unchanged for thousands of years is that there are only two Boolean values, true and false. Secondly, whether it is an if or a loop structure, the loop condition is judged only by these two values.
So what I want to say is that the biggest difference between the Boolean type in JS and Java is that there is a Boolean() function in JS, and its return value is a Boolean value. Whether we use a selection statement or a loop statement in JS is involved. Judgment of Boolean value, then in Java your judgment condition must put a Boolean value, but in JS you don’t need to put a Boolean value, you can put anything you want, it will automatically call the Boolean function to help you convert it into Boolean value.
for example:
Conversion of different types of Boolean:
“有” means that there is something and content, and the last infinity must also have something.
String type
There are two ways to create a string, one is to assign a string directly, and the other is to create it through a function.
Don’t be confused here, let’s review the data types of JS first.
The first method of direct assignment is the same as in Java. First of all, we need to know that the values of typeof are all lowercase, then the data type it corresponds to is the data type whose first letter is capitalized. For example, string corresponds to String. Let me talk about the first creation method: directly assign a string to the variable x. In fact, it means assigning a primitive data type String to it. Then the type of
Secondly, in the second way, I create an object and then let y point to it. Then my y is a reference type. There is nothing wrong with it. Among the reference types, JS only has Object and its subclasses, so it can be said that the Reference types are all Object types. Do not think that y is a String type or a String type.
Commonly used functions (methods) and attributes of strings:
This length is different from Java. In Java, it is a method (function), but in JS, it is an attribute, so there is no need to add parentheses later.
indexOf returns the index value if it exists, otherwise it returns a negative number.
Let’s talk about replacement here.
Test point: What is the difference between substr and substring?
Other methods are not demonstrated. You can take a look at it yourself and check it when you need it.
Object type (Important!!!)
Hahaha, you must be confused when you see this. Isn’t this the same as creating a function? ? ?
That’s right, it’s the same, but whether it is a class or method depends on the calling method. for example:
Secondly, there can only be one constructor (method used to initialize properties) in JS, and here’s the key point, its definition will be written together with the class, which means you don’t need to create a constructor with the same name as the class like Java does. method, and then inside this.name=”Zhang San”….; for example:
Did you see that this is originally placed in the constructor method in Java? It does not have this method directly and is placed in the class.
There are two syntaxes when used:
I have one thing to say about the ordinary methods of JS: if you see this, you must show me the following
These first few lines of code:
This belongs to the constructor, so there’s nothing wrong with it, because the three parameters you passed in are all initialized. The key is what this.getPrice() is behind! ! ! , let me first say that it is an ordinary method, and then you have to say, why do you need to add this? Ordinary methods and new objects can’t be used directly. What the hell is this? Let’s first see if we don’t add it. What error will he report if this is the case?
Type exception: pro.getName is not a function. The reason is that JS treats the whole “pro.getName” as a function reference. tmd does not go into the obj object to read this method at all, so why does it not go in? Because JS It is a scripting language that does not compile at all, which means that it will not compile and load your method when you create a new object like Java. It can only run this step, so it will not access this class if you do not add this. Look for this method inside, you can’t use this method at all. When you add this, this method will be dynamically bound to pro, so it can be used normally after you add this! ! ! !
Another point is that in the above situation, you must use this to create this function, and you cannot use it.
It was created this way, if you don’t believe me, try it yourself. It can only be created using equations.
prototyoe
This is an attribute of the Object class. You can use this attribute to extend the functionality of a function (either custom or existing), for example:
The difference between the three values of null, NaN and undefined (test point, important)
- Inconsistent data types:
- null is the Object data type.
- NaN is the Number data type
- undefined is the Undefined data type (undefined)
- null == undefined; that is to say, empty and undefined can be equated
- So at this time I have to introduce another thing, that is, if I have to judge that these two things are different, how can I judge?
- You can use ===. This symbol is a congruence symbol. It must be true if the value and data type are equal.
The difference between == and === in JS (important, especially the third point)
1. The concepts are different: one of the two is equal and the other is congruent.
2.== will only determine whether the values are equal. === determines both the value and the data type.
3. JS can directly use numerical values as judgment conditions. By default, non-0 numbers will be converted to true, and 0 will be false.
But pay attention! ! !
You have to consider this point in two situations:
The first situation: directly use the numerical value as the judgment condition. If the numerical value is not 0, it is true. For example, the result of if(5){} is true.
The second case: comparing numerical values with Boolean values for equality, the Boolean values will be converted to 1 or 0, for example
if(3 == true){The result is false, he will not come in, because at this time he will convert true to 1, 3 is not equal to 1}
JS event
Note: Any event corresponds to an event handle onXXX, where XXX is the event name. The event handle will appear in the attribute position of the html element tag. To put it bluntly, this event handle is used to set events. It exists in the form of attributes.
For example: the event handle corresponding to the click event is onclick
Here comes another concept: callback function
Focus event:
blur(lost focus)
focus(get focus)
Note: For example, on the login page, enter the account and password. When switching from the account box to the password box, the password box gains focus and triggers the focus event. The account box loses focus relatively, triggering the focus-lost event.
Mouse event:
click
dblclick (double click)
mousedown(mouse pressed)
mouseup (mouse pops up)
mousenover (mouse hover)
mousemove(mouse movement)
mouseout (mouse leaves)
Note: Clicking and pressing are not the same thing. Clicking includes pressing and popping up. Pressing is just pressing without popping up.
Keyboard events:
keydown(keyboard pressed)
keyup (keyboard pops up)
Form event:
reset(form reset)
submit(form submission)
Special event:
change (the selected item in the drop-down list changes, or the content of the text box changes)
load (occurs after the page is executed and the entire html page element is executed)
select (the text is selected, for example, if you want to copy a text, do you want to select it? The event will occur when it is selected, that’s what it means)
Important knowledge points:
When the event is triggered, the browser will create a new corresponding event object, and generally speaking, when we define the code to trigger the event, there will definitely be a next step, which is to build a function for the event, then the browser will create a new The event object is sent to the corresponding function. Even if the function you define has no formal parameters, it will be sent. However, if you do not define the formal parameters, you cannot get them. As for what is in the event object, you don’t need to know for the time being. You just need to know that it exists.
Two ways to register events
method one:
Method two:
You can also treat this callback function as an anonymous function and write it directly after the equal sign. The following method is the most commonly used
Note: In the second method, your JS code must be under the input element, otherwise it will not take effect. Then you will definitely feel that this second method is useless. So here I will introduce the JS code execution sequence and the use of the load event!
The loading and execution sequence of JS code, and the use of load events!
HTML code is loaded from top to bottom. Note that when I say loading, it is not execution. If js code is mixed in the middle of the html element, the js code will also follow this loading method.
But the problem is that when I load it again, it will not report an error, because it does not have compilation exceptions like Java, but it will report an error when executing the code. For example, in the following code, if you do not put this button Define it first, then document.getElementById(“bt1”); this section will report an error, and you can’t find bt1 at all, which is very useless.
At this point we can change this useless method through the load event.
I set an onload attribute on the body tag. The onload attribute is the event handle corresponding to the load event. Putting it here in the body tag means that the value corresponding to onload will not be executed until the entire body page element is loaded. Here is the ready function.
The loading process of the above html code at this time is:
The program loads the body element from top to bottom. First, it finds that the body has mounted an event, and the corresponding value is the ready function. Then the ready function is loaded at this time. There is also a sayHello function in the function body. The sayHello function is loaded. After the loading is completed Register the sayHello function to the bt1_Obj.onclick event. At this point, the ready function is also loaded. Register the ready function to the onload event corresponding to the body, and then load the following input element.
The execution sequence is:
Now the status of the entire page is loaded and waiting to be executed! ! ! Let me talk about the execution sequence directly. The program is executed from top to bottom and goes directly to the input button. After the button is executed, the entire body execution ends. At this time, the onclick event of the body mount is triggered, and the ready function starts to be executed, and then there is a bt1_Obj inside. onclick event, whether the event is triggered or not depends on whether the bt1 button is clicked. If clicked, it will be executed, otherwise it will not be executed.
In fact, it’s useless to do this. Why? Because this only mounts events to the body, if multiple events need to be mounted to the body, should they all be placed on it?
At this time, you can use the window tag, which represents the browser window. I mount this event to the browser window and the effect is the same. See below.
Generally speaking, writing like this will give you more information.
Loading order: top-down loading [mount an onload event on the window -> load the corresponding anonymous function (there is also a mounting action in the inner layer) -> load the bt1 button]
Execution sequence: Top-down execution [Execute bt1 button -> body is loaded, that is, the browser window is also loaded.
-> When the window.onload event is triggered, the browser will create a new load event object, and then execute the corresponding outer anonymous function -> Whether the bt1_Obj.onclick event inside the anonymous function is triggered depends on whether the bt1 button is clicked]
Modify styles through events
After modification
After modificationKeyboard event details
keydown(keyboard pressed)
keyup (keyboard pops up)
Demo: Capturing the Enter key
window.onload = function(){ //Get the corresponding element object based on the element id var mytext_Obj = document.getElementById("mytext"); //Register keyboard events for this element object. When the event is triggered, the browser calls the following anonymous function //And the browser will send a new event object to the function, and I use envent to receive it. mytext_Obj.onkeydown = function(event){ if(event.code === 'Enter'){ alert("Loading...."); } } } </> <input type="text" id="mytext"/>Here the browser sends an event object to the inner anonymous function. Through this event object we can get the key value pressed by the user. There are three ways to obtain the key value.
event.code returns the string usage as above
event.key returns a string, which is the key name and is used the same as event.code
event.keyCode returns an integer value, each key has a corresponding key value currently, (Enter corresponds to 13, ESC corresponds to 27)
Note: The keyCode method is currently not recommended and is outdated. The first and second options are recommended. Research the difference yourself.
Another point you must know is that even if you do not write the event parameter to receive the event object, the browser will send this object to your function, but you cannot use this object in the function.
JS operator
The concepts of operators in JS are basically the same as those in Java. You can just think of Java operators, but JS has a unique operator void. Let’s take a look at it.
Let me talk about its function first. It is generally used to remove hyperlink paths. For example, when we usually download things on the web page, click to download Thunder
It will pop up the following JS style
No matter I click to keep or discard it, it will not jump to the page, and it will stay at the current position of the current page. You may say
Download Thunder If I write the a tag like this, it will not jump. NO, this is an empty connection. An empty connection will jump to the current page by default. It is equivalent to rewriting the current page once. In this case, the position of your page will change. Then you will still be jumping. If you want to avoid jumping to the page, you will use the void operator at this time.
Correctly define a tag: Download Thunder
At this time, when you hover the mouse over the link, you will find a prompt like java:void(0); in the lower left corner.
java:void(0); This represents a dead link, which means it will not jump. The 0 inside can be written with any number. If you do not write a number, the browser will report an error, but the execution effect will not be delayed.
