DMA106 JavaScript

Tables—See below the creation of a very simple table with five (5) rows and five (5) cells in each row:

1 <tr>
<td colspan="5"> </td>
</tr>

2 <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

3 <tr>
<td colspan="5"> </td>
</tr>

4 <tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>

5 <tr>
<td colspan="5"> </td>
</tr>

</table>

This code creates the table that you see below:

Next, here are a couple of tables with the width of a few cells changed, made narrower, plus with the addition of the form elements. The code is place below the tables:

Forms—In the next table, the form has been added to it. Below, you will find the code to create this table:

1 <tr>
<td colspan="5"> </td>
</tr>

2 <tr>
<td width="10px"> </td>
<td align="right">type a number</td>
<td width="200px">
<input type="text" id="userNum"/>
</td>
<td> </td>
<td> </td>
</tr>

3 <tr>
<td colspan="5"> </td>
</tr>

4 <tr>
<td> </td>
<td> </td>
<td>
<input type="button" id="submit" value="submit">
</td>
<td> </td>
<td> </td>
</tr>

5 <tr>
<td colspan="5"> </td>
</tr>

</table>
</form>

When the borders are turned off, the table should look like this:

CSS Layer—In the next table, the form has been added to it. Below, you will find the code to create this table:Next, the div tags are added before the first </form> tag and after the last one, along with a CSS #ID to style and create a layer:

<style type="text/css">

</style>

The first <div> tag must also have the same ID as indicated in the CSS above, like so:
<div id="layer1">
This will change the simple table and form into a layer that may be positioned anywhere on the table. In addition, the ID will make the entire layer accessible to manipulation by our JavaScript.

Below, another CSS ID is added; however, in order for this to show up in the page, another pair of <div> must be added with the second ID, shown below applied

<style type="text/css">

</style>

And then down below in the HTML of the document, together with the ID:

<div id="layer2"> </div>
With this new ID, then, applied to a second pair of <div> tags, a new layer is created, even though there is nothing but a blank space between the two tags of the second layer:

document.getElementById()—If you recall from prior weeks, this function takes the action of searching through the entire document for a particular ID. Recall that ID's are assigned in a tag, and they may also be used by CSS to create layers, as we have done. We have also given IDs to our form elements. IDs are used by JavaScript to locate an item, this is why each ID must be unique. No two IDs can have the same name. JavaScript, once an ID is located, can manipulate the element in many ways.
If a form element has an ID, then JavaScript can use the ID to extract data from it by calling on its value. The value of a text box is whatever the user types in the box, and the way JavaScript extracts it is as follows:
document.getElementById("userNum").value
This refers to whatever the user types in the box. If the user types nothing in the box, then the value is nothing. Once the data in the text box is extracted, however, in order for it to be used or manipulated, it must be stored in a variable. This is done like so:
var multiple = document.getElementById("userNum").value
Now, whatever the user types in the box will immediately be transferred and stored into the variable multiple, and, as you know, many things can be done with variables and the data stored inside of them.

Event Handlers—As mentioned in prior classes, an event here refers to computer events, such as loading a web-page, or closing a web-page, or clicking on a button or link, or tapping the enter key. All of these are events among many others defined by JavaScript.
Now, JavaScript can use these defined events to cause yet other events to occur. For example, as mentioned, the clicking of a mouse is an event and this event could cause another event, like the appearance of an alert box over the browser window. It may do so with the event handler known as onclick: onclick = "alert('hello')";
This is also the event handler that we will use for the submit button in our form, but instead of calling an alert() function, we will call our own user-defined function, which we will name myTable():
<input type="button" id="submit" value="submit" onclick="myTable()"/>

Mid-Term Script—Once you get the HTML and CSS typed in your document and you have two layers similar to the ones shown above, and once you get the event handler typed into the button form element, it is time to type the script into the document. Since our event handler calls the myTable() function, then the name of our function in our script should be the same. It is as follows:

<script language="javascript" type="text/javascript">
<!- -

function myTable()
{
var multTable = prompt("Please enter a
number to create a multiplication
table","");
var theTable = "";
for(var i=1; i<=12; i++)
{
theTable += i + "x" +multTable+ "=" +(i
* multTable)+ "\n";
};
alert(theTable);
}

//- - >
</script>

Now, let us go over this script line-by-line so that we can determine what is happening.

Line 1:
function myTable()
Here is the simple function declaration including:

the function keyword;
the unique name of the function: myTable;
the opening and closing parentheses; and
the opening, line 2, and closing line 13, curly brackets for the entire function.

Lines 3-5:
var multTable = prompt("Please enter a number to generate a multiplication table","");
The first variable declaration and its initialization including:

the var keyword;
the unique name of the variable: multTable;
the assignment operator; and
the prompt() function which requests data from the user.

Line 6:
var theTable = "";
The second variable declaration and its initialization including:

the var keyword;
the unique name of the variable: theTable;
the assignment operator; and
the value assigned, which is an empty string. Without this, the value of the variable would be undefined or null. Try removing the = "" from this statement to see how it affects the entire function when run.

Line 7:
for(var i=1; i<=12; i++)
The initialization of the for loop including:

the for keyword;
the initial value of the counter variable, i = 1: theTable;
the test condition, i <= 12;
the incrementation of the counter variable, i++; and
the opening, line 8 and closing line 11 curly brackets of the for loop.

Line 9:
theTable += i + "x" +multTable+ "=" +(i * multTable)+ "\n";
This line assigns the variable, theTable, a new value, and by doing so, what we have is the heart of this script. It creates the multiplication table one line at at time in the following way:

assigns the variable, theTable, with a new value with the assignment operator +=. This operator retains the existing value and adds it to a new value, so the result is a combination of the previous value AND the new value.
next, begins the concatentation of a line of the multiplication table with the value of i. The first time through the loop i = 1. The second time, i = 2, the third, i = 3, and so on up to 12.
the second term of the concatenation is just a very short string, the character "X", which will represent the 'times' sign in the multiplication table;
the third term of the concatenation is the value of the variable multTable, which is simply whatever the number the user typed in at the prompt function.
the fourth term of the concatenation is another very short string, the character "=", which will represent the 'equal' sign in the multiplication table;
the fifth term of the concatenation is a brief operation in which two variables are multiplied, i * multTable, the counter variable multiplied by the user's number. This is last number of each line of the table after the equal sign.
the sixth term of the concatenation is the final short string, the escape character "\n", which is really just a hard return for the alert window, the equivalent of the <br/> for HTML.
the result of the concatenation of these six terms will be a single line of the multiplication table. If it is the first line, then the result will be this string:
"1 X 10 = 10".

Line 12:
alert(theTable);
This is the final output of the multiplication table, contained within the variable, theTable, in an alert() function.

Once you get the script to work, you will be able to click on the submit button in the form to activate it, or call the function; however, as the script is now written, it completely bypasses the input field of the form. Instead, it provides a prompt()function.
Therefore, just getting the script to function is only the very beginning of this problem: what you must do to complete this script for Part I of the mid-term project are three things:

eliminate the prompt()function;
activate the form text field as the source for data input instead of the prompt();
print out the results of the script (produce the output) in the other blank layer.

Below, you should find an example. Type a number in the form field, and then click submit:

JavaScript & HTML Tables—In many ways, this next script is very similar to the above script where we create the multiplication tables (not to mention the fact that you'll need both to complete your mid-term project properly). The script above constructs a multiplication table line-by-line, and this is what we do when we type an HTML table: we create it row-by-row. Conceptually, the process is identical: it is like creating a house made of bricks, in which you lay one course (one row) of bricks down and then add another on top, and another and another, one row at a time until the entire wall is complete. Any table is created this way, one row at a time.
However, since we are using JavaScript, and since we will be using the looping structure of a for loop, we have to determine what elements of our HTML table must be repeated: you must recall that looping structures in JavaScript are used for repetitive tasks. Since the construction of a table is in fact a repetitive task (it uses multiple rows), the looping structure of a for loop is ideal.
Okay then, so what is repeated in an HTML table? Why the rows and the tags that create them of course. The <table> tags are not repeated as there is only one at the start of the table, and one at the end of the table; but what is repeated is the series of <tr> and <td> tags in between them. As a result, we know that that series of tags is what goes into the loop.

See the script below:

<script language="javascript" type="text/javascript">
<!- -

function htmlTable()
{
var rowNum = prompt("Please enter a
number of rows for an HTML
table","");
var theTable = "<table border='1px'
width='500px'>";
for(var i=1; i<=rowNum; i++)
{
theTable += "<tr><td> 
</td></tr>";
};
theTable += "</table>";
document.write(theTable);
};

/ /- ->
</script>

The important thing to notice in the script above is what is within the loop in lines 10 and 11, and that is the string that creates the <tr> and <td> tags.

JavaScript

Tuesday, July 03, 2007

Summer 2007

week 8: 6/29

0 Comments:

About Me

Previous Posts