Chapter 8. JavaScript Object-Oriented Programming and the Document Object Model

CONTENTS

Chapter 8. JavaScript Object-Oriented Programming and the Document Object Model

CONTENTS>>

  •  Object-Oriented Programming in JavaScript
  •  The Prototype Concept
  •  The Document Object Model
  •  Summary

Up to this point, all discussion about objects has been in terms of building them or addressing different object properties and methods. In some ways, properties act like variables in that they can be assigned values, and the values assigned to them can change. Likewise, you saw that methods are functions associated with objects and their properties. More importantly, though, many disparate pieces of code can be brought together in an object that contains all the information that variables provide and the actions inherent in functions. By conceiving of an object as a collection of named properties with values that can be any type of data, you can see them as building block structures in a script. Keeping in mind that functions can be a type of data, they are called methods when they are the value of a property. Perhaps it might help to think of objects as coded modules that can help organize your scripts.

Because JavaScript has objects, you need to think of programming with objects. Because I assume that most readers of this book come from a designing background rather than programming background, you will not be disappointed to find out that object-oriented programming (OOP) in JavaScript is different from OOP in C++ or Java. Rather than entering the fray about whether JavaScript is really an OOP language, I am going to treat JavaScript as a type of OOP language. In the same way that the Democrats and Republicans are two different political parties but still political parties, JavaScript is a type of object-oriented programming language, even though it might not be like other OOP languages. In the next section, all comments are directed at how JavaScript is an OOP language and what that means to someone writing OOP scripts.

Object-Oriented Programming in JavaScript

One way to think of JavaScript objects is as associative arrays. From our discussion of arrays and using the for / in statement to pull information from objects, you might have already suspected as much. To demonstrate this fact, the following script builds an object, assigns data to it, and then pulls it apart as an array:

<html>  <head>  <title>Associative Array</title>  <script language="JavaScript">  var tree = new Object();  tree.size="Big and taller than Uncle Jim.";  tree.shade="It keeps us cool in the summer";  tree.fall="We make giant leaf pumpkins."  var display =tree["size"] + "<br>";  display +=tree["shade"] + "<br>"  display +=tree["fall"]  document.write(display);  </script>  </head>  <body bgcolor="wheat" >  </body>  </html>

As you can see from the previous script, all of the properties of the tree object are essentially elements in the tree array. This is an associative array, and you can think of JavaScript objects as associative objects.

In working with functions, you can create objects made up of the function. These functions are called "constructor functions." Then when you create an object using the new constructor from the constructor function, your new object has the properties in the function. This following example uses a constructor function to set up a new object called Bloomfield. All of the Bloomfield properties inherit the properties of the Mall object.

<html>  <head>  <title>Constructing Method</title>  <script language="JavaScript">  //Constructor Function  function Mall(stName,shop,product) {       this.stName=stName;        this.shop=shop;        this.product=product;        }  var Bloomfield= new Mall("Bloomy","Nuts and Lightning Bolts","Organic Electricity")  var display= Bloomfield.stName + "<br>";  display += Bloomfield.shop + "<br>";  display += Bloomfield.product;  document.write(display);  </script>  </head>  <body bgcolor="mintcream" >  </body>  </html>

As you will see in the output to the screen, all of the Mall object's properties were inherited by the Bloomfield object. (It might help to think of methods as function properties rather than simply functions attached to an object. Then you can better understand that a function is indeed a property.)

The Prototype Concept

Much of the difference between JavaScript and languages like Java is that OOP in Java is based on a different type of class than in JavaScript. In traditional OOP, a class is a set and any object is an instance of that class or set. However, in JavaScript, the concept of class revolves around the concept of a prototype. Unlike the set concept of class that treats an instance of an object to be a member of the class, the prototype concept treats the named object with all of the properties that all members of the class have. For example, consider the class called Mall.

A Mall object has several characteristics expected in all malls. The following lists what just about any mall has:

  • A name (Bloomfield Mall)

  • Shops (butcher, baker, and skateboard shop)

  • A number of shops (15)

  • Customers (number or individual names)

  • Employees (number or individual names)

  • Roles (clerk, manager, security, shoplifter)

In JavaScript, the concept of a class as applied to Mall suggests that Mall has all of the properties that malls typically have. Hence, you could have the following properties in dealing with the class Mall:

Mall.name  Mall.shop  Mall.shopNumber  Mall.customer  Mall.employee  Mall.roles 

To see the difference between a variable and an object, the following script defines a Mall object and a Mall variable. The defined variable has been commented out using double slashes (//) because the Mall variable will not work as a defined object.

<html>  <head>  <title>Variable and Object</title>  <script language="JavaScript">  var Mall= new Object();  Mall.shops="Vinny's Gun and Medical Supply Shop";  //var Mall;  //Mall.shops="Louie's Used Golf Club Emporium and Discount Analysis Clinic";  document.write(Mall.shops);  </script>  </head>  <body bgcolor="mintcream" >  </body>  </html>

If you remove the double slashes and comment out the original Mall object from the script, you will find that it will not work. The reason is because the variable defined in the second instance did not create an object. Instead, it created a variable and, while even variables have certain properties (such as length), they cannot be assigned properties.

The String and Date Objects

Two important built-in objects have yet to be discussed, the String and Date objects. Each of these objects has important properties, methods, and parameters to understand. The Date object is fairly specialized as far as design is concerned, but it can be used in many interesting ways other than to display date and time. More significant for the designer is the String object and how it can be used to format data display output.

Using the String Object

The String object has a multitude of methods, but, at this point, only key selected ones are going to be discussed. At the same time, you can begin to look at a number of ways to format strings as objects and learn how you can use the built-in properties to control what you see on the screen. For example, the following script uses a string object employing five methods simultaneously:

<html>  <head>  <title>String Objects and Methods</title>  <script language="JavaScript">  var myWord = new String("It is impolite to wink!");  myWord=myWord.substring(18,22).fontsize(7).italics().fontcolor("red").blink();  document.write(myWord);  </script>  </head>  <body bgColor="peachpuff">  </body>  </html>

Notice that after the string object was defined using the String() constructor, it was possible to write this statement with five methods attached to the string object itself:

myWord=myWord.substring(18,22).fontsize(7).italics().fontcolor("red").blink(); 

By the end of the script, the string object myWord has properties of a substring, font size, italics style, a red font color, and a blinking font. (Don't ever use blinking fonts in real designs. They cause style cancer besides, they work only in Netscape Navigator.) As you can see, using a string as an object, you can control what strings will look like on your page.

String methods can be divided into three categories, as shown in Table 8.1.

Table 8.1. Types of String Methods

Tag Methods

Action Methods

RegExp Methods

Anchor()

charAt()

match()

Big()

charCode()

replace()

Blink() (only in NN)

concat()

search()

Bold()

indexOf()

split()

Fixed()

lastIndexOf()

 

Fontcolor()

slice()

 

Fontsize()

substring()

 

Italics()

substr()

 

Link()

toLowerCase()

 

Small()

toUpperCase()

 

Strike()

   

Sub()

   

Sup()

   
Tag Methods

The tag methods associated with strings are in reference to the associated tags in HTML. For example, the bold() method is associated with the <b> tag for creating bold fonts. Likewise, fontcolor() and fontsize() are associated with the <Font> tag. For designers, the message here is, "Be careful." In some ways, the string tag methods could be nearing extinction. Because of the power and flexibility of Cascading Style Sheets (CSS), many of the tags, such as <Font>, are being deprecated. If you get too accustomed to using the tag methods in JavaScript, you might find yourself riding a dinosaur. Take a look at Chapter 12, "Dynamic HTML," and see what you can do with CSS with JavaScript. In the meantime, you can see how many built-in methods you can add to a string.

Action Methods

I use the term "action methods" to delineate those methods that transform string composition or find out information about strings that do not use regular expressions. The action methods are the core ones in dealing with strings. The most important ones for design are substring and character identification.

  • substring(begin,end) Enters the beginning and ending numeric positions of a part of the string to extract.

  • charAt(n) Enters the value of the position of a character in a string.

  • charCodeAt(n) Enters the value of the position of the character in a string to find the Unicode (ASCII) value of the character at position n.

  • indexOf(substr) Enters a string fragment of the string to be searched. This returns the position of the first character of the string. The lastIndexOf() does the same thing but begins at the end of the string.

  • toUpperCase()/toLowerCase() Transforms a string to all uppercase or all lowercase characters.

The following script provides an example of how all but the index methods can be used:

<html>  <head>  <title>Action Method</title>  <script language="JavaScript">  var quote= new String("She showed all of the emotions from A to B.");  var dex=quote.toLowerCase().substring(0,2);  var terity = quote.toUpperCase().charAt(22);  dex=dex.concat(terity);  document.write(dex);  </script>  </head>  <body bgColor="lavenderblush">  </body>  </html>
Regular Expression Methods

The last type of string methods to examine are those using regular expressions. How much you would actually use these methods depends on your page design, but regular expressions have great utility with strings. You might want to review the discussion of regular expressions in Chapter 3, "Dealing with Data and Variables," or take a look at the discussion of CGI and Perl in Chapter 16, "CGI and Perl," where many of the regular expression formats are discussed in greater detail.

The four regular expression methods for the string object are the following:

  • match(regexp) This returns the substring in the regular expression or a null value.

  • replace(regexp,substitute) The regular expression is replaced by the substitute string.

  • search(regexp) This finds the starting position in the string of the regular expression.

  • split(regexp) This method works with both strings and regular expressions (JavaScript 1.2). The string is split at the regular expression (possibly in more than one place), the terms in the regular expression are discarded, and the string is turned into an array with each element demarcated by the position of the discarded substring.

The following script demonstrates how each works. Note how the String.search(exp) method is used in a String.slice() method to find the term in the regular expression. The output from the script can be seen in Figure 8.1.

Figure 8.1. The regular expression methods associated with the string object provide a powerful addition to the tools that you can use in JavaScript formatting.

graphics/08fig01.gif

<html>  <head>  <style type="text/css">  body { font-family: verdana;  background-color:#e6c303;  }  h3 { color:#6dc303;  background-color:#1a291f;  }  </style>  <title>Regular Expression Methods in Strings</title>  <script language="JavaScript">  //string.match()  var matchThis = "Play it again Sam";  var stringer1=matchThis.match(/sam/i);//string.replace()  var replaceThis = "The script is embedded in Java.";  var stringer2= replaceThis.replace(/Java/g,"HTML");  //string.search()  var searchThis="www.sandlight.com";  var stringer3=searchThis.slice(searchThis.search(/.com/));  //string.split()  var splitThis = "She has two important issues."  var stringer4 = splitThis.split(/two important/i);  var display = "<h3>Regular Expression Methods in String Objects</h3>";  display += matchThis + " becomes : " + stringer1 + "<br>"  display += replaceThis + " becomes : " + stringer2 + "<br>"  display += searchThis + " becomes, with the help of string.slice() : " + stringer3  + "<br>"  display += splitThis + " becomes an array : " + stringer4[0]+ " " + stringer4[1] +  "<br>"  var showOff=new String(display);  document.write(showOff.fontcolor("#972126"));  </script>  </head>  <body>  </body>  </html>

The different regular expression methods in the string object can save some time locating positions in strings. Instead of having to set up loops to search for a substring or position, think about using the regular expression methods.

Using the Date Object

The Date object has 40 methods and 9 arguments to keep you entertained for some time. However, many of the methods might not be used too often (such as the ones dealing with universal time), and most of the methods are either getting or setting the same thing. Nevertheless, you should be acquainted with both methods and arguments of the Date object. Table 8.2 provides a summary.

Table 8.2. Date Object Characteristics

Arguments

 

Milliseconds

Number of milliseconds from January 1, 1970.

Datestring

Specified date and time (time is optional) in string format.

Year

Four-digit year (such as 2002).

Month

Months in numbers from 0 to 11, with January being 0.

Day

Day of the month expressed from 1 to 31. (Who knows why days begin with 1 and everything else begins 0?)

Hours

Hours expressed from 0 to 23.

Minutes

Minutes expressed from 0 to 59.

Seconds

Seconds expressed from 0 to 59.

Ms

Milliseconds expressed from 0 to 999.

Methods

Most of these return values are defined by the date that is input into a Date object, even if it isn't the current date/time.

getDate()

Returns the day of the month.

getDay()

Returns the day of the week.

getFullYear()

Returns the current year of the Date object.

getHours()

Returns the hours.

getMilliseconds()

Returns the milliseconds from 1/1/1970 to the date specified in the object.

getMinutes()

Returns minutes.

getMonth()

Returns the month as an integer.

getSeconds()

Returns the seconds.

getTime()

Returns the current time in milliseconds.

getTimezoneOffset()

Returns the time zone difference between where you live and UTC or GMT time.

GetUTCDate()

Returns the day of the month in UTC.

GetUTCDay()

Returns the day of the week in UTC.

getUTCFullYear()

Returns the current year in UTC.

getUTCHours()

Returns the hours in UTC.

getUTCMilliseconds()

Returns milliseconds in current UTC from 1/1/1970.

getUTCMinutes()

Returns minutes in UTC.

getUTCMonth()

Returns the month as an integer in UTC.

getUTCSeconds()

Returns the seconds in UTC.

Methods

getYear()

Returns the year field, deprecated (getFullYear()).

setDate()

Sets the day of the month.

setFullYear()

Sets the year.

setHours()

Sets the hours.

setMilliseconds()

Sets milliseconds.

setMinutes()

Sets minutes.

setMonth()

Sets the month as an integer.

setSeconds()

Sets the seconds.

setTime()

Sets the current time in milliseconds.

setUTCDate()

Sets the day of the month in UTC.

setUTCFullYear()

Sets the year in UTC.

setUTCHours()

Sets the hours in UTC.

setUTCMilliseconds()

Sets the milliseconds field in UTC.

setUTCMinutes()

Sets minutes in UTC.

setUTCMonth()

Sets the month as an integer in UTC.

setUTCSeconds()

Sets the seconds in UTC.

setYear()

Sets the year, deprecated (setFullYear()).

toGMTString()

Converts a date to a string using UTC or GMT.

toLocaleString()

Converts date and time.

toUTCString()

Converts to a string using UTC.

valueOf()

Converts to milliseconds.

The date object is easy enough to use even with a dizzying array of options. However, for the most part, the date object is used to compare a past or present date with the current date or simply to display the date on the screen. Interesting world clocks can be made using the UTC (Coordinated Universal Time) methods as well as other uses for timing events, and it should not be forgotten when putting a date in your pages. The following script provides an example of how the date object might be employed to keep you on track for Valentines Day.

<html>  <head>  <script language="JavaScript">  var NowDate = new Date();  var DateNow= NowDate.getDate();  var MonthNow = NowDate.getMonth();  //To find Valentines Day you need 1 for the month and 14 for the day  //Remember months begin with 0 so February is 1 and days of the month  //begin with 1. Also be sure to get a hardcopy card!  if (DateNow== 14 && MonthNow == 1) {        alert("Happy Valentines Day!")         } else {        alert ("Please wait until February 14 you romantic fool!")  }  </script>  </head>  <body bgcolor="pink">  </body>  </html>

Why Object-Oriented Programming?

This very short introduction to OOP has been an encouragement to begin thinking about JavaScript elements in terms of objects, their properties, and their methods. For most work in JavaScript, the scripts are short; while good programming organization is important for even short scripts, OOP is not essential for short scripts. However, as you start working with more people on a web project using JavaScript and the scripts become longer, OOP becomes more important. Because OOP encourages modular program units, the units can be shared with others on a programming team and can be reused, which means that you do not have to reinvent the wheel every time you sit down to work on your script.

As a web page designer, the concept of modular and reusable design elements is more obvious and intuitive. Object-oriented programming is the same. If you can write a complex piece of code as a module, the next time that same code is required, you can either make small changes to the module (such as different argument values) or use the same module elsewhere in the script. By doing so, the time spent on the original code design pays off in the long run.

The Document Object Model

In the JavaScript document object model (DOM), the primary document is an HTML page. As noted, the Window object, which includes frames, is at the top of the web browser hierarchy. However, the Document object contains the properties whose information is used by JavaScript. To strip away the mystery of what a DOM actually is, think of it as the Document object and all of its properties, including methods. Statements such as document.write() constitute the object (document) and a property/method (write()) that make up part of the model. To oversimplify a bit, you can say that the JavaScript DOM is the sum total of the Document object's properties and methods, including the arrays automatically generated on an HTML page, and the manner in which these objects are accessed by JavaScript.

Document Properties

In looking at the Document properties, you might experience some sense of d j vu from the section on the String object earlier in this chapter. You will see some similarities, but, for the most part, the properties (not including methods) that make up the DOM are unique to the Document object. Table 8.3 shows the properties of the Document object.

Table 8.3. Document Properties

Property Name

Associated Property

AlinkColor

The active color of a link when selected.

Anchors[array]

Each anchor on an HTML page is an element of an array.

Applets[array]

Each applet on an HTML page is an array element.

BgColor

Document's background color.

Cookie

Text files that can be read and written by JavaScript.

Domain

Security property that can be used with two or more web servers to reduce restrictions on interactions between web pages.

Embeds[array] (also works = plugins Plug-ins [array])

Each embedded object is an array element of the embed[] array. and .SWF files are examples of embedded objects. (See Chapter 18, "Flash ActionScript and JavaScript," for a discussion of Flash-embedded .SWF files and JavaScript.)

FgColor

The text color.

Forms[array]

Each form on an HTML page is an array element, and each object within a form is an element of the form element. (See Chapter 11, "Making Forms Perform," for a full discussion of forms and JavaScript).

Images[array]

Each image placed on an HTML page is an element of the images[] array. (See later on in this chapter for a full discussion of the images[] array.)

LastModified

The last modification date, in string format.

LinkColor

The first color of a link before it has been visited. (This defaults to blue.)

Links[array]

Each link is an element in an array when it appears on a document.

Location

The URL property, now specified as URL. (See the URL entry, later in this table.)

Referrer

Previous page that had a link to the current page.

Title

The document title.

URL

New version of the location property specifying the URL of the loaded page.

VlinkColor

The color of a visited link.

The following script shows some of the document properties at work. The form object is an array, and the JavaScript function addresses the sole text object as an element of the form array.

<html>  <head>  <script language="JavaScript">  function message(hue) {       document.forms[0].elements[5].value=hue;        }  </script>  <title>Dynamic Color Change</title>  </head>  <body>  <H2> Big Font </h2>  <form>  <input type=button value="Red" onClick="document.bgColor='red'"  onMouseDown="message('red')">  <input type=button value="Green" onClick="document.bgColor='green'"  onMouseOver="message('green')">  <input type=button value="Blue" onClick="document.bgColor='blue'"  onMouseMove="message('blue')"><br>  <input type=button value="Font Color to Yellow"  onClick="document.fgColor='yellow'"> <br>  <input type=button value="Font Color to Firebrick"  onClick="document.fgColor='firebrick'"> <p>  <input type=text>  </form>  </body>  </html>

Other important properties of the Document object are the array, form, and image objects. Forms are discussed in detail in Chapter 11, and the array object was examined in Chapter 3. One important document array object that does bear closer scrutiny here is the image property as an object.

Image Objects

The image object is one of the most interesting in HTML and JavaScript. When you place images sequentially on an HTML page using the <IMG> tag, you place the image into an array. You do not declare an array, but you do create one simply by placing images on the screen. The array develops as follows:

document.images[0]  document.images[1]  document.images[2] 

In the HTML page, the same images would appear as follows:

<img src = "graphicA.gif">  <img src = "graphicB.jpg">  <img src = "photoA.jpg"> 

One of the properties of the image object that can be changed dynamically with JavaScript is the src value. The following script uses single-pixel GIFs that have been resized to form vertical bars. To create a single-pixel GIF, just open the graphic program that you use for creating GIF images (such as Photoshop or Fireworks), and make the drawing screen 1 pixel by 1 pixel; then use the magnifying tool to make it big enough to work in. (All of the graphics are on the book's web site.) Color in the work area with one each of the following hexadecimal values:

#3a4c4f

#ce6c56

#859eab

#ffeb89

#abc5a8

#8c3227

#debe71

Save each single-pixel GIF with the names c1.gif through c7.gif. The following script shows where each graphic is placed and shows the JavaScript that allows you to address the images array by an array address from 0 to 6. The script addresses the image as part of the Document object like this:

document.images[0-6].src=imageName.src 

The imageName.src is part of an image object created in JavaScript. In creating the object, the URL (or just filename) of the source graphic is included as follows:

imageName.src= "graphicName.gif" 

Because JavaScript can only dynamically change the src value in document.images[n].src, the new value must be defined as an src, not the image name or URL itself.

<html>  <head>  <title>image array</title>  <script language="JavaScript">  function changeIt() {       var c1=new Image();        var n=document.forms[0].hue.value;        n = parseInt(n);        c1.src="c3.gif"        document.images[n].src=c1.src;  }  </script>  </head>  <body>  <table border cols=7 width="100%" height="75%" bgcolor="#cccccc" >  <tr>  <td align=center valign=center><img name ="c1" src="c1.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c2" src="c2.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c3" src="c3.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c4" src="c4.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c5" src="c5.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c6" src="c6.gif" border=0 height=300  width=50></td>  <td align=center valign=center><img name ="c7" src="c7.gif" border=0 height=300  width=50></td>  </tr>  </table>  <center>  <form>  <input type=text name="hue" size=1><p>  <input type=button value="Click to change color of image:" onClick="changeIt()";>  </form>  </center>  </body>  </html>

Figure 8.2 shows how the different color bars should appear on the screen and shows the window to enter the image array element value.

Figure 8.2. The HTML page contains the images array JavaScript can address the array and change the src values.

graphics/08fig02.gif

Although other properties in the Document object can be addressed, such as the link[] and anchor[] arrays, the most important for the designer is the images[] property.

Preloading Images

When designing a page where one graphic replaces another, the image swapping should be immediate, and the viewer should not be required to wait while the new image loads. Fortunately, in JavaScript, preloading or placing images in the browser's cache is simple. First, a new image object is defined, and then the new object's source is defined as the following shows:

var niftyImage = new Image();  niftyImage.src = "coolPix.jpg"; 

That's all there is to it. The image is now cached in the browser it's preloaded. Keeping in mind that the images object can be treated like an array, you can place the preloaded object in an HTML-defined image slot. For example, if you have an HTML line like the following:

<img src = "firstPix.jpg" name="firstUp"> 

you can replace it with the cached image using this line:

document.images[0].src = niftyImage.src;//images[0] is the first image 

or

document.firstUp.src= niftyImage.src; 

There is no limit to the number of images that you can cache, but keep in mind that it will take the page longer to preload more than fewer images. Also, in caching your images, you can include the height and width as well. To generate a seamless replacement, the original and replacing objects should be the same. For instance, the following represent a good match between a JavaScript cached image and HTML images:

<img src = "firstArt" height= 87 width= 55 name="picasso">  var expArt = new Image(87,55) 

The preloaded image has the same dimensions as the one loaded by HTML.

The DOM Connection

In an HTML page, the HTML structure contains elements and attributes. JavaScript treats the elements, such as images and forms, as objects, and it treats the elements' attributes as properties. For example, Table 8.4 shows the attributes of the <IMG> tag in HTML:

Table 8.4. HTML Attributes of the IMG Element

src

alt

longdesc

Align

height

width

Border

hspace

vspace

Usemap

ismap

In JavaScript, the <IMG> element is treated as the images[] object, and all of the attributes of the <IMG> element are treated as properties of the images[] object. While JavaScript can read all of the image's properties, it can change only the src property.

With all other elements and their attributes in HTML that appear on the page (document), they are part of the DOM. JavaScript's relationship to the document's objects lies in the reference to HTML elements as objects and the attributes as properties of the referenced object. So, while the structure of the page lies in the HTML elements and attributes, the behavior of the page lies with JavaScript's capability to dynamically change certain elements' (objects') attributes (properties).

Summary

Objects in JavaScript are core, and understanding the document object model of JavaScript in relationship to HTML is essential to working effectively with the many objects that can be found on a web page. The idea behind object-oriented programming originally was to harness huge multiprogrammer projects because thousands of lines of code had to be coordinated. With the typical kind of projects that most designers will confront, the need for object-oriented programming is not to harness a giant project because most JavaScript is relegated to working with limited objectives in single pages. However, the extent to which you begin taking even baby steps in the direction of object-oriented programming, you will better understand what is occurring on your web page and how to make it do what you want.

A web page designer should be able to imagine the results of a dynamic web page and then, using JavaScript, make that web page come alive. By understanding OOP and even the concept of objects, properties, and methods in JavaScript, you have taken a major stride in that direction. Do not view objects and OOP as a burden, but rather as an opportunity to help you better realize what lies in your imagination. By the same token, do not treat OOP as an impediment to creativity. On several occasions, you just will not be able to figure out how to solve a problem using OOP, but the solution can be found using variables and statements that do not include objects linked to properties and methods. The OOP police won't come and get you! Take little steps in OOP, and eventually you will be able to harness its full potential.

CONTENTS


JavaScript Design
JavaScript Design
ISBN: 0735711674
EAN: 2147483647
Year: 2001
Pages: 25

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net