Skip to main content

Mastering HTML JavaScript: Empower Your Web Pages with Interactivity

HTML is a markup language that consists of a set of tags used to define the structure and content of web pages.

HTML tags are used to create headings, paragraphs, lists, tables, forms, and other elements that make up a web page.

JavaScript is a programming language that can be used to add interactivity and dynamic functionality to web pages.

With JavaScript, you can create animations, respond to user interactions, validate forms, and perform other dynamic actions on web pages.

As an example:

Editor

Loading...

In this example:,

  • We have an HTML document with a button that includes inline JavaScript code within the onclick attribute.
  • When the button is clicked, the JavaScript code sets the innerHTML property of a paragraph element with the id "text" to "You clicked the button!".

HTML <script> Tag​

The HTML <script> tag is used to define a section of JavaScript code that should be executed when the page loads or when an event occurs.

Here are a few examples of how to use the <script> tag:

Inline Script Example​

Editor

Loading...

In this example:,

  • The <script> tag is used to define a function called showMessage that displays a pop-up alert when called.
  • The function is then called by an onclick attribute on a button.

External Script Example​

An external script in HTML is a JavaScript file that is linked to an HTML document using the <script> tag.

External scripts are useful for separating JavaScript code from the HTML document, making it easier to manage and maintain large web pages.

Here is an example of how to include an external script in an HTML document:

index.html :​
<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="script.js"></script>
  </head>
  <body>
    <h1>Welcome to my page!</h1>
    <p>Click the button to change the text:</p>
    <button onclick="changeText()">Click me!</button>
    <p id="text">This is some text.</p>
  </body>
</html>

In this example:,

  • We have an HTML document that includes an external JavaScript file called script.js.
  • The JavaScript code in this file defines a function called changeText that changes the text of a paragraph element with the ID "text" when a button is clicked.

script.js :​

function changeText() {
  document.getElementById("text").innerHTML = "You clicked the button!";
}

In this example:

  • The JavaScript code is stored in a separate file called script.js. The file contains the changeText function that we referenced in the onclick attribute of the button element.
  • When the button is clicked, the function is executed and changes the content of the paragraph element with the ID "text".
organized and maintainable

Using external scripts can make it easier to reuse code across multiple pages and can help keep your HTML documents more organized and maintainable.

What JavaScript Can Do​

JavaScript can do many things such as manipulating the content of a web page, validating user input, making API requests, and more.

Some common examples of what JavaScript can do include:

  • Dynamically updating the content of a web page based on user input or events
  • Creating interactive forms that validate user input before submission
  • Animating page elements to create engaging visual effects
  • Retrieving data from external APIs and using it to display dynamic content on a web page
  • Creating browser-based games and other interactive applications
  • JavaScript can change the styles of HTML elements. This is often referred to as "dynamic styling" or "dynamic CSS".

For learn more about JavaScript capabilities, check out our JavaScript DOM tutorial.

JavaScript can change the styles​

Here's an example of how to use JavaScript to change the color of a paragraph element:

Editor

Loading...

In this example:

  • We use the getElementById() method to retrieve the paragraph element with the ID "my-paragraph", and then set its color property to "red" using the style object.

JavaScript can add or remove classes​

JavaScript can also add or remove CSS classes from elements to apply predefined styles. This is a more flexible approach as it allows us to define the styles in a separate CSS file and apply them to multiple elements with ease. We can use the classList property of an element to add or remove classes.

As an example:

Editor

Loading...

In this example:,

  • We have defined a CSS class called highlight that adds a yellow background color and bold font weight to an element.
  • We use the classList.add() method to add the highlight class to the paragraph element, which applies the defined styles.
  • We can also use the classList.remove() method to remove the class and revert to the original styles.

HTML <noscript> Tag​

The HTML <noscript> tag is used to define a section of HTML content that should be displayed only if the user's web browser does not support JavaScript or if the user has disabled JavaScript in their browser.

When a browser encounters the <noscript> tag, it will display the content within the tag if it cannot execute JavaScript or if JavaScript is disabled. Otherwise, the content within the <noscript> tag will not be displayed.

As an example:

Editor

Loading...

In this example:

  • If a user has disabled JavaScript in their browser, they will see the message "This website requires JavaScript to function properly. Please enable JavaScript in your browser." displayed on the page.
  • If JavaScript is enabled, the message will not be displayed.