JavaScript programming language – stoimen's web log

You think you know javascript. Quiz results!

Stoimen — Wed, 07 Mar 2012 10:27:37 +0000

After a week again, the “You think you know … JavaScript” quiz results are on!

1. Which loop is faster in JavaScript?

for
while correct answer

2. What will be alerted by the code bellow?

var str = 'my-'; alert(str.split('-')[1]);

Error
An empty string correct answer
“-“
“my”

3. What is server-side JavaScript?

JS scripts files placed on the server that can be publicly accessed by the client
JS engine running on the server accessible via http correct answer

90.91% right answers

4. Is it possible to have private and public methods in a JavaScript object

Yes correct answer
No

54.55% answered with the right answer!

Note that the quiz will remain open, but no results will be published!

JavaScript Performance: for vs. while

Stoimen — Tue, 24 Jan 2012 14:20:05 +0000

JavaScript Loops

If you have read some preformance tests on JavaScript loops, you may have heard that “while” is faster than “for”. However the question is how faster is “while”? Here are some results, but first let’s take a look on the JavaScript code.

The for experiment

console.time('for');
for (var i = 0; i < 10000000; i++) {
	i / 2;
}
console.timeEnd('for');

The while experiment

console.time('while');
var i = 0;
while (i++ < 10000000) {
	i / 2;
}
console.timeEnd('while');

Note - these tests are performed and measured with Firebug on Firefox.

Results

It's a fact, that you'll get different results as many times as you run this snippet. It depends also on the enviroment and software/hardware specs. That is why I performed them 10 times and then I took the average value. Here are the values of my performance tests. Note that both for and while perform 10,000,000 iterations.

And the Winner Is

While is the winner with an average result of 83.5 milliseconds, while "for" result is 88 average milliseconds.

As the diagram bellow shows, the while loop is slightly faster. However we should be aware that these performance gains are significant for large number of iterations!

JavaScript Performance: for vs. while

Does JavaScript undefined Equals undefined?

Stoimen — Fri, 21 Oct 2011 11:36:01 +0000

Weird JS

Does JavaScript "undefined" equals "undefined"?

As you know sometimes JavaScript can be weird. Let’s see the following example and let’s try to answer the question: does “undefined” equals “undefined”. What do I mean?

First take a look at the following code.

var a;
var b = undefined;

// alerts "false"
alert(b == a);

Both a and b are undefined, but they are NOT equal. Now let’s see where it can become a problem.

We have an object with one member variable that is not defined.

var f1 = function()
{
	this.myvar;
};

var obj1 = new f1();

Now you’d like to know whether the object “b” has the property “myvar”. There are lots of examples online, but what’s the right way?

Wrong

Appearantly the value of b.myvar should be undefined.

alert(obj1.myvar); // undefined

But that doesn’t mean that it is the same value if the object was declared this way:

var f2 = function()
{
	this.myvar = undefined;
};

var obj2 = new f2();

This is a completely different thing. Why? In the first case if we try to check whether the property myvar belongs to obj1 we can go wrong with:

if (obj1.myvar) // false

This is false simply because obj1.myvar is undefined

if (obj2.myvar) // false

Again is false, because obj2.myvar is undefined.

The same thing happen when using the other “famous” approach.

if (typeof obj1['myvar'] != 'undefined') // false
if (typeof obj2['myvar'] != 'undefined') // false

Clearly this is not the right answer, becase even it is undefined myvar belongs to obj2!

Right

Now let’s try with hasOwnProperty supported by almost every modern browser.

if (obj1.hasOwnProperty('myvar')); // false
if (obj2.hasOwnProperty('myvar')); // true

Here you can see that when the member variable is explicitly defined as “undefined” the object “has the property” and hasOwnProperty returns true. Yet again, “undefined” does not always equal to “undefined”.

OOP JavaScript: Accessing Public Methods in Private Methods

Stoimen — Thu, 28 Jul 2011 12:05:42 +0000

As you know in JavaScript when you define a variable with the special word “var” the scope of this variable is within the function. So when you simply wite “var a = 5” the variable named “a” has a global scope and can be accessed in any function in the global scope.

var a = 5;

function f() { return a; } // returns 5

Thus f will return the value of “a” which equals to 5. You can also change the value of the global variable in the function body.

var a = 5;
function f() { a = 10; return a; }
console.log(a); // equals to 10

Now after we call the function f the value of “a” will equal to 10. This is because we reference the global variable “a” into the function body without using the keyword “var”. This means that if you put the “var” keyword the variable “a” inside the function body is no longer the same variable as the variable defined outside the body. It becames “local” and it’s visible only inside the function.

Objects & JavaScript

Actually in JavaScript functions can be also objects. Any variable defined with the “var” keyword becomes private, because it’s only visible inside the function body, while by using the “this” keyword we can define global variables visible outside the function body. Let’s see na example.

var f = function() 
{
	var a = 10;
	this.b = 5;
}

var myfunc = new f();
myfunc.a; // is undefined because a is private
myfunc.b; // equals to 5 because b is public

Public and Private Methods in JavaScript

As you may know in JS you can define functions inside other functions. Actually this is how you can define classes in JavaScript.

var myClass = function() 
{
	var f = function() {
		return 10;
	}
}

But this in fact defines a local (private) function into myClass and we cannot access it from the outside world. Here’s a fully functional class with one public and one private method.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return 5;
	}
}

var c = new myClass();
c.a(); // will return 10
c.b(); // is undefined, because is private

Accessing Private Methods from Public Methods

Easily we can access private methods from public ones.

var myClass = function()
{
	// public method
	this.a = function() {
		return b();
	}
	
	// private method
	var b = function() {
		return 5;
	}
}

However accessing public mtehods in private ones is more difficult. That’s because we cannot use “this” into the private methods, just because “this” refers to the private method
itself and not to the global method, which is “myClass” in our case.

var myClass = function()
{
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return this.a(); // this will result in an error
	}
}

Accessing Public Methods from Private Methods

To access public methods in private methods you need to define a variable that points to the global “this” object.

var myClass = function()
{
	var self = this; 
	
	// public method
	this.a = function() {
		return 10;
	}
	
	// private method
	var b = function() {
		return self.a(); // this will return 10
	}
}

This variable gives you the bridge between private methods and global “this” pointer.

A JavaScript Trick You Should Know

Stoimen — Tue, 12 Jul 2011 14:49:46 +0000

JavaScript Strings

You should know that in JavaScript you cannot simply write a multilined code chunk, i.e. something like this:

var str = 'hello
world';

This will result in an error, which can be a problem when you deal with large strings. Imagine a string containing some HTML that should be injected via innerHTML. Now one possible solution is to concatenate two or more strings, by splitting the initial string.

var str = 'hello'
        + 'world';

Howerver this solution result in some additional operations like concatenation. It can be very nice if there was something like the PHP multiline string format.

The PHP Example

In PHP you have the same use case with strings. You can have a string concatenated over multiple lines, but you cannot split lines like so:

// the following line is wrong
$str = 'hello
world'; 

// a possible solution to the line above is
$str = 'hello'
     . 'world';
// which is very similar to the js solution in the second example

// ... but in PHP there is the so called HEREDOC
$str = <<
The heredoc gives us the power to write multiline strings. 
The JavaScript Trick
Actually in JavaScript there is something that's exactly what Heredoc is meant to be for PHP. Take a look at the last example:
var text = <>
this 

is
my
multi-line
text
.toString();

document.body.innerHTML = text;

Thus you can write multiline strings in the JavaScript code.

Related posts:

Powerful PHP: Less Known String Manipulation 
JavaScript Flexibility – Regex match() 
Flexible JavaScript – Splitting Strings 
Flexible JavaScript – Replace in a String

Object Oriented JavaScript: Inheritance

Stoimen — Mon, 30 May 2011 09:43:53 +0000

Objects and JavaScript

JavaScript, being a functional language, differs from most of the procedural/object oriented languages we know. The object oriented approach in JavaScript is rather strange. However there is much power in making objects! The syntax is really odd and there are several approaches.

Literal Notation

As many of you may know the most used notation is the JSON (JavaScript Object Notation).

{ 'key1' : 'val1'
, 'key2' : 'val2'
, 'key3' : 'val3'
}

Of course this is the very basic example. You can use as value any JavaScript object – another similar object or a function.

{ 'key1' : 'val1'
, 'key2' : { 'inner_key1' : 'inner_val1' }
, 'key3' : function() {
			return 10 + 5;
		 }
}

The two examples above are showing an anonymous object in JavaScript, but you can assign this code to some variable.

var myObject = 
	{ 'key1' : 'val1'
	, 'key2' : 'val2'
	, 'key3' : 'val3'
	}

var myObject =
	{ 'key1' : 'val1'
	, 'key2' : { 'inner_key1' : 'inner_val1' }
	, 'key3' : function() {
				return 10 + 5;
			 }
	}

and then you can call the properties of these objects with the ‘.’ operator:

myObject.key1;
myObject.key2.inner_key1;
myObject.key3();

So far so good – this is the literal object notation in JavaScript. However there is another “objects” in JavaScript.

Objects and Functions in JavaScript

Actually in JS the functions are also objects (classes). So you can define a function and then define another function inside or use the “this” operator.

var a = function(name)
{
	this.name = name;
	
	this.print = function() {
		alert(this.name);	
	}
}

Then you can make a new instance of this “class”.

var myObject = new a('hello world');
var anotherObject = new a('some test');

myObject.print(); // will print the string "hello world"
anotherObject.print(); // will print the string "some test"

Thus the function “a” defined within the code “var a = function(name) …” is a class in JavaScript. You can make instances (objects) of this class with the “new” operator.

You can use another notation for defining the function “a”, so both can be used and it’s up to you to decide which one is more convenient.

function a(name) 
{
	this.name = name;
	
	this.print = function() {
		alert(this.name);	
	}	
}

Prototypes

JS gives you more power. In most of the languages you’ve to define the class first and then make objects. In JS you can define a “class” then make some objects and then add some properties to the class by using the prototype.

var a = function(name) 
{
	this.name = name;
}

var myObj = new a('hello world');

a.prototype.print = function() {
	alert(this.name);	
}

myObj.print();

So you can see how you can add functions and properties to an already defined class using the prototype. Thus you can call the “print” function on the myObj object.

Inheritance

The prototype built-in property can be used to make use of one of the main OOP features – inheritance.

var SuperClass = function()
{
	this.superFunction = function() {
		return 'function in Super Class';	
	}
}

var sup = new SuperClass();
sup.superFunction(); // will return the string "function in Super Class"

Now you can add one more class and set its prototype to the SuperClass

var SubClass = function()
{
	this.subFunction = function() {
		return 'function in Sub Class';	
	}	
}

SubClass.prototype = new SuperClass();

Thus you make SubClass inherit from SuperClass. Now you can call the SuperClass properties from any SubClass object.

var sub = new SubClass();
sub.superFunction(); // will return the string "function in Super Class"
sub.subFunction(); // will return the string "function in Sub Class"

Even more! You can add properties to the super class with prototype.

SuperClass.prototype.myFunc = function() {
	return 'my new function';	
}

And then call it from the sub class:

sub.myFunc(); // will return the string "my new function"

Override a Function

What happens if you have the same function name in both classes. Actually this overrides the method in the sub class.

var SuperClass = function()
{
	this.myFunc = function() {
		return 'function in Super Class';	
	}
}

var SubClass = function()
{
	this.myFunc = function() {
		return 'function in Sub Class';	
	}	
}

SubClass.prototype = new SuperClass();

var sub = new SubClass();
sub.myFunc(); // will return the string "function in Sub Class"

while

var sup = new SuperClass();
sup.myFunc(); // will return the string "function in Super Class"

Conclusion

Now you know there are classes, inheritance and overrides in JavaScript – thus you can improve your object oriented JavaScript!

Adding a Custom Button to TinyMCE

Stoimen — Wed, 16 Feb 2011 08:31:04 +0000

TinyMCE

First thing to say TinyMCE is a very popular WYSIWYG online based editor. It’s very widely used in the web, as may already know it it’s part of the default WordPress installation. Out of the web, of course, there are some other editors as well. The most used and well developed projects are the Yahoo!’s YUI 2 Rich Text Editor and CKEditor also known with his past name – FCKEditor.

Before I proceed with this post, let me say that I’m working and this tutorial is based on version 3.1.1 released on 18 Aug 2008.

Including TinyMCE

The only thing you’ve to do is to include a TinyMCE javascript file and write a simple init. The examples of installing it come with the compressed version of the javascript file:

The result of this code is shown on the picture:

However for this tutorial you’ve to include the uncompressed file, because the compressed one is impossible to read and modify. At the end of all this you can compress yet again the resulting file with some js compressor as YUI Compressor, JSMin or Google Closure Compiler. So instead of including the file above, you’ve to include the _src version as it is:

Adding the Button

Now there is a small configuration object passed to the init function. First you’ve to modify it a bit:

tinyMCE.init({
	mode : "textareas",
	theme : "advanced",
	force_br_newlines : true,
	theme_advanced_buttons1 : "link,unlink,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,mybutton",
	theme_advanced_buttons2 : "",
	theme_advanced_buttons3 : "",
	theme_advanced_buttons4 : "",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_statusbar_location : "",
	theme_advanced_resizing : true
});

Usually in the /tinymce/jscripts/tiny_mce/themes/advanced/editor_template_src.js file there are some buttons described:

tinymce.create('tinymce.themes.AdvancedTheme', {
	// Control name lookup, format: title, command
	controls : {
		bold : ['bold_desc', 'Bold'],
		italic : ['italic_desc', 'Italic'],
		underline : ['underline_desc', 'Underline'],
		strikethrough : ['striketrough_desc', 'Strikethrough'],
		justifyleft : ['justifyleft_desc', 'JustifyLeft'],
		justifycenter : ['justifycenter_desc', 'JustifyCenter'],
		justifyright : ['justifyright_desc', 'JustifyRight'],
		justifyfull : ['justifyfull_desc', 'JustifyFull'],
		bullist : ['bullist_desc', 'InsertUnorderedList'],
		numlist : ['numlist_desc', 'InsertOrderedList'],
		outdent : ['outdent_desc', 'Outdent'],
		indent : ['indent_desc', 'Indent'],
...

What you need to do is simply to add a new line to this config array:

...
        blockquote : ['blockquote_desc', 'mceBlockQuote'],
	mybutton : ['mybutton_desc','myFunc']
},

That’s not enough of course! Now TinyMCE sees this definition, but nothing happens. It cannot build the new button yet. What’s next?

Styling the Button

After giving the new button a name, TinyMCE constructs a markup with the given name into the controlbar:

This name can be simply used in the CSS file (/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/ui.css) to style the button. Because TinyMCE uses sprite for its background images, you can copy/paste the style from some other button and than adjust the background position, only after you’ve added the new icon to the sprite. Here’s simply a copy of the style from another button:

...
.defaultSkin span.mce_numlist {background-position:-80px 0}
.defaultSkin span.mce_mybutton {background-position:-460px 0}
.defaultSkin span.mce_justifyleft {background-position:-460px 0}
...

You can see how the button appears in the control bar!

Binding the Button

The final job to do is to bind the button with some action. This thing happens again in /tinymce/jscripts/tiny_mce/themes/advanced/editor_template_src.js. You just have to search for other bindings – let’s say mceCleanup. There you can write your new function – myFunc:

FormatBlock : function(ui, val) {
	...
},

myFunc : function() {
	this.editor.selection.setContent('Hello World!');
},

mceCleanup : function() {
	...
},

Now after clicking the button the method will be executed.

Note that the name of the method should be exactly the same as described in the controls array in /tinymce/jscripts/tiny_mce/themes/advanced/editor_template_src.js. If not the button wont work ever.

Final Steps

Now you’ve to compress (if you wish) the js files and deploy your editor.

Diving into Node.js – A Long Polling Example

Stoimen — Thu, 02 Dec 2010 09:51:48 +0000

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.

I wrote about how to write the very first server, but than I didn’t described how to make a “non-responding” server. By the term “non-responding” I mean a server that responds not immediately after it has received and parsed/executed the request.

A typical web server, responding immediately on every request, written with Node, this may look like so:

var http = require('http');
http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

The code that shows us that the request is executed and responds in these lines:

  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World\n');

Actually by commenting/removing those lines you’ll get a server that simply doesn’t respond – ever! This of course is not the main goal, but you can start from somewhere.

var http = require('http');
http.createServer(function (req, res) {
  // res.writeHead(200, {'Content-Type': 'text/plain'});
  // res.end('Hello World\n');
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

This is how you can hold for a while. Perhaps putting these lines in a conditional statement and periodically checking for some event to occur will do the job.

var http = require('http');
http.createServer(function (req, res) {
  if (something) {
     res.writeHead(200, {'Content-Type': 'text/plain'});
     res.end('Hello World\n');
  }
}).listen(8124, "127.0.0.1");
console.log('Server running at http://127.0.0.1:8124/');

Looping Server

As described in the code above if you put the respond into a conditional you can possibly return the response after some event has fired. The only thing is to periodically loop and check for this condition to be true. Assuming your server’s code is in server.js, started with the “node server.js” command, you’ve to put this code into it:

var http = require("http"),
    fs	 = require("fs");  

// we create a server with automatically binding
// to a server request listener
http.createServer(function(request, response) {
	checkFile(request, response);
}).listen(8124);

function checkFile(request, response)
{
	var date = new Date();
	if (date-request.socket._idleStart.getTime() > 59999) {
		response.writeHead(200, {
			'Content-Type'   : 'text/plain',
			'Access-Control-Allow-Origin' : '*'
		});

		// return response
		response.write('OK', 'utf8');
		response.end();
	}

	// we check the information from the file, especially
	// to know when it was changed for the last time
	fs.stat('filepath', function(err, stats) {
		// if the file is changed
		if (stats.mtime.getTime() > request.socket._idleStart.getTime()) {
			// read it
			fs.readFile('filepath', 'utf8', function(err, data) {
				// return the contents
				response.writeHead(200, {
					'Content-Type'   : 'text/plain',
					'Access-Control-Allow-Origin' : '*'
				});

				// return response
				response.write(data, 'utf8');
				response.end();

				// return
				return false;
			});
		}
	});	

	setTimeout(function() { checkFile(request, response) }, 10000);
};

Note: you must change “filepath” with an existing file path in your system.

Here we can read periodically the file’s mtime, which is the modify time. Thus whenever the file is changed the server will return the response. It’s interesting to note that if no change occurs within the timeout period you’ve to return some status message as we did in those lines:

        
var date = new Date();
if (date-request.socket._idleStart.getTime() > 59999) {
	response.writeHead(200, {
		'Content-Type'   : 'text/plain',
		'Access-Control-Allow-Origin' : '*'
	});
	
	// return response
	response.write('OK', 'utf8');
	response.end();
}

The client side should long poll this server. The example bellow is written in jQuery. The only “special” thing is that after receiving the response, you must call the server again.

The Client

The client is nothing new to the jQuery/JavaScript community except you must call again the server when the response is returned:

function callNode() {
    $.ajax({
        cache : false,
		// setup the server address
        url : 'http://www.example.com:8124/',
        data : {},
        success : function(response, code, xhr) {

            if ('OK' == response) {
            	callNode();
                return false;
            }

            // do whatever you want with the response
            ...

            // make new call
            callNode();
        }
    });
};
callNode();

Summary

As Node can hold the response, the only thing you should do is to check periodically for something as in this example this was a file change. Than it’s important to change the client so it can call the server after the response from it is received.

Typically Node can be used for chat-like applications or whatever apps that must deliver real time data, but for sure it is really great software.

Diving into Node.js – Introduction & Installation

Stoimen — Tue, 16 Nov 2010 08:17:32 +0000

Why I Need Something Like Node.js?

First of all the use of some software is needed not because of itself, but because of the need of some specific functionality. In my case this was the need of real time news feed. Of course there is a way to make this without Node.js, as I’ll describe later in this post, but there are several disadvantages. However to begin from somewhere, let me explain what is Node.js.

Introducing Node.js

Perhaps the best way do describe what is Node.js is from its about page.

Node’s goal is to provide an easy way to build scalable network programs. In the “hello world” web server example above, many client connections can be handled concurrently. Node tells the operating system (through epoll, kqueue, /dev/poll, or select) that it should be notified when a new connection is made, and then it goes to sleep. If someone new connects, then it executes the callback. Each connection is only a small heap allocation.

…

In general Node is a program using the Google Chrome’s V8 JavaScript engine, which in turn is a program that can parse and execute code written in JavaScript. V8 is a very very interesting project itself. First of all from Google have developed this engine especially for one of his products – their browser Chrome. It pretends to be and by no means is one of the masterpieces of Google. It is fast and reliable engine, written in C++ and JavaScript, as Wikipedia’s page says. Actually this code is open source and can be embedded in whatever application written in C++. Thus you can have in your application a JavaScript engine.

Such kind of application/server is Node.js. With V8 embedded into, Node is intended to run on a machine and to serve some requests. Just like a normal web server, but with few differences. First of all Node is not only serving HTTP requests, but also TCP. Well I’m not so deep into this yet, but so far that works for me. What I need for now is its web serving functionality.

The way Node works, however is different from what we know from every other web server. Here it is a normal server in general:

Whenever a request comes to the server, it tries to return the response as fast as possible. This is one of the main goals of every web developer team – to make the application as fast as possible. However in Node the things work different:

Here the server doesn’t return immediately the response, but holds as long as possible until some “event” occurs. You can thing of Node as a classical chat server. Until one of the peers doesn’t write a message, the other doesn’t receive anything.

Some may be confused as how you can use both the typical web server, as Apache, with Node as another web server within the same page. The answer is – with AJAX. As you know thus you can have only one chunk of your page talking with the server – in this case the entire page is returned by Apache, but inside the page you can have a chat app using Node as a server, working perhaps on a different port on the same machine.

Typically this scenario can be simulated without Node, but as I said, with some disadvantages. Let’s say you have two browsers and one server – you can infinitely loop AJAX calls to the server and whenever there is new message on the server return it to the browser – this is quite inefficient. There are two approaches in this case.

You can make those AJAX calls too recently and you can have a call every N seconds. In that case if N is to short you’ll have too many calls and in case the other peer doesn’t make anything the server will be unusually loaded with no practical effect.
In the second case you can choose to make N too long – for instance 20 seconds. This is also bad, because during this period of time the peers may want to interact and chat.

In that case Node is a web server, but simply doesn’t return the response until a specific event doesn’t occur. How does this look like in a web browser. You may know how looking into the Firebug console for every AJAX call you see the request and how many seconds it has taken. If you make an AJAX call to a Node server app the request just doesn’t respond immediately.

Installing Node.js

The process of installation is described quite well, so I’m going to describe it in few steps.

Download the application from Git, note that V8 is embedded inside. The version while this post was written and of course was stable is v0.2.4
For those familiar with Unix/Linux systems, there are three simple steps following, however without GCC (Gnu Compiler Collection) you wont be able to proceed! I’m writing this especially for the Mac OS users, as they may know there is no built-in GCC there.
./configure
make
make install
make test (optional)

This in general is enough. After all that you can write the node command in your terminal. However if there are some problems while compiling it you may refer to Git and the Node community for more help. Don’t forget that V8 can work only on x86, x64 and ARM architectures.

Summary

There are few things that can be summarized now:

First of all Node can be a web server, as Apache is, but with the option to respond on event firing.
You can request it either with a web page loaded in your browser or within a chunk of the page via AJAX.
To install Node you need GCC. It comes with V8 JavaScript engine inside, which can run only on x86, x64 and ARM.

So far so good! Now we have Node installed, practically useless, because there is no application running on it. In my next post I’ll describe how to run your first application.

2xjQuery: Select a Selector

Stoimen — Fri, 24 Sep 2010 08:23:58 +0000

Selectors in jQuery

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.

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:

text text

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.