Tag Archives: dom

jQuery, Prototype, Mandoo – creating DOM elements

0
Posted by Evandro Myller on July 19, 2009 – 8:41 pm
Filed under JavaScript, Mandoo, Web Development
Tagged as , ,

While I was porting the Lightbox library to a Mandoo module, I saw the way that Prototype handles elements creation and remembered the jQuery "different" – dirty, actually – way. I tweeted about it and got some replies from others JavaScript developers, dirs and gabrielgilini. This post will show the three different ways these libraries offer to create DOM elements trees. First, the jQuery way: 

$('#grid').append(
'<tr class="even">' +
	'<td width="250">' +
		'<input type="checkbox" id="check"/>' +
		'<input type="text" id="item"/>' +
	'</td>' +
	'<td>' +
		'<a class="link" href="#" title="delete this item">Delete</a>' +
	'</td>' +
'</tr>'
);

Well, personally I really don’t like to mess HTML code with my JavaScript stuff (I am almost sure that neither you do). Thinking this way, we have another option, with Prototype: 

$$('#grid')[0].appendChild(Builder.node('tr', {className:'even'}, [
	Builder.node('td', {width:'250'}, [
		Builder.node('input', {type:'checkbox',id:'check'}),
		Builder.node('input', {type:'type',id:'item'})
	]),
	Builder.node('td', [
		Builder.node('a', {href:'#',title:'delete this item'}, 'Delete')
	])
]));

Better, but we want something cleaner, simpler. What about joining the best ideas? The Mandoo way, using CSS selectors to create elements (why not? :D ): 

u('#grid').append('tr.even')
	.append('td[width=250]')
		.add('input#check[type="checkbox"]')
		.add('input#item[type="text"]')
	.up()
	.append('td')
		.add('a.link[href="#"][title="delete this item"]', 'Delete');

Mandoo helps you to keep things simple, organize your code and follow the best JS coding practices. Share your thoughts and happy coding! :)

How to load external scripts

0
Posted by Evandro Myller on September 28, 2008 – 12:41 am
Filed under JavaScript, Web Development
Tagged as , ,

Sometimes we, for some reason, need to load external scripts to be executed in our page. This post might help with some ideas about it.

There are, basically, two ways for loading scripts.

  1. Using a normal HTTP request
  2. Or using Ajax (XMLHttpRequest)

You can use both, depending on your needing. But what are the differences between them?

  1. Using a normal HTTP request, you append scripts from anywhere (cross-domain) which content is loaded only asynchronously.
  2. Using some Ajax, you can load text asynchronously or not, but you can’t get scripts from outside the domain/port you are (not normally, maybe the browser allow it, but not all browsers).

What’s the better? There’s no better. Just like always, it depends on what you are planning to do. So, are you trying to just execute a script? Or are you trying to get it and execute it so other code will be able to run? – It’s all about time. Loading the script sync/asynchronously makes the difference here.

So, if you need the script exaclty now, i mean, if the code must wait for the script, the solution is use sync Ajax. Otherwise, if the code can wait some milisseconds/secods (or it really doesn’t need to wait anything), you can use a normal HTTP request. Okay, but how?

Doing it using pure JavaScirpt is not that fun. It requires some code, and it can be annoying. So, let’s take a library (I’ll use utm here) to do the stuff). Take a look:

// loading the script asynchronously, normal HTTP request
u.append('script[type="text/javascript"][src="myscripts/some.js"]');
// we can add from another domain/port too:
u.append('script[type="text/javascript"][src="http://site.com/js/some.js"]');

The code above will basically simulate a simple script tag on the BODY of your document (yes, the BODY element is the best place to put scripts in. Why?)
In the other hand:

// I'll need a function called "show", that is in another script in my own domain.
var script = u.append('script[type="text/javascript"]');
// the 'true' here says it to do the request synchronously
script.text( u.get('myscripts/some.js', true) );

// now we can proceed. =)
show(...);

Choose which is better for what you need to do. ;)

Take the <script> out of your <head>!

6
Posted by Evandro Myller on September 28, 2008 – 12:32 am
Filed under JavaScript, Mandoo, Web Development
Tagged as , ,

Insert <script>s at the top of a page (at <head>, generally) is so 90’s. It’s not correct and may cause you problems. The most reason for it is that the DOM is not yet fully loaded (ready) when the script runs from the <head> element.

Maybe this explain why you get errors when you try to access any element of the <body> from the scripts above (when you’re not doing it through a “load” or “domready” event, of course).

Then you try a JavaScript library like jQuery: it teaches you that you must continue using scripts at the top and you must use the “domready” event to workaround this. Good, things will work, but… it’s really bad:

  1. Your page content will have to wait for all scripts to be loaded and executed to finally be shown. (thanks for the point, Wilfred Nas)
  2. You will aways depend on “load” or “domready” events to make your code work properly.

So, to get rid of these problems, the best way to attach scripts to your page is by adding them to the end of your <body> element:

	...
	<script type="text/javascript" src="path/to/the/script.js"></script>
	<script type="text/javascript" src="path/to/another/script.js"></script>
</body>
</html>

You may find it weird, but it’s completely valid and is also recommended by Yahoo and many other experienced web developers.

Keep in mind that the most important layer of your page is the content, and the user might see it independently of any extra behavior (JavaScript).

Tell your friends about it. :)