Objects, part two
Notes from April 22, 2005 class
Object initializers
JavaScript 1.2 also makes available an object initializer, which is a little shorter to write than is a constructor function. It uses this syntax:
objectNAME = { property : value }
Replace objectName with the name you want to give your object, replace property with the name you want to use for a property, and replace value with the value of the property that precedes it. You can add more properties and values by by separating each with a comma.
An object created with the initializer function is already an instance of the object, so you can just use the properties without the need to create a new instance of the object.
Creating an object with an object initializer instead of a constructor function can cut down on the coding you have to do, at least if you only want one or two instances of the object.
<html>
<head><title>Using a function initializer instead of a constructor function</title></head>
<body>
<script language="JavaScript" type="text/javascript"><!--
// Two different ways of doing the same thing: //using a constructor function
function car(seats,engine,theradio)
{
this.seats=seats;
this.engine=engine;
this.theradio=theradio;
}var work_car = new car("cloth", "V-6", "Tape Deck");
var fun_car = new car("leather", "V-8", "CD/MP3 Player");// using an object initializer
work_car= {seats:"cloth", engine:"V-6", theradio:"Tape Deck"}
fun_car= {seats:"leather", engine:"V-8", theradio:"CD Player"}document.write("My work car has " + work_car.seats + " seats.<br />")
document.write("I want a car with "+ fun_car.seats + " seats and a "+ fun_car.theradio+".<br />");//-->
</script>
</body>
</html>A new script challenge: create HTML tables
Hand-coding HTML tables is dull and repetitive. In class, we began a script that can create HTML tables and give us more time in our lives for excitement and pleasure. Here's an example of the desired output:
<table width="100%" cellpadding="5" cellspacing="0" border="2">
<tr><td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
<td>Thing 4</td></tr>
<tr>
<td>Thing 5</td>
<td>Thing 6</td>
<td>Thing 7</td>
<td>Thing 8</td></tr>
<tr>
<td>Thing 9</td>
<td>Thing 10</td>
<td>Thing 11</td>
<td>Thing 12</td></tr>
</table>
We identified the variables within a table that can change depending on what the user wants, and decided our script will need to ask the user:
How wide? (in either % or a number of pixels)
How much cellpadding? (enter a number)",2)
How much cellspacing? (enter a number)
What color should the background be?
What size border?
How many rows?
How many columns?We had enough time in class to get started on the script, but not to finish. We got this far with the code:
<html>
<head><title>Make HTML Page with JavaScript</title></head>
<body>
<script language='JavaScript' type='text/javascript'>
<!--var width=prompt("How wide? \(in either % or a number of pixels\)","100%");
var cellpadding=prompt("How much cellpadding? \(enter a number\)",2);/* we ran out of time here, so we created the following document.write just to reflect back that things are working so far */
document.write("You want a table with these characteristics: " + width +"wide, " + cellpadding + " cellpadding.");
/*
Still to do:
Write a prompt for each of these:
How much cellspacing? (enter a number)
What color should the background be?
What size border?
How many rows?
How many columns?Then, make it output a table:
<table width="100%" cellpadding="5" cellspacing="0" border="2">
<tr><td>Thing 1</td>
<td>Thing 2</td>
<td>Thing 3</td>
<td>Thing 4</td></tr>
<tr>
<td>Thing 5</td>
<td>Thing 6</td>
<td>Thing 7</td>
<td>Thing 8</td></tr>
<tr>
<td>Thing 9</td>
<td>Thing 10</td>
<td>Thing 11</td>
<td>Thing 12</td></tr>
</table>
*/
//-->
</script>
</body>
</html>