3 ways to add JavaScript to your page

problem

You wish to add some JavaScript code to your web page to make more interactive.

Tag

One classic way is by using the script tag. For example:

				
					<script type="text/javascript">
    //your js code here
</script>
				
			

Preferably after the body tag so it’s loaded more efficiently.

inline
JavaScript can also be added inline, in an attribute’s value but this is the least preferably way because it is very limited. For example, to show an alert box when a button is clicked:
				
					<button onclick="alert('Hello World')">Hello World</button>
				
			
external file

We add all the code in a separate JavaScript file e.g. code.js and then we load it in the HTML, in particular in the head tag. For example:

				
					<head>
	<script type="text/javascript" src="code.js" data-rocket-defer defer></script>
</head>
				
			

In this case, we store all the JavaScript code in an external file code.js and then in the HTML code we can use the functions that are already defined in there. This way is more preferable as it is easier to maintain and extend.

conclusion

In this post we saw three different ways of integrating JavaScript in a web page. By using a script tag and adding code inside it, by writing JavaScript inline and finally by including a reference to an external JavaScript .js file.

Share it!

Facebook
Twitter
LinkedIn
Reddit
Picture of Ellion

Ellion

Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪

0 0 votes
Article Rating
Subscribe
Notify of
guest
0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x