Home >Web Front-end >JS Tutorial >Example of inserting JavaScript code in HTML_Basics

Example of inserting JavaScript code in HTML_Basics

WBOY
WBOYOriginal
2016-05-16 15:56:561135browse

JavaScript code can be included anywhere in an HTML document. But there are following best ways to include JavaScript in HTML files.

  • In the 93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1 section.
  • In the 6c04bd5ca3fcae76e30b72ad730ca86d...36cc49f0c466276486e50c850b7e4956 section.
  • In the 6c04bd5ca3fcae76e30b72ad730ca86d...36cc49f0c466276486e50c850b7e4956 and 93f0f5c25f18dab9d176bd4f6de5d30e...9c3bca370b5104690d9ef395f2c5f8d1 sections.
  • Scripts and external files are then included in the 93f0f5c25f18dab9d176bd4f6de5d30e... 9c3bca370b5104690d9ef395f2c5f8d1 section.

In the following sections we will see how JavaScript can be included differently:
In the 93f0f5c25f18dab9d176bd4f6de5d30e... 3c7b149cc556f883a18b3c490b028d4e section of JavaScript:

If you want to run a script on some event, when the user clicks somewhere, like, then the head of the script should look like this:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>

This will produce the following results:


JavaScript in the 6c04bd5ca3fcae76e30b72ad730ca86d... dbf4a1b9d12965251b02d12dd197d73e section:

If a script is required for page loading so that the script generates page content to run, place the script in the 6c04bd5ca3fcae76e30b72ad730ca86d section of the document. In this case, it is not necessary to use all the functionality defined by JavaScript:

<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<p>This is web page body </p>
</body>
</html>


JavaScript in the 6c04bd5ca3fcae76e30b72ad730ca86d and 93f0f5c25f18dab9d176bd4f6de5d30e sections:

You can put JavaScript code in the 93f0f5c25f18dab9d176bd4f6de5d30e and 6c04bd5ca3fcae76e30b72ad730ca86d sections exactly as follows:

<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
  alert("Hello World")
}
//-->
</script>
</head>
<body>
<script type="text/javascript">
<!--
document.write("Hello World")
//-->
</script>
<input type="button" onclick="sayHello()" value="Say Hello" />
</body>
</html>


In JavaScript external file:

When you start working more extensively with JavaScript, you may find that there are situations where you reuse the same JavaScript code in multiple pages of your site.

You are not limited to keeping the same code in multiple HTML files. The script tag provides a mechanism that allows JavaScript to be stored in an external file and then included into an HTML file.

Here is an example to illustrate how to use script tags and the src attribute to include an external JavaScript file in HTML code:

<html>
<head>
<script type="text/javascript" src="filename.js" ></script>
</head>
<body>
.......
</body>
</html>

To use JavaScript from an external file source, you need to write all the JavaScript code in a simple text file ".js" using an extension, and then include the file as shown above.

For example, you can keep the content of filename.js in the following file, and then use sayHello function in the HTML file after including the filename.js file:

function sayHello() {
  alert("Hello World")
}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn