COURSE INFORMATION SHEET

Course Code: CS435

Course Title: Front End Design
Pre-requisite(s): NA
Co- requisite(s): NA
Credits: L: 3 T: 0 P: 0
Class schedule per week: 3
Class: B.Tech
Semester / Level: 7
Branch: CSE/IT

Course Objectives
This course enables the students:

1. To understand the need for front end development in websites

2 To learn the syntax of Javascript and integrate scripts into websites
3. To know about the various classes and objects available in Javascript
4. Manipulate website components at the client end
5. To manage Javascript for large projects including debugging and error handling skills

Course Outcomes
After the completion of this course, students will be able to:

1. Shall be able to decide the kind of problems which require the use of Javascript in the context
of web programming
2. Write programs using all the basic syntax of Javascript e.g. loops, functions, objects etc.
3. Program against the document object model and the browser object model.
4. Program the standard built in objects of Javascript
5. Perform basic error handling, input validation and cookie manipulation

Page 206 of 439

 Syllabus

Module I
Introduction to Web Development, Client-Side and Server-Side JavaScript, Origin, History and
Evolution of JavaScript, Features of JavaScript, Advantages and Limitations, Structure of Browsers,
Lexical Structure, Literals, Identifiers, Keywords, Variables, Variable Declaration and Scope, Data
type, Operators, Control flow statements

Module II
Objects, Properties of Objects, Property Configuration Descriptors, Creating Objects, Objects as Record and
Dictionary, Operations on Objects, Accessors and Mutators, Useful Operations and Loops, Object Methods,
Built-In Object Methods, Prototypal Inheritance, Prototype Chaining, Classes, Constructor, Properties and
Methods, Extending Classes, Getters and Setters in Classes, Static Members, Garbage Collection, Functions –
Scope and Declaration, Parameter passing, recursion, closure

Module III
Properties of Array, Declaring an Array, Array Literal, Using the New Keyword and Array Constructor,
Accessing an Array, Built-In Methods inside Array, Accessor Methods, Mutator Methods, Iterator Methods,
Using Fundamental Loops, Predefined Iterator Methods, Nesting and Multidimensional Arrays, Sorting,
Browser Object Model, Window Object, Properties of Window Object, Methods of Window Object, History
Object, Properties of History Object, Methods of History Object, Navigator Object, Properties and Methods of
Navigator Object, Location Object, Properties of Location Object, Methods of Location Object, Screen Object,
Properties of Screen Object, Document Object

Module IV
Document Object Model (DOM), Relationship between BOM, DOM and JavaScript, Understanding DOM Tree
and Nodes, Properties of Node Object, Method of Node Object, Document Object, Properties of Document
Object, Methods for Document Object, Elements in DOM, Properties of Element Object, Methods for Element
Object, Accessing Elements in the DOM, Event Handling Using DOM

Module V
Built-In Objects, Fundamental Objects, Object Prototype, Function Object, Boolean Object, Symbol Object,
Error Objects, Number and Dates, Number Object, Date Object, Math Object, Text or String Processing, String
Object, RegExp Object, Keyed Collections, Map Object, Set Object, Indexed Collections, Array Object,
Structured Data, Value Properties, Function Properties, Validation, Error Handling, Cookies, Strict mode

Text Book:
1. Dangi S., Tomar R., “JAVASCRIPT Syntax and Practices”, 1st Edition, CRC Press, 2022
a. Reference Book:
2. Scott A. D., MacDonald M., Powers s., “JAVASCRIPT Cookbook”, 3 rd Edition, O’Reilly Press, 2021

Gaps in the syllabus (to meet Industry/Profession requirements): Learning about full stack development

POs met through Gaps in the Syllabus: NA

Topics beyond syllabus/Advanced topics/Design: NA

POs met through Topics beyond syllabus/Advanced topics/Design: NA

Course Outcome (CO) Attainment Assessment Tools and Evaluation Procedure

Direct Assessment
Page 207 of 439
 Assessment Tools % Contribution during CO Assessment
Continuous Internal Assessment 50
Semester End Examination 50

Continuous Internal Assessment % Distribution

Mid semester examination 25
Two quizzes 20 (2×10)
Teacher’s Assessment 5

Assessment Components CO1 CO2 CO3 CO4 CO5

Continuous Internal Assessment √ √ √ √ √
Semester End Examination √ √ √ √ √

Indirect Assessment
1. Student Feedback on Faculty
2. Student Feedback on Course

Course Delivery Methods

CD1 Lecture by use of Boards/LCD Projectors
CD2 Quizzes
CD3 Assignments/Seminars
CD4 Mini Projects/Projects
CD5 Laboratory Experiments/Teaching Aids
CD6 Self- learning such as use of NPTEL Materials
CD7 Internets

Mapping of Course Outcomes onto Program Outcomes

Program
Specific
Program Outcomes (POs)
Outcomes
(PSOs)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
CO1 3 3 3 2 3 3 1 1 2 2 1 3 3 2 1
CO2 3 3 2 3 3 2 1 1 2 2 2 1 3 2 2
CO3 3 3 2 3 2 3 1 2 2 2 2 1 3 2 3
CO4 3 2 3 2 3 3 1 2 2 3 3 1 3 3 3
CO5 3 3 3 3 2 2 2 2 2 1 2 1 3 1 2

Mapping Between Course Outcomes And Course Delivery Method

Course Outcomes Course Delivery Method

CO1 CD1, CD2
CO2 CD1, CD2, CD4, CD5
CO3 CD1, CD2, CD5, CD7
CO4 CD1, CD2, CD6, CD7
CO5 CD1, CD2, CD3
Page 208 of 439
Page 209 of 439
 COURSE INFORMATION SHEET

Course Code: CS 436

Course Title: Front End Design Lab
Pre-requisite(s): NA
Co- requisite(s): NA
Credits: L: 0 T: 0 P:3
Class schedule per week: 3
Class: B.Tech
Semester / Level:
Branch: CSE/IT

Course Objectives
This course enables the students:

1. To understand the need for front end development in websites

2 To learn the syntax of Javascript and integrate scripts into websites
3. To know about the various classes and objects available in Javascript
4. Manipulate website components at the client end
5. To manage Javascript for large projects including debugging and error handling skills

Course Outcomes
After the completion of this course, students will be able to:

1. Shall be able to decide the kind of problems which require the use of Javascript in the context
of web programming
2. Write programs using all the basic syntax of Javascript e.g. loops, functions, objects etc.
3. Program against the document object model and the browser object model.
4. Master the usage of a modern Javascript based stack like Angular, React or Vue
5. Perform data persistence operation using the chosen stack.

Page 210 of 439

Syllabus

Module I
Write basic Javascript programs to explore the normal programming constructs, functions, closures etc.

Module II
Write programs to explore the object-oriented properties of Javascript.
Write programs to manipulate the BOM.
Write programs to Manipulate the DOM.

Module III
Write programs to perform UI refresh using any of the modern stacks like Vue, Angular, React etc.

Module IV
Write programs for data persistence using Javascript using the chosen stack.

Module V
Learn advanced Javascript programming techniques using the chosen Stack.

Text Book:
2. Dangi S., Tomar R., “JAVASCRIPT Syntax and Practices”, 1 st Edition, CRC Press, 2022

Reference Book:
3. Scott A. D., MacDonald M., Powers s., “JAVASCRIPT Cookbook”, 3 rd Edition, O’Reilly Press,
2021

Gaps in the syllabus (to meet Industry/Profession requirements): Learning about full stack development

POs met through Gaps in the Syllabus: NA

Topics beyond syllabus/Advanced topics/Design: NA

POs met through Topics beyond syllabus/Advanced topics/Design: NA

Course Outcome (CO) Attainment Assessment Tools and Evaluation Procedure

Direct Assessment

Assessment Tools % Contribution during CO Assessment

Continuous Internal Assessment 60
Semester End Examination 40

Continuous Internal Assessment % Distribution

Day to day Performance and Lab files 30

Quiz(zes) 10
Viva Voce 20

Assessment Components CO1 CO2 CO3 CO4 CO5

Continuous Internal Assessment √ √ √ √ √
Semester End Examination √ √ √ √ √

Page 211 of 439

Indirect Assessment
1. Student Feedback on Faculty
2. Student Feedback on Course

Course Delivery Methods

CD1 Lecture by use of Boards/LCD Projectors
CD2 Quizzes
CD3 Assignments/Seminars
CD4 Mini Projects/Projects
CD5 Laboratory Experiments/Teaching Aids
CD6 Self- learning such as use of NPTEL Materials
CD7 Internets

Mapping of Course Outcomes onto Program Outcomes

Program
Specific
Program Outcomes (POs)
Outcomes
(PSOs)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
CO1 3 3 3 2 3 3 1 1 2 2 1 3 3 2 1
CO2 3 3 2 3 3 2 1 1 2 2 2 1 3 2 2
CO3 3 3 2 3 2 3 1 2 2 2 2 1 3 2 3
CO4 3 2 3 2 3 3 1 2 2 3 3 1 3 3 3
CO5 3 3 3 3 2 2 2 2 2 1 2 1 3 1 2

Mapping Between Course Outcomes And Course Delivery Method

Course Outcomes Course Delivery Method

CO1 CD1, CD2
CO2 CD1, CD2, CD4, CD5
CO3 CD1, CD2, CD5, CD7
CO4 CD1, CD2, CD6, CD7
CO5 CD1, CD2, CD3

Page 212 of 439