Javascript Libraries: Prototype

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    Big Bang Technology, June 2008, Max Cameron, iPhone, Web Dev, Flex Development, Bigbangtechnology.com







    abstract away inconsitencies in browser.
    each does it different
    functionally equivalent
    small differences in edge cases

    interesting history.
    one of the first modern JavaScript frameworks
    designed to mimic the Ruby in the browser.

    Interactive sophisticated programs in the browser.
    Typically without page refreshes.




    Most of those accomplishments go to jQuery, and I'd highly recommend using it for most simple JavaScript implementations.



    * visual representation of the class instances
    * events are bound
    * loaded via ajax from a json feed


    Creating a class instance with optional parameters
    Inserting custom instances into the DOM
    Accessing the public API of a class instance
    Class instances maintain state regardless of whether they are in the DOM or not.



    explain the html structure of the dom nodes


    Object.extend overrides default options with whatever is passed into the constructor
    If something isn’t passed in, the default value is used


    you can take any DOM element and use the .insert method on it to insert custom classes as long as they implement toElement as an instance method.

    Element is a class built just like Ninja. It takes two arguments, the tag name, and a hash of attribute values that you’d like to see on the element.
    Update is an Element method that lets you add elements or text as children


    if you don’t use bind on event listeners. “this” references the element that dispatched the event.
    but we want to reference the class instance to access properties inside it.
    interpolate makes adding variables to strings a lot easier

    custom events need to be bound to dom elements.
    use custom events for public methods that change the visual appearance of the class


    iterate through the JSON to create new class instances for each record found.
    typically would be database driven.
    don’t forget to store a reference to the class instance or JavaScript will garbage collect it

    Notice how the JSON feed is styled with the same key values as our class constructor options.


    1 Favorite

    Javascript Libraries: Prototype - Presentation Transcript

    1. Thursday, February 19, 2009
    2. Agenda • General Framework Overview • What Prototype Isn’t • The Ninja Database • Questions? Thursday, February 19, 2009
    3. jQuery Awesome. Thursday, February 19, 2009
    4. Prototype Awesome. Thursday, February 19, 2009
    5. Frameworks Awesome. Thursday, February 19, 2009
    6. Javascript Awesome. Thursday, February 19, 2009
    7. Browsers? Thursday, February 19, 2009
    8. Prototype == jQuery Come on, they all basically do the same thing. Thursday, February 19, 2009
    9. Ruby in the Browser? Not quite. Thursday, February 19, 2009
    10. AJAX The umbrella term Thursday, February 19, 2009
    11. So why Prototype? Thursday, February 19, 2009
    12. Light as a … NO. Thursday, February 19, 2009
    13. Quick as a … NO. Thursday, February 19, 2009
    14. jQuery is Champ. Thursday, February 19, 2009
    15. Prototype Has Muscle. • Class Creation • Insertion • DOM Element Creation • Events • Custom Events • Scope Binding • AJAX Thursday, February 19, 2009
    16. The Ninja Database Thursday, February 19, 2009
    17. Thursday, February 19, 2009
    18. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
    19. Thursday, February 19, 2009
    20. Controlling Class Instance via Firebug • Creating a class instance with optional parameters • Inserting custom instances into the DOM • Accessing the public API of a class instance • Class instances maintain state Thursday, February 19, 2009
    21. But what does the DOM look like? Thursday, February 19, 2009
    22. Thursday, February 19, 2009
    23. How is this elegance possible? Thursday, February 19, 2009
    24. Constructors Thursday, February 19, 2009
    25. Overwrite Options During Thursday, February 19, 2009
    26. Insert Anything. Element#insert(anything); Thursday, February 19, 2009
    27. Programmatically Create Elements Thursday, February 19, 2009
    28. Events Use the DOM as a notification system for your class. Thursday, February 19, 2009
    29. Standard DOM Events Thursday, February 19, 2009
    30. Standard DOM Events Thursday, February 19, 2009
    31. Standard DOM Events Function#bind(this) Your best friend when using classes. Allows referencing instance variables in an event listener. Thursday, February 19, 2009
    32. Custom Events Too Thursday, February 19, 2009
    33. Custom Events Too Thursday, February 19, 2009
    34. Custom Events Too Thursday, February 19, 2009
    35. Custom Events Too Thursday, February 19, 2009
    36. Custom Events Too Thursday, February 19, 2009
    37. AJAX Everybody’s doing it. Thursday, February 19, 2009
    38. Thursday, February 19, 2009
    39. Evaluate JSON Thursday, February 19, 2009
    40. Questions? • http://github.com/camwest/ refresh-prototype-talk • http://bigbangtechnology.com/blog Thursday, February 19, 2009
    SlideShare Zeitgeist 2009

    + Refresh EventsRefresh Events Nominate

    custom

    748 views, 1 favs, 0 embeds more stats

    Cameron West (http://www.bigbangtechnology.com/) ta more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 748
      • 748 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 1
    • Downloads 10
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    -->
    What's New

    © 2009 SlideShare Inc. All rights reserved.