[go: up one dir, main page]
Scribd
Upload
3 views49 pages

WT Unit II JavaScript Basics

This document provides an introduction to JavaScript, covering its importance in web development, features such as dynamic typing and event-driven programming, and how to include JavaScript in HTML. It explains JavaScript variables, data types, and functions, including their declarations, expressions, and properties. Additionally, it discusses objects in JavaScript, particularly arrays, and their methods for data manipulation.

Uploaded by

bsanjay8978
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views49 pages

WT Unit II JavaScript Basics

This document provides an introduction to JavaScript, covering its importance in web development, features such as dynamic typing and event-driven programming, and how to include JavaScript in HTML. It explains JavaScript variables, data types, and functions, including their declarations, expressions, and properties. Additionally, it discusses objects in JavaScript, particularly arrays, and their methods for data manipulation.

Uploaded by

bsanjay8978
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 49

Web Technologies (9FC06) -

UNIT 2

JavaScript -
Basics

JavaScript - 1/
Web Technologies (9FC06) -
UNIT 2

Unit - 2 :
Content

JavaScript Introduction
Overview of
JavaScript Variables
Data Types
Functions
Arrays
Objects in
JavaScript
:
Boolean,
Number,
String,
Date,
Math
Regular JavaScript - 2/
Web Technologies (9FC06) - JS
UNIT 2 Introduction

JavaScript Introduction

Overview of JavaScript
JavaScript is a high-level, interpreted scripting language
primarily used for client-side web development.
It was introduced in 1995 by Netscape and has since
become one of the most widely used programming
languages.
JavaScript is known for its flexibility, as it allows
developers to create
dynamic and interactive web applications.
Importance in Web Development
JavaScript plays a crucial role in modern web development,
enabling the creation of dynamic user interfaces and
responsive web pages.
It is used for tasks such as form validation, DOM
manipulation, event handling, and asynchronous
programming.
With the advent of frameworks like React, Angular, and
JavaScript - 3/
Web Technologies (9FC06) - JS
UNIT 2 Introduction

Features of JavaScript
Dynamic Typing
JavaScript is dynamically typed, meaning variable types are
determined at runtime rather than compile time.
This allows for flexibility but can also lead to unexpected
behavior if types are not properly managed.
Prototype-based Inheritance
In JavaScript, objects inherit properties and methods
directly from other objects through prototypes.
This differs from class-based inheritance in languages
like Java or C++, providing a more flexible object
model.
First-class Functions
Functions in JavaScript are treated as first-class citizens,
meaning they can be assigned to variables, passed as
arguments, and returned from other functions.
This functional programming paradigm enables powerful
techniques like higher-order functions and closures.
JavaScript - 4/
Web Technologies (9FC06) - JS
UNIT 2 Introduction

Features of JavaScript (cont’d)


Event-driven Programming
JavaScript is inherently event-driven, allowing developers to
respond to user interactions and system events.
This asynchronous programming model is essential for
building interactive web applications.
DOM Manipulation
JavaScript provides powerful APIs for manipulating the
Document Object Model (DOM), which represents the
structure of a web page. Developers can dynamically update
the content, style, and structure of web pages in response to
user actions or other events.
Asynchronous Programming
JavaScript supports asynchronous programming through
mechanisms like callbacks, promises, and async/await.
This allows non-blocking execution of code, making it
possible to handle tasks such as fetching data from
servers or performing animations without freezing the
JavaScript - 5/
Web Technologies (9FC06) - UNIT 2 JS
Introduction

Include JS in HTML: Inline JavaScript


JavaScript code is directly embedded within the HTML
document using the < s c r i p t > tag.
< ! DOCTYPE html >
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
< ti t l e > I n l i n e J a v a S c r i p t Example < / ti t l e >
</ head >
<body >

<h1 > I n l i n e Java S c r i p t Example < / h1 >

<script >
/ / I n l i n e J a v a S c r i p t code
d o c u m e n t . w r i t e ( " H e l l o , World ! " ) ;
</ s c r i p t >

</ body >


</ html >
JavaScript - 6/
Web Technologies (9FC06) - UNIT 2 JS
Introduction

Include JS in HTML: Internal JavaScript


JavaScript code is placed within the < s c r i p t > tag inside
the HTML document’s <head> or <body> section. tag.
< ! DOCTYPE h t m l >
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
< ti t l e > I n t e r n a l J a v a S c r i p t E xam ple < / ti t l e >
<script > // I n te r n a l Java code
S c r i p t f u n c ti o n g r e e t ( ) {
a l e r t ( " H e l l o , World ! " ) ;
}
</ s c r i p t >
< / head >
<body >
<h1 > I n t e r n a l J a v a
S c r i p t E xam ple < /
h1 >
< b u tt o n o n c l i c k = "
g r e e t ( ) " > C l i c k me
< / b u tt o n > JavaScript - 7 / 49
Web Technologies (9FC06) - UNIT 2 JS
Introduction

Include JS in HTML: External JavaScript


JavaScript code is stored in an external .js file and linked to
the HTML document using the < s c r i p t > tag’s src attribute.
< ! - - i n d e x . html - - >
< h t m l l a n g = " en" >
<head >
< ti t l e > E x t e r n a l J a v a S c r i p t E xam ple < / ti t l e >
< s c r i p t s r c = " s c r i p t . j s " ></ s c r i p t >
< / head >
<body >
<h1 > E x t e r n a l J a v a S c r i p t E xam ple < / h1 >
<p i d = " demo " > < / p>
< b u tt o n o n c l i c k = " d i s p l a y D a t e ( ) " > C l i c k me < / b u tt o n >
< / body >
</ html >

// s c r i p t . j s
f u n c ti o n d i s p l a y D a t e ( )
{ document. getElementBy I d ( "
demo " ) . innerHTML = Date ( ) ;
} JavaScript - 8 / 49
Web Technologies (9FC06) - JS
UNIT 2 Variables

JavaScript Variables I
Declaration and Initialization
JavaScript variables are declared using the var, l e t , or const
keywords.
The var keyword was traditionally used for variable
declaration, but l e t and const introduced in ES6 provide
block-scoping and immutability, respectively.
Example:
var x = 5 ;
let y = ’Hello’;
const P I = 3 . 1 4 ;
Data Types
JavaScript variables can hold various data types, including
numbers, strings, booleans, objects, arrays, functions, and
symbols.
Unlike many other programming languages, JavaScript is
dynamically typed, meaning the type of a variable is
inferred at runtime.
JavaScript - 9 / 49
Web Technologies (9FC06) - JS
UNIT 2 Variables

JavaScript
Variables II

Variable Scope
Variables declared with var are function-scoped, whereas
variables declared with l e t and const are block-scoped.
Block-scoped variables are only accessible within the block
they are defined in, providing better control over variable
scope and reducing the risk of unintended side effects.
Hoisting
In JavaScript, variable declarations are hoisted to the
top of their containing scope during compilation.
However, only the declaration is hoisted, not the
initialization. This means that variables declared with var are
initialized with undefined until their value is assigned.

JavaScript - 10 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Rules for JavaScript Variable


Names

Variable names in JavaScript must begin with a letter (a-z,


A-Z), underscore ( ), or dollar sign ($). They cannot begin
with a number.
After the first character, variable names can include
letters, numbers, underscores, or dollar signs.
JavaScript variable names are case-sensitive, meaning
myVar and
myvar are treated as different variables.
Certain words are reserved in JavaScript and cannot
be used as variable names (e.g., c l a s s , functi on,
return, etc.).
Variable names should be meaningful and descriptive to
improve code readability.
JavaScript - 11 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Data Types
JavaScript variables can hold various data types, including
numbers, strings, booleans, objects, arrays, functions, and
symbols.
Unlike many other programming languages, JavaScript is
dynamically typed, meaning the type of a variable is
inferred at runtime.
We can know
< ! DOCTYPE the
html > type o f a va r i a b l e using typeof Operator
Example:
<html >
<head >
< ti t l e > H e l l o , World ! < / ti t l e >
</ head >
<body >
<h1 i d = " v t y p e " > </ h1 >
< s c r i p t type =" t e x t / j a v a s c r i p t "
> var a=4;
c o n s o l e . l o g ( t y p e o f ( a ) ) ; / / number
var b =5.6;

JavaScript - 12 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Data
Types
c o n s o l e . l o g ( t y p e o f ( b ) ) ; / / number
var c = ’ SNIST ’ ;
console . l o g ( typeof( c ) ) ; / /
s t r i n g v a r d= t r u e ;
c o n s o l e . l o g ( t y p e o f ( d ) ) ; / / number
</ s c r i p t >
</ body >
</ html >

Output:

JavaScript - 13 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Objects in JavaScript: Functions

In JavaScript, functions are first-class objects, which means


they can be treated like any other object.
The Function object is a global object and can be
constructed using the Func ti o n( ) constructor or by simply
declaring a function using the function declaration or
function expression syntax.
Functions in JavaScript are used to define reusable
blocks of code that can be invoked (called) with
different arguments.
They are often used to encapsulate functionality, organize
code, and promote reusability.
Functions in JavaScript can be anonymous or named, and
they can accept parameters and return values.
The Function object in JavaScript provides several
properties and methodsJavaScript
that can
- be used to manipulate 14 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Function Declaration vs. Function


Expression
In JavaScript, there are two common ways to define
functions:
1 Function Declaration:

Declared using the functi on keyword followed by the


function name and function body.
Can be invoked before they are declared due to
hoisting. Example:

2 Function Expression:
Defined using a variable assignment where the value is a
function. Cannot be invoked before they are defined.
Example:

JavaScript - 15 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Properties of the Function Object

The Function object in JavaScript has several properties,


including: length: Specifies the number of arguments
expected by the function. name: Returns the name of the
function.
prototype: Allows the addition of properties and methods to
the function’s prototype object.
These properties can be accessed using dot notation or
bracket notation.

JavaScript - 16 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Methods of the Function Object

The Function object in JavaScript also provides several methods,


including:
apply(): Calls a function with a given this value and
arguments provided as an array.
bind(): Creates a new function that, when called, has its
this keyword set to a specified value.
c a l l ( ) : Calls a function with a given this value and
arguments provided individually.
t o S t r i n g ( ) : Returns a string representing the source code of
the function.
These methods can be used to manipulate functions
dynamically at runtime.

JavaScript - 17 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Example: Using Function Object


Methods

l e t car={
name : " TATA "
}
f u n c ti o n d i s p l a y c a r ( c o l o r , p r i c e ) {
c o n s o l e . l o g ( " c a r name i s " + t h i s . name + " , C o l o r i s "
+ c o l o r + " and P r i c e i s " + p r i c e )
}
d i s p l a y c a r . c a l l ( c a r , " Red " , 1 2 0 0 0 0 0 ) ;
d i s p l a y c a r . a p p l y ( c a r , [ " Green " , 2 4 0 0 0 0 0 ] ) ;
v a r n e wca r = d i s p l a y c a r . b i n d ( c a r , " White " , 1 0 0 0 0 0 0 ) ;
newcar ( ) ;
co nso le . l o g ( d i s p l a y c a r. to S t r i n g ( ) ) ;

This example showcases the use of c a l l ( ) ,apply() and


bi nd ( )
methods to manipulate the function di s pl ayca r ( ) .

JavaScript - 18 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Objects in JavaScript: Array


Overview
The Array object represents ordered collections of values in
JavaScript. It is used for storing and manipulating lists of
data.
Method Description
concat() Joins two or more arrays and returns a new
array.
copyWithin() Copies array elements within the array, to and
from
specified positions.
entries() Returns a new Array Iterator object that
contains the
key/value pairs for each index in the array.
every () Checks if every element in an array pass a test.
fi l l ( ) Fills all the elements of an array from a start
index to
an end index with a static value.
fi l t e r ( ) Creates a new array with all elements that pass
the test
JavaScript - 19 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Objects in JavaScript: Array


Example:
< ! DOCTYPE html >
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
<meta name = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h ,
i n i ti a l - s c a l e = 1 . 0 " >
< ti t l e > A r r a y s < / ti t l e >
</ head >
<body >
< s c r i p t type =" t e x t / j a v a s c r i p t " >
l e t f r u i t s = [ ’ a p p l e ’ , ’ banana ’ , ’ c h e r r y ’ , ’ a p p l e
’ ] ; co n s o l e . l o g ( " Ar ray Length : " + f r u i t s . l e n g t h ) ;
let iterator = f r u i t s . entries ( ) ;
for ( l e t entry of f r u i t s ) {
console . l o g ( e n t r y ) ;
}

let startswith A=f r u i t s .


e v e r y ( f u n c ti o n ( f r u i t ) {
JavaScript - 20 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Objects in JavaScript:
Array
Example:r e(Continued...)
turn f r u i t [0]== " a";
});
co n s o l e . l o g ( " Ever y : " + sta r tsw it h A) ;

v a r x= f r u i t s . fi l t e r ( f u n c ti o n ( f r u i t ) {
return f r u i t [0]== " a";
});
console . l o g ( " F i l t e r : " + x ) ;

v a r x1 = f r u i t s . fi n d ( f u n c ti o n ( f r u i t )
{ return f r u i t [0]== " a";
});
c o n s o l e . l o g ( " F i n d : " +x1 ) ;

v a r x1 = f r u i t s . fi n d I n d e x ( f u n c ti o n ( f r u i t )
{ return f r u i t [0]== " a";
});
c o n s o l e . l o g ( " F i n d I n d e x " +x1 ) ;
JavaScript - 21 /
Web Technologies (9FC06) - JS
UNIT 2 Variables

Objects in JavaScript:
Array
f r u i t s(Continued...)
Example: . copyWithin (2 , 1 , 3 ) ;
c o n s o l e . l o g ( " a ft e r co py : " + f r u i t s ) ;

f r u i t s . fi l l ( 2 ) ;
console . l o g ( f r u i t s ) ;
</ s c r i p t >
</ body >
</ html >
Output:

JavaScript - 22 /
Web Technologies (9FC06) - UNIT 2 JS
Variables

Objects in JavaScript: Array (continued)

Other Array methods: fi ndIndex ( ) , fl a t ( ) , fl atMap(),


forEach() , i n c l u d e s ( ) , indexOf(), j o i n ( ) , keys(),
l a st I n d ex O f ( ) , map(), pop(), push(), reduce(),
reduceRight(), reverse() , s h i ft ( ) , s l i c e ( ) , some(), s o r t ( ) ,
s p l i c e ( ) , t o L o c a l e S t r i n g ( ) , t o S t r i n g ( ) , u n s h i ft ( ) , va l u e s ( )

Example
l e t f r u i t s = [ " A p p l e " , " Banana " , " Orange " ] ;
f r u i t s . push ( " Mango " ) ;
c o n s o l e . l o g ( f r u i t s ) ; / / O u t p u t : [ " A p p l e " , " Banana
" , " Orange " , " Mango " ]
console . l o g ( f r u i t s . j o i n ( " , " ) ) ; // Output: "
Apple , Banana , Orange , Mango "

JavaScript - 23 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript

Introduction
Objects are one of the most fundamental concepts in
JavaScript.
They are used to store collections of data and methods that
operate on that data.
Objects in JavaScript are dynamic, meaning they can be
modified at
runtime by adding or removing properties and methods.
Prototypes and Prototypal Inheritance
In JavaScript, objects can inherit properties and methods
from other objects through prototypes.
Every JavaScript object has a prototype chain, which
allows it to inherit properties and methods from its
prototype object.
Prototypal inheritance is a key feature of JavaScript
that allows for
JavaScript - 24 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: Creating


Objects
Objects in JavaScript can be created using object literals,
constructor functions, or the O b j e c t . c re at e ( ) method.
Example:
Object Literal: l e t person = { name: ’ V i j a y ’, age:
38 } ;
Constructor Function:
f u n c ti o n Pe r s o n ( name , age ) {
t h i s . name = name ;
t h i s . age = age ;
}
l e t p e r s o n = new
Person ( ’ R a m e s h ’ ,
Object.create():
38);
l e t person = O b j e c t . c r e a t e ( n u l l ) ;
p e r s o n . name = ’
R a m e s h ’ ; p e r s o n . age =
38;

JavaScript - 25 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: Properties and


Methods
Objects in JavaScript consist of key-value pairs, where keys
are called properties and values can be of any data type.
Methods are functions stored as object properties.
Properties and methods can be accessed using dot notation
or bracket notation.
Example:
let person = {
name : ’ Ramesh’ ,
age : 38 ,
sayHello :
f u n c ti o n ( ) {
console . l o g ( ’
H e l l o , my name
i s ’ + t h i s . name
);
}
};
JavaScript - 26 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript: Boolean

Overview
The Boolean object represents one of two values: true or
false. It is used for logical operations and conditional
expressions.
The Boolean value of 0, -0, ””(empty string), undefined,
null, false, NaN is false.
Method Description
valueOf() Returns the primitive value of the Boolean
toString() object.
Returns a string representation of the Boolean
object.
Example
l e t b o o l O b j = new B o o l e a n ( t r u e ) ;
c o n s o l e . l o g ( b o o l O b j . v a l u e Of ( ) ) ; / / O u t p u t : t r u e
co nso le . l o g ( b o o l O b j . to S t r i n g ( ) ) ; / / O utput: " true
"

JavaScript - 27 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript: Number

Overview
The Number object represents numerical values in
JavaScript.
It can represent integers, floating-point numbers, and
special numeric values like NaN and I n fi n i t y .
Method Description
valueOf() Returns the primitive value of the Number
toString() object.
to F i xe d ( ) Returns a string representation of the Number
object. Returns a string representing the
Number object using fixed-point notation.
Example
l e t num O bj = new Number ( 3 . 1 4 1 5 9 ) ;
c o n s o l e . l o g ( num O b j . t o F i x e d ( 2 ) ) ; / / O u t p u t : " 3 . 1 4 "

JavaScript - 28 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript: String


Overview
The String object represents textual data in
JavaScript.
It is used for manipulating and processing strings of
characters.
Method Description
cha rAt () Returns the character at the specified
index.
charCodeAt() Returns the Unicode value of the
character at
the specified index.
concat() Joins two or more strings and returns a
new
string.
indexOf() Returns the index within the calling String
object
of the first occurrence of the specified
value.
l a s t I n d ex O f ( ) Returns the index within the calling String
object
JavaScript - 29 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: String (continued)


Example:(Continued...)
< ! DOCTYPE html >
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
<meta name = " v i e w p o r t " c o n t e n t = " w i d t h =< d e v i c e - w i d t h > ,
i n i ti a l - s c a l e = 1 . 0 " >
< ti t l e > Document < / ti t l e >
</ head >
<body >
< s c r i p t type =" t e x t / j a v a s c r i p t " >
l e t s t r = " Welcome t o WT Te c h n o l o g i e s T r a i n i n g . " ;
f o r ( var i = 0 ; i < s t r. length ; i + + ) {
document. w r i t e ( " " + s t r [ i ] ) ;
}
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " C h a r a c t e r a t 5 : " + s t r . c h a r At ( 5 ) ) ;

document. w r i t e ( ’ < b r / > ’ ) ;


JavaScript - 30 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: String (continued)


Example:(Continued...)
d o c u m e n t . w r i t e ( " C h a r a c t e r Code a t 4 : " + s t r .
c h a r C o d e At ( 4 ) ) ;

str [0]= " v";


document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " 1 s t i n d e x n o t m o d i fi e d : " +str);//
s t r i n g i s immutable

v a r n e w s t r = s t r . c o n c a t ( " S N I S T welcomes you . " ) ;


document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " co n cate n ate d S t r i n g i s : " + n e w s t r ) ;

va r i n d ex= s t r . i n d e x O f ( " W");


document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " I ndex o f W
character : " + index);

vdaorc u m
i nednetx. =wsr ti tr e. l( a’ s<t bI nr /d >e ’x)O; f ( "
W"); JavaScript - 31 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: String (continued)


Example:(Continued...)
document. w r i t e ( " L a s t I ndex o f W c h a r a c t e r : " +
index);
va r newstr= s t r . r e p l a c e ( " W"," V " ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " R e p l a c e d One I n The S t r i n g : " + n e w st r
);

va r newstr= s t r . r e p l a c e A l l ( " W"," V " ) ;


document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " R e p l a c e d A l l I n The S t r i n g : " + n e w st r
);

va r newstr= s t r . s l i c e ( 1 , 6 ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " S l i c e d S t r i n g : " + n e w s t r ) ;

var s p l i t s t r = s t r. s p l i t ( " " ) ;


document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . wr i t e ( " S pJavaScript
l i tt e d- S t r i n g l e n gt h : " + s p l i t s t r . 32 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: String (continued)


Example:(Continued...)
d o c u m e n t . w r i t e ( " S p l i tt e d String length : " + s p l i t s t r.
length ) ;

va r newstr= s t r . s u b s t r ( 1 , 2 ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " s u b s t r : " + n e w s t r ) ;

va r newstr= s t r . s u b s t r i n g ( 1 , 6 ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " s u b s t r i n g : " + n e w s t r ) ;

va r newstr= s t r . to UpperCase ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " Uppercase : " + n e w s t r ) ;

va r newstr= s t r . to LowerCase ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " Lowercase : " + n e w s t r ) ;
JavaScript - 33 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: String (continued)


Example:(Continued...)
va r newstr= s t r . t r i m ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " t r i m : " + n e w s t r ) ;
</ s c r i p t >
</ body >
</ html >
Output:

JavaScript - 34 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript: Date


Overview
The Date object represents dates and times in
JavaScript. It is used for working with dates, times,
and time intervals.
Method Description
getDate() Returns the day of the month (1-31) for
the
specified date.
getDay() Returns the day of the week (0-6) for the
speci-
fied date.
ge t F u l l Ye a r ( ) Returns the year (4 digits for dates
between 1000
and 9999) for the specified date.
getHours() Returns the hour (0-23) in the specified
date
according to local time.
get Milliseco n d s() Returns the milliseconds (0-999) in the
specified
date. 35 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript:
Date
< ! DOCTYPE html >
Example:
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
<meta name = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h ,
i n i ti a l - s c a l e = 1 . 0 " >
< ti t l e > Document < / ti t l e >
</ head >
<body >
< s c r i p t type =" t e x t / j a v a s c r i p t "
> v a r d= new Date ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " C u r r e n t Date :
" +d);

var x = d . getDate ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " C u r r e n t Day : " + x ) ;
v a r x = d . g e t Month ( ) JavaScript
; - 36 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript:
Date

Example:(Continued...)
v a r x = d . getMonth ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " C u r r e n t Month : " +( x + 1 ) ) ;

var x = d . g e t F u l l Ye a r ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " C u r re n t F u l l Ye a r : " + x ) ;

var x = d . getHours ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " H o urs : " + x ) ;

var x = d . getMinutes ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " M i n u te s : " +x);

JavaScript - 37 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript:
Date
Example:(Continued...)
var x=d. getSeconds ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
document. w r i t e ( " Seconds : " +x);

</ s c r i p t >
</ body >
</ html >

Output:

JavaScript - 38 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: Date


(Continued)
Other date methods” getTime(), getTimezoneOff set(),
getUTCDate(), getUTCDay(), getUTCFullYear(),
getUTCHours(), getUTCMilliseconds() , getUTCMinutes(),
getUTCMonth(), getUTCSeconds(), setDate(), s et F u l l Ye a r ( ) ,
setHours(), s et M i l l i s e co nds ( ) , setMinutes(), setMonth(),
setSeconds(), setTime(), setUTCDate(), setUTCFullYear(),
setUTCHours(), setUTCMilliseconds() , setUTCMinutes(),
setUTCMonth(), setUTCSeconds()
Example
v a r x = d . g e t U TC D a t e ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " C u r r e n t UTC Date : " + x ) ; / / 21

v a r x = d . g e t U TC H o u r s ( ) ;
document. w r i t e ( ’ < b r / > ’ ) ;
d o c u m e n t . w r i t e ( " H o urs : " + x ) ; / /
7
JavaScript - 39 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Objects in JavaScript: Math

Overview
The Math object provides mathematical constants and
functions in JavaScript.
It is used for performing mathematical operations such as
trigonometry, logarithms, and exponentiation.

Method Description
a bs ( ) Returns the absolute value of a number.
a co s ( ) Returns the arccosine of a number.
acosh() Returns the hyperbolic arccosine of a number.
asin() Returns the arcsine of a number.
asinh() Returns the hyperbolic arcsine of a number.
ata n ( ) Returns the arctangent of a number.
atan2() Returns the arctangent of the quotient of its
arguments.
atanh() Returns the hyperbolic arctangent of a number.
cbrt() Returns the cube root of a number.
JavaScript - 40 /
Web Technologies (9FC06) - UNIT 2 JS
Objects

Objects in JavaScript: Math (continued)

Other math methods: c e i l ( ) , c l z 3 2 ( ) , co s ( ) , cosh(), exp(),


expm1(), fl o o r ( ) , fround(), hypot(), imul() , l o g ( ) , log10(),
log1p() , l o g 2 ( ) , max(), min(), pow(), random(), round(),
s i g n ( ) , s i n ( ) , s i n h ( ) , s q r t ( ) , tan( ) , tanh(), t r u n c ( )

Example
console . l o g ( Math . a b s ( - 5 ) ) ; / / O u t p u t : 5
console . l o g ( Math . s q r t ( 2 5 ) ) ; / / O u t p u t : 5
console . l o g ( Math . s i n ( Math . P I / 2 ) ) ; / / O u t p u t : 1
(
sine o f 90 d e g r e e s )

JavaScript - 41 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Regular Expression
Overview
Regular expressions (regex) are patterns used to match
character combinations in strings.
They are used for searching, replacing, and validating
strings based on
patterns.
Method Description
exec() The exec() methods searches a string for a
specified
value and returns the first match. or else
returns null
test() The test() method tests for a match in a
string and
returns true or false.
match() The match() method retrieves the matches of a
pattern
in a string. It returns an array of matches or
null if no match is found.
search () The search() method searches for a pattern in a
string JavaScript - 42 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Regular
Expression

Method Description
re p l a c e ( ) The replace() method searches for a pattern in a
string
and replaces it with a replacement string.
split() The split() method splits a string into an array
of sub-
strings using the pattern as a delimiter.

JavaScript - 43 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Regular
Expression
< ! DOCTYPE html >
Example:
< h t m l l a n g = " en" >
<head >
<meta c h a r s e t = " UTF - 8 " >
<meta name = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h ,
i n i ti a l - s c a l e = 1 . 0 " >
< ti t l e > Document < / ti t l e >
</ head >
<body >
< s c r i p t type =" t e x t / j a v a s c r i p t " >
/ / 1 . i : c a s e - i n s e n s i ti v e
v a r t e x t = " Welcome t o my w o r l d o r y o u r World " ;
v a r p a tt e r n = / welcome / i ;
v a r r e s u l t = t e x t . match ( p a tt e r n ) ;
c o n s o l e . l o g ( r e s u l t ) ; / / Welcome

/ / e m a i l p a tt e r n s e a r c h
v a r e m a i l P a tt e r n = / ^ [ ^ \ s@ ]+@
v[ ^a \r s@
em] +a \i l.=[ "^ \v is@
j a y] +k u$m
/ ;a r. b@- s r e e n i d h i . edu . i n " ;
JavaScript 44 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Regular Expression
Example: (Continued..)
v a r e m a i l = " v i j a y k u m a r. b@ s r e e n i d h i . edu . i n " ;
v a r r e s u l t = e m a i l . s e a r c h ( e m a i l P a tt e r n ) ;
console . l o g ( r e s u l t ) ;

/ / e m a i l p a tt e r n t e s t
v a r e m a i l P a tt e r n 1 = / ^ [ ^ \ s@ ]+@ [ ^ \ s@ ] + \ . [ ^ \ s@ ] +
$ / ; v a r e m a i l = " v i j a y k u m a r. b@ s r e e n i d h i . edu . i n " ;
v a r r e s u l t = e m a i l P a tt e r n 1 . t e s t ( e m a i l ) ;
console . l o g ( r e s u l t ) ;

/ / e m a i l p a tt e r n exec
v a r e m a i l P a tt e r n 2 = / ^ [ ^ \ s@ ]+@ [ ^ \ s@ ] + \ . [ ^ \ s@ ] +
$ / ; v a r e m a i l = " v i j a y k u m a r. b s r e e n i d h i . edu . i n " ;
v a r r e s u l t = e m a i l P a tt e r n 2 . e x e c ( e m a i l ) ;
console . l o g ( r e s u l t ) ;

v a r p a tt e r n = / a p p l e s / ;
v a r s t r = " I have 2 a p p l e s . " ;
JavaScript - 45 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Regular
Expression
Example:
v a r r e(Continued..)
s u l t = s t r . r e p l a c e ( p a tt e r n , " o r a n g e s " ) ;
console . l o g ( r e s u l t ) ; // " I have 2 o r a n g e s . "

v a r p a tt e r n = / \ s + / ; / / Matches one o r more s p a c e s


va r s t r = " H e l l o world ! " ;
v a r r e s u l t = s t r . s p l i t ( p a tt e r n ) ; / / [ " H e l l o " , " w o r l d ! " ]
console . l o g ( r e s u l t ) ;
</ s c r i p t >
</ body >
</ html >

Output:

JavaScript - 46 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Questio
ns

Short Answer
Questions
1 Explain the role of JavaScript in web development.

2 What is the difference between let, const, and var in


3 JavaScript?
What is the difference between a function declaration and
4 a function expression?
5 How do you create an array in JavaScript?
What is a regular expression, and how is it used in
JavaScript?

JavaScript - 47 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Questions
Long Answer
Questions
1 Discuss the evolution of JavaScript from its inception to its

current role in modern web development. How has JavaScript’s


role expanded beyond client-side scripting, and what are some
of the major frameworks and technologies built on JavaScript
2 today?
Explain the concept of variable scope in JavaScript. How do
global, function, and block scopes differ, and how do closures
3 relate to variable scope?
Discuss the implications of scope in writing maintainable and bug-
free code.
Discuss the importance of array manipulation in JavaScript. How
4 can array methods like push, pop, shift, unshift, splice, and slice
be used to add, remove, or modify elements within an array?
Provide examples to illustrate their usage.
Explain the concept of regular expressions in JavaScript. How
can regular expressions be used for pattern matching and string
manipulation? Provide examples
JavaScript - of how regular expressions can 48 /
Web Technologies (9FC06) - JS Objects
UNIT 2

Thank
You

JavaScript - 49 /

You might also like