Noida Institute of Engineering and Technology, Greater Noida

WEB TECHNOLOGY

Unit: 4

Web Technology
ACSE-0505
Ms Vaishali Mishra
Asstt Professor
B.Tech 5th Sem CSE Department

ACSE0505 (Web Tech) Unit 4

1
6/04/2023
 Noida Institute of Engineering and Technology, Greater Noida

Course Board / University Year Of Passing

M. Tech GBTU, Lucknow 2009

B.tech UPTU, Lucknow 2013

Experience : 4 years teaching experience

Research paper: Published Three international
and Two national
Areas of interest: Java, SE, DS, Machine Learning

ACSE0505 (Web Tech) Unit 4

2
6/04/2023
 Table of Contents
1.Name of Subject with code, Course and Subject Teacher
2.Brief Introduction of Faculty member with Photograph
3.Evaluation Scheme
4.Subject Syllabus
5.Branch wise Applications
6.Course Objective (Point wise)
7.Course Outcomes (COs)
8.Program Outcomes only heading (POs)
9.COs and POs Mapping
10.Program Specific Outcomes (PSOs)

6/04/2023 ACSE0505 (Web Tech) Unit 4 3

 Conti….
11.COs and PSOs Mapping
12.Program Educational Objectives (PEOs)
13.Result Analysis (Department Result, Subject Result and Individual
Faculty Result)
14.End Semester Question Paper Templates (Offline Pattern/Online
Pattern)
15.Perquisite/ Recap
16.Brief Introduction about the Subject with videos
17.Unit Content
18.Unit Objective
19.Topic Objective/Topic Outcome
20.Lecture related to topic
21.Daily Quiz
22.Weekly Assignment
6/04/2023 4
ACSE0505 (Web Tech) Unit 4
 Conti…
23Topic Links
24MCQ (End of Unit)
25Glossary Questions
26Old Question Papers (Sessional + University)
27Reference
28Recap of Unit

6/04/2023 ACSE0505 (Web Tech) Unit 4 5

 Evaluation Scheme

6/04/2023 ACSE0505 (Web Tech) Unit 4 6

 Syllabus Unit -1 8 Hours

Introduction: Introduction to Web Technology, History of Web and Internet,

Connecting to Internet, Introduction to Internet services and tools, Client-Server
Computing, Protocols Governing Web, Basic principles involved in developing
a web site, Planning process, Types of Websites, Web Standards and W3C
recommendations.

Web Hosting: Web Hosting Basics, Types of Hosting Packages, Registering

domains, Defining Name Servers, Using Control Panel, Creating Emails in
Cpanel, Using FTP Client, Maintaining a Website.

6/04/2023 ACSE0505 (Web Tech) Unit 4 7

 Syllabus Unit -2 8 Hours

HTML: What is HTML, DOM- Introduction to Document Object Model,

Basic structure of an HTML document, Mark up Tags, Heading-Paragraphs ,
Line Breaks, Understand the structure of HTML tables. Lists, Working with
Hyperlinks, Image Handling, Understanding Frames and their needs, HTML
forms for User inputs. New form Elements- date, number, range, email,
search and data list, Understanding audio, video and article tags.

XML: Introduction, Tree, Syntax, Elements, Attributes, Namespaces,

Display, HTTP request, Parser, DOM, XPath, XSLT, XQuerry, XLink,
Validator, DTD, Schema, Server

6/04/2023 ACSE0505 (Web Tech) Unit 4 8

 Syllabus Unit -3 8 Hours

Concept of CSS 3: Creating Style Sheet, CSS Properties,CSS

Styling(Background, Text Format, Controlling Fonts) , Working with block
elements and objects , Working with Lists and Tables , CSS Id and Class, Box
Model(Introduction, Border properties, Padding Properties, Margin properties)
CSS Advanced(Grouping, Dimension, Display, Positioning, Floating, Align,
Pseudo class, Navigation Bar, Image Sprites, Attribute sector) , CSS Color,
Creating page Layout and Site.

Bootstrap: Introduction, Bootstrap grid system, Bootstrap Components.

6/04/2023 ACSE0505 (Web Tech) Unit 4 9

 Syllabus Unit -4 8 Hours

JavaScript Essentials: Introduction to Java Script , Java script Types , Var, Let
and Const Keywords, Operators in JS , Conditions Statements , Java Script
Loops, JS Popup Boxes , JS Events , JS Arrays, Working with Arrays, JS
Objects ,JS Functions , Using Java Script in Real time , Validation of Forms,
Arrow functions and default arguments, Template Strings, Strings methods,
Callback functions,
Object de-structuring, Spread and Rest Operator, Typescript fundamentals,
Typescript OOPs- Classes, Interfaces, Constructor etc. Decorator and Spread
Operator,
Difference == & ===, Asynchronous Programming in ES6, Promise
Constructor, Promise with Chain, Promise Race.

6/04/2023 ACSE0505 (Web Tech) Unit 4 10

 Syllabus Unit -5 8 Hours

Introduction to PHP, Basic Syntax, Variables & Constants, Data Type,

Operator & Expressions, Control flow and Decision making statements,
Functions, Strings, Arrays,

Working with files and directories: Understanding file& directory, Opening

and closing, a file, Coping, renaming and deleting a file, working with
directories, Creating and deleting folder, File Uploading & Downloading.

Session & Cookies: Introduction to Session Control, Session Functionality

What is a Cookie, Setting Cookies with PHP. Using Cookies with Sessions,
Deleting Cookies, Registering Session variables, Destroying the variables and
Session.

6/04/2023 ACSE0505 (Web Tech) Unit 4 11

 Text Books

Text books:

1. Steven M. Schafer, “HTML, XHTML, and CSS Bible, 5ed”, Wiley India

2. Ian Pouncey, Richard York, “Beginning CSS: Cascading Style Sheets for Web
Design”, Wiley India

6/04/2023 ACSE0505 (Web Tech) Unit 4 12

 Branch Wise Applications

Sample Applications
 Desktop GUI Applications
 Mobile Applications
 Enterprise Applications
 Scientific Applications
 Web-based Applications
 Cloud-based Applications
 Web servers and Application servers
 Software Tools

6/04/2023 ACSE0505 (Web Tech) Unit 4 13

 Course Objective

This course covers different aspect of web technology such as

HTML, CSS, and issues of web technology, client and server side
issue.
The general objectives of this course are to provide
fundamental concepts of Internet; Web Technology and Web
Programming.
Students will be able to build a proper responsive website.

6/04/2023 ACSE0505 (Web Tech) Unit 4 14

 Course Outcome
At the end of the semester, student will be able to:

6/04/2023 ACSE0505 (Web Tech) Unit 4 15

 Program Outcome

• 1. Engineering knowledge:
• 2. Problem analysis:
• 3. Design/development of solutions:
• 4. Conduct investigations of complex problems:
• 5. Modern tool usage:
• 6. The engineer and society:
• 7. Environment and sustainability:
• 8. Ethics:
• 9. Individual and team work:
• 10. Communication:
• 11. Project management and finance:
• 12. Life-long learning
6/04/2023 ACSE0505 (Web Tech) Unit 4 16
 CO-PO Mapping
Mapping of Course Outcomes and Program Outcomes:

6/04/2023 ACSE0505 (Web Tech) Unit 4 17

 Result Analysis(2023-24)

6/04/2023 ACSE0505 (Web Tech) Unit 4 18

 Program Specific Outcomes

• PSO1: Identify, analyze real world problems and design their ethical
solutions using artificial intelligence, robotics, virtual/augmented
reality, data analytics, block chain technology, and cloud computing.
• PSO2:Design and develop the hardware sensor devices and related
interfacing software systems for solving complex engineering
problems.
• PSO3:Understand inter-disciplinary computing techniques and to
apply them in the design of advanced computing.
• PSO4: Conduct investigation of complex problems with the help of
technical, managerial, leadership qualities, and modern engineering
tools provided by industry-sponsored laboratories.

6/04/2023 ACSE0505 (Web Tech) Unit 4 19

 COs and PSOs Mapping

Mapping of Program Specific Outcomes and Course Outcomes:

Course Outcomes Program Specific Outcomes

PSO1 PSO2 PSO3 PSO4

CO1 3 1 1 1

CO2 1 2 3 1

CO3 2 3 2 1

CO4 3 2 3 2

CO5 2 1 2 3

AVG 2.2 1.8 2.2 1.6

6/04/2023 ACSE0505 (Web Tech) Unit 4 20

 Program Educational Objectives

• PEO1: To have an excellent scientific and engineering breadth

so as to comprehend, analyze, design and provide sustainable
solutions for real-life problems using state-of-the-art
technologies.
• PEO2:To have a successful career in industries, to pursue
higher studies or to support entrepreneurial endeavors and to
face global challenges.
• PEO3:To have an effective communication skill, professional
attitude, ethical values and a desire to learn specific knowledge
in emerging trends, technologies for research, innovation and
product development and contribution to society.
• PEO4: To have life-long learning for up-skilling and re-skilling
for a successful professional career as an engineer, scientist,
entrepreneur, or bureaucrat for the betterment of society.
6/04/2023 ACSE0505 (Web Tech) Unit 4 21
 End Semester Question Paper Template

B TECH
(SEM-V) THEORY EXAMINATION 20__-20__
Time: 3 Hours Total
Marks: 100
Note: 1. Attempt all Sections. If require any missing data; then choose
suitably.
SECTION A
1. Attempt all questions in brief. 1 x 10 =
10
Q.No. Question Marks CO
1 1
2 1
. .
10 1

6/04/2023 ACSE0505 (Web Tech) Unit 4 22

 End Semester Question Paper Templates

2. Attempt of the following: 5 x 2 = 20

Q.No. Question Marks CO
1 2
2 2
“””
‘”
5 2

SECTION B
3. Attempt any five part of the following: 5 x 6 = 30

Q.No. Question Marks CO

1 6
. 6
7 6
6/04/2023 ACSE0505 (Web Tech) Unit 4 23
 End Semester Question Paper Templates

4. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10
5. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO
1 10
2 10
6. Attempt any one part of the following: 1 x 10 = 10
Q.No. Question Marks CO

1 10
2 10

6/04/2023 ACSE0505 (Web Tech) Unit 4 24

 End Semester Question Paper Templates

7. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10

8. Attempt any one part of the following: 1 x 10 = 10

Q.No. Question Marks CO

1 10
2 10

6/04/2023 ACSE0505 (Web Tech) Unit 4 25

 Prerequisite

Basic Knowledge of any programming language like

C/C++/Python/Java. .

Familiarity with basic concepts of Internet.

6/04/2023 ACSE0505 (Web Tech) Unit 4 26

 Brief Introduction About The Subject
Web technologies are the various tools and techniques that are
utilized in the process of communication between different types of
devices over the internet.
To understand this term in a better manner, let’s break it down into
two pieces: ‘web’ and ‘technology’.
The web, in this case, refers to the World Wide Web, more commonly
known as WWW.
It first came into being in 1989 when famous scientist and engineer,
Tim Berners-Lee, came up with an efficient mechanism to share
resources between scientists all over the world.
https://www.youtube.com/results?
search_query=Web+Technonogies

6/04/2023 ACSE0505 (Web Tech) Unit 4 27

 Unit 4 Content

 Introduction to Java Script ,

 Java script Types , Var, Let and Const Keywords,
 Operators in JS ,
 Conditions Statements , Java Script Loops, JS Popup Boxes , JS
Events ,
 JS Arrays, Working with Arrays, JS Objects ,JS Functions ,
 Using Java Script in Real time , Validation of Forms, Arrow functions
and default arguments,
 Template Strings, Strings methods, Callback functions,
 Object de-structuring, Spread and Rest Operator, Typescript
fundamentals, Typescript OOPs- Classes, Interfaces, Constructor etc.
Decorator and Spread Operator,
 Difference == & ===, Asynchronous Programming in ES6, Promise
Constructor, Promise with Chain, Promise Race.

6/04/2023 ACSE0505 (Web Tech) Unit 4 28

 Unit 4 Objective

Objective of Unit 4:
• To understand the basics of working with objects in JavaScript: creating
objects, accessing and modifying object properties using constructors.
understating various function, loop, array, string etc.

6/04/2023 ACSE0505 (Web Tech) Unit 4 29

 Topic Objective/Outcome

Objective of the above topics:

•To know the basics of difference between HTML,CSS and JavaScript

•To get the knowledge about JAVA & JavaScript

•To learn how various datatypes, variables, keywords, operators etc.

•To learn various conditional statement, loop, types of function , how

argument pass between function

6/04/2023 ACSE0505 (Web Tech) Unit 4 30

 Introduction to javascript

What is JavaScript?
 JavaScript is a programming language used to make websites interactive. If you think about the basic
makeup of a website, you have HTML, which describes and defines the basic content and structure
of the website, then you have CSS, which tells the browser how this HTML content should be
displayed—determining things like color and font.

 With just HTML and CSS, you have a website that looks good but doesn’t actually do much.
JavaScript brings the website to life by adding functionality. It’s is responsible for elements that the
user can interact with, such as drop-down menus, modal windows, and contact forms. It is also used
to create things like animations, video players, and interactive maps

6/04/2023 ACSE0505 (Web Tech) Unit 4 31

 Javascript cont..

a lightweight, cross platform and interpreted programming language ("scripting

language")

used to make web pages interactive

insert dynamic text into HTML (ex: user name)
Java script is a language that is used widely on both the client and server sides
of development
react to events (ex: page load user click)
get information about a user's computer (ex: browser type)
perform calculations on user's computer (ex: form validation)
a web standard (but not supported identically by all browsers)
Java script offers a vast standard library that has a wide variety of functions
and methods available to help in the process of development, making the
entire process easier and hassle-free
Subprogram can be added at run time
Text of program code can be directly executed

6/04/2023 ACSE0505 (Web Tech) Unit 4 32

 Features of javascript

Javascript is a lightweight, cross-platform, and interpreted language.

It was developed with the main intention of DOM manipulation, bringing
forth the era of dynamic websites.
Javascript functions are objects and can be passed in other functions as
parameters.
Can handle date and time manipulation.
Can perform Form Validation.
A compiler is not needed.

6/04/2023 ACSE0505 (Web Tech) Unit 4 33

 Self-Invoking Functions

• Function
. expressions can be made "self-invoking".
• A self-invoking expression is invoked (started) automatically, without being called.
• Function expressions will execute automatically if the expression is followed by ().
• You cannot self-invoke a function declaration.
• we have to add parentheses around the function to indicate that it is a function
expression:
Example
(function () {
let x = "Hello!!"; // I will invoke myself
})();

• The function above is actually an anonymous self-invoking function (function

without name)

6/04/2023 ACSE0505 (Web Tech) Unit 4 34

 Contd..

Number type
var enrollment = 99;
var medianGrade = 2.8;
Vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
var credits = 5 + 4 + (2 * 3);
vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv
JS

 integers and real numbers are the same type (no int vs. double)
 same operators: + - * / % ++ -- = += -= *= /= %=
 similar precedence to Java
 many operators auto-convert types: "2" * 3 is 6

6/04/2023 ACSE0505 (Web Tech) Unit 4 35

 Contd.

Comments (same as Java)

// single-line comment
/* multi-line comment */
JS

 identical to Java's comment syntax

 recall: 4 comment syntaxes
o HTML: <!-- comment -->
o CSS/JS/PHP: /* comment */
o Java/JS/PHP: // comment
o PHP: # comment

6/04/2023 ACSE0505 (Web Tech) Unit 4 36

 Contd..

Math object

var rand1to10 = Math.floor(Math.random() * 10 + 1);

var three = Math.floor(Math.PI);
JS

 methods: abs, ceil, cos, floor, log, max, min, pow, random, round,
sin, sqrt, tan
 properties: E, PI

6/04/2023 ACSE0505 (Web Tech) Unit 4 37

 Contd

Logical operators

 > < >= <= && || ! == != === !==

 most logical operators automatically convert types:
o 5 < "7" is true
o 42 == 42.0 is true
o "5.0" == 5 is true
 === and !== are strict equality tests; checks both type and value
 "5.0" === 5 is false

6/04/2023 ACSE0505 (Web Tech) Unit 4 38

 Conditional statements

• if/else statement (same as Java)

if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
JS
 identical structure to Java's if/else statement
 JavaScript allows almost anything as a condition

6/04/2023 ACSE0505 (Web Tech) Unit 4 39

 Contd..

Boolean type
var iLike190M = true;
var ieIsGood = "IE6" > 0; // false
if ("web devevelopment is great") { /* true */ }
if (0) { /* false */ }
JS
 any value can be used as a Boolean
 "falsey" values: 0, 0.0, NaN, "", null, and undefined
 "truthy" values: anything else
 converting a value into a Boolean explicitly:
 var boolValue = Boolean(otherValue);
 var boolValue = !!(otherValue);

6/04/2023 ACSE0505 (Web Tech) Unit 4 40

 Java script Loops

for loop (same as Java)

var sum = 0;
for (var i = 0; i < 100; i++) {
sum = sum + i;
}
JS
var s1 = "hello";
var s2 = "";
for (var i = 0; i < s.length; i++) {
s2 += s1.charAt(i) + s1.charAt(i);
}
// s2 stores "hheelllloo"
JS

6/04/2023 ACSE0505 (Web Tech) Unit 4 41

 Contd..

while loops (same as Java)

while (condition) {
statements;
} JS

do {
statements;
} while (condition);
JS

break and continue keywords also behave as in Java

6/04/2023 ACSE0505 (Web Tech) Unit 4 42

 JS Popup boxes

alert("message"); // message
confirm("message"); // returns true or false
prompt("message"); // returns user input string
JS

6/04/2023 ACSE0505 (Web Tech) Unit 4 43

 Java script Events

• HTML events are "things" that happen to HTML elements.

• When JavaScript is used in HTML pages, JavaScript can "react" on these
events.
HTML Events
 An HTML event can be something the browser does, or something a user
does.
 Here are some examples of HTML events:
 An HTML web page has finished loading
 An HTML input field was changed
 An HTML button was clicked
 Often, when events happen, you may want to do something.
 JavaScript lets you execute code when events are detected.
 HTML allows event handler attributes, with JavaScript code, to be added to
HTML elements.
With single quotes:
<element event='some JavaScript’>

With double quotes:

<element event="some JavaScript">

6/04/2023 ACSE0505 (Web Tech) Unit 4 44

 Common HTML Events

Common HTML Events

Event Description
onchange An HTML element has been
changed
onclick The user clicks an HTML
element
onmouseover The user moves the mouse
over an HTML element
onmouseout The user moves the mouse
away from an HTML element
onkeydown The user pushes a keyboard
key
onload The browser has finished
loading the page

6/04/2023 ACSE0505 (Web Tech) Unit 4 45

 JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user
actions, and browser actions:
 Things that should be done every time a page loads
 Things that should be done when the page is closed
 Action that should be performed when a user clicks a button
 Content that should be verified when a user inputs data
 And more ...

Many different methods can be used to let JavaScript work with events:
 HTML event attributes can execute JavaScript code directly
 HTML event attributes can call JavaScript functions
 You can assign your own event handler functions to HTML elements
 You can prevent events from being sent or being handled
 And more ...

6/04/2023 ACSE0505 (Web Tech) Unit 4 46

 JS
Arrays

var name = []; // empty array

var name = [value, value, ..., value]; // pre-filled
name[index] = value; // store element
JS

var ducks = ["Huey", "Dewey", "Louie"];

var stooges = []; // stooges.length is 0
stooges[0] = "Larry"; // stooges.length is 1
stooges[1] = "Moe"; // stooges.length is 2
stooges[4] = "Curly"; // stooges.length is 5
stooges[4] = "Shemp"; // stooges.length is 5
JS

6/04/2023 ACSE0505 (Web Tech) Unit 4 47

 Working with Arrays

var a = ["Stef", "Jason"]; // Stef, Jason

a.push("Brian"); // Stef, Jason, Brian
a.unshift("Kelly"); // Kelly, Stef, Jason, Brian
a.pop(); // Kelly, Stef, Jason
a.shift(); // Stef, Jason
a.sort();
array serves
//asJason,
many data
Stefstructures: list, queue, stack, ...
 methods: concat, join, pop, push, reverse, shift, slice, sort, splice,JS
toString, unshift
• push and pop add / remove from back
• unshift and shift add / remove from front
• shift and pop return the element that is removed

6/04/2023 ACSE0505 (Web Tech) Unit 4 48

 JavaScript Objects

Real Life Objects, Properties, and Methods

In real life, a car is an object. A car has properties like weight and color,
and methods like start and stop:

• All cars have the same properties, but the property values differ from car to
car.
• All cars have the same methods, but the methods are performed at different
times.

6/04/2023 ACSE0505 (Web Tech) Unit 4 49

 JavaScript Objects

JavaScript Objects
• This code assigns a simple value (Fiat) to a variable named car:
let car = "Fiat";
Objects are variables too. But objects can contain many values.
this code assigns many values (Fiat, 500, white) to a variable named
car:
const car = {type:"Fiat", model:"500", color:"white"};
Object Definition
• You define (and create) a JavaScript object with an object literal:
Example
const person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
• Spaces and line breaks are not important. An object definition can
span multiple lines:
const person = {
firstName: "John",
lastName: "Doe",
6/04/2023 ACSE0505 (Web Tech)50,
age: Unit 4 50
 Contd….

Object Properties
The name : values pairs in JavaScript objects are called properties
Property Property Value
firstName John
lastName Doe
age 50
eyeColor blue

Accessing Object Properties

• You can access object properties in two ways:
• objectName.propertyName
• Object Methods
• Objects can also have methods.
• Methods are actions that can be performed on objects.
6/04/2023 ACSE0505 (Web Tech) Unit 4 51
• Methods are stored in properties as function definitions.
 JavaScript Function Definitions

• Javascript functions are defined with function keyword

• You can use a function declaration or a function expression
Function Declarations
function functionName(parameters) {
// code to be executed
}
Declared functions are not executed immediately. They are "saved for later use", and
will be executed later, when they are invoked (called upon).
function myFunction(a, b) {
return a * b;
}
Function Expressions
A JavaScript function can also be defined using an expression
A function expression can be stored in a variable:
const x = function (a, b) {return a * b};

6/04/2023 ACSE0505 (Web Tech) Unit 4 52

 Cont….

 After a function expression has been stored in a variable, the

variable can be used as a function:
const x = function (a, b) {return a * b};
let z = x(4, 3);
 The function above is actually an anonymous function (a function
without a name).
 Functions stored in variables do not need function names. They are
always invoked (called) using the variable name.
The Function() Constructor
 Function can be defined with a built-in java script function
constructor called function()
const myFunction = new Function("a", "b", "return
a *b");

let x = myFunction(4, 3);

6/04/2023 ACSE0505 (Web Tech) Unit 4 53

 Self-Invoking Functions

• Function expressions can be made "self-invoking".

• A self-invoking expression is invoked (started) automatically,
without being called.
• Function expressions will execute automatically if the expression is
followed by ().
• You cannot self-invoke a function declaration.
• we have to add parentheses around the function to indicate that it
is a function expression:
Example
(function () {
let x = "Hello!!"; // I will invoke myself
})();

• The function above is actually an anonymous self-invoking

function (function without name)

6/04/2023 ACSE0505 (Web Tech) Unit 4 54

 Arrow Functions

Arrow functions allows a short syntax for writing function expressions.

Example :
// ES5
var x = function(x, y) {
return x * y;
}

// ES6
const x = (x, y) => x * y;
 Arrow functions do not have their own this. They are not well suited for
defining object methods
 Arrow functions are not hoisted. They must be defined before they are
used
 Using const is safer than using var, because a function expression is
always constant value.
 You can only omit the return keyword and the curly brackets if the
function is a single statement. Because of this, it might be a good habit
to always keep them:
Example
const x = (x, y) => { return x * y };

6/04/2023 ACSE0505 (Web Tech) Unit 4 55

 JavaScript Function Parameters

A JavaScript function does not perform any checking on parameter values

(arguments).
function functionName(parameter1, parameter2, parameter3)
{
// code to be executed
}
Function parameters are the names listed in the function definition.
Function arguments are the real values passed to (and received by) the function
Parameter Rules
• JavaScript function definitions do not specify data types for parameters.
• JavaScript functions do not perform type checking on the passed arguments.
• JavaScript functions do not check the number of arguments received.
Default Parameters
• If a function is called with missing arguments (less than declared), the missing
values are set to undefined
function myFunction(x, y) {
if (y === undefined) {
y = 2;
}
}

6/04/2023 ACSE0505 (Web Tech) Unit 4 56

 Topic

Objective of the above topics:

•To learn the fundamentals of typescript

•To learn the creation of object in ES6.

•To get the knowledge about Programming in ES6.

•To learn the OOPS concepts by using ES6 Programming.

•To learn the concept of ES6 constructor chaning

6/04/2023 ACSE0505 (Web Tech) Unit 4 57

 TypeScript Fundamentals

 TypeScript is an open-source language that provides support for

building enterprise scale JavaScript applications. Although several
patterns exist that can be used to structure JavaScript,
 TypeScript is a programming language developed by Microsoft that
is a superset of JavaScript. It is designed for developing enterprise
scale JavaScript applications
 TypeScript provides container functionality that object-oriented
developers are familiar with, such as classes and modules.
 It also supports strongly-typed code to ensure inappropriate
values aren't assigned to variables in an application.

6/04/2023 ACSE0505 (Web Tech) Unit 4 58

 Difference between JavaScript & TypeScript

The main difference is that JavaScript is a scripting language used to

make interactive web pages and applications, while TypeScript is
a superset of JavaScript. Other differences include:

 TypeScript code needs to be compiled, but JavaScript does not

 TypeScript uses types and interfaces while JavaScript does not
 TypeScript has some additional features for functions
 TypeScript has a certain feature of prototyping that JS does not
 Maintaining a huge code in JavaScript is extremely difficult.

6/04/2023 ACSE0505 (Web Tech) Unit 4 59

 Key features of Typescript

 TypeScript is a free and open-source programming language

developed and maintained by Microsoft.
 It is a superset of JavaScript, So you can write JavaScript code in
typescript.
 Enables static typing and class-based
object-oriented programming to JavaScript.
 Another key feature is that Angular 2 is written in typescript

6/04/2023 ACSE0505 (Web Tech) Unit 4 60

 How typescript works

 Typescript compiler converts code written in typescript to

JavaScript,

Supported Editors We can write typescript using any one of the

below editors.
 Visual Studio.
 Node.js
 Sublime Editor
 TypeScript play ground

6/04/2023 ACSE0505 (Web Tech) Unit 4 61

 JavaScript ES6

 JavaScript ES6 (also known as ECMAScript 2015 or ECMAScript

6) is the newer version of JavaScript that was introduced in 2015
 ECMAScript 2015 or ES2015 is a significant update to the
JavaScript programming language. It is the first major update to
the language since ES5 which was standardized in 2009.
Therefore, ES2015 is often called ES6.
 ECMAScript is the standard that JavaScript programming language
uses. ECMAScript provides the specification on how JavaScript
programming language should work.

6/04/2023 ACSE0505 (Web Tech) Unit 4 62

 ES6 Cont…

JavaScript let
JavaScript let is used to declare variables. Previously, variables were
declared using the var keyword
The variables declared using let are block-scoped. This means they
are only accessible within a particular block. For example,

6/04/2023 ACSE0505 (Web Tech) Unit 4 63

 ES6 Cont…

JavaScript const
The const statement is used to declare constants in JavaScript. For
example,

Once declared, you cannot change the value of a const variable

6/04/2023 ACSE0505 (Web Tech) Unit 4 64

 ES6 Cont…

JavaScript Arrow Function

In the ES6 version, you can use arrow functions to create function
expressions. For example,
This function

can be written as

6/04/2023 ACSE0505 (Web Tech) Unit 4 65

 ES6 Cont…

JavaScript Classes
JavaScript class is used to create an object. Class is like a
constructor function. For example,
class Person {
constructor(name) {
this.name = name;
}
}

Keyword class is used to create a class. The properties are assigned

in a constructor function. Now you can create an object.

6/04/2023 ACSE0505 (Web Tech) Unit 4 66

 Daily Quiz(cont..)

Q1. Java script is an _______ language?

(A) object oriented
(b) object base
© procedural
(d) None of these
Q2.Which of the following keywords is used to define a variable in JavaScript?
(a) let
(b) var
(C) both A & B
(d) None of the above
Q3.How can a datatype be declared to be constant type ?
(A) var
(b) const
© let
(D) constant

6/04/2023 ACSE0505 (Web Tech) Unit 4 67

 Daily Quiz(cont..)

Q4.Java script is ideal to

(A)make computations in HTML simpler
(B) minimize storage requirements on the web server
(c) increase the download time for the client
(D) none of the mentioned

Q5.The basic difference between javascript & java is

(A)There is no difference
(B). Functions are considered as fields
©. Variables are specific
(D). Functions are values, and there is no hard distinction between
methods and fields

Q6. Which of the following is not javascript framework?

(A)Node
(B)Vue
(C)React
(D)Cassandra
6/04/2023 ACSE0505 (Web Tech) Unit 4 68
 Daily Quiz(cont..)

Q7. Arrays in JavaScript are defined by which of the following

statements?
a)It is an ordered list of values
b) It is an ordered list of objects
c) It is an ordered list of string
d) It is an ordered list of functions

Q8.Which of the following is not JavaScript data types?

e)Null type
f) Undefined type
g) Number type
h) All of the mentioned

Q9.Where is Client-side JavaScript code is embedded within

HTML documents?
a) A URL that uses the special javascript:code
b) A URL that uses the special javascript:protocol
c) A URL that uses the special javascript:encoding
d) A URL that uses the special javascript:stack
6/04/2023 ACSE0505 (Web Tech) Unit 4 69
 Weekly Assignment

1. Where can we place JavaScript ? [CO3]

2. Explain screen output and keyboard input method in
JavaScript. [CO3]
3. Define instance of operator in JavaScript. [CO4]
4. Explain various datatypes used in JavaScript. [CO4]
5. Write a JavaScript to find factorial of a number.[CO3]
6. What is a DTD ? Mention its types. [CO3]
7. What are composite datatypes in Java Script ? [CO3]
8. What are the different levels of headings in HTML ? [CO3]
9. How to create date object in JavaScript ? Explain any four
methods of JavaScript date object. [CO4]
10. What are the different ways that we can include JavaScript
to a XHTML document. [CO4]

6/04/2023 ACSE0505 (Web Tech) Unit 4 70

 MCQ s

[Q1.]Which of the following methods/operation does JavaScript use instead of

== and !=?
a) JavaScript uses equalto()
b) b) JavaScript uses equals() and notequals() instead
c) c) JavaScript uses bitwise checking
d) d) JavaScript uses === and !== instead

[Q2.] Why is JavaScript Engine needed?

e) Both Compiling & Interpreting the JavaScript
f) b) Parsing the JavaScript
g) c) Interpreting the JavaScript
h) d) Compiling the JavaScript

[Q3]. What would be the result of 2+5+”3″?

i) 5
j) 7
k) 73
l) 37
6/04/2023 ACSE0505 (Web Tech) Unit 4 71
 MCQs (Cont..)

[Q4]. Name some of the JavaScript Frameworks?

(A)Angular
(B)React
(C)Vue
(D)All of them

[Q5]. What is the difference between the operators ‘==‘ & ‘===‘?

[Q6]. In how many ways a JavaScript code can be involved in an HTML file?

(E)Inline
(F)Internal
(G)External
(H)All of them

[Q7] List out the different ways an HTML element can be accessed in a JavaScript code.
(i) getElementById(‘idname’): Gets an element by its ID name
(ii) getElementsByClass(‘classname’): Gets all the elements that have the given class name.
(iii) getElementsByTagName(‘tagname’): Gets all the elements that have the given tag name.
(iv) querySelector(): This function takes CSS style selector and returns the first selected element.
(v) All of them.
6/04/2023 ACSE0505 (Web Tech) Unit 4 72
 MCQ s(Cont..)

For largest level of heading which tag is used ?

A) <h1>
B) <h6>
C) <heading>
D) <head>

API stands for

a)Application Programming Interface
b) Application Programming Index
c) Applet Programming Interface
(d) None of these

For handling user interaction ___side scripting is useful

Server
b)Client
c)Server & Client
d) None of these

6/04/2023 ACSE0505 (Web Tech) Unit 4 73

 Glossary Questions

JAD stands for

a) Joint Application Development
b) Joint Application Difference Glossary Questions

c) Joint Application Demo

d) none of these

Java script is scripting language introduce by

e) IE
f) Microsoft
g) Netscape
h) SunJava

___ operator calculates the remainder by dividing two

integers.
i) / b) rem c) ^ d) %

6/04/2023 ACSE0505 (Web Tech) Unit 4 74

 Glossary Questions

Which tag is used for smallest heading ……………… protocol

stack.

Marquee tag has following attributes

a)behavior
b)direction
c)position
d)both a and b.

The word internet stands for ____

a) International Network
b) b) Internal Network
c) c) Intermediate Network
d) d) none of these

_____ is used to create a new paragraph

(a) <from> (b) <img> (c) <p> (d)< marque>

6/04/2023 ACSE0505 (Web Tech) Unit 4 75

 Sessional Papers

Sessional Papers

6/04/2023 ACSE0505 (Web Tech) Unit 4 76

 Sessional Papers

6/04/2023 ACSE0505 (Web Tech) Unit 4 77

 Sessional Papers

6/04/2023 ACSE0505 (Web Tech) Unit 4 78

 Sessional Papers

6/04/2023 ACSE0505 (Web Tech) Unit 4 79

 Old Question Paper

6/04/2023 ACSE0505 (Web Tech) Unit 4 80

 Old Question Paper(cont..)

6/04/2023 ACSE0505 (Web Tech) Unit 4 81

 Old Question Paper(cont..)

6/04/2023 ACSE0505 (Web Tech) Unit 4 82

 Expected Questions for University Exam

• Explain the importance of JavaScript. Write a java script to

manipulate array
• Explain relational, logical and athematic operators.
• Explain if-else statement in java script with examples.
• Write a java Script for counting Odd, even and prime numbers
from 1 to 100
• Write a java script to calculate the area of the triangle
• Write a java script to find factorial of given number.
• If a=10 and b=20 write a java script to swapping of these two
numbers
• Write a script to display sum of first 10 numbers
• write a java script to validate phone number

6/04/2023 ACSE0505 (Web Tech) Unit 4 83

 Expected Questions for University Exam

 Write a Java Script to calculate the average of three

numbers.
 Write a java script for finding the greater number
between two numbers.
 Write a Java Script for on change event.
 Which java script operator calculates the remainder by
dividing two integers.
 Which tag is used for smallest heading .
 which tag is used to left align the content is table cell.
 which tag is used to left align the content is table cell.

6/04/2023 ACSE0505 (Web Tech) Unit 4 84

 References

 Burdman, Jessica, “Collaborative Web Development” Addison

Wesley

 Xavier, C, “ Web Technology and Design” , New Age International

 Ivan Bayross,” HTML, DHTML, Java Script, Perl & CGI”, BPB
Publication

6/04/2023 ACSE0505 (Web Tech) Unit 4 85

 Recap of Unit 4

Covered What is JavaScript how JavaScript is different than

HTML,CSS.
Covered variables, constant, keywords, operators etc.

Discussed various java script objects, function , function parameters,

function arguments etc.

Covered JS script loop, js popup boxes, JS event etc.

Discussed JS array, strings, strings method etc.

6/04/2023 ACSE0505 (Web Tech) Unit 4 86

 NPTEL video / Other study links

Unit 1
https://youtu.be/96xF9phMsWA

https://youtu.be/Zopo5C79m2k

https://youtu.be/ZliIs7jHi1s

https://youtu.be/htbY9-yggB0

Unit 2
https://youtu.be/vHmUVQKXlVo

https://youtu.be/qz0aGYrrlhU

Unit 3
https://youtu.be/1Rs2ND1ryYc

Unit 4
https://youtu.be/-qfEOE4vtxE

https://youtu.be/PkZNo7MFNFg

Unit 5
https://youtu.be/_GMEqhUyyFM

6/04/2023 ACSE0505 (Web Tech) Unit 4 87

 Thank You

6/04/2023 ACSE0505 (Web Tech) Unit 4 88