Today’s goal:

• Continuing learning basic JavaScript
  • Functions and events
  • Adding third-party scripts
  • DOM and DOM events

 Today’s featured site:

• http://js1k.com/2013-spring/demo/1457– Check out this fun JavaScript-based game

 JavaScript practice

• On Friday, we learned the following JavaScript: how to create a string, how to use the alert function (pop-up with message), how to do math, how to create a variable and check its value, and how to use events and functions together. Let’s continue (instructions from Friday; we will pick up where we left off):
  • Ok, now we’re ready to open Notepad++ and start a new page. We’re going to use this tutorial as a guide.
    • Let’s set up a basic page in Notepad++ with opening and closing html, head, title, and body tags.
    • After we copy the code in our head section, let’s take a look. What does the showAlert function do? Will anything happen when we preview our page in the browser? Why or why not?
    • What does the code we added to our body tag say? How can we see the alert message again?
    • Let’s change the text in the showAlert function to something else.
    • Let’s use JavaScript’s onclick event with our function. We will create a button for a user to click that will show our message. Add some button tags in your body section and add the text click me. Then add onclick=”showAlert()” inside the first button tag.
    • onclick and onload are examples of JavaScript events that can call functions like showAlert. Let’s try the onmouseover event to show our message. Let’s begin by adding a simple link and adding the onmouseover event to it.
    • Let’s practice creating a variable like we did in the try JavaScript tutorial. Let’s call the variable myText and have it equal “Our web design class is awesome!”; Let’s refer again to the tutorial to see how to add the variable to our function.
    • Finally, we’re going to learn how make our webpage fart. We need to add the CDN to our webpage and then add the JavaScript to control how many pixels a user has to scroll before hearing the obnoxious farting noise. We also need to add enough content to have a scroll bar; let’s add a bunch of paragraphs.
    • Where should we add the fartscroll script? Why?

   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 last week 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.
  • 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.
  • Let’s practice– we’ll go back to our webpage and comment out some of our code so we can work with some new code. Let’s comment out the script tags in our head section. Let’s comment out our body tag and add a new one.
  • 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.