Subject Name: Client Side Scripting using Java Script
Subject Code:
Credits: 3
Course Objectives:
1. To understand the basics of JavaScript
2. To implement Control structures and Functions
3. To implement Objects, Array and String
4. To apply various event handling mechanisms and Form validations
5. To work with Object Models of JavaScript
6. To create interactive web pages using JavaScript
Course Outcomes:
At the end of the course, students will be able to:
CO1: Describe features of JavaScript and write basic programs
CO2: Create and utilize different types of functions
CO3: Create and manipulate objects, arrays, and strings
CO4: Implement event handling mechanisms and interact with the DOM and BOM
CO5: Create Interactive Web Pages
Unit No. Topics No. of
hours
1 Overview of JavaScript
1.1. What is JavaScript or JS?
1.2. Need of JavaScript
1.3. Features of JavaScript 7
1.4. JS Variables
1.5. JS keywords, JS Comments
1.6. JS Data types
1.7. JS Output
1.8. JS Operators
1.9. Control Structures – Conditional statements, Loops
2 Functions
2.1 What is Function?
2.2 Need of Function
2.3 Basic Syntax of JavaScript Function 12
2.4 Different ways of creating Functions
2.5 Function Declaration
2.6 Function Expression-Named Function Expression,
Anonymous Function Expression
2.7 Function Constructor
2.8 Arrow Function
2.9 Rest parameter
2.10 Default values to Function
2.11 Argument Object
2.12 Variable Scope-Local and Global Scope
2.13 Recursive Functions
3 Objects, Array and Strings
3.1 Objects
3.2 Properties, methods of Object
3.3 This keyword 12
3.4 Object Constructors
3.5 Object Prototype
3.6 Built -In Functions-call(), apply(), bind()
3.7 Basic Built in Objects- String, Array, Date, Math.
3.8 Array
3.9 Different ways of creating array
3.10 Built in Functions on Array
3.11 Array Prototype
3.12 String
3.13 Different ways of creating String
3.14 Built in Functions of String
3.15 String Prototype
3.16 Date and Math
3.17 Built in functions of Date and Math
4 Event Handling in JavaScript
4.1 Event
4.2 Event Handling
4.3 Advantages of Event Handling 8
4.4 Associating Event Handler code to HTML
4.5 Event Bubbling
4.6 Event Capturing
4.7 Types of Event
4.8 Window Events
4.9 Mouse Events
4.10 Form Events
4.11 Keyboard Events
4.12 Document Events
4.13 Event Object
4.14 Methods and properties associated with Event
Object
4.15 Form Validation
5 JS BOM and DOM
5.1 Introduction to Document Object Model(DOM)
5.2 Introduction to Browser Object Model(BOM)
5.3 DOM Vs BOM
5.4 Window Object 6
5.5 Document Object
5.6 Style Object
5.7 Updating HTML and CSS using JS
5.8 Updating attributes using JS
5.9 Creating and Removing elements using JS
Reference Books:
1. JavaScript & jQuery: The Missing Manual – David Sawyer McFarland, 2nd Edition,
O’Reilly Media, Inc.
2. JavaScript A Beginner’s Guide - John Pollock, 4th Edition, Mc Graw Hill Education
Web Resources:
• Codecademy: [Link]
• freeCodeCamp: [Link]
beginners/
• W3Schools JavaScript Tutorial: [Link]
Journals:
1. International Journal of Web Engineering and Technology (IJWET).
[Link]
2. ACM Transactions on the Web (TWEB): [Link]
Client side programming using JavaScript Practical Assignments
Credit: 1.5
Following practical must be implemented using JavaScript:
1. Write a JavaScript program that converts a temperature in Celsius to Fahrenheit. Allow the
user to input the temperature in Celsius and display the equivalent temperature in Fahrenheit.
2. Implement a program that prints numbers from 1 to 50. For multiples of 3, print "Fizz"
instead of the number, and for multiples of 5, print "Buzz". For numbers that are multiples of
both 3 and 5, print "FizzBuzz".
3. Write a JavaScript function named calculate that takes two parameters (num1 and num2) and
an operator (+, -, *, /). The function should return the result of the corresponding operation.
4. Implement a recursive function calculateFactorial() that calculates the factorial of a given
number n.
5. Create an object named person with properties (name, age, address). Write a function
modifyPerson that takes the person object and updates the age. Another function
displayPerson should display all properties.
6. Create a function ‘isPalindrome’ that takes a string as input and returns true if the string is a
palindrome (reads the same backward as forward) and false otherwise.
7. Write a JavaScript program to implement array using array literal and perform following
functions on array- join(), push(), pop(), shift(), unshift(), concat(), slice(), fill(), find(),
indexOf() .
8. Write a JavaScript program to implement array using array literal and perform following
functions on array: map(), filter(), every(), some(), includes(), reduce(), reverse() .
9. Write a JavaScript program to read a character string from user and perform the following
functions: (Use prompt() function for accepting a character)
a. Accept a character from user and count the number of occurrences of that character in
the string.
b. Accept a Position from user and print the character at specified position.
10. Create a function named reverseWords that takes a sentence as input and returns the sentence
with the order of words reversed.
11. Write a JavaScript program to Display current Day, Date, Month, Year and Time on the web
page and greet the user accordingly.
12. Write a JavaScript program to design Customer Account Details Form and perform validation
on pan number field. (pan number is of only 10 characters long, out of which first 5 characters
are alphabets, next 4 characters are digits and last character is alphabet)
13. Write a JavaScript program to compare the values of password and confirmed password field
and display message accordingly. Also perform the validation to check any of the field should
not be empty.
14. Write a JavaScript program to increase and decrease size of Image by moving mouse over and
out on image
15. Write a JavaScript program to change background color by clicking on button changecolor.
16. Write a JavaScript program to implement the digital clock using event Handling.
17. Write a JavaScript program to implement the Image Slide Show using event Handling
18. Write a JavaScript program to implement Mouse Event-onmouseover, onmouseout,
onmouseup, onmousemove, onmousedown, ondblclick, onclick.
19. Write a program that displays an alert with information about the user's browser using BOM
properties.
20. Write a JavaScript program to implement DOM Event -onload,onunload,onresize,onchange.
