JavaScript

Window Popup

alert("Hello! I am an alert box!")


Get Element By ID

document.getElementById('demo')// demo is the id of element
// Assign some value
document.getElementById('demo').innerHTML = Date();
document.getElementById('demo1').innerHTML = 'Magic'
// Change Font Size
document.getElementById('demo2').style.fontSize='35px'

Stop execution of debugging at certain point

debugger;

Hide 

document.getElementById('demo1').style.display = 'none'

Display

document.getElementById('demo1').style.display = 'block'

Write in various form

document.write("This is document.write");
document.write("<br>");
document.write(10 * 5);
window.alert("This is window.alert");
console.log("this message is coming from console.log");

Function

//Accessing a function without () will return the function definition instead of the function result:

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Calling function

<input type="button" value="button1" onClick="myFunction()"/>
var text = "The temperature is " + toCelsius(77) + " Celsius";

Object

var car = {type:"Fiat", model:"500", color:"white"};

var person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  eyeColor: "blue"
};

//The name:values pairs in JavaScript objects are called properties:


Accessing Object Properties

objectName.propertyName
//or
objectName["propertyName"]


Variable Declaration
// Simple string
var car = "Fiat"


The this Keyword

In a function definition, this refers to the "owner" of the function.
In other words, this.firstName means the firstName property of this object.

fullName : function() {
    return this.firstName + " " + this.lastName;
  }
 
<button onclick="this.innerHTML = Date()">The time is?</button>

 
//A method is a function stored as a property.

var person = {
  firstName: "John",
  lastName : "Doe",
  id       : 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};


String Operations

Length

txt.length;

Escape character

The backslash (\) escape character turns special characters into string characters
var x = "We are the so-called \"Vikings\" from the north.";

More
\b Backspace
\f Form Feed
\n New Line
\r Carriage Return
\t Horizontal Tabulator
\v Vertical Tabulator

Break Line string

var txt = "Hello \
Dolly!";

var txt = "Hello " +
"Dolly!";

var x = "John";
var y = new String("John");

// typeof x will return string
// typeof y will return object

Don't create strings as objects. It slows down execution speed.

String Index

str.indexOf("locate");
str.lastIndexOf("locate");

Both indexOf(), and lastIndexOf() return -1 if the text is not found.
Both methods accept a second parameter as the starting position for the search:

str.indexOf("locate", 15);

String Search

The search() method searches a string for a specified value and returns the position of the match:
str.search("locate");

The search() method cannot take a second start position argument.
The indexOf() method cannot take powerful search values (regular expressions).

String other operations

slice(start, end)
substring(start, end)
substr(start, length)
substring() is similar to slice().

The difference is that substring() cannot accept negative indexes.

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(-12)
document.getElementById("demo").innerHTML = res;
</script>

output:
Banana, Kiwi

<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7);
document.getElementById("demo").innerHTML = res;
</script>

output:
Banana, Kiwi

var x = 100 / "Apple";
isNaN(x);

Output:
true

-----

String Equal

When using the == operator, equal strings are equal:

When using the === operator, equal strings are not equal, because the === operator expects equality in both type and value.

var x = 500;           
var y = new Number(500);
// (x == y) is true because x and y have equal values
// (x === y) is false because x and y have different types


toFixed()

returns a string, with the number written with a specified number of decimals:

var x = 9.656;
x.toFixed(0);           // returns 10
x.toFixed(2);           // returns 9.66
x.toFixed(4);           // returns 9.6560
x.toFixed(6);           // returns 9.656000

toPrecision()

returns a string, with a number written with a specified length:

var x = 9.656;
x.toPrecision();        // returns 9.656
x.toPrecision(2);       // returns 9.7
x.toPrecision(4);       // returns 9.656
x.toPrecision(6);       // returns 9.65600

valueOf()

returns a number as a number.

var x = 123;
x.valueOf();            // returns 123 from variable x
(123).valueOf();        // returns 123 from literal 123
(100 + 23).valueOf();   // returns 123 from expression 100 + 23

Array

var cars = ["Saab", "Volvo", "BMW"];

var cars = [
  "Saab",
  "Volvo",
  "BMW"
];

var cars = new Array("Saab", "Volvo", "BMW");

Array Vs Object

Arrays use numbers to access its "elements". In this example, person[0] returns John
var person = ["John", "Doe", 46];

Objects use names to access its "members". In this example, person.firstName returns John
var person = {firstName:"John", lastName:"Doe", age:46};

In JavaScript, arrays use numbered indexes. 
In JavaScript, objects use named indexes.

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;   // the length of fruits is 4

fruits = ["Banana", "Orange", "Apple", "Mango"];
var first = fruits[0];//Accessing the First Array Element
var last = fruits[fruits.length - 1];//Accessing the Last Array Element

Looping Array Elements

var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;

text = "<ul>";
for (i = 0; i < fLen; i++) {
  text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";

var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];

text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";

function myFunction(value) {
  text += "<li>" + value + "</li>";
}

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");    // adds a new element (Lemon) to fruits

JavaScript does not support arrays with named indexes.
In JavaScript, arrays always use numbered indexes. 

----

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
document.getElementById("demo1").innerHTML = fruits.join(" * ");

output:
Banana,Orange,Apple,Mango
Banana * Orange * Apple * Mango

The pop, push, shift, unshift

method removes the last element from an array:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // Removes the last element ("Mango") from fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop();      // the value of x is "Mango"

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  Adds a new element ("Kiwi") to fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.push("Kiwi");   //  the value of x is 5

The shift() method removes the first array element and "shifts" all other elements to a lower index.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.shift();            // Removes the first element "Banana" from fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.shift();    // the value of x is "Banana"

The unshift() method adds a new element to an array (at the beginning), and "unshifts" older elements:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Adds a new element "Lemon" to fruits

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon");    // Returns 5

----

The length property provides an easy way to append a new element to an array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Kiwi";          // Appends "Kiwi" to fruits


Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0];           // Changes the first element in fruits to undefined

Using delete may leave undefined holes in the array. Use pop() or shift() instead.

The splice()

method can be used to add new items to an array:

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

The first parameter (2) defines the position where new elements should be added (spliced in).
The second parameter (0) defines how many elements should be removed.
The rest of the parameters ("Lemon" , "Kiwi") define the new elements to be added.
The splice() method returns an array with the deleted items:

String concat

var myGirls = ["Cecilie", "Lone"];
var myBoys = ["Emil", "Tobias", "Linus"];
var myChildren = myGirls.concat(myBoys);   // Concatenates (joins) myGirls and myBoys

var arr1 = ["Cecilie", "Lone"];
var arr2 = ["Emil", "Tobias", "Linus"];
var arr3 = ["Robin", "Morgan"];
var myChildren = arr1.concat(arr2, arr3);   // Concatenates arr1 with arr2 and arr3

var arr1 = ["Cecilie", "Lone"];
var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]);


The slice, sort, referese()

method slices out a piece of an array into a new array.
This example slices out a part of an array starting from array element 1 ("Orange"):

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();        // First sort the elements of fruits
fruits.reverse();     // Then reverse the order of the elements

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b}); //Ascending
points.sort(function(a, b){return a - b}); //Descending