Javascript more concepts

Javascript engines:
    I hope you have read my post about browser engines earlier. Modern browsers have separate javascript engine(for rendering Javascript)  and rendering engine (for rendering html content).
Latest Javascript engines are,

• Carakan -- used with Presto , developed by Opera for its browser
• V8 -- used with webkit in Chrome, developed by Google
• Nitro -- used with webkit in Safari, developed by webkit developers and apple
• SpiderMonkey --used with Gecko in Firefox developed by Mozilla

IE has always lagged behind in its performance when compared with other browsers. It had no separate JS engine before release of IE9 which uses a JS engine called Chakra.
It is to be noted that each engine’s implementation varies and it directly affects the speed and performance of the browser. Read more about browser wars. They are very interesting.

Objects in Javascript:
    You might have used arrays,strings,date in Javascript. Those are built in javascript objects. Javascript supports object oriented programming. But it is somewhat different from other object oriented programming languages. Here i will explain the reason with a simple program, see the picture below for code.

Code demonstrating basic object usage

• The function Human is like a class
• Parameters passed to the function are like parameters to constructors.
• name,age,sex are data members of the class
• show is a method of the class

Note:

• Human is an object and human1, human2 etc are instances of the object
• In the above example we can declare an instance of an object even without specifying parameters. For example, human3=new Human(); Now name,age,sex will be undefined for this instance.
• You need to associate a method to an object (Here look at the code, this.show=show )
• You can access datamembers and menmber functions using dot operator (for example, human1.age=40 )
• The keyword “this” refers to the owner of the particular object/function.

Timers:
    Events can be executed based on timing in javascript. This is a core functionality of javascript.
we have two functions helping us out,

1. setInterval(function,time in milliseconds)
2. setTimeout(function,time in milliseconds)

first one executes the given function after every time interval you have given.
second one executes the given function only ONCE after the time interval you have specified.
Stopping a timed event is pretty simple.
    clearInterval(timerVariable)
    clearTimeout(timerVariable)
timerVariable is the variable in which return value of setInterval or setTimeout is stored.
For example,

myTimer=setInterval(function{ alert(“hello”);} , 1000); //alerts ‘hello’ every second

clearInterval(myTimer); //stops alerting

JS libraries:
First i will list some popular JS libraries

• jquery (the most popular one !!)
• prototype
• script.aculo.us
• MooTools
• underscore.js
• backbone.js

A JS library has collection of functions (written in javascript.. understand that the libraries are nothing but JS files!!) which help you achieve some complex task(when you code it yourself in JS..) easily.

jquery has many functions that allow you to decorate your page or make it more fancy
backbone.js allows you to implement mvc architecture in large javascript files
backbone.js uses underscore.js
underscore.js has many functions which allows you to write functional code in JS very easily.

Usage of these libraries should be avoided whenever possible, because they make your code slow.. you can’t tweak little things and i personally think it makes you feel that you are not in control of your own code.
Always remember that native javascript functions can achieve whatever you have done using some JS library.
See you in next blog!