Admin
Headings of Contents
JavaScript Getting Started – Use JavaScript
In the Online JavaScript tutorial, we are going to learn how to use JavaScript in web pages. In the previous tutorial, we have seen the basic introduction of JavaScript.
Our JavaScript tutorial designed for beginners as well as professionals. In this guide, we will see all about how you can embed JavaScript code inside your HTML file.
Here we will see different ways to use JavaScript code inside our HTML template.
The <script> Tag
In HTML file, JavaScript code should be inserted between <script> and </script> tags.
Example
In this example we will show simple message using JavaScript alert() function.
<script>
alert("Welcome to our JavaScript tutorial....")
</script>JavaScript in <head> or <body> Tag
JavaScript code can be placed inside a <head> tag or <body> tag. You can place any number of script tags inside or tag. JavaScript code should be placed between <script> and </script> the tags.
JavaScript in <head> Tag:
You can write JavaScript between the <head> and </head> tags in your HTML file. All the JavaScript code should be placed inside the <script> and </script> tag.
Example :
In this example, we will display a message in alert() box on button click.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
<script>
function myFunction(){
alert('JavaScript code successfully running....')
}
</script>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="myFunction()">Click Here</button>
</body>
</html>JavaScript in <body> Tag:
You can place all your JavaScript code inside the <body> section of the HTML file.
Here we will show a simple message on the button click.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<button onclick="myFunction()">Click Here</button>
<script>
function myFunction(){
alert('JavaScript code in <body> section..')
}
</script>
</body>
</html>
External JavaScript
This is another best option to use JavaScript code in the HTML file. JavaScript code can be placed in an external js file.
The Extension of the external JavaScript file should be .js and After creating the external JavaScript file, you have to connect the javascript file to your HTML file through a script tag.
Suppose we have a JavaScript file myfile.js:
myfile.js:
function myFunction(){
alert('JavaScript code in <body> section..')
}To use an external JavaScript file, you have to connect that file to an HTML file using the <script> tag and place the path of the JavaScript file inside src attribute.
Example
<script src="myfile.js"></script>Note:- You can place JavaScript reference inside the <body> or <head> section as you like.
Note:- External JavaScript file not contain <script> tags.
External JavaScript Advantages
There are lots of external JavaScript advantages:
- JavaScript code is easy to read.
- External JavaScript file not contain <script> and </script> tag.
- External javascript is easy to read.
- External JavaScript file cached by the browser and speed up pages load times.
- It separate from the HTML file.
External JavaScript file references
External JavaScript file can be referenced using full URL or relative path of JavaScript file.
Example:
This example use full URL to link to script.
<script src="Full url of js file"></script>Example:
This example use relative path to link the script.
<script src="js/myfile.js"></script>Example:
This example link to script located in the same folder of web page.
<script src="myfile.js"></script>Conclusion
In this tutorial, you have learned how to use JavaScript files on web pages. We have seen different ways to link the script files to the HTML page.
I hope this tutorial will help you. If you like this article please comment and share with your friends who want to learn JavaScript from scratch to advanced.
For More Reference:- Click Here
