HTML and JavaScript

Hello there, web development enthusiasts! Today, we’re going to dive into the incredibly interesting world of HTML and JavaScript. We’ll learn how to include JavaScript in HTML and explore some basic examples of JavaScript interacting with HTML. So, are you ready to receive some world-class knowledge? Let’s get started!

What is HTML and JavaScript?

HTML (HyperText Markup Language) and JavaScript are the building blocks of the internet. HTML is a markup language that structures the content on the web, while JavaScript is a programming language that adds interactivity to your website. Together, they form a dynamic duo that can create interactive and engaging web experiences.

Including JavaScript in HTML

Including JavaScript in your HTML is a straightforward process. You can either write the JavaScript code directly in your HTML document or include it as a link to an external JavaScript file. Let’s look at both methods.

Writing JavaScript Code in HTML

To write JavaScript code in your HTML document, you use the <script> tag. This tag can be placed in the <head> or <body> section of your HTML document. Here’s an example:

<script>
  document.getElementById("demo").innerHTML = "Hello, World!";
</script>
HTML

In this example, the JavaScript code changes the content of the HTML element with the id “demo” to “Hello, World!”.

Including External JavaScript in HTML

To include an external JavaScript file in your HTML document, you still use the <script> tag, but this time with the src attribute. The src attribute specifies the path to the external JavaScript file. Here’s an example:

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

In this example, the JavaScript file called “script.js” is included in the HTML document.

Basic Examples of JavaScript Interacting with HTML

Now that we know how to include JavaScript in HTML, let’s look at some basic examples of JavaScript interacting with HTML.

Changing HTML Content

One of the most common uses of JavaScript is to change the content of an HTML element. You can do this with the innerHTML property. Here’s an example:

<p id="demo">This is a paragraph.</p>

<script>
  document.getElementById("demo").innerHTML = "This paragraph has been changed by JavaScript!";
</script>
HTML

In this example, the content of the paragraph with the id “demo” is changed by JavaScript.

Changing HTML Attributes

JavaScript can also change the attributes of HTML elements. Here’s an example:

<img id="image" src="https://www.learnforge.io/images/sunflower.jpg">

<script>
  document.getElementById("image").src ="https://www.learnforge.io/images/daisy-flower.jpg";
</script>
HTML

In this example, the source (src) of an image is changed by JavaScript.

HTML and JavaScript: More Examples

JavaScript’s interaction with HTML goes beyond just changing content or attributes. It can manipulate styles, control the visibility of elements, and even generate new HTML elements. Let’s dive into a couple of more examples to illustrate this.

Changing HTML Styles

JavaScript can dynamically change the styles of HTML elements. This is done by manipulating the style property of HTML elements. Here’s an example:

<p id="demo">Watch me change color!</p>

<button onclick="changeColor()">Click me!</button>

<script>
  function changeColor() {
    document.getElementById("demo").style.color = "blue";
  }
</script>
HTML

In this example, when the button is clicked, the JavaScript function changeColor() is executed. This function changes the color of the paragraph with the id “demo” to red.

Creating New HTML Elements

JavaScript can also create new HTML elements and add them to the HTML document. This is done using the createElement() and appendChild() methods. Here’s an example:

<div id="demo"></div>

<button onclick="createPara()">Click me!</button>

<script>
  function createPara() {
    var para = document.createElement("P");
    var text = document.createTextNode("This is a new paragraph.");
    para.appendChild(text);
    document.getElementById("demo").appendChild(para);
  }
</script>
HTML

In this example, when the button is clicked, the JavaScript function createPara() is executed. This function creates a new paragraph element, adds text to it, and then adds it to the div with the id “demo”.

These are just a couple of examples of what JavaScript can do. The possibilities are truly unlimited, so keep exploring and learning!

Wrapping Up

HTML and JavaScript are powerful tools in web development. By learning how to include JavaScript in HTML and how it interacts with HTML, you’ve taken a gigantic step in your web development journey. Keep practicing and experimenting with different codes, and soon, you’ll be building interactive websites like a pro!

Frequently Asked Questions (FAQ)

  1. What is HTML and JavaScript?

    HTML and JavaScript are languages used in web development. HTML structures the content on the web, while JavaScript adds interactivity to websites.

  2. How is JavaScript used with HTML?

    JavaScript can be written directly in HTML documents or included as an external file using the <script> tag. It interacts with HTML to change content, attributes, styles, and more.

  3. Why is JavaScript different from HTML?

    HTML is a markup language used for structuring content on the web, while JavaScript is a programming language used for adding interactivity to websites.

  4. Can you write HTML with JavaScript?

    Yes, JavaScript can create, change, and delete HTML elements and attributes.

Website |  + posts

Dr. Mehedi Hasan is a seasoned semiconductor professional, academic and web-designer with over a decade of experience in digital system design and verification as well as web development. Currently a Senior Engineer at AMD in Markham, Ontario, he plays a key role in the development and verification of cutting-edge chip technologies, earning multiple Spotlight Awards for his contributions.

Dr. Hasan holds a Ph.D. in Electrical and Computer Engineering from the University of Saskatchewan and has served in both academia and industry across Canada, Bangladesh, Malaysia, and Saudi Arabia. His expertise spans web-development, UVM-based SystemVerilog verification, static timing analysis (STA), RTL design, and scripting in multiple languages including Python, TCL, Shell as well as web-development tools including HTML, CSS, Javascript.

Passionate about knowledge sharing and education, Dr. Hasan has also worked as an Assistant Professor in Ontario, Canada (at Lakehead University) and Bangladesh University. He is committed to building accessible learning environments and is the founder of SkillSeminary, a platform focused on simplifying complex tech concepts for learners worldwide.

When he's not immersed in chip verification or educational projects, Dr. Hasan enjoys mentoring, researching system development, and promoting open tech education.

Scroll to Top