Javascript variables and datatypes

 JavaScript variables are used to hold values or
expressions
 Rules for JavaScript variable names
 Variable names are case sensitive
 Variable names must begin with a letter or the
underscore character

 Declaring (Creating) JavaScript Variables
 var x;
 var carname;
 Assign values to the variables
 while declaring them
▪ var x=5;
▪ var carname="Volvo";
 With assignment statements
▪ x=5;
▪ carname="Volvo";

 Numbers - are values that can be processed and
calculated - either positive or negative
 Strings - are a series of letters and numbers
enclosed in quotation marks
 Boolean (true/false) - lets you evaluate whether
a condition meets or does not meet specified
criteria
 Null - is an empty value. Null is not the same as 0
 0 is a real, calculable number,whereas null is the
absence of any value.

 Integers
 Decimal (base 10) - A normal integer without a
leading 0 (zero) (ie, 752)
 Octal (base 8) - An integer with a leading 0 (zero)
(ie, 056)
 Hexadecimal (base 16) - An integer with a leading
0x or 0X (ie, 0x5F or 0XC72)

 Floating Point Values - Floating point values
can include a fractional component.
 A floating-point literal includes
▪ A decimal integer plus either a decimal point and a
fraction expressed as another decimal number or an
expression indicator and a type suffix
▪ 7.2945
▪ -34.2
▪ 2e3 means 2 x 103 => 2000
▪ 2E-3 means 2 x 10-3 => .002

 Strings
 Technically, a string literal contains zero or more
characters enclosed, as you know, in single or
double quotes:
▪ "Hello!"
▪ ‘245’
▪ "" // This example is called the empty string

 A JavaScript statements is a command to the
browser.
 The purpose of the command is to tell the
browser what to do.
 document.write("Hello Dolly");

 JavaScript Blocks
 JavaScript statements can be grouped together in
blocks
 Blocks start with a left curly bracket {, and ends
with a right curly bracket }.
 The purpose of a block is to make the sequence of
statements execute together

{
document.write("<h1>This is a header</h1>");
document.write("<p>This is a paragraph</p>");
document.write("<p>This is another
paragraph</p>");
}
</script>

 = is used to assign values
 + is used to add values
y=5;
z=2;
x=y+z;
 The value of x, after the execution of the
statements above is 7.

 Arithmetic operators are used to perform
arithmetic between variables and/or values
+ Addition x=y+2 x=7
- Subtraction x=y-2 x=3
* Multiplication x=y*2 x=10
/ Division x=y/2 x=2.5
% Modulus x=y%2 x=1
++ Increment x=++y x=6
-- Decrement x=--y x=4

 The + Operator Used on Strings
 Used to add string variables or text values
together
txt1="What a very";
txt2="nice day";
txt3=txt1+txt2; txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
"What a verynice day"

txt1="What a very ";
txt2="nice day";
txt3=txt1+txt2;
• or insert a space into the expression:
txt1="What a very";
txt2="nice day";
txt3=txt1+" "+txt2;
"What a very nice day"

 Comparison Operators
== is equal to x==8 is false
=== is exactly equal to (value and type)
!= is not equal x!=8 is true
> is greater than x>8 is false
< is less than x<8 is true
>= is greater than or equal to x>=8 is false
<= is less than or equal to x<=8 is true

if (age<18)
document.write("Too young");

 Logical Operators
&& and (x < 10 && y > 1) is true
|| or (x==5 || y==5) is false
! not !(x==y) is true

 Conditional Operator
 assigns a value to a variable based on some
condition
 Syntax
variablename=(condition)?value1:value2
 Example
greeting=(visitor=="PRES")?"Dear President ":"Dear
";

 Conditional Statements
if (condition)
{
code to be executed if condition is true
}

 Literal values are the ones you type into
mathematical or string expressions
▪ 23 (an integer),
▪ 12.32E23 (a floating point),
▪ 'flopsy the Hamster' (a string)

 Five special characters
b Backspace
f Form Feed
n New Line
r Carriage Return
t Tab

 A function will be executed by an event or by a call to the function
<html>
<head>
function product(a,b)
{
return a*b;
}
</script>
</head>
<body>
document.write(product(4,3));
</script>
</body>
</html>

<html>
<head>
function myfunction(txt)
{
alert(txt);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="myfunction('Hello')" value="Call function">
</form>
<p>By pressing the button above, a function will be called with "Hello" as a parameter. The
function will alert the parameter.</p>
</body>
</html>

 Object used to store multiple values in a
single variable
1:
var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

2:
var myCars=new
Array("Saab","Volvo","BMW");
// condensed array

3:
var myCars=["Saab","Volvo","BMW"];
// literal array

 Access an Array
document.write(myCars[0]);
 Modify Values in an Array
myCars[0]="Opel";

 Join two arrays - concat()
 Join three arrays - concat()
 Join all elements of an array into a string - join()
 Remove the last element of an array - pop()
 Add new elements to the end of an array - push()
 Reverse the order of the elements in an array - reverse()
 Remove the first element of an array - shift()
 Select elements from an array - slice()
 Sort an array (alphabetically and ascending) - sort()
 Sort numbers (numerically and ascending) - sort()
 Sort numbers (numerically and descending) - sort()
 Add an element to position 2 in an array - splice()
 Convert an array to a string - toString()
 Add new elements to the beginning of an array - unshift()

 JavaScript Objects represent self contained
entities consisting of
 Variables (called properties in object
terminology)
 Functions (called methods) that can be used to
perform tasks and store complex data.

 Categories
1. Built-in Objects
2. Custom Objects
3. Document Object

javaobjects.html

 document.write(txt.toUpperCase());
 new Date() // current date and time
 new Date(milliseconds) //milliseconds since
1970/01/01
 new Date(dateString)
 new
Date(year, month, day, hours, minutes, secon
ds, milliseconds)

var myDate=new Date();
myDate.setFullYear(2010,0,14);
var today = new Date();
if (myDate>today)
{
alert("Today is before 14th January 2010");
}
else
{
alert("Today is after 14th January 2010");
}

 Firebug is a powerful extension for Firefox
that has many development and debugging
tools including JavaScript debugger and
profiler
 Venkman JavaScript Debugger (for Mozilla
based browsers such as Netscape
7.x, Firefox/Phoenix/Firebird and Mozilla
Suite 1.x)

 Microsoft Script Debugger (for Internet
Explorer) The script debugger is from the
Windows 98 and NT era
 Microsofts Visual Web Developer Express is
Microsofts free version of the Visual Studio
IDE. It comes with a JS debugger

 JTF: JavaScript Unit Testing Farm
 Collaborative website that enables you to create
test cases that will be tested by all browsers

 Be sure that every "(" is closed by a ")" and
every "{" is closed by a "}“
 case sensitive
 Don't use Reserved Words as variable
names, function names or loop labels
 Escape quotes in strings with a "“
 alert('He's eating food'); should be
alert('He's eating food'); or
alert("He's eating food");

Javascript variables and datatypes

Related slideshows

More Related Content

Javascript variables and datatypes