Tag Archives: javascript

CSV to JSON-P, a Javascript Array converter in awk

Instead of converting a CSV in to JSON it is sometimes more convenient to convert a CSV to a Javascript Array with Awk.

To import word vectors from word2vec into Javascript I used a quick awk script to add the syntactic sugar to make an array of objects :

now the array can be used in javascript. This is called JSON-P, CSV to Javscript import.

JSON-P is good because: the data is ready for use by scripts with no additional steps. The MIME type is text/javascript just include it as a script tag in html and the data is ready. Make the type file .js for maximum compatibility.

<script type=”text/javascript” src=”vectors.js”></script>

including JSON files & Javascript in HTML

JSON – Javascript Object Notation is convenient data format – based on javascript syntax.

How to read it into Javascript is another matter. From Wikipedia :

“The official MIME type for JSON text is “application/json“.[15] Although most modern implementations have adopted the official MIME type, many applications continue to provide legacy support for other MIME types. Many service providers, browsers, servers, web applications, libraries, frameworks, and APIs use, expect, or recognize the (unofficial) MIME type “text/json” or the content-type “text/javascript“.”

var my_JSON_object;
var http_request = new XMLHttpRequest();
http_request.open("GET", url, true);
http_request.onreadystatechange = function () {
    var done = 4, ok = 200;
    if (http_request.readyState == done && http_request.status == ok) {
        my_JSON_object = JSON.parse('''http_request.responseText''');
    }
};
http_request.send(null);

after tearing your hair out why not just use JSON-P – works everywhere instantly.

 

 

Javascript and Canvas – how to program interactive art and html5 games in the browser

Javascript is a wonderful programming language that runs in every web browser.

<canvas> is an HTML5 element for drawing interacive graphics.

<canvas width=”320″ height=”240″ id=”gameboard1″></canvas>

The id is used by the javascript to get a reference to the canvas in 2 steps – get the element using the id then get the 2d context to draw on – then the fun begins !

<script type=”text/javascript”>
var board=document.getElementById(“gameboard1”);
var game_screen=board.getContext(“2d”);
game_screen.fillStyle=”#FF0000″;
game_screen.fillRect(0,0,150,75);
</script>

Test it. Example & The source code.

The two combine pleasantly to make nearly anything you could imagine.

The Khan Academy teaches computer science using javascipt and processing.js – processing is a library used to simplify interactive graphics widely used by artists for graphics and interactivity.

2 gentle canvas and javascript tutorials for mouse and keyboard interactive game programming in javascript :
breakout clone
dragable objects