TweetFollow Us on Twitter

Javascript Intro
Volume Number:12
Issue Number:7
Column Tag:Javatech™

Getting the Jump on JavaScript

Start learning to add life to your Web pages

By Kevin M. Savetz

Note: Source code files accompanying article are located on MacTech CD-ROM or source code disks.

Static Web pages are a dying breed. Although not obsolete yet, it may be one day soon that a Web page that doesn’t do anything just won’t get a second glance. Once upon a time, all Web pages were static. CGI programs started to change that by allowing powerful searches of Web pages, sites that modified themselves based on the time of day or the phase of the moon, and even interactive games. Java, a powerful programming language, is bringing a whole new level of interactivity to the Web. Somewhere in the middle is JavaScript, a new language that’s simple enough for beginning programmers to learn, but powerful enough to interact with Web pages and Java applets in ways previously not possible with any language.

JavaScript is a fledgling language. As I write this, JavaScript isn’t even complete. The technical specifications of the language have been agreed upon, but no Web browsers completely support JavaScript. (JavaScript 3.0, which should incorporate the functions that are currently lacking, is due out in June, give or take a month; no firm date had been set at press time.) But that doesn’t mean that no one is using it; bleeding-edge Web hackers have been experimenting with the crippled JavaScript for months, and many are impressed with what they see.

What is JavaScript?

Java and JavaScript are distinct languages, with different purposes and features. JavaScript was designed to provide an easy way for Web authors to create interactive Web pages. Java is a programming language which is used to create stand-alone applications, called applets. Unlike Java, which is meant for experienced programmers with an understanding of C++, JavaScript is a simpler “scripting” language (like dBASE and AppleScript) aimed at those with less programming experience.

Both are powerful languages, but they each offer distinct functionalities. According to Andy Augustine, vice president of technology for Frequency Graphics, a Web development and hosting service provider, “JavaScript is aimed at the people who don’t have C++ experience, people who don’t have much experience with CGI, but want to create some sort of interactive Web page.”

“Contrary to popular misconceptions, JavaScript was not meant to be a scaled-down version of Java, nor was it intended to be a replacement for CGI (server-side) scripts. Instead, JavaScript functions as an outstanding way to enhance both,” he said.

JavaScript can be used to manage user input as well as to show text, play sounds, display images, or communicate with a plug-in in response to “events” such as a mouse-click or exiting or entering a Web page.

JavaScript’s syntax is loosely based on the Java language, but those who have used both languages say the similarity is very loose indeed. In fact, the closest resemblance the two languages have is their names. JavaScript was originally called Mocha while being developed at Netscape. It was later dubbed LiveScript, and when Netscape Communications partnered with Sun to develop Java, LiveScript was renamed JavaScript.

Java vs. JavaScript

JavaScript programs are interpreted and run entirely on the client side. This means fewer hits and less processing time on the server than with Java (where applets are compiled on the server before being executed on the client) or CGI (which requires the server to do the work and rack up hits).

There are other differences between the two languages. In Java, applets are files distinct from HTML pages; with JavaScript, the code is integrated into the HTML using special tags. (This can cause problems with some Web browsers that do not properly handle JavaScript code.) Like Java, JavaScript is a cross-platform language that can work with any compatible browser.

Here’s an example HTML file with an embedded JavaScript. Between the <BODY> tags, the Web browser displays a form with a space to enter a number. When the user enters a number in the field, the browser starts the script, located between the <SCRIPT> tags. The script itself makes sure the user really entered a number, and displays a dialog box if the user didn’t keep the number within pre-defined limits.

<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--- these comments should hide the script from old browsers
function checkNum(str, min, max) {
 if (str == "") {
 alert("Enter a number in the field, please.")
 return false
 }
 for (var i = 0; i < str.length; i++) {
 var ch = str.substring(i, i + 1)
 if (ch < "0" || ch > "9") {
 alert("Enter a number, please.")
 return false
 }
 }

 var val = parseInt(str, 10)
 if ((val < min) || (val > max)) {
 alert("Try a number from 1 to 10.")
 return false
 }
 return true
}

function thanks() {
 alert("Thank you.")
}
// end hiding from old browsers -->
</SCRIPT>
</HEAD>

<BODY>
<FORM NAME="ex5">
Please enter a number from 1 to 10:
<INPUT NAME="num"
 onChange="if (!checkNum(this.value, 1, 10))
 {this.focus();this.select();} else {thanks()}">
</FORM>
</BODY>

All this only takes one hit on the server - to download the HTML code and the embedded script. Doing this with a CGI script would require multiple hits on the server, once for the HTML file, and again to verify the input every time the user types into the form. JavaScript allows the client to perform more significant calculations without weighing down the server.

Other differences are more technical. JavaScript is object-based: its code uses built-in, extensible objects, but unlike Java, there are no classes or object inheritance. In JavaScript, object references are checked at run-time; in Java, object references must exist upon compilation. In JavaScript, variable data types are not declared, unlike in Java, where they must be declared before use.

Which language is better? Until a JavaScript interpreter is complete, there is no fair comparison. Although it was originally intended as a tool for fledgling programmers, even experienced programmers who know Java will find JavaScript useful. The languages can work together to complement each other.

Currently, the only Web browser with any support for JavaScript is Netscape 2.0, and it lacks much of the functionality promised for the final release. More than 30 other companies, including Microsoft, have agreed to include support for JavaScript in their Web browsers. With the current version of JavaScript, you can send information to the browser (such as a dialog box) and get the status of objects (such as mouse movements), but some of the most exciting functions, such as the abilities to read input streams from documents and to interact with Java applets, are still unimplemented.

When JavaScript includes all of the tools the specs say will be included, including something called the “applet object” (which will allow scripts to interact with Java applets), the two languages will be a mighty team. “As soon as the applet object is released, you will be able to control Java applets with JavaScript, and that will make them work perfectly together,” Augustine says. This means that you will be able to control a Java applet using a Web-based form, with a JavaScript doing the behind-the-scenes translation between the Web page and the applet. The user will be able to use a radio button to select how a Java applet will run - for instance, changing the color and speed of a rotating logo. JavaScript will pass information from the form to the Java applet. JavaScript’s applet object will also allow scripts to send information to and get information from other scripts and CGI programs.

Another tool that will be available in the final release of JavaScript is the “history object”, which will allow the script to see what Web pages the user has recently visited (although to protect the user’s privacy, the script will not be able to share that information with the server). This would allow a page to offer an intelligent “back” button, letting the user move quickly back to any previously visited Web page.

As with Java, security in JavaScript is likely to be an ongoing battle. Several security problems were quickly discovered in JavaScript 2, including a bug that let JavaScript send a blank electronic mail message to someone without the sender’s knowledge. Another bug allowed JavaScript to get a listing of files on the user’s hard drive (although the script could not read the contents of any files).

Now or Later?

Should you bother learning JavaScript now, or is it currently just a toy for experimenters? Should you wait until the final version of the JavaScript interpreter ships before trying to learn the ins and outs of the language? Augustine thinks that now is the time to get a jump start on JavaScripting. “Learn JavaScript right now if you want to capture the market while it is viable; you’ll be ahead of the field. If you wait until it is fully functional before you learn it, I think you’ll be behind the game,” he says. Online tutorials can get you started with the basics of the language, and Internet mailing lists and newsgroups devoted to the topic are already home to thriving communities of developers and experimenters.

Will the serious Web page developer need to understand both Java and JavaScript? Because JavaScript can interact directly with the user anywhere on a Web page (rather than being limited to a single window, as with Java), most Java developers will probably want to learn both. But JavaScript should also be viable as a stand-alone tool for less experienced programmers who want to add interactivity to their Web pages.

Example Scripts

There are already dozens of example JavaScripts on the Web. Many, such as the 1040EZ tax form and body mass calculator, simply compute values input from an HTML form. Others are more inspired, such as the currency exchange calculator, which lets you select two countries from a list and then computes the


exchange rate. I am particularly fond of the Zen koan generator, even though it occasionally causes Netscape 2.0 to crash.

http://www.homepages.com/fun/1040EZ.html

http://www.iohk.com/UserPages/acheng/javascript.html

http://www.superprism.net/doc/EXPRESS/util/currency.html

http://www.wrldpwr.com/javascriptzen.html

The color picker shows how JavaScript can work with frames and color: pass the mouse over the name of a color in one frame and the background of another frame will become that color. Other examples are downright inspirational, such as the JavaScript VRML clock, which uses JavaScript to display a three-dimensional clock if you have a VRML browser.

http://www.lsi.usp.br/doc/color/picker.html

http://www.phoenix.net/~jalonso/applets/vrml

Many more example applications are available at http://www.gamelan.com/.

Remember how interesting (and sometimes annoyingly funky) Web pages became when authors started using and abusing sundry new tools like backgrounds and frames? Expect to see another round of enlightening and obscure Web sites as developers and hackers begin to understand and use JavaScript.

For More Information

A growing number of information sources about JavaScript are online. Andy Augustine’s JavaScript FAQ is at:

http://www.freqgrafx.com/411/jsfaq.html

There is also a JavaScript mailing list, a high-volume, sometimes technical list for discussion about using the language. To subscribe, send a message to majordomo@obscure.org with a message body of “subscribe javascript”. A digest version of the list is also available. To subscribe, use a message body of “subscribe javascript-digest”. Further discussion takes place on the newsgroup comp.lang.javascript.

Netscape’s official JavaScript documentation is required reading if you plan to learn your way around JavaScript. The files are also downloadable for reading offline.

http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/index.html

http://home.netscape.com/eng/mozilla/2.0/handbook/javascript/jsdoc.zip

Augustine maintains a list of online tutorials, example applications and other information at JavaScript 411. Finally, the ubiquitous Yahoo naturally has an index of JavaScript-related goodies.

http://www.freqgrafx.com/411/

http://www.yahoo.com/Computers_and_Internet/Languages/JavaScript/

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

Opera 79.0.4143.50 - High-performance We...
Opera is a fast and secure browser trusted by millions of users. With the intuitive interface, Speed Dial and visual bookmarks for organizing favorite sites, news feature with fresh, relevant content... Read more
Day One 6.9.2 - Maintain a daily journal...
Day One is an easy, great-looking way to use a journal / diary / text-logging application. Day One is well designed and extremely focused to encourage you to write more through quick Menu Bar entry,... Read more
Arq 7.8 - Online backup to Google Drive,...
Arq is super-easy online backup for Mac and Windows computers. Back up to your own cloud account (Amazon Cloud Drive, Google Drive, Dropbox, OneDrive, Google Cloud Storage, any S3-compatible server... Read more
iMazing 2.14.3 - Complete iOS device man...
iMazing is the world’s favourite iOS device manager for Mac and PC. Millions of users every year leverage its powerful capabilities to make the most of their personal or business iPhone and iPad.... Read more
Toast Titanium 20.0 - The ultimate media...
Roxio Toast Titanium, the leading DVD burner for Mac, makes burning even better, adding Roxio Secure Burn to protect your files on disc and USB in Mac- or Windows-compatible formats. Get more style... Read more
Apple Safari 15.0 - Apple's Web bro...
Apple Safari is Apple's web browser that comes bundled with the most recent macOS. Safari is faster and more energy efficient than other browsers, so sites are more responsive and your notebook... Read more
Slack 4.20.0 - Collaborative communicati...
Slack brings team communication and collaboration into one place so you can get more work done, whether you belong to a large enterprise or a small business. Check off your to-do list and move your... Read more
GraphicConverter 11.5.2 - $39.95
GraphicConverter is an all-purpose image-editing program that can import 200 different graphic-based formats, edit the image, and export it to any of 80 available file formats. The high-end editing... Read more
Posterino 3.10.9 - Create posters, colla...
Posterino offers enhanced customization and flexibility including a variety of new, stylish templates featuring grids of identical or odd-sized image boxes. You can customize the size and shape of... Read more
ForkLift 3.5.4 - Powerful file manager:...
ForkLift is a powerful file manager and ferociously fast FTP client clothed in a clean and versatile UI that offers the combination of absolute simplicity and raw power expected from a well-executed... Read more

Latest Forum Discussions

See All

Alchemy Stars’ latest limited-time event...
Attention, all Navigators! Tencent and Tourdog Studio is inviting everyone to an exciting beach blowout with Alchemy Stars’ Ocean Sovereign event. The limited-time celebrations will add new characters, sizzling skins, and an intriguing new story,... | Read more »
An Interview with Holger Miller, Game Di...
What was the biggest challenge you faced when developing Arkeim – Realms at War? | Read more »
‘Alchemy Stars’ Adds New Characters and...
Tencent and Tourdog Studio’s Alchemy Stars is running an exciting limited-time Ocean Sovereign event, inviting players to splash into a summer celebration of all things sun, sand, and sea this season. As “A Summer to Remember with Light and Darkness... | Read more »
Open World RPG ‘Botworld Adventure’ from...
Back in July, Featherweight Games soft launched the company’s upcoming open world RPG adventure Botworld Adventure . Botworld Adventure has been in the works for a while now and it aims to bring its own charm to the open world RPG adventure genre... | Read more »
Out Now: ‘Collection of SaGa: Final Fant...
Each and every day new mobile games are hitting the App Store, and so each week we put together a big old list of all the best new releases of the past seven days. Back in the day the App Store would showcase the same games for a week, and then... | Read more »
‘The Lord of the Rings: Rise to War’ Lan...
Gear up and march to Dol Guldur with The Lord of the Rings: Rise to War. NetEase’s highly anticipated geo-strategic war game is finally out on both iOS and Android devices, letting players command their armies, build their settlements, and fight for... | Read more »
The Lord of the Rings: Rise to War lets...
The Lord of the Rings: Rise to War, NetEase’s officially licensed geo-strategic war game, has finally been released today on iOS and Android devices. Players from all over the world can now experience Middle-earth once again in stunning accuracy as... | Read more »
SwitchArcade Round-Up: ‘Grisaia Phantom...
Hello gentle readers, and welcome to the SwitchArcade Round-Up for September 22nd, 2021. Not too much going on today, but I suppose that’s alright. We’ve got the usual Super Smash Bros. Ultimate event news, plus summaries of the handful of new games... | Read more »
Pokemon Unite has rolled out on Android...
After much waiting and excitement, the Pokemon Company and TiMi Studios have finally launched Pokemon Unite on Android and iOS. The game’s 5v5 MOBA (Multiplayer Online Battle-Arena) format mixed with the world undoubtedly grabbed a lot of... | Read more »
‘Crash Bandicoot: On the Run’ Halloween...
Following the 25th anniversary celebration season, Crash Bandicoot: On the Run (Free) is getting into the Halloween mode beginning tomorrow. Today, Crash Bandicoot: On the Run has been updated with support for Mr Crumb’s Dimension of Screams. The... | Read more »

Price Scanner via MacPrices.net

Amazon is offering a $150 discount on every A...
Amazon has Apple’s entire M1 MacBook lineup on sale today for $150 off MSRP, with models available starting at only $849. Shipping is free. These are the same MacBook Pros sold by Apple in their... Read more
Sams Club to offer $30-$40 discounts on Apple...
Sams Club will be offering a $30 discount on the new 9th-generation 64GB WiFi iPad and 8.3-inch 64GB WiFi 8.3″ iPad mini starting on September 24th. Sale price for online orders only, in-store prices... Read more
Apple restocks 24-inch M1 iMacs starting at o...
Apple has restocked several configurations of 24-inch M1 iMacs in their Certified Refurbished store. Models are available starting at only $1099 and range up to $260 off original MSRP. Each iMac is... Read more
Retro Reading: 15 Years Later, Apple Is Still...
FEATURE: 09.22.21: – When it comes to tech companies and innovation, it’s a “dog eat dog” world out there, generally speaking. Last week — in a commentary about Apple iterating vs. innovating — I... Read more
Red Pocket Mobile discounts iPhone 12 models,...
Red Pocket Mobile has dropped prices on Apple iPhone 12 models, in some cases by $100 more than other carriers, and is now offering the iPhone 12 starting at only $529. Switch and get free 3 months... Read more
Amazon continues to offer M1 Mac minis for $1...
Amazon has Apple M1 Mac minis in stock today and on sale for $100 off Apple’s MSRP, only $599. Price after $40 discount plus $59.01 instant coupon clipped in your shopping cart. Their price is the... Read more
Switch to Red Pocket Mobile and get an Apple...
Switch to Red Pocket Mobile and get an Apple iPhone 13 Pro for $50 off MSRP, plus get free 6 months of Unlimited nationwide service with the purchase of any iPhone 13. Red Pocket Mobile is a... Read more
At up to $230 off MSRP, these are the best de...
Realize significant savings on an Apple MacBook powered by an M1 processor with these Certified Refurbished models available today at Apple. Models are available starting at only $849 and range up to... Read more
Staples offering discounts on Apple HomePod m...
Staples is discounting Apple HomePod minis and AirPods this week. Take $10 off HomePod minis and up to $50 off AirPods. Sale prices for online orders only, in-store prices may vary. Order online and... Read more
This is the final week for Apple’s 2021 Back...
Apple’s Back to School promotion for 2021 continues through September 27, 2021, making this the final full week to take advantage of these offers. As part of this promotion, Apple will include one... Read more

Jobs Board

Product Development Engineering Lead - *Appl...
…will be doing We are seeking an ambitious, data-driven thinker to shape the Apple Product Development team as our new Retail Wireless division continues to grow and Read more
Product Specialist - *Apple* - DISH (United...
…We are seeking a results-oriented, analytical thinker to curate and manage the Apple device portfolio for our new retail wireless division at DISH. The successful Read more
Geek Squad *Apple* Consultation Professiona...
**831923BR** **Job Title:** Geek Squad Apple Consultation Professional **Job Category:** Store Associates **Store Number or Department:** 000133-Arden Fair-Store Read more
Product Specialist - *Apple* - DISH (United...
…We are seeking a results-oriented, analytical thinker to curate and manage the Apple device portfolio for our new retail wireless division at DISH. The successful Read more
Geek Squad Advanced Repair *Apple* Professi...
**825843BR** **Job Title:** Geek Squad Advanced Repair Apple Professional **Job Category:** Store Associates **Store Number or Department:** 000319-Harlem & Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.