Javascript Basics
JavaScript
Javascript is used by programmers throughout the world to generate interactive and dynamic online content like browsers and applications. JavaScript is so popular that it's the most used programming language in the world, used as a client-side programming language by 97.0% of all websites. Client-side languages are those whose action takes place on the user's computer, rather than on the server.
JavaScript is adaptable enough to be utilized in a broad range of applications, including software, hardware controllers, and servers. Since it is native to the web browser, JavaScript is best recognized as a web-based language. The web browser can automatically interpret the language in the same way that a native English speaker can.
Over the last 25 years, JavaScript has matured into a versatile and approachable programming language for interacting with online browsers. JavaScript is used by developers to create complex interactive webpages and browser games, as well as to link servers to websites and online applications. It's simple to see why this language is the most widely used programming language in the world because of its versatility.
Including JavaScript in an HTML Page
<script type="text/javascript"> //JS code goes here</script>
Call an External JavaScript File
<script src="myscript.js"></script><code></code>
Including Comments
//
Single
line comments
/* comment here */
Multi-line
comments
Variables
var, const, let
var
The most common variable. Can be reassigned but only
accessed within a function. Variables defined with var move to the top when
code is executed.
const
Cannot
be reassigned and are not accessible before they appear within the code.
let
Similar
to const, however, the let variable can be reassigned but not re-declared.
Data Types
var age = 23
Numbers
var x
Variables
var a =
"init"
Text
(strings)
var b = 1 + 2 + 3
Operations
var c = true
True
or false statements
const PI = 3.14
Constant
numbers
var name = {firstName: "John", lastName: ”Doe"}
Objects
Objects
Arrays
var fruit = ["Banana", "Apple", "Pear"];
Array Methods
concat()
Join
several arrays into one
indexOf()
Returns
the first position at which a given element appears in an array
join()
Combine
elements of an array into a single string and return the string
lastIndexOf()
Gives
the last position at which a given element appears in an array
pop()
Removes
the last element of an array
push()
Add
a new element at the end
reverse()
Reverse
the order of the elements in an array
shift()
Remove
the first element of an array
slice()
Pulls
a copy of a portion of an array into a new array of 4 24
sort()
Sorts
elements alphabetically
splice()
Adds
elements in a specified way and position
toString()
Converts
elements to strings
unshift()
Adds
a new element to the beginning
valueOf()
Returns
the primitive value of the specified object
Operators
Basic Operators
+ Addition
- Subtraction
* Multiplication
/ Division
(..) Grouping operator
% Modulus (remainder)
++ Increment
numbers
-- Decrement
numbers
Comparison Operators
== Equal to
=== Equal value and equal type
!= Not equal
!== Not equal value or not equal type
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to
? Ternary operator
Logical Operators
&& Logical and
|| Logical or
! Logical not
Bitwise Operators
& AND statement
| OR statement
~ NOT
^ XOR
<< Left shift
>> Right shift
>>> Zero fill right shift
Functions
function name(parameter1, parameter2, parameter3) { // what the function does}
Outputting Data
alert()
Output
data in an alert box in the browser window
confirm()
Opens
up a yes/no dialog and returns true/false depending on user's click
console.log()
Writes
information to the browser console, good for debugging purposes
document.write()
Write
directly to the HTML document
prompt()
Creates
a dialogue for user input
Global Functions
decodeURI()
Decodes
a Uniform Resource Identifier (URI) created by encodeURI or similar
decodeURIComponent()
Decodes
a URI component
encodeURI()
Encodes
a URI into UTF-8
encodeURIComponent()
Same
but for URI components
eval()
Evaluates
JavaScript code represented as a string
isFinite()
Determines
whether a passed value is a finite number
isNaN()
Determines
whether a value is NaN or not
Number()
Returns
a number converted from its argument
parseFloat()
Parses
an argument and returns a floating point number
parseInt()
Parses
its argument and returns an integer
Loops
for (before loop; condition for loop; execute after loop) { // what to do during the loop}
for(){}
The
most common way to create a loop in Javascript
while(){}
Sets
up conditions under which a loop executes
do while(){}
Similar to the while loop, however, it executes at least
once and performs a check at the end to see if the condition is met to execute
again
break
Used
to stop and exit the cycle at certain conditions
continue
Skip
parts of the cycle if certain conditions are met of 7 24
If
- Else Statements
if (condition) { // what to do if the condition is met } else { // what to do if the condition is not met }
Strings
var person =
"John Doe";
Escape Characters
\' — Single quote
\" — Double quote
\\ — Backslash
\b — Backspace
\f — Form feed
\n — New line
\r — Carriage
return
\t — Horizontal
tabulator
\v — Vertical
tabulator
String Methods
charAt()
Returns
a character at a specified position inside a string
charCodeAt()
Gives
you the Unicode of the character at that position
concat()
Concatenates
(joins) two or more strings into one
fromCharCode()
Returns
a string created from the specified sequence of UTF-16 code units
indexOf()
Provides
the position of the first occurrence of a specified text within a string
lastIndexOf()
Same
as indexOf() but with the last occurrence, searching backward
match()
Retrieves
the matches of a string against a search pattern
replace()
Find
and replace specific text in a string
search()
Executes
a search for a matching text and returns its position
slice()
Extracts
a section of a string and returns it as a new string
split()
Splits
a string object into an array of strings at a specified position
substr()
Similar
to slice() but extracts a substring depended on a specified number of
characters
substring()
Also
similar to slice() but can’t accept negative indices
toLowerCase()
Convert
strings to lowercase
toUpperCase()
Convert
strings to uppercase
valueOf()
Returns
the primitive value (that has no properties or methods) of a string object
Regular Expressions
Pattern Modifiers
e — Evaluate
replacement
i — Perform case-insensitive matching g — Perform global matching
m — Perform multiple line matching s — Treat strings as a single line
x — Allow comments and whitespace in pattern U — Non-Greedy pattern
Brackets
[abc] Find any of the characters between the brackets [^abc] Find any character, not in the brackets
[0-9] Used to find any digit from 0 to 9
[A-z] Find any character from uppercase A to lowercase z (a|b|c) Find any of the alternatives separated with |
Metacharacters
. — Find a single character, except newline or
line terminator
\w — Word character
\W — Non-word
character
\d — A digit
\D — A non-digit character
\s — Whitespace
character
\S — Non-whitespace character
\b — Find a match at the beginning/end of a word
\B — A match not at the beginning/end of a word
\0 — NUL character
\n — A new line
character
\f — Form feed
character
\r — Carriage return character
\t — Tab character
\v — Vertical tab character
\xxx — The character
specified by an octal number xxx
\xdd — Character
specified by a hexadecimal number dd
\uxxxx — The Unicode
character specified by a hexadecimal number xxxx
Quantifiers
n+ — Matches any string that contains at least
one n
n* — Any string
that contains zero or more occurrences of n
n? — A string that contains zero or one
occurrence of n n{X} — String that contains a sequence of X n’s
n{X,Y} — Strings that
contain a sequence of X to Y n’s
n{X,} — Matches any string that contains a sequence of at
least X n’s n$ — Any string with n at the end of it
^n — String with n at the beginning of it
?=n — Any string that is followed by a specific string n
?!n — String that is not followed by a specific
string n
Numbers and Math
Number Properties
MAX_VALUE
The
maximum numeric value representable in JavaScript
MIN_VALUE
Smallest
positive numeric value representable in JavaScript
NaN
The
“Not-a-Number” value
NEGATIVE_INFINITY
The
negative Infinity value
POSITIVE_INFINITY
Positive
Infinity value
Number Methods
toExponential()
Returns
a string with a rounded number written as exponential notation
toFixed()
Returns
the string of a number with a specified number of decimals
toPrecision()
String of a number written with a specified length
toString()
Returns
a number as a string
valueOf()
Returns
a number as a number
Math Properties
E Euler’s number
LN2 The natural logarithm of 2
LN10 Natural logarithm of 10 LOG2E Base 2 logarithm of E LOG10E Base 10 logarithm of E PI The number PI
SQRT1_2 Square root of 1/2 SQRT2 The square root of 2
Math Methods
abs(x)
Returns
the absolute (positive) value of x
acos(x)
The
arccosine of x, in radians
asin(x)
Arcsine
of x, in radians
atan(x)
The
arctangent of x as a numeric value
atan2(y,x)
The arctangent of the quotient of its arguments
ceil(x)
The value of x rounded up to its nearest integer
cos(x)
The
cosine of x (x is in radians)
exp(x)
Value
of Ex
floor(x)
The
value of x rounded down to its nearest integer
log(x)
The
natural logarithm (base E) of x
max(x,y,z,...,n)
Returns
the number with the highest value
min(x,y,z,...,n)
Same
for the number with the lowest value
pow(x,y)
X to
the power of y
random()
Returns
a random number between 0 and 1
round(x)
The
value of x rounded to its nearest integer
sin(x)
The
sine of x (x is in radians)
sqrt(x)
The square root of x
tan(x)
The
tangent of an angle
Dealing with Dates
Setting Dates
Date()
Creates
a new date object with the current date and time
Date(2017, 5, 21, 3,
23, 10, 0)
Create a custom date object. The numbers represent the year,
month, day, hour, minutes, seconds, and milliseconds. You can omit anything you
want except for the year and month.
Date("2017-06-23")
Date
declaration as a string
Pulling Date and Time Values
getDate()
Get
the day of the month as a number (1-31)
getDay()
The
weekday as a number (0-6)
getFullYear()
Year
as a four-digit number (yyyy)
getHours()
Get
the hour (0-23)
getMilliseconds()
The
millisecond (0-999)
getMinutes()
Get
the minute (0-59)
getMonth()
Month
as a number (0-11)
getSeconds()
Get
the second (0-59)
getTime()
Get
the milliseconds since January 1, 1970
getUTCDate()
The day (date) of the month in the specified date
according to universal time (also available for day, month, full year, hours,
minutes, etc.)
parse
Parses a string representation of a date, and returns the
number of milliseconds since January 1, 1970
Set Part of a Date
setDate()
Set
the day as a number (1-31)
setFullYear()
Sets
the year (optionally month and day)
setHours()
Set
the hour (0-23)
setMilliseconds()
Set
milliseconds (0-999)
setMinutes()
Sets
the minutes (0-59)
setMonth()
Set
the month (0-11)
setSeconds()
Sets
the seconds (0-59)
setTime()
Set
the time (milliseconds since January 1, 1970)
setUTCDate()
Sets the day of the month for a specified date according
to universal time (also available for day, month, full year, hours, minutes, etc.)
DOM Node
Node Properties
attributes
Returns
a live collection of all attributes registered to an element
baseURI
Provides
the absolute base URL of an HTML element
childNodes
Gives
a collection of an element’s child nodes
firstChild
Returns
the first child node of an element
lastChild
The
last child node of an element
nextSibling
Gives
you the next node at the same node tree level
nodeName
Returns
the name of a node
nodeType
Returns
the type of a node
nodeValue
Sets
or returns the value of a node
ownerDocument
The
top-level document object for this node
parentNode
Returns
the parent node of an element
previousSibling
Returns
the node immediately preceding the current one
textContent
Sets
or returns the textual content of a node and its descendants
Node Methods
appendChild()
Adds
a new child node to an element as the last child node
cloneNode()
Clones
an HTML element
compareDocumentPosition()
Compares
the document position of two elements
getFeature()
Returns
an object which implements the APIs of a specified feature
hasAttributes()
Returns
true if an element has any attributes, otherwise false
hasChildNodes()
Returns
true if an element has any child nodes, otherwise false
insertBefore()
Inserts
a new child node before a specified, existing child node
isDefaultNamespace()
Returns
true if a specified namespaceURI is the default, otherwise false
isEqualNode()
Checks
if two elements are equal
isSameNode()
Checks
if two elements are the same node
isSupported()
Returns
true if a specified feature is supported on the element
lookupNamespaceURI()
Returns
the namespace URI associated with a given node
lookupPrefix()
Returns
a DOMString containing the prefix for a given namespace URI, if present
normalize()
Joins
adjacent text nodes and removes empty text nodes in an element
removeChild()
Removes
a child node from an element
replaceChild()
Replaces
a child node in an element
Element Methods
getAttribute()
Returns
the specified attribute value of an element node
getAttributeNS()
Returns the string value of the attribute with the specified namespace and name
getAttributeNode()
Gets
the specified attribute node
getAttributeNodeNS()
Returns
the attribute node for the attribute with the given namespace and name
getElementsByTagName()
Provides
a collection of all child elements with the specified tag name
getElementsByTagNameNS()
Returns a live HTMLCollection of elements with a certain
tag name belonging to the given namespace
hasAttribute()
Returns
true if an element has any attributes, otherwise false
hasAttributeNS()
Provides a true/false value indicating whether the
current element in a given namespace has the specified attribute
removeAttribute()
Removes
a specified attribute from an element
removeAttributeNS()
Removes
the specified attribute from an element within a certain namespace
removeAttributeNode()
Takes
away a specified attribute node and returns the removed node
setAttribute()
Sets
or changes the specified attribute to a specified value
setAttributeNS()
Adds
a new attribute or changes the value of an attribute with the given namespace
and name
setAttributeNode()
Sets
or changes the specified attribute node
setAttributeNodeNS()
Adds
a new namespaced attribute node to an element
Working
with the Browser
Window Properties
closed
Checks
whether a window has been closed or not and returns true or false
defaultStatus
Sets
or returns the default text in the status bar of a window
document
Returns
the document object for the window
frames
Returns
all <iframe> elements in the current window
history
Provides
the History object for the window
innerHeight
The
inner height of a window’s content area
innerWidth
The
inner width of the content area
length
Find
out the number of <iframe> elements in the window
location
Returns
the location object for the window
name
Sets
or returns the name of a window
navigator
Returns
the Navigator object for the window
opener
Returns
a reference to the window that created the window
outerHeight
The
outer height of a window, including toolbars/ scrollbars
outerWidth
The
outer width of a window, including toolbars/ scrollbars
pageXOffset
The number of pixels in the current document has been scrolled horizontally
pageYOffset
Number
of pixels the document has been scrolled vertically
parent
The
parent window of the current window
screen
Returns
the Screen object for the window
screenLeft
The
horizontal coordinate of the window (relative to the screen)
screenTop
The
vertical coordinate of the window
screenX
Same
as screenLeft but needed for some browsers
screenY
Same
as screenTop but needed for some browsers
self
Returns
the current window
status
Sets
or returns the text in the statusbar of a window
top
Returns
the topmost browser window
Window Methods
alert()
Displays
an alert box with a message and an OK button
blur()
Removes
focus from the current window
clearInterval()
Clears
a timer set with setInterval()
clearTimeout()
Clears
a timer set with setTimeout()
close()
Closes
the current window
confirm()
Displays
a dialogue box with a message and an OK and Cancel button
focus()
Sets
focus on the current window
moveBy()
Moves
a window relative to its current position
moveTo()
Moves
a window to a specified position
open()
Opens
a new browser window
print()
Prints
the content of the current window
prompt()
Displays
a dialogue box that prompts the visitor for input
resizeBy()
Resizes
the window by the specified number of pixels
resizeTo()
Resizes
the window to a specified width and height
scrollBy()
Scrolls
the document by a specified number of pixels
scrollTo()
Scrolls
the document to specific coordinates
setInterval()
Calls
a function or evaluates an expression at specified intervals
setTimeout()
Calls
a function or evaluates an expression after a specified interval
stop()
Stops
the window from loading
Screen Properties
availHeight
Returns
the height of the screen (excluding the Windows Taskbar)
availWidth
Returns
the width of the screen (excluding the Windows Taskbar)
colorDepth
Returns
the bit depth of the color palette for displaying images
height
The
total height of the screen
pixelDepth
The
color resolution of the screen in bits per pixel
width
The
total width of the screen
Events
Mouse
onclick
The
event occurs when the user clicks on an element
oncontextmenu
User
right-clicks on an element to open a context menu
ondblclick
The
user double-clicks on an element
onmousedown
User
presses a mouse button over an element
onmouseenter
The
pointer moves onto an element
onmouseleave
Pointer
moves out of an element
onmousemove
The
pointer is moving while it is over an element
onmouseover
When
the pointer is moved onto an element or one of its children
onmouseout
The user moves the mouse pointer out of an element or one of its children
onmouseup
The
user releases a mouse button while over an element
Keyboard
onkeydown
When
the user is pressing a key down
onkeypress
The
moment the user starts pressing a key
onkeyup
The
user releases a key
Frame
onabort
The
loading of media is aborted
onbeforeunload
The event occurs before the document is about to be unloaded
onerror
An
error occurs while loading an external file
onhashchange
There
have been changes to the anchor part of a URL
onload
When
an object has loaded
onpagehide
The
user navigates away from a webpage
onpageshow
When
the user navigates to a webpage
onresize
The
document view is resized
onscroll
An
element’s scrollbar is being scrolled
onunload
Event
occurs when a page has unloaded
Form
onblur
When
an element loses focus
onchange
The
content of a form element changes (for <input>, <select>and
<textarea>)
onfocus
An
element gets focus
onfocusin
When
an element is about to get focus
onfocusout
The
element is about to lose focus
oninput
User
input on an element
oninvalid
An
element is invalid
onreset
A
form is reset
onsearch
The
user writes something in a search field (for <input="search">)
onselect
The
user selects some text (for <input> and <textarea>)
onsubmit
A
form is submitted
Drag
ondrag
An
element is dragged
ondragend
The
user has finished dragging the element
ondragenter
The
dragged element enters a drop target
ondragleave
A
dragged element leaves the drop target
ondragover
The
dragged element is on top of the drop target
ondragstart
User
starts to drag an element
ondrop
Dragged
element is dropped on the drop target
Clipboard
oncopy
User
copies the content of an element
oncut
The
user cuts an element’s content
onpaste
A
user pastes content in an element
Media
onabort
Media
loading is aborted
oncanplay
The
browser can start playing media (e.g. a file has buffered enough)
oncanplaythrough
When
browser can play through media without stopping
ondurationchange
The
duration of the media changes
onended
The
media has reached its end
onerror
Happens
when an error occurs while loading an external file
onloadeddata
Media
data is loaded
onloadedmetadata
Meta
Metadata (like dimensions and duration) are loaded
onloadstart
Browser
starts looking for specified media
onpause
Media
is paused either by the user or automatically
onplay
The
media has been started or is no longer paused
onplaying
Media
is playing after having been paused or stopped for buffering
onprogress
Browser
is in the process of downloading the media
onratechange
The
playing speed of the media changes
onseeked
User
is finished moving/skipping to a new position in the media
onseeking
The
user starts moving/skipping
onstalled
The
browser is trying to load the media but it is not available
onsuspend
Browser
is intentionally not loading media
ontimeupdate
The
playing position has changed (e.g. because of fast forward)
onvolumechange
Media
volume has changed (including mute)
onwaiting
Media
paused but expected to resume (for example, buffering)
Animation
animationend
A
CSS animation is complete
animationiteration
CSS
animation is repeated
animationstart
CSS
animation has started
Other
transitionend
Fired
when a CSS transition has been completed
onmessage
A
message is received through the event source
onoffline
Browser
starts to work offline
ononline
The
browser starts to work online
onpopstate
When
the window’s history changes
onshow
An
<menu> element is shown as a context menu
onstorage
A
Web Storage area is updated
ontoggle
The
user opens or closes the <details> element
onwheel
The mouse wheel rolls up or down over an element
ontouchcancel
Screen
touch is interrupted
ontouchend
The user finger is removed from a touchscreen
ontouchmove
A
finger is dragged across the screen
ontouchstart
The finger is placed on the touchscreen
Errors
try
Lets
you define a block of code to test for errors
catch
Set
up a block of code to execute in case of an error
throw
Create
custom error messages instead of the standard JavaScript errors
finally
Lets
you execute code, after trying and catch, regardless of the result
Error Name Values
name
Sets
or returns the error name
message
Sets
or returns an error message in the string from
EvalError
An
error has occurred in the eval() function
RangeError
A
number is “out of range”
ReferenceError
An
illegal reference has occurred
SyntaxError
A
syntax error has occurred
TypeError
A
type error has occurred
URIError
An
encodeURI() error has occurred