JavaScript Hello World

Topics covered:

1. Attaching a .js file to an HTML web page
2. Running your first JS code: 'Hello World'
3. Google Chrome's Dev Tools + the Console.
4. Calling Functions (console.log)
5. HTML buttons
6. Writing functions
7. Demo: Button Onclick Event Changes innerHTML of h1

Resources:

w3Schools JavaScript Tutorials (start): https://www.w3schools.com/js/

JavaScript Events and Event Handlers: https://www.w3schools.com/js/js_events.asp

console.log() : https://www.w3schools.com/jsref/met_console_log.asp

Scrima Lessons 1-7

1. Setting up a JS file
2. Console output: w3 Tutorial
3. Variables (Use let instead of var): w3 Tutorial
4. Arithmetic Operations and Incrementing: w3 Tutorial
5. Assignment: w3 Tutorial

For the next few weeks you will "learn at your own pace" by following along and coding for yourself with an online video course posted by Scrimba.

The Scrimba course will guide you through the creation of 3 Web-App HTML/CSS/JavaScript projects which you will complete. .. However, after the First and Third projects, you will demonstrate your new skills by making a similar app of your own specific design/code by yourself.

The entire Course is in one *LONG* video. Luckily, video has mostly-complete YouTube Chapter Bookmarks, so you can easily jump to each chapter in the description below the video.

*At the end of each class, you may wish to write down the exact time code where you finished the previous day. eg, in your JavaScript file*

The course outline is here: https://scrimba.com/learn/learnjavascript.

JS Exercise #1: Passenger Counter App:

1. For this exercise, you will be completing Scrimba's Learn JS Course lessons 1-28, 31 OR watch on YouTube: The Course Video is HERE: https://www.youtube.com/watch?v=jS4aFq5-91M and watch from 0:00 to 1:15:42 (this may take several classes to watch, pause, and follow along with)
2. Skip lessons 29 and 30, you do not need to deploy your project to Netlify.
3. In your own Text Editor (VSCode or Notepad++) create the entire project for yourself as you watch the video.
4. Ms. Wear will mark this in class. Demonstrate the app working with the console open and no js errors, validate the CSS and the HTML.

Scrimba Lessons 8-14

1. Adding a button : w3 Tutorial
2. onclick event listener in HTML : w3 Tutorial
3. functions : w3 Tutorial

Scrimba lessons 16-17 (I think modifying CSS not covered in Scrima?)

1. The Document Object Model (how JavaScript accesses parts of your html web page and its styles): https://www.w3schools.com/js/js_htmldom.asp
2. innerText and innerHTML : w3 Tutorial
3. modifying CSS with JS : innerHTML w3 Tutorial, innerText w3 Tutorial

Scrimba lessons 18-25

1. Intro to Strings : w3 Tutorial
2. Data Types in JavaScript and Weak Typing: https://www.w3schools.com/js/js_datatypes.asp
3. Parsing a String to a Number: W3 Tutorial
4. Adding Strings (Concatenation) and += : Tutorial

Running JavaScript immediately the header loads, and the problem with doing this.

JavaScript's window.onload event : Tutorial

Event Listeners vs Event Handlers: Tutorial

Altering Styles (CSS) using JavaScript.: w3 Tutorial

Write a American Football Score Board app in JavaScript, HTML, and CSS.

1. The layout should be similar to the one in the image.
2. Use your own creativity to make it look good. The colors/fonts/size does not have to be the same as in the image.
3. Points are scored as follows:
   Touchdown: 6 points
   Field Goal: 3 points
   Safety: 2 points
   Conversion (Field Goal): 1 point
   Conversion (Touchdown): 2 points
4. Create a button for each type of points scored (there are 5 types listed above) underneath the Home score and the Guest score that add the appropriate value to the score.
5. Create a single "reset" button that resets both scores to 0

Assessment

1. All criteria met and everything works correctly (/10)
2. HTML and CSS Validate and No JS Errors(/5)

Scrimba Lessons: Build a Blackjack Game Lessons 3-9

if statements : w3 Tutorial

boolean expressions : w3 Tutorial

boolean variables : Tutorial

Continue to "learn at your own pace" by following along and coding for yourself a Blackjack Game with the next part of the video course.

Step 1: Complete the Blackjack Game:

1. Do the BlackJack lessons 1-54 at Scrimba Learn JavaScript.
   
   

   OR

   Watch the Youtube video. The Blackjack section of the video starts here: https://youtu.be/jS4aFq5-91M?t=5488. Follow the YouTube video from 1:31:28 to 4:15:00 (this will take several classes to watch, pause, and follow along with)

   The video has mostly-complete YouTube Chapter Bookmarks, so you can easily jump to each chapter in the description below the video. *At the end of each class, you may wish to write down the exact time code where you finished the previous day. eg, in your JavaScript file.

2. In your own Text Editor (ex. VSCode) create the entire project for yourself as you follow the lessons or watch the video.
3. When the instructor breaks out a new 'practice / 'deep-dive' JavaScript code file to teach a lesson specifically about the following concepts separately, DON'T delete your all your code! Instead, open a new web browser tab and go to OnlineGDB and immediately choose the language: JavaScript(Rhino).
   
   Use OnlineGDB to test the JS from the lessons listed below. The other lessons can be done in VS Code. In OnlineGDB, use print() instead of console.log().
   1. Lesson 3: If/Else Statements and Conditionals
   2. Lesson 21: Intro to Arrays
   3. Lesson 22: Array Indexes
   4. Lesson 23: Arrays with Multiple Data-Types
   5. Lessons 28-30: 'For' Loops and For Loops to iterate through Arrays and DOM
   6. Lesson 34: Returning values in functions
   7. Lesson 36 - 40: Generating Random numbers with Math.random() and Math.floor()
   8. Lesson 45 and 46 and 47: The logical AND operator and the logical OR operator.
   9. Lesson 50 and 51: Intro to Objects, Writing Your Own Objects

Step 2: Add Functionality

Once you have finished the program matching the video at 4hrs15mins, add:

1. At the bottom of the game interface, create and style text that says 'Player Name', a text box, and add a 'Enter' button that allows the user to save their name to the program. Save their name in the player object. and add the user's name in the game interface next to their $ chips value. For example, if the player was named Suzy, it would say "Suzy $200". Hint: Read example 1 of this tutorial.
2. Disable all buttons until after the user has submitted their name. When disabled, the button should be grey. When enabled, the button should be colored (orange or whatever color you've chosen). Read this Tutorial
3. The "Next Card" button should only be enabled while the game is in play.
4. Add a "Stand" button next to the "Next Card" button. If the player stands before going over 21, the game is completed. The Stand button should only be enabled when the game is in play.
5. Once a game is in play, disable "Start Game" again until the game is complete.

Scrimba Lessons: Build a Blackjack Game 21-23

Arrays: w3 Tutorial

Different ways of creating an array. w3 Tutorial

Accessing/Printing a whole array at once.

Accessing/Printing a specific value in the array (by index.)

How long is my array? (How many indices (indexes) are in an array?)

Array methods: pop, push, length - w3 Tutorial

Scrimba Lessons: Build a Blackjack Game 28-30

For loops: w3 Tutorial

Iterating through arrays: FreeCodeCamp Tutorial

Arrays returned by DOM (ie getElementsByClass): Explained in a fairly technical tutorial.

Scrimba Lessons: Build a Blackjack Game 36-47

Random Numbers W3 Tutorial

AND, OR operators W3 Tutorial

Scrimba Lessons: Build a Blackjack Game 50-52

Objects: w3 Tutorial

Text boxes and submit buttons without forms. (Read example 1 of this tutorial)

Enabling and Disabling buttons. Tutorial

This exercise is for students with previous programming experience who have finished the Black Jack Project early.

Write a Interactive Color Mixer app.