Spread Knowledge

CS101 - Introduction to Computing - Lecture Handout 21

User Rating:  / 0
PoorBest 

Related Content: CS101 - VU Lectures, Handouts, PPT Slides, Assignments, Quizzes, Papers & Books of Introduction to Computing

Data Types & Operators

(Web Development Lecture 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)

During the last lecture

we had a discussion on Objects, Properties, Methods

During the last lecture

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

Object-Based, Not Object-Oriented!

  • 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
  • Nevertheless, JavaScript shares many similarities with object-oriented languages, and therefore is called an object-based language

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

During Today’s Lecture …

  • We will find out about JavaScript data types
  • About variables and literals
  • We will also discuss various operators supported by JavaScript

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.

Variables

Try Doing the Same Without Using A Variable

Without Using A Variable

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

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?

JavaScript Variables are Dynamically Typed

JavaScript Variables are Dynamically Typed

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

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

JavaScript

Avoid These Special Names As Well (1)
Names that should not be used for variables, functions, methods, objects

functions, methods, objects

functions, methods, objects 1

Identifiers appear in JavaScript statements

Let us now discuss a few other elements that appear in those statements

Elements of JavaScript Statements

Elements of JavaScript Statements

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

“” , ’‘Bhola” , “Where is the Bhola 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
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

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

if ( x || y )

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 = “bhola” + “continental”
The value of the variable title becomes “bholacontinental”

Elements of JavaScript Statements

Semicolon ;
Terminate all JavaScript statements with a semicolon. It is not always necessary, but highly recommended.

Elements of JavaScript Statements 1

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: Bhola
<!-- Creation Date: 24 March 2003
Multi-line comments

/* Author: Bhola
Creation Date: 24 March 2003 */
HTML Comments

<!-- Author: Bhola
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 Lecture …
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