Javascript, as you may know, has not changed very much since it first appeared back in the 90′s. Over the past couple of years, however, many people have been pushing to give the language an overhaul. It could take another couple of years before these new additions are in place in all major browsers (who knows), but things WILL change – and hopefully for the better. The next version of JavaScript should be JavaScript 2.

JavaScript started off pretty popular, it kicked Vbscript out of the game (not long after Microsoft introduced it). But after a while it also gained a lot of critics (all languages do!). One reason (in my view) is because many people coded poorly in JavaScript, and spat out horrible looking code. Another is because the Browser DOM API which JavaScript was used with was poor (it is still not great, but work is being done here too). JavaScript was the only real option available (and it still is). However, over the past few years, many serious programmers introduced new ways of using JavaScript – ways which are much more pretty, and powerful. In fact, these new ways have made it clearer what was actually missing from the language to start with, what was already there but overlooked by many, and what would make it better for the future.

The founder of JavaScript, Brendan Eich, still appears to be one of the major forces in the future of the Language. You can keep up-to-date by reading his blog over at weblogs.mozillazine.org/roadmap/.

Anyway, on to the main purposed of this post. I found an excellent Advanced JavaScript presentation which John Resig has made public (he actually presented this at a recent Web 2.0 expo, in New York). In my opinion, this presentation is first class.

The presentation aims to teach you how to understand the following code from the Prototype Library:

// The .bind method from Prototype.js 
Function.prototype.bind = function(){ 
  var fn = this, args = Array.prototype.slice.call(arguments), object = args.shift(); 
  return function(){ 
    return fn.apply(object, 
      args.concat(Array.prototype.slice.call(arguments))); 
  }; 
};

Have fun, I did!

Tags: , , , , ,

2 Comments on Advanced JavaScript Lessons for the 21st Century

  1. Stuart says:

    Enabling comments.

  2. lokendra kumar says:

    How I have done!……….This
    I have two Combo – One for Country and one for City
    On county combo i have called this function……..
    onchange=”CityListOnChange(this.value)
    function CreateXmlHttp()
    {

    try { XmlHttp = new ActiveXObject(‘Msxml2.XMLHTTP’); }
    catch (e)
    {
    try { XmlHttp = new ActiveXObject(‘Microsoft.XMLHTTP’); }
    catch (e2)
    {
    try { XmlHttp = new XMLHttpRequest(); }
    catch (e3) { xhr = false; }
    }
    }
    }

    function CityListOnChange(ID)
    {
    removeOptionLast();
    //debugger ;
    //var countryList = document.getElementById(“SlCity”);
    // var selectedCity = countryList.options[countryList.selectedIndex].value;
    var requestUrl = “Ajax.aspx” + “?SelectedCountry=” +ID ;
    // + encodeURIComponent(selectedCountry);
    // Ajax.aspx is the page from where i get the data by database
    CreateXmlHttp();
    if(XmlHttp)
    {
    //debugger;
    XmlHttp.onreadystatechange = HandleResponse;
    XmlHttp.open(“GET”, requestUrl, true);
    XmlHttp.send(null);
    }
    }

    function HandleResponse()
    {
    //debugger ;
    if(XmlHttp.readyState == 4)
    {
    if(XmlHttp.status == 200)
    {
    //
    var responseData = XmlHttp.responseXML;

    //responseData.childNodes[0].childNodes[0].childNodes.length
    // debugger ;
    //if(responseData !=null)
    if(responseData.childNodes.length >0)
    for ( i =0; i< responseData.childNodes[0].childNodes.length;i++)
    {
    var elOptNew = document.createElement(‘option’);
    elOptNew.value = responseData.childNodes[0].childNodes[i].childNodes[0].text;

    elOptNew.text = responseData.childNodes[0].childNodes[i].childNodes[1].text;
    var elSel = document.getElementById(‘SelCity’);
    elSel.options.add(elOptNew);
    }
    // ClearAndSetStateListItems(XmlHttp.responseXML.documentElement);
    }
    else
    {
    alert(“There was a problem retrieving data from the server.” );
    }
    }
    }

    //on Ajax.aspx — I have done this………..

    if(!IsPostBack )
    {

    if (Request["SelectedCountry"].ToString() == “IN”)
    {

    Response.Clear();
    string XMLString;
    //CountryStateXml countryStateXml = new CountryStateXml();
    // string statesString = countryStateXml.GetStatesXMLString(selectedCountry);
    XMLString = ds.GetXml();
    Response.Clear();
    Response.ContentType = “text/xml”;
    Response.Write(XMLString);
    Response.End();

    }
    else
    {
    //clears the response written into the buffer and end the response.
    Response.Clear();
    Response.End();
    }
    }

    //////////////////// Happy programing

Leave a Reply

*