Detailed explanation of when javascript scripts will be executed

JavaScript scripts can be embedded anywhere in HTML, but when is it called? When a browser opens an HTML file, it will directly run a script that is not a declared function or call a script function through an event. The following analyzes these situations.

1. The browser executes the script when opening the page

When a browser opens an HTML file, it interprets the entire file from scratch, including HTML tags and scripts. If there are statements in the script that can be executed directly, they will be interpreted and executed immediately when they are encountered. There are mainly two situations:

1). When the program starts (here the browser loads the page), this alert function will be triggered and executed.

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      alert("dare you click me once again");  
    </script>
  </head>
  <body onLoad="display()">
  </body>
</html>

2). As the browser loads and parses the js function, it is automatically called (not triggered by user clicks, etc.)

2. Use the onLoad event to execute the script (equivalent to listening to the occurrence of ** and then executing)

The onLoad event occurs when a page is opened in a browser. This method is often used to display some messages to the user while opening a page.
The following example uses the onLoad event of the tag to demonstrate:

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      //insert javascript code here.
      function display()
      {
        alert("dare you click me once again")  
      }
    </script>
  </head>
  <body onLoad="display()">
  </body>
</html>

3. Execute scripts using user events

When using a browser, users often use the mouse and keyboard to perform some operations, such as moving the mouse proportionally, clicking links or buttons, and these operations will generate corresponding events. We can use these events to call script functions.
The following example uses a button click event to call the display() function.

<html>
  <head>
    <title>demo</title>
    <script type="text/javascript">
      //insert javascript code here.
      function display(){
        alert("you click me ,it is so painful")
        }
    </script>
  </head>
  <body>
    <center><br>
    <form>
      <input type="button" value="onclick" onclick="display()">
    </form>
  </center>
  </body>
</html>

The above is a detailed explanation of when JavaScript scripts will be executed. For more information about when JavaScript scripts will be executed, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Selenium Executes JavaScript Scripts Example
Detailed explanation of Selenium's execution of Javascript script parameters and return values
Execute Java background code method analysis in js script
Java Execute JS Script Tool
How to execute the corresponding callback function after the JS script is loaded
Angularjs uses instructions to monitor how to execute scripts after ng-repeat rendering is completed
JS dynamically loads scripts and executes callback operations
Node.js dynamic script execution
Analysis of JavaScript script loading and execution in browser environment: dynamic script and Ajax script injection
Analysis of defer and async features in loading and executing JavaScript scripts in browser environment
Analyzing the order of JavaScript loading and code execution in browsers

<<: MySQL Optimization: InnoDB Optimization

>>: 27 Linux document editing commands worth collecting

How to use nginx to block a specified interface (URL)

Detailed explanation of when javascript scripts will be executed

1. The browser executes the script when opening the page

1). When the program starts (here the browser loads the page), this alert function will be triggered and executed.

2). As the browser loads and parses the js function, it is automatically called (not triggered by user clicks, etc.)

2. Use the onLoad event to execute the script (equivalent to listening to the occurrence of ** and then executing)

3. Execute scripts using user events

How to use nginx to block a specified interface (URL)

VMware kali virtual machine environment configuration method

MySQL graphical management tool Navicat installation steps

vite2.x implements on-demand loading of ant-design-vue@next components

How to add a disk in Vmware: Expand the disk

Detailed explanation of common methods of JavaScript arrays

Several methods and advantages and disadvantages of implementing three-column layout with CSS

Installation of Docker CE on Ubuntu

DD DT DL tag usage examples

HTML4.0 element default style arrangement

Recommend

40+ Beautiful Web Form Design Examples

Website design should pay attention to the sense of color hierarchy

Implementation of Docker deployment of ElasticSearch and ElasticSearch-Head

JavaScript anti-shake case study

Vue realizes price calendar effect

Let's talk in depth about the principle and implementation of new in JS

Detailed explanation of eight ways to optimize MySQL database (classic must-read)

Problem of retrieving root password in MYSQL 5.7 under Linux (tested and available)

Three ways to implement animation in CSS3

The pitfall of MySQL numeric type auto-increment

Vue2 implements provide inject to deliver responsiveness

A simple example of using js to get the time of the last week, month and three months

Call the font according to the font name to let the browser display the font you want

XHTML Getting Started Tutorial: What is XHTML?

The simplest MySQL data backup and restore tutorial in history (Part 2) (Part 37)