Today’s goals:

• Review JavaScript basics (strings, functions, variables)
• Learn about the browser Document Object Model (DOM) and JavaScript events
• Make a farting webpage

 Today’s featured website:

• https://analytics.usa.gov/– Find out what the most popular government websites are.

 JavaScript practice

• Review of basics
  • On Thursday we practiced some JavaScript basics, including creating variables and functions. We also wrote a basic script that created a pop-up in the browser.
  • Let’s practice quickly by opening up Firefox and hitting ctrl-shift-k at the same time to bring up the console. Type an alert with a message to make a pop-up window appear. Create a variable and then check the value. Finally, do some math. Use this tutorial for a review if you’re stuck.
• Onclick and Onload 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 some. Open up Notepad++ and start a new page. Call this js_practice2.html
    Set up a new page (html, head, title, and body opening and closing tags).
  • 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.
• Fart Scroll
  • JavaScript can do more interesting things than just have pop-up windows appear! How about making a webpage fart as a user scrolls?
  • First, add the script source to your head section. Why do you need this?
  • Second, create some new script tags at the end of your page below your other scripts. Inside those tags, simply type fartscroll(#), where the number you choose is the number of pixels someone has to scroll before hearing the farting sound. There is a problem. What is it and how can you easily fix this?
  • Let’s check out the code