JavaScript is the programming language of HTML and the Web. Java Script is one of the 3 languages all web developers should learn:
a) HTML – to define the content of web pages.
b) CSS – to specify the layout of web pages.
c) JavaScript – to program the behaviour of web pages.
Web pages are not the only places where JavaScript is used. Many desktop and server programs use JavaScript (for example Node.js).
JavaScript can change the HTML content. One of many JavaScript methods is getElementById(). This example uses the method to “find” an HTML element (with id=”demo”) and changes the element content (innerHTML) to “Hello JavaScript”:
<!DOCTYPE html>
<html>
<body>
<h4>What Can JavaScript Do?</h4>
<p id="exampleOne">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("exampleOne").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>Output:
What Can JavaScript Do?
JavaScript can change HTML content.
JavaScript can change HTML attribute values. In this example, JavaScript changes the value of the src (source) attribute of an <img> tag:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('image').src='pic_bulbon.gif'">Turn on the light</button>
<img id="image" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('image').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>Output:
JavaScript can change HTML styles (CSS). Changing the style of an HTML element is a variant of changing an HTML attribute:
<!DOCTYPE html>
<html>
<body>
<h4>What Can JavaScript Do?</h4>
<p id="examle">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('example').style.fontSize='35px'">Click Me!</button>
</body>
</html> Output:
What Can JavaScript Do?
JavaScript can change the style of an HTML element.
Enjoy coding!
Read also: