JavaScript « Web Development « Java Articles

When learning a new programming language, one of the first things you should do is create commonly used "plug-and-play" routines. If you're new to JavaScript, you might want to consider starting with a half-dozen or so simple routines that you think might be helpful. Even if you don't end up using them, you'll learn a lot about JavaScript in the process.

JavaScript currently supports the following eleven statements. Note that some of these -- such as comment, var, and new -- aren't bona fide statements, but they are often treated as such. They are included in this discussion for the sake of completeness.

With JavaScript, this control becomes even more useful. Although the browser cannot re-render a page that has already been brought up, you can send the other frames off to display new URLs or information. You can also access resources such as input fields and other form elements in the other frames. With this you can set events to change information in the other frames easily. We will quickly go over the Netscape FRAME system so that I know that we're on the same track. If you're going to use JavaScript, this new document system will come in very handy.

BE: A lot of our content people are getting into JavaScript and Frames -- you can see their work at http://proto.netscape.com. I have many customers internal to our product development organization, including new server projects, the LiveWire team, and client folks who are helping to make Navigator more scriptable in future releases.

Debugging a JavaScript program entails using problem-solving techniques that would impress Sherlock Holmes. Effective debugging of JavaScript requires some experience writing programs for it. After a while, you become familiar with the error messages JavaScript displays and learn ways to solve the errors. Of course, you may not have the time to devote yourself to learning all the intricacies of JavaScript. This column is your quick-reference guide to understanding how to effectively debug JavaScript programs, even without a debugging utility.

Google Engineering Manager Bruce Johnson explains the steps involved in writing an Ajax application using your favorite Java IDE and Google Web Toollkit, in this talk with LinuxWorld Editor Don Marti.

(Note: As with most modern programming languages, JavaScript supports array variables in addition to the basic scalar variables used to hold the above data types. We'll concentrate on single-value variables for this column and devote a separate column to arrays.)

Rather, it's the inside that's different, in ways the casual observer cannot see. One of the major improvements in Netscape 3.0 is JavaScript, the built-in scripting language that provides for interactive and intelligent control over the HTML content of a page. JavaScript is more mature and refined this time around, with many of its "version 1.0" bugs squashed. What's more, JavaScript supports a number of enhancements, including new object constructors, in-place image replacement, and direct communication between it and Java applets and plugins. Though JavaScript is far from being complete, it has taken another step in becoming a world-class user scripting language.

While the idea behind JavaScript is a noble one, as a Little Engine it's already showing signs of running out of steam. At least temporarily. JavaScript is an integral part of Netscape's much-heralded troika of enabling technologies -- the other two are Java and plugins -- so it's unlikely that JavaScript will derail any time soon. As Netscape is a company often with an extra ace or two up its sleeve, there's no telling what grand future plans they have for JavaScript.

Debugging JavaScript programs Everyone makes mistakes writing JavaScript programs. Errors don't know experts from novices, so the next time you get an error message while trying to play a JavaScript program you've written, don't feel bad. JavaScript provides error messages as a means to help you spot mistakes. This column describes the errors you are likely to get when writing a JavaScript program and what to do about them. Gordon Mccomb, July 1996

This explanation may sound complex, but as you will soon see, an expression is really nothing more than a simple formula for addition. This column addresses the use of expressions in JavaScript, both for defining the content of variables, as well as for creating more elaborate schemes using other JavaScript constructs. Used in this way, expressions provide a way for your scripts to think on their own (although they may seem to act on their own more than you'd like them to!).

Our latest sample recipe from JavaScript & DHTML Cookbook comes from Chapter 5 on "Browser Feature Detection." Learn how to detect object property and method support, thereby ensuring complete support for modern scriptable features. And check back here next week for a sample recipe on importing browser- or operating system-specific style sheets.

Sites Beautiful Code Databases Digital Media Emerging Telephony Inside Aperture Inside Lightroom Inside Port 25 InsideRIA.com LinuxDevCenter.com MacDevCenter.com ONJava.com ONLamp.com Apache BSD MySQL PHP Python Perl.com Ruby SysAdmin What Is? WindowsDevCenter.com XML.com WebServices.XML.com

Sites Beautiful Code Databases Digital Media Emerging Telephony Inside Aperture Inside Lightroom Inside Port 25 InsideRIA.com LinuxDevCenter.com MacDevCenter.com ONJava.com ONLamp.com Apache BSD MySQL PHP Python Perl.com Ruby SysAdmin What Is? WindowsDevCenter.com XML.com WebServices.XML.com

Editor's note: Short and sweet: that's what our latest sample recipe from JavaScript & DHTML Cookbook is: a quick and simple solution to importing browser- or operating system-specific style sheets. This week's excerpt is from Chapter 11 on "Managing Style Sheets." And next week's recipe will also come from the same chapter--check back here then to learn how to read effective style sheet property values.

Sites Beautiful Code Databases Digital Media Emerging Telephony Inside Aperture Inside Lightroom Inside Port 25 InsideRIA.com LinuxDevCenter.com MacDevCenter.com ONJava.com ONLamp.com Apache BSD MySQL PHP Python Perl.com Ruby SysAdmin What Is? WindowsDevCenter.com XML.com WebServices.XML.com

Editor's note: This sample recipe is the first of six we've excerpted from JavaScript & DHTML Cookbook. We'll be running one per week over consecutive weeks so check back to this space often for recipes that cover arrays and objects; browser feature detection; style-sheet management; and HTML elements positioning. Today's recipe is from Chapter 8 on "Dynamic Forms."

Editor's note: In this sixth and final sample recipe excerpted from JavaScript & DHTML Cookbook, Danny Goodman shows you how to determine the location of a nonpositioned element. And if you've enjoyed sampling the recipes presented thus far, we'll have another tempting morsel for you to sink your teeth into. Danny has written a bonus recipe you won't find in the book. Check back here in two weeks to try it out.

Imagine the advantages of being able to dynamically access a database from client-side JavaScript. You could dynamically query a database from JavaScript for client-side field validation, or dynamically populate a drop-down select list, to name just a few possibilities. In fact, you can do this, with the help of an applet-servlet pair (assuming you can constrain your users to compatible browsers, i.e., IE and Netscape.) This article describes the applet-servlet pair architecture and offers several sample applications.

Before diving into the object-oriented features of JavaScript, let's first take a look at some of the basics. This chapter walks you through:

TYING JAVASCRIPT OBJECTS TO HTML CONTROLS Now that we know how to define our own JavaScript objects and how JavaScript creates objects for HTML elements, the question is, how do we tie the HTML-derived objects to our custom-made JavaScript objects? The answer is, event handlers. Almost all HTML controls have the ability to receive events from the Web browser and call a JavaScript function in response. All we need to do is plug our objects into the appropriate event handler and the rest will happen automatically. For example, let's take the simple object we created in our last installment ("anObject") and tie it to an HTML button. The code to do this is shown in Listing 2. The part we are interested in here is the "" tag. Notice the "onClick" handler? It's telling the browser that, when the user clicks on this button, it should call the "sayHello" method of the object named "myObj." That's all there is to it! A JAVASCRIPT check box OBJECT Now that we can link JavaScript objects to HTML controls, let's look at a more complex task: using JavaScript to make HTML controls easier to use. For this, let us consider the lowly check box. HTML check boxes are rather simple things, but it can still be a pain to manage a large number of them. By creating a JavaScript check box object, we can use the same code to manage any number of HTML check boxes. The JavaScript code for a check box object is rather simple. The constructor is shown in Listing 3. As expected, this isn't an overly complicated object. It has two instance variables and three methods. THE "form" AND "name" VARIABLES To truly "link" a JavaScript object to an HTML control, you must be able to access that control from your JavaScript code. To do that, you have to know two things about the control: the name of the HTML form it is in and the name of the HTML control itself. The "form" and "name" instance variables allow us to keep track of this information for each control. (We've looked at this concept before.2) Once we have this information, we use it to access our control by using JavaScript's "eval" method. The eval method takes a string representing a valid JavaScript statement and executes it as if it had been hard-coded in your HTML file. So, for example, the statement: eval( "alert( 'Hello World!')"); will display an alert window with the string "Hello World!" in it, just as if you had coded: alert( 'Hello World!') By keeping the name of our form and the name of our control inside our object, we can create statements that, when passed to the eval method, let us access our HTML control. For example, in the code we will look at in a moment, our form is named "oCheckBoxExample," and our first check box control is named "testBox1." Inside the "oCheckBoxIsChecked" method, you will see the line of code:

Both products allow developers to use their existing expertise in Java (GWT) or in .NET-supported languages (Volta) to write applications that will run on any device supporting JavaScript.

We examined a JavaScript object for enhancing HTML check boxes in the April 1999 column. 1 This time, we're going to use these concepts along with some new JavaScript objects to enhance three HTML controls: radio buttons, select lists, and text boxes. THE oRadio OBJECT HTML radio buttons are like check boxes that are kept in herds. Radio buttons are organized into "families," and only one radio button in each family can be on at any given time. The main reason to use a JavaScript object with a radio button family is to simplify the management of multiple radio buttons and/or families. In fact, a single JavaScript radio button object is all you need to manage an entire family of radio buttons no matter how many buttons are in the family. For example, if you have 100 radio buttons organized into two families of 50 buttons each, you would only need two JavaScript objects to manage all 100 buttons!

The new version of NetBeans features a number of improvements, such as the addition of JavaScript technology features to support AJAX-based Web applications, plus tighter MySQL database integration, the company said. JavaScript improvements include code completion, semantic highlighting and type analysis, among others.

One such tool is a simple JavaScript object browser. The basis of this tool is the JavaScript for/in statement. This statement allows you to execute a set of statements for each and every property of an object. For example, consider the code shown in Listing 1. This simple program will loop through the properties of the built-in navigator object and write the name of each property to the browser window. (If this doesn't seem like a useful thing to do, try loading this page into various Web browsers. You might be very surprised by what you see!)

Dojo is a set of client-side JavaScript tools that help you build better web applications. Dojo blurs the line between local, native applications and browser-based applications; the browser becomes the user interface platform.

In the past two years, NetBeans has become a multi-lingual IDE, supporting not only Java, C, and C++, but also Ruby and, with the recent release of NetBeans 6.1, PHP and JavaScript as well. Support for working with those languages in the IDE goes far beyond syntax highlighting. The IDE tries to understand as much about the code's structure as it can, and provides intelligent refactorings, code completion, and the ability to work with multiple languages within one source file.

Dive into Prototype, the library that makes JavaScript so much more powerful, and it looks a lot like Ruby code. Exploring the DOM, handling events, taming AJAX, and radically simplifying most of your scripting code: it all becomes easy and very portable with Prototype.

Have an opinion about the Google Web Toolkit or about Java-to-JavaScript compilation? Discuss this article in the Articles Forum topic, Compiling Java to JavaScript.

This article explains why JavaScript is perfectly suited as a core, foundation language for your web applications. It introduces the lesser known and yet most powerful JavaScript features, and demonstrates how to leverage them to increase your productivity.

The Google Web Tookit (GWT) has become a very popular way to develop Ajax applications. It allows Java developers to rapidly create Ajax applications by leveraging their knowledge of Java? technology without requiring any knowledge of JavaScript. XForms represents an evolution in the HTML standard, and allows for simple constructs to create complex, dynamic behavior. Both GWT and XForms are powerful enough to provide complete solutions to many problems. So what about using them together? That's exactly what this series is going to show.

In summary, JavaScript should always be optional for users. Dependency on it cannot improve a page; it can only cripple it. In particular, be wary of the possibility that your tools will be creating a dependency when you're just looking for an enhancement. Enhancement is harmless and will not generally offend people. Don't tell people they have to use JavaScript to view your page; it's rude, and it won't win you any customers.

Part 1 asserted that JavaScript is well-suited as an execution environment for finite state machines, and mentioned some of its capabilities that were relevant to the design phase. In this article, you will work through the details of translating your design into JavaScript, taking advantage of some elegant language features, and accommodating some inelegant details that make the implementation tricky.

To make all this flash and wonder actually happen, you need to become intimately familiar with a JavaScript object called XMLHttpRequest. This little object -- which has actually been around in several browsers for quite a while -- is the key to Web 2.0, Ajax, and pretty much everything else you learn about in this column for the next several months. To give you a really quick overview, these are just a few of the methods and properties you'll use on this object:

Functional programming languages have been in academia for quite some time, but historically they do not have extensive tools and libraries available. With the advent of Haskell in the .NET platform, functional programming is becoming more popular. Some traditional programming languages, such as C++ and JavaScript, import constructs and features from functional programming. In many cases, repetitive code in JavaScript leads to clumsy coding. You can avoid all that if you use functional programming. Also, you can write more elegantl callbacks with a functional programming style.

This first article in the four-part series presents a JSP-based technique for generating JavaScript code, significantly reducing the amount of code you have to write manually. The sample application shows how to generate JavaScript functions for sending Ajax requests and processing Ajax responses. You can use the simple techniques discussed here in a real application if you want to be able to change the Ajax code easily. The broader goal of this article is to demonstrate how to use JSP tag files to produce JavaScript code for any purpose, not just Ajax routines.

Note:This article uses a DOM-compatible browser such as Netscape 6.x, Internet Explorer 6, or Mozilla 1.0. Familiarity with the Document Object Model in Java technology or other languages, is helpful, but not required. You should, however, be familiar with JavaScript in general.

In this first article of the series, you will use a simple script runner that lets you execute JavaScript files within a Java EE application. Scripts will have access to the so-called "implicit objects" that are used in JSP pages, such as application, session, request, and response. Most of the samples consist of reusable code so that you can easily start using JavaScript on the server in your own applications.

In this final article you'll test the implementation in some popular browsers. You need to construct a simple test page that creates some FadingTooltip widgets and binds them to HTML elements. For comparison, your test page will also illustrate some built-in tooltips. Immediately you will encounter some should-not-occur conditions, and so will have the opportunity to see how gracefully the design adapts. This article concludes with some observations about performance, and ideas for further development of finite state machines for browser-based applications.

Finite state machines have long been used as an organizing principle for designing and implementing complex behavior in event-driven programs, such as network adapters and compilers. Now, programmable Web browsers have opened a new event-driven environment to a new generation of applications. Browser-based applications, popularized by Ajax, are becoming more complex. Designers and implementers can benefit from the discipline and structure that finite state machines offer. In this article, you, learn how to use a finite state machine to design complex behavior for a simple Web widget -- an animated tooltip that fades into and out of view.

If a Web page has unique styles, you can define style rules within the