30
JavaScript From Scratch “Getting Your Feet Wet”

JavaScript from Scratch: Getting Your Feet Wet

Embed Size (px)

DESCRIPTION

The first part of an 8 part series covering the basics of the JavaScript language. This presentation covers variables, conditionals, loops and functions.

Citation preview

Page 1: JavaScript from Scratch: Getting Your Feet Wet

JavaScript From Scratch“Getting Your Feet Wet”

Page 2: JavaScript from Scratch: Getting Your Feet Wet

Agenda

• Variables

• Conditionals

• Loops

• Functions

Page 3: JavaScript from Scratch: Getting Your Feet Wet

Variables are...

• Storage Containers for Data

• Someone’s name

• A username/password

• The current time

• ... or anything else your application needs

Page 4: JavaScript from Scratch: Getting Your Feet Wet

var password = ‘mike is awesome’;

Page 5: JavaScript from Scratch: Getting Your Feet Wet

var name = ‘Mike G’;var age = 25;var isCool = true;

Page 6: JavaScript from Scratch: Getting Your Feet Wet

Conditionals are...

• A way to execute code conditionally

• If something is true, do this

• Otherwise, do that

Page 7: JavaScript from Scratch: Getting Your Feet Wet

var age = 25;

if (age < 21) { alert(‘Go home’);}

Page 8: JavaScript from Scratch: Getting Your Feet Wet

var age = 25;

if (age < 21) { alert(‘Go home’);}else { alert(‘Two drink minimum’);}

Page 9: JavaScript from Scratch: Getting Your Feet Wet

Loops

• Loops allow code to run repeatedly

• Over and over and over...

• But only upon a condition

Page 10: JavaScript from Scratch: Getting Your Feet Wet

var start = 10;var stop = 20;var counter = start;

while (counter <= stop) { alert(counter); counter = counter + 1;}

Page 11: JavaScript from Scratch: Getting Your Feet Wet

About those operators

=var foo = 100;

Page 12: JavaScript from Scratch: Getting Your Feet Wet

About those operators

==(foo == 100)

Page 13: JavaScript from Scratch: Getting Your Feet Wet

About those operators

<(age < 21)

Page 14: JavaScript from Scratch: Getting Your Feet Wet

About those operators

>(calories > 2000)

Page 15: JavaScript from Scratch: Getting Your Feet Wet

About those operators

<=(age <= 21)

Page 16: JavaScript from Scratch: Getting Your Feet Wet

About those operators

>=(calories >= 2000)

Page 17: JavaScript from Scratch: Getting Your Feet Wet

About those operators

&&(age >= 25 && age <= 50)

Page 18: JavaScript from Scratch: Getting Your Feet Wet

About those operators

||(name == ‘mike’ || name == ‘joe’)

Page 19: JavaScript from Scratch: Getting Your Feet Wet

Functions

• Store “blocks” of code so they can be reused later

• Are one of the most powerful features of the JavaScript language

Page 20: JavaScript from Scratch: Getting Your Feet Wet

function add () { alert(2 + 2);}

add();

Page 21: JavaScript from Scratch: Getting Your Feet Wet

function add (num1, num2) { alert(num1 + num2);}

add(2, 2);add(42, 10);add(123, 0);

Page 22: JavaScript from Scratch: Getting Your Feet Wet

function add (num1, num2) { return num1 + num2;}

var sum1 = add(2, 2);var sum2 = add(42, 10);var sum3 = add(123, 0);

Page 23: JavaScript from Scratch: Getting Your Feet Wet

Review

• Variables...

• Store data

• Begin with a var

• Are given names

• Are assigned values with =

Page 24: JavaScript from Scratch: Getting Your Feet Wet

Review

• Conditionals...

• Fork code execution based on a condition

• Begin with an if

• Condition enclosed in (parenthesis)

• Blocks are enclosed in {curly braces}

Page 25: JavaScript from Scratch: Getting Your Feet Wet

Review

• Conditionals...

• Can use else to catch a failed conditional

Page 26: JavaScript from Scratch: Getting Your Feet Wet

Review

• Loops...

• Repeatedly execute blocks of code

• Execute conditionally

• Come in many flavors:

• while, for, for in, do while

Page 27: JavaScript from Scratch: Getting Your Feet Wet

Review

• Functions...

• Store code for later use

• Can accept input parameters (arguments).

• Can send output (return values).

Page 28: JavaScript from Scratch: Getting Your Feet Wet

Homework

• Build a micro-library which performs basic math operations

• Functions should accept arguments and return the result of the math operation

Page 29: JavaScript from Scratch: Getting Your Feet Wet

Homework

• Required Functions:

• add (num1, num2)

• subtract (num1, num2)

• multiply (num1, num2)

• divide (num1, num2)

Page 30: JavaScript from Scratch: Getting Your Feet Wet

Homework

• Required Functions:

• square (num)

• increment (num)

• decrement (num)

• power (num, power)