Someone dropped a job into my lap

[Helmut Giese]

Hello out there,
I am a rather experienced C programmer. However, today I got a
javascript assignment because someone left (something like: "You're a
great programmer - you'll handle this.") and I never have done any web
stuff before. Oh, and it's due within 2 weeks of course :(

Having had a first look at javascript I noted some familiarities with
C, but there also seems to be a lot of pre-defined stuff (like
'document') with certain properties / functions, which is a bit
confusing.

I have listed some basic questions below and I am hoping someone will
be able to provide some links ot other information answering those.

1) What is the current version of javascript which is supported by the
current browsers (or is this a no-issue)?

2) A reference of pre-defined objects and their properties /
functions.

3) How do you debug javascript? If you make an error, wrong HTML might
show up (this could give you a clue) but also nothing might show up at
all - what do you do then? Stare at the code?

4) Libraries / collection of often used functions (handling of strings
and dates, numeric stuff, etc.)

5) A side note: Is it possible in javascript to create variable names
at runtime and access them? Something like (e.g. iterating over input
fields)
for (i=0; i< 10; ++i) {
currField = <construct name of input field i here, e.g. inp0>
currField.value = ...
}

Any answers to the above questions or further helpful information will
be greatly apprieciated.
Best regards
Helmut Giese

[Erwin Moller]

Helmut Giese wrote:

Hello out there,
I am a rather experienced C programmer. However, today I got a
javascript assignment because someone left (something like: "You're a
great programmer - you'll handle this.") and I never have done any web
stuff before. Oh, and it's due within 2 weeks of course :(
Hi Helmut,

Get a good book. :-)
I'll try to answer a few questions, but a good book is what you need.
A good book to learn Javascript itself is:
Javascript, the definite guide by O'Reilly

If you should focus on HTML, Cascading Style Sheets, adn Document Object
Model (DOM), and want to use Javascript to manipulate pages/layout, I would
advise the book:
Dynamic HTML, the definity guide, also by O'Reilly.


Having had a first look at javascript I noted some familiarities with
C, but there also seems to be a lot of pre-defined stuff (like
'document') with certain properties / functions, which is a bit
confusing.
Yes, that are objects that represent something in a browser.
You'll see things like window, document, form, images, etc.

Javascript is an object oriented language with a lot of build in objects you
can use to manipulate pages.

I have listed some basic questions below and I am hoping someone will
be able to provide some links ot other information answering those.

1) What is the current version of javascript which is supported by the
current browsers (or is this a no-issue)?
I would like to pass this question to somebody else.
Javascript is and is not standarised.
Yes, ECMA (google for it) has defined a set of standards for javascript,
which are to a certain degree implemented in browsers, depending on the
browser/vendor, etc.

My approach is always: Code in Mozilla / Firefox, and test on IE on windows.
Always test on playforms/browsers you want to support.

The way javascript interacts with DOM, is different for IE and Mozilla.
They have a certain set of 'common functionality'.

2) A reference of pre-defined objects and their properties /
functions.
Depends on the browser.
If you get a good book, you will find all predifined objects listed.
I would advise you to read the second book above (Dynamic HTML) for a
comprehensive list of all objects and their methods, including the browsers
that support it.


3) How do you debug javascript? If you make an error, wrong HTML might
show up (this could give you a clue) but also nothing might show up at
all - what do you do then? Stare at the code?
Use Mozilla/Firefox: You can find a menu Tools -> Webdevelopment->Javascript
console.
When an error occurs, it will be listed there with relevant errormessages.

I also make entensive use of alert() or document.write() when debugging
scripts, just to output variables the old-fashioned way.

If you want a real Javascript debugger, check the FAQ, posted on a regular
basis in this newsgroup. (The one under your posting in my newsreader. :-)

Before I forget: Read that FAQ: It contains answers to a zillion question
you might have.


4) Libraries / collection of often used functions (handling of strings
and dates, numeric stuff, etc.)
Zillions. Some of good quality, some suck.
The FAQ also contains some relevant links for that.

My advise would be to first code stuff yourself before using libs, so you
know what is going on and can trace bugs yourself.

5) A side note: Is it possible in javascript to create variable names
at runtime and access them? Something like (e.g. iterating over input
fields)
for (i=0; i< 10; ++i) {
currField = <construct name of input field i here, e.g. inp0>
currField.value = ...
}
Yes, you can add all kind of formelements to a HTML-page dynamically.
This is a little more complicated than replacing an image.
(I always prefer doing stuff like that serverside.)

Any answers to the above questions or further helpful information will
be greatly apprieciated.
Best regards
Helmut Giese

Well, I hope I said a few sensible things. :-)

Good luck.
2 weeks are gone very fast. :-/

Regards,
Erwin Moller

[Duncan Booth]

Helmut Giese wrote:

I have listed some basic questions below and I am hoping someone will
be able to provide some links ot other information answering those.

1) What is the current version of javascript which is supported by the
current browsers (or is this a no-issue)?
Define 'current browsers'. Are you developing for an intranet, when you
might reasonably be able to control which browsers are used, or the
internet when you can't. If its the latter, it is up to you to decide how
far back in time to go.

I would suggest as a general rule assume ECMAScript Language Specification
3rd edition (December 1999),
http://www.ecma-international.org/pu...s/Ecma-262.htm

but remember that none of the browsers actually implement the standard
correctly.

2) A reference of pre-defined objects and their properties /
functions.
Try starting with
http://msdn.microsoft.com/workshop/a...ml_reference_e
ntry.asp

at the bottom of each description of an object or property there is a
section 'standards information'. Avoid touching anything which is marked as
not being standard unless you have no choice. Use sites such as
http://www.quirksmode.org/ to find out how to handle differences between
browsers.

3) How do you debug javascript? If you make an error, wrong HTML might
show up (this could give you a clue) but also nothing might show up at
all - what do you do then? Stare at the code?
Always do your development first on Mozilla or Firefox with the Javascript
debugger installed (on Firefox it is an option when installing but isn't
installed by default). Get it working on Mozilla then immediately test on
IE, that way if it doesn't work you only have a few possible lines to
search for the error.

You can also do debug style print statements on Firefox:

dump('just done whatever');

To see these you need to start Firefox with a console (on windows:
firefox.exe -console), although avoid firefox 1.5 beta for this as it
doesn't work.

On IE you can install Microsoft's script debugger (use this debugger only
as a last resort), or apparently it is possible to get the script debugger
from recent versions of Microsoft Office working instead. The main catch
here is that if you have ever had any of Microsoft's .net sdks installed,
and you aren't trying to debug a .net application, you need to make sure
that the 'machine debug manager' service is running mdm.exe from your
system folder, and not from 'Program Files\Common Files\Microsoft
Shared\VS7Debug'.

4) Libraries / collection of often used functions (handling of strings
and dates, numeric stuff, etc.)

5) A side note: Is it possible in javascript to create variable names
at runtime and access them? Something like (e.g. iterating over input
fields)
for (i=0; i< 10; ++i) {
currField = <construct name of input field i here, e.g. inp0>
currField.value = ...
}
Creating variable names dynamically is never a good idea in any language.
What you actually want to do here is to reference the objects. Using global
variables isn't a good idea either: make sure all your local variables (I
hope 'i' is intended to be local) are declared using 'var'.

If you have a form with the name 'form1', and a field 'field1' then you can
access it as:

var field = document.forms['form1'].elements['field1'];
field.value = 'whatever';

Naturally you can iterate over the forms and elements collections. If you
do that you might not even care what the field names are:

var currentForm = document.forms['form1'];
var elements = currentForm.elements
for (var i=0; i < elements.length; ++i) {
var currField = elements[i];
if (currField.tagName=='INPUT' && currField.type=='text') {
currField.value = 'whatever';
};
};

Any answers to the above questions or further helpful information will
be greatly apprieciated.

If you believe in writing good code then I strongly recommend writing unit
tests. I use ecmaunit (from http://codespeak.net/svn/kupu/trunk/ecmaunit/)
or there is also jsunit (from http://www.edwardh.com/jsunit/)

Also, always write all your javascript in a separate file (or files) never
interleave javascript in the main html page.

[Baconbutty]

> Having had a first look at javascript I noted some familiarities with

C
Only in syntax. Otherwise I believe it is fundamentally different.
, but there also seems to be a lot of pre-defined stuff (like
'document') with certain properties / functions, which is a bit
confusing.
The "pre-defined stuff" is largely not Javascript, but objects exposed
to Javascript by the web browser.

When used in the web browser, there is a binding between Javascript and
the web browser. Look up terms such as browser and document object
models.
1) What is the current version of javascript which is supported by the
current browsers (or is this a no-issue)?
There is no on controller of the Javascript language. Created by
Brendan Eich for the Netscape browser, it was subsequently standardised
in the ECMA standard.

Microsoft's implementation is called JScript, and is at 5.6.
Microsoft have also created JScript.NET, but this is not available to
use in the browser.

Firefox is derived from Netscape, and is at 1.5 (or soon to be 1.6 I
believe, as there as some recent additions), and Firefox is now also
implementing an extension giving native XML support within Javascipt.
There is also a draft 2.0 floating about, which proposes to implement
class based OOP, in addition to Javascript's prototype based OOP.
2) A reference of pre-defined objects and their properties /
functions.
In terms of native Javascript data types and objects
(Object,Function,Array,String,Number etc..) and their methods, visit
the Mozilla web site (Javascript), or the Microsoft MSDN web site
(JScript). Alternatively, read the ECMA standard.

In terms of the browser objects which are exposed to Javascript, there
are a multitude of references on the internet. The www.w3c.org is the
home of the standards for HTML, XML, DOM, CSS etc. But each browser
varies in subtle and not so subtle ways as to how they implement these
standards, and each browser also has its own non-standard additions.
It is a separate art in itself to master the differences between the
browsers. As noted by other posters, the www.quirksmode.org site is a
good starting point.
3) How do you debug javascript? If you make an error, wrong HTML might
show up (this could give you a clue) but also nothing might show up at
all - what do you do then? Stare at the code?
Each browser has its own debugging tools, and there may be other tools
you can get. In IE, if an error occurs, a dialogue box with the line
number appears. In Mozilla, you must open up a specially error window
to check for errors. Otherwise, yes, it is a matter of getting a line
number for the error and staring at the code: but with Javascript it is
not so hard. Most errors are usually to do with typos or wrong data
types (Javascript being loosely typed, subtle errors can creep in).
4) Libraries / collection of often used functions (handling of strings
and dates, numeric stuff, etc.)
The Javascript language spec includes a good selection of the basics
natively.

Outside that, there are again a multitude of libraries/code examples to
be found, varying in quality.
5) A side note: Is it possible in javascript to create variable names
at runtime and access them? Something like (e.g. iterating over input
fields)
for (i=0; i< 10; ++i) {
currField = <construct name of input field i here, e.g. inp0>
currField.value = ...
}
Yes. Research the [ ] notation, which enables strings to be used.

E.g. a call to a method

MyObject["MyMethodName"]();
Any answers to the above questions or further helpful information will
be greatly apprieciated.

Read this newsgroup regularly? It certainly helps me.

[Dr Clue]

Helmut Giese wrote:

Hello out there,
I am a rather experienced C programmer. However, today I got a
javascript assignment because someone left (something like: "You're a
great programmer - you'll handle this.") and I never have done any web
stuff before. Oh, and it's due within 2 weeks of course :(

Having had a first look at javascript I noted some familiarities with
C, but there also seems to be a lot of pre-defined stuff (like
'document') with certain properties / functions, which is a bit
confusing.
Brother , I feel for you. A new language can be a challenge.

Being a fellow "C++" programmer (~20 years) though,
I can tell you that while javascript is certainly not "C++"
it will work fairly nicely with your knowledge of "C/C++"
once you get the hang of it.

Since the most common context for javascript is the browser,
the line between the language , and the HTML page (think DOM)
it acts upon is fairly fuzzy, but the document object is part of
the DOM (Document Object Model).

But as I was saying , javascript and DOM are pretty well joined at
the hip.
I have listed some basic questions below and I am hoping someone will
be able to provide some links ot other information answering those.

1) What is the current version of javascript which is supported by the
current browsers (or is this a no-issue)?
This is not the way to look at javascript at all.
Each browser's instance of javascript in each version of
that broweser can and often do have differences, but the LAST and I do
mean LAST thing you want to start doing is thinking in version numbers.

Two nifty features of javascript help you avoid version numbers.

1.) You can ammend almost any javascript object , including
most of the base objects to include any methods/variables or other
objects you dream up. This can be done per instance , or per baseclass
via the "prototype" keyword, which can be used to create derrived
classes or to augment existing base classes.

2.) The second feature that helps javascript be sorta versionless
is that conditionals like if() for() etc don't mind at all if you say
if(document.thisniftyfunction) to test for a feature.

Now you can say if(!document.functionIwaslookingfor)
document.functionIwaslookingfor = simulatedfunctionality

I call this object detection and normalization (patching)

You do it by the object , not by browser or version.
2) A reference of pre-defined objects and their properties /
functions.
There are a boatload of sites out there. You could go look in the
javascript section of my site (link in sigline) and I have in
my ancient javascript section a dynamic object map (way old) , but
it's a good place to start. There is also function documentation
with examples , so you can browse a list of common functions.

3) How do you debug javascript? If you make an error, wrong HTML might
show up (this could give you a clue) but also nothing might show up at
all - what do you do then? Stare at the code?
Typically on the [tools] or other menu in the browser is "javascript
console" or something similar that will tell you the errors.

Typically I develop in Firefox as it gives better error messages
than IE. Although the IE browser is running at the same time to make
sure the code works there too. There are also javascript debuggers
that run in the browser. They are sorta neat , but I get much more use
out of the plain old javascript console

4) Libraries / collection of often used functions (handling of strings
and dates, numeric stuff, etc.)
Javascript has many classes, which you can even subclass , including

String()
Date()
Math()

5) A side note: Is it possible in javascript to create variable names
at runtime and access them? Something like (e.g. iterating over input
fields)
for (i=0; i< 10; ++i) {
currField = <construct name of input field i here, e.g. inp0>
currField.value = ...
}

Most cetainly. You can add just about as many objects methods or
variables as you like to just about any object onthefly.

Just make sure the object your adding things to exists.

OK
ExistingObject.ExistingObject.Newthing="whatever"

ERROR
ExistingObject.Newthing.Newthing="whatever"

--
--.
--=<> Dr. Clue (A.K.A. Ian A. Storms) <>=-- C++,HTML, CSS,Javascript
--=<> Internet Programming since 1994 <>=-- DHTML NSAPI TCP/IP
--=<> http://resume.drclue.net <>=-- AJAX, SOAP, XML, HTTP
--=<> http://www.drclue.net <>=-- SERVLETS,TCP/IP, SQL
--.

[Helmut Giese]

Thanks to all of you who responded. I apologize for not answering
sooner but Oct. 14th is our wedding day, so yesterday evening was not
a suitable time to sit in front of my box :)
Yes, I will certainly get one of the books you recommended - I'll go
over to Amazon right away. Also, the links you provided give me lots
of stuff to look at over the weekend, so I guess I will start making
progress.
This news group seems to be a very friendly one, rest assured that
I'll be back sooner or later - rather sooner, given the circumstances
:(
Thanks for the comforting 'welcome' you provided to a newcomer and a
nice weekend to all of you.
Best regards
Helmut Giese

[peterS.]

hi Helmut,

...
I am a rather experienced C programmer. However, today I got a
javascript assignment because someone left ... and I never have
done any web stuff before ...

if you are forced to dig yourself deeper into
the javascript core read almost everything of
Douglas Crockfords statements unto javascript
and some of the linked third party sources at:

http://www.crockford.com/javascript/

but don't miss:

http://www.crockford.com/javascript/survey.html
http://www.crockford.com/javascript/private.html
http://www.crockford.com/javascript/inheritance.html
http://www.crockford.com/javascript/remedial.html

and since you are a C programmer and therfore not
unfamiliar to Lint verify your code with JSLint:

http://www.crockford.com/jslint/index.html
bye - peterS.