diff options
Diffstat (limited to 'demos/quickstart/protected/pages/Advanced/Scripts1.page')
| -rw-r--r-- | demos/quickstart/protected/pages/Advanced/Scripts1.page | 465 |
1 files changed, 0 insertions, 465 deletions
diff --git a/demos/quickstart/protected/pages/Advanced/Scripts1.page b/demos/quickstart/protected/pages/Advanced/Scripts1.page index ef0b6317..7079582a 100644 --- a/demos/quickstart/protected/pages/Advanced/Scripts1.page +++ b/demos/quickstart/protected/pages/Advanced/Scripts1.page @@ -93,469 +93,4 @@ function test3() </script>
</com:TTextHighlighter>
-<h2 id="6606">Using the <tt>$A()</tt> function</h2>
-
-<p>
- The <tt>$A()</tt> function converts the single argument it receives
- 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
- <tt>NodeLists</tt> into regular arrays, which can be traversed
- more efficiently. See example below.
-</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-<select id="lstEmployees" size="10" >
- <option value="5">Buchanan, Steven</option>
- <option value="8">Callahan, Laura</option>
- <option value="1">Davolio, Nancy</option>
-</select>
-
-<input type="button" value="Show the options" onclick="showOptions();" />
-
-<script type="text/javascript">
-/*<![CDATA[*/
-function showOptions()
-{
- var someNodeList = $('lstEmployees').options;
- var nodes = $A(someNodeList);
-
- nodes.each(function(node)
- {
- alert(node.nodeName + ': ' + node.innerHTML);
- });
-}
-/*]]>*/
-</script>
-</com:TTextHighlighter>
-
-<h2 id="6607">Using the <tt>$H()</tt> function</h2>
-<p>
- 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 =
- {
- first: 10,
- second: 20,
- third: 30
- };
-
- //now transform it into a hash
- var h = $H(a);
- alert(h.toQueryString());
-
- //displays: first=10&second=20&third=30
-}
-</com:TTextHighlighter>
-
-<h2 id="6608">Enumerating... Wow! Damn! Wahoo!</h2>
-<p>
- 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,
- and many programming languages provide such functionality in their arrays or equivalent
- structures (like collections and lists.)
-</p>
-
-<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
- <tt>Array</tt> class with all the methods of <tt>Enumerable</tt>.
-</p>
-
-<a name="Loops"></a>
-<h3 id="6617">Loops and iterator</h3>
-<p>
- In standard javascript, if you wanted to sequentially display the elements of an array,
- you could very well write something like this.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-<script type="text/javascript">
-/*<![CDATA[*/
-function showList()
-{
- var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
- for(i=0; i < simpsons.length; i++)
- {
- alert(simpsons[i]);
- }
-}
-/*]]>*/
-</script>
-
-<input type="button" value="Show List" onclick="showList();" />
-</com:TTextHighlighter>
-<p>
- With our new best friend, prototype.js, we can rewrite this loop like this.
-</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-function showList()
-{
- var simpsons = ['Homer', 'Marge', 'Lisa', 'Bart', 'Meg'];
- simpsons.each( function(familyMember)
- {
- alert(familyMember);
- });
-}
-</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. 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
- <b>iterator</b> function.
-</p>
-
-<h3 id="6618">Your arrays on steroids</h3>
-
-<p>
- Like we mentioned above, it's very common for all the elements in your array to be of
- the same kind, with the same properties and methods. Let's see how we can take advantage
- of iterator functions with our new souped-up arrays.
-</p>
-<p>
- Finding an element according to a criteria.
-<p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-<script type="text/javascript">
-/*<![CDATA[*/
-function findEmployeeById(emp_id)
-{
- var listBox = $('lstEmployees')
- var options = $A(listBox.options);
- var opt = options.find( function(employee)
- {
- return (employee.value == emp_id);
- });
-
- alert(opt.innerHTML); //displays the employee name
-}
-/*]]>*/
-</script>
-
-<select id="lstEmployees" size="10" >
- <option value="5">Buchanan, Steven</option>
- <option value="8">Callahan, Laura</option>
- <option value="1">Davolio, Nancy</option>
-</select>
-
-<input type="button" value="Find Laura" onclick="findEmployeeById(8);" />
-</com:TTextHighlighter>
-
-<p>
- Now let's kick it up another notch. See how we can filter out
- items in arrays, then retrieve just a desired member from each
- element.
-<p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-<script type="text/javascript">
-/*<![CDATA[*/
-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)
- {
- var start = link.href.substring(0,4);
- return start !='http';
- });
-
- //now the link texts
- var texts = localLinks.pluck('innerHTML');
-
- //get them in a single string
- var result = texts.inspect();
- alert(result);
-}
-/*]]>*/
-</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
- <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"
- onclick="showLocalLinks('someText')" />
-</com:TTextHighlighter>
-<p>
- It takes just a little bit of practice to get completely addicted to this syntax.
- Next we will go through the available functions with the following example.
-</p>
-<h1 id="6602">Enumerable Functions</h1>
-The sample data for the following examples.
-<com:TTextHighlighter Language="javascript" CssClass="source">
-var Fixtures =
-{
- Products:
- [
- {name: 'Basecamp', company: '37signals', type: 'Project Management'},
- {name: 'Shopify', company: 'JadedPixel', type: 'E-Commerce'},
- {name: 'Mint', company: 'Shaun Inman',type: 'Statistics'}
- ],
-
- Artist:
- [
- 'As I Lay Dying',
- '36 Crazyfist',
- 'Shadows Fall',
- 'Trivium',
- 'In Flames'
- ],
-
- Numbers: [0, 1, 4, 5, 98, 32, 12, 9]
-};
-
-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 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++)
-{
- Logger.info(F.Numbers[i]);
-}
-</com:TTextHighlighter>
-<p>
-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)
-{
- Logger.info(num);
-});
-
-//Output
-0
-1
-4
-5
-98
-32
-12
-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
-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)
-{
- Logger.info(index + ": " + num);
-});
-
-//Output
-0: 0
-1: 1
-2: 4
-3: 5
-4: 98
-5: 32
-6: 12
-7: 9
-</com:TTextHighlighter>
-
-<h2 id="6610">Hash key/value pairs</h2>
-<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)
-{
- Logger.info(product.key + ": " + product.value);
-});
-
-//Outputs
-name: Basecamp
-company: 37signals
-type: Project Management
-</com:TTextHighlighter>
-<p>
-We can also directly access the keys and values of a Hash without iterating over it.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-$H(F.Products[1]).keys();
-//Outputs name,company,type
-
-$H(F.Products[1]).values();
-//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
-pushed onto the end of the new array.</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-var companies = F.Products.collect(function(product)
-{
- return product.company;
-});
-
-Logger.info(companies.join(', '));
-
-// Outputs
-// 37signals, JadedPixel, Shaun Inman
-</com:TTextHighlighter>
-
-<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 product.company;
-}).join(', ');
-</com:TTextHighlighter>
-
-<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,
-we could do something like the code below. Prime candidate for some conditional madness.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-return F.Artists.include('Britney Spears'); // returns false
-</com:TTextHighlighter>
-
-<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
-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)
-{
- return sum + value;
-});
-
-Logger.info(score);
-//Output 161
-</com:TTextHighlighter>
-
-<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”
-we could do something like the code below.
-</p>
-<com:TTextHighlighter Language="javascript" CssClass="source">
-var ecom = F.Products.findAll(function(product)
-{
- return product.type == 'E-Commerce';
-});
-
-Logger.info(ecom[0].company + " produces " + ecom[0].name);
-
-//Outputs
-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,
-<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
-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)
-{
- return num > 5
-});
-
-Logger.info(low);
-//Outputs 98
-</com:TTextHighlighter>
-
-<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
-our array of artists we’d do something like this:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-[F.Artists].invoke('sort')
-//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
-we could do just that, but here is where <tt>invoke</tt> shines.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-[F.Artists, F.Letters].invoke('sort');
-//Outputs 36 Crazyfist,As I Lay Dying,In Flames,...
-</com:TTextHighlighter>
-<p>So we invoked sort for each sub-array. Note that the code below will not work.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-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,
-it would look something like this:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-"36 Crazy Fists".sort();
-</com:TTextHighlighter>
-<p>We could however do something like this:</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Artists.invoke('toLowerCase');
-//Outputs 36 crazyfist,as i lay dying,in flames,shadows ...
-</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,
-and any other arguments beyond that will be passed as arguments to the invoked method.</p>
-
-<com:TTextHighlighter Language="javascript" CssClass="source">
-F.Artists.invoke('concat', " is awesome ")
-//Outputs
-36 Crazyfist is awesome ,As I Lay Dying is awesome ,...
-</com:TTextHighlighter>
-
</com:TContent>
\ No newline at end of file |