Video-Based Tutorial: Page (1) of 1 - 05/26/10 Email this story to a friend. email article Print this page (Article printing at page facebook

Real-World XML: Part 12 of 12

Understanding the ECMAScript standard (E4X) By Joe Marini

XML technologies offer web developers and designers more flexibility than ever before. In Real-World XML, industry expert Joe Marini covers the best programming practices with XML, including the tools needed to build effective XML structures. He demonstrates the implementation of XML formats, how these formats work in real-world situations, and how they can facilitate project planning and development.

XML Essential Training is a prerequisite for getting the most out of this course.

Topics include:

  • Understanding the Sitemap index format
  • Integrating XML and design
  • Using XML effectively in Firefox and Internet Explorer
  • Avoiding common design mistakes
  • Understanding and implementing DOM algorithms
  • Building an XML tag set
  • Using XML with RSS and Atom
  • Processing XML data with XSLT


Understanding the ECMAScript standard (E4X)

Okay, so the last technology I'm going to cover in this section is called ECMAScript for XML. It's typically known by its abbreviated name E4X. ECMAScript for XML or E4X is an international standard. It's defined by the ECMA-357 specification that was adopted back in December 2005.

The whole purpose behind ECMAScript for XML is to add support for XML as a first class datatype in ECMAScript, which forms the basis for languages like JavaScript and ActionScript, if you've ever used Flash or Flex.

The real power of ECMAScript is that it lets me treat XML as a built-in datatype. So you see the example I've got here where I've got a line of code declaring a variable named j and setting it to the numerical value 3 or a variable like myStr and setting it to a string variable.


Using E4X, I can do something like this. I can declare a variable named myXML and just send it to XML code right in the script without having to do any DOM manipulation or any other kind of fancy tricks. This is a very powerful feature. It's one of the great things about ECMAScript as a scripting language is that it provides this kind of support for working with XML.

Its whole purpose, as I said, is to allow you to work with XML as a native datatype. So where can you find an implementation of E4X? Well, the known implementations as of this recording, Firefox 1.5 and later has native support built in for E4X. IE does not support this technology yet.

Adobe ActionScript version 3.0 and later, which is present in Flash Creative Suite 3.0 and Adobe AIR and Adobe Flex as well as Acrobat version 8.0 and later, both in the Reader and in the full Acrobat versions and version 1.6 of the "Rhino" version of the JavaScript Interpreter engine as well as Aptana's "Jaxer" AJAX Application Server which uses the Mozilla code on the back end on the server.

These are so far some of the better- known implementations. So if you're using Firefox or if you're writing code in ActionScript version 3.0 or later, you can use E4X in your code.

So there are two main ways of creating XML using E4X. The first, which we've already seen, is to just assign XML code directly to a variable in your script. The second way is to use the XML object as a constructor using the new XML operator. This is what both examples look like.

Click Play or press spacebar to start or stop video

So you've seen the first one already in the previous slide where I have got a variable and I'm assigning just an XML code straight to it. The second example down here is using the XML constructor. Both of these are functionally equivalent, you can use either one of these. The new XML syntax is obviously a bit more object-oriented. So if that's your preference, you can go that way, but either one of these is perfectly fine and valid.

What's nice about E4X is the way that it interacts with JavaScript's native types. So you can evaluate JavaScript expressions using the brace syntax and I've got an example of that here. Suppose I had a variable name which contained a text string and I wanted to have that inserted into XML based on an expression evaluation.

I can do that using the brace syntax as you've seen here. So if I write something like var myXML, and using E4X I just type out some XML code. I put the name of this JavaScript variable inside these two braces. Then the result will be as if that variable name gets substituted using the contents of that variable in the XML. This is a really powerful way of working with XML code and mixing it with JavaScript logic.

E4X provides several ways of accessing content that's in XML. So it's very straightforward and the good news is you use common JavaScript syntax in order to do it. So for example, the bracket and dot operators work the same way for E4X content, as they do for objects. The at operator, which is a syntax that's borrowed from XPath, is used to access attributes on a tag. We'll be seeing live examples of this in a few moments.

You can also use arbitrary selectors. For example, if you have an element that has attributes on it and you've got multiple of these elements with attributes, you can do some basic filtering by checking to see if an attribute is equal to a certain value to filter out the selection of certain nodes in your E4X XML 04:48 content which is really cool and we'll see how that works.

You can also use some built-in functions, like length() to see how many child tags a parent tag has. Creating XML content in E4X is also really easy and straightforward. In fact, one of the main sources of the power of E4X comes from the way it starts to draw the line between what's a JavaScript object and what is XML content. So for example, you can use JavaScript operators like the brackets I've already shown, you can also use the += syntax, etcetera, to create new content in the XML.

You can also modify the XML data directly in place by placing an E4X expression on the left-hand side of an assignment operator. So imagine I had a bunch of XML content in E4X format. I wrote myXML .title. Imagine there's a title element and I send it to the string, I would actually modify the contents of that XML element directly in place by using common JavaScript notation.

Deleting XML content is also really straightforward. You just use the delete keyword. For example, if I had XML content and I want to delete the title element, I would just simply type delete myXML.title. The title element or all of them, if there was more than one, would be gone.

I can also delete individual attributes by using the at syntax. So for example, to delete the name attribute from the title, I would simply write delete [email protected]. As I mentioned earlier, you can delete multiple instances of a given element by just referring to the name of the tag.

So a couple of things to note about E4X and the way it inter-operates with the DOM. It's important to note that E4X content are XML objects, they're not DOM objects. So E4X content and DOM XML are not the same. The reason for this is because E4X creates its own object types and they don't directly operate with the DOM API that's provided in the browser. However, we can be clever about this in a couple of ways.

You can achieve some measure of interoperability by using the two-string operator on the E4X content. Then you can go ahead and pass that to a DOMParser object, which will create a DOM representation of the XML code for you, because remember using the DOMParser we can create XML content directly from strings.

As long as we have a string that we can pass to a parser, we can create a fully formed DOM document. Remember going the opposite direction, you can serialize a DOM document to a string using the XMLSerializer class and you can pass that to the XML constructor to create E4X content.

Okay, so I think we've reached the point now where we've had enough theory, let's go ahead and look at E4X in action!

This is our final installment in this series, but there are many more in this course and they are available here at!

About is an award-winning provider of educational materials, including Hands-On Training instructional books, the Online training Library, CD- and DVD-based video training, and events for creative designers, instructors, students, and hobbyists. The Online Training Library and CD-ROM titles include such subjects as Photoshop, Flash, Dreamweaver, Illustrator, Office, digital photography, Web design, digital video, and many others.'s all-star team of trainers and teachers provides comprehensive and unbiased movie-based training to an international membership of tens of thousands of subscribers. Considering the speed at which technology evolves, the Online Training Library is a great solution for keeping your skills current. Library subscriptions begin as low as $25 a month, with no long-term commitment required.

Page: 1

Joe Marini is the director for Microsoft's Visual Studio Industry Partner program, and has been active in the Web and graphics industries for more than 15 years. He was an original member of the Dreamweaver engineering team at Macromedia, and has also held prominent roles in creating products such as QuarkXPress, mFactory's mTropolis, and Extensis QX-Tools. He is regularly a featured speaker at industry conferences and has authored or co-authored several books on Web development. His book The Document Object Model is widely regarded as the definitive resource for working with the DOM.


Related Keywords:xml,Extensible Mark-Up Language,xml training,xml tutorial, xml techniques,xml design,web design,web site design, Sarissa

To Comment on This Article, Click HERE

Most Recent Reader Comments:
  • Real-World XML: Part 12 of 12 by DMN Editorial at May 26, 2010 3:37 pm gmt

    Click Here To Read All Posts
    Must be Registered to Respond (Free Registration!!!, CLICK HERE)
  • -->

    Our Privacy Policy --- @ Copyright, 2015 Digital Media Online, All Rights Reserved