Learn, Innovate & Share - Engineer the Future
Learn, Innovate & Share - Engineer the Future
JavaScript is a versatile and powerful programming language that plays a crucial role in web development. It allows web developers to create interactive and dynamic web pages, making the user experience more engaging and functional. In this post, we’ll explore how to use JavaScript in
To include JavaScript in an HTML document, you have a few options. The most common way is to use the <script> element. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript in HTML Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<script>
// Your JavaScript code goes here
let greeting = "Hello, World!";
document.getElementById("greeting").innerHTML = greeting;
</script>
<p id="greeting"></p>
</body>
</html>In this example, we’ve used the <script> tag to enclose our JavaScript code. The code sets the value of the greeting variable and updates the content of the <p> element with the ID “greeting.”
While inline JavaScript works, it’s not always the most organized approach. For larger projects, it’s common to put JavaScript code in separate external files with a “.js” extension. To link an external JavaScript file to your HTML document, you can use the <script> element with the src attribute:
<!DOCTYPE html>
<html>
<head>
<title>External JavaScript Example</title>
<script src="script.js"></script>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<p id="greeting"></p>
</body>
</html>In this example, we link an external JavaScript file called “script.js” to our HTML document. The “script.js” file contains the JavaScript code that manipulates the “greeting” element, just like in the previous example.
JavaScript is excellent for handling events. For instance, you can use JavaScript to add interactivity to buttons and forms. Here’s an example of using JavaScript to create a simple button click event:
<!DOCTYPE html>
<html>
<head>
<title>Button Click Event Example</title>
</head>
<body>
<h1>Hello, JavaScript!</h1>
<button id="clickButton">Click me</button>
<p id="message"></p>
<script>
document.getElementById("clickButton").addEventListener("click", function() {
document.getElementById("message").innerHTML = "Button clicked!";
});
</script>
</body>
</html>In this example, we use the addEventListener method to attach a click event listener to the “clickButton” element, which updates the “message” element when the button is clicked.
Subscribe to get the latest posts sent to your email.
