Today’s goal:

• Continuing learning basic JavaScript
  • DOM and DOM events
  • getElementById() method
  • The canvas tag (dynamic HTML & JS combined)

 Today’s featured site:

• http://antigravitygoogle.com/– What happened to Google?

 Onclick, Onload, and Other DOM Events (from Monday)

• 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, onload, onmouseover, onresize events are 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.
• Let’s have a message pop-up when the browser window is resized. First, add onresize=”showAlert()” after body in your first body tag.
• 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 at the bottom of your page before the closing body tag. 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.
• Now let’s have a message pop-up when you copy text. First, add an h3 with your name. After h3, add oncopy=”textCopy()”.
• 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.
• On your own: see if you add code to show an alert message that tells you what button you clicked on your mouse.

 JavaScript Methods

• From W3Schools: JavaScript methods are the actions that can be performed on objects. Almost everything is an object (one example we’ve used so far- functions). Objects are collections of properties with values. JavaScript is an object-oriented programming (OOP) language.
• You are going to practice JavaScript’s getElementById() method, which can dynamically change HTML and CSS by finding elements on the webpage. You will use examples from this tutorial.
• First, download this code. Then, copy and paste the code into a new Notepad++ page (save it as js_methods.html).
• You’re going to change the code by following the instructions! Make sure to read the comments inside the code to figure out what to do.
• When you’re done: Check out the canvas tag, which makes use of JavaScript’s getElementById() method and is used to create graphics, images, and animations. Follow this tutorial at your own pace.