var myArray = [1, 2, 3, 4];

for (var i = 0; i < myArray.length; i++) {
    console.log(myArray[i]);
}

However, with ECMAScript 5 the Array object itself got some methods for iteration purposes. With those methods you often can write cleaner code than by using a for-loop. Let’s have a (short) look at those methods. For details, please follow the provided links.

forEach

The forEach() method calls the provided function for each array element. Using forEach(), we can rewrite the example from above to:

var myArray = [1, 2, 3, 4];

myArray.forEach(function (element) {
    console.log(element);
});

filter

The filter() method applies the provided filter function to each array element and returns a new array with all elements for which the filter function returned a true value.

For example, to get only the even numbers of an array we could write the following code:

var myArray = [1, 2, 3, 4];

var evenNumbers = myArray.filter(function (x) {
    return x % 2 == 0;
});
// evenNumbers is [2, 4]

every & some

The every() and some() methods are similar: whereas the every() method only returns true if the provided testing function returns a true value for each array element, the some() method returns true if there is at least one array element for which the testing function returns a true value. You can see the difference in this example:

var oddNumbers = [1, 3, 5, 7];
var mixedNumbers = [1, 2, 3, 4];
var evenNumbers = [2, 4, 6, 8];

oddNumbers.every(isEven); // returns false
oddNumbers.some(isEven); // returns false

mixedNumbers.every(isEven); // returns false
mixedNumbers.some(isEven); // returns true

evenNumbers.every(isEven); // returns true
evenNumbers.some(isEven); // returns true

function isEven(x) {
    return x % 2 == 0;
}

map

The map() method applies the provided function to each array element and returns an array with the results.

For example, to square all values of an array we can do the following:

var myArray = [1, 2, 3, 4];

var squared = myArray.map(function (x) {
    return x * x;
});
// squared is [1, 4, 9, 16]

reduce & reduceRight

The reduce() and reduceRight() methods reduce an array step-by-step to a single value by using the provided function and an optional initial value. It works in the following way: the first two array elements (or the initial value and the first array element) are passed as parameters to the provided function. The result of this function call plus the next array element are then used as new parameters for the function. And so on, until there are no more array elements left.

The difference between reduce() and reduceRight() is that reduce() iterates over the array from left-to-right whereas reduceRight() iterates in the opposite direction, from right-to-left.

Here is a simple example to calculate the sum of the values of an array:

var myArray = [1, 2, 3, 4];
var initialValue = 10;

myArray.reduce(add); // performs 1 + 2 + 3 + 4 and returns 10
myArray.reduceRight(add); // performs 4 + 3 + 2 + 1 and returns 10

myArray.reduce(add, initialValue); // performs 10 + 1 + 2 + 3 + 4 and returns 20
myArray.reduceRight(add, initialValue); // performs 10 + 4 + 3 + 2 + 1 and returns 20

function add(x, y) {
    return x + y;
}

That’s it. I hope I could give you an overview over the available iteration possibilities in JavaScript. Happy coding!

Update 2011-04-02: I found a site by Microsoft where you can test those methods in your browser: ECMAScript 5 Arrays

As I wanted to use the same functionality and didn’t find an existing solution I wrote a simple jQuery plugin for this purpose: jquery-jknavigable. Its usage is pretty simple, to make the posts of a blog navigable with the “j” and “k” keys you would use the following code:

$('.post').jknavigable();

By default the active element is marked with the class “active” so you can style it differently. If necessary, you can specify your own class name:

$('.post').jknavigable({'activeClass': 'someClass'});

That’s it. Feedback is, as always, welcome.

PS: a good starting point for writing your own plugin is jQuery’s Plugin Authoring page.

class MyConstants {
    const AA = 'value';
    const BB = 'another value';
}

echo MyConstants::AA; // output: value

Now, while experimenting with JavaScript (or more precisely with Node.js) I got some constants in my code I wanted to organize with such a constants class. My first, albeit naive, approach looked like:

var sys = require('sys');

function MyConstants() {
    const AA = 'value';
    const BB = 'another value';
}

sys.puts(MyConstants.AA); // output: undefined

However, as you can see, this doesn’t work. One reason is that const “[c]reates a constant that can be global or local to the function in which it is declared.”. So it isn’t possible to create a constants class like I imagined…

This means we have to emulate a constants class by using static properties and relying on the naming convention that names of constants are uppercased (i.e. the “constants” are technically not constants and their value can be changed):

var sys = require('sys');

function MyConstants() {
}

MyConstants.AA = 'value';
MyConstants.BB = 'another value';

sys.puts(MyConstants.AA); // output: value

If there is a better approach, please let me know.

As usual, you have to add the helper to the $helpers array of your controller(s) before you can use it:

var $helpers = array('Jamal');

The helper provides two public methods: link() and set().

The link() method is used in the head section of the layout to include all Jamal-related files.

echo $jamal->link();

If DEBUG is greater than 0, it creates something like:

<script type="text/javascript" src="/js/src/jamal.js"></script>
<script type="text/javascript" src="/js/src/models/example.js"></script>
<script type="text/javascript" src="/js/src/plugins/metadata.js"></script>
<script type="text/javascript" src="/js/src/controllers/examples_controller.js"></script>
<script type="text/javascript" src="/js/src/views/examples.js"></script>
<script type="text/javascript" src="/js/src/startup.js"></script>

As soon as you switch DEBUG to 0, it will include the packed version of your scripts (you have to pack them “manually” with the Ant script that comes with Jamal):

<script type="text/javascript" src="/js/dist/jamal_packed.js"></script>
<script type="text/javascript" src="/js/dist/startup.js"></script>

The second method, set(), is used to specify which (Javascript) controller action is executed when the respective view is loaded. So in the view you will do something like:

$jamal->set('MyController', 'myAction');

Additionally, you have to add the variable $jamal_for_layout to the body tag of your layout:

<body <?php echo $jamal_for_layout; ?>>

This will then generate the following code for Jamal:

>body class="jamal {controller:'MyController',action:'myAction',debug:false}">

Happy baking with Jamal :)

Lately, I decided to do an Ajax application and so I had to learn Javascript. To make my life easier, I decided to use the JQuery framework. I have chosen JQuery over Prototype because I heard many good things about JQuery, and the API documentation was (and still is) more intuitive.

Of course, my first attempt ended in a total mess. The result looked more like spaghetti than code ;-) That’s when I recalled an article (in German) about a Javascript MVC framework called Jamal, developed by Timo Derstappen. From the Jamal website:

The MVC concept is easy to adopt for javascript

• Controller: Interaction with the user interface (events)
• Model: Business Logic and AJAX calls
• View: DOM, CSS modifications

That makes sense. So I had a closer look at Jamal. It looked nice, but it bothered me that you would have to use a CSS class “jamal” in the HTML code to make it work. So I wrote my own implementation called “jscake” which avoids that. You can find the first version in the downloads section.

Let’s create a simple “Hello world” example with jscake. Our example (CakePHP) view will contain a link and a div to show the messages:

<a href="">click</a>
<div id="messages"></div>

First we create our model. All models are in the “$m” namespace (please correct me if that is the wrong term), which is a shortcut for “jscake.models”. So our model is called “$m.Example”. The model contains one function to return the text which should be displayed:

// app/webroot/js/models/example.js
$m.Example = {

    getText: function() {
        return "hello world";
    }
};

The view is similar to the model, it contains only one function, too. In the function the element with the id “messages” is located and the text appended to that element. Similar to the models the views are in the “$v” namespace.

// app/webroot/js/views/examples.js
$v.Examples = {

    showMessage: function(message) {
        $('#messages').append(message);
    }
};

Last, but not least, we have to create the controller. The index function is automatically called when the JQuery ready event occurs. In this function we simply say that when someone clicks on the link, the other function of the controller (sayHelloWorld) should be executed.

//app/webroot/js/controllers/examples_controller.js
$c.ExamplesController = {

    index: function() {
        $('a').click(this.sayHelloWorld);
    },

    sayHelloWorld: function() {
        $v.Examples.showMessage($m.Example.getText());

        return false;
    }
};

To make our example work we have to include all needed Javascript files in our view, with CakePHP 1.2 it looks like:

<?php $javascript->link(array('jquery-1.1.2', 'jscake', 'controllers/examples_controller',
'models/example', 'views/examples', 'start'), false); ?>
<a href="">click</a>
<div id="messages"></div>

Have fun with jscake! Feedback is welcome :)

<head>
    <?php echo $javascript->link('script.js'); ?>
</head>

But sometimes you want to use a certain Javascript file only in one view. Then it doesn’t make sense to reference it in the layout. You could take the PHP statement from above and place it in your view, that will work. But it is not a clean solution as the Javascript reference is placed somewhere in the middle of the generated HTML code.

Fortunately, CakePHP 1.2 allows you to define a reference to a Javascript file which is then added to the head section of the generated HTML code. For this purpose the variable $scripts_for_layout has to be added to the layout:

<head>
    <?php echo $scripts_for_layout; ?>
</head>

In the view you can now link to the Javascript file with:

$javascript->link('script.js', false);

That’s it.

BehaviourJS Helper: As its name says it is a helper for the Behaviour JavaScript library, a library that allows you to apply JavaScript to your HTML elements by using CSS selectors. There is already a release available.

MiniCalendar: The goal of this project is to provide a calendar for CakePHP.

XML Parser Component: It is obvious what the goal of that project is: to create an XML parser component. I don’t know how it will differ from the XML parser that is part of the coming 1.2 version of CakePHP.

Qubix CMS: The goal of this project is to create a CMS for Flash sites.

Capadonna: This is another Flash project. From the project description: “CakeAMFPHP / Actionscript Type Mapping System. Client side type mapping system to convert Cake data to and from typed flash objects via CakeAMFPHP remoting.”

DojoHelper: Another helper for a JavaScript library, this time for the Dojo Javascript Toolkit.

hdCalendar Plugin: Another calendar. In contrast to the aforementioned MiniCalendar project there is already some code available (http://cakeforge.org/frs/?group_id=82).

CakeForum: The goal of this project is obvious: to create a forum application.

As always, good luck to these developers :)

In a comment, Josh Southern, pointed me to the cause of the problem: the “latest” version, 1.4, of prototype, the Javascript framework used by CakePHP, caused the problem. After replacing the prototype library with the latest version (1.5.0_rc final) provided with script.aculo.us, the example worked fine with Firefox. Thanks to Josh for the hint!

Update (2006-10-01): Corrected links.

// app/controllers/components/redirect.php
class RedirectComponent extends Object
{
    var $controller;
    var $components = array('RequestHandler');

    function startup(&$controller)
    {
        $this->controller =& $controller;
    }

    function goto($url)
    {
        if ($this->RequestHandler->isAjax())
        {
            $this->controller->set('url', $url);
        }
        else
        {
            $this->controller->redirect($url);
        }
    }
}

The usage is easy. Add the component to the components array:

var $components = array('Redirect');

Afterwards you can use it in the following way:

$this->Redirect->goto('/mycontroller/myaction');

Do not forget do add the code snippet to your view which necessary to do the javascript redirect:

<?php if (isset($url)) echo $javascript->codeBlock('window.location = '.json_encode($url)); ?>

Update (2006-04-03): Small bug fixed in startup function.
Update (2009-12-05): Using json_encode to prevent a possible javascript injection problem. Thanks to pb for the hint.

<div id="login">
    <?php echo $ajax->form(array('action' => '/login'), 'post',
                                              array('update' => 'login')); ?>
    ...
    </form>
    <?php if (isset($url)) echo $javascript->codeBlock('window.location = "'.$url.'"'); ?>
</div>

And in my controller I use the following code:

if ($this->RequestHandler->isAjax())
{
    $this->set('url', '/'.$page);
}
else
{
    $this->redirect($page);
}