JavaScript Tutorial

Introduction

Introduction to Javascript
Hello world program
Variables
Statements
Working with multi line strings
Javascript is weakly typed
Comments
Types
User Interaction
    alert box
    prompt box
    confirm: Get confirmation from user

Operators

operators
Arithmetic Operators
Increment/decrement: ++, -- operators
Bitwise operators
Logical operators
Assignment operators
Compound Assignment operator
String concatenation operator
===: Strict equality operator
Ternary operator
Working with boolean values

Decision Making Statements

Decision Making: if, if-then
if-else-if-else ladder
Decision making using switch statement

Loops

loops
while loop
do-while loop
for loop
break statement
continue statement
break in label form
for in loop
for of loop

typeof, working with strings

get the type of variable
Working with strings
Represent multi line strings
Strings and comparison operators
Evaluating expressions
Escape Sequences

Working with Numbers

Working with numbers
Working with Infinity
NaN: Not a Number
parseInt: Convert string to integer
parseFloat: Convert string to float
Rounding float values
isFinite: Check whether number is finite (or) not

Objects

Objects
. Vs []: accessing properties
Nested objects
in: Check for property existence in object
hasOwnProperty(): Check whether object has given property (or) not
instanceof : Check the class
Iterating over all properties of object
null Vs undefined

Working with Functions

functions
Pass by value and Pass by reference
Function expressions
Nested functions
Function Arguments
Recursion
function scope and hoisting
Adding methods to an object
Define objects using constructor function
Create an object using Object.create method
Inheritance

Serialize and deserialize objects

Convert javascript object to json string
Convert string to JavaScript object
Serialize objects

Arrays

Arrays
Define array using Array constructor function
Arrays are heterogeneous
Sparse arrays
iterate over the elements of array
pop: Remove last element from array
push: Append an element to array
shift: Remove first element from array
unshift: Add an element to the front of array
length of the array
join: Join element of the array
split: get an array from string
trim elements of array
splice: Delete an element from array
Array slicing
Reverse the elements of array
Sort elements of array
concat(): concat arrays
Define array using Array constructor function
forEach: Apply function on every element of the array
map: Return new array by applying function on every element of the array
Array: filter: Return new array by filtering the elements
array: every: Check for condition
Array: some: Check for elements
Array: reduce: combine elements of array
Array: reduceRight: combine elements of array
Array: lastIndexOf(): Get last index of the element
Arrays: isArray: Check whether reference is array or not
Multi Dimensional Arrays

Exception Handling

Exception Handling
toString method
valueOf: Convert object to primitive type
Writing script in external file

Document Object Model

Document object model
DOM: Nodes
Accessing Elements using DOM
getElemenyById: Target element by id
getElementsByTagName: Get elements by tag name
getElementsByClassName: Get elements by class name
getAttribute: get the value associated with the attribute
setAttribute: Set the value associated with attribute
Gallery Application
Get child nodes of an element
nodeType: get node type
nodeValue: Get the value of node
firstChild, lastChild: get first and last Chids of a node
pseudo-protocol
innerHTML: Set (or) get HTML data
createElement: Create new Element
appendChild: Create a child to node
createTextNode: Create text node
insertBefore: Insert element before an element
insertAfter: Insert element after an element
Getting inline styles attached to an element
Changing the styles using JavaScript DOM
Event handling

Applying styles to console messages

Introduction to classes

Introduction to Classes
    Define class using class expressions
    Adding prototype methods to class
    Adding getter and setter methods to class
    Adding static methods to a class
    Adding static properties to a class
    Adding prototype properties to a class
    extends: Create sub classes
    Inherit from an object
    

Working with Set

Working with Set
    Set.prototype.add(value): Add an element to set
    Set.prototype.clear(): Remove all elements from set
    Set.prototype.delete(value): Remove element from set
    Set.prototype.entries(): Get all the elements in the set
    Set.prototype.forEach(callbackFn[, thisArg]): Calls the callback function for every element in the set
    Set.prototype.has(value): Check for the existence of an element in the set
    Set.prototype.keys(): Return an iterator that contain all the values in set
    Set.prototype.values(): Return an iterator that contain all the values in set

Exploring Map Data Structure

Exploring Map data structure
    size: get number of pairs in map
    Map: clear(): Remove all the elements from map
    Map: delete: Delete an entry from map
    Map.prototype.entries(): Get all the entries in map
    Map.prototype.forEach(callbackFn[, thisArg])
    Map.prototype.get(key): Return the value associated with key
    Map.prototype.keys(): Get all the keys of map
    Map.prototype.has(key): Check for existence of key
    Map.prototype.set(key, value): Set the value for key
    Map.prototype.values(): Get all the values in Map

Debug JavaScript Application in Chrome Browser

Debug JavaScript Application in Chrome Browser
    debugger statement
    Adding Conditional break points
    Deactivate all the breakpoints
    Continue Execution from any point
    Debugger: Working with call stack
    Monitor variables, expressions using watch

Previous                                                 Next                                                 Home