Basic of web Page

The Three Layers of the Web

• Content Layer
• Presentation Layer
• Behavior Layer

HTML for Content

<p>Whatever you do, <a href="666.html"><font color="red">
don't click this link</font></a>!</p>

CSS for Presentation

<link rel="stylesheet" href="styles.css" />

JavaScript for Behavior

 <!-- <script type="text/javascript" src="script.js"></script> -->

JavaScript libraries

Programming with JavaScript

Variables for Storing Data

// declaring a variable
var data;

// some data assigned
var data;
data = "Hello World";

//shortened
var data = "Hello World";

Variable Types

Numbers

var whole = 3;

var decimal = 3.14159265;

Strings

var single = 'Just single quotes';
var double = "Just double quotes";

Booleans

var is_okay = true;

var is_keypress = false;

Variable Types(contd..)

Arrays

var rack = [];

var numberArray = [1, 2, 3, 5, 8, 13, 21, 34];
var stringArray = ["Veni", "Vidi", "Vici"];
var mixedArray = [235, "Parramatta", "Road"];

Associative Arrays

var postcodes = [];

postcodes["Armadale"] = 3143;
postcodes["North Melbourne"] = 3051;
postcodes["Camperdown"] = 2050;
postcodes["Annandale"] = 2038;

Conditions

if Statements

var age = 27;

if (age < 15){
    alert("Bob is Student");
}

if-else Statements

if (name == "Maximus"){
    alert("Good afternoon, General.");
}
else{
    alert("You are not allowed in.");
}

Conditions(Contd...)

else-if Statements

if (year == 2007){
    alert("The Bourne Ultimatum");
}
else if (year > 2007){
    alert("The Bourne Legacy");
}
else{
    alert(" Bourne Identity or Supermacy")
}

Loops

while Loops

while (condition){

    //conditional code;

}

do-while Loops

do{

conditional code;

}while (condition);

for Loops

var numbers = [1, 2, 3, 4, 5];

for (var i = 0; i < numbers.length; i++){

numbers[i] *= 2;

}

JQuery

Downloading jQuery

Basics

<!-- html -->

<ul id="notes">
    <li></li>
    <li></li>
    <ul>
        <li></li>
    </ul>
</ul>

$('#notes').find('li');  // [li, li, li]
$('#notes').children('li');  // [li, li]

// parent()
// closest()
// next()
// prev()

Events

<button>Add</button>
<p>Data</p>

$('button').on('click',function(){
    $(this).text('Done');
});

$('button').click(function(){
    $(this).text('Done');
});

Bind, Live, Delegate and On

    //Bind
    $('button').bind('click', function(){
        var cloned = $(this).clone()
        cloned.appendTo('body')
    });
    // Live
    $("button").live("click", function(){
        // do someting
    })

    // Replacement using ON
    $(document).on("click", 'button', function(){
          // gobs of code
    });

    // Delegate 
    $('#context').delegate('button', 'click', function(){
        var cloned = $(this).clone()
        cloned.appendTo('#context')
    });

    // Replacement using ON
    $('#context').on('click', 'button', function(){
         var cloned = $(this).clone()
         cloned.appendTo('#context')
    });

Ajax

Ajax Calls with jQuery

Load()

    var loadUrl = "ajax/load.php";  
    $("#load_basic").click(function(){  
        $("#result").html(ajax_load).load(loadUrl);  
    });

    // Get - Pass parameter
    $("#load_get").click(function(){  
        $("#result")  
            .html(ajax_load)  
            .load(loadUrl, "language=php&version=5");  
    });

    // Post data
    $("#load_post").click(function(){  
        $("#result")  
            .html(ajax_load)  
            .load(loadUrl, {language: "php", version: 5});  
    });

$.getJSON

    $.getJSON(  
        jsonUrl,  
        {q: q},  
        function(json) {  
            // Do something
        }  
     );

$.get()

    $.get(  
            loadUrl,  
            {language: "Ruby", who: 'xyz'},  
            function(responseText){  
                //do something
            },
            "html"
        )

$.post()

    $.post(  
            loadUrl,  
            {language: "Ruby", version: 5},  
            function(responseText){  
                // do Something
            },  
            "html"  
        );

$.ajax()

    $.ajax({
        url: url,
        data: data,
        success: success,
        dataType: dataType
    });