Let’s assume there’s a little, simple JavaScript array:
var a = [3,2,4,5,2,4,5,8]; |
If you pop() an element from it – what element will be taken? The answer is a bit frustrating, but logical – the last one:
var b = a.pop(); alert(b); // this will result in 8 |
Here’s some Friday fun. Let me show you one sorting algorithm, perhaps the most known of all them – the quick sort, implemented both on PHP and JavaScript. Although the code look similar between both languages, there are few differences, that show the importance of the syntax knowledge!
<?php $unsorted = array(2,4,5,63,4,5,63,2,4,43); function quicksort($array) { if (count($array) == 0) return array(); $pivot = $array[0]; $left = $right = array(); for ($i = 1; $i < count($array); $i++) { if ($array[$i] < $pivot) $left[] = $array[$i]; else $right[] = $array[$i]; } return array_merge(quicksort($left), array($pivot), quicksort($right)); } $sorted = quicksort($unsorted); print_r($sorted); |
var a = [2,4,5,63,4,5,63,2,4,43]; function quicksort(arr) { if (arr.length == 0) return []; var left = new Array(); var right = new Array(); var pivot = arr[0]; for (var i = 1; i < arr.length; i++) { if (arr[i] < pivot) { left.push(arr[i]); } else { right.push(arr[i]); } } return quicksort(left).concat(pivot, quicksort(right)); } console.log(quicksort(a)); |
Note that the first conditional statement is quite important! While in PHP the count function will return 0 either on a NULL value or an empty array and you can substitute it with something like count($array) < 2
if (count($array) < 2) return $array; |
in JavaScript you cannot use that because of the presence of the ‘undefined’ value when an “empty” array is passed as an argument. Thus you’ve the conditional above:
// this will result with an error if (arr.length < 2) return arr; |
An iterative version of the algorithm next Friday!
Actually I couldn’t mange to make it work with a non-javascript approach, but however with the .js help it works. I’ll paste here this code, hopefully this will help.
Note that you’ve to change plugins/javascripts/videos/captions path!
<html> <body> <div id="player" style="width:480px;height:360px"></div> <script src="Flowplayer.Captions/flowplayer-3.2.2.min.js"></script> <script> $f("player", "Flowplayer.Captions/flowplayer-3.1.5.swf", { clip : { url : "Flowplayer.Captions/bach.flv", captionUrl : 'Flowplayer.Captions/bachen.srt' }, plugins: { captions: { url: 'Flowplayer.Captions/flowplayer.captions-3.2.1.swf', captionTarget: 'content' }, content: { url : 'Flowplayer.Captions/flowplayer.content-3.2.0.swf', bottom: 5, height: 50, backgroundColor: 'transparent', backgroundGradient: 'none', border: 0, textDecoration: 'outline', style: { body: { fontSize: 15, fontFamily: 'Arial', textAlign: 'center', color: '#ffffff' } } }, controls: { url : 'Flowplayer.Captions/flowplayer.controls-3.1.5.swf' } } }); setTimeout(function() { $f('player').getPlugin('captions').loadCaptions(0, 'Flowplayer.Captions/bachbg.srt'); }, 3000); </script> </body> </html> |
Continuing from my post about PHP arrays coding style and following the comments of that post, I’d like to write a bit about JavaScript objects’ coding style.
You perhaps know that the term object is quite undefined or under estimated in the JavaScript world, but I’d speak about the key/value pairs in JS commonly formatted like that:
var obj = { key : 'value' } |
Here you can add more and more key/value pairs, but what’s different from the PHP associative arrays and what’s the same and should be cosidered.
I wrote about the alignment in PHP and hashes. Than I showed how I align them:
$arr = array( 'short' => 'val', 'longkey' => 'val' ); |
In JavaScript you should use the same technique of alignment:
var obj = { 'short' : 'val', 'longkey' : 'val' }; |
Yes, there are more differences, which is normal. First of all you don’t have the => notation in JavaScript and a : is used. Second and most important you cannot add a trailing comma after the last key/value pair. Note that in PHP that’s fine!
// that will throw an error in MSIE var obj = { 'short' : 'val', 'longkey' : 'val', }; |
while this is OK in PHP and it’s encouraged:
$arr = array( 'short' => 'val', 'longkey' => 'val', ); |
Crockford says: “Don’t do that, please stop doing it!?” It may be related to JavaScript, YUI, CSS or whatever. PPK recently posted about browser prefixes with the same intonation. OK, fine, it’s difficult to maintain, it’s ugly but my job is to make the site look as nice as possible.
I agree with Crokford that only with copy/paste now JavaScript has the reputation of badly standardized language with no programmers that understand it at all. It’s true, but however this maybe made JavaScript so popular, now all the libraries come with that abstraction in mind and this gap seems to be smaller.
In addition I’ll say that’s fine if Crockford or PPK say something like that, but the primary goal of every web developer is not to be in good relations with Crockford, but to satisfy clients! I’d like to repeat – clients!