Today’s goals:

• Get a new seat for 4th quarter!
• Continuing learning basic JavaScript
  • Review: comments, variables, strings, functions
  • Functions and events
  • DOM and DOM events
  • DOM Methods and getElementByID()
• Start learning the getElementById() method

 Today’s featured site:

• http://destroyer.la/ – Thanks to JavaScript, you can do a surprising thing on this website with your spacebar (after you scroll to the bottom)

 Review

1. How to create a single or multi-line comment
2. Creating and initializing variables: tutorial and exercises
3. Functions: tutorial and exercises (first 3)
4. Strings

 Basic JavaScript Practice

• Important Vocabulary and Concepts
  Variables
  store data (different values possible; we’ve used numbers and strings)
  names are usually short and descriptive; Camel Case used
  value assigned to variables with an equal sign
  example: var dogName = “Bruno”
  create variable with var variable name assignment operator = and assign value
  Strings
  text-based data that is enclosed in quotation marks
  example: “Bruno”;
  Events
  things that happen to HTML elements (JavaScript can react to these events)
  example: onload, onmouseover, onresize, onclick, etc.
  Functions
  a block of code to perform a task; functions execute when something invokes or calls them
  functions contain code statements and sometimes parameters (arguments, instructions)
  example: alert(“Hello, MHS!”); and having this message pop-up when someone clicks a button
• Practice Page:
  1. Let’s practice– open up Notepad++ and create a new webpage with opening and closing html, head, title, and body tags.
  2. Let’s have a message pop-up when the browser window is resized. First, add onresize=”showAlert()” after body in your first body tag.
  3. 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 in the head section. 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.
  4. Save your page, launch it, and then resize the browser window. What happens?
  5. Now let’s have a message pop-up when you copy text. First, add an h3 with your name. After h3, add oncopy=”textCopy()”.
  6. 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.
  7. Coming up with JavaScript: The getElementById() method 

 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 id’s on the webpage. You will use examples from this tutorial. What is an id again? We learned about them when we began CSS.
• 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. It does help to launch the page and refer to it as you go along.