Professional Java Script for

Web Developers
1

Lecture

Presented By
Daw Khin Chit Bo
 Chapter 3
2

Language Basics
Reviewing syntax
Working with data types
Working with flow-control statements
Understanding functions
 Language Basics
3

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.
The variables lastName and lastname, are two
different variables.
var lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
JavaScript does not interpret VAR or Var as
the keyword var.
 Cont’d
4

Syntax
Case-sensitivity
Identifiers
Comments
Statements
Variables
Data Types
Operators
Functions
 Identifiers
5

is the name of a variable, function, property, or

function argument.
may be one or more character
The first character must be letters, underscore(_), or a
dollar sign ($)
All other characters may be letters, underscores, dollar
signs, or numbers.
 Comments
6

Single-line comment begins with two forward-

slash characters
//single-line comment
A block comment begins with a forward
forward-slash
and asterisk (/*) and ends with the opposite (*/)
/*
This is a multi-line
Comment
*/
 Variables
7

A variable is a name associated with a piece of

data
Variables allow you to store and manipulate data
in your programs
Think of a variable as a mailbox which holds a
specific piece of information
 Variable Names
8

JavaScript is case sensitive

Variable names cannot contain spaces,
punctuation, or start with a digit
Variable names cannot be reserved words
 Variables
9

In JavaScript variables Example:

are created using the
keyword var var x = 10;

var y = 17;

var color = “red”;

var name = “Katie”;

 Example: Variables
10

var x = 4; Ans = x + y;
Ans => 15
var y = 11;
Ans = z + x;
var z = “cat”; Ans => cat4

var q = “17”; Ans = x + q;

Ans => 417
 More Examples
11

var x = 4; Ans = x + y + z;
Ans => 15cat
var y = 11;
Ans = q + x + y;
var z = “cat”; Ans => 17411

var q = “17”;
 Data Types
12

Primitive Data Types

Numbers
Strings
Boolean (True, False)
Composite Data Types
Arrays
Objects
 Primitive Data Types
13

Numbers - A number can be either an integer or

a decimal
Strings - A string is a sequence of letters or
numbers enclosed in single or double quotes
Boolean - True or False
 Arrays
14

An array is a compound data type that stores

numbered pieces of data
Each numbered datum is called an element of the
array and the number assigned to it is called an
index.
The elements of an array may be of any type. A
single array can even store elements of different
type.
 Creating an Array
15

There are several different ways to create an

array in JavaScript
Using the Array() constructor:
- var a = new Array(1, 2, 3, 4, 5);
- var b = new Array(10);
Using array literals:
- var c = [1, 2, 3, 4, 5];
 Accessing Array Elements
16

Array elements are accessed using the [ ]

operator
Example:
var colors = [“red”, “green”, “blue”];
colors[0] => red
colors[1] => green
 Adding Elements
17

To add a new element to an array, simply assign

a value to it
Example:
var a = new Array(10);
a[50] = 17;
 Array Length
18

All arrays created in JavaScript have a special

length property that specifies how many
elements the array contains
Example:
var colors = [“red”, “green”, “blue”];
colors.length => 3
 Programming Tips
19

It is bad practice to change the implicit type of a

variable. If a variable is initialized as a number,
it should always be used as an number.
Choose meaningful variable names
 Programming Tips
20

It is a good idea to end Recommended:

each program statement a = 3;
with a semi-colon; b = 4;
Although this is not Acceptable:
necessary, it will prevent a = 3; b = 4;
coding errors Wrong:
a =
3;
 Statements
21

A statement is a Examples:
section of JavaScript Last_name = “Dunn”;
that can be evaluated x = 10 ;
by a Web browser
y = x*x ;
A script is simply a
collection of
statements
 Operators
22

+ Addition == Equality
- Subtraction != Inequality
* Multiplication ! Logical NOT
/ Division && Logical AND
% Modulus || Logical OR
++ Increment ? Conditional
- - Decrement Selection
Arithmetic Operators and
Unary Operators

23
Assignment Operators

24
Comparison Operators

25
Logical Operators

26
 String Operators and
Conditional27 Operators
The + operator, and the += operator can also be used to
concatenate (add) strings.

The conditional operator assigns a value to a variable

based on a condition.
 Bitwise Operators
28
Bit operators work on 32 bits numbers. Any numeric
operand in the operation is converted into a 32 bit number.
The result is converted back to a JavaScript number.
 Control Structures
29

There are three basic types of control structures

in JavaScript: the if statement, the while loop,
and the for loop
Each control structure manipulates a block of
JavaScript expressions beginning with { and
ending with }
 The If Statement
30

The if statement If ( x = = 10)

allows JavaScript { y = x*x;
programmers to a }
make decision
else
Use an if statement
whenever you come { x = 0;
to a “fork” in the }
program
 The While Statement
31

The while statement

is a pretest loop. count = 0;
The while loop is while (count <= 10)
used to execute a {
block of code while a document.write(cou
certain condition is nt);
true count++;
}
 The do-while Statement
32
The do-while statement
is a post-test loop.
The do/while statement
is used when you want
to run a loop at least
one time, no matter
what.
 The for Statement
33
// Print the numbers 1 i=1 initializes the counter
through 10
Syntax :
i<=10 is the target
for(initialization ;
expression ; post
post-loop-
loop value
espressoin )
{ Statements } i++ updates the
counter at the end
for (i=1; i<= 10; i++) of the loop
document.write(i);
 Example: for Statement
34
<script language= <script language=
"JavaScript"> "javascript">
document.write("1");
document.write("2"); for (i=1; i<=5; i++)
document.write("3");
document.write(i);
document.write("4");
</script>
document.write("5");
</script>
 The for-in Statement
35
The for-in statement is a
strict iterative statement.
It is used to enumerate
the properties of an
object.
 Labeled Statements
36

var cars = ["BMW", "Volvo", "Saab", "Ford"];

var text = "";

list: {
text += cars[0] + "<br>";
text += cars[1] + "<br>";
break list;
text += cars[2] + "<br>"; BMW
text += cars[3] + "<br>"; Volvo
}
 The break and continue Statements
37
var text = ""; var text = "";
var i = 0; var i;
while (i < 5) for (i = 0; i < 5; i++)
{ {
text += "<br>The number is " + i; if (i === 3)
i++; { continue; }
if (i === 3) text += "The number is " + i +
{ "<br>";
break; }
} The number is 0
} The number is 1
The number is 0 The number is 2
The number is 1 The number is 4
The number is 2
 The switch Statement
38
is a part of JavaScript's
"Conditional" Statements,
which are used to perform
different actions based on
different conditions.
is often used together with a
break or a default keyword
(or both).
break : breaks out of the
switch block.
default : specifies some
code to run if there is no case
match.
 Functions
39

functions are objects

have both properties and methods.
can also be defined using an expression
Use the return statement to return a value from the
function
 Cont’d
40

Functions have inputs and outputs

The inputs are passed into the function and are known
as arguments or parameters
 Example: Function
41

function square(x) Name of Function:

{return x*x;} square

z = 3; Input/Argument: x
sqr_z = square(z);
Output: x*x
 Example: Function
42

function sum_of_squares(num1,num2)
{return (num1*num1) + (num2*num2);}

function sum_of_squares(num1,num2)
{return (square(num1) + square(num2));}