Multidimensional Arrays

The question of multidimensional arrays came up in class again yesterday and I wanted to reiterate that JavaScript does not have true multidimensional arrays. Let's (literally) take a page from the experts, here's what JavaScript: The Definitive Guide, 6th Ed, (O'Reilly Media, Inc., ISBN: 978-0-596-80552-4) has to say:

7.7. Multidimensional Arrays

JavaScript does not support true multidimensional arrays, but you can approximate them with arrays of arrays. To access a value in an array of arrays, simply use the [] operator twice. For example, suppose the variable matrix is an array of arrays of numbers. Every element in matrix[x] is an array of numbers. To access a particular number within this array, you would write matrix[x][y]. Here is a concrete example that uses a two-dimensional array as a multiplication table:

// Create a multidimensional array
var table = new Array(10);               // 10 rows of the table
for(var i = 0; i < table.length; i++)
    table[i] = new Array(10);            // Each row has 10 columns

// Initialize the array
for(var row = 0; row < table.length; row++) {
    for(col = 0; col < table[row].length; col++) {
        table[row][col] = row*col;
    }
}

// Use the multidimensional array to compute 5*7
var product = table[5][7];  // 35

More on the Switch Statement

I said in class on Monday that you could neither mix string and numeric case clauses in switch statments nor next switch statements. I was wrong on both counts (JavaScript is much more flexible than I gave it credit for). Here's sample code that does exactly what I said yesterday wasn't possible.

var leftAlpha = document.getElementById('left').value;
var leftNum = parseInt(leftAlpha);
var rightAlpha = document.getElementById('right').value;
var rightNum = parseInt(rightAlpha);
  
var left = isNaN(leftNum) ? leftAlpha : leftNum;
var right = isNaN(rightNum) ? rightAlpha : rightNum;
  
switch(left)
{
  case 'A':
    switch(right)
    {
      case 'A':
        alert('You entered A & A');
        break;
      case 'B':
        alert('You entered A & B');
        break;
      case 1:
        alert('You entered A & 1');
        break;
      case 2:
        alert('You entered A & 2');
        break;
    }
    break;
  case 'B':
    switch(right)
    {
      case 'A':
        alert('You entered B & A');
        break;
      case 'B':
        alert('You entered B & B');
        break;
      case 1:
        alert('You entered B & 1');
        break;
      case 2:
        alert('You entered B & 2');
        break;
    }
    break;
  case 1:
    switch(right)
    {
      case 'A':
        alert('You entered 1 & A');
        break;
      case 'B':
        alert('You entered 1 & B');
        break;
      case 1:
        alert('You entered 1 & 1');
        break;
      case 2:
        alert('You entered 1 & 2');
        break;
    }
    break;
  case 2:
    switch(right)
    {
      case 'A':
        alert('You entered 2 & A');
        break;
      case 'B':
        alert('You entered 2 & B');
        break;
      case 1:
        alert('You entered 2 & 1');
        break;
      case 2:
        alert('You entered 2 & 2');
        break;
    }
    break;
  default:
    alert('bad input');
}

Chapter 2 In-Class Demo

Here's the HTML file we used as the demo...

...and here's the accompanying JavaScript...

Notes from Class

You can download the forms demo pages as well as a regex test page here. Another method for extracting data passed to a page is shown below.

 

A JavaScript Gameboy Emulator, Detailed In 8 Parts

"JavaScript has shed its image of being a limited language, tied to DOM manipulation in a browser; in recent years, new engines and frameworks have given JS a reputation as a language capable of bigger things. Mix this in with the new elements of HTML5, and you have the capacity to emulate a game console or other system, with full graphical output. This series of articles looks in detail at how an emulator is written in JavaScript, using the example of the Gameboy handheld: starting at the CPU, and (as of part 8) running a copy of Tetris."

__proto__ Problems

In class on Monday we tried to understand why for our Square object,

this.__proto__ = Rectangle.prototype;

is not equivalent to

this.__proto__ = Rectangle.__proto__;

In fact, the lines both work as they should. Try this yourself: open the page in Chrome and set a watch on square1, rect1 and Rectangle. Note that square1 and rect1 both have their __proto__ property set to Rectangle while Rectangle's __proto__ property is set to the empty function (null, essentially). It does have a prototype property, however, that is set to Rectangle which is why the first line above works while the second fails. The second line of code below causes this.__proto__ to be set to Rectangle.__proto__ which, as we just said, is Empty() and is exactly the behavior we saw during class.