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.skillseminary.com/images/sunflower.jpg">

<script>
  document.getElementById("image").src ="https://www.skillseminary.com/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.

Scroll to Top