So you know 37 different programming languages, you've programmed moon landers, missiles and toasters, and how could Javascript be any problem? Then you start trying to code up some Javascript and find that it just does not feel right, nothing seems to flow naturally or easily. Your instincts do not seem to guide you. You are not alone, here is your cheatsheet...
Welcome to the Database Programmer blog. If you are trying to write database applications in 2008 then you most likely bump into Javascript. My hope in this week's essay is to provide a "soft landing" into this beautiful and powerful but somewhat strange language.
To see the other essays in this series, consult our Complete Table of Contents.
Contents
Today's essay is rather long. It covers extremely basic ideas but proceeds directly to very powerful techniques. I have provided a summary here so that you can skip over the material that may already be familiar to you.
- Firefox and Firebug
- Execution
- Variable Scope
- Adding Methods to Core Javascript
- Functions as First Class Citizens
- Objects And Classes
- Creating An Object Without A Class
- Accessing Object Properties and Methods
- Iteration
- JSON and Ajax
- Synchronous Ajax: S-JSON
- JQuery and Friends
Start Off: Firefox and Firebug
In case you have been living under a rock for the past few years, let me tell you to do your development in a real web browser, that is, Firefox, and to immediately download the Firebug extension. Firebug more or less does everything you need to debug Javascript, and it has many features you may not even know you need. Do not try to develop Javascript without Firebug.
In particular, firebug has a "console" object that you can send messages to, such as this:
console.log("this is so much better than alert()!");
for(var x = 1; x<10; x++) {
console.log("We are on "+x);
}
Execution
Javascript executes while your page is being loaded, and can be placed anywhere on the page. While I make no claims that the example below is good or bad practice, it does illustrate how Javascript executes.
<html>
<head>
<script>
// Script is executing as it is encountered,
// so this variable comes into existence
// immediately
var x = 5;
function square(x) {
return x * x;
}
// Now that the square function is defined,
// we can call it
var y = square(x);
</script>
</head>
<body>
<h1 id='h1'>Here is a Javascript Example!</h2>
<script>
// Script can be embedded directly in the
// body of your HTML (for better or worse!)
var h1 = document.getElementById('h1');
h1.innerHTML = 'I changed the H1 content!';
// This function can be used anywhere downstream
function changeH1(newText) {
var h1 = document.getElementById('h1');
h1.innerHTML = newText;
}
</script>
</body>
<div>Here is a div of text</div>
<script>
changeH1("Changing H1 yet again!");
</script>
Variable Scope
Scoping in Javascript is pretty straightforward. If you assign a value to a variable outside of any function it becomes a global. If you explicitly define a variable as "window.x = 5" it becomes a global. If you put the keyword var in front of it before using it it becomes local (and can mask a global variable of the same name). You can use the "var" keyword inside of loops, and many javascript programmers use "var" everywhere. Here is an example.
<html>
<head>
<script>
// We are executing outside of a function, so
// both of these are globals:
var x = 5;
y = 10;
function example() {
// Since a global named 'x' exists, and we do
// not use the "var" keyword, we are re-assigning
// the global variable
x = 7;
// Using the "var" keyword makes a local variable,
// we cannot "see" the global x anymore
var x = 2;
alert(x);
// I can still access the global variable to
// set its value back:
window.x = 5;
alert(x);
alert(window.x);
}
</script>
</head>
Adding Methods to Core Javascript
Javascript lacks certain functions that are very useful to have, such as trimming spaces from strings. One very cool thing about Javascript is that you can directly add these methods to the core language, by adding functions to the "prototype" object of the core classes. Here is how you add a "trim" function to core Javascript.
String.prototype.trim = function() {
return this.replace(/^\s+|\s+$/g,"");
}
x = " abc ";
alert('-' + x + '-'); // the dashes let you see the spaces
alert('-' + x.trim() + '-'); // spaces removed!
When I first saw this trick I dutifully copy-n-pasted it in and it worked, but the syntax looked very perplexing, I could not figure out how to make use of it myself. My brain had not yet wrapped itself around the Javascript mentality. This leads directly to our next concept, that functions are "first class cizitens".
Functions as First Class Citizens
You may have heard that Javascript treats functions as "first class citizens" and wondered, "what does that mean?" The best way to explain it in terms of other languages is that you can create functions on the fly and pass them around like variables. This may be a little hard to grasp, so we will go directly to examples.
// Most languages support this type of function definition
function square(x) {
return x * x;
}
// Javascript gives you a slightly different syntax if
// you like, which can be extremely powerful
var square = function(x) {
return x * x;
}
// The books usually go on to an example like this,
// which frankly did not seem to me to have any purpose:
y = x;
alert( y(5) );
The basic idea to get here is that you can do anything with a function that you can do with a variable. There are multiple uses for this, but we have already seen one, namely, the ability to add a method to a previously created class. This is what we did above when we added the "trim()" method to the base "String" class. This means that our approach to building class hierarchies is very different than in other Object-oriented languages like PHP, Foxpro, Delphi, VB and so forth.
// This example shows two different ways to add methods
// to HTML elements and make them act more object-oriented.
// Method 1, make a function that makes an INPUT read-only
// by changing its style and setting a property. Notice
// the code refers to "this" as if it were part of an
// object, see below to see why that works.
function makeReadOnly() {
this.className = 'readOnly';
this.readOnly = true;
}
// Now attach that function to a DOM element (an HTML INPUT)
var input = document.getElementById('myInput');
input.makeReadOnly = makeReadOnly;
// Some other code can now tell the input to go into
// read only mode:
function changeModes() {
var input = document.getElementById('myInput);
// When this executes, the "this" variable in
// the function will refer to "input"
input.makeReadOnly();
}
There is another way to do this as well, that really illustrates how to make use of Javascript's native abilities:
// Method 2 is to defne the function while adding it
// to the INPUT element.
var input = document.getElementById('myInput');
input.makeReadOnly = function() {
this.className = 'readOnly';
this.readOnly = true;
}
// This code works exactly as it did above
function changeModes() {
var input = document.getElementById('myInput);
input.makeReadOnly();
}
Now that we have introduced this idea, it will come up all over the place in later examples.
Objects And Classes
When I first tried to use Javascript I kept looking for the "class" keyword, but it's not there! Believe it or not you use the "function" keyword to create what we would call a class in other languages. Here is an example of how to create and instantiate an object in Javascript:
// Here is a simple PHP class for an
// object that handles a row from a database
class dbRow {
var tableName = '';
var rowId = 0;
function dbRow(tableName,id) {
this.tableId = table;
this.fetchRow(id);
}
function fetchRow(id) {
# ...more code here
}
}
var x = new dbRow('customers',23);
In Javascript we make a function instead of a class:
function dbRow(tableName,id) {
// When the object is instantiated, this
// code runs immediately
this.tableName = tableName;
// We must define a fetchRow function before
// we can actually call it....
this.fetchRow = function(id) {
// some kind of ajax stuff going on here
}
// ...and now we can invoke the function
this.fetchRow(id);
}
// When this command returns we have a new "dbRow"
// object.
var x = new dbRow('customers',23);
Creating An Object Without a Class
We can say Javascript is "purely dynamic", by which we mean you can define anything on the fly, including ojects, even if you have no class definition (er, I mean no "function()" definition...). You can explicitly create an object by enclosing the definition in curly braces. Properties and their values are assigned with "name: value" syntax, separated by commas. Since you can do anything with a function that you can do with a variable, the following is a nifty way to create an object:
var x = {
propertyName: 'value',
otherProperty: 'otherValue',
square: function(x) {
return x * x;
}
// Don't put a comma after the last property!
// It will work in firefox but not in IE!
}
alert(x.square(5));
This syntax is called "JSON" by the way, for "Javascript Object Notation". If you can get comfortable with JSON you can start to code up some really elegant Javascript.
Accessing Object Properties and Methods
You can hardcode references to an object's properties by using the ".property" syntax, but you can also use variables that hold the name of the property.
// Create an object
var x = {
first: 'Sax',
last: 'Russel',
combine: function() {
return this.first + ' ' + this.last;
}
}
// You can now explicitly access properties
alert (x.first);
alert (x.last);
// But you can also have a variable hold the name
// of the property you want:
var propName = 'first';
alert (x[propName]);
// Objects can be nested to any depth, and you can
// mix hardcoded and variable names. If we had a
// complex data dictionary stored on the browser,
// we might get the caption for a column like this:
var tableId = 'customers';
var columnId = 'total_sales';
var caption = dd[tableId].columns[columnId].caption;
This works also for functions. Assuming the same object as the above, we can invoke functions that are named by other variables:
var x = { .... repeated from above example };
var methodName = 'combine';
alert( x[methodName]() );
Iteration
As a database programmer I write a lot of code that iterates arrays and associative arrays. Iteration tends to be very important to database programmers, as it is the most natural way to loop through rows retrieved from a database, or to loop through the values in a row. Basic iteration of an array looks like this:
// make an array
var myList = [ 'sax', 'anne', 'nirgal', 'frank' ];
for(var idx in myList) {
// console.log() requires firebug
console.log("Index and value: "+idx+", "+myList[idx])
}
All of the action is in the line "for(var idx in myList)", this structure will loop through the array. On each pass the variable "idx" will contain the array's index number. To actually get the value you need you have to go looking for myList[idx].
Associate Arrays are a very natural data structure for a database programmer, as they are an easy way to represent a single row retrieved from the database. There is no explicit support for associative arrays in Javascript, but this does not matter because you can use an object and get the same results.
// Here is an object
var myObject = {
first: 'Sax',
last: 'Russel',
occupation: 'Physicist'
}
// Now we loop through it like an associative array
for(var key in myObject) {
console.log("The array key is: " + key);
console.log("The value is: " + myObject[key]);
}
JSON and Ajax
Nowadays everybody is jumping into AJAX with both feet. AJAX can be particularly useful to a database programmer, because you can make AJAX calls that return objects (including code), arrays, and database data.
I should note that the term "AJAX" itself means something very precise, being "Asynchronous Javascript and XML", while the example I am about to show contains no XML, so my use of the term is not strictly correct. Nevertheless, many people routinely use the term AJAX to mean any round-trip to the browser that fetches some fragment of information without doing an entire page refresh. While this is regrettable, I'm not going to try to buck that trend here.
That being said, here is a nifty way to use PHP to send a data structure back on an AJAX request:
# THE PHP CODE:
function someAjaxHandler() {
$table = myFrameworkGetPostRetrievalFunction('table');
$id = myFrameworkGetPostRetrievalFunction('id');
$row = myFrameworkRowRetrievalFunction("customers",23);
# This nifty PHP function encodes arrays and objects
# into JSON, very cool
echo json_encode($row);
}
This would be handled in the browser like so:
function someAjaxResponseHandler() {
if (this.readyState != 4) return;
try {
eval( 'window.requestData ='+this.responseText);
}
catch(e) {
alert("The server response was not parsable JSON!");
return;
}
}
Synchronous AJAX and JSON: S-JSON
It is pretty safe to say that the asynchronous nature of AJAX is a powerful part of its appeal. The request is sent and the browser remains responsive to the user until the request comes back. This is especially powerful for fetching things in the background while the user works.
However, in database applications sometimes it is the Right Thing for the browser to stop while fetching data. If a user clicks on [SAVE] on a CRUD screen to save some changes, we actually want the browser to wait until the server tells them that it all went ok (or not). You can do this by setting a flag on your call. I have found this a very powerful approach to writing desktop-in-browser applications:
function JSON(url) {
// Create an object
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
var http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
var http = new XMLHttpRequest();
}
// The trick is to pass "false" as the third parameter,
// which says to not go asynchronously.
http.open('POST' , url, false);
http.send(null);
// Execution now halts, waiting for the complete
// return value
// Once execution resumes, we can capture the
// JSON string sent back by the server and do anything
// we want with it
try {
eval( 'window.requestData ='+http.responseText);
}
catch(e) {
alert("The server response was not parsable JSON!");
return;
}
// Processing of the result occurs here...
}
jQuery and Friends
Nowadays we have a growing list of very powerful Javascript libraries available. Some of them are very high level and some of them are low-level.
One library I will mention by name as being very useful is jQuery. This library provides a wealth of extremely simple and powerful abilities for finding and manipulating the HTML that is in your document. I highly recommend it.
Closing Thoughts
Any database programmer working in 2008 is either already required to use Javascript or may find himself facing it soon. Javascript is very flexible and powerful, but is different from the languages we are used to for writing applications, like PHP, Foxpro, Delphi, VB and others.
Nevertheless, Javascript can do everything you need it to do, you just have to grasp the "javascript mentality" as it were. I have attempted this week in this essay to put into one place all of the facts and tricks that were not so obvious to me from reading books or simply taking a snippet of code and trying to modify it. I hope that you find it useful!
Next Essay: Sequencing Dependencies
16 comments:
Good stuff ! Thank you ;D
Francois
Minor bug:
this.style.className = 'readOnly';
should be:
this.className = 'readOnly';
anonymous: thanks, its fixed.
Good writing.
Xun: thanks!
It is a fantastic thing. Kudos to you.
antony: Thanks!
Although most (all?) modern frameworks like to implement classes to make Javascript more Java-like (my favourite of the ones I've seen is mootools), I find that doing object-oriented programming in Javascript becomes considerably easier if I disregard class-based inheritance altogether and embrace the object-based principles Javascript was designed around in the first place. See http://www.crockford.com/ for some excellent strategies for doing this.
You can use the "var" keyword inside of loops [...]
With the caveat that the variable you've created isn't local to the loop, sure. Kinda misleading, though--the only blocks with scope in JavaScript are functions.
Thank you, Ken. I will be passing this URL around to my colleagues and students.
-c
This is a good introduction. I'd also recommend Simon Willison's "(Re)-Introduction to JavaScript" is really required reading for anyone really desiring to "get" the language.
Also it's best to reserve the term "JSON" for strictly conforming strings (e.g. no functions allowed); anything else is just an object literal.
BTW, your (other) articles are really helping fill in gaps of my BD knowledge. Thanks!
Everything is an object in JS, so everything is equivalent.
In a dynamic language, this is nirvana. You can make anything, do anything, if you only understand.
Start at Crockford, Douglas. This is a good intro, though.
Javascript: The Definitive Guide is also an excellent resource for C/C++/Java programmers who under best from source code. Knowing how it works makes you smarter.
Also, jQuery is very good primarily due to the examples. As a next step, any JS developer should learn it's ways.
I just loved the Red Mars references :)
@valugi: Very glad you caught the references, most people don't! All of my examples in presentations as well always contain locations such as Echus Overlook, corps such as Praxis. Gives me a kick.
Hey Ken,
Nice lecture. Regarding the AJAX acronym, don't take it too hard that people use it loosely, i.e., when they aren't talking about XML at all. Think of the "X" as standing for, well, $x, as in "whatever."
Do you take requests? Write us a piece about binding in JS. There are some great tutorials already out there but [flattery] you are such a gifted explainer of such stuff...[/flattery]
Such a nice post i have ever seen! These are some great tips! Javascript is really very important to learn these days. Thanks for sharing us the informative post.
Spanish school Costa Rica
Post a Comment