JavaScript JumpStart

Schedule

• • Lecture 1: 9:45 - 10:45
    • Workshop 1: 10:45 - 12:30
    • Review: 12:30 - 1:00
  • Lunch:  1:00 - 2:00
  • Lecture 2: 2:00 - 2:30
    • ​​Workshop 2: 2:30 - 4:30
    • Review 4:30 - 5:00​​
  • Lecture 3: 5:00 - 5:30
    • Workshop 3: 5:30 - ?
  • Closing Comments

What will we cover?

JavaScript Fundamentals

• Values, Types and Operators
• Program Structure
• Functions
• Loops
• Data Structures
  • Arrays​

About Me

• Born and Raised in New Jersey
• Attended Fullstack Academy 2 years ago
• Teaching Fellow
• Instructor & Software Engineer at Fullstack Academy

Day
One

Topics and Concepts

• Variables
• Value Types
• Arithmetic Operators
• Comparators
• Logical Operators
• Functions

Variables

 Variables

• How does a program remember things?
  • To catch and hold values JavaScript provides variables
• ​Example Variable Definition:

var numUSStates = 50;

var

The "var" keyword indicates we are declaring a local variable. 

Variable Terminology

Declaration: Creating an empty variable

Initialization: Assigning a value to the variable

var schoolName;

schoolName = "Fullstack Academy";

Variables

Shorthand Syntax

Functions

What is a Function?

• Functions define reusable chunks of code.
• Writing a function is similar to a writing a recipe
• Like Recipes, Functions have parameters that customize the output and make functions dynamic

function bakeCake(flavor, numServings){
    //sample instructions for baking cake
    makeBatter(numServings);
    addFlavoring(flavor);
    return createCake();
}

bakeCake("Chocolate", 5);

bakeCake("Vanilla", 18);

Functions: The Details

• A function is a block of reusable code.
• Executing a function is called invoking, calling, or applying it.
• Values inside the parentheses are passed to the program inside the function.

Dissect a Function Call

alert("My Name Is Griffin");

This is a JavaScript Statement that invokes the alert function and accepts a string value argument

The "return" Keyword

• The "return" keyword gives back data from a function to another line of code
• When the "return" keyword is used, anything after the return keyword will not execute.
• Self-check: What will alert from the code below?

function doYouLikeJavaScript(){
  return "You Bet I Do";
}

If/Else Statements

Conditional Statements

• During your morning routine you make a series of decisions in a conditional format.
  • If it is cold out you will wear a jacket
  • If you are hungry you will have breakfast
  • If you are running late you will move faster
• IF/ELSE Statement:

Booleans

• Two Possible Values:
  • True
  • False

Conditional Operators

• Compare two things
• The end goal is to return 'true' or 'false' so that our 'if statement' knows which block of code to execute
• Basic Conditional Operators
  • " > ": Greater Than         
  • " < ":  Less Than
  • " >= ": Greater Than or Equal To
  • " <= ": Less Than or Equal To
  • " === ": Equal To (Identity Operator)
  • " !== ": Not Equal To

if(7 < 10){
  console.log("7 is less than 10");
} else {
  console.log("7 is greater than 10");
}

Truthy and Falsey Values

• Truthy: Something which evaluates to TRUE.

• Falsey: Something which evaluates to FALSE.

Falsey Values

1. undefined
2. NaN
3. null
4. 0 (zero)
5. false
6. "" (empty string)

Everything else is Truthy

function truthyOrfalsey(val){
    if(val){
        return "The value is TRUTHY";
    } else {
        return "The value is FALSEY";
    }
}

Truthy and Falsey Values

"else if" Statement Example

function isBakersDozen(guess){
    if(guess === 13){
        return "You are Correct";
    } else if(guess === 12){
        return "Close! But wrong Dozen";
    } else {
        return "Try Again";
    }
}

• Adds more than one option to your program
• Checks from Top to Bottom
• Statements can be nested

Logical Operators

• Typically used with Boolean Values
• 3 Logical Operators
  • " && " : AND - ​Both Conditions must be true
  • " || " : OR - ​One Condition must be true
  • " ! " : NOT - ​Toggles a Statement between true/false

var skyColor = 'gray';
var isThundering = false;

if (skyColor === "gray" && isThundering === true) {
    console.log("It's Raining!");
}

JavaScript

Value
Types

JavaScript Value Types

• Numbers
• Strings
• Booleans
• Objects
  • ​Functions, Arrays
• Null
• Undefined

var oneDozen = 12;

var myName = "Griffin"

var theSkyIsBlue = true

var macBook = {
  model: "2014 Air",
  price: 1400
}

null

undefined

Numbers

Numbers

Common Arithmetic Operators in JavaScript

• Addition
• Subtraction
• Multiplication
• Division

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

Strings

Strings

• String: A series of characters enclosed by an apostrophe ( ' ) or quotation marks ( " )
• Concatenation: Combines strings together

var jS = "JS";
var jump = ' Jump';
var start = 'Start';

Accessing Individual Characters

Strings look like one cohesive unit but they are actually made up of a series of characters

var hello = "Hello";

Accessing Individual Characters

"Hello Fullstack".charAt(8);

charAt method: returns a character at a specified index value

Common String Properties

and Methods

Common String Methods

Time to Code

Let's Practice What We've Learned