baseJS

i just gone through baseJS API documentation,i found very useful template method and properties.I think they are not in Jquery framework

Example from : http://paularmstrongdesigns.com/projects/basejs/docs/#newtemplate

var myTemplate = new Template(‘#{name} is #{age} years old.’);

var person1 = { name: ‘Jimmy’, age: ’22’ };
var person2 = { name: ‘Janey’, age: ’23’ };

Output
……………………………………………………………………………………
myTemplate.parse(person1); // returns → ‘Jimmy is 22 years old.’
myTemplate.parse(person2); // returns → ‘Janey is 23 years old.

Ref:http://www.greepit.com/2010/07/mobile-javascript-framework-basejs/?goback=.gde_1778847_member_24607596

Beauty of JQuery

by using this concept,we can  access client side ID of server controls easily,hence it will reduce lot of variable declarationin JS. (more..)

AHAH by using JQuery

AHAH stands for Asynchronous HTML and HTTP, as name includes asynchronous, it means we can load html markup without User Experience (UX) interrupt over HTTP.

In common practice, if we want show, some type of summary or details on different pages, we copy past the same html markup on pages. Hence there is no reuse of html markup.

Now come to JQuery, if we required partial or whole html page, we can do by using load command i.e. load (URL, callback) of JQuery.

You can download JQuery from here.

Let’s we have an example as listing below:

STEP 1 Create website project, add JQuery JavaScript file

STEP 2 Add HTMLPage.htm and tow div container as given below:

STEP 3

a. Add default.aspx page and JQuery script reference in default page

b. Insert two div containers in default.aspx page

c. Write JavaScript in default.aspx page

<script language=”javascript” type=”text/javascript”>

$(document).ready(function() {

$(‘#aBoth’).click(function() {

//load whole HTMLpage.htm

$(‘#divContainer’).load(‘HTMLPage.htm’, function() { });

});

$(‘#aContainer-1’).click(function() {

//load divContainer-1′ div Container-1 from  HTMLpage.htm only

$(‘#divContainer’).load(‘HTMLPage.htm #divContainer-1’, function() { });

});

$(‘#aContainer-2’).click(function() {

//load divContainer-2′ div Container-2 from  HTMLpage.htm only

$(‘#divContainer’).load(‘HTMLPage.htm #divContainer-2’, function() { });

});

}

);

</script>

// Test: Browse default.aspx page

a. Click on “Both Containers”

b. Click on “Container-1”

c. Click on “Container-2”

If you have questions related to this blog just write your thoughts.

Thanks for reading!

Rukhsar Ahmad

Beauty of Prototype in JavaScript

Beauty of Prototype in JavaScript:

JavaScript is true object oriented language. JavaScript object is collection of name and values which are known as properties of an object. In JavaScript object we can add property or method at runtime which are not possible in case of class based object oriented language.

All JavaScript object are inherited from PROTOTYPE native object and have prototype property which is reference to internal prototype object. It means whenever we add property to a JavaScript object it gives reference to internal prototype object.

Let’s have an example to know about prototype.

STEP: 1
There are many ways to create an object in JavaScript one of them is:

//Empty funtion hence there is no property
//in javascript function can act as class

var company =function()
{
// You may add properties here
};

STEP: 2

Create two JavaScript functions “addCompanyName” and “getCompanyName” as given below:

function addCompanyName()
{
var objcompany = new company();//create object of company
objcompany.constructor.prototype.CompanyName = “MyCompany”;//add CompanyName property
}

function getCompanyName()
{
var objcompany = new company();
alert(objcompany.CompanyName);
}

STEP: 3

You are just close to test your example.

Create html page and put above JavaScript function in JavaScript section and add anchars with href (Add MyCompany  Company Name
Get Company Name).

Testing Steps:
1. Browse html page
2. Click on “Add MyCompany Company Name”
3. Click on “Get Company Name”, you will get MyCompany alert message.

This is my first blog if you find any mistake please revert back.

Thanks for Reading
Rukhsar Ahmad