kofc809.org 1

Javascript computer programming for beginners S02

6/24/2015

kofc809.org 2

Beginning Javascript

Moderator: Joe Devlin

6/24/2015

kofc809.org 3

Beginning Javascript

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

6/24/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.

6/24/2015

kofc809.org 5

Beginning Javascript

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

6/24/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.

6/24/2015

kofc809.org 7

Time management

6/24/2015

Present

Code

Discuss

kofc809.org 86/24/2015

Schedule1400-1410 Setup1410-1420 Introduce ourselves1420-1500 Set up Teamtreehouse, codepen.io, github1500-1530 Teamtreehouse “Javascript Basics –

Introducing variables”1530-1555 A Smarter Way to Learn Chapter 2, 31555-1600 Download git --local-branching-on-the-

cheap

kofc809.org 9

Attendee Introduction• Let each of us introduce ourselves

o My name is ____________. (First name)

o Interested in Javascript for websites that ____________.

o I develop on a Mac / PC / Linux

o My favorite codeschool is ________.

o A coding video that I have found helpful is _____.

6/24/2015

kofc809.org 10

Take away for today

6/24/2015

• Pierce County Library applyo Teamtreehouse.com

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

o Why? Teachable, repeatable, powerful

kofc809.org 11

Take away for today

6/24/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 02

kofc809.org 12

Take away for today

6/24/2015

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

Beginner Sessions 02

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

http://www.asmarterwaytolearn.com/js/2.html http://www.asmarterwaytolearn.com/js/3.html

kofc809.org 13

Take away for today

6/24/2015

• In your finder or explorer in ‘My Documents’ create folders manuals

o Javascript download the booko Beginning Javascript

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

from http://it-ebooks.info/book/3481/o git download the book

o Version Control with Git from http://www.it-ebooks.info

kofc809.org 14

Requirements – just a reminder

6/24/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 15

Course – Teamtreehouse

6/24/2015

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

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

kofc809.org 166/24/2015

Syntax: for Variables

teamtreehouse.com/javascript-basics/storing-and-tracking-information-with-variables/introducing-variables

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

• Storing and keeping track of information in a program, like boxes which have their own names to make the storage locations unique.

• Assigning a value to the variable, right hand values into left hand locationSyntax – var nameOfVariable; // with nothing in the variable ORvar nameOfVariable = “insert this text value into variable”;

• Assign content of one variable to another variablevar anotherVariable = nameOfVariable;

Retrieve contents of the variable alert(anotherVariable);//insert this text value into variable

kofc809.org 17

Course – A Smarter Way to Learn

6/24/2015

• http://www.asmarterwaytolearn.com• You can:• read the book• retake the tests

kofc809.org 186/24/2015

Syntax: for Variables for strings

A Smarter Way to Learn Javascript Chapter 2Source: http://www.asmarterwaytolearn.com/js/2.html

• Variables refer to values.• Strings are enclosed in quote marks.• var is the Keyword that declares a variable.• The variable is available only after it has been declared with var. var firstName = “enter first name here”; //declare & initialize firstName = “Joe”; //overwrites initial variable value alert(firstName); //output the contents of the variable

• Reference: Javascript Step by Step 3rd Edition pdf Chapter 4 p. 47• Single quotes and double quotes

• var possesiveFirstName = “Joe’s”;//ok• var personalQuote = ‘Joe said “hello”’;//ok• X var possesiveFirstName = ‘Joe’s’;//not ok

• Escape character is \• Where \’ escapes the single quote• Where \n represents newlinevar possesiveFirstName = ‘Joe\’s’;//ok

kofc809.org 196/24/2015

Syntax: for Variables for numbers

A Smarter Way to Learn Javascript Chapter 3Source: http://www.asmarterwaytolearn.com/js/3.html

• A number value without quotes is a number. var base = 1;• A number with quotes is a string. var base = “1”;//string • Math can be done on a number variable.

var base = 1; growth = 10; height = null;height = base + growth;// addition of two variablesconsole.log(height);// 11

• Height has already been declared, do NOT declare it again• Calculate own new value of variable

var i = 1; i = i + 1; console.log(i);//2• Strings plus numbers turn into strings

var s = "stringy"; n = 10; result = null;X result = s + n; //concatenation instead of additionconsole.log(result/10);//NaN - not a number !

• A variable must NOT start with a numberX var 2s = "stringy“;// unexpected token ILLEGAL

kofc809.org 20

Course – Javascript Step by Step 3rd Edition pdf

6/24/2015

•You can:• read the book• download the code http://aka.ms/JavaScriptSbS/files

kofc809.org 216/24/2015

Variable Names: Legal

Reference: Javascript Step by Step 3rd Edition pdf Chapter 4 p. 52http://www.ecma-international.org/ecma-262/6.0/index.html#sec-names-and-keywords

• Variable names can contain uppercase and lowercase letters as well as numbers. The lowbar character ( _ ) The dollar sign character ($)

• Variables cannoto X Start with a numbero X contain spaceso X contain other punctuation . : ; / ! @ # % (and others too)o X Contain a Javascript keyword

• Valid var i; var $i; var myVar; var flag_1;

• Invalido X var 1stCounter;//no numbers firsto X var new variable;//must not contain spaceso X var new.variable;//must not contain punctuationo X var var;//must not be a keyword

kofc809.org 22

Course – codepen.ioVariable Types

6/24/2015

• codepen.io, NorthDecoder• http://www.ecma-international.org/ecma-262/5.1/#sec-8

kofc809.org 236/24/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);

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

kofc809.org 24

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

6/24/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 25

Engagement

6/24/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 26

That all folks !

6/24/2015

• Thank you for attending the meetup.