jQuery Basics

Below are the basics of jQuery. How to create a simple variable, array, objects and a function.

This is explained by Mike Kamminga (Managing director of W3industries). We had a nice session on some other things but I've considered below is the basic jQuery reference for creating objects, arrays.


// simple variable
var myVar = 'value1';
console.log(myVar); //By having console.log we can check the output of javascript in Console of Chrome


// simple array
var myArray = ['value1','value2'];
console.log(myArray);
console.log(myArray[1]);


// simple object
var myObject = {
key1:'value1',
key2:'value2'
};
console.log(myObject);
console.log(myObject.key2);


// multidimensional array
var myArray2 = ['value1','value2', ['value3','value4']];
console.log(myArray2);
console.log(myArray2[2][0]);
console.log(myArray2.length);


// multidimensional object
var myObject2 = {
key1:'value1',
key2:'value2',
key3:{key4:'value4'}
};
console.log(myObject2);
console.log(myObject2.key3.key4);


// example of object references
var settings = {
width : '100',
height : '200',
img : ['img/img1.jpg']
};
// creating reference (not copy)
var someSettings = settings;
// this overwrites the original
settings.img = ['img/img1.jpg','img/img1.jpg','img/img1.jpg','img/img1.jpg'];
someSettings.img = ['boe'];

console.log('settings');
console.log(settings);
console.log('someSettings');
console.log(someSettings);


// creating an object as a function
var settingsObj = function(){

this.width = '100';
this.height = '200';
this.img = ['img/img1.jpg'];
return this;
}


// instantiating the settingsObj twice (copies)
var mySettings1 = new settingsObj;
var mySettings2 = new settingsObj;

var testSettings = settingsObj();

// give first instance a new value
mySettings1.img = ['img/img1.jpg','img/img1.jpg','img/img1.jpg','img/img1.jpg'];

console.log('mySettings1.img:');
console.log(mySettings1.img);
console.log('mySettings2.img:');
console.log(mySettings2.img);
console.log('testSettings.img:');
console.log(testSettings.img);


// make a function that does a simple calculation
function test(i) {
this.value = 5;
return this.value*i;
}

// store result in a variable
var myTest = test(5);
console.log('myTest: '+myTest);
var myTest2 = test(10);
console.log('myTest2: '+myTest2);





/*
* Binding events to elements
*/

$('#my_button').bind({
click : function(){
console.log('clicked');
},
mouseenter : function(){
console.log('mouseenter');

var my_div = $('<div>This is my div</div>');
$('#container').append(my_div);
my_div.slideUp().fadeIn();

console.log(this);

// binding mouseleave inside mouseenter
// this way I have access to the variable my_div
$(this).bind({
mouseleave : function(){
my_div.fadeOut();
}
});
},
mouseleave : function(){
// binding mouseleave again
console.log('mouseleave');
}
});




// difference between each() and for() and while()
var arraylength = myArray.length;

// for loop
for(i = 0; i < arraylength; i++){
console.log(myArray[i]);
}

// while loop
var k = -1;
while(++k < arraylength){
console.log('testing while:');
console.log(myArray[k]);
}

// each() notiation 1
$(myArray).each(function(key, value){
console.log(key, value);
});

// each() notation 2
$.each(myArray, function(key, some){
console.log(key, some);
});

// jquery notation for array length (length is native JS)
console.log($(myArray).length);

Google map using Javascript

To show the google map in our website using javascript, first we need to register Google map API and need to provide the API key in the below code.

<div id="map" style="width: 400px; height: 300px"></div>

<script type="text/javascript">

<script src="http://maps.google.com/maps?file=api&v=1&key=REGISTERED_API_KEY_HERE" type="text/javascript"></script>
var map = new GMap(document.getElementById("map"));
var point = GPoint(17.0477624,80.0981869);
var address = 'L.B.Nagar | Hyderabad';
var mark = createInfoMarker(point, address);
map.addOverlay(mark);

function createInfoMarker(point, address) {
 var marker = new GMarker(point);
 map.centerAndZoom(point, 3);
 GEvent.addListener(marker, "click",
 function() {
 marker.openInfoWindowHtml(address);
 }
 );
return marker;
}
</script>