kofc809.org 1

Javascript computer programming for beginners S03

7/23/2015

kofc809.org 2

Beginning Javascript

Moderator: Joe Devlin

7/23/2015

kofc809.org 3

Beginning Javascript

Today’s Event hosts• Knights of Columbus Tacoma Council 809

7/23/2015

kofc809.org 4

A word from our hosts• Knights of Columbus Tacoma Council 809

www.kofc809.orgo Founded in 1882o Dedicated to “Saving Lives and Changing Lives”o Promoting strong families through charitable giving and a AAA

rated life insurance and annuity program.o Local projects

Habitat for Humanity Build, Blood Drive, Ultrasound for pregnancy care & 4US.org, Coats for Kids, Wheelchair Mission.

7/23/2015

kofc809.org 5

Beginning Javascript

Access this slideshow at: http://www.vividventures.biz/d/?q=javascript

7/23/2015

kofc809.org 6

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.

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.

7/23/2015

kofc809.org 7

Time management

7/23/2015

Present

Code

Discuss

kofc809.org 87/23/2015

Schedule1400-1410 Setup1410-1420 Introduce ourselves1420-1500 Set up:

Teamtreehouse, codepen.io, github, git1500-1510 Download git --local-branching-on-the-

cheap1510-1530 Teamtreehouse “Javascript Basics – Strings

and Numbers; Spaces, tabs & new lines”1530-1600 Variable Typeof’s,

kofc809.org 9

Engagement

7/23/2015

• To make our meetup more personable I am inviting members to add links to their meetup.com introduction that directly references something related to Javascript or programming for example codepen.io or github.com.

kofc809.org 10

Attendee Introduction• Let each of us introduce ourselves

o My name is ____________. (First name)

o My github username is ______________.

o My codepen username is _____________.

o I (have/have not) updated my meetup profile with above links.

o The editor that I am using today is ____________.

o I am working on a Mac / PC / Linux

7/23/2015

kofc809.org 11

Take away for today

7/23/2015

• Pierce County Library applyo Teamtreehouse.com

o https://teamtreehouse.com/gateways/pierce_county_public_library/signup

o Why? Teachable, repeatable, powerful

kofc809.org 12

Take away for today

7/23/2015

• Set up browser bookmarks in folders as follows: Tacoma-JS

https://teamtreehouse.com/gateways/pierce_county_public_library/signup

http://codepen.io/NorthDecoder/ https://github.com/NorthDecoder https://gist.github.com/NorthDecoder http://git-scm.com/o Beginner Sessions

o 03

kofc809.org 13

Take away for today

7/23/2015

• Set up browser bookmarks in folders as follows: Tacoma-JS

Beginner Sessions 03

https://teamtreehouse.com/library/javascript-basics/storing-and-tracking-information-with-variables/naming-variables

kofc809.org 14

Take away for today

7/23/2015

• (if you already have these NO need to repeat )• In your finder or explorer in ‘My Documents’ create folders

manualso Javascript reference the books

o Beginning Javascript 4th Edition pdfo from http://it-ebooks.info/book/1068/

o Javascript Step by Step 3rd Edition pdf from http://it-ebooks.info/book/3481/

o git reference the booko Version Control with Git from http://www.it-ebooks.info

kofc809.org 15

git --local-branching-on-the-cheap

7/23/2015

• http://git-scm.com/ try•Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency.•Download

kofc809.org 16

Requirements – just a reminder

7/23/2015

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. TDD pdf

kofc809.org 17

Course – Teamtreehouse

7/23/2015

• Teamtreehouse.com (TTH)o TTH Library search for “Javascript Basics –

Naming Variables”• You can:• review videos at any time• retake the tests• save workspaces• earn badges !

kofc809.org 18

Course – Variable Types

7/23/2015

• Exampleo codepen.io, NorthDecoder

http://codepen.io/NorthDecoder/o Introduction to Javascript variables and types http://codepen.io/NorthDecoder/pen/OVRQMG

• http://www.ecma-international.org/ecma-262/5.1/#sec-8

kofc809.org 197/23/2015

Variable: Types

Reference: Javascript Step by Step 3rd Edition pdf Chapter 4 p. 41http://www.ecma-international.org/ecma-262/5.1/#sec-8

• Variable types:o Undefined o Null o Booleans o Stringso Numberso Objects

o Command: var theTypeIs = typeof(aVariable);

kofc809.org 207/23/2015

Variable: Dynamic Typing

Reference: Dynamic typing vs. static typinghttp://courses.cs.washington.edu/courses/cse341/04wi/lectures/13-dynamic-vs-static-types.htmlhttps://en.wikipedia.org/wiki/Type_system

• Dynamic Typing: type-incorrect operations are caught during program execution, rather than during a type checking phase that precedes execution.

• Try this in codepen: http://codepen.io/NorthDecoder/pen/KpxwOXvar myNumber = 12;

var theTypeIs = typeof(myNumber);

alert(myNumber + ' is a: ' + theTypeIs);

myNumber = "Text";//new value type assigned to same variable

theTypeIs = typeof(myNumber);

alert(myNumber +' is a: ' + theTypeIs);

kofc809.org 217/23/2015

Variable: Dynamic Typing

• Where is the dynamic variable type bug in this code?

var debugLevel = 1;//0 = no messages //1 = console messages //2 = alert messages

switch (debugLevel){ case "0" : break; case "1" : console.log("Why does this not print?"); break; case "2" : alert("Why does this not print?"); break;}

Reference: Checking types in Javascripthttp://tobyho.com/2011/01/28/checking-types-in-javascript/

kofc809.org 227/23/2015

Variable: Dynamic Typing

• The dynamic variable type bug removed

var debugLevel = 1;//0 = no messages //1 = console messages //2 = alert messages

switch (debugLevel){ case 0 : break; case 1 : console.log("Casing on number 1 debugLevel."); break; case 2 : alert("Casing on number 2 debugLevel."); break;}

Reference: Checking types in Javascripthttp://tobyho.com/2011/01/28/checking-types-in-javascript/

kofc809.org 23

That all folks !

7/23/2015

• Thank you for attending the meetup.