1. The first way to embed JS code in HTML: inter-line events
Interline events refer toExecution event that writes JavaScript functions to HTML elements.
1. JavaScript is an event-driven programming language. Usually, it executes a certain segment of the generation when an event occurs.
code. Among them, events include many, such as: mouse click event click, mouseover event, etc. And any event in JavaScript has a corresponding event handle (the operation to be performed when the event occurs).
For example: the event handle corresponding to click is onclick, and the event handle corresponding to mouseover is onmouseover.
2. How to use JS code popups?
There is a built-in BOM object in JS, which can be used directly, all lowercase: window
Among them, there is a method/function called alert in the window object, which is specifically used to pop up dialog boxes.
('hello world!');From the following code, we can know that strings in JS can be enclosed in single quotes.
(1) Each statement takes up a single line, and the ending semicolon can usually be omitted;
(2) The semicolon before the end of the program or the opening brace (}) can also be omitted;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hello1" onclick="('Hello World');" />
<input type="button" value="hello2" onclick='("Hello jQuery");
("Hello Kitty")
("Hello, China")'/>
<!-- window.Can be omitted -->
<input type="button" value="Hello3" onclick="alert('Hello World');" />
</body>
</html>2. The first way to embed JS code in HTML: page script tag embedding, script block method.
The script block is free to have a location, no restrictions!
Use the tool without angle brackets <, and you can give a prompt
<script type="text/javascript"></script>
<script src="" type="text/javascript" charset="utf-8"></script>
The angle brackets are marked and the prompt cannot appear
<script></script>
In a script block, the order of code execution is from top to bottom
<!-- The script block is at will，No restrictions！ -->
<script type="text/javascript">
alert("Page Begin")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>exist HTML Embed in JS The second way to code：page script Tag embedding，The way to script blocks</title>
</head>
<body>
<!-- This button 1 It will be loaded into the browser memory first。 -->
<input type="button" value="Button 1" />
<!-- Script block -->
<!-- 一个page中Script block可以出现多个。 -->
<script type="text/javascript">
/* Write JS code directly here, and these JS codes line by line when the page is opened
implement! */
alert("Hello World");
alert("Hello Kitty");
alert("Hello China");
</script>
<!-- 最后加载This button 2 -->
<input type="button" value="Button 2" />
</body>
</html>
<script type="text/javascript">
alert("Page End")
</script>3. The third way to embed JS in HTML: introduce external independent JS files
This is a bunch of JS code. When HTML was introduced, these JS codes were executed line by line in top-down order.
alert("Hello World")
alert("Hello Kitty")Introduce external independent CSS files, the attribute in this tag link is href
<link rel="stylesheet" type="text/css" href=""/>
When introducing external independent JS files, when script tags introduce js files, it is the scr attribute
<script src="js/" type="text/javascript" charset="utf-8"></script>
Question: Can JS files be introduced for the second time?
Answer: Yes, but the second time is introduced, this operation is meaningless. Test result: As long as you introduce JS file once, all the codes in the JS file will be executed once.
<script src="../js/" type="text/javascript" charset="utf-8"></script>
<script src="../js/" type="text/javascript" charset="utf-8">
alert("Can hello world 1 be executed here ~~~~"); //The code here will not be executed</script>Question: Can a separate script block be executed?
Answer: Yes, after testing, it is found that it will be executed continuously.
<script type="text/javascript" >
alert("Can a separate script block be executed by hello world ~~~~");
</script>Summarize
This is the end of this article about the three ways to embed JS code in HTML. For more related HTML embed JS code content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!