Scaler
Academy
Data Science
Neovarsity
New
Skill Test
CoursesFree Masterclass
Search for Articles, Topics
How to Add JavaScript in HTML Code?

How to Add JavaScript in HTML Code?

By Ayush Sharma
4 mins read
Last updated: 20 Dec 2022
151 views
Learn via video course
FREE
View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Start Learning View all courses
JavaScript Course With Certification: Unlocking the Power of JavaScript
JavaScript Course With Certification: Unlocking the Power of JavaScript
by Mrinal Bhattacharya
1000
4.8
Start Learning
Topics Covered

Introduction

An event listener in javascript is a procedure that is used to make an object wait to implement a certain functionality until the desired event occurs. An example of an event can be a user clicking on an HTML element. The addEventLisener() method is used with the desired element to add an event listener.

Syntax:

Whenever the event occurs to the element, the handler function is executed

Example:

Output:

When the "Click Here" button is clicked, the text appears. HTML javascript1

Adding JavaScript to your Web Pages

There are three ways to add JavaScript to the HTML web page:

  1. Embedding code, By using the <script> tag directly in the HTML body/head and then inside the pairs of <script> tags write your javascript codes in the HTML document.
  2. External file, By creating an external JavaScript file that ends with, the .js extension and then using the src attribute of the <script> tag in the HTML document to load the javascript code to the webpage.
  3. Inline code, By writing the JavaScript code(s) inside an HTML tag using the special tag attributes.

We will discuss all three ways one by one.

Embedding the JavaScript Code

We can use the <script> ......</script> tag directly in the HTML body or head(depending on the user) to embed the javascript code in the HTML pages. The <script> tag instructs the browser to render the statements inside it as executable script and not as HTML.

Example:

Output:

Calling an External JavaScript File

We can also make a separate javascript file that will end with a .js extension. This separate file will only contain the javascript codes. Later we can incorporate this file into our HTML document by giving the path of the file in the src attribute in the <script> tag and adding javascript in HTML.

<script src="js/name_of_the_file.js"></script>

This method is useful when we want to apply the same script to multiple documents.

Advantages of using external javascript files are-

  • Reduce the code redundancy
  • Makes the website much easier to maintain
  • It separates the HTML and JS codes.

Placing the JavaScript Code Inline

Using some special tag attributes such as onKeypress, onload, etc., we can also insert javascript code inline to the HTML tags. Generally, we place small chunks of codes inline.

Example:

Output:

HTML javascript 3

Positioning of Script inside HTML Document

The <script> element can be placed anywhere in the <head>, or <body> of the HTML document to add javascript in HTML.

The content of the <script> tags needs to be downloaded and executed, hence it blocks the process of page rendering. So, it is suggested to keep the script tag at the end of the HTML body section to make your website faster. If there is more than one <script> tag in an HTML document, it will be processed in the order from top to bottom.

Introduction of HTML Events with JavaScript

Events in HTML with javascript can be considered as "thing(s) happened", as when it occurs certain functionality changes (if described) of the web page. These are hooked with the elements to make the website dynamic.

Events can be performed by the browser, the users, as well as the APIs and when the event is performed javascript, does the action we associate with that event?

For example in the above code we use, <button onclick="alert('Hello World!')">Click Me</button> here button is html element and onclick is an event which occurs when we click on the button in the html web page.

Difference Between Client-side and Server-side Scripting

When the script code is handled by the browser of the user and it runs and executes on the browser, it is known as client-side scripting. But, when the code runs on a server and the processed output is sent to the browser of the user, it is known as server-side scripting.

Generally, Client-side scripting is used as the front end as the data is rendered on the browser, and the server-side is used as the back end as the data is processed upon call and the output is sent to the user.

JavaScript, and VBScript are some examples of client-side scripting languages and PHP, Python, Ruby, and nodejs are some examples of server-side scripting languages.

Learn More

To learn more on how to add javascript to HTML documents, please follow this article by Scaler

Conclusion

  • An event listener in javascript is a procedure that is used to make an object wait to implement a certain functionality until the desired event occurs.
  • There are three ways to add JavaScript to a web page:
    • Embedding the JavaScript Code
    • Placing the JavaScript Code Inline
    • Calling an External JavaScript File
  • You can place the <script> tag anywhere in the document to add javascript in HTML, but it is suggested to have it at the end.
  • Client-side scripting runs on the browser of the user.
  • Server-side scripting runs on the web server and responds only to the requests initiated by the user.