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

Implementation of Vue single file component

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

Implementation of Vue single file component

MySQL master-slave replication configuration process

Detailed tutorial on installing Tomcat9 windows service

Examples of using Docker and Docker-Compose

Navicat imports csv data into mysql

30 Tips for Writing HTML Code

How to connect to MySQL database using Node-Red

In-depth explanation of MySQL user account management and permission management

JS operation object array to achieve add, delete, modify and query example code

Detailed tutorial on installing Docker and nvidia-docker on Ubuntu 16.04

Recommend

What the website needs most is to improve the experience of the target user group

Native js implements custom scroll bar component

idea combines docker to realize image packaging and one-click deployment

The difference between delete, truncate, and drop and how to choose

Solution to MySQLSyntaxErrorException when connecting to MySQL using bitronix

W3C Tutorial (3): W3C HTML Activities

The Chinese garbled characters in HTML files and the display problems in browsers

Use of Vue filters and custom instructions

How to use worker_threads to create new threads in nodejs

Record a troubleshooting record of high CPU usage of Tomcat process

HTML table tag tutorial (8): background image attribute BACKGROUND

VMware installation of Centos8 system tutorial diagram (command line mode)

MySQL kill command usage guide

Detailed explanation of Vue identity authentication management and tenant management

jQuery realizes the picture following effect