Introduction to JavaScript

This chapter provides some examples to demonstrate the capabilities of JavaScript.

JavaScript can change HTML content

getElementById() It is one of multiple JavaScript HTML methods.

This example uses this method to "find" the HTML element with id="demo" and display its content (innerHTMLChange it to "Hello JavaScript":

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

Try It Yourself

Tip:JavaScript accepts both double quotes and single quotes:

Example

document.getElementById("demo").innerHTML = 'Hello JavaScript';

Try It Yourself

JavaScript can change HTML attributes

This example changes by changing <img> of the src Attribute (source) to change an HTML image:

Bulb


Try It Yourself

JavaScript can change HTML styles (CSS)

Changing the style of an HTML element is a variant of changing HTML attributes:

Example

document.getElementById("demo").style.fontSize = "25px";

Try It Yourself

JavaScript can hide HTML elements

Can be changed by display Style to hide HTML elements:

Example

document.getElementById("demo").style.display="none";

Try It Yourself

JavaScript can display HTML elements

Can be changed by display Style to display hidden HTML elements:

Example

document.getElementById("demo").style.display="block";

Try It Yourself

Supplementary Reading

Advanced JavaScript Tutorial: JavaScript History , JavaScript Implementation