Coding 101: Lesson 2 - Programming Overview with JavaScript Coding 101: Lesson 2 - Programming Overview with JavaScript 2.0 Intro Lessons Overview Basics: Scripts, Pseudo Code, Lesson 1 review Expressions and Operators: Assignment, arithmetic, string, comparison, and logical operators; Various expressions If then for loops: If (true) then…else if (true)…else…, For loops, While (true) do… Data types: String, Float, Integer, List, Dictionary, Boolean Functions: Declaring and calling functions; Passing along parameters Object oriented programming: Properties, Events, Methods, Object / Class Constructors Projects Overview 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 Multiplication Quiz 2.0 (while loop) – User continues to play until they get one wrong. # 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. 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. 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. 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. Celebrity greeting (object constructors) – Create an Object Constructor for movie stars that greets users and tells them the celebrity’s top grossing movie. 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