![Page 1: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/1.jpg)
Introduction to JavaScript Data Types & Operators
![Page 2: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/2.jpg)
Today’s Lecture …
• We will find out about JavaScript data types
• About variables
• We will also discuss various operators supported by JavaScript
![Page 3: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/4.jpg)
We’ll comeback to these data types, but before that we have to define a few new terms
First, variable:
![Page 5: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/5.jpg)
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”!)
![Page 6: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/6.jpg)
Example
x = 1;
while (x < 6) {
document.write (x);
x = x + 1;
}
x is a variable
![Page 7: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/7.jpg)
Try Doing the Same Without Using 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?
![Page 8: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/8.jpg)
Another Situation
x = 1;
while (x < 6000) {
document.write (x);
x = x + 1;
}
![Page 9: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/9.jpg)
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
![Page 10: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/10.jpg)
Declaring Variables
var height
var name, address, phoneNumber
![Page 11: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/11.jpg)
JavaScript Variables are Dynamically Typed
• Any variable in JavaScript can hold any type of value, and the 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?
![Page 12: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/12.jpg)
JavaScript Variables are Dynamically Typed
var sum ;
sum = 43 ;
sum = “empty” ;
After the execution of the 2nd statement, the data type becomes “number”
After the execution of the 3rd statement, the data type changes to “string”
After the execution of the 1st statement, the data type of the variable “sum” is “undefined”
![Page 13: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/14.jpg)
Another Restriction on Identifiers
• JavaScript keywords cannot be used 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.
![Page 15: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/15.jpg)
JavaScript (Java) Reserved WordsNames that can’t be used for variables, functions, methods, objects
finally byte import throws else
protected goto with default new
abstract static class interface var
float case in transient extends
public if this do null
Boolean super const long void
for catch instanceof true false
return private throw double package
break switch continue native while
function char int try final
synchronized implements ????
![Page 16: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/16.jpg)
Avoid These Special Names As Well (1)Names that should not be used for variables, functions, methods, objects
alert Area assign Boolean Checkbox
escape FileUpload Form frames getClass
status Link location MimeType navigate
onunload opener Packages parseFloat Password
setTimeout String sun Text top
Anchor Array blur Button Submit
eval focus Frame Function Hidden
length Location Math name Navigator
open Option parent parseInt Plugin
JavaPackage taint Textarea toString
![Page 17: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/17.jpg)
Avoid These Special Names As Well (2)Names that should not be used for variables, functions, methods, objects
close confirm assign Window JavaClass
History Image Form java onfocus
navigator Number location onblur Select
prompt Radio Packages Reset Element
unescape valueOf sun window JavaObject
closed Date blur Document onload
history isNaN Frame JavaArray Self
netscape Object Math onerror untaint
prototype ref parent scroll taint
defaultStatus clearTimeout document
![Page 18: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/18.jpg)
Identifiers appear in JavaScript statements
Let us now discuss a few other elements that appear in those statements
![Page 19: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/19.jpg)
Elements of JavaScript Statements
b = 2 ;
sum = sum + 49 ;
name = “Bhola” + “ Continental” ;
x = Math.floor ( x ) ;
Identifiers
Operators
Literals
Punctuation
![Page 20: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/21.jpg)
Numeric Literals
24
-230000000000000000
9.80665
1.67e-27
JavaScript stores all numbers, even integers, as floating-point numbers
![Page 22: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/22.jpg)
String Literals
“”
‘’
‘Bhola’
“Where is the Bhola Continental Hotel?”
String literals are always enclosed in a matching pair of single or double quotes
![Page 23: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/23.jpg)
Boolean Literals
true
false
if ( tankFull == false)
addMoreWater = true
![Page 24: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/24.jpg)
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
• We’ll look at a few more during future lectures, but understand that there are many more.
![Page 25: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/25.jpg)
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 ;
![Page 26: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/26.jpg)
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
![Page 27: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/27.jpg)
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”
Not the same as the assignment “=” operator
![Page 28: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/28.jpg)
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
![Page 29: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/29.jpg)
Example
if ( x != 0 )
result = y / x;
else
result = “not defined”;
![Page 30: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/30.jpg)
From comparison operators, we move to Logical Operators
![Page 31: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/31.jpg)
Logical OperatorsOperate 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
![Page 32: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/32.jpg)
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
![Page 33: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/33.jpg)
Example
if ( x || y )
document.write (“Either or both are true”);
else
document.write (“Both are false”);
![Page 34: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/34.jpg)
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
![Page 35: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/35.jpg)
The “+” String Operator
The “+” operator can be used to concatenate two strings
title = “bhola” + “continental”
The value of the variable title becomes “bholacontinental”
![Page 36: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/36.jpg)
Semicolon ;
Terminate all JavaScript statements with a semicolon. It is not always necessary, but highly recommended.
a = 23 ;
quotient = floor( a / 2) ;
remainder = a % 2 ;
![Page 37: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/37.jpg)
Elements of JavaScript Statements
b = 2;
sum = sum + 49;
name = “Bhola” + “ Continental”;
x = Math.floor ( x );
Identifiers
Operators
Literals
Punctuation
![Page 38: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/38.jpg)
Two more elements that are found in JavaScript statements are white spaces and line breaks
![Page 39: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/39.jpg)
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
![Page 40: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/40.jpg)
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;
}
![Page 41: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/41.jpg)
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!
![Page 42: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/42.jpg)
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
![Page 43: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/43.jpg)
JavaScript Comments
• Single-line comments (two options)
// Author: Bhola<!-- Creation Date: 24 March 2003
• Multi-line comments
/* Author: Bhola Creation Date: 24 March 2003 */
![Page 44: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/44.jpg)
HTML Comments
<!-- Author: Any
Creation Date: 24 March 2007 -->
![Page 45: Introduction to JavaScript Data Types & Operators](https://reader031.vdocuments.us/reader031/viewer/2022032006/56649f385503460f94c54586/html5/thumbnails/45.jpg)
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) ;
Decimal to Binary Conversion in JavaScript