JavaScript Notes Chapter 1

Chapter 1 An Overview -details to follow.

Day 1 pp 1-8

Object

Any definable thing. A document, image, form, graphic, etc.

Hierarchy

Dot syntax is used to represent the hierarchy of objects. The web browser window is an object. The currently loaded HTML document may contain other objects.
Ex. car.trunk.sparetire

Instance

An instance is one particular incarnation of an object. Beetle is an instance of a car.
Ex. Beetle.trunk.sparetire

Properties

Each object can have many associated properties such as bgColor which represents the background color of an HTML document.
Ex. window.document.bgColor

Values

Properties have values. A car object may have a color say blue. If the owner of a Beetle (an instance of a car decides to paint his car red then the following code example assigns the value red to the property color of the car object instance Beetle:
Ex. Beetle.color = "red";
window.document.bgColor = "silver";
Listing 1.1

        <html>
         <head>
            <title>sunflower lady
            </title>
         </head>
	 <body bgColor = "white">
	    <img src = "sunflowerlady.jpg" name = "sunflowerphoto">
         </body>
        </html>

When this code loads in a browser, an instance of the generic image object is created and exists in the memory of the browser under the name sunflowerphoto.
JavaScript lets you include code that changes the value of the SRC property of an image object and thereby implement the rollover feature.
Ex. doccument.sunflowerphoto.src = "sunflowers.jpg";
This explains how the image is changed. The mechanism behind facilitating the change is the subject of events and event handlers.

Events and Event Handlers

One of the most common events is the mouseover event triggered when a visitor moves the mouse on top of an object. A JavaScript event handler is the code that responds to events initiated by visitors to a Web page. The anchor tag <a> can be set to respond to mouseover events.
Ex. <a href = "#" onmouseover = "document.bgColor = 'silver';">Roll over to change background to silver.</a>
Listing 1.2

(Mac: control click and save this photo to your usb drive.
Windows: right click and save this photo as "sunflowers.jpg" onto your flash drive)

Describe what you think will happen when this code loads in a browser.

Then type this code into an html file using a text editor (dream weaver is available on the Macs.) Save your file and open it in a browser to test your hypotheses.

<html>
 <head>
  <title>sunflower image swap
  </title>
 </head>
 <body bgcolor="white">
  <a href="#" onmouseover="document.sunflowerphoto.src = 'sunflowers.jpg';" onmouseout="document.sunflowerphoto.src = 'sunflowerlady.jpg';">
   <img src="sunflowerlady.jpg" width="300" height="200" name="sunflowerphoto" border="0">
  </a>
 </body>
</html>

Day 2 pp 9-15

Variables: A variable is a container for information facilitating storage. A variable's value can change during the script. The scope of a variable is determined by where in the script it is declared -outside of a function it has global scope, but when declared inside a function it exists only during execution of that function. The keyword var is used to declare a variable. Variable names are case sensitive and they must begin with a letter or the underscore character.
Ex. var myFavoriteColor = "teal";
Beetle.color = myFavoriteColor;
Arrays: An array is an ordered collection of data. Each element of an array is a variable and can hold data of any type. Arrays are particularly useful because you can change the value of each array element using a programming loop.
Ex. var spicerack = new Array();
spicerack[0] = "oregano";
spicerack[1] = "salt";
Methods / Functions: Each generic object has methods associated with it. Methods determine the behavior of an object and are inherited by all instances of that object. Methods and functions are essentially synonymous. To keep the browser from executing a script as soon as the page is loaded, you can write your script as a function. A function contains some code that will be executed only by an event or by a call to that function. You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file). Functions are defined at the beginning of a page, in the <head> section which is loaded first so the function will be available when called in the <body> of the document.
Assignment / Comparison Operators: http://www.w3schools.com/js/js_operators.asp
Document Object Model (DOM): http://www.w3schools.com/htmldom/dom_reference.asp