Category Archives: javascript

JavaScript Objects Coding Style Reviewed

javascript, micro tutorial, web development, , , , , , , , , ,

JS Objects

Once I posted about JavaScript object coding style. Back than I made the analogy with PHP array coding style. In breve it’s useful to format the arrays in PHP simply like that:

$data = array(
	'key1' => 'value1',
	'key2' => 'value2',
	'key3' => 'value3',
	'key4' => 'value4',
	'key5' => 'value5',
);

Note that there is a trailing comma after the last key/value pair. This is not a syntax error and helps you add new elements to the array with no fear to forget the comma. This coding standard is quite well known in the PHP community, but in fact writing JavaScript objects can be “translated” to something very similar. The only problem is that the trailing comma in JavaScript will result to an error, especially in Internet Explorer, so it is important to remove it.

var obj = {
	key1 : 'value1',
	key2 : 'value2',
	key3 : 'value3',
	key4 : 'value4',
	key5 : 'value5'
};

The problem is that when you’ve to add one key/value pair, you’ve to add the comma after the last pair. This actually makes it useless.

Better Solution

There is another way, much better I think, that may help you more when adding new pairs to the object.

var obj = 
	{ key1 : 'value1'
	, key2 : 'value2'
	, key3 : 'value3'
	, key4 : 'value4'
	, key5 : 'value5'
	};

In this example you can simply copy/paste the last pair and change the key and value, or you can simply can continue writing the way the object is constructed.

Thus you don’t have the problem with the last comma and syntax errors.

Diving into Node.js – A Long Polling Example

javascript, web development, , , , , , , , , , , , , , , , , , , ,

Node.js vs. The World

What is typical for most of the web servers is that they listen for requests and respond as quickly as possible on every one of them. In fact the speed of the response is one of the main targets of optimization for developers. Fast servers are what everyone needs. From web developers to website visitors!

In the field of the that battle different web servers have different “weapons” to gain time. While this is useful in most of the cases, when it comes to a chat-like applications and Node.js approaches, the response is not always immediately returned. As I described in my posts until now about Node.js, a simple web server may wait for an event to be emitted, and than return the response. Continue reading Diving into Node.js – A Long Polling Example →

2xjQuery: Select a Selector

javascript, micro tutorial, , , , , , , , , , , , , , , , , ,

Selectors in jQuery

jQuery JavaScript Library

If you’re familiar with jQuery you should already know what are selectors and how they work. However we’re used to get some DOM element with a specific selector, but actually sometimes you cannot select directly what you need. This is especially true when mixing more than one JavaScript libraries. In my case OpenLayers generated a vector layer and jQuery was supposed to change the vectors fill-color property.

OpenLayers

With the simple $(‘path’) I easily got all vectors in the current document, but the problem was that I took them as text. Thus it came to me to use nested jQuery – $($(‘selector’));

To describe what actually happened in my case, let me show you a breve example.

Example

Here’s a short HTML markup:

<div><span>text text</span></div>

With jQuery I can select both the DIV and SPAN with the simple $(‘div’) and $(‘span’), but just for the example lets assume I’ve only the inner text of the DIV tag:

$('div').html();

That was the case in the OpenLayers/jQuery problem. Now I can easily use another jQuery selector:

$($('div').html());

This will return the same as $(‘span’) – a jQuery object.

Looping Animation with JavaScript and Raphaël

javascript, micro tutorial, , , , , , , , , , , , ,

Raphael is a popular JavaScript library helping you to manage vectors via SVG or VML in your browser. It is extremely helpful and very easy to learn and use. The interesting thing is that in the browser you can do very powerful things with vectors, but they remain very less known. However with such libraries like Raphael the task is really simple.

Animation

As I said animating some vector properties is as simple as:

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
c.animate({r : 10, fill : '#00f'}, 1000);

Here we change the radius and the background color of the circle for 1000 milliseconds.

The same thing can be done with any property with any other JavaScript library as jQuery. But as in jQuery, Raphael or whatever library the animation is not looping. That’s natural you can just change a property by animating it, but the looping animation suggests at least two animations. So it’s a developers job to implement this. Here’s a simple way to do this.

Two Way Animation

The solution here is using two functions calling each other.

var paper = Raphael('canvas', 1024, 500);
var c = paper.circle(50, 50, 6).attr({fill : '#f00'});
 
function a() {
    c.animate({r : 10, fill : '#00f'}, 1000, b);
}
function b() {
    c.animate({r : 6, fill : '#f00'}, 1000, a);
}
a();

JavaScript Flexibility – Regex match()

javascript, micro tutorial, , , , , ,

Today after two posts [#1, #2] in the past days here’s something that shows again the JavaScript power. This is not a complete example, but it’s good to start.

var str = '/text/1/text/2/';
var a = str.match(/(\d+)/gi);
console.log(a);

in that example you’ll get an array with all the numbers in the string [“1”, “2”] – yet another flexible js snippet!