Learn to Code Boulder

Welcome to

powered by

About

Dynamic learning community for tech

• Web Development
• Workspace
• Data Science
• Networking

I'm Dize

• Colorado native
• Former Instructor, current Developer
• I love podcasts
• Avid Netflix binger

Peter

• Galvanize Developer
• Developing professionally for 2 years
• Was a recruiter before Galvanize (g3)
• Has two dachshunds, tons of dachshund paraphernalia, one of those people

Lisa

• Unicorn
• Computer Engineering, Biology graduate from University of Illinois
• JavaScript enthusiast
• g32 (almost) graduate

Scott

• ​Previously a Mechanical Engineer
• g32 (almost) graduate
• Raspberry Pi enthusiast
• Also a real pie enthusiast

Intro to JavaScript

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

Setting up your Environment

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

A Little Bit About JavaScript

• Developed in 1995 by Netscape Engineer
• Lightweight programming language
• Built with the rise of the Internet in mind
• Got its name from trying to ride the coat tails of Java's success

What does JavaScript do for us?

Interactivity

Animation

Basically anything interesting

What would your favorite website look like without JavaScript?

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

7-minute self-paced tutorial

www.javascript.com/try

Basic Syntax

 var

 function

 {}

 ;

 ''

 ""

or

- keyword to declare a variable

- keyword to declare a function

- curly brackets

- terminator, signifies end of an argument

- string literal

Basic Syntax

 =

 ==

 ===

 //

- assignment

- equality with type coercion

- strict equality

- comment

 console.log()

- method to print data

JavaScript Typing

 true

 'this is a string'

 42

 undefined

- Boolean

 false

or

 null

- String

- Number

- Nonvalue

- Nonvalue

- Denote missing info

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

Examples

 var favoriteNumber = 8;

A variable is a container for storing data.

Exercise

// Only values you can use:
// Your first name
// Your last name
// The number 2

console.log(answer)

// Result:
// Hi there, my name is Dize Hacioglu 
// and I know that 2 + 2 = 4.

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

Very Basic Syntax

 function sayHello() {
    console.log('Hello!')
 }

Very Basic Syntax (Pt. 2)

 function sayHello(name) {
    console.log('Hello, ' + name + '!');
 }

Very Basic Syntax (Pt. 3)

 function add(a, b) {
    return a + b;
 }

Very Basic Syntax (Pt. 4)

 var add = function(a, b) {
    return a + b;
 }

A function is a block of code that performs a task.

Exercise

// Write a function that accepts two parameters 
// and always returns a message 
// saying the first argument is cooler.

whoIsCooler('me', 'you');

// Output:
// Me is cooler than you!

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

Control Flow

If...then logic

Sale!

If you spend $100 or more, then you get 20% off.

Sale!

If you spend $100 or more, then you get 20% off.

Otherwise, you get 5% off.

Sale!

If you spend $200 or more, then you get 30% off.

If you spend $100 or more, then you get 20% off.

Otherwise, you get 5% off.

Exercise

// Write a function whoIsTaller takes 2 parameters 
// and always returns ‘a’ is taller than ‘b’. 
// However if ‘Beyonce” is a parameter, 
// she will always be taller.

whoIsTaller('Jill', 'Jack');

// Output:
// Jill is taller than Jack!

whoIsTaller('Jack', 'Beyonce');

// Output:
// Beyonce is taller than Jack!

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors

Rock, Paper, Scissors

Using

• Variables
• Functions
• Conditionals
• Basic DOM manipulation
  • prompt()
  • alert()
• Built-in JS libraries
  • Math.random()

https://github.com/GalvanizeOpenSource/Learn-To-Code-JavaScript

Directions

1

2

Open unzipped folder in Atom

Directions (cont.)

3

4

Create file in same folder named main.js

Objectives

• Explain JavaScript's role in Web Development
• Recognize basic JavaScript syntax
• Define and declare variables
• Define, write, and invoke functions
• Define and implement conditional statements
• Code a game of Rock, Paper, Scissors