Programming Languages Comparison

Programming languages are alike. If you know how to program in one language changes are you know how to program in other languages. However the only difference is the syntax. I always wanted a chart that showed this and I finally found it hyperpolyglot.org.

Example: Small Javascript library

In jQuery you can call a function like $.ajax() and insert an object inside of it and each property does an action. Below I have simplified an example to demonstrate how this works.

    //create the library 
    var lib = {
        sum: function(num){     //create a method
            var num1 = num.a;   
            var num2 = num.b;
            this.result = num1 + num2; 
        },
        table: 'table'      //this is a random property, its not necessary 
    }
    
    //call a method and create an object inside of it to send data to the library
    lib.sum({ 
        a : 1,  //these are the properties that will be processed
        b : 4
    });
    alert(lib.result); //output 5
    
    
    
    //above is similar to the jQuery AJAX below
     $("#input").keyup(function(){  
        var data = $('#input').val();  
        $.ajax({  
            url:"models/post.php",  //these are the properties that will be processed
            type: "post",  
            data: ({name:data, age:'15'}),  
            success:function(result){$(".result").html(result);}  
        });  
    });  

jQuery Deconstructed is a rather nice way to look through the source. You will learn alot by studying it.

Web Charts - PHP and Javascript

pChart.net and jqPlot.com are two different libraries that allow you as a web developer create beautiful charts and graphs.

jqPlot is a javascript library that uses jQuery. jqPlot is great because it can pull data directly from multiple mediums such as csv, txt, json and so on. However it sucks because different charts may need different plugin files and you need to make sure the right script is included, but its still simple.

pChart is a PHP libray that uses its GD library. You may need to configure your php depending if this library is installed or not. pChart is a object oriented class that creates an image of a chart on the webpage. The webpage becomes an image which will not let you output any html. The only way you can link to the chart is by using <img> or <iframe> tag. Whats great is that you can create an image that can be save but what sucks is that you may not be able to use AJAX and it takes a huge load on your CPU.

Example: JSON

WARNING!! Do not test it in Chrome it will not work. Only live.

JSON: is used for data storage and can be an alternative to XML.

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script>
window.onerror = function(a,b,c){alert(a+b+c);} //if error alert
$(document).ready(function(){
     //Short hand
    $('button').click(function(){
        $.getJSON("info.js", function(json) {    
           alert(json.name[1].first) 
        });
    
    //Long
        $.ajax({
        async: false,
        url: 'info.js',
        dataType:'json',
        success: function(json) {
            ret = json.name[1].first;
        }
    });
    });
});
</script>

<p>hello</p>
<button>Click Me</button>

JSON (info.js) - everything must have double quotes except numbers. You cannot comment in JSON. It has to look like the example below and it has to be in object/brackets {}

{
"name" : [{"first" : "Britney", "last":"Spears"}, 
          {"first" : "Angelina", "last":"Jolie"}],
"age" : 25
}

Setting the input className to the object value

The code below creates and set the value of the object when filling out a form. This can be used for POST or GET method request.

<input type="text" class="balls" />
<input type="text" class="bat" />
<script>
var stat = {
   data: {date: '2011-02-01', type: 'balls'},
   column: //sets the value to stat.data 
       function(){
           $('input').focusout(function () {
               var attr = $(this).attr("class");//get the attribute (className) of tag
               //create and set value for the object
               stat.data[attr] = $(this).val(); //set value to stat.data 
           });
       }() //this autostarts the function 
}
<script/>

From locahost/stats website

jQuery AJAX .load()

jQuery AJAX is wonderfully powerfull. The more I use it the more I like it. Its very simple compared to the pure AJAX javascript code. jQuery has a couple of different AJAX syntax but the simplest is the .load(). Choose which element you want to target and which location/file you want to pull content from. Barabam AJAX.

Example:
$('div').load('test.html');
Above changes the div tag in current page to the test.html

One cool feature is the ability to pull a selected portion of the location by having a space after the location name and specifying the part.

Example:
$('div').load('test.html #content');
Above changes the div tag in current page to the test.html where the id equals "content"

More information check .load() – jQuery API

Frameworks

Don't reinvent the wheel. Below are frameworks that allow you to code without having to start from scratch.

HTML - Boilerplate

PHP - CodeIgniter

CSS - Twitter Bootsrap

CSS structure - 960

Javascript - jQuery