JavaScript tutorial examples

Basic concept:

• Basic JavaScript syntax example
• JavaScript variables example
• Basic DOM concept example
• Basic example of JavaScript interaction with HTML document
• Basic example with JavaScript events embeded in HTML document

Data types:

• The typeof operator example
• The undefined type example
• The Boolean type example
• The Number type example
• The String type example

Operators:

• Unary operators example
• Bitwise operators example
• Boolean logical operators example
• Multiplicative arithmetic operators example
• Additive arithmetic operators example
• Relational comparison operators example
• Equality comparison operators example
• Conditional ternary operators example
• Assignment operators example

Conditional statements:

• The if() ... else if() ... else() statement example
• The switch ... case statement example
• The while statement example
• The do ... while statement example
• The for statement example
• The for ... in statement example
• The break and continue statements example

Arrays:

• Arrays conversion methods example
• Arrays stacking methods example
• Arrays queuing methods example
• Arrays re-ordering methods example
• Arrays manipulations methods example

Functions:

• Basic example of a function declaration
• Example with arguments passing to a function
• Funciton internals, this and arguments
• Returning functions as values
• Function call() method and it's scope

Regular expressions:

• Basic usage of RegExp properties
• Basic usage of RegExp methods

Date and time:

• Basic conversions of Date type to various strings
• Example of date and time conversion methods

Primitive wrappers:

• Conversion of the Number types
• The String type methods slice(), substr(), toUpperCase() and replace()

Objects - basics:

• Using an Object type to define a person
• Example of object namespaces
• Example of an object's property
• A complex inheritance example
• Example of an encapsulation
• Example of an abstraction

Objects - constructors and prototypes:

• Example of a listed pattern
• Example of a factory pattern
• Example of a basic protoypes
• Example of prototypes
• The in property in prototypes
• The for-in loop and prototypes
• Combination of constructors and prototypes
• Dynamic prototype pattern
• Parasitic constructor pattern
• Example of prototype chaining
• Prototypal inheritance
• Combination inheritance

Global objects:

• URI encoding methods
• The eval() method example
• The global property Infinity
• The global property NaN
• The global property Undefined

Math object:

• Math object properties example
• Math.random() example
• Math.min() example
• Math.max() example
• Math.round() example
• Math.ceil() example
• Math.floor() example
• Math.abs() example
• Math.exp() example
• Math.log() example
• Math.acos() example
• Math.asin() example
• Math.atan() example
• Math.atan2() example
• Math.cos() example
• Math.sin() example
• Math.tan() example
• Math.pow() example
• Math.sqrt() example

Scope:

• The with statement example

Anonymous functions:

• Example of self-executing anonymous function
• Example of nested anonymous function
• Arguments passing to anonymous function
• Recursive function calculating power if a number
• Example of a closure function
• Block-scope mimicking
• Privileged methods inside a constructor
• Privileged methods through module patterns

Browser object model (BOM):

• Window object example
• Finding window's coordinates
• Calculating window's size
• The windows.object method
• Example of a proper way of using pop-up
• Setting and clearing interval timer
• Setting and clearing timeout timer
• Dialog box and alert() method example
• Dialog box and confirm() method example
• Dialog box and prompt() method example
• Location object and assign() method 
• Location object and reload() method 
• Location object and replace() method 
• Navigator object's properties example 
• History object's methods forward() and go()
• History object's methods back() and go()
• The navigator.plugins property
• Detecting plugins hasPlugin() method
• The onerror event example
• The onload event example
• The onresize event example

Document object model (DOM):

• Displaying child nodes of the document's body
• Example of appendChild() method - adding a child node
• Example of cloneNode() method - cloning a node
• Example of insertBefore() method - inserting a node
• Example of removeChild() method - removing a child node
• Example of replaceChild() method - replacing a child node
• Example of hasChildNodes() method - checking for existance of a child node
• Example of document.writeIn() method
• Opening, closing and writing to a document
• Example of getElementsByTagName() method - reading the elements by tag
• The nodeName and tagName properties
• Creating and adding new elements
• Example with getAttribute(), setAttribute() and removeAttribute() methods
• How to add text nodes to a paragraph
• The comment type of DOM
• The documentFragment type - changing an element in a list
• Implementing and manipulating HTML attributes with DOM methods

Document object model (DOM) - extensions:

• Example of scrolling methods
• Example of childNodes property
• Examples of contains() and compareDocumentPosition() methods
• The innerText property example
• The outerText property example
• The innerHTML property example
• The outerHTML property example
• Tables manipulation with DOM

Document object model (DOM) - levels 2 & 3:

• CSSStyleDeclaration object's properties example
• CSSStyleDeclaration object's methods example
• Example of getComputedStyle() method
• Example with offsetHeight, offsetLeft, offsetTop, and offsetWidth properties
• Example with offsetHeight, offsetWidth, clientHeight, and clientWidth properties
• Example with scrollHeight, scrollWidth, scrollHeight, and scrollWidth properties
• The NodeIterator interface methods and properties
• The TreeWalker interface methods and properties
• The Range interface selection methods
• The selectNodeContents property
• The selectNode property
• The Range interface startBefore() and startAfter() methods
• The Range interface setStart() and setEnd() methods

Events:

• The events bubbling example
• The events capturing example
• The event handler example
• Adding and removing event listeners
• The Event object combined with mouse events example
• Example of onmouseover and onmouseout events
• Example of onmousedown and onmouseup events
• Example of onmousemove
• Example of onclick
• Example of ondblclick
• Example of onmouseenter and onmouseleave events
• Example of oncontextmenu
• The mouse events properties 'button' and 'which'
• Detecting which keyboard event and property occured
• Example of keyCode and charCode properties
• Example of onload events
• Example of onunload events

Forms:

• Example of submit() method
• Example of reset() method
• Accesing form elements with DOM
• Manipulating form elements with DOM
• Manipulating input elements with DOM
• Manipulating select boxes with DOM

Error handling:

• Example of try-catch-finally statements
• The Error object and error types
• User-defined error object throwing error messages
• Example with multiple throw statements
• The onerror event handled inside HTML
• The onerror event handled inside JavaScript
• The onerror event handled with addEventListener() method

XML scripting:

• DOM Parsing type and try-catch mode
• Example of XML Serializer type
• Example of XSLT processing methods

Working with Clients:

• Analyzing OS (operative system)
• Navigator.userAgent - detecting device
• Cookies - how to create, display and delete
• Sub-Cookies - how to create, display and delete
• Example of sessionStorage object
• Example of localStorage object

Advanced JavaScript:

• Lazy-loading functions example
• Function binding with bind() method example
• Function currying example
• Function throttling example
• The setTimeout() example - creating repeating timers
• The setInterval() example - creating repeating timers
• Simple stopwatch made with JavaScript
• Simple JavaScript form evaluation with email check
• Comparing and sorting multidimensional arrays
• Example of simple drag-and-drop events