Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Meetup js 102514


Published on

Introduction to Javascipt

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Meetup js 102514

  1. 1. Beginning Javascript Today’s Event hosts •St. Patrick’s Church - Tacoma •Knights of Columbus Tacoma Council 809 •Moderator: Joe Devlin 10/25/2014 1
  2. 2. A word from our hosts •St. Patrick’s Church – Tacoma o The pastoral council has generously offered us this location for today, as part of the churches community outreach. o Founded in 1892 o Aligned with St. Patrick’s Catholic School o Reference: The Bible oWorking on the Engaged Church model “Growing an Engaged Church” by Albert Winseman, Gallup Press, ISBN 978-1-59562-014-9 o Promoting personal development with Strengths Finder. “Strengths Finder” by Tom Rath, Gallup Press, ISBN 978-1-59562-015-6  10/25/2014 2
  3. 3. A word from our hosts •Knights of Columbus o Founded in 1882 o Dedicated to “Saving Lives and Changing Lives” o Promoting strong families through charitable giving and a AAA rated life insurance and annuity program. oLocal projects Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care, Coats for Kids, Wheelchair Mission. 10/25/2014 3
  4. 4. Introduction •Joe Devlin - moderator o Member of St Patrick’s Parish and K of C council 809 oWorking as a web host for small to medium sized businesses. oInterested in Javascript for the obvious reasons that it is a must for web development, plus for the purposes of getting people together to code; JS is a universal standard that comes with freely downloadable browsers and tools. We can easily collaborate. o t = F x d; torque equals force times distance or more commonly “leverage”. [Information Analogy: outcome= cost*value ] 10/25/2014 4
  5. 5. Time management Present Discuss Code 10/25/2014 5
  6. 6. Schedule 0830-0845 Reception, coffee and pastries 0845-0900 Introduce ourselves 0900-1000 Basic constructs 1000-1015 Break 1015-1100 DOM discussion 1100-1200 Modules and plug ins 1200-1230 Lunch 10/25/2014 6
  7. 7. Rest Rooms •Down the “L” shaped hall •Through two sets of doors to then left. • If you end up upstairs or outside you have gone too far! 10/25/2014 7
  8. 8. Attendee Introduction • Let each of us introduce ourselves o My name is ____________. (First name) oWorking as a ____________, or looking for work as a _________. oInterested in Javascript for websites that ____________. oI develop on a Mac / PC / Linux oMy favorite text editor is ________. oMy favorite Integrated Development Environment IDE is ______. 10/25/2014 8
  9. 9. Requirements HTML Validator JS - valid Test Design inputs to confirm the expected output. Source: 10/25/2014 9
  10. 10. Building A Dynamic Foundation •Specification •Usage •Revisions 10/25/2014 10
  11. 11. Foundation: ECMA-262 ECMAScript Language Specification • Find the specification at: • Vendors build a browser that interprets Javascript as defined by the specification. • The challenge is that each Javascript may work a little differently depending on the interpretation. There is potentially more than one Javascript to learn. •Google •Microsoft Chrome- JS IE-JS Safari-JS Firefox- JS * * * •Mozilla •Apple * 10/25/2014 11
  12. 12. Foundation: Browser Usage • Current usage chart from with all the statistical disclaimers. • #1 Chrome • #2 Internet Explorer • #3 Firefox • #4 Safari • #5 Opera •We know there is a growing mobile versions trend that could be different as well. 10/25/2014 12
  13. 13. Foundation: Browser Revisions • There are some graphical representations of browser revisions: o o o o • When a user upgrades the browser revision it may deprecate or brake your code. • In conclusion: o The programmer has no control over which browser or revision level the user will attempt to acquire a web page with, however they do have access to some information about the browser. 10/25/2014 13
  14. 14. Foundation: Browser Revision Detection Source: 10/25/2014 14
  15. 15. Foundation: Browser Revision Detection If only browser detection were as simple as the last example! More complex solutions: •Whichbrowser - A combination of server side php and client side Javascript. (heed the warning about browser sniffing!) •Bowser What we really want to know is whether a browser complies with a particular feature, not the browser and revision. The userAgent result is not accurate enough to adequately make decisions about which code to run, because someone has to continuously monitor browser revisions compared to features. There are alternate solutions that involve feature detection . 10/25/2014 15
  16. 16. Foundation: Browser Feature Detection • Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element for you to key your CSS on. Modernizr supports dozens of tests, and optionally includes YepNope.js for conditional loading of external .js and .css resources. Code Deployment Network (CDN) - 10/25/2014 16
  17. 17. Foundation: Browser Feature Detection • Modernizr code source: Try http: 10/25/2014 17
  18. 18. Foundation: Browser Feature Detection • Mootools - MooTools is a compact, modular, Object- Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API. • It has a few feature detection methods: oBrowser.Features.xpath - (boolean) True if the browser supports DOM queries using XPath. oBrowser.Features.air - (boolean) True if the browser supports AIR. oBrowser.Features.query - (boolean) True if the browser supports querySelectorAll. oBrowser.Features.json - (boolean) True if the browser has a native JSON object. oBrowser.Features.xhr - (boolean) True if the browser supports native XMLHTTP object. A Google hosted Code Deployment Network (CDN) at : CDN- // 10/25/2014 18
  19. 19. Foundation: Browser Feature Detection • Source - 10/25/2014 19
  20. 20. Foundation: Javascript not available? •In an introduction to Javascript programming it may be a bit odd to ask what if Javascript is turned off in the users browser? •Reference – Source: 10/25/2014 20
  21. 21. Foundation: Javascript not Available? 10/25/2014 21
  22. 22. Syntax and Statements: key and reserved words •Reference the ECMAScript® Language Specification to find the key and reserved words. Key words break do instanceof typeof case else new var catch finally return void continue for switch while debugger function this with default if throw delete in try 10/25/2014 22
  23. 23. Syntax: using (almost) all the keywords Source: HMTL Input Buttons onClick=“main()” main(c) list function list() looping objects failedtry function looping() function objects() failedtry Return null 10/25/2014 23
  24. 24. Syntax: using (almost) all the keywords HTML Source: 10/25/2014 24
  25. 25. Syntax: main() Source: 10/25/2014 25
  26. 26. Syntax: using (almost) all the keywords, constants Source: 10/25/2014 26
  27. 27. Syntax: using (almost) all the keywords, ARRAY Source: Array var aryTheIndexValues = [0, 1, 2, 3, 4]; var aryCoders = [“Sue”, “Scott”, “Julia”, “Joe”]; var aryInventory = [100, 200, 500, 10, 9]; var aryOfArrays = [[1,2],[2,2]]; • Variable that represents a list of values • Any number of elements.* • First element is indexed with a zero [0], second element one [1] and so on. • Access to the array elements by var myresult = aryCoders[0]; o The number in the brackets is the index o Only access by index, not by named index. • array type is reference, so any change to the original changes all copies var aryFirst = [100, 200, 300, 400, 500]; var arySecond = aryFirst; arySecond = [1, 2, 3, 4, 5]; //aryFirst is now made the same as arySecond Reference: Javascript Step by Step p. 73, 97 10/25/2014 27
  28. 28. Syntax: list Source: 10/25/2014 28
  29. 29. Syntax: looping 10/25/2014 29
  30. 30. Syntax: isArray 10/25/2014 30
  31. 31. Syntax: objects 10/25/2014 31
  32. 32. DOM: Parents, Children, Siblings • parent – encloses child nodes • child – enclosed by a parent node • sibling – nodes with the same parent 11 nodes here 10 nodes here 10/25/2014 32
  33. 33. DOM: Parents, Children, Siblings Exploring with developer tools like Firebug 10/25/2014 33
  34. 34. DOM: modification Source: 10/25/2014 34
  35. 35. Plugin: jQuery - DOM modification • Reference: • Plugin (libraries) allow code reuse, which saves you time and leverages your effectiveness. • jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript. • Code Deployment Networks allow code to be retrieved from a server near the user allowing faster loading. Googles CDN: 10/25/2014 35
  36. 36. Plugins – jQuery DOM: modification Source: jQuery ignores the “junk artifacts in the DOM”. reference: 10/25/2014 36