Javascript has been used to move html elements for many years. In order to properly target html elements Javascript uses the following methods:
  1. get ElementByID
  2. get ElementsByTagName
  3. get ElementsByClassName
  4. querySelectorAll()
  5. querySelector()
Below we'll look at hese tags in detail and learn some other important javascript tags.
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.