• Like
All of javascript
Upcoming SlideShare
Loading in...5
×

All of javascript

  • 2,033 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,033
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
29
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. All of Javascript
    George Mauer
    Rate Me On SpeakerRate
    http://tinyurl.com/0811-brdnug
  • 2. Owner of Humble Pi Consulting
    Current senior developer at Surge
    Former Senior Software Developer at EPS Software
    Member - VirtualBrownBag, VirtualAltNet, gnocode, PhpNOLA, RubyBayou
    Improv and sketch Comedy with www.NolaComedy.com
    http://georgemauer.net/blog
    @togakangaroo
    gmauer@gmail.com
    About Me
  • 3. Join Us For the Virtual Brown Bag
    12:00 PM CST Thursdays on Livemeeting
    www.virtualbrownbag.com
    Twitter: @virtualbrownbag
  • 4. Javascript is….
    Actually called ECMAScript
    Why Javascript?
    Most popular language
    Lightweight conceptually
    It will make your C# a lot better
    All the cool kids are doing it
  • 5. I want it!
    You got it…in your browser
    Use developer add-ons
    Chrome (Ctrl+Shift+J)
    IE (F12)
    Firefox
    Web Development Helper
    Firebug
    Enable Console and we’re interactive
  • 6. In the browser Javascript interacts with the Document Object Model
    Browser’s interpretation of HTML
    I wanna…use it?
  • 7. Your script in the page
    <script> tag
    Inline
    Or Link
    Another HTTP request is made and the script file is downloaded
    Cached
    Order and download timing matters
    Words!
    Minification
    Bundling
    CDNs
    Global scope
    You have to be careful of the source
    For now let’s use console.log(…)
  • 8. Syntax – Javascript is NOT Java
    No type declaration
    varsomeInt = 123
    console.log(someInt)
    Strings use “ or ‘
    Yes, there are
    exceptions and try…catch blocks
    do…while loops
    if and switch statements
    No, we will not talk about them
    Except the for loop
    There is no function to evaluate strings
    There is nothing to: eval(“alert(‘javascript!’)”);
    (There totally is, but shhh…)
    Semi-colons are optional…ish
  • 9. Control Structures
    Yes, there are
    exceptions and try…catch blocks
    do…while loops
    if and switch statements
    No, we will not talk about them
    Except the for loop
    There is no function to
    varsomeString = “alert(‘javascript!’)”;eval(someString);
    (There totally is, but shhh…)
    Semi-colons are optional…ish
  • 10. Concept #1 – Objects as Hashes
    No such thing as classes, just objects
    So there’s just anonymous objects
    Object Literal:
    Comma-separated, Colon denoted hash
    Trailing commas not allowed
    Nothing is immutable
    You can add properties
    Functions too!
    var person = {
    name: "Brian May",
    occupation: "Mucisian",
    who: function() {
    console.log(this.name+": I used to be in Queen")
    }
    };
    person.phD = "Astronomy";
    person.playMusic = function() {
    console.log("Is this the real life?");
    }
  • 11. Concept #1 – Objects as Hashes
    Objects ARE Hashes/Dictionaries
    myObject.propertyName == myObject[“propertyName”]
    Use console.dir() to explore objects
    Arrays
    Comma separated, Square brackets
    Elements in array can be of any type
    Arrays are objects
  • 12. Functions
    Use the function keyword
    No type information on parameters
    All functions return something (though it might be undefined)
    When invoking parameters are always optional
    Do you care?
    function youLike(name) {
    if(typeof name === 'undefined') {
    console.error("I don’t know who to like");
    return;
    }
    return 'I like ' + name;
    }
    console.log(youLike('fred'))
    // I like fred
    console.log(youLike())// I don’t know who to like
    // undefined
  • 13. Concept #2 – First Class Functions
    Functions are objects
    Can be stored in variables
    Or parameters to other functions
    Functions can have properties! They are just objects that can be invoked.
    So how are they not objects?
    Functions are invokable
    That’s it (for now)
  • 14. Function Closures
    Similar to lambdas in LINQ
    Great for helper functions
    It works exactly how you instinctually think it should
    Nest as many as you want
    Not visible outside of functions
    Anonymous functions can be assigned to variables
    vartellHistory = function () {
    var who;
    function warBrokeOut() {
    console.log('war broke out');
    console.log('lots of '+who+' died');
    }
    who = 'Cavemen';
    console.log(who+' invented axes');
    warBrokeOut();
    who = 'Babylonians';
    console.log(who+' invented laws');
    warBrokeOut();
    who = 'Greeks';
    console.log( who+' invented democracy');
    warBrokeOut();
    warBrokeOut();
    }
  • 15. Concept #3 – Loose Typing
    Really there are types
    Strings, Integers, floats
    But you can write whatever you want
    JS has it covered: 99% of the time it just works
  • 16. Concept #3 – Loose Typing
    Loose means coercions on the spot
    This can get wonky
    1+2+"3" == "33“
    "1"+2+3 == "33“
    2==false;
    === operator will prevent coercion and is recommend
    It’s weird but if you know what you’re doing…
  • 17. Concept #4 – Closures
    Addresses one of the biggest problems – global scope
    Functions can be nested inside each other
    Scope works exactly as you instinctively think it would
  • 18. Concept #4 – Closures
    Self-executing functions solve global scope issue
    varsomeFunc = function() {
    //stuff
    }
    someFunc();
    //shorten to
    (function() {
    //stuff
    })
  • 19. Public? Private? Static?We got you
    Concept #4 – Closures
    Lots of variations on this module pattern
  • 20. Concept #5 – Prototypes
    Javascript is object-oriented and has no classes!
    Prototype inheritance
    Simpler – each object has a prototype object
    Flexible – can mimic class inheritance and more
    Remember: Every object is a hash
    Plus a [[prototype]] attribute (revealed in some browsers by the __proto__ property)
    Q: Do you have a cupOfSugar?
    Yes I do (object has cupOfSugar in the hash)
    No I don’t but let me ask Peter (object does not but Peter is the [[prototype]])
    No I don’t (object does not and [[prototype]] is null)
    Can be used to emulate Class Inheritance
    Enables duck-typing, class-wide dynamicism, more!
    I recommend a style where you do not use this often
  • 21. Concept #5 – Prototypes: new
    Javascript has a ‘new’ keyword
    Very different from C# new
    You don’t really need to use ‘new’ for OO in Javascript
    What does ‘new do’?
    All functions have a not null prototype property
    creates a function with the [[prototype]] set to the constructor function’s prototype property
    You can enforce ‘new’
    Anti-intuitively works on functions but not objects
    Newer versions of Javascript (> 1.8.5) deprecate ‘new’ for Object.create(withPrototype)
    Constructor functions denoted via convention.
    Capitalize constructor functions
    camelCase non-constructor functions
  • 22. What is JSON?
    A subset of Javascript for transporting data
    Functionally equivalent to XML
    But way more succinct
    Lingua franca for ajax data-exchange
    Twitter.com – look at the dev tools network tab
    JSON is parsed with JSON parser, not eval’ed!
  • 23. Cross-Domain Ajax
    The probleM
    I go to amazon.com and log in
    My browser stores information (cookies) to identify me to Amazon
    I then go to evilpage.com
    Uses ajax to contact amazon.com
    My browser thinking the amazon session is still on sends my Amazon
    Amazon sends back secret information to evilpage.com!
  • 24. Same Origin Policy
    Browsers limit your ability to request resources across domains
    In general you can request and use across domains
    Display images
    Run scripts
    Display iframe
    You cannot have programmatic access to these resources
    Analyze images from other domains in JS
    Get arbitrary scripts as a string
    Inspect cross-domain iframe’s DOM
    Resources for understanding:
    Eric Law on the policy
    Phil Haackon a simple exploit with this
  • 25. Cross-Domain Solutions
    Display data from other domains in iframes
    Cannot use that data
    Do all queries to other domains server side
    Can much better control caching
    Protected better against format changes
    Takes up your bandwith
    JSONP
    Service returns and executes:
    Cross-domain script execution is ok
    Assumes you have a global method called myMethod
    Evaluated, not parsed like JSON
    Dangerous – if the site is compromised it can inject any script!
    Always think twice when sending secure data!
    myMethod({name: ‘George’})
  • 26. Odds and Ends – Jasmine
    Testing is even more important in dynamic languages
    No compiler to catch errors
    Easy to screw up global state
    Jasmine is a lightweight testing framework
    Based on ruby’s rspec
    Really simple and easy to learn
    Sample specs from gim.ShannonGame
  • 27. Odds and Ends – Coffeescript
    Lightweight Javascript compiler that removes the suck
    Gets rid of the function keyword
    Significant whitespace and no need for parens
    Postfix conditions (number = 42 if answer== true)
    Splats and object decomposition
    Comprehensions
    Easier inheritance setups
    Try it out
    Reverse compiler is a great learning tool
    Heavily influencing the future of Javascript (Harmony)
  • 28. Why Libraries?
    Mismatches in browser implementations
    The standard DOM interface is awful
    Internet Explorer <8 sucks
    Unforeseen standards adopted (ie. CSS)
    Standardize these away
    jQuery, prototype, mootools, ext-js, yui, others
    Jsfiddle.net - Try them out
  • 29. Some Resources
    Douglas Crockford’sJavaScript the Good Parts
    Video
    Mozilla Developer Center – by far the best documentation
    When searching for javascript help, add on “MDC”
    Introduction to javascript from MDC
    Javascript OO
    Javascript Garden
    Fascinating Elegant Code beginner series
    Hidden Features of Javascript on StackOverflow
    jsfiddle.net – In-browser js prototyping sandbox complete with syntax highlighting, formatting, javascript libraries inclusion, and code pasting for sharing
    Google Closure – how not to write javascript
    The console object API
    JSLint – Douglas Crockford’s syntax checker.
    Best explanation of the new keyword.
    Paul Irish Learns from jQuery source, and more
    jQuery API Reference
    Rate Me on SpeakerRate:
    http://tinyurl.com/0811-brdnug
    www.virtualbrownbag.com
  • 30.
  • 31. That Web 2.0 thing? Yeah, that.
    Let’s talk about AJAX
  • 32. HTTP Model
    Problems
    Refresh is ugly
    Unnecessary bandwith
    The operation is user triggered
    Solution
    Use javascript to fetch data and update the page when it is returned
    jQuery has some great helpers for this. Example
  • 33. The Global Scope
    You don’t have to use var
    If you don’t, assignment bubbles up like you would think
    All the way to the global window object!
    So always use var
    Isolate yourself from global scope with self-executing functions
    Explanation of variables, properties, scopes
    function doStuff() {
    varfirstName = 'Fred';
    function changeName() {
    firstName = 'Jim';
    lastName = 'Halpern';
    }
    changeName();
    }
    doStuff();
    firstName; // undefined
    lastName; // Halpern – huh?
    window.lastName; // Halpern – uh oh!
    (function() {
    …doWhatever…
    })();
  • 34. More Javascript - Prototypes
    Javascript is object-oriented and has no classes!
    Prototype inheritance
    Simpler – each object has a prototype object
    Flexible – can mimic class inheritance and more
    Remember: Every object is a hash
    Plus a [[prototype]] attribute (revealed in some browsers by the __proto__ property)
    Q: Do you have a cupOfSugar?
    Yes I do (object has cupOfSugar in the hash)
    No I don’t but let me ask Peter (object does not but Peter is the [[prototype]])
    No I don’t (object does not and [[prototype]] is null)
    Can be used to emulate Class Inheritance
    Enables duck-typing, class-wide dynamicism, more!
  • 35. What’s new?
    Javascript has a ‘new’ keywoad
    But no traditional inheritance
    You don’t really need to use ‘new’ for OO in Javascript
    What does ‘new do’?
    All functions have a not null prototype property
    creates a function with the [[prototype]] set to the constructor function’s prototype property
    You can enforce ‘new’
    Anti-intuitively works on functions but not objects
    Newer versions of Javascript (> 1.8.5) deprecate ‘new’ for Object.create(withPrototype)
    Constructor functions denoted via convention.
    Capitalize constructor functions
    camelCase non-constructor functions
    function createPerson(name, age) {
    return {
    name: name,
    age: age,
    toString: function() { return this.name + " is " + this.age + " years old“; }
    }
    }
    var bob= createPerson("bob", 39);
    varsal = createPerson("sal", 22);
    -------------------------------------------------------------
    var Cat = function(catName) {
    this.catName = catName;
    };
    Cat.prototype.meow = function() {
    console.log(this.catName+" says meow");
    }
    var mittens = new Cat("Mittens");
    var whiskers = new Cat("Whiskers");
  • 36. What’s this?
    Javascript has the ‘this’ keyword
    Use it to refer to the current scope / context
    Sort of
    Lots of caveats
    It usually works how you think but double check
    Can also be substituted with function’s call() or apply() methods
    Can be useful for method reuse
  • 37. Odds and Ends – RegEx
    Traditionally more important in dynamic languages
    Two ways to create
    var r1 = /^a+./;
    var r2 = new RegEx("^a+.");
    r1.exec(str); // Returns array of matches
    r1.test(str); // Returns true if there is a match
    str.match(r1); //Returns an array of Matches
    str.search(r1); //Returns idx if there is a match or -1
    str.replace(r1); //Returns string with regex replaced
    str.split(r1); //Returns an array of substrings
  • 38. Odds and Ends – XSS
    Cross Site Scripting – someone causes their Javascript to run on your site for other users
    Dangerous for: Comments / forums / twitter feeds where you can post things other people can see
    Search areas or GET urls where long user submissions can be embedded in a link
    Examples of simple XSS attacks
    How to prevent it:
    Ensure all user input reflected back is Html encoded
    Don’t place anything from GET requests on the page
    Be aware and think!
  • 39. Javascript Weirdness - Hoisting
    Variable declarations are moved to the top of the scope
    Function declarations are created and declared in the same step
    At the top of the scope
    Function assignments are similar to variable declarations
    Consider declaring all variables in scope with one var statement
    var bob, joe, jill;
    var num = 56;
    function calc() {
    console.log(num);
    var num = 12;
    console.log(num);
    }
    function calc_isReally() {
    var num;
    console.log(num);
    num = 12;
    console.log(num);
    }
  • 40. Javascript Weirdness
    for..in loops through all keys on hash / properties on object
    Including those in the prototype chain which isn’t very helpful
    Use hasOwnProperty() if this is not desired behavior
    Don’t use this to enumerate Arrays
    for loop – similar to for loop in c# or c++
    Use it to loop through arrays
    But remember Array.length is a calculated property!
    for(vari=0; i<arr.length; ++i) { }  Bad!
    for(vari=0, len=arr.length; i<len; ++i) { }  OK
  • 41. Javascript Weirdness
    String Duality
    Native and object representations of strings
    typeof comparison won’t always work
    Do you really need to check type?
    Really?
    parseInt(), parseFloat() are not so simple
    What should parseInt("010") return?
    Read the MDC docs when using built-in functions (there aren’t that many)