Javascript , the new C .

Introduction
if there was one secret ingredient to getting on a track to a successful web- based roller coaster coding life ahead . It would be to "Learn http://en.wikipedia.org/wiki/JavaScript]Javascript " [/url].
In the years to come , expect Javascript to be the new C ,and the building blocks to building anything on the web . So no matter what your serverside framework - ruby on rails , python or .net . You need to know the javascript internals going on . Its no surprise why Mozilla 's firefox itself is a product that heavily depends on two langauges - C and javascript .

We are moving to a http://blogs.zdnet.com/Hinchcliffe/?p=8]browser based world [/url] . So ,if you do contemplate following a career on the web -either as a freelancer or as a professional ,i think there are hardly any areas that javascript is unworthy or not capable of handling .especialy for the ooops programmer

Things i love about the language include...
1. OOPS concepts galore
Many people say that there lies a very subtle line drawn between languages of fun vS languages of work . Lisp /Scheme ,python ,perl , ruby have for long been the fun to hack launguage gang . fortunately python and php has evolved away from the http://www.techenclave.com/forums/language-computer-hobbyists-hits-big-time-3372.html]hobbyist to a mainstream[/url] category. Enterprises usually look at sun & microsoft camps for more mainstream work environments (read java and .net ) ,apart from more native c++ .

2. Encouragement to Seperation of Behaviour from Implementation
Like in the example ive just hacked up above , we have a running protoype of what could easily scaled up to be large content delivery system . Or what most of us would otherwise like to call dynamic web sites - as opposed to http://en.wikipedia.org/wiki/Static_Web_page]static web pages[/url]. Most of this is accredited to javascripts powerful control over the Document object model ,or the DOM which represents the presentation of the html or xml file .

3.Ease of debugging , other tools
With the advent of extension and plugins like venkman , and off late firebug , jslint ,jsDocumentor ,and so on , are a boon for coders .

4. the big D in Dhtml
Being Dynamic . It is not uncommon to find entire pages being developed on the fly allowing contextual and highly interactive user experiences . everything can be done dynamically .with just one line of code to initiate,you can never emphasize enough how truly customized , cross resolution , cross browser , your application can be . which means the more versatile u want it ,the more reusable and scalable your initial design needs to be . in fact i believe when building any application with a heavy scent of js , the app itself can serve as a framework for further reusable modules ,and further enhancements . Part of the beauty in the language is that you can implement styles of other languages , or native algorithms like sort,or parsing,or storage, any way you like ,which of sort of made spiderman's "with great power comes great responsibility " seem like baby ceralac . Jokes apart, it truly is a versatile and mature langauge that has grown up from being a mere afterthought to one that inspires breakthrough design and innovative products.

Let me give a small example of simple OOPS examples in javascript
PHP:
/****** Class Declaration & Constructor ******/
function Class1(){
    //constructor
}
/******  Constants ******/
Class1.constant1='http://techenclave.com'; //string
Class1.constant1={url : 'http://techenclave.com';} //object accessable via ClassName.constant1.url

/******  Member Variables & functions declaration ******/
Class1.prototpye = {
    /* public member variables*/
     classname = 'Class1'  ,
     someNumber =1    ,
     body : document.body , /* //body tag of the html page */
  /* public member functions */
    getClassname : function() {
        return this.classname;
    }
}

Let me show how quick prototyping can be done if you take some time with your javascript early on .
PHP:
<html>
<head>
<script>
/**
  *@author bosky101 for techenclave
  *@description A simple demo of handling content in a web page
  */
function ContentHandler(){
     this.className= new String('ContentHandler');
     this.header = document.getElementById('divHeader');
     this.getClassName = function(){
             return this.className;
      }
      this.getContent = function(option){
           switch(option){
                   case  0 :{
                             return 'bye bye ';
                              break;
                    }
                    case 1 :{
                            return '<h1>Hello ,World</h1>';
                            break;
                     }
                    deafult :{
                            return this.className;
                     }
             }
      }
}

var myContentHandler ;// making the variable globally accessable
function init(){
      myContentHandler = new ContentHandler();//instantiation
      myContentHandler.header.innerHTML = myContentHandler.getContent(1);
}
</script>
</head>
<body onload='init();'>
<div id='divHeader' onclick='myContentHandler.getContent(0);'>Click me!</div>
</body>
</html>

So here,you see that making large scale applications with javascript is very much possible with some baic object oriented programming concepts knowledge. I suggest reading Douglas Crockford's (yahoo lead javascript architect) site and lectures ,as well as one of the earliest resources on the subject over at quirksmode

AJAX
The day javascript grew up was when the technology initially developed by Microsoft was finally put to use to dynamically update data and contents within a web page without leaving /refreshing the page .It stands for asynchronous javascript and XML . But bless the man who coined the word,thanks to whom lot more features from javascript were then brought to llight . Like DOM hacking, UI and usability capabilities in javascript ,etc that led to applications like Google Maps , and so on.

Today ,all sites that do not use ajax tend to significantly decrease the user experience ,and interactive nature than an AJAX application gives .
ajax-fig1_small.png

Resources
Listed below are some utilities that can make your javascript coding experience a truly productive one .I found this awesome resource for getting started .Here are some more :
0. FireFox - ummm. the web browser ,because of its rich and debugging friendly environment.
1. FirebugFirebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.
2. jsDoc - a useful tool to auto generate documentation for javascript based on comments.
3.a javascript library can be useful for being compatible to a wide range of browsers. Popular ones include YUI from Yahoo , the dojo Toolkit, prototype , moo ,and lots more listed nicely here and compared here .
4. top 10 developer extensionhttp://www.themoleskin.com/archives/10-firefox-extensions-for-web-development/ for firefox

To make things a little more interesting ,im going to build a totally web20 product right here no TE ,on demand and release the entire source code as well with a tutorial . Anyone willing to join in are welcome,just chip in with you a post .

Hail javascript ,and the brave new world .... :)
 
great read bosky ;)

recently got to try out the moofx library and absolutely awesome capability there on a light weight environment :D

come with a tut on ajax using oop javascript next ;)
 
Back
Top