JavaScript is a programming language that allows web developers to add interactive features to their web pages. It runs on the client-side, meaning it is executed by the user’s web browser. HTML pages can incorporate JavaScript code using the <script> tag.
Here’s an example of how to use JavaScript in an HTML document:
php
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1 id="demo">This is a heading</h1>
<button onclick="myFunction()">Click me</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello, World!";
}
</script>
</body>
</html>
In this example, we have an HTML document that contains a button and a heading. When the button is clicked, the myFunction() function is called, which uses JavaScript to change the text inside the heading.
JavaScript can be used to perform many tasks, including form validation, creating interactive animations, and manipulating HTML elements. Here are some other examples:
- Creating a slideshow:
scss
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
- Validating a form:
javascript
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}
- Creating a popup:
javascript
function myPopup() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
- Adding animation effects:
javascript
var elem = document.getElementById("myAnimation");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
JavaScript is a powerful tool for creating interactive web pages. With its ability to manipulate HTML elements and create dynamic effects, it can take a website from a simple static page to an engaging and interactive experience.
- Changing the text of an HTML element:
html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Example</h2>
<p id="demo">JavaScript can change this text.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
In this example, we use JavaScript to change the text of the <p> element with the ID “demo” when the button is clicked.
- Displaying an alert box:
html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Example</h2>
<button onclick="alert('Hello World!')">Click Me!</button>
</body>
</html>
In this example, we use JavaScript to display an alert box with the message “Hello World!” when the button is clicked.
- Changing the style of an HTML element:
html
<!DOCTYPE html>
<html>
<head>
<style>
#demo {
font-size: 24px;
color: red;
}
</style>
</head>
<body>
<h2>JavaScript Example</h2>
<p id="demo">JavaScript can change the style of this text.</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "36px";
document.getElementById("demo").style.color = "blue";
}
</script>
</body>
</html>
In this example, we use JavaScript to change the font size and color of the <p> element with the ID “demo” when the button is clicked.
- Using a loop to display a list of numbers:
html
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Example</h2>
<p>Counting from 1 to 10:</p>
<ul id="demo"></ul>
<script>
var i;
for (i = 1; i <= 10; i++) {
document.getElementById("demo").innerHTML += "<li>" + i + "</li>";
}
</script>
</body>
</html>
In this example, we use a JavaScript for loop to display a list of numbers from 1 to 10 in an unordered list.
Certainly. Another example of using JavaScript in HTML could be creating a simple function that changes the text of an HTML element when a button is clicked:
php
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Hello, world!";
}
</script>
</head>
<body>
<h1 id="demo">JavaScript Example</h1>
<button onclick="changeText()">Click me</button>
</body>
</html>
In this example, a JavaScript function named changeText() is defined within the <script> tags. This function uses the document.getElementById() method to select the HTML element with the id of “demo” and change its inner HTML to “Hello, world!”.
A button is also included in the HTML with an onclick attribute that calls the changeText() function when it is clicked.
When the button is clicked, the text of the <h1> element with id “demo” is updated to “Hello, world!”.