THE WORLD'S LARGEST WEB DEVELOPER SITE
×

JS Tutorial

JS HOME JS Introduction JS Where To JS Output JS Syntax JS Statements JS Comments JS Variables JS Operators JS Arithmetic JS Assignment JS Data Types JS Functions JS Objects JS Scope JS Events JS Strings JS String Methods JS Numbers JS Number Methods JS Math JS Random JS Dates JS Date Formats JS Date Methods JS Arrays JS Array Methods JS Array Sort JS Booleans JS Comparisons JS Conditions JS Switch JS Loop For JS Loop While JS Break JS Type Conversion JS Bitwise JS RegExp JS Errors JS Debugging JS Hoisting JS Strict Mode JS Style Guide JS Best Practices JS Mistakes JS Performance JS Reserved Words JS Versions JS JSON

JS Forms

JS Forms Forms API

JS Objects

Object Definitions Object Properties Object Methods Object Prototypes

JS Functions

Function Definitions Function Parameters Function Invocation Function Closures

JS HTML DOM

DOM Intro DOM Methods DOM Document DOM Elements DOM HTML DOM CSS DOM Animations DOM Events DOM EventListener DOM Navigation DOM Nodes DOM Nodelist

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications AJAX Examples

JS JSON

JSON Intro JSON Syntax JSON vs XML JSON Data Types JSON Objects JSON Arrays JSON Parse JSON Stringify JSON PHP JSON HTML JSON JSONP

JS Examples

JS Examples JS HTML DOM JS HTML Input JS HTML Objects JS HTML Events JS Browser JS Quiz JS Certificate

JS References

JavaScript Objects HTML DOM Objects


JavaScript Examples


What can JavaScript do?

JavaScript can change HTML content
JavaScript can change HTML attributes
JavaScript can change CSS style
JavaScript can hide HTML elements
JavaScript can show hidden HTML elements

Examples explained


Where to Insert JavaScript

JavaScript in <head>
JavaScript in <body>
JavaScript in an external file
JavaScript in an external url
JavaScript in an external folder

Where to explained


JavaScript Output

Writing into the HTML output
Writing into an HTML element
Writing into an window alert box
Writing into the browser console

Output explained


JavaScript Syntax

JavaScript statements
JavaScript numbers
JavaScript strings
JavaScript variables
JavaScript operators
JavaScript assignment
JavaScript expressions (using constants)
JavaScript expressions (using strings)
JavaScript expressions (using variables)
JavaScript keywords
JavaScript comments
JavaScript is case sensitive

Syntax explained


JavaScript Statements

JavaScript statements are commands to the browser
JavaScript code is a sequence of statements
JavaScript statements are separated with semicolon
Multiple statement on one line is allowed
JavaScript statements can be grouped together in code blocks
You can break a code line after an operator or a comma.

Statements explained


JavaScript Comments

Single line comments
Single line comments at the end of a line
Multiple lines comments
Single line comment to prevent execution
Multiple lines comment to prevent execution

Comments explained


JavaScript Variables

JavaScript variables
JavaScript variables as algebra
JavaScript numbers and strings
JavaScript var keyword.
Declaring many variables in one statement
Declaring many variables multiline
A variable without a value returns the value undefined
Re-declaring a variable will not destroy the value
Adding JavaScript numbers
Adding JavaScript strings
Adding strings and numbers

Variables explained


JavaScript Arithmetic

The addition (+) operator
The subtraction (-) operator
The multiplication (*) operator
The division (/) operator
The modulus (%) operator
The increment (++) operator
The decrement (--) operator

Arithmetic explained


JavaScript Assignment

The = assignment operator
The += assignment operator
The -= assignment operator
The *= assignment operator
The /= assignment operator
The %= assignment operator

Assignment explained


JavaScript String Concatenation

Adding two strings together using the concatenating (+) operator
Adding two strings together with a space in the first string
Adding two strings together with a space in between
Adding two strings together using using the += operator
Adding strings and numbers

Concatenation explained


JavaScript Data Types

Declare (create) strings
Declare (create) numbers
Declare (create) an array
Declare (create) an object
Find the type of a variable
Adding two numbers and a string
Adding a string and two numbers
An undefined variable
An empty variable

Data types explained


JavaScript Objects

Create a JavaScript variable
Create a JavaScript object
Create a person object (single line)
Create a person object (multiple lines)
Access object properties using .property
Access object properties using [property]
Access a function property as a method
Access a function property as a property

Objects explained


JavaScript Functions

A simple function
A function with an argument
A function with an argument 2
A function that returns a value
A function that converts Fahrenheit to Celsius
A function call without ()

Functions explained


JavaScript Events

An onclick event changes an HTML element
An onclick event changes its own element
An onclick event calls a function

Events explained


JavaScript Strings

Strings can be written with single or double quotes.
Show some string examples
Backslash before quotes accepts quotes as quotes.
Find the length of a string
You can break text string with a backslash.
You cannot break code with a backslash.
Find the position of the first occurrence of a text in a string - indexOf()
Search for a text in a string and return the text if found - match()
Replace characters in a string - replace()
Convert string to upper case - toUpperCase()
Convert string to lower case - toLowerCase()
Split a string into an array - split()

Strings explained


JavaScript Numbers

Number are considered accurate only up to 15 digits
Floating point arithmetic is not always 100% accurate
But it helps to multiply and divide by 10
Constants, preceded by 0x, are interpreted as hexadecimal
The toString() method can output numbers as hex, octal, and binary
JavaScript will generate Infinity if you calculate a too large number
Division by zero generates Infinity
A number divided by a string is not a number

Numbers explained


JavaScript Maths

Math.PI returns the value of PI
Math.round(x) returns the rounded value of x
Math.pow(x, y) returns the value of x to the power of y
Math.sqrt(x) returns the square root of x
Math.abs(x) returns the absolute (positive) value of x
Math.ceil(x) returns the value of x rounded up
Math.floor(x) returns the value of x rounded down
Math.sin(x) returns the sin of the angle x (given in radians)
Math.cos(x) returns the cosin of the angle x (given in radians)
Math.max() return the number with the highest value from a list of arguments
Math.min() to return the number with the lowest value from a list of arguments
Converting Celsius to Fahrenheit

Maths explained


JavaScript Random

Math.random() returns a random number between 0 (included) and 1 (excluded)
How to return a random integer between 0 and 9 (both included)
How to return a random integer between 0 and 10 (both included)
How to return a random integer between 0 and 99 (both included)
How to return a random integer between 0 and 100 (both included)
How to return a random integer between 1 and 10 (both included)
How to return a random integer between 1 and 100 (both included)
How to return a random integer between x (included) and y (excluded)
How to return a random integer between x and y (both included)

Random explained


JavaScript Dates

Use Date() to display today's date and time
Use getFullYear() display the year
Use getTime() to calculate the number of milliseconds since 1970
Use setFullYear() to set a specific date
Use toUTCString() to convert today's date (according to UTC) to a string
Use getDay() to display the weekday as a number
Use getDay() and an array to display the weekday as a name
Display a clock

Dates explained


JavaScript Arrays

Create an array
Join two arrays - concat()
Join three arrays - concat()
Join all elements of an array into a string - join()
Remove the last element of an array - pop()
Add new elements to the end of an array - push()
Reverse the order of the elements in an array - reverse()
Remove the first element of an array - shift()
Select elements from an array - slice()
Sort an array (alphabetically and ascending) - sort()
Sort numbers (numerically and ascending) - sort()
Sort numbers (numerically and descending) - sort()
Sort numbers (alphabetically and numerically) - sort()
Sort numbers in random order - sort()
Sort objects by numeric properties - sort()
Sort objects by string properties - sort()
Add an element to position 2 in an array - splice()
Convert an array to a string - toString()
Add new elements to the beginning of an array - unshift()

Arrays explained


JavaScript Type Conversion

Display the typeof all variable types
Display the constructor of all variable types
Convert a number to a string using String()
Convert a number to a string using toString()
Find out if a variable is an array
Find out if a variable is a date

Type Conversion Explained


JavaScript Booleans

Display the value of Boolean(10 > 9)
Display the value of 10 > 9
Everything with a real value is true
The Boolean value of zero is false
The Boolean value of minus zero is false
The Boolean value of an empty string is false
The Boolean value of undefined is false
The Boolean value of null is false
The Boolean value of false is false
The Boolean value of NaN is false

Booleans explained


JavaScript Comparisons

Assign 5 to x, and display the value of (x == 8)
Assign 5 to x, and display the value of (x == 5)
Assign 5 to x, and display the value of (x === 5)
Assign 5 to x, and display the value of (x === "5")
Assign 5 to x, and display the value of (x != 8)
Assign 5 to x, and display the value of (x !== 5)
Assign 5 to x, and display the value of (x !== "5")
Assign 5 to x, and display the value of (x > 8)
Assign 5 to x, and display the value of (x < 8)
Assign 5 to x, and display the value of (x >= 8)
Assign 5 to x, and display the value of (x <= 8)

Comparisons explained


JavaScript Conditionals

The if statement
The else statement
The else if statement
Random link
Switch statement

Conditionals explained


JavaScript Loops

For loop
Looping through HTML headers
While loop
Do While loop
Break a loop
Break and continue a loop
Use a for...in statement to loop through the elements of an object

Loops explained


JavaScript Error Handling

The try...catch statement
The try...catch statement with a confirm box
The onerror event

Errors explained


JavaScript Regular Expressions

Search for an expression in a string
Search for an expression and replace it

Regular Expressions Explained


JavaScript Objects

Creating a JavaScript variable
Creating a JavaScript object
Creating a JavaScript object (single line)
Creating a JavaScript object (multiple lines)
Creating a JavaScript object using new
Creating JavaScript objects using a constructor
Creating built-in JavaScript objects
The best way to create JavaScript variables
JavaScript objects are mutable

Objects explained


JavaScript Object Properties

Accessing properties using .property
Accessing properties using [property]
Accessing properties using for in
Adding new properties to existing objects
Deleting properties from objects

Object Properties explained

JSON Objects

Accessing properties using .property
Accessing properties using [property]
Looping through properties
Looping through property values
Access nested JSON objects
Modify values using the dot notation
Modify values using the bracket notation
Delete object properties

JSON Object Properties explained

JSON Arrays

Accessing array values
Looping through an array using for-in
Looping through an array using for
Access nested JSON arrays
Modify array values
Delete array items

JSON Arrays explained

JSON Parse

Use JSON parse
Using JSON parse in an AJAX example
Using JSON parse on an array
Parsing dates
Parsing dates using the reviver function
Parsing functions

JSON Parse explained

JSON Stringify

Use JSON stringify
Using JSON stringify on an array
Stringify dates
Stringify functions
Stringify functions using the toString() method

JSON Stringify explained

JSON PHP

Get JSON from a php file
Get JSON array from php
Get JSON from a database
Loop through the result from a database
Send JSON using POST method

JSON PHP explained

JSON HTML

Make an HTML table based on JSON data
Make a dynamic HTML Table
Make an HTML drop down list based on JSON data

JSON HTML explained

JSON JSONP

Simple JSONP example
Create a dynamic script tag
JSONP example with dynamic result
JSONP example with a callback function

JSON JSONP explained