Your SlideShare is downloading. ×
JavaScript - Introduction
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

JavaScript - Introduction

993
views

Published on

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
993
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
14
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Everything You Always Wanted To Know About … JavaScript
    Tomasz Masternak
  • 2. Why JavaScript?
    Widely used,
    Web,
    Phones,
    Tablets,
    TV Sets,

    No choice,
    It is here and is going to stay,
    At first seems like C#,
    It is not!
  • 3. Agenda
    Language,
    Technology,
    Libraries, Tools,
    Additional Resources,
  • 4. Language
    Scoping – static and dynamic,
    Methods as first class citizens,
    Differential inheritance,
  • 5. Types
    Simple,
    number, string, boolean, null, undefined,
    They have methods like objects,
    Immutable,
    Objects,
    function, array, regular-expression, object literals,
    Bag of things – hashtables,
    Never copied – always passed as reference,
  • 6. Objects
    Literals,
    { <name1>: <value1>, <name2>: <value2>, …}
    Mutations,
    Property: modification, creation, deletion,
    Hidden link to Prototype,
    One level up in inheritance chain,
    It is used during member retrieval,
    Literals link to Object.prototype,
    Reflection,
    for .. in,
    hasOwnProperty function,
  • 7. Type augmentation
    Every type (simple or object) has a prototype,
    [Object|Function|Array…].prototype,
    Instance has a hidden prototype link,
    Somehow similar to extensions methods,
    More on that latter,
    ObjectA
    ObjectB
    ObjectC
  • 8. Functions
    Functions are objects,
    Bag of properties,
    Hidden prototype link - Function.prototype,
    Hidden content – function body,
    Hidden context – closure,
    Can be invoked,
    Function literals – lambdas in C#
    4 invocation patterns,
    Differ function context ,
  • 9. Invocation patterns
    4 types,
    Method invocation,
    Function invocation,
    Constructor invocation,
    Apply invocation,
    One function can be invoked by each pattern,
    Pattern defines this reference binding.
  • 10. Functions
    Reflection,
    arguments – implicit argument,
    Return,
    value, undefined, this – for constructor pattern,
    Exceptions,
    try – catch – finally,
    single catch,
    one can throw any object
  • 11. Scope
    Defines visibility and lifetime of the variables,
    JavaScript vs C#,
    At first seems quite similar – identical,
    … but it is not ,
    Variable definition best practices,
    Define all variables with var,
    Put all definitions at the top,
  • 12. Scope and Closure
    Function has access to variables declared outer function,
    this and arguments are exceptions,
    What if inner function has longer lifetime?
    A closure is created,
    That gives interesting possibilities ,
    access privileges – module pattern,
    variable sharing – also source of confusion,
    this – that pattern
  • 13. Inheritance
    No classes only object instances,
    a.k.a. differential inheritance,
    Prototype based,
  • 14. Inheritance
    Syntax,
    Vague – pretending it is class based,
    Constructor function,
    Object.prototype
    {surname: }
    F
    prototype
    this
    { }
  • 15. Inheritance
    Another class in inheritance chain,
    It could not be more intuitive ,
    Problems,
    No private members,
    No super reference,
    Forget about new and a global variable is created
  • 16. Inheritance
    Can be done better,
    Type augmentation, Functional, Mix-ins
    Support from frameworks $.extend, Class.create,
    Usually try to pretend it is normal OOP,
    It is worth knowing the internals,
  • 17. Web
    WWW = HTML + CSS + JavaScript,
    Interactive part of Web pages,
    I never heard about Node.js so don’t ask ,
    Fetch
    Parse
    Flow
    Paint
    Url
    Cache
    Tree
    Display List
    Pixels
  • 18. Loading
    Load and run delivery,
    <script> - download and run JavaScript content,
    Avoid code inlining,
    Page could be half-loaded,
    Scripts are downloaded sequentially,
    Asynchronous load possible – tag inlining,
    Loading sequence best practice,
    Content,
    Styling,
    Interactivity,
  • 19. Linking
    Linking,
    Implicit global object,
    It should be treated as namespace!,
    Possible name clashes otherwise,
    Best practices,
    No global objects,
    “Long enough” namespaces to avoid problems,
    Order matters esp. when using 3rd party libraries,
    Tools support for the rescue (tools section)
  • 20. Threading
    Interactivity loop,
    Single thread,
    Flow
    Paint
    Script
    Event
  • 25. Communication
    XmlHttpRequest – Http requests,
    Problem with format,
    Problem with Same-Origin-Policy,
    Site A
    GET
    Browser
    GET
    JS Code
    Site B
    GET
  • 26. Communication
    JSONP,
    Script tag added dynamically,
    Query string holds callback function name,
    Good jQuery support,
    Hack used by most of big companies,
    Cross-Site Resource Sharing,
    W3C spec. – supported by most modern browsers,
    WCF services – easy support for both,
    Custom behavior on service level ,
  • 27. Security
    Minification/obsfuscation
    Great but ... ,
    Once script is downloaded,
    Client can do anything he wants with it,
    BingMap approach,
    Script can do anything it wants ,
    All sorts of attacks – XSS, XSRF …
  • 28. Libraries
    jQuery,
    jQuery.BBQ
    jQuery.UI,
    jQuery.Templates,
    jQuery.Addresses,
    Amplify.js
    Modernizr.js
    Knockout.js
  • 29. Tools
    Knapsack.js
    JsLint
    Reshaper 6
  • 30. Further reading
    Project Silk
    http://silk.codeplex.com/
    Windows 8 Metro UI
    http://www.buildwindows.com/
    Knockout.js
    http://learn.knockoutjs.com/#/?tutorial=intro