JavaScript is a versatile programming language that allows you to add interactivity and dynamic functionality to your website. When combined with HTML and CSS, JavaScript can create dynamic web pages that respond to user interactions in real-time. This article will explore the basics of integrating JavaScript with HTML and CSS.
Adding JavaScript to an HTML Page
To add JavaScript to an HTML page, you need to create a new file with a .js extension and then link it to your HTML file using the <script> tag. The <script> tag can be included in the <head> or <body> section of your HTML file.
Inline JavaScript
One way to add JavaScript to an HTML page is to include it directly within the HTML code using the <script> tag. This is known as inline JavaScript. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
<p>Click the button below to see the current date and time.</p>
<button onclick="document.getElementById('demo').innerHTML = Date()">Click me</button>
<p id="demo"></p>
<script>
alert("Hello, world!");
</script>
</body>
</html>In this example, we have included an inline JavaScript alert that will display a pop-up message when the web page loads.
External JavaScript
Another way to add JavaScript to an HTML page is to create an external .js file and then link it to your HTML file using the <script> tag. This is known as external JavaScript. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script src="myScript.js"></script>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
<p>Click the button below to see the current date and time.</p>
<button onclick="document.getElementById('demo').innerHTML = Date()">Click me</button>
<p id="demo"></p>
</body>
</html>In this example, we have created an external JavaScript file called myScript.js and linked it to our HTML file using the <script> tag. The JavaScript code in myScript.js will execute when the web page loads.
Manipulating HTML Elements with JavaScript
JavaScript can be used to manipulate HTML elements on a web page. This can be done by accessing the HTML element using its ID or class and then modifying its properties or content.
Accessing HTML Elements
To access an HTML element using JavaScript, you can use the document.getElementById() method or the document.getElementsByClassName() method. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Hello, world!";
}
</script>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
<p id="demo">Click the button below to change the text.</p>
<button onclick="changeText()">Click me</button>
</body>
</html>In this example, we have created a JavaScript function called changeText() that accesses the HTML element with the ID “demo” and changes its content to “Hello, world!” when the button is clicked.
Modifying HTML Element Properties
JavaScript can also be used to modify HTML element properties such as the style, class, and attributes. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function changeColor() {
document.getElementById("demo").style.color = "red";
}
function addClass() {
document.getElementById("demo").classList.add("highlight");
}
function changeImage() {
document.getElementById("myImage").src = "newImage.jpg";
}
</script>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
<p id="demo">Click the buttons below to change the color and add a class to this text.</p>
<button onclick="changeColor()">Change color</button>
<button onclick="addClass()">Add class</button>
<img id="myImage" src="oldImage.jpg" alt="Old Image">
<button onclick="changeImage()">Change image</button>
</body>
</html>In this example, we have created three JavaScript functions that modify the style, class, and attribute of HTML elements. The changeColor() function changes the color of the text to red, the addClass() function adds a class called “highlight” to the text, and the changeImage() function changes the source attribute of an <img> element to a new image.
Responding to User Interactions with JavaScript
JavaScript can be used to respond to user interactions such as clicks, mouse movements, and keyboard input. This can be done using JavaScript event listeners.
Event Listeners
An event listener is a JavaScript function that is executed in response to a specific event, such as a click or key press. Event listeners can be added to HTML elements using the addEventListener() method. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<script>
function handleClick() {
alert("Button clicked!");
}
window.addEventListener("mousemove", function(event) {
console.log("Mouse position: " + event.clientX + ", " + event.clientY);
});
document.addEventListener("keydown", function(event) {
if (event.code === "KeyS" && event.ctrlKey) {
alert("Save shortcut pressed!");
}
});
</script>
</head>
<body>
<h1>Welcome to my Web Page!</h1>
<button onclick="handleClick()">Click me</button>
</body>
</html>
In this example, we have added three event listeners using JavaScript. The handleClick() function is executed when the button is clicked and displays an alert message. The mousemove event listener logs the current position of the mouse to the console. The keydown event listener checks if the “Ctrl + S” key combination is pressed and displays an alert message.
Conclusion
In conclusion, JavaScript is a powerful language that can add interactivity and dynamic functionality to your website. Integrating JavaScript with HTML and CSS allows you to create dynamic web pages that respond to user interactions in real-time. In this article, we have explored the basics of integrating JavaScript with HTML and CSS, manipulating HTML elements with JavaScript, and responding to user interactions with JavaScript event listeners. This article has helped get you started with JavaScript and web development.
📕 Related articles about Javascript
- Understanding JavaScript Events
- JavaScript Loop While
- Understanding JavaScript Array Const
- JavaScript Array Methods
- Understanding JavaScript Null
- JavaScript Iterables: Understanding the Concept and its Benefits
