Today’s goals:

• Continuing learning basic JavaScript
  • Review important JavaScript concepts and vocabulary
  • Get answer code for JS Events and JS Methods pages
  • getElementById() method
  • The canvas tag (dynamic HTML & JS combined)

 Today’s featured site:

• http://cant-not-tweet-this.com/ – How NOT to use JavaScript

 Review

• 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
  Document Object Model (DOM)
  When a webpage is loaded, the browser creates a document object model (DOM) of the page.
  The HTML elements are objects that JavaScript can act on (JavaScript is an object-oriented programming language)
  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.
  Methods
  JavaScript methods are the actions that can be performed on objects.

 Answer Code

• JS Events- onresize and oncopy
• JS Methods- getElementById()

 JavaScript Methods

• Yesterday we learned about and practiced with the getElementById() method, which is used in JavaScript to target HTML elements by id. We used the method with several different properties to change the HTML and CSS of elements on the practice webpage, including the innerHTML property, src attribute, and HTML styles (CSS).
• We used an event (the click of a button) to prompt the method to act on the object; for example, clicking a button and changing the text.
• Let’s practice using the getElementById() method by starting a new webpage. We are going to add two headlines and an image and will use the onmouseover, oncopy, and onclick events to change the HTML elements on our page.
  1. PAY ATTENTION TO YOUR QUOTATION MARKS!!! WE ARE GOING TO USE BOTH DOUBLE AND SINGLE QUOTATION MARKS HERE.
  2. Add an h1 headline that says Hello, MHS!. We are going to have this headline change into Happy Thursday when we point the mouse on it.
  3. Give the h1 an id of intro.
  4. Now add onmouseover=’getElementById(“intro)”.innerHTML = “Happy Thursday!”‘
  5. Add an h1 headline that says Copy me! This headline will change from black to red when we copy it.
  6. Add an id of copy. Let’s use the oncopy event along with the getElementById() method and the style property to change the color.
  7. Finally, let’s switch out two images when we click on one. Add this image first https://www.mhswebdesign.com/storage/2019/03/pexels-photo-1076607.jpeg and give it an id of switch.
  8. After the first src attribute add onclick=’getElementById(“switch”).src=”https://www.mhswebdesign.com/storage/2019/03/pexels-photo-920154.jpeg”‘
• Up next: HTML canvas tag , which allows you to add dynamic graphics and animations to a webpage with HTML5 and JavaScript
• Let’s get ready to use the canvas tag by adding it to our webpage with an id of myCanvas and a width of 400px and a height of 300px