2 Javascript discoveries

If you are an experienced Javascript developer, the following will not come as a surprise to you, but for those who might be struggling with some of the quirks of this otherwise pretty useful language, I’d like to share 2 discoveries. I spent quite some time trying to understand why certain code wouldn’t do what I intended and after several frustrating hours, I finally found that

  • Javascript is not a pure “pass-by-value” language, as I thought. When passing an object to a function, any changes to the internals of that object within the function, will alter the object outside the function.
  • A long-running JavaScript will freeze the browser, preventing it from being updated, so any visual changes will not be visible, until after the processing has finished.
    • Solution: Add a delay (even a 0ms delay) between making a visible change, and starting the script. Add this delay using setTimeout():
      $("#xxx").addClass("changing");
      setTimeout(function () {
      // process long scripts
      }, 0);
      

Background:

  • Some complex code on one of my websites didn’t behave properly, even though the code looked fine. Eventually I learned that an object that I passed to a function should not be altered within that function, as it directly changes the object itself, rather than a copy, which would be the case in a pure “pass-by-value” language. See http://nsono.net/javascript-pass-by-value-or-pass-by-reference/ for details.
  • I’m using the powerful datatables plugin on my websites. As some tables contain a lot of columns, I wanted to provide shortcuts to dynamically show or hide certain columns. You can do that with the column().visible() method, but as the table is large, it takes a few seconds to see the result. I therefore wanted to show the user that some processing was going on, with a small popup or by adding a “changing” class to a DOM element. However, these visual changes did not show, or better, they only showed AFTER the processing was done. I really didn’t understand why it was not working, until eventually http://stackoverflow.com/questions/20048357/loading-overlay-with-datatables gave a clue: “A long-running JavaScript will freeze the browser, preventing it from being updated.” Using setTimeout() with a delay of 0ms finally solved it.

Using JSConsole to debug an javascript issue on an iPad

Yesterday I ran into an issue with one of the websites I’m developing. All of a sudden, some pages would not show correctly on an iPad. However, as Safari on the iPad doesn’t provide “developer tools”, it was nearly impossible to determine what went wrong. The pages were working fine on other devices, including a normal laptop and an Android phone. Also Chrome’s emulation mode did not show any problems.

Digging into the Settings on the iPad, I found the “Web Inspector” option in the Advanced Settings tab for Safari. It states “To use the Web Inspector, connect to Safari on your computer using a cable and access your iPad from the Develop menu.” That’s fine if you have a Mac computer, but I only have Windows PC’s…

Luckily, after some Googling, this website from Leon Atherton came to the rescue. While it covers Remote Debugging on OS X, it also provides information about a cool web app called JSConsole. You simply need to add a script tag into your web page and that will capture any console.log input.

jsconsole

Pretty neat.

PS. The issue was linked to the use of arrow functions in one of my javascript pages. Those are not supported in Safari. And not in IE either, apparently. Which is a pity as they made a piece of code where I used the every() method a bit more compact. So I instead of

var emptystack = filestack.every(s => s === undefined);

I now have to use:

function isUndefined(element) {
return ( element === undefined );
}
var emptystack = filestack.every(isUndefined);

Oh well…

 

Experimenting with Adobe AIR and jQuery – Part 7

In Step 7 of my Top100-application, I wanted to be able to enter a number and press ENTER, to immediately go to that specific number in the list. This is very similar to the ability in PowerPoint to move to a specific slide by just typing the slide number and pressing ENTER in Slide Show mode.

That piece was pretty easy with jQuery:

var newnumber = ''; // string to store numbers typed on keyboard
$(document).keyup(function(e) {
  if ( (e.keyCode>=48) && (e.keyCode<=57) )
    {
    // numbers (0..9)
    newnumber = newnumber+(e.keyCode-48);
    }
switch ( e.keyCode ) {
 case 13: // ENTER
  // switch to newnumber (if newnumber is number <= 100)
  var n = parseInt(newnumber);
  if ( (n>0) && (n<=100) )
    {
    currentnumber = n;
    // same effect as down-key
    $("#mainp").hide("slide", { direction: "left" }, 1500, function(){
      colornumber = currentnumber % bgcolors.length;
      $("#mainp").css("background-color",bgcolors[colornumber]);
      $("#mainp").css("color",textcolors[colornumber]);
      $("#number").text(currentnumber);
      $("#artist").text(lijst.record[numbers[currentnumber]]['artist'].toUpperCase());
      $("#title").text(lijst.record[numbers[currentnumber]]['title'].toUpperCase());
      $("#mainp").show("slide", { direction: "right" }, 1500, function(){
        $("#number").effect("pulsate", { times:5 }, 1500);
        });
      });
    }
  newnumber = '';
  break;

This worked, but only when using the numbers at the top of the keyboard. From the Keyboard Events page on Javascript Madness I learned that the keyCodes for the numbers on the numeric keypad are different (well, in IE, FireFox, Safari and Chrome, not in Opera): pressing the 1 key at the top results in keyCode 49, pressing 1 on the numeric keypad results in 97. So I had to add another series of keyCodes (96..105).
Also, I noted that when I started with a 0, I did not get the result I expected. Typing 055 ENTER resulted in number 45 being shown. After looking at Converting Javascript strings to numbers at the Javascript FAQ website, I realized the 0 at the start makes Javascript interpret it as an octal. So I included some code for that as well:

if ( (e.keyCode>=48) && (e.keyCode<=57) )
    {
    // numbers (0..9)
    if ( !((e.keyCode==48) && (newnumber == '')) )
      // don't start with 0 --> will be interpreted as octal
      {
      newnumber = newnumber+(e.keyCode-48);
      }
    }
  else if ( (e.keyCode>=96) && (e.keyCode<=105) )
    {
    // numbers (0..9) on numeric keypad
    if ( !((e.keyCode==96) && (newnumber == '')) )
      // don't start with 0 --> will be interpreted as octal
      {
      newnumber = newnumber+(e.keyCode-96);
      }
    }

The final addition I made was support for the BACKSPACE key. If you accidentally typed the wrong number, pressing BACKSPACE would erase all input:

switch ( e.keyCode ) {
...
  case 8: // backspace
    // reset newnumber
    newnumber = '';
    break;

♦ Related files: step7.html