JavaScript I

Content
• Introduction to JavaScript
• Need of JavaScript
• Example
• JavaScript and Java
• Comments
• Variables
• Identifiers
• Operators
Introduction to JavaScript
What is JavaScript?
Object-based Structured
scripting language JavaScript
programming
Translator
Use of prototypes language
Supplement for Platform

HTML independent
Introduction to JavaScript (contd.)
First introduced in JavaScript allows to

Netscape 2.0 as LiveScript access and manipulate
to add interactive features and content of
features on web the document
HTML CSS JavaScript

• Content of web • Layout of web • Program
page page behaviour of
web page
• JavaScript can run on both

Client side
Server side
Need of JavaScript (contd.)
• Decision Making
• Submitting Forms
• Performing complex mathematical functions
• Automatic online data validation
Need of JavaScript(contd.)
Read elements
from
Perform actions documents
based on
Manipulate text
conditions
Create pop-up
Need of Perform
windows JavaScript mathematical
calculations
Retrieve the
Client side
current date
validation
and time
Example
<script>
document.write(“Example of JavaScript");
</script>
Details Script tag: Specifies JavaScript
Text/javaScript: Information to
browser about data
Document.write: Displays dynamic

content through JavaScript
How to add script to HTML Page
• <script>…</script>: used to insert JavaScript
• Any number can be placed in HTML document
How to place JavaScript
JavaScript can
be placed in Between the Between the
external files body tag of html head tag of html
(.js)
JavaScript and Java
JavaScript Java
Interpreted in source code on Complied in bytecode
browser
Integrate into HTML program for Must be compiled before
execution execution
Enhance features of HTML by Powerful language and

providing interactive web pages substitute for C and C++
Doesn’t create applets Create applets

JavaScript Comments
• Uses
To explain JavaScript code
To prevent execution for testing alternative
code
• Types
Single line Comments
Multi-line Comments
Single Line Comments
• Starts with //
• Most commonly used
• Example:
• // Single line comment
• Used at the end of line to explain the code
Multiple Line/ Block Comments
• Starts with /* and end with */

• Example:
• /*
First line of comment
Second line of comment
Third line of comment
*/
JavaScript Variables
• Name of storage location

Basics • Store data
• Equal sign (=): Assign values
Types • Local and Global variable

JavaScript Variables (Contd.)
Identifier Name must start with a letter (a to z or

A to Z), underscore( _ ), or dollar( $ )
sign
After first letter, digits (0 to 9) can be

used
Case sensitive
Variable Declaration
1. var: Used in all older version of JavaScript.
var x;
x = 5;
2. let: Used in newer version of JavaScript, if value of variable
can change
let y;
y = 3;
3. const: Value must be assigned in declaration
const x = 4;
4. Undefined: No value is given
let x;
• Example of variable declaration

const a = 5;
const b = 6;
let total = a + b;
JavaScript Variables(contd.)
Example var a = 11;
var _value=“abc";
<html>
<body>
<script>
var a = 11;
var b = 21;
var z=x+y;
document.write(z);
</script>
</body>
</html>
Local Declared inside block or function

variable
<script>
function xyz() {
var x=11; //local variable
}
</script>
Global Declared outside the function or declared with

variable window object
<script>
var value=50; //global variable
function a(){
alert(value);
}
function b(){
alert(value);
}
</script>
<p id=“example"></p>
<script>
let stdName = “abc";
document.getElementById("example").innerHT
ML = stdName;
</script>
Output: abc
JavaScript Datatypes
Datatypes
Primitive
String, Number, Boolean,
Undefined, Null
Non-primitive (Reference data type)

Object, Array and RegExp
Primitive Datatypes
Datatype Description
String Sequence of characters
Number Numeric values
Boolean Boolean value either true or

false
Undefined Undefined value
Null No value at all

Non-primitive Datatypes
Datatype Description
Object Instance to access members
Array Group of similar values
RegExp Boolean value either true or

false
JavaScript Objects
Basics Entity having properties and methods
Object-based language
Template based, directly create

objects
JavaScript Objects (Contd.)
Object literal
Ways to Instance of object directly

create objects (using new keyword)
Use of object constructor

(using new keyword)
Object literal
Syntax object={property1:value1,property2:value2.....propertyN:valueN}
<script>
std={id:11,name:"Kumar"}
Example document.write(std.id+" "+std.name);
</script>
Output: 11 Kumar
Instance of object directly
Syntax
• var objectname=new Object();
Example
<script>
var std=new Object();
std.id=21;
std.name=“abc";
document.write(std.id+" "+std.name);
</script>
Output: 21 abc
Use of object constructor
Create function with Each argument value can be assigned in
arguments current object using this keyword
This: refers to current object
<script>
function std(id,name){
this.id=id;
this.name=name; Output: 11 abc
}
s=new std(11 ,“abc");
document.write(s.id+" "+s.name);
</script>
Primitive Datatypes
String
• Object represents sequence of

characters to store and
manipulate text
Basics • Either single or double quotes
are required
• let name = “abc”;

Example
• let name = ‘abc’;
Primitive Datatypes (Contd.)
String
Ways to create
string
String literal String object

Created using double Using new keyword
quotes var strname=new String(“NITP");
let name = “abc”; New keyword: Create instance of
string
String Methods
Extracting string parts

slice(start, end) Replacing string
String length
substring(start, end) replace()
substr(start, length)
Converting to upper Extracting String

and lowercase Characters
toUpperCase(): charAt(position)
toLowerCase():
Extracting string parts
• slice(start, end)
• Example:
let str = “NIT Patna Bihar”
let result_1 = str.slice(4,9);
Output: Patna
let result_2 = str.slice(-1,-6);
Output: Bihar
• substr(start, length)
let result_3 = str.substr(4,5);
Output: Patna
Replacing string
replace()
• Replaces a specified value with another value
• Example:
let str = “abc";
let result = str.replace(“abc", “def");
Output: def
Let char = str.charAt(0);
Output: a
Converting to upper and lowercase
toUpperCase():
toLowerCase():
• toUpperCase():
• Example
let str = “Keep It Up”;
let str1 = str. toUpperCase();
Result: KEEP IT UP
• toLowerCase():
• Example
let str2 = str. toLowerCase();
Result: keep it up
String Search Methods
String indexOf() String lastIndexOf()

returns the index of the first returns the index of
occurrence the last occurrence
String startsWith() String endsWith()

returns if a string begins returns if a string ends
String Search Methods (contd.)
• String indexOf()
• Example:
let txt = ”abc def ghi def";
txt.indexOf("def");
Output: 4
• String lastIndexOf()
• Example:
• txt. lastIndexOf(def);
• Output: 12
String startsWith()
• returns true if a string begins with a specified

value
• Example:
 let text = " abc def ghi def”
text.startsWith(“abc");
 Output: true
let txt = "def ghi def”
txt.startsWith(“abc");
output: false
String endsWith()
• Returns true if a string ends with a specified

value
• Example:
let text = " abc def ghi def”
text.endsWith(“def");
Output: true
Non-primitive Datatypes
Array
• Special variable holds more than one value
• Need of Array
Hold more values under a single name and
Access values individually
Array (contd.)
• Array Declaration (Creating an array)
• Use const for array declaration
• Syntax
 Keyword array_name= [element1, element2...];
 Example: const arr = [“a”,”b”,…]
• Multiple line declaration can be possible
• Example: const arr = [
“a”,
“b”,
];
• Array declaration and then input elements
• const arr = [];
• arr[0]= “a”;
• arr[1]= “b”;
Accessing Array Elements
• By referring to index number
• Use numbers to access its element
• Index starts with 0
• Example:
const arr = *“a”, “b”, ”c”+;
let arr = arr[0];
Output: a
• Changing an array element
arr[0] = “d”;
Output: d b c
• Full array can be accessed
Accessing Array Elements (contd.)
• Full array can be accessed
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p id="demo"></p>
<script>
const arr = ["ab", "cd", "ef"];
document.getElementById("demo").innerHTML = arr;
</script>
</body>
</html>
Array object
• To access its elements, arrays use numbers

• Objects use names to access its members
• Arrays: use numbered indexes
• Objects: use named indexes
• Array.isArray(): method to recognize an array
Array object
Object literal
Instance of array object

Ways to create
directly (using new
objects
keyword)
Use of array constructor

(using new keyword)
Object literal
Syntax Example
• var arrayname=[value1,val <script>
ue2.....valueN]; var std=*“ab",“cd",“ef"+;
for (i=0;i<std.length;i++){
document.write(std[i] + "<br/>");
}
</script>
Use of Array Object directly (new keyword)
Example
<script>
Syntax var i;
var emp = new Array();
• var arrayname=new Array(); emp[0] = "A";
emp[1] = “B";
emp[2] = “C";
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}
</script>
Use of array constructor
Example
<script>
Basics var emp=new Array(“A",“B",“C");
for (i=0;i<emp.length;i++){
Passing arguments in document.write(emp[i] + "<br>");
constructor }
</script>
Array Methods
• Converting arrays to strings

join(): Converts an array to a string with
specific separator
Example: const arr = *“a”, “b”, ”c”+;
arr.join(“ - “);
Output: a - b - c
Array properties and methods (contd.)
Length push() and pop()

Push(): Adds a new element to an array
returns length of an array at the end
Pop(): Removes the last element from
an array
Example: const arr =
*“abc", “def", “ghi", “jkl"+; Example of push():const alpha = *“a", “b", “c"+;
let length = arr.length; alpha.push(“d");
Output: 4 Output: a,b,c,d
Example of pop(): const alpha = *“a", “b", “c"+;
alpha.pop();
Output: a,b
Shift() and Unshift() concat()
shift(): Removes first array

Joins two or more arrays to
element
create new one
unshift(): Adds a new element
at the beginning
const alpha_a = *“a", “b", “c"+;
Example: const alpha = *“a", “b", “c"+;
alpha.shift(); const alpha_b = *“d", “e"+;
Output: b,c
const alpha_c =
const alpha = *“b", “c"+;
alpha.unshift(“a”); alpha_a.concat(alpha_b);
Output: a,b,c Output: a,b,c,d,e
Splice() slice()
splice(): Adds or removes Slice out a piece of an array
new element at specified into a new array
position
Example: const alpha =

const alpha = *“a", “b", “c“, “d”+;
*“a", “b", “c"+;
alpha.splice(1, 0, “d”); const alpha_s = alpha.slice(1)
Output: a,d,b,c Output: b,c,d
alpha.splice(1, 1);
Output: a,c
reverse() sort()
Reverses the elements in an

Sorts an array alphabetically
array
Example: const arr =

const alpha = *“a", “b", “c"+; *“b", “e", “a, “c“, “d”+;
alpha.reverse(); arr.sort();
Output: c,b,a Output: a,b,c,d,e
JavaScript Operators
• Symbol is used to perform a calculation in an expression with

two or more values
Arithmetic
operators
Special Logical
operator operators
Types
Bitwise Assignment
operator operators
Comparison String
operators operators
Operators (contd.)
• Performs arithmetic on
Arithmetic number (literals or
operators variables)
• +, -, *,/, %, ++, --,**
Assignment • Assigns value to a variable

operators • =, +=, -=, *=, /=, %=
Operators (contd.)
let x= 5
Arithmetic operators
Symbol Description Example Result
+ Addition x+5 10
- Subtraction x-3 2
* Multiplication x*5 25
/ Division x/5 1
% Modulus x%2 1
++ Increment x++ 6
-- Decrement x-- 4
** Exponentiation x**2 25
Operators (contd.)
Assignment operators
let x = 10;
let y = 5;
Symbol Example using Equivalent Result

shorthand
= a=1 a=1 -
+= x+=y x=x+y 15
-= x-=y x=x-y 5
*= x*=y x=x*y 50
/= x/=y x=x/y 2
%= x%=y x=x%y 0
Operators (contd.)
• + operator/Concatenation operator: To
String concatenate strings
operators • +=: can also be used
• Adding number and string: return string
• ==, !=, > (greater), <(less),>=,<=,

Comparison ?(ternary/conditional)
operators • Variablename = (condition)?value1:
value2
Operators (contd.)
String Operators
• Example 1
let str1 = “NIT”;
let str2 = “Patna”;
let str3 = str1+str2; or let str3 = str1+” ” +str2;
Output: NITPatna Output: NIT Patna
• Example 2
let str1 = “NIT ”;
str1 += “Patna”;
Output: NIT Patna
Operators (contd.)
Comparison Operators
Operator Description Example

== Is equal to 2==1 returns false
1==1returns true
!= Is not equal to 1!=2returns true
1==1returns false
> Is greater than 2>1 returns true
1>2 returns false
>= Is greater than or equal 1>=2returns false

to 2>=1 returns true
<= Is less than or equal to 1<=2returns true

2<=1 returns false
Operators (contd.)
Logical Operators
• Logic between
Logical operators variables and values
• &&(and), II (or), !(not)
Operators (contd.)
Logical Operators
let x = 1;
let y = 2;
Operator Name Example
&& AND x<2 && y>1,

returns true
II OR x<2 II y<2,
returns true
! NOT !(x>y),
returns true
Operators (contd.)
Bitwise Operators
Operator Name
& AND
| OR
^ Bitwise XOR
~ Bitwise NOT
<< Bitwise Left Shift
>> Bitwise Left Shift
>>> Bitwise Right Shift with Zero

Operators (contd.)
Special Operators
Operator Name
(?:) Conditional operator
, Comma operator to evaluate
multiple expressions
delete Deletes property from object
in Checks if object has given property
typeof Checks the type of object
new Creates an object

JavaScript I

Uploaded by

Document Information

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 I

Uploaded by

Copyright:

Available Formats

Content

Supplement for Platform

First introduced in JavaScript allows to

HTML CSS JavaScript

• JavaScript can run on both

Document.write: Displays dynamic

How to place JavaScript

Enhance features of HTML by Powerful language and

Doesn’t create applets Create applets

• Starts with /* and end with */

• Name of storage location

Types • Local and Global variable

Identifier Name must start with a letter (a to z or

After first letter, digits (0 to 9) can be

• Example of variable declaration

Local Declared inside block or function

Global Declared outside the function or declared with

Non-primitive (Reference data type)

String Sequence of characters

Number Numeric values

Boolean Boolean value either true or

Null No value at all

Object Instance to access members

Array Group of similar values

RegExp Boolean value either true or

Basics Entity having properties and methods

Template based, directly create

Ways to Instance of object directly

Use of object constructor

This: refers to current object

• Object represents sequence of

• let name = “abc”;

String literal String object

Extracting string parts

Converting to upper Extracting String

String indexOf() String lastIndexOf()

String startsWith() String endsWith()

• returns true if a string begins with a specified

• Returns true if a string ends with a specified

• To access its elements, arrays use numbers

Instance of array object

Use of array constructor

• Converting arrays to strings

Length push() and pop()

Shift() and Unshift() concat()

shift(): Removes first array

Example: const alpha =

Reverses the elements in an

Example: const arr =

• Symbol is used to perform a calculation in an expression with

Assignment • Assigns value to a variable

Symbol Example using Equivalent Result

• ==, !=, > (greater), <(less),>=,<=,

Operator Description Example

>= Is greater than or equal 1>=2returns false

<= Is less than or equal to 1<=2returns true

Operator Name Example

&& AND x<2 && y>1,

>>> Bitwise Right Shift with Zero

You might also like