1. Home

JavaScript Examples

Examples Explained

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

Numbers can be written with or without decimals Extra large or extra small numbers can be written with exponent notation 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 Adding two numbers results in a new number Adding two numeric strings results in a concatenated string Adding a number and a numeric string also results in a concatenated string Adding a numeric string and a number also results in a concatenated string Common mistake when adding strings and numbers 1 Common mistake when adding strings and numbers 2 JavaScript will try to convert strings to numbers when dividing JavaScript will try to convert strings to numbers when multiplying JavaScript will try to convert strings to numbers when subtracting JavaScript will NOT convert strings to numbers when adding A number divided by a string is NaN (Not a Number) A number divided by a numeric string is a number The global JavaScript function isNaN() returns if a value is a number Using NaN in a mathematical operation will always return NaN Using NaN in a mathematical string operation will concatenate NaN NaN (Not a Number) is a number (Yes! typeof NaN returns number) Infinity is returned if you calculate a number outside the largest possible number Division by zero also generates Infinity Infinity is a number (typeof Infinity returns number) Constants, preceded by 0x, are interpreted as hexadecimal The toString() method can output numbers as hex, octal, and binary Numbers can be objects Numbers and objects cannot be safely compared Objects and objects cannot be safely compared
Numbers Explained

JavaScript Number Methods

The toString() method converts a number to a string The valueOf() method returns a number as a number The toExponential() returns a number with exponential notation The toFixed() method rounds a number to a number of digits The toPrecision() method a number written with a specified length The global method Number() converts variables to numbers The global method Number() can even convert dates to numbers The global method parseInt() converts strings to numbers The global method parseFloat() converts strings to numbers MAX_VALUE returns the largest possible number in JavaScript MIN_VALUE returns the smallest possible number in JavaScript POSITIVE_INFINITY represents infinity POSITIVE_INFINITY is returned on overflow NEGATIVE_INFINITY represents negative infinity NEGATIVE_INFINITY is returned on overflow NaN Represents "Not-a-Number" Arithmetic performed on a string will result in NaN Using a Number property on a variable will return undefined
Numbers Methods 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 I Create an array II Access an array element Change an array element Access a full array Find the length of an array Loop through an array Add an element to an array Add undefined "holes" to an array How to recognize an array I How to recognize an array II
Arrays Explained

JavaScript Array Methods

Add an element to an array Remove the last element of an array - pop() Join all elements of an array into a string - join() Join two arrays - concat() Join three arrays - concat() 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() Remove the first element of an array - shift() Select elements from an array - slice()
Array Methods Explained

JavaScript Array Sort

Sort an array in ascending order Sort an array in descending order Sort an array of numbers ascending Sort an array of numbers descending Sort numbers (alphabetically or numerically) Sort array numbers in random order Find the lowest number in an array Find the highest number in an array Find the lowest number in an array using Math.min() Find the highest number in an array using Math.max() Using a "homemade" myArrayMin method Using a "homemade" myArrayMax method Sort objects by numeric properties Sort objects by string properties
Array Sort Explained

JavaScript Array Iteration

Array.forEach() Array.map() Array.filter() Array.reduce() Array.reduceRight() Array.every() Array.some() Array.indexOf() Array.lastIndexOf() Array.find() Array.findIndex()
Array Iteration 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 an Array 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

Categories

HTML CSS3 Bootstrap Foundation Sass JavaScript TypeScript JQuery AngularJS React NodeJS Highcharts PHP Python Python3 Django Linux Docker Ruby Java C C ++ Perl Servlet JSP Lua Scala Go ASP C # SQL MySQL SQLite MongoDB Redis Android Swift ionic Kotlin XML tutorial

Contact US