Fundamental JavaScript:  The Language Presented by Brian Dukes
Where are we going? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li...
Feature Overview <ul><ul><li>1st Class Functions </li></ul></ul><ul><ul><li>Loose Typing </li></ul></ul><ul><ul><li>Dynami...
Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul>...
Syntax: Primitive Types <ul><ul><li>Number </li></ul></ul><ul><ul><ul><li>64-bit floating, &quot; double &quot; </li></ul>...
Syntax: Truthy & Falsy Values <ul><ul><li>Falsy values: </li></ul></ul><ul><ul><ul><li>false </li></ul></ul></ul><ul><ul><...
Syntax: Statements & Operators <ul><ul><li>var  </li></ul></ul><ul><ul><li>if </li></ul></ul><ul><ul><li>switch </li></ul>...
Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul>...
Objects: Literals <ul><ul><li>JSON (plus functions) </li></ul></ul><ul><ul><ul><li>Name/value pairs </li></ul></ul></ul><u...
Objects: Setting & Getting <ul><li>var flight = { </li></ul><ul><li>     airline: &quot;Oceanic&quot;, </li></ul><ul><li> ...
Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul>...
Functions: Definition <ul><ul><li>Functions are objects </li></ul></ul><ul><ul><ul><li>Functions have a prototype </li></u...
Functions: Closure <ul><ul><li>Functions have access to outer variables </li></ul></ul><ul><ul><li>this  &  arguments  are...
Functions: Scope <ul><ul><li>Does  not  have block scope </li></ul></ul><ul><ul><ul><li>Unlike every other language with C...
Functions: Callbacks <ul><ul><li>Functions can be passed to other functions  </li></ul></ul><ul><li>  </li></ul><ul><li>ma...
Functions: Module Pattern <ul><ul><li>Call an anonymous function after declaring it ( IIFE ) </li></ul></ul><ul><ul><li>Ke...
Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul>...
Inheritance: Pseudoclassical <ul><ul><li>new  operator </li></ul></ul><ul><ul><li>Function names are capitalized, by conve...
Inheritance: Prototype <ul><ul><li>All objects has a prototype property </li></ul></ul><ul><ul><li>When retrieving propert...
Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul>...
Miscellaneous: Arrays <ul><ul><li>Literal notation:  [true, 1, &quot;string&quot;, {}] </li></ul></ul><ul><ul><li>length  ...
Miscellaneous: Regular Expressions <ul><ul><li>Pattern Matching </li></ul></ul><ul><ul><li>Literal notation:  /pattern/opt...
Resources <ul><ul><li>JavaScript Weekly -  http://javascriptweekly.com/ </li></ul></ul><ul><ul><li>JSLint -  http://www.js...
Upcoming SlideShare
Loading in...5
×

JavaScript: The Language

2,858

Published on

An overview of the fundamental features of JavaScript, highlighting the unexpected and obscure features that make it behave different than other languages in the C family.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,858
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • for in enumerates all properties in prototype chain   + is for addition and concatenation (make sure both are numbers if you want addition) + and ! are also for coercion
  • Image Carousel example
  • vv            
  • JavaScript: The Language

    1. 1. Fundamental JavaScript: The Language Presented by Brian Dukes
    2. 2. Where are we going? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    3. 3. Feature Overview <ul><ul><li>1st Class Functions </li></ul></ul><ul><ul><li>Loose Typing </li></ul></ul><ul><ul><li>Dynamic Objects </li></ul></ul><ul><ul><li>Prototypal Inheritance </li></ul></ul><ul><ul><li>Global Variables </li></ul></ul>
    4. 4. Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    5. 5. Syntax: Primitive Types <ul><ul><li>Number </li></ul></ul><ul><ul><ul><li>64-bit floating, &quot; double &quot; </li></ul></ul></ul><ul><ul><li>String </li></ul></ul><ul><ul><ul><li>Surrounded by single or double quotes </li></ul></ul></ul><ul><ul><li>Boolean </li></ul></ul><ul><ul><ul><li>true or false </li></ul></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><ul><li>Key/value pairs </li></ul></ul></ul><ul><ul><li>Arrays </li></ul></ul><ul><ul><ul><li>Indexed collection </li></ul></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><ul><li>Callable code </li></ul></ul></ul>
    6. 6. Syntax: Truthy & Falsy Values <ul><ul><li>Falsy values: </li></ul></ul><ul><ul><ul><li>false </li></ul></ul></ul><ul><ul><ul><li>null </li></ul></ul></ul><ul><ul><ul><li>undefined </li></ul></ul></ul><ul><ul><ul><li>'' </li></ul></ul></ul><ul><ul><ul><li>0 </li></ul></ul></ul><ul><ul><ul><li>NaN </li></ul></ul></ul><ul><ul><li>Truthy values: </li></ul></ul><ul><ul><ul><li>Everything else </li></ul></ul></ul><ul><ul><ul><li>true , 'false' , {} </li></ul></ul></ul>
    7. 7. Syntax: Statements & Operators <ul><ul><li>var </li></ul></ul><ul><ul><li>if </li></ul></ul><ul><ul><li>switch </li></ul></ul><ul><ul><li>while </li></ul></ul><ul><ul><li>for </li></ul></ul><ul><ul><li>for in </li></ul></ul><ul><ul><li>do while </li></ul></ul><ul><ul><li>try </li></ul></ul><ul><ul><li>throw </li></ul></ul><ul><ul><li>return </li></ul></ul><ul><ul><li>break </li></ul></ul><ul><ul><li>with </li></ul></ul><ul><ul><li>ternary ( ? : ) </li></ul></ul><ul><ul><li>typeof </li></ul></ul><ul><ul><li>|| </li></ul></ul><ul><ul><li>&& </li></ul></ul><ul><ul><li>== & === </li></ul></ul><ul><ul><li>!= & !== </li></ul></ul><ul><ul><li>+ </li></ul></ul><ul><ul><li>! </li></ul></ul>
    8. 8. Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    9. 9. Objects: Literals <ul><ul><li>JSON (plus functions) </li></ul></ul><ul><ul><ul><li>Name/value pairs </li></ul></ul></ul><ul><ul><ul><li>Name is any string </li></ul></ul></ul><ul><ul><ul><ul><li>Quotes are optional for legal name </li></ul></ul></ul></ul><ul><ul><ul><li>Value can be any JavaScript value: </li></ul></ul></ul><ul><ul><ul><ul><li>Other objects </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Functions </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Arrays </li></ul></ul></ul></ul>
    10. 10. Objects: Setting & Getting <ul><li>var flight = { </li></ul><ul><li>    airline: &quot;Oceanic&quot;, </li></ul><ul><li>    number:  815 </li></ul><ul><li>}; </li></ul><ul><li>alert(flight.airline); </li></ul><ul><li>alert(flight.equipment); // undefined </li></ul><ul><li>flight.equipment.status // throw &quot;TypeError&quot; </li></ul><ul><li>flight.equipment = { </li></ul><ul><li>    model: 'Boeing 777' </li></ul><ul><li>}; </li></ul><ul><li>flight['flight-status'] = 'overdue'; </li></ul><ul><li>alert(flight[&quot;flight-status&quot;]); </li></ul>
    11. 11. Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    12. 12. Functions: Definition <ul><ul><li>Functions are objects </li></ul></ul><ul><ul><ul><li>Functions have a prototype </li></ul></ul></ul><ul><ul><ul><li>Functions can have properties </li></ul></ul></ul><ul><ul><ul><li>Functions can have methods </li></ul></ul></ul><ul><ul><ul><li>Functions can be passed as arguments to functions </li></ul></ul></ul><ul><ul><ul><li>Functions can be returned from functions </li></ul></ul></ul><ul><ul><li>Functions can be invoked </li></ul></ul>
    13. 13. Functions: Closure <ul><ul><li>Functions have access to outer variables </li></ul></ul><ul><ul><li>this & arguments are different for each function   </li></ul></ul><ul><li>var i; </li></ul><ul><li>for (i = 0; i < 10; i++) { </li></ul><ul><li>    setTimeout(function () { </li></ul><ul><li>        console.log(i*i); </li></ul><ul><li>    }, i); </li></ul><ul><li>} </li></ul><ul><li>  </li></ul>
    14. 14. Functions: Scope <ul><ul><li>Does not have block scope </li></ul></ul><ul><ul><ul><li>Unlike every other language with C style syntax </li></ul></ul></ul><ul><ul><li>Function scope </li></ul></ul><ul><li>function outer () { </li></ul><ul><li>    for (var i = 0; i < 10; i++) { </li></ul><ul><li>        var double = i+i; </li></ul><ul><li>        $link.click(function () {  </li></ul><ul><li>            alert(double)  </li></ul><ul><li>        }); </li></ul><ul><li>    } </li></ul><ul><li>}  </li></ul>
    15. 15. Functions: Callbacks <ul><ul><li>Functions can be passed to other functions </li></ul></ul><ul><li>  </li></ul><ul><li>makeAjaxCall(function (result) { </li></ul><ul><li>    alert(result); </li></ul><ul><li>});  </li></ul>
    16. 16. Functions: Module Pattern <ul><ul><li>Call an anonymous function after declaring it ( IIFE ) </li></ul></ul><ul><ul><li>Keeps inner values from being accessible outside of the function </li></ul></ul><ul><li>  </li></ul><ul><li>(function () { </li></ul><ul><li>     var x = 1; </li></ul><ul><li>}()); </li></ul>
    17. 17. Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    18. 18. Inheritance: Pseudoclassical <ul><ul><li>new operator </li></ul></ul><ul><ul><li>Function names are capitalized, by convention </li></ul></ul><ul><ul><li>Lots of downfalls </li></ul></ul>
    19. 19. Inheritance: Prototype <ul><ul><li>All objects has a prototype property </li></ul></ul><ul><ul><li>When retrieving properties, any property not on the object is retrieved from its prototype </li></ul></ul><ul><ul><li>If the property isn't on the prototype, its prototype is checked, etc. </li></ul></ul>
    20. 20. Where are we? <ul><ul><li>Feature Overview </li></ul></ul><ul><ul><li>Syntax </li></ul></ul><ul><ul><li>Objects </li></ul></ul><ul><ul><li>Functions </li></ul></ul><ul><ul><li>Inheritance </li></ul></ul><ul><ul><li>Miscellaneous </li></ul></ul>
    21. 21. Miscellaneous: Arrays <ul><ul><li>Literal notation: [true, 1, &quot;string&quot;, {}] </li></ul></ul><ul><ul><li>length property </li></ul></ul><ul><ul><li>Not bounded </li></ul></ul><ul><ul><ul><li>Use push method to add to the end </li></ul></ul></ul><ul><ul><li>Is a weird object, not a &quot;real&quot; array </li></ul></ul>
    22. 22. Miscellaneous: Regular Expressions <ul><ul><li>Pattern Matching </li></ul></ul><ul><ul><li>Literal notation: /pattern/options </li></ul></ul>
    23. 23. Resources <ul><ul><li>JavaScript Weekly - http://javascriptweekly.com/ </li></ul></ul><ul><ul><li>JSLint - http://www.jslint.com/ </li></ul></ul><ul><ul><li>JSLint.VS2010 - http://bit.ly/JSLint-VS2010 </li></ul></ul><ul><ul><li>jsFiddle - http://jsfiddle.net/ </li></ul></ul><ul><ul><li>MDC -  https://developer.mozilla.org </li></ul></ul><ul><ul><li>This - http://www.slideshare.net/EngageSoftware/ </li></ul></ul>
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×