HTML JavaScript

19. HTML JavaScript

JavaScript is a powerful scripting language used to create dynamic and interactive effects on web pages. It allows you to manipulate the content of your web pages, validate forms, and create interactive features.

Integrating JavaScript with HTML

There are several ways to integrate JavaScript into an HTML document:

1. Inline JavaScript

Inline JavaScript is written directly within HTML tags using the onclick, onmouseover, or similar attributes. This is the simplest way to add JavaScript to HTML elements.


<button onclick="alert('Hello, world!')">Click Me</button>

2. Internal JavaScript

Internal JavaScript is written within the <script> tags inside the HTML document. It is usually placed in the <head> or <body> section of the page.


<head>
    <script>
        function greet() {
            alert("Welcome to my website!");
        }
    </script>
</head>
<body>
    <button onclick="greet()">Click to Greet</button>
</body>

3. External JavaScript

External JavaScript is written in a separate .js file and linked to the HTML document using the <script> tag. This is the preferred method for larger projects, as it helps keep your HTML and JavaScript separate and organized.


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

JavaScript Syntax

JavaScript syntax consists of rules that define the structure of JavaScript code. It is similar to other programming languages, but has some unique features:

Variables: Variables are used to store data. JavaScript uses var, let, and const to declare variables.
Functions: Functions are used to group reusable code. They can accept parameters and return values.
Events: JavaScript interacts with HTML elements through events such as onclick, onload, and onchange.

Example of JavaScript Syntax:


<script>
    let message = "Hello, JavaScript!";
    function showMessage() {
        alert(message);
    }
    showMessage();
</script>

DOM Manipulation

The Document Object Model (DOM) represents the structure of an HTML document as a tree of nodes. JavaScript allows you to manipulate these nodes to change the content, style, or structure of the web page.

getElementById: Selects an element by its ID.
getElementsByClassName: Selects elements by their class.
getElementsByTagName: Selects elements by their tag name.

Example of DOM Manipulation:


<div id="message">This is a message</div>
<script>
    let element = document.getElementById("message");
    element.innerHTML = "This is a new message!";
</script>

JavaScript Events

JavaScript can respond to various events triggered by user actions such as clicks, mouse movements, and keyboard input. You can attach event listeners to HTML elements to execute specific JavaScript functions.

Example of Handling an Event:


<button onclick="alert('Button Clicked!')">Click Me</button>

Validating Forms with JavaScript

JavaScript is commonly used to validate form inputs before the form is submitted. It helps ensure that the user enters the correct information and improves the user experience.

Example of Form Validation:


<form onsubmit="return validateForm()">
    Name: <input type="text" id="name"><br>
    <input type="submit" value="Submit">
</form>

<script>
    function validateForm() {
        let name = document.getElementById("name").value;
        if (name == "") {
            alert("Name must be filled out!");
            return false;
        }
    }
</script>

Conclusion

JavaScript is essential for creating interactive and dynamic websites. By integrating JavaScript with HTML, you can add functionalities such as form validation, event handling, and DOM manipulation. With practice, you'll be able to build highly interactive web pages.