First attempt at Javascript

FredT · 08-10-2008, 03:56 PM

Hi,

I tried to write my first script on my own (I mean without a tutorial or anything to guide me) and this is what I came up with. I'm okay with PHP, so I have some scripting experience, but I guess I didn't do so well with javascript! It is supposed to add a row to the bottom of the table, but it really doesn't work right now

. Can anyone help me out?

Thanks!

P.S. Darn, there are no indents when I paste the code here. To spare your eyes, I uploaded it *here* as a .txt so it's more legible.

**jamiemac2005** · 08-10-2008, 04:37 PM

Hey:

1) if you wrap tags around your code in the post it will display indents etc. but the text file worked fine too =]

2) (the actual problem):

Code:

// ***Here's the table!*** \\
var myTable = document.getElementById('content');

is within the <head> section of the page, i'll explain the problem
- The page loads from top to bottom, and any code written in the script that is not within a function, etc. is run straight away. (e.g. the code above is run before the table is actually created so no element with the id "content" is found(because it's not yet been rendered/created).

To fix the problem, either:
A) run the code within the function that it's used in.
or
b) create an "initializing" function that runs when the page is loaded to set the variable.

If that doesn't work post back and i'll run the script and see what's going on.
If you were using firefox and you opened the Error Console you would have found something like " document.getElementById('content') is null ".
(i strongly suggest getting FF as a testing browser if you don't already use it, and if you need IE etc, then you could use IE Tab etc)

Cheers,
Jamey

p.s. if that's your first go at writing Javascript i'm impressed, it took a year or so for me to get that far. (Though HTML, CSS & Javascript were my first languages, so your previous scripting knowledge will help... Especially PHP because i find the syntax to core Javascript and core PHP is close).

FredT · 08-10-2008, 07:29 PM

Yup, PHP certainly did help. I don't want to sound like a PHP expert or something... or even an expert with anything. Well, this is my story kind of... Just to let you know where I'm coming from.

One year ago I knew pretty much nothing about web design, but I was interested so I took a course at Ed2Go.com called "Creating Web Pages" and I was like "Oh, I wonder what software we'll be using" lol. Anyways, much to my surprise, I ended up learning HTML in that course and I loved it. Then I realized I could make a little money designing sites for small businesses around town (I'm not an adult by the way, I'm only 15). So I figured that if I was going to start making good looking sites I'd need a little software to help me out. I got CS3 Web Premium for Christmas

and through Dreamweaver's auto-complete features I turned my HTML into XHTML and picked up CSS. Then I started learning actionscript just through scattered tutorials and stuff to go with Flash. That's really where I picked up the programming syntax with declaring variables and the if/else stuff. I took another six week course from Ed2Go (great courses, but they're $55... worth it to me though, they are SO fantastic) to learn PHP. I've made one PHP application and it's been working pretty good, so that's why I said I'm okay with PHP. I can build an application that actually works... unlike Javascript. As for my javascript knowledge, I have a web design book that has a chapter in it about javascript, so I read it and picked up a few thing's I've tried to put to use. Google searches have been able to fill in the holes for me quite well

So I ran the little Firefox debugger tool (I NEVER KNEW ABOUT THAT!!! HOW USEFUL!) and it came up with "currentRowId is not defined". Then when I put in the value manually it came up with myTable is not defined just like you said. The first thing I tried was putting the variables inside a function called loadVars() and putting <body onload="loadVars()"> That didn't work, so I tried moving the whole script to the very bottom of the page just before </body>. Still same results :-(

I've been having the same troubles with my image changer script. I've had two ideas that I thought would work... but I really need to sort out my variable troubles.

HAHA! I've just found a capitalization error right this moment! This might lead to something.

Ok, now I've fixed that and the whole script is at the bottom of the page, so I'm getting no errors. But it's still not working. Oh, and I also removed a semicolon after i++ in my "for" loop. That was a problem.

Alright, I think that's it! Thanks for your help!

Updated code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Create your schedule</title>
<style type="text/css">
table	{
		border: solid 1px #000000;
		}
td		{
		width: 50%;
		}
.input	{
		border: solid 1px #000000;
		background-color: #FFFFFF;
		width: 250px;
		}
</style>


</head>

<body>
<form id="theform" name="theform" method="post" action="processcreate.php">
<a href="#" onclick="addRow()">Click</a>
<table width="500" border="1" cellspacing="0" cellpadding="0" id="content">
  <tr id="row1">
    <td id="cell1">
        <input type="text" name="input1" id="input1" class="input" value="Semester 1" />
    </td>
    <td id="cell2">
    	<input type="text" name="input2" id="input2" class="input" value="Semester 2" />
  	</td>
  </tr>
  <tr id="row2">
    <td id="cell3">
    	<input type="text" name="input3" id="input3" class="input" value="Class 1" />
    </td>
    <td id="cell4">
    	<input type="text" name="input4" id="input4" class="input" value="Class 5" />
    </td>
  </tr>
  <tr id="row3">
    <td id="cell5">
    	<input type="text" name="input5" id="input5" class="input" value="Class 2" />
    </td>
    <td id="cell6">
    	<input type="text" name="input6" id="input6" class="input" value="Class 6" />
    </td>
  </tr>
  <tr id="row4">
    <td id="cell7">
    	<input type="text" name="input7" id="input7" class="input" value="Class 3" />
    </td>
    <td id="cell8">
    	<input type="text" name="input8" id="input8" class="input" value="Class 7" />
    </td>
  </tr>
  <tr id="row5">
  	<td id="cell9">
    	<input type="text" name="input9" id="input9" class="input" value="Class 4" />
    </td>
    <td id="cell10">
    	<input type="text" name="input10" id="input10" class="input" value="Class 8" />
    </td>
  </tr>
</table>
</form>
<script type="text/javascript">
// ***Here's the table!*** \\
var myTable = document.getElementById('content');

// ***Current Row IDs*** \\
var currentRowId = 6;
var currentColumnId = 3;
var currentCellId = 11;

// ***Add a Row*** \\
function addRow() {
	
	// Create the tr \\
	var newRow = document.createElement('tr');
	newRow.setAttribute('id', 'row'+currentRowId);
	myTable.appendChild(newRow);
	
	// Create the tds \\
	var columnRef = document.getElementById('row1');
	columnRef.getElementsByTagName('td');
	
	for(i = 0; i <= columnRef.length; i++) {
		var newCell = document.createElement('td');
		newCell.setAttribute('id', 'cell'+currentCellId);
		var newInput = document.createElement('input');
		newInput.setAttribute('type', 'text');
		newInput.setAttribute('name', 'input'+currentCellId);
		newInput.setAttribute('id', 'input'+currentCellId);
		newInput.setAttribute('class', 'input');
		newInput.setAttribute('value', 'Class'+(currentCellId-2));
		newCell.appendChild(newInput);
		var editingRow = document.getElementById('row'+currentRowId);
		editingRow.appendChild(newCell);
		currentCellId++;
	}
	
	currentRowId++;
}

</script>
</body>
</html>

FredT · 08-10-2008, 10:18 PM

Hey jamiemac, I just checked out your profile and found that you're computer background is so close to mine! Wow! You learned HTML when you were one year younger than me learned web programming languages in kind of the same kind of order and my next goal is to move on to C++ and Java just like you know now. AND you're only a couple years older than I am... most of the people on here are adults (or so I always thought?)

Anyways, I just thought that was kind of neat that our learning "paths" were so similar

**jamiemac2005** · 08-11-2008, 07:39 AM

Hey again FredT,

I have to say i was completely stumped with this problem for quite a while(your script looked perfect, and there were no errors), so i decided to debug it (i use quite a long method which cascades through different tools&/FF Add-Ons).

So, i used the DOM Inspector Add-On to take a look at the page's code in a live environment, When i clicked "Click" the TR element popped up, but it had no children(the TDs).

Which lead me to think their was a problem with the for statement, (because if it ran once the TR would have at least one TD child).

So i took a closer look at it, and found the problem:

Code:

//......
// Create the tds \\
var columnRef = document.getElementById('row1');

//this line of code is arbitrary(it does nothing),
//what you meant to do is set this as a variable
columnRef.getElementsByTagName('td');
	
//and then use it's .length property here.
for(i = 0; i <= columnRef.length; i++) {
//......

Sooooooo:

Code:

//......
// Create the tds \\
var columnRef = document.getElementById('row1');
//get the cells
var amountOfCells = columnRef.getElementsByTagName('td');

//the new for loop:
//so now you use the amount of cells
//also only use < rather than <= because i=0 not 1(and .length counts from 1)
//(you could also just make i = 1 to start with and use <=
for(i = 0; i < amountOfCells.length; i++) {
//.........

As for the origional thing(referencing the table before it's created), although the script would work with these changes with it still in the body, the "click" link is rendered before the script and it could lead to more problems... So to "fix"(not really a fix, just a cleaning of code) that:
- Move the script back to the head of the page
- Move the assignment of myTable into the function
so the script looks like:

Code:

// ***Here's the table!*** \\(it's now initialized when the function is run)
var myTable = false;

// ***Add a Row*** \\
function addRow() {
	myTable = document.getElementById('content');

Anyway i also attached the version of the page i modified so you can look at it as a whole etc.

As for everything else, wow, we do have a quite similar background...

Quote:

Then I realized I could make a little money designing sites for small businesses around town

Haha i had the same realisation and loved it. =]

Very similar actually, how much knowledge of actionscript do you have? because technically Javascript and Actionscript are both ECMA Script on different platforms(one compiled and one interpreted), i'm sure the AS will help your JS development.

Yeah, that's the thing with PHP, and other server-side languages, even if you learn all the syntax, methods etc. until you've pulled it all together in a big project of some sort it doesn't feel as if you know it. I study Computing at A-Level and this year my coursework is based on web-building (Using PHP, mySQL then the big three[HTML, CSS & Javascript).

Haha, Javascript-wise i learned from Javascript For Dummies ( a nice beginner book but useless for anything else ), then got to the book store again and bought O'Reilly's "Javascript the definitive guide" which is the best book on Javascript i've read(well almost read, but there's not enough time in the day). Haha, and Google is your friend, and a very useful resource.

Yeah, firefox has a tonne of useful debugging tools:
- The Built in "Error Console"
- The Distributed "Web Developer" Add-On
- The Venkman Debugger: www.mozilla.org/projects/venkman/
- The DOM Inspector: https://addons.mozilla.org/en-US/firefox/addon/6622
- Inspect this: https://addons.mozilla.org/en-US/firefox/addon/1913
- I also use a "Bookmarklet" called JSShell which allows you to execute JS within a page from a small shell-like window(yet again very useful): https://www.squarefree.com/bookmarklets/webdevel.html ("Shell").

If you're going to be developing and debugging Javascript for a while i suggest you check them out. And if you haven't yet you could also take a look at Greasemonkey: https://addons.mozilla.org/en-US/firefox/addon/748 which is great for modifying pages using Javascript (every time yo view the page).

I used InspectThis and DOM Inspector to work out the problem in this page, Though the Venkman project is a great tool for debugging aswell (and was the next step in my intensive debugging method).

Haha, yeah, if you're interested in learning C++ i suggest: www.cprogramming.com (for whenever you choose to learn)... As for Java i haven't yet found an amazing tutorial resouce so i've invested in the latest edition of "Java in a nutshell".

Our paths seem to be going in the same direction, and yeah i was under the impression lots of people on this forum were older, but actually i'm sure there are quite a few around our age.

Good luck with all your learning, coding and other stuff, feel free to PM me any time, and of course post back whenever about this script(yet again i'm impressed because it was a good year or two before i was producing scripts like this).

Cheers,
Jamey

08-10-2008, 03:56 PM	#1 (permalink)
FredT Registered User Join Date: Nov 2007 Posts: 388 OS: Mac OS X 10.5.7 and XP SP2	First attempt at Javascript Hi, I tried to write my first script on my own (I mean without a tutorial or anything to guide me) and this is what I came up with. I'm okay with PHP, so I have some scripting experience, but I guess I didn't do so well with javascript! It is supposed to add a row to the bottom of the table, but it really doesn't work right now . Can anyone help me out? Thanks! P.S. Darn, there are no indents when I paste the code here. To spare your eyes, I uploaded it here as a .txt so it's more legible. Last edited by FredT; 08-10-2008 at 04:00 PM.

08-10-2008, 04:37 PM	#2 (permalink)
jamiemac2005 Design Team Member Join Date: Jul 2007 Location: Coventry, UK Posts: 1,879 OS: Vista, various linux distros	Re: First attempt at Javascript Hey: 1) if you wrap tags around your code in the post it will display indents etc. but the text file worked fine too =] 2) (the actual problem): Code: // *Here's the table!* \\ var myTable = document.getElementById('content'); is within the <head> section of the page, i'll explain the problem - The page loads from top to bottom, and any code written in the script that is not within a function, etc. is run straight away. (e.g. the code above is run before the table is actually created so no element with the id "content" is found(because it's not yet been rendered/created). To fix the problem, either: A) run the code within the function that it's used in. or b) create an "initializing" function that runs when the page is loaded to set the variable. If that doesn't work post back and i'll run the script and see what's going on. If you were using firefox and you opened the Error Console you would have found something like " document.getElementById('content') is null ". (i strongly suggest getting FF as a testing browser if you don't already use it, and if you need IE etc, then you could use IE Tab etc) Cheers, Jamey p.s. if that's your first go at writing Javascript i'm impressed, it took a year or so for me to get that far. (Though HTML, CSS & Javascript were my first languages, so your previous scripting knowledge will help... Especially PHP because i find the syntax to core Javascript and core PHP is close). __________________ Myspace

08-10-2008, 10:18 PM	#4 (permalink)
FredT Registered User Join Date: Nov 2007 Posts: 388 OS: Mac OS X 10.5.7 and XP SP2	Re: First attempt at Javascript Hey jamiemac, I just checked out your profile and found that you're computer background is so close to mine! Wow! You learned HTML when you were one year younger than me learned web programming languages in kind of the same kind of order and my next goal is to move on to C++ and Java just like you know now. AND you're only a couple years older than I am... most of the people on here are adults (or so I always thought?) Anyways, I just thought that was kind of neat that our learning "paths" were so similar