Introduction

Welcome back to Linux.Ars! We have some good stuff for you this week. Axel Liljencrantz has written a helpful introduction to the Friendly Interactive Shell (Fish), a unique and innovative command line environment with a number of useful improvements. Also included in this week's Linux.Ars is an introduction to some of the new Javascript features of Firefox 1.5, and a brief introduction to Viewglob, a shell visualization utility.

Linux.Ars is all about you, so don't be afraid to get involved! Want to do a section for a future edition? Have a suggestion for a topic that you want us to write about? I would love some feedback. We want your comments, complaints, suggestions, requests, free hardware, death threats, or disparaging remarks about my assorted deficiencies. Send me an e-mail or instant message, or post a comment in the discussion thread!

Developers Corner



New Javascript features in Firefox 1.5

Developers rejoice, Firefox 1.5 is finally here! The latest release of the Mozilla Foundation's popular web browser includes numerous features that empower developers and improve the versatility of the platform. Support for SVG, the canvas tag, and the Javscript 1.6 standard make this release a cause of developer celebration.

Firefox 1.5 provides support for the latest enhancements to the Javascript language. E4X adds native XML support to Javascript and provides a complete object-oriented interface to XML content. With E4X, developers can manipulate XML content with unprecedented ease. XML tags can be assigned directly to a Javascript variable:

> var xmlcontent = <foo><baz>bar</baz></foo>;

And the tag contents can be extracted with a simple, object oriented syntax:

> xmlcontent.foo.baz bar

E4X also provides support for tag interpolation. Developers can use braces to include values in constructed XML content:

> var xmlcontent = <foo><baz>{3 + 3}</baz></foo>;

With E4X, developers can iterate over tags based on simple queries, similar to the XPath syntax. In E4X, the .. operator is equivelent to the XPath // operator. To iterate over every B tag nested inside of the A tag, you can use the following syntax:

for each (var i in A..B) { // ... }

You can further limit the loop and iterate over only the B tags that include a C tag that contains specific text:

for each (var i in A..B.(C == "value")) { // ... }

Let's look at a more elaborate example. Remember the monkey XML file from the last edition of Linux.Ars? Let's revisit that example now with E4X:

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Web Development Test Page</title> <script type="application/x-javascript; e4x=1"> function main() { // create a variable and describe the XML content var animals = <spaceapes> <monkey name="Gordo"> <date>12/13/58</date> <species>Squirrel</species> </monkey> <monkey name="Able"> <date>5/28/59</date> <species>Rhesus</species> </monkey> <monkey name="Baker"> <date>5/28/59</date> <species>Squirrel</species> </monkey> <monkey name="Sam"> <date>12/04/59</date> <species>Rhesus</species> </monkey> </spaceapes> // create a variable to store the HTML content that will be added to the page // note that we use the the + operator to concatenate a sequence of tags // also note the use of the length() method, and { } for interpolation var monkey_content = <h1>Monkey Data</h1> + <p><b>Number of Monkeys:</b><i>{(animals..monkey).length()}</i></p> + <h2>Monkey List</h2> // create a new variable in which to construct our HTML monkey list var monkey_list = <ul></ul> // iterate over each monkey in the XML document for each (var monkey in animals..monkey) { // append a list item with monkey details to our monkey_list variable monkey_list.innerHTML += <li><b>Name:</b><i>{monkey.@name}</i></li> } // append our new monkey list to the monkey_content variable monkey_content += monkey_list + <h2>Rhesus Monkeys</h2> // iterate over each Rhesus monkey in the XML document for each (var monkey in animals..monkey.(species=="Rhesus")) { // append the monkey name to the monkey_content variable monkey_content += <p><b>Name:</b>{monkey.@name}</p> } // append the value of the monkey_content variable to the inside of a div tag document.getElementById("monkeys").innerHTML += monkey_content } </script> </head> <body onload="main()"> <div id="monkeys" /> </body> </html>

Javascript 1.6 also adds support for new Array methods that facilitate functional sequence manipulation. With the map and filter methods, developers can now use anonymous functions to manipulate arrays without resorting to for loops. The following example will produce a new array that contains each value of the initial array multiplied by two:

> [1, 2, 3, 4, 5].map(function (x) { return x * 2 }) [2, 4, 6, 8, 10]

The filter method will pass each value of the array to the provided function, and return a new array that only includes the values that cause the function to return true :

> [1, 2, 3, 4, 5].filter(function (x) { return x > 3 }) [4, 5]

It is also possible to provide existing functions to the map and filter methods:

function isGreaterThanThree(x) { return x > 3 } [1,2,3,4,5].filter(isGreaterThanThree)

You can learn more about new Javascript features at the Mozilla Developer Site.

Download the PDF

(This feature for Premier subscribers only.)