Getting Started with Foobar.js

Including Foobar.js

DOM Manipulation

CSS Styles

Event Handling

Summary

Including Foobar.js

To start using Foobar.js you will need to add the following line in the body tag of your HTML page:

<script type="text/javascript" src="http://foobarjs.com/js"></script>

To include default CSS styles for user interface classes include the following line in the head tag of the HTML page:

<link rel="stylesheet" type="text/css" src="http://foobarjs.com/css" />

This will include the latest stable online version of Foobar.js into your web page. However you may want to download the current version from here and include it in the same way.

After including Foobar.js two global objects Foobar and $ will be created. Both of them are the same. If you're using Foobar.js with other javascript frameworks you might prefer using Foobar object rather than the $. But, in the examples we will be using $. Other objects that Foobar.js has loaded are:

$.document - which is a wrapper to the native document object.
$.document.body - wrapper to the document.body object which is actually the body tag of the HTML page.
and $.document.head - the head tag of the page.

DOM Manipulation

In Foobar.js we either create an HTML element or get them by ID. How we create HTML elements in Foobar.js is:

// create an empty input element
var fooinput = $('input');

// create an input element with some properties
var barinput = $('input', {
    name: 'bar',
    type: 'submit',
    value: 'i am a bar'
});

// create an empty p tag
var p = $('p');

// create an empty div tag
var div = $(); // where has the tag name gone? div is default. no need to specify.

Getting an element by ID:

var mydiv = $('#input');

We append elements to each other or to the body tag using the add method:

var div = $();
var input = $('input');

// let the input tag be a child node of the div tag
div.add(input);

// and let the div tag be a child node of the body tag
$.document.body.add(div);

Most of Foobar.js functions are chainable. This means that if we do not need some elements to be the reference we may create them and append to their parents on the fly. This reduces the number of temporary variables. The previous example can be rewritten with the single statement in the following way:

$.document.body.add(
    $().add( // the div tag
        $('input') // the input tag
    )
);

CSS Styles

With Foobar.js CSS styles can be assigned to an element with a single statement:

// suppose we have a dummy p tag
var dummy = $('p');

// now let's assign a set of css styles to it
dummy.css({
    border: '1px solid red',
    color: 'black',
    textAlign: 'center',
    margin: 5, // look, the integer value is converted to '5px' by Foobar.js
    borderRadius: 4 // look here, cross-browser styles will be added for similar properties
})

// get the current style property? here we go
var color = dummy.css('color'); // gets the current color property

Event Handling

Registering event handlers with Foobar.js is done via on function, Example:

// let's have a dummy p tag with a text
var p = $('p').html('Hover a mouse on me.');

// register a single event handler
dummy.on('click', function (e) {
    // code for click event goes here
    alert('i have been clicked.')
})

// register multiple event handlers
dummy.on({
    mouseover: function () {
        this.html('i have been mouseovered.');
    },
    mouseout: function () {
        this.html('i have been mouseout.');
    }
})

Summary

Summary of the features in conjunction with Foobar.js chainabiliy (and a bit more):

// our first input element
var input1 = $('input', {
    type: 'text'
});

// our second input element
var input2 = $('input', {
    type: 'text'
});

// our output element
var output = $().css({
    color: 'red',
    fontWeight: 'bold'
});

// generate the html dom
$.document.body.add(
    $().add( // a div tag for both inputs to be on the same line
        input1,
        input2
    ),
    $().add(
        $('button').html('Calculate the sum').on('click', function (e) {
            var val1 = +input1.val();
            var val2 = +input2.val();
            // update the output
            output.html(
                val1 + ' + ' + val2 + ' = ' + (val1 + val2)
            )
        })
    ),
    output
);

Foobar.js