Shape of the Day:

• Review Terms from Yesterday
• Practice some JavaScript Basics
• Onclick, Onload and Other DOM Events
• Time for Practice with JavaScript

Website of the Day:

http://destroyer.la/ – A pretty cool website that is highly responsive. With the help of JavaScript, see what happens when you press space bar after scrolling to the bottom!

1. Review Terms from Yesterday

2. Practice some JavaScript Basics

• With the links below, open the window and try the exercise. You will know you have completed the exercise correctly when you click Run the Tests and an dialogue box shows like this:

 

Exercise	Answer
Add a single or multi-line comment
Declare a variable	Answer
Initializing variables with the assignment operator (= equal sign)	Answer
Declare string variables	Answer
Concatenating strings with the plus operator	Answer
Constructing strings with variables	Answer
Write functions	Answer
Increment a number (increase)	Answer
Decrement a number (decrease)	Answer

 

3. Onclick, Onload and Other DOM Events

• Return to your brackets document from yesterday and review what you did when using JavaScript’s onclick and onload events. These functions did not execute unless the events triggered them (the click of a button or the loading of a webpage).
• More practice: Click here and complete the 3 JS Events exercises – if you get stuck tell it to show you the answer!
• onclick, onload and onmouseover are a few of several HTML DOM (document object model) events that is only executed through the use of JavaScript. It uses different HTML elements on a webpage!
• Take a look at the DOM tree on W3 Schools here
• With the object model, JavaScript can create dynamic HTML by changing the elements, attributes, and even CSS styles in the page. It can add or remove existing HTML elem,ents and attributes, create new HTML events, react to all existing HTML events…. remember JavaScript is a WIZARD!
• Here is a nice long list of DOM events that users can do when viewing a webpage

4. Time for Practice with JavaScript

• Open up a new Brackets document and call this one javascript2.html
• Create a message pop-up when the browser window is resized – to do this add onresize=”showAlert()” to your opening body tag.
• Then create a function called showAlert and have the message be “You have resized the browser window.” – do this by adding the script tag in the head section. Type the word function then showAlert(). Use the curly bracket and on the next line type alert, a space, (“You have resized the browser window.”); and close with another curly bracket.
• Launch your webpage after saving the file – what happens when you resize the browser window?
• Now try making a message pop-up when you copy text. Add an h3 with your name.  Add oncopy=”textCopy()” to the opening h3 tag.
• Now you need to create a function called textCopy. Below the showAlert function, type function textCopy() then curly bracket, on the next line type alert, a space, (“You have copied text.”); and then close the curly bracket. Preview it by copying some text when you launch your webpage to see what happens.
• Tomorrow we will be looking at the getElementById() method