-->




Coding 101: Lesson 2 - Programming Overview with JavaScript

Coding 101: Lesson 2 - Programming Overview with JavaScript

2.0 Intro

Lessons Overview

  1. Basics: Scripts, Pseudo Code, Lesson 1 review
  2. Expressions and Operators: Assignment, arithmetic, string, comparison, and logical operators; Various expressions
  3. If then for loops: If (true) then…else if (true)…else…, For loops, While (true) do…
  4. Data types: String, Float, Integer, List, Dictionary, Boolean
  5. Functions: Declaring and calling functions; Passing along parameters
  6. Object oriented programming: Properties, Events, Methods, Object / Class Constructors

Projects Overview

  1. App (for loop) – User picks 4 numbers, 7 numbers are all called ranging from 1-100, if user gets 1 number right they win $5, 2 gets $25, 3 gets $525, and 4 gets $275,625
  2. Multiplication Quiz 2.0 (while loop) – User continues to play until they get one wrong.
  3. # Memorizer (while loop) – User is given a random 4 digit number, they must memorize it and then re-enter it, if the user gets it right, the game plays again with 5 digits. Keeps going until user gets it wrong.
  4. Grocery list (add, delete from list) – User can add, delete, or finish the grocery list. App continues until finish is entered in. Each iteration, user is shown entire grocery list.
  5. Friend Facts (dictionary) – is asked what is their friends name, favorite cake type, and birthday, hometown. Then user can type in what they want to know about their friend or enter finish.
  6. Dice Game (functions) – User can place a bet before rolling the dice and then roll the dice. If they roll a 7, they double their money, if they roll a 2, they lose it all.
  7. Celebrity greeting (object constructors) – Create an Object Constructor for movie stars that greets users and tells them the celebrity’s top grossing movie.
  8. Celebrity trivia (objects in a list) – thing as Friends fact except the 3 celebrities are already populated with information as MovieStar objects and put into a stars list. User is asked 3 random questions about the celebrity.




Coding 101: Lesson 2 - Programming Overview with JavaScript

2.1 Basics

“Scripts” are a series of instructions computers can follow one by one; Scripting languages include JavaScript and Python as well as others; These are different from “markup languages” like HTML and CSS that are presentation languages that don’t include any kind of logic or algorithm; We will dive into this more later.

Pseudo Code is plain English describing what your code will do. This is very helpful to outline a new coding project. Example:

Prior Lesson Reminders




Project 2.1. Lottery App (part 1 of 2)

User picks 4 lottery numbers

7 numbers are all called ranging from 1-100; Numbers can be used multiple times

If user gets 1 number right they win $5, 2 gets $25, 3 gets $525, and 4 gets $275,625

Remember to use:

  • for…loop…
  • Math.floor()
  • Math.random()
  • if () {}

Lottery App Project Prompt

Lottery App Project Answer



Coding 101: Lesson 2 - Programming Overview with JavaScript

2.2 Expressions and Operators

JavaScript has a wide range of different operators and expressions; below are some examples



Coding 101: Lesson 2 - Programming Overview with JavaScript

2.3 If then for loops

Most of program’s “brains” comes from if then functions and loops. This is primarily why it is can be smarter than a simple calculator or database.

If (true) then…else if (true)…else…: Can allow computers to make decisions (sort of). A simple example, is an ID checker program. The program asks the user their birthday. If the user is greater than 21 years, it lets them drink. “Else” or otherwise, it doesn’t.

For loops: Allow you to repeat certain functions while something is true. For example, lets say you want to add the numbers 1 through 100 together. Instead of manually writing out 100 numbers and 100 plus signs (ugh), you could use write a for loop that does it for you.

While (true) do…:Will continue to run until the statement is false. Note that this loop can run infinitiy times if the statement is always true so be careful not to accidentially create an “infinite loop”!

If (true) then…else if (true)…else…:

Can allow computers to make decisions (sort of). A simple example, is an ID checker program. The program asks the user their birthday. If the user is greater than 21 years, it lets them drink. “Else” or otherwise, it doesn’t. Below is how to write this in javascript:

For (true) loops:

allow you to repeat certain functions while something is true. For example, lets say you want to add the numbers 1 through 100 together. Instead of manually writing out 100 numbers and 100 plus signs (ugh), you could use write belowJS function

While (true) do…:

Will continue to run until the statement is false. Note that this loop can run infinitiy times if the statement is always true so be careful not to accidentially create an “infinite loop”!

Project 2.2. Multiplication Quiz 2.0

Try it yourself before going to next slide

Create a math quiz that asks the user to multiply two random numbers together

If the user gets the right answer, then alert the user that they got it right, otherwise alert them that they got it wrong

Make the first random number an integer between 1 and 100 and the second random number an integer between 10 and 100 that is a multiple of 10!

User continues to play game until they get one wrong

Program then tells user number that they got correct

Remember to use:

  • while… loop
  • if () {} else {}
  • Math.floor()
  • Math.random()

Multiple Quiz Project Prompt

Multiple Quiz Prompt Answer

Project 2.3. # Memorizer

Try it yourself before going to next slide

User is given a random 4 digit number

User must memorize it, press ok, and then re-enter it

If user gets it right, user plays again with 5 digits, then 6, then 7…until user gets one wrong

Remember to use:

  • while … loop
  • if () {} else {}
  • Math.floor()
  • Math.random()

# Memorizer Project Prompt

# Memorizer Project Answer



Coding 101: Lesson 2 - Programming Overview with JavaScript

2.4 Data types

Most commonly used data types

Strings: letters, words, sentences…Note: To make quotes within quotes use either double quotes on the outside of the string and single quotes on the inside or vice versa. You just can’t put single quotes within single quotes.

  • ‘I am a string’
  • “I’m a string too”
  • ‘I’m a syntax error!!’

Floats: these are numbers

Integers: these are whole numbers

Boolean: special data type that can only have two values: true or false

Lists: lists can include strings, floats, variables, etc. Lists items are ordered starting from 0 up through length of list. For example, below list has 3 items, 1st item is at point 0, 2nd is at 1, 3rd at 2. Commonly used list methods include: push(), pop(), splice(), length, and indexOf().

var new_list = [‘apple’, ‘banana’, ‘orange’]

Dictionary: Includes a series of unordered key: value pairs. The key is used to describe an item and value is associated with that key. It could be a definition, like in an actual dictionary or an attribute. Examples:

  • var quick_dict = {‘tiger’: ‘a large cat’, ‘ice cream’: ‘a tasty desert’};
  • var my_hotel = {‘address’: ‘111 main street’, ‘rooms available’: 13};

Lists

Project 2.1. Lottery App (Part 2 of 2)

Try it yourself before going to next slide

User picks 4 lottery numbers

7 numbers are all called ranging from 1-100; Numbers can be used multiple times

If user gets 1 number right they win $5, 2 gets $25, 3 gets $525, and 4 gets $275,625

Remember to use:

  • var new_list = [ ]
  • new_list.push(‘apples’,’bananas’)
  • for…loop…
  • Math.floor()
  • Math.random()
  • if () {}

Lottery App (Part 2) Project Prompt

Lottery App (Part 2) Project Answer

Project 2.4. Grocery list

Try it yourself before going to next slide

User can add or delete items from  grocery list

App continues to run until user types in finish

Each iteration, user is shown entire grocery list

Remember to use

  • while… loop
  • if () {} else {}
  • list

Grocery List Project Prompt

Grocery List Project Answer

Dictionaries

Project 2.5. Friend Facts

Try it yourself before going to next slide

User is asked what is their friends name, favorite cake type, birthday, and hometown

Then user can type in what they want to know about their friend or enter finish.

Remember to use:

  • dictionary
  • while… loop
  • if () {} else {}

Friend Facts Project Prompt

Friend Facts Project Answer



Coding 101: Lesson 2 - Programming Overview with JavaScript

2.5 Functions

Declaring and calling functions; Passing along parameters

Functions are series of statements that have been grouped together and can be run whenever function is called

Parameters are variables that you can pass to functions that they can perform actions on; Arguments are values of paramters

“Declaring” a function is creating the function. Below is an example:

Calling function will run code in function

Global variables vs local variables: If a variable is declared within a function, then it is a local variable that can only be used or accessed within that function. If a variable is declared outside a function, then it is a global variable and can be used or accessed anywhere.

Project 2.6. Dice Game

Try it yourself before going to next slide

User starts off with $100 and then places a bet

User rolls two dice

If dice roll a 7, then user gets 6x their money, otherwise, they lose it all.

User continues to play until they say stop or they lose all of their money

If user loses all of their money, they get one chance to win $10 by rolling a 12

Remember to use: functions

Dice Game Project Prompt

Dice Game Project Answer



Coding 101: Lesson 2 - Programming Overview with JavaScript

2.6 Object oriented programming

Most programming languages allow you to build objects (e.g., house, car, person ,..) and give those object properties, events and methods. Objects are constructed in a similar way to how functions and dictionaries are built.

Properties: characteristics about object; have both “key” that describes property (e.g., address) and “value” (e.g., 111 main st)

Events: These run programs when different events occur (e.g., hotel room booked, car breaks, button clicked)

Methods: Functions that are specifically built for each object (e.g., book_hotel_room(), find_room_price(), …)

Built-in Objects: web browsers and application interfaces typically come with built in objects and methods that make it easier to create webpages or applications.

Object / Class Constructors

Declare a new class that you can use to construct objects

Create a new object using the class you created

Recall or change values from the object

Create a list of objects

Project 2.7. Celebrity Greeting

Try it yourself before going to next slide

Create a object constructor called MovieStar

MovieStars should take name, birthday, top grossing movie, and spouse

Constructor should have a method that greets the user

Greeting should tell user what celebrity's name is and highest grossing moving

Create a new object called tom_cruise and have it greet the user

Remember to use:

  • Object oriented programming – object properties and methods
  • Object Constructor

Celebrity Greeting Project Prompt

Celebrity Greeting Project Prompt

Project 2.8. Celebrity trivia

Try it yourself before going to next slide

This is similar to the Friends Fact project except you will have 3 celebrities that are already populated with information about their name, birthday, top grossing movie, and spouse

For this exercise, you can use the following data

  • MovieStar('Tom Cruise', 'July 3, 1962', 'Mission Impossible: Ghost Protocol ($695M)', 'single')
  • MovieStar('Dwayne Johnson', 'May 2, 1972', 'Furious 7 ($1,500M)', 'Lauren Hashian')
  • MovieStar('Scarlett Johansson', 'November 22, 1984', 'Avengers: End Game ($858M)', 'single')

Create a “MovieStar” object to store each celebrities data

Put all stars into a single list

User is asked 3 random questions about the celebrity

Remember to use:

  • Object constructors
  • Lists

Celebrity Trivia Project Prompt

Celebrity Trivia Project Answer