Welcome! If you like our Blog so please Follow this blog and also +1 this blog here---->

Monday, 17 September 2012

Pin It

Javascript Tutorial 5: JavaScript Data Types and Objects

JavaScript Data Types

String, Number, Boolean, Array, Object, Null, Undefined.

JavaScript Strings

A string is a variable which stores a series of characters like "John Doe".
A string can be any text inside quotes. You can use simple or double quotes:

Example

var carname="Volvo XC60";
var carname='Volvo XC60';
You can use quotes inside a string, as long as they don't match the quotes surrounding the string:

Example

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
Or you can put quotes inside a string by using the \ escape character:

Example

var answer='It\'s alright';
var answer="He is called \"Johnny\"";
You can access each characters in a string with [position]:

Example

var character=carname[7];
String indexes are zero-based, which means the first character is [0], the second is [1], and so on.

JavaScript Numbers

JavaScript has only one type of number.
Numbers can be with, or without decimals:

Example

var pi=3.14;
var x=34;
The maximum number of decimals is 17.
Extra large or extra small numbers can be written with scientific notation:

Example

var y=123e5;    // 12300000
var z=123e-5;   // 0.00123
JavaScript arithmetic is not 100% accurate:

Example

var x=0.2+0.1;


JavaScript Booleans

Booleans can have only two values: true or false.
var x=true
var y=false
Booleans are often used in conditional testing. You will learn more about conditional testing in a later chapter of this tutorial.

JavaScript Arrays

The following code creates an Array called cars:
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
or (condensed array):
var cars=new Array("Saab","Volvo","BMW");
or (literal array):
var cars=["Saab","Volvo","BMW"];
Array indexes are zero-based, which means the first item is [0], second is [1], and so on.

JavaScript Objects

An object is delimited by curly braces. Inside the braces the object's properties are defined as name and value pairs (name : value). The properties are separated by commas:
var person={firstname:"John", lastname:"Doe", id:5566};
The object (person) in the example above has 3 properties: fistname, lastname, and id.
Spaces and line breaks are not important. Your declaration can span multiple lines:
var person={
firstname : "John",
lastname  : "Doe",
id        :  5566
};
You can address the object properties in two ways:

Example

name=person.lastname;
name=person["lastname"];


Null or Undefined

Non-existing is the value of a variable with no value.
Variables can be emptied by setting the value to null;
cars=null;
person=null;


Declaring Variable Types

When you declare a new variable, you can declare its type using the "new" keyword:
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript Data Types

Almost everything in JavaScript is an Object: String, Number, Array, Function....
In addition, JavaScript allows you to define your own objects.

JavaScript Objects

JavaScript has several built-in objects, like String, Date, Array, and more.
An object is just a special kind of data, with properties and methods.

Objects Properties

Properties are the values associated with an object.
The syntax for accessing the property of an object is:
objectName.propertyName
This example uses the length property of the String object to find the length of a string:
var message="Hello World!";
var x=message.length;
The value of x, after execution of the code above will be:
12

Real Life Illustration

A person is an object.
The persons' properties include name, height, weight, age, skin tone, eye color, etc.
All persons have these properties, but the values of those properties differ from person to person.

Objects Have Methods

Methods are the actions that can be performed on objects.
You can call a method with the following syntax:
objectName.methodName()
This example uses the toUpperCase() method of the String object, to convert a text to uppercase:
var message="Hello world!";
var x=message.toUpperCase();
The value of x, after execution of the code above will be:
HELLO WORLD!

Real Life Illustrated

A person is an object.
The persons' methods could be eat(), sleep(), work(), play(), etc.
All persons have these methods.

Creating JavaScript Objects

With JavaScript you can define and create your own objects.
There are 2 different ways to create a new object:
  • 1. Define and create a direct instance of an object.
  • 2. Use a function to define an object, then create new object instances.

Creating a Direct Instance

This example creates a new instance of an object, and adds four properties to it:
personObj=new Object();
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=50;
personObj.eyecolor="blue";
Alternative syntax (using object literals):

Example

personObj={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};


Using an Object Constructor

This example uses a function to construct the object:

Example

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
The reason for all the "this" stuff is that you're going to have more than one person at a time (which person you're dealing with must be clear). That's what "this" is: the instance of the object at hand.

Adding Methods to JavaScript Objects

Methods are just functions attached to objects.
Defining methods to an object is done inside the constructor function:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;

this.changeName=changeName;
function changeName(name)
{
this.lastname=name;
}
}
The changeName() function assigns the value of name to the person's lastname property.

Now You Can Try:

myMother.changeName("Doe");
JavaScript knows which person you are talking about by "substituting" this with myMother.

Creating JavaScript Object Instances

Once you have a object constructor, you can create new instances of the object, like this:
var myFather=new person("John","Doe",50,"blue");
var myMother=new person("Sally","Rally",48,"green");


Adding Properties to JavaScript Objects

You can add new properties to an existing object by simply giving it a value.
Assume that the personObj already exists - you can give it new properties named firstname, lastname, age, and eyecolor as follows:
personObj.firstname="John";
personObj.lastname="Doe";
personObj.age=30;
personObj.eyecolor="blue";

x=personObj.firstname;
The value of x, after execution of the code above will be:
John
Bilal ahmed Janjua Post Author

Hi. My name is Bilal Ahmed. The Author and the Owner of this blog. I posted daily new Posts about Blogger and Wordpress. So, Stay tuned with me.