Hello everyone, the editor is here to answer the following questions for you, where does the javascript code run and where is the javascript code written? Now let’s take a look!
?About the author: A material conversion farmer, hoping to work together and make progress together!
Personal homepage: @Personal homepage where I type code every day
Column series: Web front-end
Table of Contents
1: Overview of JavaScript
2: Three ways to embed JS code in HTML
The first way: event handle onclick
The second way: script block method
The third way: introduce external independent JS files
One: JavaScript Overview
(1) JavaScript is a scripting language that runs on the browser, referred to as JS.
(2) JavaScript was developed by Brendan Edge (the father of JavaScript) of Netscape and was originally called LiveScript.
(3) The emergence of LiveScript makes the browser more vivid. It is no longer a simple static page, but the page is more interactive.
(4) At a certain stage in history, SUN and Netscape had a cooperative relationship, and SUN changed the name of LiveScript to JavaScript.
(5) JavaScript Although the name contains “Java“, it has nothing to do with Java, but has similar grammatical advantages! They run in different locations: Java runs in the JVM, and JavaScript runs in the memory of the browser!
(6) JavaScript programs do not need to be compiled manually. After writing the source code, the browser can directly open it for interpretation and execution.
(7) The “target program” of JavaScript is saved in the form of ordinary text. This language is called “script language” fast code paper.The target program of Java already exists in .class form and cannot be opened using a text editor. It is not a scripting language.
(8) ECMA has formulated the ECMA-262 standard based on JavaScript, called ECMA-Script.Modern java and j both implement the ECMA-Script specification. (java and j are unified)
(9) In the future we will learn a technology called JSP and the difference between JSP and JS
JSP: JavaServer Pages (belongs to the Java language and runs in the JVM)
JS: JavaScript (runs in the browser)
Two: Three ways to embed JS code in HTML
First method: event handler onclick
(1) JS is an event-driven programming language that relies on events to drive and then execute the corresponding program!
There are many events in JS, one of which is called: mouse click, word: click. And any event will correspond to an event handle called: onclick. The event handler exists as an attribute of the HTML tag!
(2) οnclick=”js code”, what is the execution principle?
When the page is opened, the JS code will not be executed, but this JS code will be registered to the click event of the button. After the click event occurs on this button, the js code registered behind onclick will be automatically called by the browser!
(3) How to use JS code to pop up a message box?
There is a built-in object in JS called window, all lowercase, which can be used directly. Window represents the browser object. The window object has a function called: alert, and the usage is: window.alert(“message”); This way you can pop up the window! window can also be omitted!
(4) Strings in JS can use double quotes or single quotes. A semicolon “;” can be used or not after the end of a statement in JS.
Function implemented: When the user clicks the following button, a message box will pop up
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>The first way to introduce CSS code into HTML</title>
</head>
<body>
\t\t
<!--Embed the JS code in onclick, and then click the "button" to achieve dynamic effects-->
<input type="button" value="Button" onclick="window.alert('Hello');">
</input><br>
\t\t
<!--When multiple window.alert statements are entered, all the contents will not be output at once. Click to output one -->
<input type="button" value="Button" onclick="window.alert('Hello zhangsan')
alert('Hello lisi')
alert('Hello wangwu');">
</input>
</body>
</html>
Second method: script block method
(1) Java script blocks can appear multiple times in a page, there is no requirement.
There is no requirement for the location of the Java script block, it is arbitrary.(2) Programs exposed in script blocks are executed directly when the page is opened, and are executed line by line in a top-down order. (Execution of this code does not require events)
(3) alert has the function of blocking the loading of the current page. (Block until user clicks OK button)
(4) Grammar format:
< type="text/java">JS code</>
<!--The code block is at the top-->
< type="text/java">
window.alert("first....");
</>
<!doctype html>
<html>
<head>
<title>The second way to embed JS code in HTML</title>
\t\t
<!--The code block appears in the head-->
< type="text/java">
window.alert("head............");
</>
</head>
<body>
<!--Execute in order. This button 1 will not be displayed until the above two script blocks are executed-->
<input type="button" value="Button object 1" />
\t\t
<!--Second method: script block method-->
<!--The code block appears in the body-->
< type="text/java">
//The alert function will block the loading of the entire HTML page.
window.alert("Hello World!");
window.alert("Hello JavaScript!");
</>
<!-- This button will not be displayed directly at the beginning. When the above script blocks are completed, they will be executed in sequence---->
<input type="button" value="Button object 2" />
</body>
</html>
<!--The code block is at the bottom-->
< type="text/java">
window.alert("last....");
</>
Third way: Introduce external independent JS files
(1) It is similar to the way of introducing css. The JS code will be executed as soon as the page is opened. However, please note that writing code in the middle of the tag is invalid.
(2) Grammar format:
< type="text/java" src="path"></>
.JS files
window.alert("hello js!");
window.alert("hello js test!");
Introducing the code of the .JS file
<!doctype html>
<html>
<head>
<title>The third way to embed JS code in HTML: introduce an external independent js file. </title>
</head>
<body>
\t\t
<!--Introduce js script files where needed-->
<!--When introducing an external independent js file, the code in the js file will be executed line by line in a top-down order. -->
< type="text/java" src="js/1.js"></>
<!--The same js file can be imported multiple times, but this is rarely required in actual development-->
< type="text/java" src="js/1.js"></>
<!--This method does not work, the closing tag must be present. -->
< type="text/java" src="js/1.js" />
\t
<!--Code written in the middle of <> will not be executed-->
< type="text/java" src="js/1.js">
//The code written here will not be executed.
// window.alert("Test");
</>
</body>
</html>
Summary:
(1) Using event handlers, the JS code will not be executed when the browser is opened. The JS code will be executed only when an event occurs, such as clicking a button.
(2) Use the script block method, the position is arbitrary, and the JS code will be executed when the browser opens it.
(3) When introducing external .JS files, the corresponding JS code will be executed as soon as the browser is opened.
<!--Event method-->
<input type="button" value="Button" onclick="window.alert('Hello World')"/>
<!--Script block method-->
< type="text/java">
window.alert("HeHe");
</>
<!--How to introduce external .js files-->
< type="text/java" src="1.js"></>