How JavaScript Works

July 14th, 2010 · 18 Comments ·

Just a quick presentation I have done on JavaScript.

video:

slides:

Tags: Uncategorized

18 responses so far ↓

  • Mohamed Mansour // Jul 14, 2010 at 8:30 pm

    Misko, you present pretty well! Thank you!

  • Pedro Newsletter 15.07.2010 « Pragmatic Programmer Issues – pietrowski.info // Jul 16, 2010 at 1:48 pm

    [...] Misko Havery JavaScript presentation. [...]

  • ed // Jul 16, 2010 at 3:28 pm

    i think you glanced over the topic but didn’t go into it. but can you explain what are the side effects of declaring

    Something = function() {
    this.someProperty = ‘test’

    Something.prototype.someFunction = function() {
    //do something
    }
    }

    vs.

    Something = function() {
    this.someProperty = ‘test’
    }

    Something.prototype.someFunction = function() {
    //do something
    }

  • misko // Jul 16, 2010 at 3:32 pm

    @ed,
    Setting the prototype in the constructor is not a good idea, as you are redefining the class methods on every construction. I don’t think I ever said that. So the second form is the approriate form.

  • paul // Jul 18, 2010 at 7:06 pm

    very nice, enjoyed this a lot and it’s really refreshing to see a talk that gets down to interesting differences and pieces of the language, instead of just covering syntax.

    I know you are a big eclipse fan for java dev, are you using mostly browser windows for js dev or another setup?

  • misko // Jul 18, 2010 at 7:41 pm

    @paul

    I use jstestdriver for all of my development.
    http://code.google.com/p/js-test-driver/

  • gropapa // Jul 22, 2010 at 5:46 am

    Nice video as usal!
    May i point out that actionscript works almost the same about closures, apply() and call()
    __proto__ & prototype existed with as2 but are not available anymore (thank god btw)

  • Indrit Selimi // Jul 30, 2010 at 1:05 am

    Hi Misko,

    I want to thank you for all these beautiful presentations! Keep going.

    Indrit

  • Krishna // Aug 1, 2010 at 1:09 am

    Just mind-blowing presentation. You ran through the idiosyncrasies in the language. Writing the language in the functional way feels more natural, you have dealt OO developer perspective of approaching the language which is very appropriate as they are lot of OO folks jumping in to the language with OO approach in mind. Explanation on differences between js and browser heaps were thought provoking.

    Reference section citing some of the recent developments makes the presentation more complete.
    Curious to know if you have read the book pro javascript design patterns by justina diaz and ross harmes.

  • misko // Aug 1, 2010 at 7:49 am

    @Krisna,

    thanks for your kind words. believe it or not I have never read any JavaScript book.

  • Aj // May 18, 2011 at 11:13 am

    function Hero() { }

    var hero = new Hero();
    console.log(hero.constructor); //Hero()
    console.log(hero.constructor.prototype); // Object{}
    —————————————————
    hero.constructor === hero.constructor.prototype.constructor; //true

    Misko can you explain how the last line evaluated to true?

  • misko // May 18, 2011 at 12:43 pm

    @Aj

    since hero.constructor == Hero then
    hero.constructor === hero.constructor.prototype.constructor becomes Hero === Hero.prototype.constructor which is true

    A function automatically has a prototype property.

    So the real question is why is this true

    hero.constructor === Hero.prototype.constructor

    that is because
    hero.__proto__ === Hero.prototype

    Hero.prototype.hasProperty(‘constructor’) == true
    Hero.prototype.constructor == Hero
    hero.constructor == Hero // inherited not actually on hero
    hero.hasProperty(‘constructor’) == false;

    So the constructor property is inherited from the hero.__proto__ which is the same as the Hero.prototype

  • Matej // Jul 22, 2011 at 3:51 am

    Hello Misko,

    great presentation!
    I have a question about Ajax calls. What actually happens with JS exection when Ajax call is invoked?

    I’m asking this because I have next problem. When I call function playItem() it normally executes – creates HTML5 video tag and starts to play (function playLiveFlowplayer() createys HTML5 video tag on iPad, on PC it creates Flash player).

    function playItem()
    {
    var playerArea = $(‘#playerArea’);
    var fpId = getFlowplayerId();
    playerArea.empty();

    playerArea.append(createQualityChooserHTML()+”);
    clipProperties.url = ‘http://192.168.100.107:1935/ia/live/playlist.m3u8′;
    playLiveFlowplayer(fpId, getWowzaUrl(‘ia’), ”, ”, true, true);
    }

    But you can see that url is hardcoded – it has to be assigned by ajax call. So here is what I did:
    function playItem()
    {
    $.ajax({
    url : ‘playVODServlet’,
    type : ‘GET’,
    data : JSON.stringify(playItemParams),
    timeout : 5000,
    dataType : “json”,
    error : function(xhr, ajaxOptions, thrownError)
    {
    console.error(“Error”);
    },
    success : function(searchResult)
    {
    var playerArea = $(‘#playerArea’);
    var fpId = getFlowplayerId();
    playerArea.empty();

    playerArea.append(createQualityChooserHTML()+”);
    clipProperties.url = searchResult.assetId;
    playLiveFlowplayer(fpId, getWowzaUrl(‘ia’), ”, ”, true, true);

    }
    });

    But now autostart doesn’t work. Do you maybe know why?

    Is there any good presentation about Ajax calls? And one more question: if I set interval to 1000 ms if I measure with Date() I get that interval has 998 (or similar) ms of time delay and not 1000 (or more). Can you explain why?

    best Matej

  • Matej // Nov 17, 2011 at 11:37 pm

    Hello,

    please discard my previous post – I found out what is wrong. It is not JavaScript, it is iPad which has samoe limitations.

    regards Matej

  • sunil // Feb 20, 2012 at 9:59 am

    More informative.Thanks

  • saulukas // Apr 3, 2012 at 1:18 am

    Really nice presentation: very straight to the point for Java developers like me.

  • JavaPins // Aug 7, 2012 at 4:00 am

    How JavaScript Works…

    Thank you for submitting this cool story – Trackback from JavaPins…

  • Mani // Mar 24, 2013 at 11:03 pm

    Hi Misko,

    Very good info indeed. Can you enable downloading the presentation in PDF format. It is not working

    Thanks,
    Mani