Shape of the Day:
- 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. 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:
Remember to take screen shots of each completed exercise!
3. Onclick, Onload and Other DOM Events
-
- Return to your Visual Studio Code 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! Remember to take a screen shot once these exercises are completed.
- 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 elements 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 Visual Studio 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