MagicSquare.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Magic Squares</title>

    <style type="text/css">
        h1 { font-size: 1.5em; }
        table, td { border: 1px solid black; }
        td { text-align: center; padding: 4px 6px; }
    </style>

    <script type="text/javascript">
        function get( eid ) {return document.getElementById( eid ); };

        // create, format, and display magic square for valid input
        function doSquare() {
            // get user input and try to convert to integer
            var n = parseInt( get( "N" ).value );
            // test for valid input
            if ( isNaN( n ) ) {
                alert( "square size must be an integer" );
                return;
            }
            if ( 0 > n ) {
                alert( "square size must be positive" );
                return;
            }
            if ( 0 == n%2 ) {
                alert( "square size must be odd" );
                return;
            }
            // for valid (odd, positive) integer, create and display square
            showSquare( getSquare( n ) );
        };

        // apply Loubère's method to fill a magic square
        function getSquare( n ) {
            // create NxN array
            var values = new Array();
            for (var i = 0; i < n; i++) {
                values[i] = new Array();
            }
            var row = 0;            // current row
            var prevRow = row;      // previous row
            var col = Math.floor( n/2 );    // current column
            var prevCol = col;      // previous column
            var last = n*n;         // largest value (number of values)
            // for each value in {1, 2, 3,..., n^2}...
            for (var i = 1; i <= last; i++) {
                // if value already in array position given by row and col,
                // place current value directly below the last one placed
                if ("undefined" != typeof values[ row ][ col ]) {
                    row = prevRow + 1;  // one row lower than last
                    col = prevCol;      // same column as last
                }
                values[ row ][ col ] = i;   // assign value to position
                var prevRow = row;      // record for next iteration
                var prevCol = col;      // record for next iteration
                // default next position is one row up and one column to right
                // - wrap to bottom row and leftmost column for out of bounds
                // index positions
                row -= 1;           // update for next iteration
                if (0 > row) row += n;      // ...correct, if out of bounds
                col += 1;           // update for next iteration
                if (col == n) col = 0;      // ...correct, if out of bounds
            }
            return values;
        };

        // format as HTLM table for display
        function showSquare( values ) {
            var n = values.length;
            var square = "<table>";
            for (var i = 0; i < n; i++) {
                square += "<tr>";
                for (var j = 0; j < n; j++) {
                    square += "<td>" + values[i][j] + "</td>";
                }
                square += "</tr>";
            }
            square += "</table>";
            // add to page
            get( "square" ).innerHTML = square;
        };
    </script>
</head>
<body>
    <form>
        <h1>Magic Squares Generator</h1>
        <p>
            square size (odd integer): <input type="text" id="N" />
            <input type="button" value="draw square" onclick="doSquare();" />
        </p>
    </form>
    <p id="square"></p>
</body>
</html>