diff options
Diffstat (limited to 'demos/quickstart/protected/pages/Advanced/Scripts1.page')
| -rw-r--r-- | demos/quickstart/protected/pages/Advanced/Scripts1.page | 156 |
1 files changed, 78 insertions, 78 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts1.page b/demos/quickstart/protected/pages/Advanced/Scripts1.page index f11a2f9d..ef0b6317 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts1.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts1.page @@ -6,8 +6,8 @@ Developer Notes for prototype.js</a> by Sergio Pereira. <h2 id="6603">What is that?</h2>
<p>
-In case you haven't already used it, <a href="http://prototype.conio.net">prototype.js</a> is a
- JavaScript library written by <a href="http://www.conio.net">Sam Stephenson</a>.
+In case you haven't already used it, <a href="http://prototype.conio.net">prototype.js</a> is a
+ JavaScript library written by <a href="http://www.conio.net">Sam Stephenson</a>.
This amazingly well thought and well written piece of <b>standards-compliant</b> code takes a lot of
the burden associated with creating rich, highly interactive web pages that characterize the Web 2.0 off your back.
</p>
@@ -20,7 +20,7 @@ In case you haven't already used it, <a href="http://prototype.conio.net">protot </p>
<p>
As you read the examples and the reference, developers familiar with the Ruby
- programming language will notice an intentional similarity between Ruby's
+ programming language will notice an intentional similarity between Ruby's
built-in classes and many of the extensions implemented by this library.
</p>
@@ -32,7 +32,7 @@ In case you haven't already used it, <a href="http://prototype.conio.net">protot </p>
<p>
- Unlike the DOM function, though, this one goes further. You can pass more than one id and
+ Unlike the DOM function, though, this one goes further. You can pass more than one id and
<tt>$()</tt> will return an <tt>Array</tt> object with
all the requested elements. The example below should illustrate this.
</p>
@@ -76,7 +76,7 @@ function test2() <h2 id="6605">Using the <tt>$F()</tt> function</h2>
<p>
- The <tt>$F()</tt> function is a another welcome shortcut. It returns the value of any field input control,
+ The <tt>$F()</tt> function is a another welcome shortcut. It returns the value of any field input control,
like text boxes or drop-down lists. The function can take as argument either the element <tt>id</tt> or the element object itself.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -100,9 +100,9 @@ function test3() into an <tt>Array</tt> object.
</p>
<p>
- This function, combined with the extensions for the Array class,
- makes it easier to convert or copy any enumerable list into an
- <tt>Array</tt> object. One suggested use is to convert DOM
+ This function, combined with the extensions for the Array class,
+ makes it easier to convert or copy any enumerable list into an
+ <tt>Array</tt> object. One suggested use is to convert DOM
<tt>NodeLists</tt> into regular arrays, which can be traversed
more efficiently. See example below.
</p>
@@ -113,8 +113,8 @@ function test3() <option value="8">Callahan, Laura</option>
<option value="1">Davolio, Nancy</option>
</select>
-
-<input type="button" value="Show the options" onclick="showOptions();" />
+
+<input type="button" value="Show the options" onclick="showOptions();" />
<script type="text/javascript">
/*<![CDATA[*/
@@ -134,15 +134,15 @@ function showOptions() <h2 id="6607">Using the <tt>$H()</tt> function</h2>
<p>
- The <tt>$H()</tt> function converts
- objects into enumerable Hash objects that
+ The <tt>$H()</tt> function converts
+ objects into enumerable Hash objects that
resemble associative arrays.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
function testHash()
{
//let's create the object
- var a =
+ var a =
{
first: 10,
second: 20,
@@ -151,22 +151,22 @@ function testHash() //now transform it into a hash
var h = $H(a);
- alert(h.toQueryString());
-
+ alert(h.toQueryString());
+
//displays: first=10&second=20&third=30
}
</com:TTextHighlighter>
<h2 id="6608">Enumerating... Wow! Damn! Wahoo!</h2>
<p>
- We are all familar with for loops. You know, create yourself an array, populate it with
+ We are all familiar with for-loops. You know, create yourself an array, populate it with
elements of the same kind, create a loop control structure (for, foreach, while, repeat, etc,)
access each element sequentially, by its numeric index, and do something with the element.
</p>
<p>
When you come to think about it, almost every time you have an array in your code it
means that you'll be using that array in a loop sooner or later. Wouldn't it be nice
- if the array objects had more functionality to deal with these iterations? Yes, it would,
+ if the array objects had more functionality to deal with these iterations? Yes, it would,
and many programming languages provide such functionality in their arrays or equivalent
structures (like collections and lists.)
</p>
@@ -174,7 +174,7 @@ function testHash() <p>
Well, it turns out that prototype.js gives us the Enumerable
object, which implements a plethora of tricks for us to use when dealing with iterable data.
- The prototype.js library goes one step further and extends the
+ The prototype.js library goes one step further and extends the
<tt>Array</tt> class with all the methods of <tt>Enumerable</tt>.
</p>
@@ -206,7 +206,7 @@ function showList() <com:TTextHighlighter Language="javascript" CssClass="source">
function showList()
-{
+{
var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
simpsons.each( function(familyMember)
{
@@ -216,13 +216,13 @@ function showList() </com:TTextHighlighter>
<p>
You are probably thinking "big freaking deal...just a weird syntax for the same old thing."
- Well, in the above example, yes, there's nothing too earth shattering going on. Afterall,
- there's not much to be changed in such a drop-dead-simple example. But
+ Well, in the above example, yes, there's nothing too earth shattering going on. After all,
+ there's not much to be changed in such a drop-dead-simple example. But
keep reading, nonetheless.
</p>
<p>
Before we move on. Do you see this function that is being passed as an argument
- to the <tt>each</tt> method? Let's start referring to it as an
+ to the <tt>each</tt> method? Let's start referring to it as an
<b>iterator</b> function.
</p>
@@ -247,7 +247,7 @@ function findEmployeeById(emp_id) {
return (employee.value == emp_id);
});
-
+
alert(opt.innerHTML); //displays the employee name
}
/*]]>*/
@@ -259,7 +259,7 @@ function findEmployeeById(emp_id) <option value="1">Davolio, Nancy</option>
</select>
-<input type="button" value="Find Laura" onclick="findEmployeeById(8);" />
+<input type="button" value="Find Laura" onclick="findEmployeeById(8);" />
</com:TTextHighlighter>
<p>
@@ -274,7 +274,7 @@ function showLocalLinks(paragraph) {
paragraph = $(paragraph);
var links = $A(paragraph.getElementsByTagName('a'));
-
+
//find links that do not start with 'http'
var localLinks = links.findAll( function(link)
{
@@ -284,7 +284,7 @@ function showLocalLinks(paragraph) //now the link texts
var texts = localLinks.pluck('innerHTML');
-
+
//get them in a single string
var result = texts.inspect();
alert(result);
@@ -293,13 +293,13 @@ function showLocalLinks(paragraph) </script>
<p id="someText">
- This <a href="http://othersite.com/page.html">text</a> has
- a <a href="#localAnchor">lot</a> of
- <a href="#otherAnchor">links</a>. Some are
+ This <a href="http://othersite.com/page.html">text</a> has
+ a <a href="#localAnchor">lot</a> of
+ <a href="#otherAnchor">links</a>. Some are
<a href="http://wherever.com/page.html">external</a>
and some are <a href="#someAnchor">local</a>
</p>
-<input type=button value="Find Local Links"
+<input type=button value="Find Local Links"
onclick="showLocalLinks('someText')" />
</com:TTextHighlighter>
<p>
@@ -309,21 +309,21 @@ function showLocalLinks(paragraph) <h1 id="6602">Enumerable Functions</h1>
The sample data for the following examples.
<com:TTextHighlighter Language="javascript" CssClass="source">
-var Fixtures =
+var Fixtures =
{
- Products:
+ Products:
[
{name: 'Basecamp', company: '37signals', type: 'Project Management'},
{name: 'Shopify', company: 'JadedPixel', type: 'E-Commerce'},
{name: 'Mint', company: 'Shaun Inman',type: 'Statistics'}
],
- Artist:
+ Artist:
[
- 'As I Lay Dying',
- '36 Crazyfist',
- 'Shadows Fall',
- 'Trivium',
+ 'As I Lay Dying',
+ '36 Crazyfist',
+ 'Shadows Fall',
+ 'Trivium',
'In Flames'
],
@@ -334,11 +334,11 @@ var F = Fixtures; </com:TTextHighlighter>
<h2 id="6609"><tt>Enumerable.each</tt> function</h2>
-<p>I used to find myself writing a lot of for loops. Although,
-Prototype doesn’t by any means eliminate the need to do for loops,
+<p>I used to find myself writing a lot of for loops. Although,
+Prototype does not by any means eliminate the need to do for-loops,
it does give you access to what I consider to be a cleaner, easier to read method in each.
<com:TTextHighlighter Language="javascript" CssClass="source">
-for(var i = 0; i < F.Numbers.length; i++)
+for(var i = 0; i < F.Numbers.length; i++)
{
Logger.info(F.Numbers[i]);
}
@@ -347,7 +347,7 @@ for(var i = 0; i < F.Numbers.length; i++) The <tt>each</tt> function allows us to iterate over these objects Ruby style.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Numbers.each(function(num)
+F.Numbers.each(function(num)
{
Logger.info(num);
});
@@ -363,14 +363,14 @@ F.Numbers.each(function(num) 9
</com:TTextHighlighter>
-<p>The <tt>each</tt> function takes one argument, an <b>iterator</b> function.
-This iterator is invoked once for every item in the array, and that item
-along with the optional index is passed to the iterator. So if
+<p>The <tt>each</tt> function takes one argument, an <b>iterator</b> function.
+This iterator is invoked once for every item in the array, and that item
+along with the optional index is passed to the iterator. So if
we also needed the index we could do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Numbers.each(function(num, index)
+F.Numbers.each(function(num, index)
{
Logger.info(index + ": " + num);
});
@@ -387,11 +387,11 @@ F.Numbers.each(function(num, index) </com:TTextHighlighter>
<h2 id="6610">Hash key/value pairs</h2>
-<p>Hashes can be created by wrapping an Object (associative array) in
+<p>Hashes can be created by wrapping an Object (associative array) in
<tt>$H()</tt> and can have their key/value pairs exposed.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-$H(F.Products[0]).each(function(product)
+$H(F.Products[0]).each(function(product)
{
Logger.info(product.key + ": " + product.value);
});
@@ -406,19 +406,19 @@ We can also directly access the keys and values of a Hash without iterating over </p>
<com:TTextHighlighter Language="javascript" CssClass="source">
$H(F.Products[1]).keys();
-//Outputs name,company,type
+//Outputs name,company,type
$H(F.Products[1]).values();
-//Outputs Shopify,JadedPixel,E-Commerce
+//Outputs Shopify,JadedPixel,E-Commerce
</com:TTextHighlighter>
<h2 id="6611"><tt>Enumerable.collect</tt> function</h2>
-<p>The <tt>collect</tt> function allows you to iterate over an <tt>Array</tt> and return the
-results as a new array. Each item returned as a result of the iteration will be
+<p>The <tt>collect</tt> function allows you to iterate over an <tt>Array</tt> and return the
+results as a new array. Each item returned as a result of the iteration will be
pushed onto the end of the new array.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var companies = F.Products.collect(function(product)
+var companies = F.Products.collect(function(product)
{
return product.company;
});
@@ -431,7 +431,7 @@ Logger.info(companies.join(', ')); <p>You can even join on the end of the block.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-return F.Products.collect(function(product)
+return F.Products.collect(function(product)
{
return product.company;
}).join(', ');
@@ -439,9 +439,9 @@ return F.Products.collect(function(product) <h2 id="6612"><tt>Enumerable.include</tt> function</h2>
-<p>The <tt>include</tt> function allows you to check if a value is included in an array
-and returns true or false depending on if a match was made. Assuming I put
-up a form asking the user to name some artist in my iTunes playlist,
+<p>The <tt>include</tt> function allows you to check if a value is included in an array
+and returns true or false depending on if a match was made. Assuming I put
+up a form asking the user to name some artist in my iTunes playlist,
we could do something like the code below. Prime candidate for some conditional madness.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -450,11 +450,11 @@ return F.Artists.include('Britney Spears'); // returns false <h2 id="6613"><tt>Enumerable.inject</tt> function</h2>
-<p>The <tt>inject</tt> function is good for getting a collective sum from an array of
+<p>The <tt>inject</tt> function is good for getting a collective sum from an array of
values. For instance, to add up all the numbers.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var score = F.Numbers.inject(0, function(sum, value)
+var score = F.Numbers.inject(0, function(sum, value)
{
return sum + value;
});
@@ -463,19 +463,19 @@ Logger.info(score); //Output 161
</com:TTextHighlighter>
-<p>The first argument to <tt>inject</tt> is just an initial value that
+<p>The first argument to <tt>inject</tt> is just an initial value that
would be added to the sum, so if we added 1 instead of 0, the output would be 162.</p>
<h2 id="6614"><tt>Enumerable.findAll</tt> function</h2>
<p>
-When given an Array, the <tt>findAll</tt> function will return an array of
-items for which the iterator evaluated to true. Basically, it allows you to
-build a new array of values based on some search criteria.
-If we wanted to find all products whose type was “E-Commerce”
+When given an Array, the <tt>findAll</tt> function will return an array of
+items for which the iterator evaluated to true. Basically, it allows you to
+build a new array of values based on some search criteria.
+If we wanted to find all products whose type was “E-Commerce”
we could do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var ecom = F.Products.findAll(function(product)
+var ecom = F.Products.findAll(function(product)
{
return product.type == 'E-Commerce';
});
@@ -486,18 +486,18 @@ Logger.info(ecom[0].company + " produces " + ecom[0].name); JadedPixel produces Shopify
</com:TTextHighlighter>
-<p>Note that even if only one match is made, just as in this case,
-the result is still returned as an array. In that case,
+<p>Note that even if only one match is made, just as in this case,
+the result is still returned as an array. In that case,
<tt>ecom.company</tt> would return <tt>undefined</tt>.</p>
<h2 id="6615"><tt>Enumerable.detect</tt> function</h2>
-<p>Unlike the <tt>findAll</tt> function, the <tt>detect</tt> function will only
-return the first item for which the expression inside
-the iterator is true. So, if we wanted to find the first number that
+<p>Unlike the <tt>findAll</tt> function, the <tt>detect</tt> function will only
+return the first item for which the expression inside
+the iterator is true. So, if we wanted to find the first number that
was greater than 5 we’d do something like the code below.
</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
-var low = F.Numbers.detect(function(num)
+var low = F.Numbers.detect(function(num)
{
return num > 5
});
@@ -506,13 +506,13 @@ Logger.info(low); //Outputs 98
</com:TTextHighlighter>
-<p>Even though, there are other numbers above 5 in our array, detect
+<p>Even though, there are other numbers above 5 in our array, detect
only gives us the first match back.</p>
<h2 id="6616"><tt>Enumerable.invoke</tt> function</h2>
-<p>The <tt>invoke</tt> function allows us to pass a method as a string and
-have that method invoked. For instance, if we wanted to sort
+<p>The <tt>invoke</tt> function allows us to pass a method as a string and
+have that method invoked. For instance, if we wanted to sort
our array of artists we’d do something like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -520,7 +520,7 @@ our array of artists we’d do something like this:</p> //Outputs 36 Crazyfist,As I Lay Dying,In Flames,Shadows Fall,Trivium
</com:TTextHighlighter>
-<p>Why not just use <tt>F.Artists.sort</tt>? Well, for the example above
+<p>Why not just use <tt>F.Artists.sort</tt>? Well, for the example above
we could do just that, but here is where <tt>invoke</tt> shines.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -533,8 +533,8 @@ we could do just that, but here is where <tt>invoke</tt> shines.</p> F.Artists.invoke('sort');
</com:TTextHighlighter>
-<p>The reason this will not work is because it is taking each item
-in that array and trying to apply sort to it, thus if we wrote it outright,
+<p>The reason this will not work is because it is taking each item
+in that array and trying to apply sort to it, thus if we wrote it outright,
it would look something like this:</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
@@ -548,8 +548,8 @@ F.Artists.invoke('toLowerCase'); </com:TTextHighlighter>
<p>
-Now, what about passing arguments to the <tt>invoke</tt> function?
-The first argument passed to <tt>invoke</tt> is the method to be invoked,
+Now, what about passing arguments to the <tt>invoke</tt> function?
+The first argument passed to <tt>invoke</tt> is the method to be invoked,
and any other arguments beyond that will be passed as arguments to the invoked method.</p>
<com:TTextHighlighter Language="javascript" CssClass="source">
|