❗ Summary of three common ways to introduce JavaScript into HTML ❗

Posted by thor erik on Wed, 13 Oct 2021 01:50:50 +0200

introduction

JavaScript is a scripting language. Although there is Java in its name, it has nothing to do with Java. Its original name was LiveScript; The current front-end JavaScript is very popular, but the blogger himself is not ready to develop to the front-end, but he must understand some basic knowledge of the front-end;
Last blog: ❗ Summary of three common ways of introducing HTML into CSS ❗ Three ways of embedding HTML into CSS have been introduced. Here's how HTML embeds JavaScript;

ps: since the author plans to develop to the java back-end in the future, he only understands some of the main contents of the front-end knowledge, focusing on applications. Therefore, if there are errors, please correct them in time!

Event Handler

JS is an event driven programming language, which relies on events to drive, and then executes the corresponding program;

Take the click event as an example;
Each event will have a corresponding event handle. For example, in this click example, the event handle is onclick
Note: the difference between an event and an event handle is that an on is added before the event word
Moreover, the event handle exists as the attribute of HTML tag;

So the function of our example is: the user clicks the following button to pop up a message box

So how to pop up a message box by clicking the button?
In JS, there is a built-in object called window, which is all lowercase and can be used directly. Window represents the browser object;
The window object has a function called alert. The usage is: window.alert("message"); So you can pop up the window;

Examples are as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Embedded in JS The first way to code</title>
	</head>
	<body>
		<input type="button" value="hello" onclick="window.alert('hello zhangsan')
													window.alert('hello lis')
													window.alert('hello wangwu')"/>
				
		<!-- window. Can be omitted.-->
		<input type="button" value="hello" onclick="alert('hello zhangsan')
													alert('hello lis')
													alert('hello wangwu')"/>
	</body>
</html>

Script block

This method is similar to and simple to the internal CSS styles mentioned in the previous CSS summary
The format is:

<script type="text/javascript">
Script block
</script>
<!--Note: the end of this section:'</script>'There must be-->

Examples are as follows:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Embedded in JS The second way to code</title>
		<!--Script blocks can appear anywhere. We won't demonstrate them one by one here. If you are interested, you can try them yourself-->
		<script type="text/javascript">
			/*
				The program exposed in the script block is executed when the page is opened,
				And follow the top-down order line by line. (this generation)
				Code execution (no event required)
			*/
			window.alert("head............");//The alert function blocks the loading of the entire HTML page
		</script>
	</head>
	<body>
		<!--Pay attention to the occurrence time of buttons 1 and 2, and you can intuitively experience it js Top down execution effect-->
		<input type="button" value="I am a button object 1" />
		<script type="text/javascript">
			window.alert("Hello World!");
			window.alert("Hello JavaScript!");
		</script>
		<input type="button" value="I am a button object 2" />
	</body>
</html>

Import external independent js files

In order to better separate the HTML page from the js script, you can save the js script separately into a *. js file, and then import it in HTML,
The import syntax is as follows: < script type = "text / JavaScript" SRC = "test. JS" > < / script >

Again: the end < / script > must be, otherwise the page will not be displayed!

Another point: we must pay attention to the distinction. We introduce a file link in CSS, using a href = "URL (unified resource locator)"
JS uses SRC = "URL (uniform resource locator)"
Don't confuse!

js code:

window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("ending");

html code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML Embedded in JS The third way of code: introducing external independent js file</title>
	</head>
	<body>
		<!--Here is the import js01 File and run-->
		<script type="text/javascript" src="js01.js">
			// The code written here will not be executed, but the js01 file will be executed
			// window.alert("Test");
		</script>
		
		<script type="text/javascript">
			alert("hello jack!");
		</script>
	</body>
</html>

summary

Summarize these three points:

Event Handler
Script block
Import external independent js files

Compared with CSS and HTML, JS has a lot of content, which is just a starting point. I hope we can cheer together!

Welcome your comments!

Topics: Java Javascript html5 html

Programmer Think