JavaScript Introduction
This page showcases various functions that JavaScript can perform.
JavaScript Can Modify HTML Content
One of the key JavaScript methods for HTML manipulation is getElementById().
In the following example, JavaScript locates an HTML element (identified by id="demo") and alters its content (innerHTML) to "Hello JavaScript":
Example
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>
</body>
</html>JavaScript accepts both double and single quotes:
Example
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change HTML content.</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">Click Me!</button>
</body>
</html>
JavaScript Can Modify HTML Attribute Values
In this example, JavaScript updates the value of the src (source) attribute of an <img> tag:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
</body>
</html>
JavaScript Can Modify HTML Styles (CSS)
Altering the style of an HTML element is a specific form of modifying an HTML attribute.
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>
</body>
</html>
JavaScript Can Hide HTML Elements
You can hide HTML elements by altering their display style:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>
</body>
</html>
JavaScript Can Show HTML Elements
Revealing hidden HTML elements can be achieved by modifying their display style:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can show hidden HTML elements.</p>
<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>
</body>
</html>
Did You Know?
JavaScript and Java are entirely distinct languages, differing significantly in both concept and design.
JavaScript was created by Brendan Eich in 1995 and was established as an ECMA standard in 1997.
ECMA-262 is the official designation of the standard, and ECMAScript is the formal name of the language.
