Javascript Tag Name | Javascript Rules | Usage |
---|---|---|
querySelectorAll() | querySelectorAll(); | This method will return several copies of an element. |
querySelector() | querySelector(); | This method will return one copy of an element. |
alert function | alert("Hello! I am an alert box!!"); | The alert() method displays an alert box with a message and an OK button. |
innerHTML(); | document. getElementById ("demo").innerHTML = "Paragraph changed!"; |
is used to get or set the HTML content of an element. |
innertext(); | document. getElementById ("demo").innertext = "Paragraph changed!"; |
is used to get or set the text of an element. Html tags will be ignored |
.val(); | var findme = $("#findme.pinput") .val(); |
.val function works for input elements. |
SetInterval | setInterval(function, milliseconds) | The setInterval() method calls a function it executes at specified intervals (in milliseconds). |
Clear Interval | function myStopFunction() { clearInterval(myVar); } | The clearInterval() method clears a timer set with the setInterval() method. |
SetTimeout | setTimeout(function, milliseconds) | The setTimeout() method calls a function or evaluates an expression after a specified number of milliseconds one time. |
Clear Timeout | function myStopFunction() { clearTimeout(myVar); } | The clearTimeout() method clears a timer set with the setTimeout() method. |
If statements | if (condition) { // block of code to be executed if the condition is true } | Use the if statement to specify a block of JavaScript code to be executed if a condition is true. |
else if Statements | if (hour < 18) { greeting = "Good day"; } else { greeting = "Good evening"; } | Use the else if statement to specify a new condition if the first condition is false. |
Switch Statements | switch(expression) { case x: // code block break; case y: // code block break; default: // code block } | The switch statement is used to perform different actions based on different conditions. |
variables | var x = 5; | JavaScript variables are containers for storing data values. |
Javascript Arrays | ||
Indexed Arrays | var fastfood = ["Burger King", "Mcdonalds", "Kentucy Fried Chicken"]; | Creates an array. The count starts at 0--the first item |
Associative Arrays | array={key1: 'value1',key2:'value2'}; | An associative array is simply a set of key value pairs. The value is stored in association with its key and if you provide the key the array will return the value. |
Multidimentional Arrays | let activities = [ ['Work', 9], ['Eat', 1], ['Commute', 2], ['Play Game', 1], ['Sleep', 7] ]; | a JavaScript multidimensional array is an array of arrays. |
Common Array Methods | ||
sort(); | var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.sort(); // Sorts the elements of fruits | The sort() method sorts the items of an array. The sort order can be either alphabetic,numeric, ascending or descending. |
push(); | var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.push("Kiwi"); | The push() method adds new items to the end of an array, and returns the new length. In this example the new array ends with Kiwi. |
pop(); | var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.pop(); | The pop() method removes the last element of an array. The new array ends with Apple. |
length(); | var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; | The length property returns the number of elements in an array. Although we begin counting at 0, there are 4 elements in this array |
shift(); | let cats = ['Bob', 'Willy', 'Mini']; cats.shift(); // ['Willy', 'Mini'] | The shift() method removes the first item of an array. The new array beginings with Willy. |
unshift(); | let cats = ['Bob']; cats.unshift('Willy'); // ['Willy', 'Bob'] cats.unshift('Puff', 'George'); // ['Puff', 'George', 'Willy', 'Bob'] | The unshift() method adds new items to the beginning of an array. |
Javascript Loops | ||
for loops | for (i = 0; i < 5; i++) {
text += "The number is " + i + " "; } } |
loops through a block of code a number of times. |
while loops | while (condition) { // code block to be executed } | loops through a block of code while a specified condition is true. |
Events | ||
add Event Listener | document. getElementById ("myBtn") .addEventListener ("click", displayDate); displayDate is a function which runs when button is clicked |
The addEventListener() method attaches an event handler to the specified element like a mouse click or onchange event. |
remove Event Listener | element. removeEventListener (event, listener) |
The remove EventListener() method removes an event handler that has been attached with the addEventListener() method. |
onClick | object.onclick = function(){myScript}; | The onclick event occurs when the user clicks on an element. |
onMouseOver | object.onmouseover = function(){myScript}; | The onmouseover event occurs when the mouse pointer is moved onto an element, or onto one of its children |
onMouseout | object.onmouseout = function(){myScript}; | The onmouseout event occurs when the mouse pointer is moved out of an element, or out of one of its children. |
onChange | object.onchange = function(){myScript}; | The onchange event occurs when the value of an element has been changed. |
onLoad | object.onload = function(){myScript}; | An HTML web page has finished loading. |
onFocus | object.onfocus = function(){myScript}; | The onfocus event occurs when an element gets focus. |
Functions | ||
Function | function name(parameter1, parameter2, parameter3) { // code to be executed } | A JavaScript function is a block of code designed to perform a particular task. |
Javascript Time | ||
newDate( ) | newDate( ); | Using new Date( ), creates a new date object with the current date and time. |
getDate | getDate( ); | Returns the day of the month (from 1-31). |
getFullYear | getFullYear( ); | Returns a four digit number. |
getMonth | getMonth ( ); | Returns the month (from 0-11). |
getDay | getDay ( ); | Returns the day of the week (from 0-6). |
getHours | getHours ( ); | Returns the hour (from 0-23). |
getMinutes | getMinutes ( ); | Returns the minutes (from 0-59). |
getSeconds | getSeconds ( ); | Returns the seconds (from 0-59). |
getMilliseconds | getMilliseconds ( ); | Returns the milliseconds (from 0-999). |
getTime | getTime ( ); | Returns the number of milliseconds since midnight Jan 1 1970, and a specified date. |