-->

Coding 101: Lesson 2

Programming Overview with JavaScript

Coding 101: Lesson 2 - Programming Overview with JavaScript

2.0 Intro

Lesson 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

l2Projects

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 describes what your code will do in plain English. This is very helpful to outline a new coding project. Example:

Prior Lesson Reminders



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 else, for loops, and while loops

Most of a 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 below JS code

While (true) do…:

This will execute code until the statement is false. Note that this loop can run infinity times if the statement is always true so be careful not to accidentially create an “infinite loop”!


Project 2.1. Lottery App (part 1 of 2)

In this project, the user picks 4 lottery numbers. The lottery game then calls 7 numbers 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 () {}

Project 2.2. Multiplication Quiz 2.0

Try it yourself before going to next section.

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! The user continues to play the game until they get one wrong. The program then tells user number that they got correct.

Remember to use:

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

Project 2.3. # Memorizer

Try it yourself before going to next section. The user is given a random 4 digit number. The use must memorize it, press ok, and then re-enter it. If the user gets it right, the user plays again with 5 digits, then 6, then 7…until they get one wrong.

Remember to use:

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

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 () {}

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

Dictionaries


Project 2.5. Friend Facts

Try it yourself before going to next section.

The user is asked what is their friends name, favorite cake type, birthday, and hometown. Then the user can type in what they want to know about their friend or enter finish.

Remember to use:

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

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 so that the functions can perform actions on those variables; "Arguments" are values of parameters

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

"Calling" a 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

The user starts off with $100 and then places a bet. The user rolls two dice. If the dice rolls a 7, then user gets 6x their money, otherwise, they lose it all. The user continues to play until they say stop or they lose all of their money. If the user loses all of their money, they get one chance to win $10 by rolling a 12.

Remember to use: functions


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

Create an object constructor called MovieStar. MovieStars should take name, birthday, top grossing movie, and spouse. The Constructor should have a method that greets the user.The greeting should tell user what the celebrity's name is and their highest grossing movie. You should also 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

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. Create a “MovieStar” object to store each celebrities data. Then put all the stars into a single list. The game should ask the user 3 random questions about the celebrity. Uou can use the following data to save yourself time.

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

Remember to use:

  • Object constructors
  • Lists

Coding 101: Lesson 2 - Programming Overview with JavaScript

Lesson Recap and Homework

Recap

In this lesson, you learned about:

  • Scripts
  • Scripting languages vs Mark-up languages
  • Pseudo code
  • Expressions operators
  • If true then, else if...else...
  • For loops
  • While loops
  • Data types: Booleans, Lists, and Dictionaries
  • Object Oriented Programming
  • Object Properties, Events, Methods
  • Built-in Objects
  • Object / Class Constructors
  • Lists of Objects

Homework

Create the following programs and submit it to coding101@upriseuniversity.com before moving to the next lesson.

  • Recipe Book: Create a recipe object that includes recipe name, ingredients, and directions. Then create 5 of your favorite recipes. When program loads, user should be prompted with the names of the 5 different recipe options. The user can select any option by entering the number 1, 2, 3, 4, or 5. The program then provides the ingredients and instructions to make that recipe.
  • Multiplication Game 3.0:Let the user choose between easy, medium, and hard. Easy is multiplying two 2 digit numbers that are multiples of 10, hard is two 2 digit numbers, and medium is one 2 digit number multiplied by a 2 digit number that is a multiple of 10. The user continues to play until the get one wrong. Extra credit: add a 60 second timer that ends the game automatically!

Prior Lesson Next Lesson