JavaScript Help!

**respectyoda** · 06-19-2012, 03:31 AM

I have a challenging problem I am working on. The problem says: Write a script that calculates the squares and cubes of the numbers from 0 to 10 and outputs XHTML text that displays the resulting values in an XHTML table format.

The code I have produced so far is here. I have been having trouble putting it in a table format. Any help is welcome!

Code:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml">
	<head>
		<title>Calculating Squares and Cubes</title>
		<style type="text/CSS">
			span {color: orange;}
		</style>
		<script type="text/javascript">
			<!--
			var square;
			var cube;
			document.write("<span>number\tsquare\tcube</span><br />");
			for (var number = 0; number <=10; number +=1)
			{
				square = number*number;
				cube = number*number*number;			
				document.writeln(number);
				document.writeln(square);
				document.writeln(cube);
				document.write("<br />");
			}			
			// -->
		</script>
		
	</head>

	<body>
		
	</body>
</html>

**jscheuer1** · 06-19-2012, 06:23 AM

We don't do homework assignments here. You wouldn't really be learning much if we did the work for you anyway.

But we have some participants here who are just learning this stuff themselves. If one of them wants to try helping you, at least someone will be learning something.

**keyboard** · 06-19-2012, 08:21 AM

EDIT - Scrap what I said, what you're asking for is very simple, so I don't feel bad telling you how to do it (you've already got the basics down-pat)

Code:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Calculating Squares and Cubes</title>
<style type="text/CSS">
span {
	color: orange;
}
</style>
<script type="text/javascript">
<!--
var square;
var cube;
document.write("<table border='1'>");
for (var number = 0; number <=10; number +=1){
	square = number*number;
	cube = number*number*number;	
	document.write("<tr>");
	document.write("<td>");
	document.write(number);
	document.write("</td>");
	document.write("<td>");
	document.write(square);
	document.write("</td>");
	document.write("<td>");
	document.write(cube);
	document.write("</td>");
	document.write("</tr>");
}	
document.write("</table>");			
// -->
</script>
</head>
<body>
</body>
</html>

That should do what you asked for... I made a few minor changes to what you already had too.
If you have any questions, please ask! I want you to know how it works, not just that it does work!
Keyboard1333

**jscheuer1** · 06-19-2012, 03:27 PM

Although it works, using document.write or document.writeln is rarely the ideal method for something like this. If you're interested in alternate methods, complete with speed trials, see:

http://www.quirksmode.org/dom/innerhtml.html

You can click on the various methods listed to see how long each one takes. Repeated clicks will create average times for that method. Clicking two or more methods will create relative rankings between the methods.

The created table is displayed each time at the bottom of the page, but it's not much to look at. Any such table is removed before a new on is created.

You can use your browser's 'view source' to see the various ways tables are being created for the tests.

All these tables output are asterisks. But the code that makes any of them can be adapted to the math and layout used for the document.write approach.

**ApacheTech** · 06-19-2012, 05:05 PM

Here's my effort. I've annotated the code for ease of interpretation.

HTML Code:

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="pageHead">
    <!-- Page Title-->
    <title>Squares and Cubes</title>
    <!-- Meta Block -->
    <meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
    <meta content="Squares and Cubes" name="description" />
    <meta content="square, cube, numbers" name="keywords" />
    <meta content="all,index,follow" name="robots" />
    <meta content="noodp" name="msnbot" />
    <meta content="global" name="distribution" />
    <!-- JavaScript Scripts-->
    <script type="text/javascript">
        //<[CDATA[

        /*
        * Function: displayTable - Outputs XHTML values to the page.
        */
        function displayTable() {

            /*
            * Locate "tblBody" tbody element on the page.
            */
            var el = document.getElementById('tblBody');

            /*
            * Inject XHTML into the table, using Math.pow(n,p);
            */
            for (i = 0; i <= 10; i++) {

                /*
                * Create local variable, strXHTML, to house the XHTML to output.
                */
                var strXHTML = '';

                /*
                * Build each table row with calculated values.
                */
                strXHTML += '<tr>';
                strXHTML += '   <td>' + i + '</td>';
                strXHTML += '   <td>' + Math.pow(i, 2) + '</td>';
                strXHTML += '   <td>' + Math.pow(i, 3) + '</td>';
                strXHTML += '</tr>';

                /*
                * Inject temporary XHTML into the table body.
                */
                el.innerHTML += strXHTML;
            }
        }

        /*
        * When the page loads, run the above code.
        */
        window.addEventListener('load', displayTable, false);
        //]]>
    </script>
    <!-- CSS Styles -->
    <style type="text/css">
        /*
        * TABLE STYLES
        */
        table, td, th
        {
            border: 1px solid #000000;
            border-collapse: collapse;
            padding: 5px;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="page">
        <table>
            <tbody id="tblBody">
                <tr>
                    <th>
                        n
                    </th>
                    <th>
                        n*n
                    </th>
                    <th>
                        n*n*n
                    </th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Thread: JavaScript Help!

Thread Tools

Search Thread

JavaScript Help!

Bookmarks

Bookmarks

Posting Permissions