Today’s goals:

• Continuing learning basic JavaScript
  • Review what we learned before vacation
  • Functions and events
  • DOM and DOM events

 Today’s featured site:

• http://weavesilk.com/ – This relaxing site is also available as a mobile app

 Quick Review

• What does the alert function do?
• In your own words, what is:
  a function?
  an event?
  a variable?

 Practicing JavaScript Basics

Click on each of the following links to complete the exercise. Don’t click go to next challenge since you’re not doing all of them. Once you complete one correctly, close it and then come back here to click on the next exercise.

Before we do these, let’s see again https://www.javascript.com/try 

1. Add a single or multi-line comment
2. Declare a variable
3. Initializing variables with the assignment operator (= equal sign)
4. Declare string variables
5. Concatenating strings with the plus operator
6. Constructing strings with variables
7. Write functions
8. Increment a number (increase)
9. Decrement a number (decrease)

 Onclick, Onload, and Other DOM Events

• We used JavaScript’s onclick and onload events to have a pop-up message appear when a button was clicked and when the webpage first loads. Let’s check out the page we created to review the code. Both the onclick and onload events were used with functions that made the pop-ups appear. Those functions didn’t execute until the events triggered them, in this case either the click of a button or the loading of a webpage.
• Quick practice: Go to https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_events1 and complete the 3 JS Events exercises
• Remember, because JavaScript is a programming language it’s basically the “big boss” in the browser and can access and do things that HTML and CSS can’t. The onclick and onload events are one of several HTML DOM (document object model) events that JavaScript can execute on different HTML elements on a webpage.
• From W3Schools : When a webpage is loaded, the browser creates a document object model (DOM) of the page.
• With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can change all the HTML elements, attributes, and CSS styles in the page; JS can add or remove existing HTML elements and attributes; JS can create new HTML events in the page; JS can react to all existing HTML events in the page.
• Here is a good list of HTML DOM events  that allow JavaScript to do different things when users scroll, type, resize a webpage, etc.
• To do:
  1. Let’s practice– open up Notepad++ and create a new webpage with opening and closing html, head, title, and body tags.
  2. Let’s have a message pop-up when the browser window is resized. First, add onresize=”showAlert()” after body in your first body tag.
  3. Now, let’s write a function called showAlert and have the message be “You have resized the browser window.” Add some opening and closing script tags in the head section. Type the word function then showAlert(). Add a curly bracket and on another line type alert, a space, (“You have resized the browser window.”); and then close the curly bracket.
  4. Save your page, launch it, and then resize the browser window. What happens?
  5. Now let’s have a message pop-up when you copy text. First, add an h3 with your name. After h3, add oncopy=”textCopy()”.
  6. Now we have to create a function called textCopy. Below your showAlert function, type function textCopy() then curly bracket. Then on another line type alert, a space, (“You have copied text.”); and then close the curly bracket. Preview it in the browser and copy some text to see what happens.
  7. Coming up with JavaScript: The getElementById() method