Department of Computer Science and Engineering

Institute / School Name Chitkara University, H.P

Program Name B.E CSE
Semester IV
Batch 2016
Course Code CSL4209
Course Name Client Side Technologies
Lecture / Tutorial (per week) 4-0-0 Course Credits 4
Course Coordinator Name Nandini Nayar

1. Scope of the Course

This course provides knowledge about the fundamental technology behind everything you see in a web
browser (along with other technologies like JavaScript and CSS) that can be used to develop everything
from simple web pages to complex web applications and services.

2. Objectives of the Course

The course aims to give the students:
 Knowledge of markup language (HTML) and to enable students to build user friendly websites.
 To provide the skills and project-based experience needed for entry into web design and development
careers.
 An understanding by which a student will be able to use a variety of strategies and tools to develop
websites.

3. Course Learning Outcomes

CLO1: Differentiate between client and server side programming.
CLO2: Apply the HTML and CSS concepts to create and design webpages.
CLO3: Use JavaScript to manipulate elements in the DOM to change appearance and visibility.
CLO4: Create the scripts using JavaSCript
CLO5: Compare the functionality, characteristics, and support offered by JavaScript frameworks and libraries
( e.g: Jquery).
CLO6: Define the basic concepts of AJAX.

4. Textbooks

TB1: ‘Web Enabled Commercial Application Development using HTML, JavaScript, DHTML and PHP’
by Ivan Bayross , 4th Edition, BPB Publications

5. Reference Books

RB1: ‘Web Enabled Commercial Application Development using HTML, JavaScript, DHTML and PHP’
by Ivan Bayross , 4th Edition, BPB Publications
RB2: ‘The Complete Reference HTML & XHTML’ by Thomas A. Powell, 4th Edition, Tata McGraw-Hill
Company Limited.
RB3: ‘HTML 4.0’ by E. Stephen Mack, Janan Platt.

RB4: ‘Developing Web Applications’ by Moseley & Ralph, Wiley.

Page 1 of 5
 Department of Computer Science and Engineering
RB 5: ‘Learning Web design : a beginner's guide to HTML, CSS, JavaScript,and web graphics’ by Niederst
Robbins, Jennifer, Mumbai Shroff Publishers.

RB 6: ‘Mastering HTML 4’ by Ray, Deborah S. % Eric, BPB Publications

RB 7: Html5 Black Book : Covers Css3 Javascript Xml Xhtml Ajax Php And Jquery
by Kogent Learning Solutions Inc.

6. Other readings and relevant websites

Sr No. Link of Journals, Magazines, websites and Research Papers

1.
https://www.w3schools.com/
2. http://www.quirksmode.org/dom/intro.html
3. https://www.codeschool.com/courses/front-end-foundations
4. https://www.codeschool.com/courses/try-jquery

7. Course Plan

Lecture Topics Recommended

Number Book / Other
reading material
1 Web programming and HTML5: Introduction to web RB1
programming, client server architecture, DNS, latest RB2
trends, static and dynamic content, WWW3C standards, RB3
difference between HTML & HTML5.
2 Basics of HTML5, understanding document tags. RB1
HTML5 formatting: Formatting tags e.g. font, Bold, italic, RB2
super script, subscript, delete, mark etc. RB3
3 HTML5 Quotations: q tag, blockquote, Code, abbreviation, LINK 1
address, cite, bi-directional override tag, header, footer
and output Tag, meta data and meta tag.
4-5 Lists: Ordered, Unordered, Definition List. RB1
Introduction to LINK: anchor element, internal linking and RB2
external linking, attribute of anchor tag. LINK 1
6-7 Images: image basics, image tag, Image alignment, image RB1, RB2, LINK 1
map and all the attributes of image and map.
8-9 Table: Table tag with attributes like width, alignment, cell RB1
spacing, cell padding, cell alignment, borders rules, rows, RB2
cells, rowspan, colspan, header, footer, body sections, LINK 1
captions and background images.
10-11 HTML Frames: Introduction to frameset tag, frame tag, RB1
iframes and respective attributes. RB2
12-14 Form: Creating form, add labels, text box, check box, radio RB1
buttons, password, pull down menus and button to a form RB3
, Use of clickable image as a submit button, pass LINK 1
information between forms (action ,method).
15-17 DHTML and CSS: Introduction to DHTML, introduction to RB1
CSS3, ways to Insert CSS in HTML document (External Style RB2
Sheet, Internal Style Sheet, Inline Styles), CSS id and class, LINK 1
div and span tag.

Page 2 of 5
 Department of Computer Science and Engineering
18-20 CSS background: background color, background image RB1
(repeat horizontally or vertically, set position and no- RB1
repeat) LINK 1
CSS Text: text color, text alignment, text decoration
CSS Font: style, family, Size
CSS lists, CSS Links
21-22 CSS Tables: Table borders, collapse borders, table width RB1
and height ,table text alignment, table padding, table color RB2
CSS border: style, width, color RB3
CSS margin: margin, padding LINK 1
23-24 JavaScript: History of JavaScript, Different RB1
Implementations, Determining the Document Object LINK 1
Model, Uses for JavaScript, Incorporating JavaScript in
HTML documents, Basic JavaScript Syntax, Data Types and
Variables, Calculations and Operators.
25-27 Control Structures: Do While, While, For and For In, If Else, RB1
Switch, Break and Continue; Labels, built-in functions, user- LINK 1
defined functions, accessing an element by its id. Writing
text to a document, Dialogue box.
28-29 Event Handling: onblur, onchange, ondbclick, onclick, RB1
onfocus, onkeydown, onkeyup, onkeypress, onload, LINK 1
onunload, onmouseover, onmouseout, onmousedown,
onmouseup, onmousemove, onreset, onselect, onsubmit.
JavaScript Errors and Troubleshooting.
30-31 Document Object Model: History of the DOM, RB1
Understanding the Document Object Model. RB1
DOM Node Properties: childnodes, firstnode, lastnode, LINK1
nodename, nodetype, nodevalue, parent node.
DOM node Methods: appendchild() and remove child(),
createnode(), text type node creation, node removal,
traversing document's Node.
32 JavaScript Objects: name, maths, string, date, array. LINK 1, LINK2
33-34 Window Object properties: closed, document, history, LINK 1
innnerheight, innerwidth, length, location, navigator, LINK2
outerheight, outerwidth, parent, self, status
Window object methods: alert(), blur(), close(), focus(),
open(), resizeby(), resizeto().
35 Navigator object properties: appcodename, appname, LINK 1
appversion, cookieenabled, useragent, LINK2
Navigator methods: javaenabled(), taintenabled.
36 History object properties: length, history object LINK 1
History object methods: back(), forward(), go(). LINK2
37-38 Location object properties: host, hostname, href, path LINK 1
name, port, protocol, search, Location object LINK2
Location object methods: assign(), reload(), replace()
39-40 Form Validation: Data validation and constraint validation LINK1
in HTML forms.

41-42 jQuery: Introduction to jQuery, jQuery Syntax, jQuery LINK1,LINK 4

Selectors, jQuery Events. RB6

43-44 jQuery Effects: jQuery Hide/Show, jQuery Fade, jQuery LINK1,LINK 4

Slide, jQuery Animate, jQuery stop(), jQuery Callback, RB6
jQuery Chaining.
45-46 jQuery HTML: jQuery Get, jQuery Set, jQuery Add, jQuery LINK1,LINK 4
Remove, jQuery CSS Classes, jQuery css(), jQuery RB6

Page 3 of 5
 Department of Computer Science and Engineering
Dimensions.

47-48 jQuery AJAX: Introduction, get/post, load. LINK1,LINK 4

RB6

8. Evaluation Scheme:

Component 1 Assignment, Tutorial and Quiz 10

Component 2* Sessional Tests (STs)* 30
Component 3** End Term Examination** 60
Total 100
* There are three Sessional Tests (STs) for all theory papers. The average of best two will be considered.
**The End Term Comprehensive examination will be held at the end of semester. The mandatory
requirement of 75% attendance in all theory classes is to be met for being eligible to appear in this
component.

9. Guest Faculty likely to be invited : Ms. Neelam Verma, Assistant Professor, Punjab University

10. Syllabus with weightage:

Contents Lectures Weightage(%age)

Web Programming and HTML5: Introduction to web programming, 4 8
Basics of HTML5, understanding Document – Tags TEXT: Methods
of formatting text: font tag, inline text attribute, Bold and italic, super
script, subscript, Lists: Ordered, Unordered, Definition Lists and
introduction to LINK, Links: The anchor element. Internal linking and
external linking Attribute- href, Target, Name.
Images: Image basics, image tag Image alignment, image map, tags 5 8
(img map, area) respective all Attributes, Table and Frame in HTML:
Table: Tag, width and alignment, Cell spacing and Cell padding, Cell
alignment, Borders and rules , Rows, cells, Rowspan and Colspan
attributes, Header, Footer and body sections, Captions and
Background images in tables.
Forms: Creating a Basic Form Add a Text Box to a Form, Add Check 4 4
Boxes to a Form, radio buttons, Adding Password, Pull down menus
to a form , Use of clickable image as a submit button, Pass
information between forms (action ,method), meta data
HTML Frames: Introduction to Frameset Tag , Frame Tag, DHTML 6 13
& CSS: Introduction to CSS3, Technologies of DHTML – CSS and
JavaScript, Ways to Insert CSS: External Style Sheet, Internal Style
Sheet, Inline Styles, CSS Background, Background Color Background
Image: - Repeat Horizontally or Vertically, Set position and no-
repeat, CSS Text: Text Color, Text Alignment, Text Decoration, Font:
Style, Family, Size, CSS lists, CSS Links
CSS Tables: Table Borders, Collapse Borders, Table Width and 2 5
Height ,Table Text Alignment, Table Padding, Table Color, CSS
Border: Style, Width, Color, CSS Margin: Margin, Padding, CSS:
Syntax, CSS Id and Class, Div and span tag
JavaScript Introduction: History of JavaScript, Different 2 4
Implementations, Determining the Document Object Model, Uses for
JavaScript, Incorporating JavaScript in Your Documents
The JavaScript Language: Basic JavaScript Syntax, Data Types and
Variables, Calculations and Operators.

Page 4 of 5
 Department of Computer Science and Engineering
Control Structures: Do While, While, For and For In, If Else, Switch, 2 4
Break and Continue; Labels, Built-in Functions, User-Defined
Functions, Accessing an Element by Its ID, Examples: Writing Text
to a Document,
Objects: Javascript objects: Maths, String ,Date, Array, Event 3 5
Handling- onblur, onchange, ondbclick, onclick, onfocus, onkeydown,
onkeyup, onkeypress, onload, onunload, onmouseover, onmouseout,
onmousedown, onmouseup, onmousemove, onreset, onselect,
onsubmit, JavaScript Errors and Troubleshooting

Document Object Model: History of the DOM, Understanding the 4 8

Document Object Model, DOM Node Properties -childnodes,
firstnode, lastnode, nodename, nodetype, nodevalue, parent node and
Methods: appendchild() and remove child(), createnode() and text
type Node creation, node removal, Traversing a Document's Nodes

JavaScript Objects: Built-in JavaScript Objects: Window Object 7 13

properties- closed, document, history, innnerheight, innerwidth,
length, location, name, navigator, outerheight, outerwidth, parent,
self, status, window object methods- alert(), blur(), close(), focus(),
open(), resizeby(), resizeto(). Navigator object properties-
appcodename, appname, appversion, cookieenabled, online, platform,
useragent. Navigator methods- javaenabled(), taintenabled.
History object properties- length, history object methods- back(), 10 18
forward(), go(). Location object properties- host, hostname, href, path
name, port, protocol, search, history object methods- assign(),
reload(), replace() Document Object properties- innerHTML,
Document Object methods- write(), getElementByID(), get
ElementByTagName(), createElement(),CreateTextNode(). Form
Object, User-Created Objects; Using Other Windows, Images,
Working with Forms,
jQuery Intro:jQuery Get Started, jQuery Syntax, jQuery Selectors, 8 10
jQuery Events, jQuery Effects: jQuery Hide/Show, jQuery Fade,
jQuery Slide, jQuery Animate, jQuery stop(), jQuery Callback,
jQuery Chaining
jQuery HTML; jQuery Get, jQuery Set, jQuery Add, jQuery Remove,
jQuery CSS Classes, jQuery css(), jQuery Dimensions;

This Document is approved by:

Designation Name Signature

Course Coordinator Nandini Nayar
Deputy Dean Dr. Shaily Jain
Date 8-01-2018

Page 5 of 5