SHARE
Facebook X Pinterest WhatsApp

HTML Goodies: Script Tip: Week 2

Written By
thumbnail
Joe Burns
Joe Burns
Jan 4, 2005

     In Script Tip #1 we talked quickly about objects and methods. You remember that objects are things that already exist (according to JavaScript) while methods are things that act upon those objects.

     In this tip we’ll quickly discuss the use of those objects in what I call a hierarchy statement. Here’s a very bare-bones image flip script:

<A HREF=”http://www.cnn.com”
onMouseOver=”document.pic1.src=’menu1on.gif'”
onMouseOut=”document.pic1.src=’menu1off.gif'”>
<IMG SRC=”menu1off.gif” BORDER=0 NAME=”pic1″></a>

     We’ll actually use this script for this and the next Script Tip. The portion of this script I am interested in most is this one “document.pic1.src=’menu1on.gif“.

     Remember from the last tip that document is an object? Well, it is. Here we’re using the document object to set up a hierarchy statement. Hierarchy statements are listings of elements under a specific object. This statement, for instance, is under the object document–the HTML document.
     Always in these statements, it’s biggest to smallest in stature reading left to right. So in this case, the statement is saying:

  • The document
  • that contains something called pic1
  • receives this source (denoted by src)…
  • an image called menu1on.gif.

     Notice it’s always a dot (.) that separates the items in the hierarchy statements. I should say here that the pic1item is the name of the image command. See that in the full code above?

     So now you have a general idea of what is happening when you see long lists of elements in JavaScripts. You’re seeing a hierarchy statement denoting a specific portion of an object.

Next Week:This image flip script further explained.

Recommended for you...

The Revolutionary ES6 Rest and Spread Operators
Rob Gravelle
Aug 23, 2022
Ahead of Time (AOT) Compilation in Angular
Tariq Siddiqui
Aug 16, 2022
Converting a JavaScript Object to a String
Rob Gravelle
Aug 14, 2022
Understanding Primitive Type Coercion in JavaScript
Rob Gravelle
Jul 28, 2022
HTML Goodies Logo

The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.

Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved

Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.