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
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 parish.saintpats.org kofc809.org 2
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.
Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care,
Coats for Kids, Wheelchair Mission.
10/25/2014 parish.saintpats.org kofc809.org 3
•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.
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
10/25/2014 parish.saintpats.org kofc809.org 5
0830-0845 Reception, coffee and pastries
0845-0900 Introduce ourselves
0900-1000 Basic constructs
1015-1100 DOM discussion
1100-1200 Modules and plug ins
10/25/2014 parish.saintpats.org kofc809.org 6
•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
• Let each of us introduce ourselves
o My name is ____________. (First name)
oWorking as a ____________, or looking for work as a _________.
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
JS - valid
Design inputs to
confirm the expected
10/25/2014 parish.saintpats.org kofc809.org 9
Building A Dynamic Foundation
10/25/2014 parish.saintpats.org kofc809.org 10
Foundation: ECMA-262 ECMAScript Language Specification
• Find the specification at: www.ecma-international.org
10/25/2014 parish.saintpats.org kofc809.org 11
Foundation: Browser Usage
• Current usage chart from
http://en.wikipedia.org/wiki/Web_browser with all the statistical
• #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
Foundation: Browser Revisions
• There are some graphical representations of browser revisions:
• 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
Foundation: Browser Revision Detection
If only browser detection were as simple as the last example! More complex
http://whichbrowser.net/ (heed the warning about browser sniffing!)
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
Foundation: Browser Feature Detection
• Modernizr http://modernizr.com/ runs quickly on page load to detect
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
Code Deployment Network (CDN) -
10/25/2014 parish.saintpats.org kofc809.org 16
Foundation: Browser Feature Detection
• Mootools - http://mootools.net/ MooTools is a compact, modular, Object-
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 :
10/25/2014 parish.saintpats.org kofc809.org 18
10/25/2014 parish.saintpats.org kofc809.org 20
10/25/2014 parish.saintpats.org kofc809.org 21
Syntax and Statements: key and reserved words
•Reference the ECMAScript® Language Specification to find the
key and reserved 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
Syntax: using (almost) all the keywords
list function list()
10/25/2014 parish.saintpats.org kofc809.org 23
Syntax: using (almost) all the keywords HTML
10/25/2014 parish.saintpats.org kofc809.org 24
Syntax: using (almost) all the keywords, constants
10/25/2014 parish.saintpats.org kofc809.org 26
Syntax: using (almost) all the keywords, 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 , second element one  and so on.
• Access to the array elements by var myresult = aryCoders;
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
10/25/2014 parish.saintpats.org kofc809.org 27
10/25/2014 parish.saintpats.org kofc809.org 28
Plugin: jQuery - DOM modification
• Reference: http://jquery.com/
• Plugin (libraries) allow code reuse, which saves you time and leverages your
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
• 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
Plugins – jQuery DOM: modification
jQuery ignores the “junk artifacts in the DOM”. reference: http://api.jquery.com/next/
10/25/2014 parish.saintpats.org kofc809.org 36