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

666 views

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 parish.saintpats.org kofc809.org 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 strengthsfinder.com 10/25/2014 parish.saintpats.org kofc809.org 2
  3. 3. A word from our hosts •Knights of Columbus www.kofc.org 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 parish.saintpats.org kofc809.org 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 parish.saintpats.org kofc809.org 4
  5. 5. Time management Present Discuss Code 10/25/2014 parish.saintpats.org kofc809.org 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 parish.saintpats.org kofc809.org 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 parish.saintpats.org kofc809.org 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 parish.saintpats.org kofc809.org 8
  9. 9. Requirements HTML Validator JS - valid Test http://validator.w3.org/nu/ http://www.jslint.com/ http://www.jshint.com/ Design inputs to confirm the expected output. Source: http://vividventures.biz/examples/js/browser_detection/helloworld.html 10/25/2014 parish.saintpats.org kofc809.org 9
  10. 10. Building A Dynamic Foundation •Specification •Usage •Revisions 10/25/2014 parish.saintpats.org kofc809.org 10
  11. 11. Foundation: ECMA-262 ECMAScript Language Specification • Find the specification at: www.ecma-international.org http://www.ecma-international.org/ecma-262/5.1/ • 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 parish.saintpats.org kofc809.org 11
  12. 12. Foundation: Browser Usage • Current usage chart from http://en.wikipedia.org/wiki/Web_browser 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 parish.saintpats.org kofc809.org 12
  13. 13. Foundation: Browser Revisions • There are some graphical representations of browser revisions: ohttp://evolutionofweb.appspot.com/#/evolution/day ohttp://meyerweb.com/eric/browsers/timeline-structured.html ohttp://fresh-browsers.com/history ohttp://en.wikipedia.org/wiki/Timeline_of_web_browsers • 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 parish.saintpats.org kofc809.org 13
  14. 14. Foundation: Browser Revision Detection Source: http://www.vividventures.biz/examples/js/browser_detection/user_agent1.html 10/25/2014 parish.saintpats.org kofc809.org 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. http://whichbrowser.net/ (heed the warning about browser sniffing!) •Bowser https://github.com/ded/bowser https://raw.githubusercontent.com/ded/bowser/master/bowser.js 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 parish.saintpats.org kofc809.org 15
  16. 16. Foundation: Browser Feature Detection • Modernizr http://modernizr.com/ 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) - http://cdnjs.com/libraries/modernizr http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js 10/25/2014 parish.saintpats.org kofc809.org 16
  17. 17. Foundation: Browser Feature Detection • Modernizr code source: http://vividventures.biz/examples/js/browser_detection/feature_detection_modernizr.html Try http: 10/25/2014 parish.saintpats.org kofc809.org 17
  18. 18. Foundation: Browser Feature Detection • Mootools - http://mootools.net/ 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 : https://developers.google.com/speed/libraries/devguide CDN- //ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js 10/25/2014 parish.saintpats.org kofc809.org 18
  19. 19. Foundation: Browser Feature Detection • Source - http://vividventures.biz/examples/js/browser_detection/feature_detection_mootools.html 10/25/2014 parish.saintpats.org kofc809.org 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 – http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled Source: http://vividventures.biz/examples/js/browser_detection/nojavascript.html 10/25/2014 parish.saintpats.org kofc809.org 20
  21. 21. Foundation: Javascript not Available? 10/25/2014 parish.saintpats.org kofc809.org 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 parish.saintpats.org kofc809.org 22
  23. 23. Syntax: using (almost) all the keywords Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.html http://www.vividventures.biz/examples/js/keywords/complete_list.js HMTL Input Buttons onClick=“main()” main(c) list function list() looping objects failedtry function looping() function objects() failedtry Return null 10/25/2014 parish.saintpats.org kofc809.org 23
  24. 24. Syntax: using (almost) all the keywords HTML Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.html http://www.vividventures.biz/examples/js/keywords/complete_list.js 10/25/2014 parish.saintpats.org kofc809.org 24
  25. 25. Syntax: main() Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.html http://www.vividventures.biz/examples/js/keywords/complete_list.js 10/25/2014 parish.saintpats.org kofc809.org 25
  26. 26. Syntax: using (almost) all the keywords, constants Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.html http://www.vividventures.biz/examples/js/keywords/complete_list.js 10/25/2014 parish.saintpats.org kofc809.org 26
  27. 27. Syntax: using (almost) all the keywords, ARRAY Source: http://asmarterwaytolearn.com/js/15.html 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 parish.saintpats.org kofc809.org 27
  28. 28. Syntax: list Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.html http://www.vividventures.biz/examples/js/keywords/complete_list.js 10/25/2014 parish.saintpats.org kofc809.org 28
  29. 29. Syntax: looping 10/25/2014 parish.saintpats.org kofc809.org 29
  30. 30. Syntax: isArray 10/25/2014 parish.saintpats.org kofc809.org 30
  31. 31. Syntax: objects 10/25/2014 parish.saintpats.org kofc809.org 31
  32. 32. DOM: Parents, Children, Siblings http://www.asmarterwaytolearn.com/js/59.html • 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 parish.saintpats.org kofc809.org 32
  33. 33. DOM: Parents, Children, Siblings Exploring with developer tools like Firebug 10/25/2014 parish.saintpats.org kofc809.org 33
  34. 34. DOM: modification Source: http://vividventures.biz/examples/js/dom_mod/modifyworld.html 10/25/2014 parish.saintpats.org kofc809.org 34
  35. 35. Plugin: jQuery - DOM modification • Reference: http://jquery.com/ • 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: https://developers.google.com/speed/libraries/devguide#jquery 10/25/2014 parish.saintpats.org kofc809.org 35
  36. 36. Plugins – jQuery DOM: modification Source: http://vividventures.biz/examples/js/dom_mod/modifyworld2.html jQuery ignores the “junk artifacts in the DOM”. reference: http://api.jquery.com/next/ 10/25/2014 parish.saintpats.org kofc809.org 36

×