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';
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"';
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\"";
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;
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
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
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";
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
};
firstname : "John",
lastname : "Doe",
id : 5566
};
You can address the object properties in two ways:
Example
name=person.lastname;
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;
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;
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;
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();
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";
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;
}
{
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;
}
}
{
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");
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;
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
