Forum:

HTML Pages with CSS and JavaScript

JavaScript Newbie Simple Problem

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I have been coding for years but I am brand new to JavaScript. So far it's pretty easy, but this one program I wrote just won't work right!!

The code is pretty self-explainatory, it displays the current date on top of the page, there are 3 boxes to enter numbers into for hours, days, weeks, and then you press calculate and it's supposed to print the new date below. If someone could look over my code and tell me where I am going wrong? I believe it's a syntax error myself. :P

Thanks!!

<HTML>
	<HEAD>
		<TITLE>Time mathematics</TITLE>
		<style type="text/css">
			body {
				font-size:24px;
				font-weight:bold;
			}
			a {
				color:#8BA870;
				text-decoration:none;
			}
			a:hover {
				text-decoration:underline;
			}
			a:visited {
				color:#5DFC0A;
			}
		</style>
		<script language="JavaScript"></script>
 	</HEAD>
 	<BODY bgcolor="green">
 		<CENTER>
 		<H1>Time Mathematics</H1>
 		<P><br><br>
		<script language="JavaScript"></script><br><br>
		<form name="dateCalc">
			Hours <input type="text" name="hourText" size=4 maxlength=4 value="0"><br>
			Days  <input type="text" name="dayText" size=4 maxlength=4 value="0"><br>
			Weeks <input type="text" name="weekText" size=4 maxlength=4 value="0"><br><br><br>
			<input type="button" name="calcButton" value="Calculate" onClick='getNewTime(document.dateCalc.hourText.value, 
				document.dateCalc.dayText.value, document.dateCalc.weekText.value); document.dateCalc.resultText.value = 
				(daysOfWeek[newDate.getDay()] + ", " + monthsOfYear[newDate.getMonth()] + 
				" " + newDate.getDate() + ", " + newDate.getFullYear());'><br><br>
			<input type="text" name="resultText" size=40 maxlength=40 value="">
		</form>
		<br><br><br><br><a href="master.html">Back</a>
		</CENTER>
 	</BODY>
</HTML>

SCJA
~Currently preparing for SCJP6

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Green text on tan is a guarantee that many people will not be able to read your post. I have removed the color for you.

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

What is the nature of the error? That's a lot of code to expect people to inspect without any clues. Have you run the script in Firebug on Firefox to find out more information about the error?

[Asking smart questions] [About Bear] [Books by Bear]

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Why is line 50 commented out?

[Asking smart questions] [About Bear] [Books by Bear]

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sorry about that. I figured someone would copy/paste the code into an HTML and open it in a browser.

I'm not getting an error exactly.... just results that are different from expected. After pressing "calculate" instead of getting something like "Thursday, January 8, 2053" I am getting "undefined, undefined NaN, NaN". I have something mixed up obviously.

SCJA
~Currently preparing for SCJP6

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear, it shows line 50 as commented because it starts with a //.... but any browser with JavaScript enabled will read the line just fine. IE6, 7 and FF do that I know of. That's exactly how the tutorial/trainer I've been using shows to set up a JavaScript block so that disabled or older browsers will not print the code on the screen.

SCJA
~Currently preparing for SCJP6

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

hint:

Eric

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Learn about Firebug for Firefox, add a break point to the function, and walk through your code.

Eric

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Are you planning on supporting IE3?

If not, you can drop the antiquated practice of gooping up the markup with the unnecessary commenting.

[Asking smart questions] [About Bear] [Books by Bear]

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Eric, Thanks for the help. I actually use Firebug all the time when debugging HTML and CSS problems. I didn't know you could use it to debug JavaScript as well. How would you insert a break and check the code on the fly using Firebug? Like I said, I'm a JavaScript newb

Bear, No I don't plan to support IE3, lol. I guess the tutorial I am using is very old then. I will take out the useless comments... but leaves me wondering how to support a browser that has JavaScript disabled?

Thanks!

SCJA
~Currently preparing for SCJP6

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Open up the script. click on the left hand side to add a break point in the place in question like you would do with any IDE for debugging serverside code. Refresh the browser. Use the buttons in the toolbar to step.

Eric

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I'm using Notepad... rofl! I'll mess with Firefox and see what I can come up with because the foo = 1 + "1" thing still has me confused. I know what your getting at but this works:

And this does not:

They are both returning Strings and numbers but the top one is concatinating them correctly while the bottom is giving me undefined and NaN.

SCJA
~Currently preparing for SCJP6

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Go old school, add alert statements in your function getNewTime or walk through it will firebug.

Eric

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Eric... I got it to work by debugging in Firebug. The error was in line "newMilliseconds += (oneWeek + weeks)" Should have been "newMilliseconds += (oneWeek * weeks)"

The + was concatinating the strings and making the newMilliseconds so long that a new Date object couldn't be created from it. Such a small mistake too, lol.

Thanks Eric and Bear!

SCJA
~Currently preparing for SCJP6

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

While I've got a couple authors here..... What's the current version of JavaScript that's considered "standard" and do you know of any online tutorials that are good? Apparantly the one I've been using is for JavaScript 1.1 and is severly out of date. I didn't know where to start so I just randomly jumped in to it.

thanks!

SCJA
~Currently preparing for SCJP6

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

http://en.wikipedia.org/wiki/JavaScript#Versions

Eric

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Brian Legg wrote:but leaves me wondering how to support a browser that has JavaScript disabled?

That, my friend, could be a book onto itself.

There is a <noscript> tag by which you can provide markup specific to such a situation, but the modern approach is to write the pages, using a technique known as Unobtrusive JavaScript, such that the page still works in the absence of JavaScript.

[Asking smart questions] [About Bear] [Books by Bear]

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

WoW.... so FF can handle JavaScript 1.9 but IE can only go up to JavaScript 1.5 unless they have Crome? So do most people code in 1.5 right now since IE6 and 7 are still dominant browsers? I just want to make sure my scripts are compatible with the majority of browsers out there.

thanks!

SCJA
~Currently preparing for SCJP6

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

P.S. in my current project I have the luxury of saying "enable JavaScript or go away".

[Asking smart questions] [About Bear] [Books by Bear]

Eric Pascarello

author

Posts: 15385

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I think Mozilla came up with 1.9 on their own. Do not quote me on that.

If you want to use JavaScript, use JQuery and save yourself a headache.

Eric

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Bear Bibeault wrote:P.S. in my current project I have the luxury of saying "enable JavaScript or go away".

That's great Bear, lol. I am still semi-new to CSS and HTML... I mean, they are easy to learn/use but it's not easy to create websites that are 100% cross browser compatible (look and feel I mean). So for now I am just trying to concentrate on making pages as simple and browser friendly as possible including JavaScript. I don't like to write stuff to check what browser someone is using or whether they have JavaScript enabled or not... I'm just going to use code/script that 99% of browsers can understand and if they are disabling JavaScript then I want code in place to make up for it. I'll have to read up on that unobtrusive scripting. Sounds just like what I am trying to do.

SCJA
~Currently preparing for SCJP6

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

To those ends, adopt a library such as jQuery and your life will be much simpler.

[Asking smart questions] [About Bear] [Books by Bear]

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I just looked JQuery up.... "Just as CSS separates "display" characteristics from the HTML structure, jQuery separates the "behavior" characteristics from the HTML structure. For example, instead of directly specifying the on-click event handler in the specification of a button element, a jQuery driven page would first identify the button element, and then modify its on-click event handler. This separation of behavior from structure is also referred to as the principle of Unobtrusive JavaScript."

Sounds like a great idea. Keeping behavior seperate from the display is common programming sense.

Here comes the biggest newb question of all... I'm still kinda confused as to how JS or JQuery work. I didn't download or install anything to start using JavaScript... I just typed it into my html and opened it in the browser. I assume the browser I am using either comes with a JavaScript library or it was added on at some point without me paying attention. I also assume to use JQuery I need to download/install something to get it to work correctly. If someone else opens a page I wrote does it convert the JQuery into 1 HTML page with embedded JavaScript? If so, does it check to see if they even have JavaScript? I'm just not understanding how you could use JavaScript unobtrusively.... if some "behavior" is disabled then how do you have a page worth showing at all?

Sorry for all the questions... I always spend a lot of time wrapping my mind around how something works before getting to into it.

SCJA
~Currently preparing for SCJP6

Bear Bibeault

Sheriff

Posts: 67706

173

I like...

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Brian Legg wrote:I assume the browser I am using either comes with a JavaScript library

Yes. the JavaScript engine is built in to the browsers.

I also assume to use JQuery I need to download/install something to get it to work correctly.

Yes. jQuery is a JavaScript library and you import it into your page just as you would any other external javaScript.

If someone else opens a page I wrote does it convert the JQuery into 1 HTML page with embedded JavaScript?

No. The JavaScript file is downloaded and added to the page by the browser. jQuery isn't a new language; it's just JavaScript.

If so, does it check to see if they even have JavaScript? I'm just not understanding how you could use JavaScript unobtrusively.... if some "behavior" is disabled then how do you have a page worth showing at all?

That's the art of Unobtrusive JavaScript. The page is written to be at least minimally functional without the use of script. Then, if JavaScript is enabled, the script enhances the page with all the dynamic things that are possible with scripting.

Obviously people who have JavaScript turned off will not get any scripted behaviors. They'll just get whatever's possible with the "normal" HTML links and form submissions.

Sorry for all the questions... I always spend a lot of time wrapping my mind around how something works before getting to into it.

Questions are why these forums exist.

[Asking smart questions] [About Bear] [Books by Bear]

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thanks Bear, that clears up a lot!

I have a few other generic questions, but I think I will save them up and make a new thread. The code problem was solved so I should let this one die.

SCJA
~Currently preparing for SCJP6

Brian Legg

Ranch Hand

Posts: 488

posted 14 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Also, to anyone looking at my code... the CSS was combined with the HTML for simplicity. I normally keep them seperate.

SCJA
~Currently preparing for SCJP6

Consider Paul's rocket mass heater.