Quick Reference Study Notes for JavaScript Programming (Advanced)

 JavaScript Programming

JavaScript Data Types

String

String value can be assigned to a variable using equal to (=) operator. Eg: var str1 = "Hello World";

Number

Number type represents integer, float, hexadecimal, octal or exponential value. Eg: var int = 100;

Boolean

Boolean can have only two values, true or false.

var YES = true;

Object

Objects are used to store keyed collections of various data and more complex entities.

Eg:

// object with properties & method

var person = { firstName: "Webners", lastName: "Solutions", exp: 8, getFullName: function () { return this.firstName + ' ' + this.lastName } };

Date

Date object to work with date & time including days, months, years, hours, minutes, seconds and milliseconds.

Eg: var currentDate = new Date(); //current date

Array

An array is a special type of variable, which can store multiple values. Eg: var stringArray = ["one", "two", "three"];

null

A null means absence of a value. Eg: var myVar = null;

undefined

A variable or an object has an undefined value. Eg: var myVar;

Accessing Dom Elements

Elements by id

Returns a reference to the element by its ID.

Eg: document.getElementById("idOfElement");

Elements by tag name

Returns an HTMLCollection of elements with the given tag name.

Eg: var x = document.getElementsByTagName("p");

Elements by class name

Returns an array like object of all child elements which have all of the given class name. Eg: var x = document.getElementsByClassName("intro");

Elements by CSS selectors

This example returns a list of all <p> elements with class="intro".

Eg: var x = document.querySelectorAll("p.intro");

Create new DOM elements

Create new elements

Var newHeading = document.createElements(h5);

Create text nodes new elements

Var h1Text = document.createTextNode(“This is the header text.”);

Attach new text nodes to new elements

newHeading.appendChild(h1Text);

newParagraph.appendChild(pText);

Add Elements to the DOM

Add new elements

//Grab element on the page

Var firstHeadind = document.getElementById(“firstHeading”);

firstHeading.appendChild(newHeading);

Insert elements before any elements

//get parent node of firstHeading

Var parent = firstHeading.parentNode;

//insert newHeading before FirstHeading

parent.insertBefore(newHeading, firstHeading);

Insert another snippet of HTML

//Suppose you have the following HTML

<div id=”frame1”>

 <p>Some example text</p>

</div>

<div id=”frame2”>

 <p>Some example text</p>

</div>

//you can insert another snippet of html between #frame1 and //#frame2

Var frame2 = document.getElementById(“frame2”);

frame2.insertAdjacentHTML(‘beforebegin’, ‘<div><p>This gets inserted.</p></div>’);

 

//beforebegin-The HTML would be placed immediately before the element, as a sibling.

 

//afterbegin-The HTML would be placed inside the element, before its first child.

 

//beforeend-The HTML would be placed inside the element, after its last child.

 

//afterend-The HTML would be placed immediately after the element, as a sibling.

Adding/Removing Properties in Object

Add

//create an object

Var obj = {};

//add a property to object

obj.newPropName(“First Property”);

Remove

// now to delete

Eg: delete obj.newPropName;

Conditionals

If else statements

var a = 1;

var b = 2;

If (a<b){

Console.log(“the if is true!”);

} else {

Console.log(“the if is false!”);

}

Multi if else statements

var a = 1;

var b = 2;

var c = 2;

If (a>b){

Console.log(“the if is true!”);

} else if(a>c){

Console.log(“Ok, this if is True”);

} else {

Console.log(“None of these were true”);

}

Ternary operators same as if else

var a = 1;

var b = 2;

a===b?Console.log(“the statement is true!”):Console.log(“the statement is false!”);

Switch statements

var a = 2;

switch(a){

case 1:

console.log(“a is equal to 1.”);

Break;

case 2:

console.log(“a is equal to 2.”);

break;

default:

console.log(“default”);

}

Loops

While

var i = 1;

while (i<10){

console.log(i);

i+=1;

}

Do while loops

var i = 1;

do{

console.log(i);

i+=1;

} while (i<10);

For loops

for (i = 1;i<10;i++){

console.log(i);

}

Events

onclick

onclick events fire when the mouse button clicks.

onload

onload event automatically executes as soon as the document fully loads.

onunload

In contrast to onload event, the onunload event fires when the user leaves the page.

onmousemove

If the user moves a button, then the events associated with onmousemove fire.

onmouseout

onmouseout event fires if the mouse pointer position is out of focus from the element.

onmouseover

onmouseover event fires if the mouse pointer position is in focus of the element position.

onkeydown

onkeydown event fires when key is pressed.

onkeyup

onkeyup event fires when key is released.

onkeypress

The event onkeypress fires if the onkeydown is followed by onkeyup

onfocus

When a element gains focus, onfocus event fires or executes.

onblur

In contrast to an onfocus event, this event fires when the element loses its focus. Both onfocus and onblur may be used for handling validation of forms.

onsubmit

The event onsubmit fires when the command form submit is given. This event is used for validating all fields in the form before submitting the form.

onerror

onerror event fires when an error occurs.

ondblclick

The event ondblclick fires when the mouse button is double clicked.

Add/Remove Array Item

Empty array

var testArray = [];

Array with items

var myArray = [testArray, true, ‘string’];

Call specific value in an array

myArray[0];

Change value

myArray[0] = false;

Append to array

myArray[myArrayLength] = false;

// or you can use push()

myArray.push(‘new string’);

// will return new length of array

Remove last item

// You can remove last item using pop()

myArray.pop();

// will return the last item of the array and will have removed it from myArray

Remove first item

// You can remove first item of array using shift()

myArray.shift();

// will remove and return first item of array

Add item in beginning

myArray.unshift(1,2);

// this will add 1 and 2 to the beginning of array and return new length

Remove item with index

myArray.splice(1,2)

// will remove item from index 1, 2 and return the third item only

// you can use delete keyword but turn value to undefined and not shorten length, so we use splice()


*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree