Aug 15 - Aug 29

Introduction to HTML

LESSON OBJECTIVES - JavaScript

1. CSS Assessment
2. JS1: Go to w3schools.com - JavaScript Tutorial
3. Click on JS Introduction - What JavaScript Can Do?
4. Click on JS Where To
5. Click on JS Comments
6. Click on JS Output

Go to the W3Schools JavaScriptTutorial website, scroll down and Click on:

READ and complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. READ the section on JS Introduction - Click Try it Yourself
• document.getElementById("demo").innerHMTL=
• document.getElementById('myImage').src=
• document.getElementById("demo").style.fontSize=
• document.getElementById("demo").style.display=
2. READ the section on JS Where To (Internal) - Click Try it Yourself
3. READ the section on JS Comments - Click Try it Yourself
4. READ the section on JS Output - Click Try it Yourself
   • Writing into an HTML element, using innerHTML
   • Writing into the HTML output using document.write( )
   • Writing into an alert box, using window.alert( ).
   • Writing into the browser console, using console.log( )
5. IN-CLASS Exercise JS Output (innerHTML)

Search the Internet for the Top JavaScript IDEs

1. JS2: Go to w3schools.com - JavaScript Tutorial
2. Click on JS Statements
3. Click on JS Variables
4. Click on JS Operators
5. Click on JS Data Types

Go to the W3Schools JavaScriptTutorial website, scroll down and Click on:

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. IN-CLASS Demonstration JS Variables (Click on Link)
2. IN-CLASS JS Variables Worksheet (Click on Link)
3. Circle Circumference and Area
4. Temperature Conversion

LESSON OBJECTIVES - JavaScript

1. Go to the W3Schools JavaScriptTutorial website, click on JS Variables
2. More Variable Exercises

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. Income Tax
2. Books
3. Snacks

• Scroll Down to the freeCodeCamp.org comment section and expand to the course content with time codes.
• Watch the Videos from 1 - 29 (30 minutes)

LESSON OBJECTIVES - JavaScript

1. Go to the W3Schools JavaScriptTutorial website, click on JS Functions

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. Exam Average
2. Class Ends at 4:30 - Fall Fest

• Scroll Down to the freeCodeCamp.org comment section and expand to the course content with time codes.
• Click on (0:51:41) Write Reusable JavaScript with Functions
• Search on the page for Function to watch the other sections.

LESSON OBJECTIVES - JavaScript

1. Go to the W3Schools JavaScriptTutorial website, click on JS Events
   • Common HTML Events
     • onchange, onclick, onmouseover, onmouseout, onkeydown, onload

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. Exam Average
2. Gross Pay
3. Total Bill

• Scroll Down to the freeCodeCamp.org comment section and expand to the course content with time codes.
• Watch the Videos from #56 - #72 (Understanding Boolean Values - Changing If Else Statements)

LESSON OBJECTIVES - JavaScript

1. Go to the W3Schools JavaScriptTutorial website, click on:
   • JS Boolean and JS Comparison
   • JS IF Conditions
   • JS Prompt Box

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

Go to the W3Schools JavaScriptTutorial website

1. JS Comparisons Exercises 1 - 3
2. JS Conditions Exercises 1 - 2
3. Correct Answer
4. Grade Rank
5. Typhoon

LESSON OBJECTIVES - JavaScript

1. REVIEW: JS IF Conditions (see above)
2. JS Switch
   • JS Switch Numeric Examples
   • JS Switch String Examples

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. Grading Scale
2. Two Nums
• Displaying an Image in a document.getElementById
• Modify #2 to display pictures (first, second, equal)

LESSON OBJECTIVES - JavaScript

1. JS Switch with Comparison Operators
2. JS String Methods - converting to lower or uppercase
   • toLowerCase ( ), toUpperCase( )

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. Population
2. Regions

• Scroll Down to the freeCodeCamp.org comment section and expand to the course content with time codes.
• Watch the Videos from #37 - 45 (Store Multiple Values in one Variable using JavaScript Arrays - Manipulate Arrays With unshift())

LESSON OBJECTIVES - JavaScript

1. JS Arrays
2. JS Arrays Methods
   • POP( )
   • PUSH( )
   • SHIFT( )
   • UNSHIFT( )
3. JS Array Sort
   • SORT( )
   • REVERSE( )

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. JS Arrays Exercises 1 - 3
2. JS Array Method Exercises 1 - 3
3. Nums & Employees - Array Exercise
4. Styles - Array Methods Exercise
5. View the following JS Project Examples before Thursday, October 24, 2019

JavaScript Project Examples - Click the following links to view the HTML & JavaScript code at w3schools.

1. Convert Temperature
• Go to W3Schools, view HTML & JavaScript code to Convert Temperature
• YouTube Video - Temperature Converter (Part 1 - HTML & CSS)
• YouTube Video - Temperature Converter (Part 2 - JavaScript)
2. Convert Weight
• Go to W3Schools, view HTML & JavaScript code to Convert Weight
• YouTube Video - Weight Converter

LESSON OBJECTIVES - JavaScript

1. JavaScript Assessment 1

Reminder JavaScript Projects are 50% of your Grade

1. Project: Create a JavaScript Quiz
   • Click on this Link to Download the 3 files from Google Drive (you must use your guamcc.edu email address).
   • DUE: Tuesday, October 29, 2019 by 4:00 p.m.

LESSON OBJECTIVES - JavaScript

1. Repeating Code
   • JS For Loop
   • JS While Loop
   • JS Examples

Complete the following IN-CLASS Exercise (Use the W3Schools online editor):

1. JS For Loops Exercises 1 - 2
2. JS While Loops Exercises 1 - 2
3. IN-CLASS Exercise - Repeating Code

• Scroll Down to the freeCodeCamp.org comment section and expand to the course content with time codes.
• Watch the Videos from #95 - 100 (Iterate with While and For Loops)

NEXT Project: Create a Random Quote Generator

1. Create a JS_Quote Folder
   • index.html
   • styles.css
   • app.js