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

{}

''

""

- 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'

 undefined

- Boolean

 false

 null

- String

- Number

- 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;

 var inventorOfFirstLanguageCompiler = 'Grace Hopper';

 var whereaboutsOfBigFoot = undefined;

 var interestInTheKardashians = false;

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!')
 }

 sayHello

Very Basic Syntax (Pt. 2)

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

 sayHello();

 sayHello('Adele');

 // Hello, undefined!

 // Hello, Adele!

Very Basic Syntax (Pt. 3)

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

 add(2, 2)

 // 4

function keyword

name of function

parameters

return statement (aka output)

arguments

Very Basic Syntax (Pt. 4)

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

 add(2, 2)

 // 4

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

 if(true) {
    // do something
 }

Sale!

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

 var total = 162;

 if(total is greater than 100) {
    // take 20% off the total
 }

Sale!

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

Otherwise, you get 5% off.

 var total = 162;

 if(total is greater than 100) {
    // take 20% off the total
 } else {
    // take 5% off the total
 }

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.

 var total = 162;

 if(total is greater than 200) {
    // take 30% off the total
 } else if(total is greater than 100) {
    // take 20% off the total
 }
 else {
    // take 5% off the total
 }

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

Open unzipped folder in Atom

Directions (cont.)

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