Beruflich Dokumente
Kultur Dokumente
Lecture 21
Data Types & Operators (Web Development Lecture 7)
1
An object can be manipulated with methods that are associated with that object e.g. a resize a window with resizeTo(150, 200) 2
prop 1 prop 2
prop 3
prop 4
prop 5
method 3
3
method 1
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
Nevertheless, JavaScript shares many similarities with object-oriented languages, and therefore is called an object-based language 5
The concept of objects and associated properties and methods is a very powerful idea, and we will be talking about it a lot during this course However, today, our focus will be on some of the nitty-gritty details of JavaScript
Well 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!)
10
Example
x is a
variable
document.write (1); document.write (2); document.write (3); document.write (4); document.write (5);
12
Another Situation
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 14
Declaring Variables
var height var name, address, phoneNumber
15
17
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 18 underscore
bhola@bholacontinental
19
numberOneUniversity N99umber_one_University
_5numberoneuniversity x reallyReallyLongIndentifier12345678901234
20
finally byte protected goto abstract static float case public if Boolean super for catch return private break switch function char synchronized
throws default interface transient do long instanceof true throw double continue native int try implements
else new var extends null void false package while final 22 ????
Area
assign
setTimeout
Anchor eval length open
String
Array focus Location Option
sun
blur Frame Math parent
Text
Button Function name parseInt
top
Submit Hidden Navigator Plugin
JavaPackage
taint
Textarea
toString
23
unescape
closed history netscape prototype
valueOf
Date isNaN Object ref
sun
blur Frame Math parent
window
JavaObject
defaultStatus
clearTimeout
document
24
Identifiers appear in JavaScript statements Let us now discuss a few other elements that appear in those statements
25
Identifiers
Operators
Punctuation
26
JavaScript Literals
A data value that appears directly in a statement Literals can be of several types. Some of them are:
1. Number 2. String 3. Boolean
27
Numeric Literals
24 -230000000000000000 9.80665 1.67e-27
String Literals
Bhola Where is the Bhola Continental Hotel?
String literals are always enclosed in a matching pair of single or double quotes
29
Boolean Literals
true false
30
JavaScript Operators
Operators operate on operands to achieve the desired results
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
Well 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! 31
Assignment Operator =
Changes the value of what is on the LHS, w.r.t. what is on the RHS
Arithmetic Operators
Multiply Divide 2*48 2 / 4 0.5
Modulus
Add
5%21
2+46
Subtract
Negate
2 - 4 -2
-(5) -5
33
Comparison Operators
Not the same as the assignment = operator
Comparison Operators
a == b
True if a and b are the same
a != b
a>b a >= b
a<b
a <= b
Example
if ( x != 0 ) result = y / x; else result = not defined;
36
37
Logical Operators
Operate on Boolean expressions or variables
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
38
Logical Operators
a && b AND
a || b !a OR NOT
True if both are true
True of either or both are true True if a is false
39
Example
if ( x || y ) document.write (Either or both are true); else document.write (Both are false);
40
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
41
42
Semicolon ;
Terminate all JavaScript statements with a semicolon. It is not always necessary, but highly recommended.
Identifiers
Operators
Punctuation
44
Two more elements that are found in JavaScript statements are white spaces and line breaks
45
46
Now lets talk about a very special type of JavaScript statement that does not really do anything, but is found in most pieces of code!
48
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 authors 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 49 visible only when the actual code is viewed
JavaScript Comments
Single-line comments (two options)
HTML Comments
51
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) ;
54
Assignment #7 (1)
Modify the Web page that you built for assignment #4 so that it has the following additional interactivity features: 1. When the mouse goes over the Send Message button, the Web page should check if any of the two fields is empty
2. If a field is found empty, an appropriate alert message should be shown to the user
55
Assignment #7 (2)
3. The alert must specify the name of the empty field 4. If none of the fields are empty, and the user clicks on the Send Message button, display a message thanking the user for sending you the greeting Consult the CS101 Web page for submission 56 instructions & deadline
57