Suryadatta Education Foundation’s

Suryadatta Institute of Management, Pune-21

MCA Department

Java Script -Sheet 1

Java Script statement for print the document

 Writing into an HTML element, using innerHTML.

 Writing into the HTML output using document.write().
 Writing into an alert box, using window.alert().
 Writing into the browser console, using console.log().

<script>
window.alert(5 + 6);
</script>
<script>
document.write(5 + 6);
</script>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
Variables are Containers for Storing Data

JavaScript Variables can be declared in 4 ways:

 Automatically
 Using var
 Using let
 Using const

Example using var

var x = 5;
var y = 6;
var z = x + y;
documents.write(z);
Example using let
let x = 5;
let y = 6;
let z = x + y;
documents.write(z);

JavaScript Values

The JavaScript syntax defines two types of values:

 Fixed values
 Variable values

Fixed values are called Literals.

Variable values are called Variables.

JavaScript Literals

The two most important syntax rules for fixed values are:

1. Numbers are written with or without decimals:

10.50

1001

2. Strings are text, written within double or single quotes:

"John Doe"

'John Doe'

JavaScript Variables

In a programming language, variables are used to store data values.

JavaScript uses the keywords var, let and const to declare variables.

An equal sign is used to assign values to variables.

In this example, x is defined as a variable. Then, x is assigned (given) the value 6:

let x;
x = 6;
JavaScript Operators

JavaScript uses arithmetic operators ( + - * / ) to compute values:

(5 + 6) * 10

JavaScript uses an assignment operator ( = ) to assign values to variables:

let x, y;
x = 5;
y = 6;
JavaScript Expressions

 An expression is a combination of values, variables, and operators, which computes to

a value. The computation is called an evaluation.
 For example, 5 * 10 evaluates to 50:
o 5 * 10
 Expressions can also contain variable values:
o x * 10
 The values can be of various types, such as numbers and strings.
o For example, "John" + " " + "Doe", evaluates to "John Doe":
o "John" + " " + "Doe"
JavaScript Keywords

JavaScript keywords are used to identify actions to be performed. Following example

suggest let and var keywords

The let keyword tells the browser to create variables:

let x, y;
x = 5 + 6;
y = x * 10;

The var keyword also tells the browser to create variables:

var x, y;
x = 5 + 6;
y = x * 10;

JavaScript Comments

Not all JavaScript statements are "executed".

Code after double slashes // or between /* and */ is treated as a comment.

 Comments are ignored, and will not be executed:

let x = 5; // I will be executed

// x = 6; I will NOT be executed

JavaScript Identifiers / Names

Identifiers are JavaScript names.

Identifiers are used to name variables and keywords, and functions.

The rules for legal names are the same in most programming languages.

A JavaScript name must begin with:

 A letter (A-Z or a-z)

 A dollar sign ($)
 Or an underscore (_)

JavaScript is Case Sensitive

All JavaScript identifiers are case sensitive.

The variables lastName and lastname, are two different variables:

let lastname, lastName;

lastName = "Doe";
lastname = "Peterson";

Cannot be Redeclared

Variables defined with let can not be redeclared.

You can not accidentally redeclare a variable declared with let.

With let you can not do this:

let x = "John Doe";

let x = 0;

With var you can:

var x = "John Doe";

var x = 0;
Block Scope

Before ES6 (2015), JavaScript had Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the block:

Example
{
let x = 2;
}
// x can NOT be used here

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

Example
{
var x = 2;
}
// x CAN be used here

Redeclaring Variables

Redeclaring a variable using the var keyword can impose problems.

Redeclaring a variable inside a block will also redeclare the variable outside the block:

Example
<script>
var x = 10;
document.write(x)
{
var x = 2;
document.write(x)
}

document.write(x)
</script>
Redeclaring a variable using the let keyword can solve this problem.

Redeclaring a variable inside a block will not redeclare the variable outside the block:

<script>
let x = 10;
document.write(x)
{
let x = 2;
document.write(x)
}
document.write(x)
</script>
JavaScript Const

A const variable cannot be reassigned:

Example
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error

Must be Assigned

JavaScript const variables must be assigned a value when they are declared:

Correct
const PI = 3.14159265359;

Incorrect
const PI;
PI = 3.14159265359;

When to use JavaScript const?

Always declare a variable with const when you know that the value should not be
changed.

Use const when you declare:

 A new Array
 A new Object
 A new Function
 A new RegExp

Types of JavaScript Operators

There are different types of JavaScript operators:

 Arithmetic Operators
 Assignment Operators
 Comparison Operators
 String Operators
 Logical Operators
 Bitwise Operators
 Ternary Operators
 Type Operators

JavaScript Arithmetic Operators

Arithmetic Operators are used to perform arithmetic on numbers:

Arithmetic Operators Example

let a = 3;
let x = (100 + 50) * a;
Try it Yourself »

Operator Description

+ Addition

- Subtraction
 * Multiplication

** Exponentiation (ES2016)

/ Division

% Modulus (Division Remainder)

++ Increment

-- Decrement

JavaScript Assignment Operators

Assignment operators assign values to JavaScript variables.

The Addition Assignment Operator (+=) adds a value to a variable.

Assignment
let x = 10;
x += 5;

Operator Example Same As

= x=y x=y

+= x += y x=x+y
 -= x -= y x=x-y

*= x *= y x=x*y

/= x /= y x=x/y

%= x %= y x=x%y

**= x **= y x = x ** y

Note

Assignment operators are fully described in the JS Assignment chapter.

JavaScript Comparison Operators

Operator Description

== equal to

=== equal value and equal type

!= not equal

!== not equal value or not equal type

 > greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator

JavaScript Logical Operators

Operator Description

&& logical and

|| logical or

! logical not

Note

Logical operators are fully described in the JS Comparisons chapter.

JavaScript Type Operators

Operator Description
 typeof Returns the type of a variable

instanceof Returns true if an object is an instance of an object type

Note

Type operators are fully described in the JS Type Conversion chapter.

JavaScript Bitwise Operators

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.

Operator Description Example Same as Result Decimal

& AND 5&1 0101 & 0001 1

0001

| OR 5|1 0101 | 0001 0101 5

~ NOT ~5 ~0101 1010 10

^ XOR 5^1 0101 ^ 0100 4

0001

<< left shift 5 << 1 0101 << 1 1010 10

 >> right shift 5 >> 1 0101 >> 1 0010 2

>>> unsigned right 5 >>> 1 0101 >>> 1 0010 2

shift

The examples above uses 4 bits unsigned examples. But JavaScript uses 32-bit signed
numbers.
Because of this, in JavaScript, ~ 5 will not return 10. It will return -6.
~00000000000000000000000000000101 will return 11111111111111111111111111111010

Bitwise operators are fully described in the JS Bitwise chapter.

JavaScript String Comparison

All the comparison operators above can also be used on strings:

Example
<script>
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
</script>

Note that strings are compared alphabetically:

Example
<script>

let text1 = "20";

let text2 = "5";
let result = text1 < text2;
</script>
JavaScript String Addition

The + can also be used to add (concatenate) strings:

Example
<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
</script>

The += assignment operator can also be used to add (concatenate) strings:

Example
<script>
let text1 = "What a very ";
text1 += "nice day";
</script>

JavaScript has 8 Datatypes

1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

The Object Datatype

The object data type can contain:

1. An object
2. An array
3. A date

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");
Note

A JavaScript variable can hold any type of data.

The Concept of Data Types

In programming, data types is an important concept.

To be able to operate on variables, it is important to know something about the type.

Without data types, a computer cannot safely solve this:

let x = 16 + "Volvo";

Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it produce
a result?

JavaScript will treat the example above as:

let x = "16" + "Volvo";

Note

When adding a number and a string, JavaScript will treat the number as a string.

Example
let x = 16 + "Volvo";
Example
let x = "Volvo" + 16;

JavaScript evaluates expressions from left to right. Different sequences can produce different
results:
Write the output of the following

JavaScript:
<script>
let x = 16 + 4 + "Volvo";
document.write(x)
let x = "Volvo" + 16 + 4;
document.write(x)
</script>

JavaScript Types are Dynamic

JavaScript has dynamic types. This means that the same variable can be used to hold different
data types:

Example
<script>
let x; // Now x is undefined
x = 5; // Now x is a Number
document .write(x)
x = "John"; // Now x is a String
document .write(x)

JavaScript Strings

A string (or a text string) is a series of characters like "John Doe".

Strings are written with quotes. You can use single or double quotes:
Example
// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:

let carName2 = 'Volvo XC60';

You can use quotes inside a string, as long as they don't match the quotes surrounding the
string:

Example
// Single quote inside double quotes:
let answer1 = "It's alright";

// Single quotes inside double quotes:

let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:

let answer3 = 'He is called "Johnny"';