Chapter 3 PDF

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(i);
</script>
</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));}

Chapter 3 PDF

Uploaded by

Copyright:

Available Formats

Chapter 3 PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Chapter 3 PDF

Uploaded by

Copyright:

Available Formats

Professional Java Script for

JavaScript is Case Sensitive

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

Single-line comment begins with two forward-

A variable is a name associated with a piece of

JavaScript is case sensitive

In JavaScript variables Example:

var color = “red”;

var name = “Katie”;

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

Primitive Data Types

Numbers - A number can be either an integer or

An array is a compound data type that stores

There are several different ways to create an

Array elements are accessed using the [ ]

To add a new element to an array, simply assign

All arrays created in JavaScript have a special

It is bad practice to change the implicit type of a

It is a good idea to end Recommended:

The conditional operator assigns a value to a variable

There are three basic types of control structures

The if statement If ( x = = 10)

The while statement

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

functions are objects

Functions have inputs and outputs

function square(x) Name of Function:

You might also like