JavaScript III bis

Required Reading

On the recommendation of a CSCI 107 student, I’ve added another reference, available on-line, as useful reading for the course. This reference has a little cover of jQuery, a very popular JavaScript library.

• HTML5: The Missing Manual, Appendix B: “JavaScript: The Brains of Your Page”
• HTML5 Foundations by Matt West, Chapter 10: “Introducing JavaScript”

Stuff to know

You really don’t have to know everything about JavaScript for CSCI 107. Conditionals and loops would be very nice, but let&rsquos;s come up with a list that would allow you to do a lot of nifty things.

• Use a JavaScript statement similar to the following to tell the browser which function to run after the page is loaded:
  window.onload = startup;
• Know how to call and define simple functions, including the anonymous function.
• For now, only worry about finding elements with an id field:
  var myElement = document.getElementById("idName") ;
  You’ll need to master the loop before trying out other ways to find elements.
• Set your event handlers for elements in the startup function:
  interestingElement.event = function;
  See HTML DOM Events for a large list of events. JavaScripts are much messier than we can image. See this Introduction to Events web page if you need convincing.
• Use the innerHTML property of an element to read and write the text of an HTML tag.
• Use the style property of an element to modify the CSS for an HTML tag. Be aware that the CSS and JavaScript style names offer differ.
• JavaScript supports the usual arithmetic operators. It also uses + to concatenate strings.
• You will need to learn many JavaScript statements to be a JavaScript guru. You’ll find similar statements in most modern programming languages.
• The setTimeout() and setInterval() methods are easy to use and are useful for developing your JavaScript skills.
• The alert method can be used to write irritating scripts. However, it can be very useful for figuring out what your program is not doing. The console.log() method is even better.
• Learn how to open the console in your browser.

A matter of scope and objects

What is the difference between the following?

Example A

function changePartingQuote() {
    var partingElement = document.getElementById('parting');
    partingElement.innerHTML = partingElement.innerHTML + " twoBee || !twoBee";
}

function startup() {
    setInterval(changePartingQuote, 10000);
}

Example B

var partingElement ;

function changePartingQuote() {
    partingElement.innerHTML = partingElement.innerHTML + " twoBee || !twoBee";
}

function startup() {
    partingElement = document.getElementById('parting');
    setInterval(changePartingQuote, 10000);
}

Example C

var partingAdvice;

function changePartingQuote() {
    partingAdvice = partingAdvice + " twoBee || !twoBee";
}

function startup() {
    partingAdvice = document.getElementById('parting').innerHTML;
    setInterval(changePartingQuote, 10000);
}