JAVASCRIPT

- INTEGRATING WITH

HTML AND CSS

Introduction

JavaScript is a powerful scripting language that can be used to enhance HTML and CSS by adding interactivity and dynamic content to web pages. This section will cover how to integrate JavaScript with HTML and CSS to create more interactive and responsive websites.

Integrating JavaScript with HTML

1. Inline JavaScript:

JavaScript code can be directly embedded within HTML tags using the onclick, onchange, and other event attributes.

<!DOCTYPE html>

<head>

<title>Inline JavaScript</title>

</head>

<body>

<button onclick=”alert(‘Button clicked!’)”>Click Me</button>

</body>

</html>

2. Internal JavaScript:

JavaScript can be added inside the <script> tag within the HTML file.
<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Internal JavaScript</title>
    <script>
        function showMessage() {
            alert(‘Hello, World!’);
        }
    </script>
</head>
<body>
    <button onclick=”showMessage()”>Click Me</button>
</body>
</html>

3. External JavaScript:

JavaScript can be placed in an external file and linked to the HTML document using the <script> tag with the src attribute.

index.html:

<!DOCTYPE html>

<head>

<title>External JavaScript</title>

</head>

<body>

<button onclick=”showMessage()”>Click Me</button>

</body>

</html>

script.js:

function showMessage() {

alert(‘Hello, World!’);

}

Manipulating HTML Elements with JavaScript

1. Selecting Elements:

JavaScript can select HTML elements using various methods like getElementById, getElementsByClassName, getElementsByTagName, and querySelector.

let element = document.getElementById(‘myElement’);

let elements = document.getElementsByClassName(‘myClass’);

let tags = document.getElementsByTagName(‘p’);

let query = document.querySelector(‘.myClass’);

2. Modifying Content:

JavaScript can change the content of HTML elements using properties like textContent and innerHTML.

document.getElementById(‘myElement’).textContent = ‘New Text’;

document.getElementById(‘myElement’).innerHTML = ‘<strong>New HTML Content</strong>’;

3. Modifying Styles:

JavaScript can change the styles of HTML elements by accessing the style property.

document.getElementById(‘myElement’).style.color = ‘red’;

document.getElementById(‘myElement’).style.backgroundColor = ‘yellow’;

4. Adding and Removing Classes:

JavaScript can add or remove CSS classes using the classList property.

document.getElementById(‘myElement’).classList.add(‘newClass’);

document.getElementById(‘myElement’).classList.remove(‘oldClass’);

Event Handling with JavaScript

Events allow JavaScript to interact with user actions such as clicks, key presses, and mouse movements.

1. Adding Event Listeners:

JavaScript can listen for events using the addEventListener method.

document.getElementById(‘myButton’).addEventListener(‘click’, function() {

alert(‘Button was clicked!’);

});

2. Common Events:

click: Triggered when an element is clicked.
mouseover: Triggered when the mouse pointer is over an element.
mouseout: Triggered when the mouse pointer leaves an element.
keyup: Triggered when a key is released.

document.getElementById(‘myButton’).addEventListener(‘mouseover’, function() {

this.style.backgroundColor = ‘blue’;

});

document.getElementById(‘myButton’).addEventListener(‘mouseout’, function() {

this.style.backgroundColor = ‘initial’;

});

Integrating JavaScript with CSS

JavaScript can dynamically change CSS properties and manipulate the appearance of web pages.

1. Changing CSS Properties:

JavaScript can change any CSS property of an element.

document.getElementById(‘myElement’).style.fontSize = ’20px’;

document.getElementById(‘myElement’).style.margin = ’10px’;

2. Toggling Classes:

JavaScript can toggle CSS classes to change the appearance of elements.

document.getElementById(‘toggleButton’).addEventListener(‘click’, function() {

document.getElementById(‘myElement’).classList.toggle(‘highlight’);

});

CSS:

.highlight {

background-color: yellow;

color: red;

}

3. Responsive Design:

JavaScript can be used to make websites responsive by dynamically adjusting styles based on the viewport size.

window.addEventListener(‘resize’, function() {

if (window.innerWidth < 600) {

document.getElementById(‘myElement’).style.fontSize = ’14px’;

} else {