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 "http://database-programmer.blogspot.com/2007/12/database-skills-complete-contents.html"
>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: "http://database-programmer.blogspot.com/2008/08/advanced-algorithm-sequencing.html"
>Sequencing Dependencies
Update Contact :
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email : Fajarudinsidik@gmail.com
No Wa/Telepon (puat) : 085267792168
No Wa/Telepon (fajar) : 085369237896
Email: Fajarudinsidik@gmail.com
atau Kirimkan Private messanger melalui email dengan klik tombol order dibawah ini :
