HTML

HTML

๐Ÿ“Œ HTML and JavaScript

๐Ÿ”น 1. What is a Script in HTML?

JavaScript is used to make web pages interactive and dynamic.

  1. The <script> tag is used to add JavaScript code directly into HTML or to link an external JS file.
  2. The <noscript> tag is used to add JavaScript code directly into HTML or to link an external JS file.

๐Ÿ”น 2. Using the <script> Tag

2.1 Writing JavaScript Inside HTML

HTML

<script>
    console.log("Hello!");
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

Here, the JavaScript code is written directly inside the <script> tag and runs when the page loads.

2.2 Linking an External JavaScript File

HTML
<script src="app.js"></script>
  1. The src attribute specifies the URL of the JavaScript file.
  2. This method is better for long scripts or code used on multiple pages.

๐Ÿ”น 3. What Can You Do with JavaScript?

3.1 Changing HTML Content

HTML
document.getElementById("demo").innerHTML = "Hello JavaScript!";
  1. Changes the text inside the HTML element with id="demo".id="demo".

3.2 Changing CSS Styles

HTML

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
  1. Dynamically changes the appearance of an element.

3.3 Changing HTML Attributes

HTML

document.getElementById("image").src = "picture.gif";
  1. Changes the src attribute of an <img> tag to display a new image.

๐Ÿ”น 4. Using <noscript>

HTML

 <noscript>
    Sorry, your browser does not support JavaScript!
</noscript>
  1. If the browser does not support JavaScript, the message inside <noscript> is displayed.
  2. This prevents the page from being completely non-functional.

๐Ÿ”น 5. Full Example โ€” Dynamic Page with JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
    <head>;
        <meta charset="UTF-8">
        <title>Script Example</title>
    </head>
    <body>
        <h1 id="demo">Initial Text</h1>
        <img id="image" src="firstimage.jpg" alt="Image">

        <script>
            // Runs when the page loads
            document.getElementById("demo").innerHTML = "Hello, JavaScript is running!";
            document.getElementById("demo").style.color = "blue";
            document.getElementById("image").src = "changedimage.png";
        </script>

        <noscript>
            JavaScript is disabled or not supported. Some features may not work.
        </noscript>
    </body>
    </html>

๐Ÿ”น 6. Explanation

  1. The<script> tag executes JavaScript code when the page loads.
  2. The code can change the<h1> text and update its style.
  3. The image source can be dynamically updated.
  4. The <noscript> tag informs users when JavaScript is not supported.

๐Ÿ”น 7. Why is it Important?

  1. JavaScript makes web pages live and interactive.
  2. The<script> tag allows you to add logic, animations, user interactions, and API connections to a page.
  3. The <noscript> tag provides alternative content for users without JavaScript support.

Html Head
Html Layout Elements and Techniques