All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Add JavaScript In HTML

Last Updated : Mar 11, 2024

How To Add JavaScript In HTML

In this article we will show you the solution of how to add JavaScript in HTML, JavaScript, sometimes referred to it as JS, is a type of script (client-side scripting) languages that is typically used in web development to generate contemporary and interactive web pages.

The term "script" in this case refers to JavaScript, a non-standalone language that executes on the client system.

In other terms, we can argue that scripting refers to languages whose execution depends on the assistance of another language.

For instance, JavaScript programmes cannot be run without the assistance of HTML or without being embedded into HTML code.

Now move to the concept of how to add javascript in HTML.

Step By Step Guide On How To Add JavaScript In HTML :-

JavaScript is utilised on web sites in a variety of ways, including to create picture galleries, manipulate the DOM, validate forms, and more.

Method: Embedding code:

<!DOCTYPE html >
<html>
<head>
<title>How to add javascript in html
</title>
<script>
document.write("Welcome to Talkerscode");
</script>
</head>
<body>
<p> How to add javascript in html
</p>
</body>
</html>
  1. We begin our code with the tags!DOCTYPE html>, HTML, and HEAD, in which we use the TITLE tag to add the page's title.
  2. Following the addition of the JavaScript code towards the HTML pages, we may use the HTML script>...../script> tag to enclose the JavaScript code within the HTML programme.
  3. Because it entirely depends on the layout of a web page that users use, users can also declare JavaScript code inside this BODY tag (which we can also call body section) as well as HEAD tag.
  4. Using a document.write, we type some content that we wish to display on a page.
  5. After that, we wrap up our script and begin the code body, where we add some content using the P tag.
  6. Using the P, BODY, & HTML elements, we finish our code.

Method: Inline code:

<html>
<head>
<title>Welcome to Talkerscode</title>
</head>
<body>
<p>
<a href="#" onClick="alert('Welcome !');">Click Me</a>
</p>
<p>How to add javascript in html </p>
</body>
</html>
  1. We begin our code with the tags <!DOCTYPE html>, HTML, and HEAD, in which we use the TITLE tag to add the page's title.
  2. Next, we use the BODY tag to begin the code body.
  3. In this case, the inline approach is employed, which is the mechanism used when calling a function inside the HTML event elements. There are numerous situations (or events) when we must add JavaScript code directly, such as the OnMover event and the onclick event.
  4. Next, we employ script with the aid of an anchor tag that has a onclick event and an alert function that uses a P tag.
  5. Then, using the P tag, we write some more text.
  6. BODY & HTML tags are used to end our code.

Conclusion :-

Thus, we have successfully mastered the idea of adding javascript to html.

We discovered that JavaScript programmes require HTML or must be integrated within HTML code in order to function.

We can also see the two different approaches—embedding and inline—for including JavaScript in HTML.

I hope this article on how to add JavaScript in HTML helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪