Intro to JS Solutions

Purpose & Connections

JavaScript is THE language of the web and this is scholars’ first lesson on it at camp@ It is essential that scholars start off on a strong foot with fundamentals of data types and variables.

If your scholars have previous experience, in JavaScript or other programming languages, this lesson may feel very straightforward to some. The concepts presented here are present in other languages; but syntax may slightly differ.

Timing

Estimated time: 1 hour - 1 hour, 30 minutes

Overview, by sub-header

  • Preview Vocabulary
  • Warm Up
  • What is JavaScript?
  • Data Types
  • Strings
  • console.log()
  • alert()
  • Variables
  • Numbers
  • Practice

Warm Up

The Flag Fest game will be referenced throughout this lesson for real-world examples of how variables, string and numbers are used. The purpose of having the scholars play the game is just for them to see the connection to a real application!

Turn & Talk

Think back to Flag Fest that you played in the Warm Up, and feel free to reference it while answering these questions.

  • What are some of the HTML elements that were probably used?
    • h1 for the title, buttons on the home page for each country (img nested inside maybe?), button for play and back, img for each flag when playing the game, one button for each option, etc.
  • What are some of the things the site does?
    • The site creates a customized game for the user - the user can pick a country, and pick 10 or all flags to be quizzed on. It checks if they match each flag to the correct country name. It determines the score at the end. It lets the user play again. It lets the user go “back”.
  • When do things change on the page?
    • Things only really change on the page when the user prompts it by clicking a button.

Try It: Strings

~ "200"
=> "200"

~ "Karlie Kloss"
=> "Karlie Kloss"

~ "#3110 ^^0510 **** ~~~ +_+_+_+_  123"
=> "#3110 ^^0510 **** ~~~ +_+_+_+_  123"

Try It: Strings and Variables

Declare a variable for each prompt below. Then, print it out to the console.

A variable called favoriteColor that holds your favorite color

var favoriteColor = "rebeccapurple";
console.log(favoriteColor);
// => "rebeccapurple"

A variable called pet that holds the name of a pet

var pet = "Oscar";
console.log(pet);
// => "Oscar"

A variable called friend that holds the name of a friend

var friend = "Aurora";
console.log(friend);
// => "Aurora"

A variable called goal that holds one of your 2020 goals. Remember, you can include spaces in a string!

var goal = "Meditate every day!";
console.log(goal);
// => "Meditate every day!"

A variable called hobby that holds one of your hobbies

var hobby = "Drawing";
console.log(hobby);
// => "Drawing"

Try It: Interpolation

If you have the strings “Karlie” and “Kloss” in the following variables:

var first = "Karlie";
var last = "Kloss";

What code can you write to output the string “KarlieKloss”?

console.log(`${first}${last}`);

What code can you write to output the string “KlossKarlie”?

console.log(`${last}${first}`);

What code can you write to output the string “Karlie Kloss”?

console.log(`${first} ${last}`);

What code can you write to output the string “Kloss Karlie Kloss Karlie”?

console.log(`${last} ${first} ${last} ${first}`);

What code can you write to output the string “I love Karlie”?

console.log(`I love ${first}`);

Turn & Talk: Incrementing Numbers

With your partner, brainstorm some examples of numbers incrementing in real apps that you use.

  • This is HUGE in social media! The number of likes on a post increases by one every time a different users taps the like/heart button
  • YouTube keeps track of how many times a video has been viewed - each time a user views it, they increment that number
  • Netflix keeps track of how many times each show and episode has been watched by incrementing a counter. Have you noticed the new “Top 10” feature? That wouldn’t be possible without the counter and incrementing.

Try It: Numbers & Operators

Start with these numbers:

var a = 12;
var b = 65;
var c = 31;
var d = 98;

Write code to find the average of these four numbers.

var average = (a + b + c + d) / 4;

Medium Challenge: On average, there are 23.5 scholars at each Kode With Klossy camp this year. If there are 36 camps taking place, about how many scholars are attending in total?

var scholars = 23.5 * 36;

or, a more dynamic solution:

var scholarsPerCamp = 23.5;
var camps = 36;
var scholars = scholarsPerCamp * camps;

Practice

Declare three variables: username, caption, numberOfLikes, and numberOfComments. Assign each variable to an appropriate value.

var username = "marshmallowsammy";
var caption = "As you know, samoyeds shed a lot!"
var numberOfLikes = 225500;
var numberOfComments = 6884;

Print out a sentence to the console using at least two of the variables.

console.log(`${username}s recent post with the caption of ${caption} already has ${numberOfLikes} likes! WOW!`);

Now, re-assign the number of likes to a number greater than what it was initially assigned to.

numberOfLikes = 225600;

Print out a sentence to the console that includes the caption and numberOfLikes.

console.log(`${username}s recent post with the caption of ${caption} already has ${numberOfLikes} likes! WOW!`);

Medium Challenge: Declare at least 5 variables that store information about you! Some possibilities are favoriteColor, gradeLevel, or favoriteFood. Assign them to appropriate values. Use interpolation to print out a sentence about yourself using all 5+ variables!

var name = "Lindsey";
var favoriteFood = "Chipotle";
var favoritePuppy = "Marshmallow";
var hobby = "koding";
var bestFriend = "Latrina";

console.log(`Hi! My name is ${name} and this is my best friend ${bestFriend}. We love to eat at ${favoriteFood} together and watch videos of ${favoritePuppy}. That is, when we're not ${hobby}.`);