JavaScript is a high-level, interpreted programming language that is widely used in web development. It was created by Brendan Eich in 1995 while he was working for Netscape Communications Corporation. JavaScript is a client-side scripting language, which means that it runs on the user's web browser rather than on the server. It is used to add interactivity and dynamic effects to web pages. JavaScript is also used in server-side scripting with the help of Node.js.
JavaScript Can Change HTML Content
One of the most common uses of JavaScript in web development is to change the content of HTML elements on a web page. This can be done using the Document Object Model (DOM) API, which allows JavaScript to interact with HTML elements on a web page.
Here is an example of how to use JavaScript to change the content of an HTML element:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1 id="myHeading">Hello World!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("myHeading").innerHTML = "Hello JavaScript!";
}
</script>
</body>
</html>
In the above example, a button is created with the text "Click Me". When the button is clicked, the changeText() function is called. This function uses the DOM API to get the HTML element with the ID "myHeading" and then changes its innerHTML property to "Hello JavaScript!".
JavaScript Can Change HTML Attribute Values
JavaScript can also be used to change the values of HTML element attributes. This is done using the DOM API's setAttribute() method.
Here is an example of how to use JavaScript to change the value of an HTML element's attribute:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<img id="myImage" src="image.jpg" alt="My Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
document.getElementById("myImage").setAttribute("src", "new-image.jpg");
}
</script>
</body>
</html>
In the above example, an image element is created with the ID "myImage" and the source file "image.jpg". When the button is clicked, the changeImage() function is called. This function uses the DOM API to get the HTML element with the ID "myImage" and then changes its "src" attribute to "new-image.jpg".
JavaScript Can Change HTML Styles (CSS)
JavaScript can also be used to change the styles of HTML elements on a web page. This is done using the DOM API's style property.
Here is an example of how to use JavaScript to change the style of an HTML element:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1 id="myHeading">Hello World!</h1>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
document.getElementById("myHeading").style.color = "red";
document.getElementById("myHeading").style.fontWeight = "bold";
}
</script>
</body>
</html>
In the above example, a heading element is created with the ID "myHeading". When the button is clicked, the changeStyle() function is called. This function uses the DOM API to get the HTML element with the ID "myHeading" and then changes its color to red and font weight to bold.
JavaScript Can Hide HTML Elements
JavaScript can also be used to hide HTML elements on a web page. This is done by changing the display property of an element's style.
Here is an example of how to use JavaScript to hide an HTML element:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<h1 id="myHeading">Hello World!</h1>
<button onclick="hideElement()">Hide Element</button>
<script>
function hideElement() {
document.getElementById("myHeading").classList.add("hide");
}
</script>
</body>
</html>
In the above example, a heading element is created with the ID "myHeading". The CSS display property of the .hide class is set to none, which will hide any element with this class. When the button is clicked, the hideElement() function is called. This function uses the DOM API to get the HTML element with the ID "myHeading" and then adds the "hide" class to it, which will hide it from the web page.
JavaScript Can Show HTML Elements
JavaScript can also be used to show HTML elements that have been previously hidden. This is done by changing the display property of an element's style.
Here is an example of how to use JavaScript to show a hidden HTML element:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<style>
.hide {
display: none;
}
</style>
</head>
<body>
<h1 id="myHeading" class="hide">Hello World!</h1>
<button onclick="showElement()">Show Element</button>
<script>
function showElement() {
document.getElementById("myHeading").classList.remove("hide");
}
</script>
</body>
</html>
In the above example, a heading element is created with the ID "myHeading" and the .hide class, which will hide it from the web page. When the button is clicked, the showElement() function is called. This function uses the DOM API to get the HTML element with the ID "myHeading" and then removes the "hide" class from it, which will show it on the web page.
