- If you are a web developer and come from the same place I do, you have probably - used quite a bit of Javascript in your web pages, mostly as UI glue. + If you are a web developer and come from the same place I do, you have probably + used quite a bit of Javascript in your web pages, mostly as UI glue.
Until recently, I knew that Javascript had more OO capabilities than I was employing, - but I did not feel like I needed to use it. As the browsers started to support a more - standardized featureset of Javascript and the DOM, it became viable to write more - complex and functional code to run on the client. That helped giving birth to the + but I did not feel like I needed to use it. As the browsers started to support a more + standardized featureset of Javascript and the DOM, it became viable to write more + complex and functional code to run on the client. That helped giving birth to the AJAX phenomena.
- As we all start to learn what it takes to write our cool, AJAXy applications, we begin - to notice that the Javascript we used to know was really just the tip of the iceberg. - We now see Javascript being used beyond simple UI chores like input validation and frivolous - tasks. The client code now is far more advanced and layered, much like a real desktop - application or a client-server thick client. We see class libraries, object models, - hierarchies, patterns, and many other things we got used to seeing only in our server + As we all start to learn what it takes to write our cool, AJAX applications, we begin + to notice that the Javascript we used to know was really just the tip of the iceberg. + We now see Javascript being used beyond simple UI chores like input validation and frivolous + tasks. The client code now is far more advanced and layered, much like a real desktop + application or a client-server thick client. We see class libraries, object models, + hierarchies, patterns, and many other things we got used to seeing only in our server side code.
- In many ways we can say that suddenly the bar was put much higher than before. It takes - a heck lot more proficiency to write applications for the new Web and we need to improve + In many ways we can say that suddenly the bar was put much higher than before. It takes + a heck lot more proficiency to write applications for the new Web and we need to improve our Javascript skills to get there. - If you try to use many of the existing javascript libraries out there, like - Prototype.js, - Scriptaculous, - moo.fx, - Behaviour, - YUI, - etc you'll eventually find yourself reading the JS code. Maybe because you want - to learn how they do it, or because you're curious, or more often because that's the - only way to figure out how to use it, since documentation does not seem to be highly - regarded with most of these libraries. Whatever the case may be, you'll face some - kung-fu techniques that will be foreign and scary if you haven't seen anything like + If you try to use many of the existing javascript libraries out there, like + Prototype.js, + Scriptaculous, + moo.fx, + Behaviour, + YUI, + etc you'll eventually find yourself reading the JS code. Maybe because you want + to learn how they do it, or because you're curious, or more often because that's the + only way to figure out how to use it, since documentation does not seem to be highly + regarded with most of these libraries. Whatever the case may be, you'll face some + kung-fu techniques that will be foreign and scary if you haven't seen anything like that before.
- The purpose of this article is precisely explaining the types of constructs that + The purpose of this article is precisely explaining the types of constructs that many of us are not familiar with yet.
@@ -52,12 +52,12 @@ Quick guide to somewhat advanced JavaScript tour of some OO features by SergJavaScript Object Notation (JSON,) is one of the new - buzzwords popping up around the AJAX theme. JSON, simply put, is a way of - declaring an object in javascript. Let's see an example right away and note + buzzwords popping up around the AJAX theme. JSON, simply put, is a way of + declaring an object in Javascript. Let's see an example right away and note how simple it is.
- Here we created a reference to an object with two properties (color - and legCount) and a method (communicate.) + Here we created a reference to an object with two properties (color + and legCount) and a method (communicate.) It's not hard to figure out that the object's properties and methods - are defined as a comma delimited list. Each of the members is introduced by name, followed - by a colon and then the definition. In the case of the properties it is easy, just the value - of the property. The methods are created by assigning an anonymous function, which we will + are defined as a comma delimited list. Each of the members is introduced by name, followed + by a colon and then the definition. In the case of the properties it is easy, just the value + of the property. The methods are created by assigning an anonymous function, which we will explain better down the line. - After the object is created and assigned to the variable myPet, + After the object is created and assigned to the variable myPet, we can use it like this:
@@ -95,13 +95,13 @@ alert('my pet has ' + myPet.legCount + ' legs'); myPet.communicate(3);- You'll see JSON used pretty much everywhere in JS these days, as arguments to functions, + You'll see JSON used pretty much everywhere in JS these days, as arguments to functions, as return values, as server responses (in strings,) etc.
- This might be unusual to developers that never thought about that, but in JS a function is + This might be unusual to developers that never thought about that, but in JS a function is also an object. You can pass a function around as an argument to another function just like you can pass a string, for example. This is extensively used and very handy.
@@ -110,7 +110,7 @@ myPet.communicate(3); Take a look at this example. We will pass functions to another function that will use them.- Note that we pass myDog.bark and myCat.meow without appending parenthesis - "()" to them. If we did that we would not be passing - the function, rather we would be calling the method and passing the return value, + Note that we pass myDog.bark and myCat.meow without appending parenthesis + "()" to them. If we did that we would not be passing + the function, rather we would be calling the method and passing the return value, undefined in both cases here.
@@ -162,7 +162,7 @@ var a = new Array(); var b = [];- As I'm sure you already know, you can access individual items in an array + As I'm sure you already know, you can access individual items in an array by using the square brackets:
- But you are not limited to numeric indices. You can access any member of a JS - object by using its name, in a string. The following example creates an empty + But you are not limited to numeric indices. You can access any member of a JS + object by using its name, in a string. The following example creates an empty object, and adds some members by name.
- In many ways, the idea of objects and associative arrays (hashes) in JS are not + In many ways, the idea of objects and associative arrays (hashes) in JS are not distiguishable. The following two lines do the same thing too.
- The great power of object oriented programming languages derive from the use - of classes. I don't think I would have guessed how classes are defined in JS + The great power of object oriented programming languages derive from the use + of classes. I don't think I would have guessed how classes are defined in JS using only my previous experience with other languages. Judge for yourself.
- Let's see how we add a method to our Pet class. We will be using the - prototype property that all classes have. The prototype - property is an object that contains all the members that any object of the class will have. - Even the default JS classes, like String, Number, - and Date have a prototype object that we + Let's see how we add a method to our Pet class. We will be using the + prototype property that all classes have. The prototype + property is an object that contains all the members that any object of the class will have. + Even the default JS classes, like String, Number, + and Date have a prototype object that we can add methods and properties to and make any object of that class automatically gain this new member.
- That's when a library like prototype.js comes in + That's when a library like prototype.js comes in handy. If we are using prototype.js, we can make our code look cleaner (at least in my opinion.)
- Whoa! Let's explain what is going on here before you decide I've gone too + Whoa! Let's explain what is going on here before you decide I've gone too far and navigate to a better article than this one.
- First of all, in the above example we are using the prototype.js library, which - adds the each function to the Array class. The each function accepts one - argument that is a function object. This function, in turn, will be called once - for each item in the array, passing two arguments when called, the item and the index - for the current item. Let's call this function our iterator function. + First of all, in the above example we are using the prototype.js library, which + adds the each function to the Array class. The each function accepts one + argument that is a function object. This function, in turn, will be called once + for each item in the array, passing two arguments when called, the item and the index + for the current item. Let's call this function our iterator function. We could have also written the code like this.
- But then we would not be doing like all the cool kids in school, right? - More seriously, though, this last format is simpler to understand but causes - us to jump around in the code looking for the myIterator function. It's nice - to have the logic of the iterator function right there in the same place - it's called. Also, in this case, we will not need the iterator function anywhere - else in our code, so we can transform it into an anonymous function without penalty. + But then we would not be doing like all the cool kids in school, right? + More seriously, though, this last format is simpler to understand but causes + us to jump around in the code looking for the myIterator function. It's nice + to have the logic of the iterator function right there in the same place + it's called. Also, in this case, we will not need the iterator function anywhere + else in our code, so we can transform it into an anonymous function without penalty.
- One of the most common troubles we have with JS when we start writing our code - it the use of the this keyword. It could be a real + One of the most common troubles we have with JS when we start writing our code + it the use of the this keyword. It could be a real tripwire.
- As we mentioned before, a function is also an object in JS, and sometimes we - do not notice that we are passing a function around. + As we mentioned before, a function is also an object in JS, and sometimes we + do not notice that we are passing a function around.
Take this code snippet as an example. @@ -331,15 +331,15 @@ myButton2.onclick = buttonClicked;
Because the buttonClicked function is defined outside any object we may tend to - think the this keyword will contain a reference to - the window or document + think the this keyword will contain a reference to + the window or document object (assuming this code is in the middle of an HTML page viewed in a browser.)
But when we run this code we see that it works as intended and displays the id of - the clicked button. What happened here is that we made the onclick method of each button contain the - buttonClicked object reference, replacing whatever was there before. Now + the clicked button. What happened here is that we made the onclick method of each button contain the + buttonClicked object reference, replacing whatever was there before. Now whenever the button is clicked, the browser will execute something similar to the following line.
- That isn't so confusing afterall, is it? But see what happens you start having other + That isn't so confusing afterall, is it? But see what happens you start having other objects to deal with and you want to act on these object upon events like the button's click.
- So you think, nice, now I can click the Clear button on my page and those three text boxes - will be emptied. Then you try clicking the button only to get a runtime error. The error - will be related to (guess what?) the this keyword. - The problem is that this.formFields is not defined if - this containz a referece to the button, which is + So you think, nice, now I can click the Clear button on my page and those three text boxes + will be emptied. Then you try clicking the button only to get a runtime error. The error + will be related to (guess what?) the this keyword. + The problem is that this.formFields is not defined if + this contains a referece to the button, which is precisely what's happening. One quick solution would be to rewrite our last line of code.
-- cgit v1.2.3