Meetup js 102514

Beginning JavascriptToday’s Event hosts

•St. Patrick’s Church - Tacoma

•Knights of Columbus Tacoma Council 809

•Moderator: Joe Devlin

10/25/2014 1parish.saintpats.org kofc809.org

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

o Working 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


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 projectsHabitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care,

Coats for Kids, Wheelchair Mission.


Introduction•Joe Devlin - moderator

o Member of St Patrick’s Parish and K of C council 809

o Working as a web host for small to medium sized businesses.

o Interested 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 ]


Time management


Present

Code

Discuss


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

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!


Attendee Introduction• Let each of us introduce ourselves

o My name is ____________. (First name)

o Working as a ____________, or looking for work as a _________.

o Interested in Javascript for websites that ____________.

o I develop on a Mac / PC / Linux

oMy favorite text editor is ________.

oMy favorite Integrated Development Environment IDE is ______.


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

http://validator.w3.org/nu/

http://www.jslint.com/

http://www.jshint.com/

http://vividventures.biz/examples/js/browser_detection/helloworld.html

Building A Dynamic Foundation


•Specification

•Usage

•Revisions

Foundation: ECMA-262 ECMAScript Language Specification


•Apple•Mozilla

•Microsoft•Google

Chrome-JS

IE-JS

Safari-JSFirefox-

JS

• Find the specification at: www.ecma-international.orghttp://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.

*

* *

*

http://www.ecma-international.org/ecma-262/5.1/

http://msdn.microsoft.com/en-us/library/ie/yek4tbz0(v=vs.94).aspx

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference?redirectlocale=en-US&redirectslug=JavaScript/Reference

https://developer.apple.com/safari/tools/

https://developer.chrome.com/home

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.

http://en.wikipedia.org/wiki/Web_browser

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.

http://evolutionofweb.appspot.com/

http://meyerweb.com/eric/browsers/timeline-structured.html

http://fresh-browsers.com/history

http://en.wikipedia.org/wiki/Timeline_of_web_browsers

Foundation: Browser Revision Detection


Source:

http://www.vividventures.biz/examples/js/browser_detection/user_agent1.html

http://vividventures.biz/examples/js/browser_detection/user_agent1.html

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/bowserhttps://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 .

http://whichbrowser.net/

https://github.com/ded/bowser

https://raw.githubusercontent.com/ded/bowser/master/bowser.js

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 .cssresources.Code Deployment Network (CDN) -

http://cdnjs.com/libraries/modernizrhttp://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js

http://modernizr.com/

http://cdnjs.com/libraries/modernizr

http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js



• Modernizrcode source: http://vividventures.biz/examples/js/browser_detection/feature_detection_modernizr.html

Try http:

http://vividventures.biz/examples/js/browser_detection/feature_detection_modernizr.html



• 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-browsercode 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

http://mootools.net/

https://developers.google.com/speed/libraries/devguide

//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js



• Source - http://vividventures.biz/examples/js/browser_detection/feature_detection_mootools.html

http://vividventures.biz/examples/js/browser_detection/feature_detection_mootools.html

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

http://stackoverflow.com/questions/121203/how-to-detect-if-javascript-is-disabled

http://vividventures.biz/examples/js/browser_detection/nojavascript.html


Foundation: Javascript not Available?

Syntax and Statements: key and reserved words


•Reference the ECMAScript® Language Specification to find the key and reserved words.

Key words

break do instanceof typeofcase else new var catch finally return void continue for switch while debugger function this with

default if throw

delete in try

http://www.ecma-international.org/ecma-262/5.1/

http://www.w3schools.com/js/js_reserved.asp


Syntax: using (almost) all the keywords

HMTLInput Buttons

onClick=“main()”

function list()list

looping

objects

failedtry

function looping()

function objects()

failedtry

main(c)

Return null

Source: http://vividventures.biz/examples/js/keywords/TestKeyWords.htmlhttp://www.vividventures.biz/examples/js/keywords/complete_list.js

http://vividventures.biz/examples/js/keywords/TestKeyWords.html

http://www.vividventures.biz/examples/js/keywords/complete_list.js


Syntax: using (almost) all the keywords HTML





Syntax: main()





Syntax: using (almost) all the keywords, constants





Syntax: using (almost) all the keywords, ARRAY

Source: http://asmarterwaytolearn.com/js/15.html

Arrayvar 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 indexo Only access by index, not by named index.

• array type is reference, so any change to the original changes all copiesvar 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

http://asmarterwaytolearn.com/js/15.html

http://stackoverflow.com/questions/6154989/maximum-size-of-an-array-in-javascript


Syntax: list





Syntax: looping


Syntax: isArray


Syntax: objects

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

10 nodes here11 nodes here

http://www.asmarterwaytolearn.com/js/59.html

DOM: Parents, Children, Siblings


Exploring with developer tools like Firebug


DOM: modification

Source: http://vividventures.biz/examples/js/dom_mod/modifyworld.html

http://vividventures.biz/examples/js/dom_mod/modifyworld.html

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

http://jquery.com/

https://developers.google.com/speed/libraries/devguide


Plugins – jQuery DOM: modification

Source: http://vividventures.biz/examples/js/dom_mod/modifyworld2.htmljQuery ignores the “junk artifacts in the DOM”. reference: http://api.jquery.com/next/

http://vividventures.biz/examples/js/dom_mod/modifyworld2.html

http://api.jquery.com/next/

Date post:	10-Jul-2015
Category:	Internet
Upload:	joe-devlin
View:	210 times
Download:	1 times