Backup

Nach knapp zweieinhalb Jahren mit derselben Vista-Installation wird es für mich nun Zeit, meinem neuen Laptop eine größere Festplatte und ein neues System zu spendieren. Windows 7 ist leider noch nicht als Release verfügbar, also bleibe ich erst mal bei Vista.

Kurze Erinnerung an mich, folgende Dinge beim Backup nicht zu vergessen:

  • E-Mail Kontakte
  • E-Mail Nachrichten (z.B. Windows Mail Ordner o.ä.)
  • Browser Bookmarks
  • SVN Repositories
  • Instant Messenger Histories (evtl.)

My whereabouts (preface to DOM manipulation with Javascript)

Hi there, for a long time I didn’t blog here. That’s partly because in June I changed my working field from pre-development to development for the mass production. This has been a great opportunity – connected with a permanent hiring at my alltime-favourite car company: Audi.

But now I’m enjoying my winter holidays at my parent’s place – and I’ve got time to checkout something that had interested me for quite a time: Javascript. Some years ago I already did take a few steps with JS – but then it wasn’t really comfortable at all.

Now – a few years later, there are interesting libraries available that cover a wide variety of  common tasks – mostly driven by developers from the AJAX movement.
But not only are there some libs – there are great IDEs that allow a fast and efficient development.

After asking a few fellow developers, I decided to try the Eclipse based Aptana IDE together with jQuery – a lightweight library that seemed to suite my needs quite well. I also took a glance at dojo – but the small distribution package of jQuery (one single .js file) was exactly what I was searching for.

jQuery

As I already told, I’m doing my tests within the Eclipse based Aptana IDE.
During creating the project, you can already decide which Javascript libraries to use (I chose jQuery).

My use case: Filtering the rows of a big HTML table on client side. Of course, this usually calls for a database driven solution, but as a matter of fact I wanted to support the filtering even in offline situations.

Preparing the HTML file

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="myFilter.js"></script>
<title>My HTML page with client side filtering</title>
...
</html>

myFilter.js

Within myFilter.js we can define our own user functions. By the way: I really love object orientated development – but this time is not the day of OO. So please don’t be disappointed if you’ll see classic procedural style in this blog entry. Maybe some day I’ll find out how to do nice and lean OO within Javascript. 😉

There’s one special callback function that is called from jQuery core after the page has completed loading:

$(document).ready(function(...){});

Within this anonymous method, all the magic is taking place. Within there we’ll even define our own methods, such as

filterTable = function()
{
   //your code goes here
}

Selectors

One of the base concepts of jQuery (next to Chaining) are Selectors. With selectors one defines the subset of the DOM that you want to manipulate, e.g.:

$('#traceTable > tbody > tr')

Selects all rows of the HTML table with the id=’traceTable’.

Chaining

A typical jQuery command is chained. That means that a method call to a jQuery object returns another jQuery object. This may look a  bit weird at first glance, but it’s quite comparable to piping in Unix environments, e.g.:

$('#traceTable > tbody > tr').each(function (i) //execute the function for all <tr> elements of tbody in #traceTable
{
   filterRow($(this), filterText);
});

What you can see here is a combination of several techniques. Both the selector $(‘…’) and the each() function are returning objects of type jQuery. Within each() an anonymous function is called for every element of the selector. Note: In the context of each() there’s also a context change of $(this). It references to the currently traversed element of the selector!