| home / programming / prof_java / 1 |    [previous] [next] |
|
|
|
Recently, with the advent of the XHTML standard (eXtensible HTML), the <script/>
tag has undergone a change. Instead of the language attribute,
the tag is now expected to have a type attribute to indicate the mime type of
the inline code or external file being included; the mime type for JavaScript
is “text/javascript”. For example:
Even though many browsers don’t fully support XHTML, most developers
are now using the type attribute in place of the language attribute
in anticipation of better XHTML support. Omitting the language
attribute doesn’t cause any problems because, as noted earlier, all browsers
default to JavaScript for the <script/> tag.
The second change in XHTML is the use of CDATA sections. CDATA sections are
used in XML (and, therefore, in XHTML) to indicate text that should not be parsed
as tags, allowing the use of special characters such as the less-than (<),
greater-than (>), ampersand (&), and double
quotes (“) without using their character entities. Consider
the following code:
This is a fairly simple function, which just compares two numbers, a
and b, and then displays a message indicating their relationship. In XHTML,
however, this code is invalid because it uses three special characters, less-than,
greater-than, and double-quote. To fix this, you must replace these characters
with their XML entities, <, >, and ",
respectively:
This code raises two problems. First, developers aren’t used to writing code using XML entities. It makes the code harder to read. Second, this is actually considered a syntax error in JavaScript because the interpreter has no idea what the XML entities mean. Using a CDATA section, it is possible to write JavaScript code in its normal, readable syntax. The official way to include a CDATA section is as follows:
Although this it the official way, remember that XHTML isn’t fully supported by most browsers, which raises a major problem: This is a JavaScript syntax error because most browsers don’t recognize CDATA sections yet!
The solution currently being used is a takeoff on the old “hide from older browsers” code. By using single-line JavaScript comments, you can embed the CDATA section without affecting the syntax of the code:
This code now works in browsers that don’t support XHTML as well as those that do.
Like the use of the type attribute, the use of CDATA sections
in this way is becoming
more prevalent as developers prepare for better support of XHTML in browsers.
Ultimately, however, it’s best to include JavaScript using external
files in order to
avoid the CDATA problem altogether. |
Scalable Vector Graphics (SVG) is an up-and-coming XML-based language used to draw vector graphics on the Web. Vector graphics are different from raster (or bitmap) graphics in that they define angles, lines, and their relationship to each other instead of simply specifying one color per pixel of an image.
The result is an image that looks the same no matter what size the rendering. Vector graphic programs such as Adobe Illustrator have begun to include SVG export functions as the language gains popularity. Although no browsers natively support SVG at present (although Mozilla 2.0 will), a number of companies, notably Adobe and Corel, are making SVG plugins that enable most browsers to display SVG graphics.
Introducing SVG as a language is out of the scope of this book; however, it is helpful to understand a little about the language for the JavaScript discussion.
Here is a simple SVG example:
This example places a circle at the lower-right corner of a square (see Figure 5-2).
Note that SVG files begin with the XML prolog <?xml version=”1.0”?>,
which indicates that this language is XML-based. Following that is the SVG DTD,
which is optional but typically included.
The outermost tag is <svg/>, which defines the file as an SVG image.
The width and height attributes can be set to anything,
including percentages and pixels, but are set to 100% here for simplicity. Notice
that two XML namespaces are specified, one for SVG and one for XLink. XLink
defines the behavior of links such as href and will most likely
be supported in future versions of XHTML. For now, SVG leads the way in supporting
basic XLink.
The next tag is <desc/>, which contains a description of
the image. You can think of <desc/> as being similar to the
<title/> tag in HTML because it provides a description of
what is in the image but does not render it on the page. Immediately following
is the <defs/> tag, which is where you can define resources
and shapes that are to be used later in the image. In this case, a rectangle
and a circle are defined. These shapes won’t be displayed unless specifically
used in the actual image.
After <defs/> is the <g/> tag, which
is short for group. This <g/> is special because it is the
outermost one and, therefore, encapsulates the visible image. <g/>
tags can be used multiple times to form groups of shapes within the outermost
<g/> (think of it as a <div/> in HTML).
In this example, two <use/> tags point to a shape in the <defs/>
section. The <use/> tag points its xlink:href attribute
to the ID of a shape (preceded by the pound sign, #) and, therefore, brings
the shape into the visible image. Shapes defined in <defs/>
can be used multiple times in the image if you include multiple <use/>
tags. This capability makes SVG a shining example of code reuse among XMLbased
languages.
Of course, one of the most exciting parts of SVG is its excellent support for JavaScript that can be used to manipulate all parts of an SVG image.
| home / programming / prof_java / 1 | [previous] [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 27, 2003
Revised: June 20, 2005
URL: http://webreference.com/programming/prof_java/1
