The Web Development Boot Camp w/ Colt Steele

08 Introduction to JavaScript

067 Unit Objectives 4:41

Topics

068 The JS Console 3:23

069 JS Primitives 13:14

Objectives

Examples

070 Primitives Exercises 3:21

What do the following JS statements return?

  1. 100 % 3
  2. ("blah" + "blah")[6]
  3. "hello".length % "hi\\".length

071 Variables 6:26

Topics

072 Null and Undefined 2:33

Desciption

073 Useful Built-in Methods 5:13

Some methods

074 Writing JavaScript in Separate Files 5:44

Linking HTML and JS files

Greeting example

075 JS Stalker Exercise 1:51

Exercise

076 JS Stalker Exercise Solution 4:47

stalker solution

077 Age Calculator Exercise 1:10

Exercise

Enter your age and find out how many days you've been alive

078 Age Calculator Solution 4:02

age calc solution

09 JavaScript Basics – Control Flow

079 Unit Objectives 3:05

080 Boolean Logic 5:12

Boolean logic

Comparison Operators

Assuming x = 5

Operator Name Example Result
> Greater than x > 10 false
>= Greater than or equal to x >= 5 true
< Less than x < -50 false
<= Less than or equal to x <= 100 true
== Equal to x == "5" true
!= Not equal to x != "b" true
=== Equal value and type x === "5" false
!== Not equal value or equal type x !== "5" true

Type Coercion

== performs type coercion, while === does not

 

var x = 99
x == "99" //true
x === "99" //false

 

var y = null
y == undefined //true
y === undefined //false

Quirky JS Cases

081 Logical Operators 10:15

AND, OR, and NOT

Assuming x = 5 and y = 9

Operator Name Example Result
&& AND x < 10 && x !==5 false
|| OR y > 9 || x === 5 true
! NOT !(x === y) true

Exercise 1

var x = 10
var y = "a"
y === "b" || x >= 10

Exercise 2

var x = 3
var y = 8
!(x == "3" || x === y) && !(y != 8 && x <= y)

Truthy and Falsy Values

Values that arent' actually true or false, are still inherently "truthy" or "falsey" when evaluated in a boolean context.

Falsy Values:

Everything else is "truthy"

Exercise 3

var str = ""
var msg = "hahaha!"
var isFunny = "false"
!(( str || msg ) && isFunny)

082 Conditionals 8:13

Conditional Keywords

Example of a Venue Bouncer

bouncer solution

Another Age Exercise

age exercise solution

083 Guessing Game Code Along 10:11

Simple Guessing Game

Take a hard coded number value and compare to guesses. Alerts too low, too high, or correct! Requires a refresh to guess again.

guess a number solution

084 Introduction to Loops 9:26

Objectives

While Loops

Repeat code WHILE a condition is true

while(someCondition) {
//run some code
}

It's very similar to an if statement, except it repeats a given code block instead of just running it once.

While Loop Example

printing numbers from 1-5

var count = 1
while(count < 6) {
console.log("count is " + count)
count++
}
//count is: 1
//count is: 2
//count is: 3
//count is: 4
//count is: 5

Count examples

Infinite loops

Infinite loops occur whent he terminating condition in a loop is never true.

var count = 0
while(count < 10){
console.log(count)
}

The above example prints "0" over and over because count is never incremented.

085 While Loop Exercises 3:25

Exercise 1 – Evaluate what is printed

var num = 1
while(num <= 10) {
  console.log(num)
  num+=2
}

Exercise 2

var num = 1
while(num <= 20){
  if(num % 4 === 0){
    console.log(num)
  }
  num++
}

Exercise 3

var num = 100
while(num < 150){
  console.log(num + 1)
  num--
}

086 While Loop Problem Set 1:26

  1. Print all numbers between -10 and 19
  2. Print all even numbers between 10 and 40
  3. Print all odd numbers between 300 and 333
  4. Print all numbers divisible by 5 AND 3 between 5 and 50

087 While Loops Problem Set Solutions 7:28

While Loops Solutions

088 Annoy-O-Matic Code Along 7:15

Requirements

Annoy-O-Matic Solution

089 Intro to For Loops 4:30

Objectives

For Loop Syntax

for(init; condition; step){
  //run some code
}

For Loop Example

Printing numbers from 1-5 with a for loop

for (var i = 1; i <=5; i++){
  console.log(i)
}

Another For Loop Example

printing all the letters in a string

var str = "hello"
for(var i = 0; i < str.length; i++){
  console.log(str[i])
}

for loop basics

090 For Loops Quick Exercises 2:18

Exercise 1

for (var i = 0; i < 16; i +=8) {
  console.log(i)
}

Exercise 2

var str2 = "ahceclwlxo"
for(var i = 1; i < str2.length; i+=2){
  console.log(str2[i])
}

091 Loops Problem Set 1:06

For Loops Problem Set

  1. Print all numbers between -10 and 19
  2. Print all even numbers between 10 and 40
  3. Print all odd numbers between 300 and 333
  4. Print all numbers divisible by 5 AND 3 between 5 and 50

092 For Loops Problem Set Solution 6:26

solutions

10 JavaScript Basics – Functions

093 Unit Objectives 2:02

Objectives

094 Introduction to Functions 5:46

Objectives

Functions let us wrap bits of code up into reusable packages. They are one of the building blocks of JS.

Declare a function:

function doSomething() {
  console.log("hello world")
}

Call a function:

doSomething()

Return the definition of a function:

doSomething

095 Arguments 8:36

writing functions that take inputs (arguments)

function square(num) {
  console.log(num * num)
}

call square() and pass a value

square(10) //prints 100
square(3) //prints 9

Another example:

function sayHello(name){
  console.log("Hello there " + name + "!")
}

call the example:

sayHello("Tunis") // prints "Hello there Tunis!"

Take multiple arguments

function area(length, width){
  console.log(length * width)
}
area(5,4) //20

096 The Return Keyword 9:12

capture the value of a function with return

function square(x){
  return x * x
}

Notes

Another example

//this function capitalizes the first char in a string
function capitalize(str) {
  if (typeof str === "number") {
    return "that's not a string!"
  }
  return str.charAt(0).toUpperCase() + str.slice(1)
}

var city = "paris" //"paris"
var capital = capitalize(city) //"Paris"
var num = 37
var capital = capitalize(num) //"that's not a string!"

Function declaration vs. function expression

//function expression
function sum(a, b) {
  return a + b
}

//function declaration
var sum = function (a, b) {
  return a + b
}

097 functions Quiz 1:53

Exercise 1

function test(x,y){
  return y - x
}
test(10,40)

Exercise 2

function test(x) {
  return x * 2
  console.log(x)
  return x / 2
}
test(40)

098 functions problem set 3:17

isEven()

Write a function isEven() which takes a single numberic argument and returns true if the number is even and false otherwise.

factorial()

Write a function factorial() which takes a single numerica argument and returns the factorial of that number.

kebabToSnake()

Write a function kebabToSnake() which takes a single kebab-cased string argument and returns the sanke_cased version. Basically replace "-" with "_".

099 Functions Problem Set Soultions 14:31

Functions Solution

100 Scope Code Along 6:13

Introduction to JS Scope

101 Scope Quiz 2:35

var num = 8
function doMath(){
  num+=1
  if(num % 5 === 0){
    return true
  } else {
    return false
  }
}
num+=1
doMath()

What does the call of doMath() above return?

102 Higher Order Functions 5:45

Higher order functions are functions that take another function as an argument, or return another function.

An example with setInterval(anotherFunc, timeInMilliSec)

11 JavaScript Basics – Arrays

103 Unit Objectives 2:35

Arrays are a data structure for managing lists of data. Objectives:

104 Introduction to Arrays 9:02

Fundamentals

Few more things

105 Array Methods 10:44

Visit the Arrays MDN to see a list of all methods, but these are the six main ones:

push(val) and pop()

shift() and unshift()

indexOf()

slice()

copy parts of an array. zero, one, or two number arguments can be passed to slice()

106 Arrays Quiz 2:55

exercise 1

exercise 2

107 Todo list code along part 1 8:24

Todo List Part 1

108 Array Iteration 17:01

Objectives

for Loop for array iteration

forEach() array method

109 Quick array iteration challenge 3:51

Iteration exercise

110 Todo List Code Along Part 2 12:18

todo list part 2

111 Array Problem Set 3:17

printReverse()

Write a function printReverse() that takes an array as an argument and prints out the elements of the array in reverse order. (You don't need to actually reverse the array itself).

isUniform()

Write a function isUniform() which takes an array as an argument and returns true if all elements in the array are identical

sumArray()

Write a function sumArray() that accepts an array of numbers and returns the sum of all numbers in the array

max()

Write a function max() that accepts an array of numbers and returns the maximum number in the array.

112 Array Problem Set Solutions 10:21

Array Problem Solutions

113 Building a forEach 16:59

Writing a function that accepts a function as an argument

12 JavaScript Basics – Objects

114 Introduction to Objects 9:30

115 Comparing Objects and Arrays 6:28

116 Nested Objects and Arrays 4:31

117 Objects Quiz 3:10

118 Movie database exercise 9:26

Create an array of movie objects. Each movie should have a title, year, rating, and hasWatched properties. Iterate through the array and print out something that looks liKe:

moviesDB example

119 Adding Methods to Objects 6:47

Topics:

A method is just a function that is a property inside an object.

var obj = {
  add: function(x,y){
    return x + y
  }
}

You can call this function using 'dot syntax' followed by the open/close parentheses used to call any function.

obj.add(3,4) returns 7

120 The Keyword this 6:20

An example of using this to access property values of an object within a function of that object.

var comments = {
  data: ["lovely stuff!", "meh.", "not my cup of tea"],
  print: function(){
    this.data.forEach(function(comment){
      console.log(comment)
    })
  }
}

Calling comments.print() will print each comment from the data property array.

13 DOM Manipulation

121 Introduction to the DOM 4:32

Objectives

122 Defining the DOM 6:49

DOM: Document Object Model

In the console use console.dir(document) to view the document object's properties of a particular page.

123 Select and Manipulate 5:22

The Process

124 Important Selector Methods 16:05

Some example selectors to try in the console

Common Methods to select elements in the DOM

The docuement comes with a bunch of methods for selecting elements. We're going to learn about the following 5:

125 Selector Exercise 4:17

Four ways to select the first paragraph <p id="first" class="special">

var par1_1 = document.querySelector("p")
var par1_2 = document.getElementById("first")
var par1_3 = document.querySelector(".special")
var par1_4 = document.querySelectorAll(".special")[0]

126 Manipulating Style 10:05

A few ways of manipulating elements:

127 Manipulating Text and Content 9:37

Text Content

128 Manipulating Attributes 6:20

Get and Set attributes

129 Playing with Google Code Along 11:23

14 Advanced DOM Manipulation

130 Introduction to Events 13:31

DOM Events

The Process

We select an element and then add an event listener

The Syntax

To add a listener, we use a method called addEventListener

131 Color Toggle Exercise 9:37

Color Changer

Toggle the body's background color between purple and white, when a button is clicked

Color Changer Complete

132 Score Keeper Project Part 1 17:10

Score Keeper

133 Score Keeper Project Part 2 18:59

Score Keeper

134 Other Types of Events Todo List 11:22

Another To Do with DOM manipulation

135 Counting Events Exercise 4:39