(Web Development Lesson 7)
•
Everything that JavaScript manipulates,
it treats as an object –
e.g. a window or a button
•
An object has
properties –
e.g. a window has size, position, status,
etc.
•
An object can be manipulated with
methods
that are associated with that object
–
e.g. a resize a
window with resizeTo(150, 200)
Object
: A
named
collection of properties (data, state) &
methods (instructions, behavior)
Types of Objects
•
JavaScript objects
–
Objects that are part of JavaScript
–
Examples: window, document
•
Browser objects
–
Objects that contain info
not
about the contents of the display, but the browser itself
–
Examples: history, navigator
•
User-defined object
•
JavaScript is not a true object-oriented language
like C++ or Java
•
It is so because it lacks two key features:
–
A formal inheritance mechanism
–
Strong typing
During the last lecture
we had a discussion on Objects, Properties, Methods
prop 1
prop 2
prop 5
name
prop 3
prop 4
A collection of
properties &
methods
All objects have the
“name” property: it
holds the name of
the object (collection)
•
Nevertheless, JavaScript shares many similarities
with object-oriented languages, and therefore is
called an object-based language
21.1 JavaScript Data Types
Unlike in C, C++ and Java, there
are no explicit data types in JavaScript
Nevertheless, it recognizes & distinguishes among the following types of
values:
Numbers, e.g., 23, 4.3, -230, 4.4e-24
Booleans, e.g., true, false
Strings, e.g., “hello”, “What’s the time?”
Undefined
We’ll comeback to these data types, but before that we have to have to
define a few new terms
First, variables:
Variables
Variables give us the ability to
manipulate data through reference instead of actual value.
Variables are names assigned to values.
Variables are containers that hold values (Example: Hotel guest name,
Guest room no).
Generally, the value of a variable varies during code execution (that is
why the term “variable.
Example
Try Doing the Same Without Using A
Variable
Another Situation
x = 1;
while (x < 6000) {
document.write (x);
x = x + 1;
}
21.2
Declaring Variables
Many languages require that a
variable be declared (defined) before it is first used
Although JavaScript allows variable declaration, it does not require it
- except in the case when we want
to declare a variable being local (more on local variables later in the
course!)
However, it is good programming practice to declare variables before
using them
Declaring Variables
var height
var name, address, phoneNumber
JavaScript Variables are
Dynamically Typed
x = 1;
while (x < 6) {
document.write (x);
x = x + 1;
x is a
}
variable
document.write (“1”); document.write (“2”);
document.write (“3”); document.write (“4”);
document.write (“5”);
5 lines of code
replacing 5 lines
of code!
Why use
variables?
Any variable in JavaScript can
hold any type of value, and that type can change midway through the
program.
This is unlike the case for C, C++ and Java, where a variable’s type is
defined before usage.
The untyped feature makes JavaScript simpler to program in when
developing short programs.
However, this feature brings in a few problems as well. Can you describe
any?
Identifiers
Identifiers are names used by JavaScript to refer to variables (as well
as objects, properties, methods,
and functions!)
An identifier must begin with an alphabetical character (a-z or A-Z) or
the underscore “_” character
Subsequent characters can be an alphabetical (a-z or A-B) or numeric
character (0-9) or an underscore
numberOneUniversity
,N99umber_one_University
JavaScript Variables are Dynamically Typed
var sum ;
sum = 43 ;
sum = “empty” ;
Identifiers
•
Identifiers are names used by JavaScript to refer
to variables (as well as objects,
properties, methods, and functions!)
•
An identifier must begin with an alphabetical
character (a-z or A-Z) or the
underscore “_” character
•
Subsequent characters can be an alphabetical (a-z
or A-B) or numeric character (0-9)
or an underscore
numberOneUniversity ,N99umber_one_University
_5numberoneuniversity,x,reallyReallyLongIndentifier12345678901234
Another Restriction on Identifiers
•
Do not use any of the JavaScript keywords as
identifiers
•
For example, do not name a variable as “while”.
When the browser sees this term in
JavaScript code, it will get confused as it already knows this keyword
as part of a loop
statement. Same is the case for “var” or “if” or any of the other
keywords.
JavaScript (Java) Reserved Words
Names that can’t be used for variables, functions, methods, objects
_5numberoneuniversity,x,reallyReallyLongIndentifier12345678901234
Another Restriction on Identifiers
Do not use any of the JavaScript
keywords as identifiers
For example, do not name a variable as “while”. When the browser sees
this term in JavaScript code, it
will get confused as it already knows this keyword as part of a loop
statement. Same is the case for
“var” or “if” or any of the other keywords.
JavaScript (Java) Reserved Words
ames that can’t be used for variables, functions, methods, objects
Avoid These Special Names As Well (1)
Names that should not be used for variables, functions, methods, objects
document defaultStatus clearTimeout
prototype ref parent scroll taint
netscape Object Math onerror untaint
history isNaN Frame JavaArray Self
closed Date blur Document onload
unescape valueOf sun window JavaObject
prompt Radio Packages Reset Element
navigator Number location onblur Select
History Image Form java onfocus
close confirm assign Window JavaClass
function char int try final
native
double
true
long
do
transient
interface
default
throws finally
????
while
package
false
void
null
extends
var
new
else
synchronized implements
break switch continue
return private throw
for catch instanceof
Boolean super const
public if this
float case in
abstract static class
protected goto with
finally byte import
Identifiers appear in
JavaScript statements
Let us now discuss a few other
elements that appear in those statements
Elements of JavaScript Statements
b = 2 ;
sum = sum + 49 ;
name = “Kim” + “ Continental” ;
x = Math.floor ( x )
Identifiers
Operators
Literals
Punctuation
JavaScript Literals
A data value that appears directly
in a statement
Literals can be of several types. Some of them are:
Number
String
Boolean
Numeric Literals
24,-230000000000000000,9.80665,1.67e-27,
JavaScript stores all numbers,
even integers, as floating-point numbers
String Literals
“” , ’‘Kim” , “Where is the Kim
Continental Hotel?”
String literals are always
enclosed in a matching pair of single or double quotes
Boolean Literals
True, false ,
if ( tankFull == false)
addMoreWater = true
JavaScript Operators
Operators operate on operands to
achieve the desired results
JavaPackage taint Textarea toString
open Option parent parseInt Plugin
length Location Math name Navigator
eval focus Frame Function Hidden
Anchor Array blur Button Submit
setTimeout String sun Text top
onunload opener Packages parseFloat Password
status Link location MimeType navigate
escape FileUpload Form frames getClass
alert Area assign Boolean Checkbox
JavaScript has numerous operators,
classified in many categories. We will look at only a few of them
belonging to the following categories:
Assignment operators -- Arithmetic operators
Comparison operators -- String operators
Logical operators
We’ll look at a few more during future lectures, but understand that
there are many more. Even you text
book does not cover all of them!
Assignment Operator “=”
Changes the value of what is on the LHS, w.r.t. what is on the RHS
total_number_of_students = 984 ;
title = “Understanding Computers” ;
swapFlag = false ;
x = y + 33 ;
Arithmetic Operators
Multiply 2 * 4 →
8
Divide 2 / 4 →
0.5
Modulus 5 % 2 →
1
Add 2 + 4 →
6
Subtract 2 - 4 →
-2
Negate -(5) →
-5
21.4 Comparison Operators
The “equal to (==)” Comparison
Operator
if ( today == “Sunday” )
document.write(“The shop is closed”);
The string “The shop is closed”
will be written to the document only if the variable today has a value
equal to “Sunday”
Comparison Operators
a == b True if a and b are the same
a != b True if a and b are not the same
a > b True if a is greater than b
a >= b True if a is greater than or equal to b
a < b True if a is less than b
a <= b True if a is less than or equal to b
Example
if ( x != 0 )
result = y / x;
else
result = “not defined”;
Logical Operators
a && b AND True if both are true
a || b OR True of either or both are true
!a NOT True if a is false
The “AND (&&)” Logical Operator
if ( (pitch == “hard”) &&
(bowler == “fast”) )
myStatus = “Pulled muscle”;
The value of the variable
myStatus will be set to “Pulled muscle” if both of the conditions are
true
Example
Not the same as the
assignment “=” operator
if ( x || y )
document.write (“Either or both are true”);
else
document.write (“Both are false”);
So far we have looked at the assignment operator, arithmetic operators,
comparison operators and
logical operators
The final category that we are going to look at is string operators
In that category, we look at only one, the concatenation operator
The “+” String Operator
The “+” operator can be used to
concatenate two strings
title = “kim” + “continental”
The value of the variable title
becomes “kimcontinental”
21.6 Elements of JavaScript Statements
Semicolon ;
Terminate all JavaScript
statements with a semicolon. It is not always necessary, but highly
recommended.
b = 2;
sum = sum + 49;
name = “Kim” + “ Continental”;
x = Math.floor ( x );
Identifiers
Operators
Literals
Punctuation
White Spaces & Line Breaks
White spaces: The space & the tab characters
JavaScript ignores any extra white spaces or line breaks that you put in
the code
This gives you the freedom of using them for making your code appear
neat and readable
while ( x > 0) {
remaind = x % 2;
y = remaind + y;
}
while ( x > 0) {remaind = x % 2; y = remaind + y;}
while ( x > 0) {
remaind = x % 2;
y = remaind + y;
}
Now let’s talk about a very special type of JavaScript statement that
does not really do anything, but is
found in most pieces of code!
Comments
Comments are included on a Web page to explain how and why you wrote the
page the way you did
Comments can help someone other than the author to follow the logic of
the page in the author’s
absence
The commented text is neither displayed in the browser nor does it have
any effect on the logical
performance of the Web page, and is visible only when the actual code is
viewed
JavaScript Comments
Single-line
comments (two options)
// Author: Kim
<!-- Creation Date: 24 March 2003
Multi-line
comments
/* Author: Kim
Creation Date: 24 March
2003 */
HTML Comments
<!-- Author: Kim
Creation Date: 24 March 2003 -->
Note : comments let the code
speak for itself!
Comments add clarity
Decimal to Binary Conversion
in JavaScript
x = 75 ; // x is the decimal number
y = “” ; // y is the binary equivalent
while ( x > 0) {
remainder = x % 2 ;
quotient = Math.floor( x / 2 ) ;
y = remainder + y ;
x = quotient ;
}
document.write(“y = ” + y) ;
During Today’s Lesson …
We found out about JavaScript data types
About variables and literals
We also discussed several operators supported by JavaScript
Next (the 8th)
Web Dev Lecture:
Flow Control and Loops
To be able to understand the concept of
flow control using the “if” and “switch” structures
To be able to understand the concept of behind the “while” and “for”
looping structures
To be able to solve simple problems using flow control and loop
statements |