Part Three Lab Work

This page describes the lab work for part three of FIT 100. A lot of these exercises can be done during the lab sessions with the help of your TA. If you are a sophisticate, use your initiative and charge ahead. Your Part Three Web Page acts as a record of your activities.

 

Write an XML source

List your three favorite ice creams in an XML source.

Fire up Notepad or Wordpad and start a document called "iceCream.xml"

Put the XML declaration at the top of the file

		<?xml version="1.0"?>

Then use the root element "iceCream" like this

		<iceCream>
		
		</iceCream>

Then add a "taster" element

		<taster>Terry Brooks</taster>

Then add a "flavor" element for each favorite ice cream flavor like this

		<flavor>Vanilla</flavor>
		etc., etc.

Add the XML document to your web page so that your TA can fire a browser at it

		<a href="iceCream.xml">Ice Cream XMl</a>

 

Name the Taster on an Ice Cream Data Island

Start an HTML page with <html>, <head>, and <body> tags.

Use the ice cream XML source from the preceding exercise and place it in the head of your document inside <xml> tags. Be sure to add an "id" attribute such as:

		<xml id="dessert">
			... the ice cream data goes in here
		</xml>

At the top of the <body> put a <h1> tag that looks like:

		<h1>The Ice Cream Data Island of
			...span tag goes in here
		</h1>

Put a <span> tag inside the <h1> tag to fetch your name out of the <taster> field in the XML data island. The <span> tag would look something like this:

		<span datasrc="#dessert"  datafld="taster">

Put a <a> tag on our web page that points that your HTML document

 

Name the flavors on the ice cream data island

Use the HTML page of the preceding exercise, but modify the XML <flavor> by changing the three of them to have unique names. I just added a number to mine:

	<flavor1>Vanilla</flavor1>
	<flavor2>Lemon Ice</flavor2>
	<flavor3>Pistachio</flavor3>

Down in the <body>, create an unordered list:

	<ul>
		<li></li>
	</ul>

Make three <li> elements, one for each flavor of ice cream. For each, add a <span> element that targets one of the flavors. My first one looks like this:

	<li><span datasrc="#dessert" datafld="flavor1"><span>

Finally, go back to each <li> element and add an inline style element so that each is a different color.

 

Write a Simple Index Entry Form

This lab will get you started on building a simple index and database-type application.

The first thing to do is create an HTML page.

Then add an <h1> heading. Mine looks like this:

	<h1>Guess Terry's Favorite Flavors!<h1>

We're have to create a form that has both a text area (for your user to type in a guess) and a button. When the button is clicked, we'll fire a javascript function. First create the <form> tag.

	<form name="myform">
		... the text area and the button go in here
	</form>

My text area looks like this:

<input type=text size=30 id="guess">

And my button looks like this:

<input type=button value="Submit" onclick="doGuess()">

In the head of the document, you'll have to define the javascript function doGuess()

Put some <script> tags in the <head> of your HTML document.

Create a function called doGuess() and add the following lines:

		var e = document.myform.guess.value;
		var s = new String(e);
		s = s.toLowerCase();
		alert(s);

That all we need to do for the first step. Your program should accept input and change it to lowercase and then show it in an alert.

 

Check User Input Against Your Favorite Flavors of Ice Cream

We can modify the previous program so that the user entry (in lower case) is check against our flavors. If the user entry matches one of our flavors, we can alert them of their success.

Start with the previous program and focus on the <script> portion. That's the only place we have to make changes.

Add an array within the <script> element that lists our favorite flavors. Mine looks like this:

	var flavors = new Array();
	flavors[0] = "vanilla";
	flavors[1] = "lemon ice";
	flavors[2] = "pistachio";

Now examine the function doGuess() and delete the alert(). We'll create a new one inside a for loop that compares the user input to the flavor values in the array.

Create a for loop that visits each flavor in the array. Mine looks like this:

for (var i = 0; i < flavors.length; i++){
	... the if statement fits in here
}

Write an if statement that compares the user input (i.e., the var s) to the values in the array (i.e., flavors[i]). Mine looks like this:

if (s == flavors[i]){
	alert ("Found it");
}

 

Create a Primitive Database-type function

In the previous two exercises, we created an user input that changes text to lower case. Then we compared the normalized user input against values in our array. Consider to be an analog of accepting user input and then checking an index. Now, if our user has correctly guessed a flavor, we'll reach over into another array and deliver some content. This is analogous to going from an index to a database entry.

The first thing to do is create another array that gives the reasons why you like the various flavors of ice cream. Mine looks like this:

	var why = new Array();
	why[0] = "Vanilla is my first choice because I like it best";
	why[1] = "Lemon Ice is fun, but not for everyday.";
	why[2] = "Once in a while, I like pistachio";

The only other thing to do is replace the alert function with a called to the why array. Mine looks like this:

	alert(why[i]);

 

Find Your Ice Cream Favorites with XPath

Now we'll put our ice cream XML into a separate XML file and create a XSLT stylesheet to list our favorites.

First, get your XML ice cream data and put it in a separate file. Name the file something like "XpathIceCream.xml" Make sure that it's a simple text file. I created mine with WordPad.

Start another file in WordPad called "XPathStyle.xsl"

The fundamental contents of an XSLT stylesheet is a whole bunch of nimby poo (that's a technical term!) so the easiest thing to do is copy the following:

<xsl:stylesheet 
  version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 
  xmlns:fo="http://www.w3.org/1999/XSL/Format">
<xsl:template match="/">
<html>
	<head>
		<title></title>
	</head>
	<body>
		... Your HTML and XPath go in here
	</body>
</html>
</xsl:template>
</xsl:stylesheet>

Before going any farther, be sure to link the stylesheet to the XML source document. Go back to the XML source and add a call to the stylesheet. Mine looks like this:

	<?xml-stylesheet type="text/xsl" href="XPathStyle.xsl"?>

Now you're ready to style the HTML and pluck information out of the XML source and style it as an HTML document.

Call up the file XPathStyle.xsl and do the following:

Put in a <h1> header to identify your work. Mine looks like this:

	<h1>Terry does Xpath!</h1>

Next, let's use the <xsl:for-each> function to list all the ice cream flavors. Mine looks like this:

	<xsl:for-each select="iceCream/flavor">
		... the value-of statement goes in here
	</xsl:for-each>

Inside the for-each function goes a value-of function that will display each value in the XML source. Mine looks like this:

	<br />
	<xsl:value-of select="." />