Tutorial Lesson 1: The Jude Element

The element is the most basic part of an HTML document. An HTML document may be made up of hundred or thousands of elements. One of the most powerful features of modern standards-compliant browsers is their ability to create, control, and otherwise contort these elements in any way imaginable. But there are difficulties in actually using this power: namely, there are compatibility problems across different browsers and platforms, and many of the methods and properties for manipulating an element are hard to use. Furthermore, when it comes to building complex DHTML applications, there is really no built-in foundation for building modular components.

Jude attempts to smooth over these difficulties by building on the basic HTML element. We call this beefed-up element "The Jude Element." Here, you will learn how to use it.

The E() Function

In order to manipulate an element of our document, we must first get a reference to it. You might say, "Well! I already know how to do that!" And if you're thinking of using document.getElementById(), then you're a pretty smart guy (or gal). If you're a veteran DHTML'er, you might even be thinking of using document.all and document.layers. If either of these statements applies to you, you're not going to have any trouble learning to use Jude!

Jude provides us with our own way to get a reference to a page element: the E() function. The E() function is similar to document.getElementById(), and returns just what you would expect it to, but it also does a lot more. First, a simple example.

Let's say we've written an HTML document, and in it we have a <div> that must be positioned and sized based on some user interaction. First, we must get a reference to the element.

Getting a Reference

In the <head> of our document we have:

<style type="text/css">
    #MYELM {
        position   : absolute ;
        left       : 20px ;
        top        : 20px ;
        width      : 100px ;
        height     : 100px ;
        background : #ccc ;
    }
</style>

<script type="text/javascript src="lib/jude.js"></script>
<script type="text/javascript>

    jude.onload = function() {

        myElm = E( "MYELM" ) ;

    };

</script>

And in the <body> of our document we have:

My Element

With this JavaScript code (the code inside the second <script> tag), we've successfully referenced the <div> element. All the code above should look somewhat familiar to you; if not, you will need to find some other resources for learning HTML, CSS, and JavaScript before you continue with this tutorial.

Notice that our JavaScript code that gets the reference is enclosed in a function and assigned to jude.onload. Most code we write will be enclosed like this, and here's why: JavaScript code starts executing as soon as it gets loaded into the browser. Since JavaScript is almost always written in the <head> of the document, before the main contents of the document (the <body>), it will start executing before the entire page is loaded. If our code attempts to get a reference to an element in the page before the element actually exists in the browser, an error will occur.

If you've worked with JavaScript and DHTML before, you've probably used onload = function() { ... }. Jude intercepts the normal onload event to do some things of its own, so it is recommened that you instead use the onload provided by Jude, namely jude.onload.

Manipulating the Element

Now that we have a reference to the element (stored in myElm), we can change anything about it.

Adding to the <script> code above, we'll now write some JavaScript to change the element's position, size, and HTML contents:

jude.onload = function() {

    myElm = E( "MYELM" ) ;
    myElm.sP( 100, 100 ) ;        // setPosition
    myElm.sS( 300, 300 ) ;        // setSize
    myElm.wH( "Hello, World!" ) ; // writeHTML

};

That's all! We've successfully manipulated the <div> element in our HTML document. First, we used the E() function to return a reference to the <div> with the id="MYELM". We stored the reference in a variable named "myElm". We then used Jude's methods to manipulate the element.

Next Lesson: Element Creation »