Slide 1

Slide 1 text

Learn to Program with Javascript

Slide 2

Slide 2 text

Whoami ● Tom Wilson ● Head Instructor of ChsCodeCamp ● President of Jack Russell Software ● Twitter: @twilson63 ● Github: twilson63

Slide 3

Slide 3 text

Abstraction concept, idea, or term

Slide 4

Slide 4 text

What is programming? Programming is a creative process done by programmers to instruct a computer on how to do a task.

Slide 5

Slide 5 text

How do computers work? ● Processing (CPU) ● Memory (RAM, HD) ● Input (Keyboard, Mouse, Camera, Mic, Net) ● Output (Monitor, Printer, Internet)

Slide 6

Slide 6 text

Art of talking to Machines ● Machines speak 0 and 1 ● Humans speak complex languages ● Software Languages bridge the gap

Slide 7

Slide 7 text

Terminology Crash Course ● Basic Types ● Variables ● Control Flow ● Complex Types

Slide 8

Slide 8 text

Basic Types ● String Collection of characters surrounded by single or double quotes. Exercise 1

Slide 9

Slide 9 text

Basic Types ● Numeric Types Numeric types are simply expressed by entering the number: 1 or 3.5 Exercise 2

Slide 10

Slide 10 text

Arithmetic Operators + Addition add the left and right - Substracts right hand from left * Multiplies values on either side / Divides left hand operand from the right % Divides left by right and returns remainder Exercise 2a

Slide 11

Slide 11 text

Basic Types ● Boolean Type either true or false Exercise 3

Slide 12

Slide 12 text

Variables A variable is something that can be changed. Assigning values to symbols that make easier for humans to reference and maintain. var greeting = "Hello"; var ONE = 1; var TWO = 2;

Slide 13

Slide 13 text

Variables (CONT) var ONE = 1; var TWO = 2; say(ONE + TWO); var greeting = "HELLO"; say(greeting); greeting = "HOLA"; say(greeting);

Slide 14

Slide 14 text

Variables (CONT) var isSunny = true; say(isSunny); var isSunny = false; say(isSunny); Exercise 4

Slide 15

Slide 15 text

Assignment Assignment statements assigns a value to a declared variable. A variable is a set of symbols and characters combined to form a unique representation in the program to point or reference data. You create these variables by using a reserved word called ‘var’. This world instructs the program to create a reference from the word on the left side of the statement of the data or reference on the right. Using the assignment operator ‘=’ as the character that bridges the statement.

Slide 16

Slide 16 text

Assignment Operators = Assign right side to left variable y += x y = y + x y -= x y = y - x y *= x y = y * x y /= x y = y / x y %= x y = y % x

Slide 17

Slide 17 text

Control Flow ● Conditional Statements ● Looping Statements ● Switch Statements

Slide 18

Slide 18 text

Conditional Statements // if statement if (true) { // do something } // if else statement if (true) { // do something } else { // do something }

Slide 19

Slide 19 text

Logical Operators // less than if (1 < 2) { // do something } // greater than if (2 > 1) { // do something }

Slide 20

Slide 20 text

Basic Comparison Operators === Equals !== Not Equals < Less Than > Greater Than <= Less Than or Equals >= Greater Than or Equals Exercise 5

Slide 21

Slide 21 text

Functions Block or set of statements grouped together and can be invoked by other statements. var greeting = function() { return "Hello"; } // call functions by adding parens at the end say(greeting());

Slide 22

Slide 22 text

Functions (CONT) Exercise 6 Lets create a guessing game

Slide 23

Slide 23 text

Functions (CONT) Input var x = function(param1) { say(param1); }

Slide 24

Slide 24 text

Functions (CONT) Output var x = function() { return 'Hello World'; } say(x());

Slide 25

Slide 25 text

Complex Types Arrays An array is a set of items: var myarray = [1,2,3,4,5];

Slide 26

Slide 26 text

Complex Types Objects JavaScript Objects represent self contained entities consisting of variables (called properties in object terminology) and functions (called methods) that can be used to perform tasks and store complex data. var emptyObject = {};

Slide 27

Slide 27 text

Complex Types Objects (CONT) function Dog(breed) { this.breed = breed; this.bark = function() { say('woof') }; } var jack = new Dog('Jack Russell'); jack.bark();

Slide 28

Slide 28 text

ATM Banking Example We will create an ATM Application: 1. Deposit Funds 2. Withdraw Funds 3. Check Balance

Slide 29

Slide 29 text

Functional Programming building custom functions to make the program more readable. -- see underscore.js

Slide 30

Slide 30 text

Building Blocks By having the power to create functions, you can create building blocks that create a level of abstraction that makes coding easier and managable.

Slide 31

Slide 31 text

JavaScript Koans A guided tour of the language.

Slide 32

Slide 32 text

Glimpse of the DOM Document Object Model

Slide 33

Slide 33 text

Glimpse of NodeJS Server-Side Javascript

Slide 34

Slide 34 text

Glimpse of CouchDb JavaScript in the Database

Slide 35

Slide 35 text

CodeCamp - Classes ● HTML and CSS Basics ● JQuery ● NodeJS ● Rails ● PHP

Slide 36

Slide 36 text

Resources ● Codecademy ● Khan Academy ● Javascript Koans ● http://eloquentjavascript.net/