Example of inserting JavaScript code in HTML

Home

Web Front-end

JS Tutorial

Example of inserting JavaScript code in HTML_Basics

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:56 PM

html javascript

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

In the ... section.
In the ... section.
In the ... and ... sections.
Scripts and external files are then included in the ... section.

In the following sections we will see how JavaScript can be included differently:
In the ... 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>

Copy after login

This will produce the following results:

JavaScript in the ... section:

If a script is required for page loading so that the script generates page content to run, place the script in the 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>

Copy after login

JavaScript in the and sections:

You can put JavaScript code in the and 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>

Copy after login

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>

Copy after login

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")
}

Copy after login

Statement of this Website

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