JavaScript/DHTML newbie -- general questions

[sergiu]

Hi all,

I am new to Web programming, most of the time have done GUI development in C++/MFC and played a bit with Java/Swing.
I have read about DHTML and its ability to enable interactive Web applications.
Before delving into DHTML programming I would like to know what are the surprises; people in my group ask the following questions:

1. Why do we need this DHTML stuff? (after all, we already have Java)
2. Does it work across browsers?
3. Are there any development tools that support DHTML programming?
4. Can we use DHTML to develop GUI applications like we do with Java?

Thanks for your time,
Sergiu.

[tgreer]

DHTML refers to the client-side manipulation of the Web Browswer DOM (Document Object Model), which includes HTML and CSS (Cascading Style Sheets), via JavaScript scripting.

There are IDEs, such as FrontPage and Dreamweaver. As an experienced coder, you won't need them.

What DHTML does NOT do, is provide any server-side functionality. For that you should look into (in your case) JSP (Java Server Pages), or PHP.

Server-side functionality includes, primarily, interaction with a database, and robust validation, file i/o, communication with other platforms, etc.

[sergiu]

Hi tgreer,

Did some reading about the DOM and I understand that it is an API that allows the manipulation an HTML page while loaded in a browser.

But, why anybody would like to write JavaScript programs that manipulate the DOM in a browser?

My assumption is that it can be used increase application's interactivity and decrease server/network load -- is that true?

Asked about FrontPage and DreamWeaver, and I have been told that those are designer-oriented tools. What I am looking for is a DHTML-oriented tool -- something built from the ground up to support DHTML development/debugging/testing -- is there something like this?

By peeking at the DOM API I noticed that it works on the HTML element level.

By browsing these forums, as well as other sites, I saw drop-down menus, tabbed panels, and even draggable windows (at dhtmlcentral). How those are built?

Thanks,
Sergiu.

[tgreer]

No, the DOM is not an external API. It is the page, seen from the point of view of JavaScript, and not just the page, but to some extent the browser itself.

HTML (I actually use a variant called "xhtml", a stricter, XML implementation of HTML) is the core bare-bones of what you see on the page.

Colors, positions, fonts, etc. are controlled by CSS. CSS styles are applied to XHTML elements. The browser interprets all of this. JavaScript is a client-side programming language for interacting with all of the above.

JavaScript can be used to reduce server round-trips. For example, if the user is entering an order, then can enter the quantity, and JavaScript can calculate the price, without having to go back to the server.

I use DHTML on my poetry site. I send all the poems to the page, and use JavaScript to selectively toggle the visibility based upon the links the user clicks, all without a server roundtrip. Those are just the tip of the iceberg.

On the other hand, you'll need a server-side language to truly develop a web application. Content is often driven by previous events, settings, and data, all of which is best accounted for in a server-side persistent data store (a database). PHP and ASP.NET (two popular server-side languages) interact with the database, and output DHTML (XHTML, CSS, JavaScript).

[sergiu]

Please correct me:

No, the DOM is not an external API. It is the page, seen from the point of view of JavaScript, and not just the page, but to some extent the browser itself.

OK - understood.

HTML (I actually use a variant called "xhtml", a stricter, XML implementation of HTML) is the core bare-bones of what you see on the page.

OK - HTML is the page structure.

Colors, positions, fonts, etc. are controlled by CSS. CSS styles are applied to XHTML elements. The browser interprets all of this.

OK - CSS allows the separation of style from page structure.

JavaScript is a client-side programming language for interacting with all of the above.

This is interesting - please, tell me more about JavaScript. What kind of language is that? How is the development experience?

JavaScript can be used to reduce server round-trips. For example, if the user is entering an order, then can enter the quantity, and JavaScript can calculate the price, without having to go back to the server.

What if I need to load some data from the server? Is it possible to do with JavaScript?

I use DHTML on my poetry site. I send all the poems to the page, and use JavaScript to selectively toggle the visibility based upon the links the user clicks, all without a server roundtrip. Those are just the tip of the iceberg.

Yeah... But I assume your poems do not depend on some server-side process ;-)

On the other hand, you'll need a server-side language to truly develop a web application. Content is often driven by previous events, settings, and data, all of which is best accounted for in a server-side persistent data store (a database). PHP and ASP.NET (two popular server-side languages) interact with the database, and output DHTML (XHTML, CSS, JavaScript).

In other words: if someone wants to provide functionality over the Web then he must generate pages at server-side according to users' requests.

[tgreer]

JavaScript is client-side. So no, you cannot interact with files/processes on the server, via JavaScript. You need a server-side language for that. You need BOTH, server-side, and client-side, to develop robust web applications. I recommend PHP for server-side code.

What is the coding experience like? I can't really say... I've coded in so many languages, one is pretty much like the other. With two exceptions: PostScript, which is a page description language, so not relevant, and ASP.NET, which is Microsoft's Web language - I find that to be a horrible, tedious coding experience.

Think of JavaScript as adding richness to the user interface. It's also your first line of defense, for data validation. It "scripts" the UI. So, for example, imagine a user clicks a link to get more detail on a product. That detail may need to come (almost certainly) from the server, but it's JavaScript that creates the new "popup" window to display that data. In that detail page, the user may select something, which now needs to be added to a table on the parent page... only JavaScript can do that.

You may want the user to enter data in a certain format, but with JavaScript's regular expressions, you can ENFORCE that format.

There might be a preset spending limit for this user, which came from the server, and was stored in a JavaScript variable. JavaScript can keep a running total of what they've "spent" on the page, and popup a warning dialog box if they exceed this limit.

They might have several actions they can take on a certain page, but some actions are only viable when the user has entered certain information. JavaScript can enable/disable buttons and hyperlinks, and toggle the visibility of elements, in response to user actions.

[sergiu]

JavaScript is client-side. So no, you cannot interact with files/processes on the server, via JavaScript. You need a server-side language for that. You need BOTH, server-side, and client-side, to develop robust web applications. I recommend PHP for server-side code.

What about WebServices? Can a (client-side) JavaScript program interact with WebServices?

What is the coding experience like?

For example shell programming feels different than C programming. You must run the shell program in order to detect syntax errors, while in a C program syntax errors (and many other errors) can be detected using a compiler.

How is JavaScript from this aspect?