diff options
| author | yois <> | 2007-10-09 01:25:44 +0000 |
|---|---|---|
| committer | yois <> | 2007-10-09 01:25:44 +0000 |
| commit | d479bdcfb9190b54f0396352f2d663a311b140e9 (patch) | |
| tree | befac7b6ba7896c77e1ff44fc02f83cf6e340572 /demos/quickstart/protected/pages/Advanced/es/Scripts.page | |
| parent | 9c8968ed253ef7d2223a023e4a607dddc80c2280 (diff) | |
preparing for Advanced topic translation
Diffstat (limited to 'demos/quickstart/protected/pages/Advanced/es/Scripts.page')
| -rw-r--r-- | demos/quickstart/protected/pages/Advanced/es/Scripts.page | 397 |
1 files changed, 397 insertions, 0 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/es/Scripts.page b/demos/quickstart/protected/pages/Advanced/es/Scripts.page new file mode 100644 index 00000000..7d05b624 --- /dev/null +++ b/demos/quickstart/protected/pages/Advanced/es/Scripts.page @@ -0,0 +1,397 @@ +<com:TContent ID="body" >
+<h1 id="6501">Introduction to Javascript</h1>
+This guide is based on the <a href="http://www.sergiopereira.com/articles/advjs.html">
+Quick guide to somewhat advanced JavaScript tour of some OO features</a> by Sergio Pereira.
+
+<h2 id="6502">Hey, I didn't know you could do that</h2>
+<p id="820693" class="block-content">
+ 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.
+</p>
+<p id="820694" class="block-content">
+
+ 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
+ AJAX phenomena.
+</p>
+<p id="820695" class="block-content">
+ 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.
+</p>
+<p id="820696" class="block-content">
+ 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
+ <a href="http://prototype.conio.net/">Prototype.js</a>,
+ <a href="http://script.aculo.us/">Scriptaculous</a>,
+ <a href="http://moofx.mad4milk.net/">moo.fx</a>,
+ <a href="http://bennolan.com/behaviour/">Behaviour</a>,
+ <a href="http://developer.yahoo.net/yui/">YUI</a>,
+ 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.
+</p>
+
+<p id="820697" class="block-content">
+ The purpose of this article is precisely explaining the types of constructs that
+ many of us are not familiar with yet.
+</p>
+
+
+<h2 id="6503">JSON (JavaScript Object Notation)</h2>
+<p id="820698" class="block-content">
+ JavaScript Object Notation (<a href="http://www.json.org/">JSON</a>,) 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
+ how simple it is.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820233">
+var myPet = { color: 'black', leg_count: 4, communicate: function(repeatCount){
+for(i=0;i<repeatCount;i++) alert('Woof!');} };
+</com:TTextHighlighter>
+
+<p id="820699" class="block-content">
+ Let's just add little bit of formatting so it looks more like how we usually find out there:
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820234">
+var myPet =
+{
+ color: 'black',
+ legCount: 4,
+ communicate: function(repeatCount)
+ {
+ for(i=0;i<repeatCount;i++)
+ alert('Woof!');
+ }
+};
+</com:TTextHighlighter>
+<p id="820700" class="block-content">
+ Here we created a reference to an object with two properties (<tt>color</tt>
+ and <tt>legCount</tt>) and a method (<tt>communicate</tt>.)
+ 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
+ explain better down the line.
+ After the object is created and assigned to the variable <tt>myPet</tt>,
+ we can use it like this:
+</p>
+
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820235">
+alert('my pet is ' + myPet.color);
+alert('my pet has ' + myPet.legCount + ' legs');
+//if you are a dog, bark three times:
+myPet.communicate(3);
+</com:TTextHighlighter>
+<p id="820701" class="block-content">
+ 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.
+</p>
+
+<h2 id="6504">What do you mean? A function is an object too?</h2>
+<p id="820702" class="block-content">
+ 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.
+</p>
+
+<p id="820703" class="block-content">
+ Take a look at this example. We will pass functions to another function that will use them.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820236">
+var myDog =
+{
+ bark: function()
+ {
+ alert('Woof!');
+ }
+};
+
+var myCat =
+{
+ meow: function()
+ {
+ alert('I am a lazy cat. I will not meow for you.');
+ }
+};
+
+function annoyThePet(petFunction)
+{
+ //let's see what the pet can do
+ petFunction();
+}
+
+//annoy the dog:
+annoyThePet(myDog.bark);
+//annoy the cat:
+annoyThePet(myCat.meow);
+</com:TTextHighlighter>
+<p id="820704" class="block-content">
+ Note that we pass myDog.bark and myCat.meow without appending parenthesis
+ <tt>"()"</tt> 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,
+ <tt>undefined</tt> in both cases here.
+</p>
+
+<p id="820705" class="block-content">
+ If you want to make my lazy cat start barking, you can easily do this:
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820237">
+myCat.meow = myDog.bark;
+myCat.meow(); //alerts 'Woof!'
+</com:TTextHighlighter>
+
+<h2 id="6505">Arrays, items, and object members</h2>
+<p id="820706" class="block-content">
+ The following two lines in JS do the same thing.
+</p>
+
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820238">
+var a = new Array();
+var b = [];
+</com:TTextHighlighter>
+<p id="820707" class="block-content">
+ As I'm sure you already know, you can access individual items in an array
+ by using the square brackets:
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820239">
+var a = ['first', 'second', 'third'];
+var v1 = a[0];
+var v2 = a[1];
+var v3 = a[2];
+</com:TTextHighlighter>
+<p id="820708" class="block-content">
+
+ 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.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820240">
+var obj = {}; //new, empty object
+obj['member_1'] = 'this is the member value';
+obj['flag_2'] = false;
+obj['some_function'] = function(){ /* do something */};
+</com:TTextHighlighter>
+<p id="820709" class="block-content">
+ The above code has identical effect as the following:
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820241">
+var obj =
+{
+ member_1:'this is the member value',
+ flag_2: false,
+ some_function: function(){ /* do something */}
+};
+</com:TTextHighlighter>
+
+<p id="820710" class="block-content">
+ 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.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820242">
+obj.some_function();
+obj['some_function']();
+</com:TTextHighlighter>
+
+
+<h2 id="6506">Enough about objects, may I have a class now?</h2>
+<p id="820711" class="block-content">
+
+ 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.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820243">
+//defining a new class called Pet
+var Pet = function(petName, age)
+{
+ this.name = petName;
+ this.age = age;
+};
+
+//let's create an object of the Pet class
+var famousDog = new Pet('Santa\'s Little Helper', 15);
+alert('This pet is called ' + famousDog.name);
+</com:TTextHighlighter>
+<p id="820712" class="block-content">
+ Let's see how we add a method to our <tt>Pet</tt> class. We will be using the
+ <tt>prototype</tt> property that all classes have. The <tt>prototype</tt>
+ property is an object that contains all the members that any object of the class will have.
+ Even the default JS classes, like <tt>String</tt>, <tt>Number</tt>,
+ and <tt>Date</tt> have a <tt>prototype</tt> object that we
+ can add methods and properties to and make any object of that class automatically gain this new member.
+</p>
+
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820244">
+Pet.prototype.communicate = function()
+{
+ alert('I do not know what I should say, but my name is ' + this.name);
+};
+</com:TTextHighlighter>
+<p id="820713" class="block-content">
+ That's when a library like <a href="http://www.sergiopereira.com/articles/prototype.js.html">prototype.js</a> comes in
+ handy. If we are using prototype.js, we can make our code look cleaner (at least in my opinion.)
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820245">
+var Pet = Class.create();
+Pet.prototype =
+{
+ //our 'constructor'
+ initialize: function(petName, age)
+ {
+ this.name = petName;
+ this.age = age;
+ },
+
+ communicate: function()
+ {
+ alert('I do not know what I should say, but my name is ' + this.name);
+ }
+};
+</com:TTextHighlighter>
+
+<h2 id="6507">Functions as arguments, an interesting pattern</h2>
+<p id="820714" class="block-content">
+ If you have never worked with languages that support closures
+ you may find the following idiom too funky.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820246">
+var myArray = ['first', 'second', 'third'];
+myArray.each( function(item, index)
+{
+ alert('The item in the position #' + index + ' is:' + item);
+});
+</com:TTextHighlighter>
+<p id="820715" class="block-content">
+
+ 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.
+</p>
+<p id="820716" class="block-content">
+ 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.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820247">
+function myIterator(item, index)
+{
+ alert('The item in the position #' + index + ' is:' + item);
+}
+
+var myArray = ['first', 'second', 'third'];
+myArray.each( myIterator );
+</com:TTextHighlighter>
+<p id="820717" class="block-content">
+ 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.
+</p>
+
+<h2 id="6508">This is <tt>this</tt> but sometimes <tt>this</tt> is also that</h2>
+<p id="820718" class="block-content">
+
+ One of the most common troubles we have with JS when we start writing our code
+ it the use of the <tt>this</tt> keyword. It could be a real
+ tripwire.
+</p>
+<p id="820719" class="block-content">
+ 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.
+</p>
+<p id="820720" class="block-content">
+ Take this code snippet as an example.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820248">
+function buttonClicked()
+{
+ alert('button ' + this.id + ' was clicked');
+}
+
+var myButton = document.getElementById('someButtonID');
+var myButton2 = document.getElementById('someOtherButtonID');
+myButton.onclick = buttonClicked;
+myButton2.onclick = buttonClicked;
+</com:TTextHighlighter>
+<p id="820721" class="block-content">
+ Because the buttonClicked function is defined outside any object we may tend to
+ think the <tt>this</tt> keyword will contain a reference to
+ the <tt>window</tt> or <tt>document</tt>
+ object (assuming this code is in the middle of an HTML page viewed in a browser.)
+</p>
+
+<p id="820722" class="block-content">
+ But when we run this code we see that it works as intended and displays the <tt>id</tt> of
+ the clicked button. What happened here is that we made the onclick method of each button contain the
+ <tt>buttonClicked</tt> object reference, replacing whatever was there before. Now
+ whenever the button is clicked, the browser will execute something similar to the following line.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820249">
+myButton.onclick();
+</com:TTextHighlighter>
+<p id="820723" class="block-content">
+
+ 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.
+</p>
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820250">
+var myHelper =
+{
+ formFields: [ ],
+ emptyAllFields: function()
+ {
+ for(i=0; i < this.formFields.length; i++)
+ {
+ var elementID = this.formFields[i];
+ var field = document.getElementById(elementID);
+ field.value = '';
+ }
+ }
+};
+
+//tell which form fields we want to work with
+myHelper.formFields.push('txtName');
+myHelper.formFields.push('txtEmail');
+myHelper.formFields.push('txtAddress');
+
+//clearing the text boxes:
+myHelper.emptyAllFields();
+
+var clearButton = document.getElementById('btnClear');
+clearButton.onclick = myHelper.emptyAllFields;
+</com:TTextHighlighter>
+<p id="820724" class="block-content">
+ 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 <tt>this</tt> keyword.
+ The problem is that <tt>this.formFields</tt> is not defined if
+ <tt>this</tt> contains a referece to the button, which is
+ precisely what's happening. One quick solution would be to rewrite our last line of code.
+</p>
+
+<com:TTextHighlighter Language="javascript" CssClass="source block-content" id="code_820251">
+clearButton.onclick = function()
+{
+ myHelper.emptyAllFields();
+};
+</com:TTextHighlighter>
+<p id="820725" class="block-content">
+ That way we create a brand new function that calls our helper method within the helper object's context.
+</p>
+<div class="last-modified">$Id: Scripts.page 1650 2007-01-24 06:55:32Z wei $</div></com:TContent>
\ No newline at end of file |