Ajax Tutorial » Prototype http://tutorialajax.com Prototype, jQuery and another Ajax tutorials Tue, 11 Nov 2008 14:24:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Compress JavaScript with Gzip http://tutorialajax.com/compress-javascript-with-gzip.html http://tutorialajax.com/compress-javascript-with-gzip.html#comments Fri, 07 Nov 2008 18:45:16 +0000 Admin http://tutorialajax.com/?p=25 The main problem when we are using ajax framework is because of their big size. Of course, it will extremely slow down the sites load time. For example, if we use the standard jQuery, it’s almost 100Kb. It’s even more if we use the complete Prototype and Scriptaculous that will cost around 150Kb.

This is really nightmare for people who still use GPRS or the old 56kbps Dial-Up internet connection. It will takes minutes to load the sites or maybe it will takes forever because the browser usually won’t download it. Unfortunately, it’s very easy to solve this problem. Do you know that we can compress those files and reduce the size by half or more?

There are several method to compress javascript and I think one of the most efficient method is using Gzip Compression.

Gzip

To implement the gzip compression for websites, first we need to gzip the Javascript files. For that purpose, we will need a gzip-compatible archiver / compressor. 7-zip is my favorite because it’s small, very fast and it’s completely free.

Gzip the JavaScript file, change the “gz” extension to “jgz” for safari compatibility and upload it to the same location together with the original script. Then next, we must ask apache to get the compressed version if there is available and finally tell the browser to un-compress the file before it can be used.

To do that, we add these following code in our .htaccess

RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.jgz -f
RewriteRule (.*)\.js$ $1\.js.jgz [L]
AddType "text/javascript" .js.jgz
AddEncoding gzip .jgz

That’s all. Yeah.. And if you want to look for another method this is it.:

No related posts.

]]> http://tutorialajax.com/compress-javascript-with-gzip.html/feed 12 Using Prototype http://tutorialajax.com/using-prototype.html http://tutorialajax.com/using-prototype.html#comments Sat, 02 Aug 2008 19:09:25 +0000 Admin http://localhost/ajax-framework/?p=6
  • Prototype
  • The Prototype $() function
  • Start Using jQuery
    • ]]>     To using prototype, first we must download it. It’s only 1 file named ‘prototype.js‘. It is about 120kb, a bit too large for a website. but don’t worry, because the 120kb will do more… ;) besides that, we can compress it using any packer. I won’t describe how to compress the file here. If you wanna compress the file, you can learn it on “Compressing JavaScript”.

    To use the prototype, first refer to the ‘prototype.js’ as shown below
    <script type="text/javascript" src="prototype.js">
    </script>

    Place it at the <head> tags of your html. Actually you can place it anywhere to use prototype, but It always be good to place it on the head because your pages will look cleaner.

    And the main function in prototype is

    document.observe('dom:loaded' , function() {
    ... -> script code here
    });

    it’s not necessary to include the function if we want to use prototype, but this function guarantee that all the DOM structure has been loaded before the script run. That is a good habid to always use this function.

    The Hello World

    It’s a good idea to start every programming with the ‘hello world’.

    document.observe('dom:loaded' , function() {
    $(document).update("Hello World!!");
    });

    note that we call the sexy function ‘$(document).update‘ to pop out the text. about further of this function, we will learn it together later… by now, this is only ‘Using Prototype‘

    Related posts:

    1. Prototype
    2. The Prototype $() function
    3. Start Using jQuery

    ]]>     http://tutorialajax.com/using-prototype.html/feed 0     The Prototype-CSS $$() function http://tutorialajax.com/the-prototype-css-function.html http://tutorialajax.com/the-prototype-css-function.html#comments Sat, 26 Jul 2008 19:35:37 +0000 Admin http://localhost/ajax-framework/?p=8
  • The Prototype $() function
  • The Form $F() function
    • ]]>     The dollar dollar function is Prototype’s CSS Selector Engine. The ‘$$()’ function returns all css match elements. It was used quite same as the CSS selector. For example, to get all tags with the class “myclass”, we use the following:

    $$(".myclass")

    This function will return the array of elements match the selector string. And We can make the returned elements bold like this:

    $$(".myclass").invoke('setStyle', { fontWeight: bold; })

    Easy as pie…

    Related posts:

    1. The Prototype $() function
    2. The Form $F() function

    ]]>     http://tutorialajax.com/the-prototype-css-function.html/feed 0     The Form $F() function http://tutorialajax.com/the-form-f-function.html http://tutorialajax.com/the-form-f-function.html#comments Fri, 25 Jul 2008 19:41:57 +0000 Admin http://localhost/ajax-framework/?p=9
  • The Prototype-CSS $$() function
  • The Prototype $() function
    • ]]>     the $F() function will returns the value of form element.

    $F("form_element_id")

    Does it need a description anymore??

    Related posts:

    1. The Prototype-CSS $$() function
    2. The Prototype $() function

    ]]>     http://tutorialajax.com/the-form-f-function.html/feed 0     The Prototype $() function http://tutorialajax.com/the-prototype-function.html http://tutorialajax.com/the-prototype-function.html#comments Sun, 20 Jul 2008 19:23:58 +0000 Admin http://localhost/ajax-framework/?p=7
  • The Prototype-CSS $$() function
  • Font Zoomer JavaScript
  • Using Prototype
    • ]]>     The dollar function is one of the Prototype Utility Function. $() is the most frequently used prototype’s function. basically it was used to refer an element in the HTML page. The function is quickly shorthand for getElementById.

    The usual function identifying an element is:
    document.getElementById("element_id")

    The $() function reduces the code to:
    $("element_id")

    For example, you can set the CSS text color with this code:
    $("element_id").style.color = "#ffffff";

    Or, the “Prototype way”:
    $("id_of_element").setStyle({color: '#ffffff'});

    Related posts:

    1. The Prototype-CSS $$() function
    2. Font Zoomer JavaScript
    3. Using Prototype

    ]]>     http://tutorialajax.com/the-prototype-function.html/feed 0     Prototype http://tutorialajax.com/prototype.html http://tutorialajax.com/prototype.html#comments Tue, 20 May 2008 18:24:59 +0000 Admin http://localhost/ajax-framework/?p=5 Prototype is the most popular Ajax framework. It used by many giant-website such : Apple, Gucci, etc… The Prototype JavaScript Framework is a JavaScript framework created by Sam Stephenson. Prorotype is implemented as a single file of JavaScript code “prototype.js”.

    Prototype is also used as the low layer for many framework, for example: script.aculo.us, Rico, ExtJS, Moo.fx, etc. Prototype provides many functions for developing JavaScript web applications. The prorotype features programming shortcuts for accessing element, events, and major functions to deal with Ajax.

    Prototype also feature library functions to support object oriented programming that use classes and ojects, something the JavaScript language hard to implement.

    You can find and download prototype on their site.

    No related posts.

    ]]>     http://tutorialajax.com/prototype.html/feed 0