This project is read-only.

Working with HTML

One of the goals of NinJa is to get developers to stop this:

var s = "";
for (var i = 0; i < 5; i++) {
    s += "<a href='http://www.mysite.com?id=" + i + "'>Link</a";
}

document.body.innerHtml = s;

What's so bad about this? Notice the string again. "</a". It's missing the ending bracket which will cause parsing errors. In a script that might be hundreds of lines long, this may take forever to find! Not to mention it makes for ugly code and takes longer for the browser to parse.

So what's the alternative? Using the built in element objects in NinJa! The most common elements are represented as objects in NinJa and provide methods of modifying their special attributes without the need of following flakey JavaScript naming patterns. Whenever you create a new element, the reference to that element will provide Intellisense for all the available functions and fields with a description of what they do and how they work. Let's look at this code snippet again with NinJa:

var a;
for (var i = 0; i < 5; i++) {
    a = new Anchor();
}

So we start off by creating a new Anchor object. This represent the <a> tag and will provides methods to modify the tag. If you start to type "new Anchor(", before you close the parenthesis, you will notice Intellisense will appear that shows:

Anchor(String id)
Creates a new anchor with the given id.
id:  Id to apply to the element.

This is the Intellisense provided for the first parameter. If you provide an id, you can reference the anchor with a reference function (more on that in the next tutorial). Let's look at the next piece of code:

var a;
for (var i = 0; i < 5; i++) {
    a = new Anchor();
    a.Text("Link");
}

This piece of code will create new anchors and set the Text to "Link". If you were to type "a." you will get a list functions in Intellisense that come with the Anchor. Down the list you would see "Text" and the following Intellisense:

<Property Function>Gets or sets the raw text (HTML ignore) of the element.

This describes that the function is a Property Function and that it will set the text of the anchor ignoring HTML (i.e. brackets will display as brackets, not html parsed tags). Other functions in the list include Href, Target, Click, and many more functions specific to the anchor and general for all elements. I'll discuss more on <Property Function> later on in the tutorials.

So since we see that there's an "Href" function, lets set that now in the next bit:

var a;
for (var i = 0; i < 5; i++) {
    a = new Anchor();
    a.Text("Link");
    a.Href("http://www.mysite.com?id=" + i);
}

Now we've set the Href of the newly created anchor. Notice we're only dealing with aspects of an anchor tag. No need to bother with syntax. Intellisense is all provided for you. Finally, lets add it to the page:

var a;
for (var i = 0; i < 5; i++) {
    a = new Anchor();
    a.Text("Link");
    a.Href("http://www.mysite.com?id=" + i);
    Page.AddElement(a);
}

And that's it! But that's like 3 extra lines of code that's not needed, that's dumb. But remember, less lines doesn't always mean better code. The NinJa code will be more maintainable in the future and if there's an issue, it will be made clear with exceptions thrown or syntax error notifications. But if you really want all that on one line of code, here you go:

for (var i = 0; i < 5; i++) {
    Page.AddElement(new Anchor().Text("Link").Href("http://www.mysite.com?id=" + i));
}

What is this witch craft?! Whenever you call functions that do not need to return a value, a reference to the calling object is returned instead so that function calls can be linked together. The Text function, when providing a string, has nothing to return, so it will return the calling object (the new Anchor() in this case) so that we can then call Href on it. Href also returns the object if you provide a string, so the entire line:

new Anchor().Text("Link").Href("http://www.mysite.com?id=" + i)

Will evaluate to the anchor object being created, so it will be passed to the function Page.AddElement(). So we can still do all of it on one line, and it's still more maintainable and provides full Intellisense support!

All major HTML tags are supported in this manor. What's available is beyond the scope of this tutorial so be sure to check out other tutorials to see what more you can do with NinJa!

Last edited Jun 13, 2012 at 4:17 PM by dahrkdaiz, version 2

Comments

No comments yet.