#!/usr/local/bin/php

Here are the answers to the JavaScript exercises in the previous sections.

Write a JavaScript that outputs the string "Hello, World!" into a web page.

<script language="JavaScript">

							  document.write("Hello, World!")

							</script>

Write a JavaScript that outputs the string "" into a web page (this is the Greek version of #1!).

Following the example of the Amherst College Founding, create a web page that calculates how old you are and displays the result.

I was born
<script language="JavaScript">
  var now = new Date
  var thisYear = now.getYear()
  if (thisYear < 1900) {

							    thisYear += 1900

							  }

  document.write(thisYear - 1985)

							</script>

							years ago.

I was born years ago.

Following the example of the College Check, create a web page that uses a form with a text input, providing a number of years in the property this.value, and calculate the year when you will be that age. Use the method window.alert('string') to display the result.

<form>

							  <input 
    type="text" value="Age" size="4"
    onChange="window.alert('In the year ' +
      (this.value - 0.0 + 1985) + ' I will be ' +
      this.value + ' years old.')"

							  >

							</form>

For the Spreadsheet Object, modify its special version of toString so that it outputs a form in each cell of the spreadsheet. Then modify the spreadsheet so that an entry in each form changes the corresponding value stored in the spreadsheet. Add a method to check the values in the spreadsheet independently from the form.

function c2name(column) {

							  var name = ''

							  do {

							    name = String.fromCharCode(column%26 + 65) + name

							    column = Math.floor(column/26)

							  } while (column > 0)

							  return name

							}

							

							function cr2name() {

							  var name = c2name(this.column)

							  name += this.row + 1

							  return name

							}

							

							function ssToString() {

							  var ssDisplay = '<table width="' + (50 + this.length * 100) + '"' +

							      ' border="1" cellspacing="1" cellpadding="1">' +

							      '<tr><td width="50" align="center"></td>'

							  for (var column = 0; column < this.length; column++) {

							    ssDisplay += '<td width="100" align="center"><b>' +

							        c2name(column) +

							        '</b></td>'

							  }

							  for (row = 0; row < this[0].length; row++) {

							    ssDisplay += '</tr><tr><td align="center"><b>' + (row + 1) + '</b>'

							    for (column = 0; column < this.length; column++) {

							      ssDisplay += '</td><td align="center">' +

							            '<form name="' + this[column][row].name() +

							            '"><input type="text" size="10" value="' +

							            this[column][row].value + '" onChange="' +

							            this.name + '[' + column + '][' +

							            row + '].value = this.value' +

							            '"></form>'

							    }

							  }

							  ssDisplay += '</td></tr></table>'

							  return ssDisplay

								}

							

								function SSCell(column, row, value) {

							  this.column = column

							  this.row = row

							  this.name = cr2name

							  this.value = value ? value : ''

								}

							

								function SSCol(column, rows) {

							  var i

							  var sscol = new Array(rows)

							  for (i = 0; i < rows; i++) {

							    sscol[i] = new SSCell(column, i)

							  }

							  return sscol

								}

							

								function SSheet(name, columns, rows) {

							  var i

							  var ssheet = new Array(columns)

							  for (i = 0; i < columns; i++) {

							    ssheet[i] = new SSCol(i, rows)

							  }

							  ssheet.name = name

							  ssheet.toString = ssToString

							  return ssheet

								}

							

							mySheet = SSheet("mySheet", 2, 2)

							

								document.write(mySheet)

<form name="check">

<input type="button" name ="Check" value="Check"

    onClick="txtSheet = document.createTextNode(mySheet);

							             document.checkSheet.appendChild(txtSheet)">

</form>

							

							<p id="checkSheet">

							</p>


						
						 
						
							
						
						
							This is initially just a paragraph place-holder.

A more complete answer would track multiple displays of the spreadsheet, and when one is changed update the forms in the others.

Write a JavaScript function that takes one parameter, returns it unchanged if it can't be converted to a number, and otherwise writes it out as a string in "abbreviated" form, using the standard numerical abbreviations:

http://www.bipm.fr/enus/3_SI/si-prefixes.html

Hint: use the base 10 logarithm to calculate the power-of-ten exponent.

The power-of-ten exponent of the number can be used as an index into a string to find the appropriate abbreviation:

abbrevLetter = "y..z..a..f..p..n..µ..mcd.DHK..M..G..T..P..E..Z..Y"


							<script language="JavaScript">

							  // From http://www.bipm.fr/enus/3_SI/si-prefixes.html:

							  //

							  // 24 yotta Y

							  // 21 zetta Z

							  // 18 exa E

							  // 15 peta P

							  // 12 tera T

							  // 9 giga G

							  // 6 mega M

							  // 3 kilo k

							  // 2 hecto h

							  // 1 deca da

							  // -1 deci d

							  // -2 centi c

							  // -3 milli m

							  // -6 micro µ

							  // -9 nano n

							  // -12 pico p

							  // -15 femto f

							  // -18 atto a

							  // -21 zepto z

							  // -24 yocto y

							  // Adding 24 to any exponent, we'll get a non-negative integer,

							  // which can be an index.

							  // For unabbreviated values, use a unique symbol, e.g. '.'.

							  // For consistency, use "D" instead of da to represent a

							  // factor of 10.

							

							  function abbreviateIt()

							  {

							    var abbrevLetter =

							      "y..z..a..f..p..n..µ..mcd.DHK..M..G..T..P..E..Z..Y"

							

							    with (document.abbrev)

							    {

							      var value = input.value - 0

							      if (isNaN(value) || !isFinite(value))

							        // not a valid representation of a number, or too large!

							        output.value = input.value

							      else

							      {

							        var exponent = Math.floor(Math.log(value)/Math.LN10)

							                  // base e - base 10 log relation

							        if (exponent == 0) // if == 0, no prefix is necessary

							          output.value = input.value

							        else

							        {

							          if (exponent < -24) // too small

							            exponent = -24

							          else if (exponent > 24) // too large

							            exponent = 24

							          else // lower exponent if necessary; not more than twice

							
							            while (abbrevLetter.charAt(exponent + 24) == ".")

							              exponent-- 

							
							          output.value = (value/Math.pow(10, exponent)) + ' ' +
					                         abbrevLetter.charAt(exponent + 24)

							
							        }

							
							      }

							
							    }

							
							  }

							
							</script>

							

							
							<form name="abbrev">

							
							  <input type="text" name="input" size=40>

							
							  <input type="button" value="Abbreviate" onclick="abbreviateIt()">

							
							  <hr align="left" width="50%">

							
							  Abbreviation: <input type="text" name="output" readonly size=40>

							
							</form>

Write a constructor for a "planet" object, and use it to create ten objects that store the planetary information on this web page:

http://www.opencourse.info/astronomy/introduction/05.motion_planets/#sidereal%20period http://www.opencourse.info/astronomy/introduction/05.motion_planets/#aphelion

Use the Sun as the first, with all values set to zero.

Write a web form that has a radio button input, one for each planet, and that onChange writes out the planet's information.

Why might it be a good idea to use PHP as part of this exercise?

The form provides the name of the planet, which can be used in an associative array to reference the planet's information. Its data is written into a textarea field, which allows more than one line of text.

Written strictly in JavaScript, the form can be implemented as follows:


						<script language="JavaScript">

						  function data()

						  {

						    return	'Distance = ' + this.distance + ' AU\n' + 

						           'Sidereal Period = ' + this.sidPeriod + ' years\n' + 

						           'Synodic Period = ' + this.synPeriod + ' days\n' + 

						           'Eccentricity = ' + this.eccentricity + '\n' + 

						           'Orbital Inclination = ' + this.inclination + '\xB0'

						  }

						  // Planet constructor to be used with "new" keyword, 

						  // so "this" refers to new object

						  function Planet(name, distance, sidPeriod, synPeriod, 

						            eccentricity, inclination)

						  {

						    this.name = name

						    this.distance = distance  // AU

						    this.sidPeriod = sidPeriod  // years

						    this.synPeriod = synPeriod  // days

						    this.eccentricity = eccentricity

						    this.inclination = inclination  // degrees

						    this.data = data

						  }

						

						  solarSystem = new Object

						  solarSystem.Sun = new Planet("Sun", 0, 0, 0, 0, 0)

						  solarSystem.Mercury = 

						    new Planet("Mercury", 0.3871, 0.2408, 115.88, 0.206, 7.00)

						  solarSystem.Venus = 

						    new Planet("Venus", 0.7233, 0.6152, 583.92, 0.007, 3.39)

						  solarSystem.Earth = 

						    new Planet("Earth", 1.0000, 1.0000, '-', 0.017, 0.00)

						  solarSystem.Mars = 

						    new Planet("Mars", 1.5237, 1.8809, 779.94, 0.093, 1.85)

						  solarSystem.Jupiter = 

						    new Planet("Jupiter", 5.2028, 11.862, 398.9, 0.048, 1.31)

						  solarSystem.Saturn = 

						    new Planet("Saturn", 9.5388, 29.458, 378.1, 0.056, 2.49)

						  solarSystem.Uranus = 

						    new Planet("Uranus", 19.1914, 84.01, 369.7, 0.046, 0.77)

						  solarSystem.Neptune = 

						    new Planet("Neptune", 30.0611, 164.79, 367.5, 0.010, 1.77)

						  solarSystem.Pluto = 

						    new Planet("Pluto", 39.5294, 248.5, 366.7, 0.248, 17.15)

						

						  function planetClick(btn)

						  {

						    document.planetForm.planetData.value = 

						      solarSystem[btn.value].data()

						  }

						</script>

						

						<form name="planetForm">

						  <input type="radio" name="planetButtons" value="Sun" 

						    onClick="planetClick(this)">Sun

						  <input type="radio" name="planetButtons" value="Mercury" 

						    onClick="planetClick(this)">Mercury

						  <input type="radio" name="planetButtons" value="Venus" 

						    onClick="planetClick(this)">Venus

						  <input type="radio" name="planetButtons" value="Earth" 

						    onClick="planetClick(this)">Earth

						  <input type="radio" name="planetButtons" value="Mars" 

						    onClick="planetClick(this)">Mars

						  <input type="radio" name="planetButtons" value="Jupiter" 

						    onClick="planetClick(this)">Jupiter

						  <input type="radio" name="planetButtons" value="Saturn" 

						    onClick="planetClick(this)">Saturn

						  <input type="radio" name="planetButtons" value="Uranus" 

						    onClick="planetClick(this)">Uranus

						  <input type="radio" name="planetButtons" value="Neptune" 

						    onClick="planetClick(this)">Neptune

						  <input type="radio" name="planetButtons" value="Pluto" 

						    onClick="planetClick(this)">Pluto

						  <br>

						  <textarea name="planetData" value="" readonly rows="5" cols="100">

						  </textarea>
</form>

						

						
						<script language="JavaScript">

						</script>

Note that some of this material is highly repetitious, varying only in small details. PHP can be useful to "loop through" this material, providing a more compact representation, especially with larger quantities of data (which might also be loaded from a file).

Written with PHP, the form can be implemented as follows:

<script language="JavaScript">

						  function data()

						  {

						    return 'Distance = ' + this.distance + ' AU\n' +

						           'Sidereal Period = ' + this.sidPeriod + ' years\n' +

						           'Synodic Period = ' + this.synPeriod + ' days\n' +

						           'Eccentricity = ' + this.eccentricity + '\n' +

						           'Orbital Inclination = ' + this.inclination + '\xB0'

						  }

						  // Planet constructor to be used with "new" keyword,

						  // so "this" refers to new object

						  function Planet(name, distance, sidPeriod, synPeriod,

						            eccentricity, inclination)

						  {

						    this.name = name

						    this.distance = distance // AU

						    this.sidPeriod = sidPeriod // years

						    this.synPeriod = synPeriod // days

						    this.eccentricity = eccentricity

						    this.inclination = inclination // degrees

						    this.data = data

						  }

						

						  solarSystem = new Object

						  <?php

						    $solarSystem = array(

						      "Sun" => array(0, 0, 0, 0, 0),

						      "Mercury" => array(0.3871, 0.2408, 115.88, 0.206, 7.00),

						      "Venus" => array(0.7233, 0.6152, 583.92, 0.007, 3.39),

						      "Earth" => array(1.0000, 1.0000, "'-'", 0.017, 0.00),

						      "Mars" => array(1.5237, 1.8809, 779.94, 0.093, 1.85),

						      "Jupiter" => array(5.2028, 11.862, 398.9, 0.048, 1.31),

						      "Saturn" => array(9.5388, 29.458, 378.1, 0.056, 2.49),

						      "Uranus" => array(19.1914, 84.01, 369.7, 0.046, 0.77),

						      "Neptune" => array(30.0611, 164.79, 367.5, 0.010, 1.77),

						      "Pluto" => array(39.5294, 248.5, 366.7, 0.248, 17.15)

						    );

						    foreach ($solarSystem as $key => $value) {
      echo 'solarSystem.' . $key . ' = new Planet("' . $key . '"';

						      for ($i = 0; $i < 5; $i++)

						        echo ', ', $value[$i];

						      echo ")\n";

						
						    }

						
						  ?>

						

						
						  function planetClick(btn)

						
						  {

						
						    document.planetForm.planetData.value =

						
						      solarSystem[btn.value].data()

						
						  }

						
						</script>

						

						<form name="planetForm">

						  <p>

						    <?php

						      foreach ($solarSystem as $key => $value)

						      echo '<input type="radio" .

						        name="planetButtons" value="' . $key .

						        '"onClick="planetClick(this)">' . $key;

						    ?>

						    <br>

						    <textarea name="planetData" value="" readonly rows="5" cols="70">

						    </textarea>

						  </p>

						</form>

						

						<script language="JavaScript">

						</script>

Write a form and button combination that, "onClick", activates the window method

window.alert('A string of your choice')

<form name="announce">

						  <input type="button" value="What's the frequency, Kenneth?"

						         onclick="window.alert('88.5 MHz')">

						</form>

Write a JavaScript that outputs the browser version type, using the object property

navigator.appVersion

<script language="JavaScript">

						  document.write("This browser is version " + navigator.appVersion)

						document.write(". It is running on the platform " + navigator.platform)

						document.write(" with the language " + navigator.language + ".")

						</script>