JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Basic Examples

This page contains some examples of what JavaScript can do.

Note: Don't worry if these examples use methods you have not learned. You will learn about them in the next chapters.

JavaScript can modify HTML content

The getElementById() method returns the element whose ID matches the specified value.

This example uses the method to find an HTML element (id="para") and changes the element content (innerHTML) to "Hello world":

Run code

JavaScript can change HTML Attribute Values

In this example JavaScript changes the value of the src attribute of an <img> tag:

Click the buttons to change the avatar:
Run code

JavaScript can change HTML Styles (CSS)

JavaScript style property can be used to set the inline style of an element.

Run code

JavaScript can Hide HTML Elements

Hiding HTML elements can be done by changing the display style.

Run code

JavaScript can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style.

Run code

JavaScript can create alert pop-ups

In this example JavaScript creates an alert dialog box.

Run code

JavaScript can attach event handler to the document

In this example JavaScript monitors mouse click event and react to it.

Run code

JavaScript can show Time

In this example JavaScript displays the current time.

Run code