JavaScript Intro

Introduction
To
JavaScript
Client Side Scripting
Client side scripting is used to write a script, that

is processed on client side, within client browser.
These scripts are small in size, which are

downloaded, compiled and run by browser.
E.g., JavaScript, VBScript

JavaScript
• JavaScript is an important client-side

scripting language and widely used in
dynamic websites.
• It is an interpreted scripting language.
• The script can be embedded within the

HTML document or can be stored in an
external file.
JavaScript
• JavaScript gives HTML designers a

programming tool.
• It can be used to validate input data, display

messages on the window or status bar.
• It can also be used to adjust the interface in

response to user feedback.
Using JavaScript
• JavaScript can be placed in the <head>

section or <body> section or in both.
• Any number of scripts can be placed in an

HTML document.
• JavaScript code is inserted between <script>

and </script> tags.
Good Scripting Practices
• Quote should end with a matching quote.
• Bracket should end with a matching bracket.
• Use semicolon at the end of each statement.
• Indent your code.

Values
• JavaScript has two types of values – Fixed

values and Variable values
• Fixed values are called Literals.
• Variable values are called Variables.

Literals
• JavaScript has two literals –

1. Numbers –
written with or without decimals
e.g., 20.6 , 1180
2. Strings –
written within single or double quotes
‘abc’ or “string”
Variables
• Variables are used to store data values.
• JavaScript uses the keywords var, let or const

to declare variables.
• E.g., var x;
let x, y;
Variable Initialization
• An equal sign is used to assign values to

variables, i.e., to initialize the variable.
• Declaration and initialization can be done

separately or together in one statement.
• E.g. var x; x = 5;
var x = 5;
Variable Initialization
• Values can be assigned to declared as well as

undeclared variables.
• e.g., x = 5 – Here, x is undeclared variable

var x = 5 – Here, x is declared variable
let x = 5 – Here, x is declared variable
const x = 5 – Here, x is declared variable
with constant value that
can not be changed
Variables
• The var keyword is used in all JavaScript

code from 1995 to 2015.
• The let and const keywords were added to

JavaScript in 2015.
• In case, code is required to run in older

browsers, keyword var need to be used for
variable declaration.
Identifiers
• All JavaScript variables must be identified

with unique names.
• These unique names are called identifiers.
• Identifiers can be short names (like x and y)

or more descriptive names (age, number).
Rules for Naming Identifiers
• Names can contain letters, digits,

underscores, and dollar signs.
• Names can not contain special character
except _ , $.
• Names must begin with a letter, $ or _.
• Names are case sensitive.
• Reserved words (like JavaScript keywords)
cannot be used as names.
Datatypes
• Data type specifies the type of data stored in

a variable.
• Datatypes in JavaScript are –
• String
• Number
• Boolean
• Array
• Object
Datatypes
• String
- series of characters
- written within single or double quotes
- e.g., var name = “John”;
var city = ‘Pune’;
var answer = “It’s raining”;
Datatypes
• Number
- store numeric value
- written with or without decimals
- e.g., var x = 56;
var y = 23.45;
var z = 53e-4;
Datatypes
• Boolean
- can have only two values – true or false
- used in conditional testing
- e.g., var a = 10; var b = 10; var c = 12;
(a == b) – returns true
(a == c) – returns false
Undefined
• In JavaScript, a variable without a value, has

the value undefined.
• In this case, type is also undefined.
• E.g., let name;

Undefined
• Any variable can be made empty, by setting

the value to undefined.
• In this case, type is also undefined.
• E.g., name = undefined;

Typeof Operator
• The typeof operator is used to find the type of

a variable or an expression.
• Example –
typeof “abc”; // returns string
typeof 21; // returns number
typeof (3 + 5); // returns number
Displaying Output
• In JavaScript, output can be displayed in

different ways as –
1. Using innerHTML – to write into HTML element
2. Using document.write() – to write into HTML
output
3. Using window.alert() – to write into an alert box
4. Using console.log() – to write into browser
console
Using innerHTML
• To access an HTML element through

JavaScript, document.getElementById(id)
method is used.
• The attribute ‘id’ defines the HTML element.
• The innerHTML property defines the HTML

content.
Using innerHTML
<body>
<p id = “p1”></p>
<script>
document.getElementById(“p1”).
innerHTML
= “Hello World”;
</script>
Using document.write
• The method document.write() is used to

write into HTML output.
• It is convenient to use document.write() for

testing purposes.
Using document.write
<script>
document.write(“Hello World”);
</script>
OR
<input type = “button”
onclick = “ document.write(‘Hello
World’)”
value = “Try It”>
Using window.alert
• The method window.alert() is used to display

data using an alert box.
<script>
window.alert(“Hello World”);
</script> OR
<script>
alert(“Hello World”);
</script>
Using console.log
• The method console.log() is used to display

data in browser console.
• It is generally used for debugging purpose.
<script>
console.log(“Just to Check”);
</script>
Operators
• Arithmetic Operators
• Assignment Operators
• Comparison Operators
• Logical Operators
• Type Operators
• Bitwise Operators
Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
** Exponentiation
/ Division
% Modulus
++ Increment
-- Decrement
Arithmetic Operators
<script>
document.write(2 + 3);
document.write(8 - 5);
document.write(3 * 4);
document.write(7 % 3);
</script>
Assignment Operators
Operator Example Equivalent Statement

= 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
Adding Strings
• The ‘+’ operator can also be used to

concatenate strings.
• E.g., var t1 = “Good”;

var t2 = “Morning”;
t3 = t1 + “ ” + t2;
document.write(t3);
- Result is Good Morning
Adding Strings and Numbers
• The ‘+’ operator can be used to add a string

and a number, which results in a string.
• E.g., var a = “4” + 4;

var b = “Number” + 4;
document.write(a); - will print 44
document.write(b); - will print
Number4
Comparison Operators
== equal to
=== equal value and same type
!= not equal
!== not equal value and not same type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Comparison Operators
<script>
var a = 5; var b = 3;
var c = “5”;
document.write(a > b);
document.write(a < b);
document.write(a === c);
document.write(a >= b);
</script>
Logical Operators
Operator Description Explanation
&& logical and Returns true if both

conditions are true
|| logical or Returns true if any of
the conditions is true
! logical not Negates the result
Logical Operators
<script>
var a = 5;
var b = 3;
document.write((a > b) && (a > b));
document.write ((a > b) || (a < b));
document.write(!(a < b);
</script>
Type Operators
typeof returns the type of a variable
instanceof returns true if an object is an
instance of an object type
Type Operators
<script>
var a = 15;
var b = “xyz”;
var c = a < 10;
document.write(typeof(a));
document.write (typeof(b));
document.write(typeof(c));
</script>
Bitwise Operators
• Bitwise 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 number.

Bitwise Operators
& AND
| OR
~ NOT
^ XOR
<< Left shift
>> Right shift

Bitwise Operators
Example Same as Result Decimal
5&1 0101 & 0001 0001 1
5|1 0101 | 0001 0101 5
~5 ~ 0101 1010 10
5^1 0101 ^ 0001 0100 4
5 << 1 0101 << 1 1010 10
5 >> 1 0101 >> 1 0010 2
Conditional Operator
• It is also called as ternary operator.
• It assigns a value to a variable based on some

condition.
• var a = (age < 21) ? “Not eligible” : “Eligible”;

- value “Not eligible” will be assigned to
the variable ‘a’ if the condition
age<21 is true.
Operator Precedence
()
!, -, ++, --
*, /, %
+, -
<, <=, >, >=
==, !=
&&
||
?:
=, +=, -=,*=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=
Comments
• Single Line Comments

Start with //
e.g., //function to display sum
• Multi-line Comments
Start with /* and end with */
e.g., /* The code below
declares variable number */

JavaScript Intro

Uploaded by

Copyright:

Available Formats

You might also like

JavaScript Intro

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Intro

Uploaded by

Copyright:

Available Formats

Introduction

Client side scripting is used to write a script, that

These scripts are small in size, which are

E.g., JavaScript, VBScript

• JavaScript is an important client-side

• It is an interpreted scripting language.

• The script can be embedded within the

• JavaScript gives HTML designers a

• It can be used to validate input data, display

• It can also be used to adjust the interface in

• JavaScript can be placed in the <head>

• Any number of scripts can be placed in an

• JavaScript code is inserted between <script>

• Quote should end with a matching quote.

• Bracket should end with a matching bracket.

• Use semicolon at the end of each statement.

• Indent your code.

• JavaScript has two types of values – Fixed

• Fixed values are called Literals.

• Variable values are called Variables.

• JavaScript has two literals –

• Variables are used to store data values.

• JavaScript uses the keywords var, let or const

• An equal sign is used to assign values to

• Declaration and initialization can be done

• Values can be assigned to declared as well as

• e.g., x = 5 – Here, x is undeclared variable

• The var keyword is used in all JavaScript

• The let and const keywords were added to

• In case, code is required to run in older

• All JavaScript variables must be identiﬁed

• These unique names are called identiﬁers.

• Identiﬁers can be short names (like x and y)

• Names can contain letters, digits,

• Data type speciﬁes the type of data stored in

• In JavaScript, a variable without a value, has

• In this case, type is also undeﬁned.

• E.g., let name;

• Any variable can be made empty, by setting

• In this case, type is also undeﬁned.

• E.g., name = undeﬁned;

• The typeof operator is used to ﬁnd the type of

• In JavaScript, output can be displayed in

• To access an HTML element through

• The attribute ‘id’ deﬁnes the HTML element.

• The innerHTML property deﬁnes the HTML

• The method document.write() is used to

• It is convenient to use document.write() for

• The method window.alert() is used to display

• The method console.log() is used to display

Operator Example Equivalent Statement

• The ‘+’ operator can also be used to

• E.g., var t1 = “Good”;

• The ‘+’ operator can be used to add a string

• E.g., var a = “4” + 4;

Operator Description Explanation

&& logical and Returns true if both