Friday, April 1, 2016

JavaScript Basics

Data Types:

1. String - Sequence of characters. e.g. var x= "i love javascript" or var x='i love javascript'
2. Number - 6, 8.0. JavaScript uses floating points to represent numbers. e.g. var n=9.08
    Range: When decimal point is defined: -2e53 to 2e53. When decimal point is defined: -2e31 to        2e31
3. Boolean - true or false. e.g. var happy = true
4. undefined - default value assigned to any variable. e.g.
    var grace;
    console.log(grace); //output will be undefined
5. null - value assigned to a variable by programmer.
    e.g. var frost = "snowy evening";
    var frost=null;
    console.log(frost); //outputs null.


Pattern Matching
---------------------
string has a 'match' function which takes 'pattern' as argument.

pattern can be defined in either of the 2 ways:

A. var patt= /woods/;
B. var patt = new RegExp('woods');

Lets see a complete example:

var  phrase = "whose woods these are, i think i know";

phrase.match(patt);





Part 2 : Model

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-2.2.2.min.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
 <link rel="stylesheet" href="bootstrap.css">
  <title>Document</title>
</head>
<body>
<script>
Person=Backbone.Model.extend({
initialize: function(){
console.log('Object created.');
this.on('change:name',function(){
alert(this.get('name'));
});
},

defaults: {
name:'default',
age:0,
birth:new Date()
},

});

Xunaid = new Person({name:"Xunaid",age:45,nick:"polar bear"});
console.log(Xunaid.get('name')+":"+Xunaid.get('age'));
Xunaid.set('name',"Janeman");

</script>
</body>
</html>

Part 1 : Setting up backbone.js

Download backbone.js from backbonejs.org
Download underscore.js from underscorejs.org
Download jquery.js from jquery.com

Put them all in a folder and create an index.html file with following code:



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-2.2.2.min.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
 <link rel="stylesheet" href="bootstrap.css">
  <title>Document</title>
</head>
<body>
Here goes backbonejs codes..
</body>
</html>