scriptNode

It's pretty widely known in the web development industry that server-side scripting is important, and PHP is an extremely common choice. Indeed, for many programmers it's even their first language. It's quite common for web devs to begin on the server, then later require some client-side interaction, at which point they must turn to JavaScript.

I often see questions similar to, "I've got these few lines of PHP code, how would I do this in JavaScript?" I've actually already answered a question like this, but I kept getting more questions, so I thought I'd cover many at once:

• Pushing to an array
• die() or exit
• include or require
• Redirection
• Static classes
• String manipulation

Pushing to an array

Pushing a new value to the end of an array is a common, trivial task. Here's some PHP to accomplish this:

$my_array = array(); $my_array[] = 'a'; array_push($my_array, 'b');

Also note this quick pointer from php.net's array_push() documentation:

If you use array_push() to add one element to the array it's better to use $array[] = because in that way there is no overhead of calling a function.

This isn't the case in JavaScript. The native Array.push method is most optimal:

var myArray = []; myArray.push('a'); // This is the way to go myArray[myArray.length] = 'b'; // This method is possible but bad

die() or exit

There has been much confusion regarding what JavaScript is and how it works in the browser. When looking for an equivalent to exit, one probably doesn't understand that client-side JavaScript is a behavioral language that's intended to react to events. In PHP, a script executes, stopping only when told to do so, and then it's done. JavaScript lives and breathes on the page, reacting to the mouse being moved, keys being pressed and even time changing.

So it's important to understand why this is not a fair equivalent, and that even asking for one shows a misunderstanding. That said, a bit of procedural JavaScript can be exited by using an anonymous function. Here's some example PHP and then similar code in JavaScript:

if ($next_action == 'exit') { exit; } echo 'Made it here!'; (function() { if (nextAction == 'exit') { return; } alert('Made it here!'); })();

While the language behavior is not one-to-one, taking advantage of JavaScript's closure already has advantages, among them being able to easily exit a function via return.

include or require

There have been some arguments about this equivalence in JavaScript. Just like the previous example, this equivalence is not one-to-one and should be thought about in very different terms. That said, here is a quick example of including a PHP file within a PHP script:

// Nothing to it, just include the file: include('my_file.php'); // This code will only execute after my_file.php has been included: echo 'File included!';

To include an external script in JavaScript, writing a method or including a library is definitely best. I wrote about this once, but there are libraries such as YUI that have better support with more options. Here's what this would look like using YUI:

// Call YUI's method var objTransaction = YAHOO.util.Get.script("http://example.com/my_file.js", { // This function will only fire after my-file.js has been included: onSuccess : function() { alert("File included!"); } });

Redirection

This one is easy and straightforward. A redirect is accomplished with PHP's header() function:

header('Location: http://example.com'); exit; // Not necessary but a good practice

Also very simple in JavaScript:

location.href = 'http://example.com';

Static classes

In PHP, it's a pretty common programming pattern to use a static class for encapsulation, sort of namespacing some methods and properties. Here's an example:

class Tools { public static function check_stuff() { return true; } } echo Tools::check_stuff();

For this JavaScript equivalence, it probably makes the most sense to use an object literal:

Tools = { checkStuff : function() { return true; } }; alert(Tools.checkStuff());

String manipulation

String manipulation is absolutely mandatory in most applications. Fortunately, it's a breeze thanks to PHP's fantastic string functions:

// Replace portions within a string echo str_replace('Hey', 'Hi', 'Hey there'); // outputs "Hi there" // Capitalization echo strtolower('Hey there'); // outputs "hey there" echo strtoupper('Hey there'); // outputs "HEY THERE" // Get a portion of a string echo substr('Hey there', 0, 2); // outputs "He" // Get rid of extraneous whitespace echo trim('     Hey there     '); // outputs "Hey there"

Each of these have perfect equivalents except for trim(), which we need to implement ourselves:

// Replace portions within a string alert('Hey there'.replace('Hey', 'Hi')); // outputs "Hi there" // Capitalization alert('Hey there'.toLowerCase()); // outputs "hey there" alert('Hey there'.toUpperCase()); // outputs "HEY THERE" // Get a portion of a string alert('Hey there'.substr(0, 2)); // outputs "He" // Get rid of extraneous whitespace trim = function(txt) { return txt.replace(/^\s+|\s+$/g, ''); }; alert(trim('     Hey there     ')); // outputs "Hey there"

Or, we can augment the String global so that strings will have this method natively:

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }; // Get rid of extraneous whitespace alert('     Hey there     '.trim()); // outputs "Hey there"

While not all of these equivalents are smooth (or even recommended), it's typically helpful when learning a new language to have it compared to a language one is already familiar with. If you can think of any other common PHP tasks that have relatively similar equivalents in JavaScript, please let me know in the comments.

Read other articles tagged: code-style, javascript, php, tutorials

Comments (3)

• 
  January 3rd, 2009 Jani Hartikainen said…

  There’s also a library called PHP.JS, which ports various PHP functions to JS

  http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/

  I haven’t yet decided whether I like the idea or not =)
• 
  January 3rd, 2009 Wally said…

  I prefer (and a Raptr standard):

  $a[] = $foo, instead of array_push($a,$foo) cause it’s prettier. didn’t know there was cost to calling array_push; good to know.

  within JS, array.push(foo) is also more readable than array[array.length] = foo;

  within the front-end, i’m not convinced of using exit or die() in PHP or ‘return’ within JS context ….

  i’m sure we’ll have many philosophical discussions on software design at Raptr =)
• 
  January 19th, 2009 Matt Hackett said…

  @Wally: ironically, I found the “bad” method being used in the Raptr code ;)

Thoughts?

Name: (required)

Email: (not shared)

Website:

Comments: (required)