JavaScript

Javascript is the programming language of HTML and the Web. In HTML, JavaScript code must be inserted between <script> and </script> tags or can be linked with external file, like <script src="/js/myScript1.js"></script>.

Placing JavaScripts at the bottom of the <body> element improves the display speed, because script interpretation slows down the display.

getElementById()

To access an HTML element, JavaScript uses the document.getElementById("id") method. The "id" attribute defines the HTML element.

innerHTML

The innerHTML property can change the element fetched by getElementById() method. Lets start our 1st script.

Example - 1


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Statements</h2>

<p>In HTML, JavaScript statements are executed by the browser.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>

</body>
</html>

Run the above code (1)

Example - 2


<!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>

Run the above code (2)

style.fontSize, style.display

JavaScript changes the HTML style (CSS).

Example - 3


<!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>

Run the above code (3)

Example - 4


<!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>

Run the above code (4)

Example - 5


<!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>

Run the above code (5)

document.write()

Writing into a HTML element.

Example - 6


<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<button type="button" onclick="document.write(5 + 6)">Try it</button>

</body>
</html>

Run the above code (6)

window.alert()

You can use an alert box to display data.

Example - 7


<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

Run the above code (7)

Prepaid Recharge Plans | Recharge & Bill Payment Offer

Online English Dictionary