Hey, guys welcome back to yet another interesting post. In this article, we will discuss the different ways of adding Javascript to a webpage. So read the full post to understand more.
Read More:
- Check the Complete JUnit 5 Tutorial
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Spring Boot JdbcTemplate Tutorials
- Check the Complete Spring Boot and Data JPA Tutorials
- Check the Complete Spring MVC Tutorials
- Check the Complete JSP Tutorials
- Check the Complete Spring Boot Tutorials [100+ Examples]
- Check the Complete Spring Boot and Thymeleaf Tutorial
- Check the Complete AWS Tutorial
- Check the Complete JavaServer Faces (JSF) Tutorial
- Check the Complete Spring Data JPA Tutorial
- Check the Complete Spring Security Tutorial
- Check the Javascript Projects for Beginners
JavaScript can be added to a web page in three different ways:
- Inline script
- Internal script
- External script
- Multiple External scripts
The following sections show different ways of adding JavaScript code to your web page.
Table of Contents
Inline script
Create an index.html file in a folder. Then paste the following code and open it in a browser
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to Javascript!')">Click Me</button>
</body>
</html>
Now, you just wrote your first inline script. We can create a pop up alert message using the alert() built-in function.
Internal script
The internal script can be written in the head or the bodysection, but it is preferred to put it on the body of the HTML document. First, let us write on the head part of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - Internal Script</title>
<script>
console.log('Welcome to Javascript')
</script>
</head>
<body></body>
</html>
This is how we write an internal script most of the time. Writing the JavaScript code in the body section is the most preferred option. Open the browser console to see the output from the console.log().
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to Javascript!');">Click Me</button>
<script>
console.log('Welcome to Javascript');
</script>
</body>
</html>
Open the browser console to see the output from the console.log().
External script
Similar to the internal script, the external script link can be on the header or body, but it is preferred to put it in the body. First, we should create an external JavaScript file with .js extension. All files ending with .js extension are JavaScript files. Create a file named external.js inside your project directory and write the following code and link this .js file at the bottom of the body.
console.log('Welcome to Javascript from External file');
External scripts in the head:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - External script</title>
<script src="external.js"></script>
</head>
<body></body>
</html>
External scripts in the body:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - External script</title>
</head>
<body>
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
<script src="external.js"></script>
</body>
</html>
Open the browser console to see the output of the console.log().
Multiple External scripts
We can also link multiple external JavaScript files to a web page. Create a external1.js file inside the folder and write the following code.
console.log('Welcome to Javascript from External file');
Create external2.js file and write the following code
console.log('Welcome to Javascript from External file 2');
Create index.html file and write the following cod
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tutorial - External script</title>
</head>
<body>
<!-- JavaScript external link could be in the header or in the body -->
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
<script src="external1.js"></script>
<script src="external2.js"></script>
</body>
</html>
Open the browser console to see the output
That’s it for this post if you like this post, share this with your friends and colleagues or you can share this within your social media platform. Thanks, I will see you in our next post.
