JavaScript Examples
What can JavaScript do?
JavaScript can change HTML content
JavaScript can change HTML attributes
JavaScript can change CSS style
JavaScript can validate input
JavaScript Output
Writing into an window alert box
Writing into the HTML output
Writing into an HTML element
Writing into the browser console
Where to Insert JavaScript
JavaScript in <head>
JavaScript in <body>
JavaScript in an external file
JavaScript Syntax
JavaScript statements
JavaScript numbers
JavaScript strings
JavaScript expressions
JavaScript keywords
JavaScript variables
JavaScript assignment
JavaScript operators
JavaScript comments
JavaScript is case sensitive
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.
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
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
JavaScript Arithmetic
The addition (+) operator
The subtraction (-) operator
The multiplication (*) operator
The division (/) operator
The modulus (%) operator
The increment (++) operator
The decrement (--) operator
JavaScript Assignment
The = assignment operator
The += assignment operator
The -= assignment operator
The *= assignment operator
The /= assignment operator
The %= assignment operator
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
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
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
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 ()
JavaScript Events
An onclick
event changes an HTML element
An onclick event
changes its own element
An onclick event calls a
function
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()
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
JavaScript Maths
Use Math.random() to
return a random number between 0 and 1
Use Math.round() to
round a number
Use Math.ceil() to round
a number (up)
Use Math.floor() to
round a number (down)
Use
Math.floor() and random() to return a random integer
Use Math.max() to return
the number with the highest value
Use Math.min() to return
the number with the lowest value
Convert Celsius to
Fahrenheit
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
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()
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()
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 an date
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
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)
JavaScript Conditionals
The if statement
The else
statement
The else if statement
Random link
Switch statement
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
JavaScript Error Handling
The try...catch
statement
The try...catch
statement with a confirm box
The onerror event
JavaScript Regular Expressions
Search for an
expression in a string
Search for an
expression and replace it
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
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
