Please read this disclaimer before proceeding:

This document is confidential and intended solely for the educational purpose of
RMK Group of Educational Institutions. If you have received this document
through email in error, please notify the system manager. This document
contains proprietary information and is intended only to the respective group /
learning community as intended. If you are not the addressee you should not
disseminate, distribute or copy through e-mail. Please notify the sender
immediately by e-mail if you have received this document by mistake and delete
this document from your system. If you are not the intended recipient you are
notified that disclosing, copying, distributing or taking any action in reliance on
the contents of this information is strictly prohibited.
 22CS102
SOFTWARE DEVELOPMENT PRACTICES

BATCH / YEAR / SEMESTER: 2022-26 / I / 01

 1. CONTENTS

Sl. Topics Page

No. No.
5
1. Contents
6
2. Course Objectives
7
3. Pre Requisites (Course Name with Code)
8
4. Syllabus (With Subject Code, Name, LTPC details)
11
5. Course Outcomes (6)
12
6. CO-PO/PSO Mapping
Lecture Plan (S.No., Topic, No. of Periods, Proposed date, 13
7. Actual Lecture Date, pertaining CO, Taxonomy level, Mode of
Delivery)
14
8. Activity based learning
Lecture Notes ( with Links to Videos, e-book reference, PPTs, 15
9.
Quiz and any other learning materials )
Assignments ( For higher level learning and Evaluation - 75
10.
Examples: Case study, Comprehensive design, etc.,)
76
11. Part A Q & A (with K level and CO)
83
12. Part B Qs (with K level and CO)
Supportive online Certification courses (NPTEL, Swayam, 84
13.
Coursera, Udemy, etc.,)
85
14. Real time Applications in day to day life and to Industry
86
15. Content Beyond Syllabus
87
16. Assessment Schedule ( Proposed Date & Actual Date)
88
17. Prescribed Text Books & Reference Books
89
18. Mini Project
 2. Course Objectives
• To discuss the essence of agile development methods.

• To set up and create a GitHub repository.

• To create interactive websites using HTML

• To design interactive websites using CSS.

• To develop dynamic web page using Java script.

 3. Prerequisites

SUBJECT CODE: 22CS102

SUBJECT NAME: SOFTWARE ENGINEERING AND GIT AND
GITHUB + LAB
 4. Syllabus
SOFTWARE DEVELOPMENT PRACTICES L T P C
22CS102
(Theory Course with Laboratory Component) 3 0 2 4

OBJECTIVES:
∙ To discuss the essence of agile development methods.
∙ To set up and create a GitHub repository.
∙ To create interactive websites using HTML
∙ To design interactive websites using CSS.
∙ To develop dynamic web page using Javascript.
UNIT I AGILE SOFTWARE DEVELOPMENT, Git AND GitHub 15
Software Engineering Practices – Waterfall Model - Agility – Agile Process –Extreme
Programming - Agile Process Models – Adaptive Software Development – Scrum –
Dynamic Systems Development Method – Crystal – Feature Driven Development – Lean
Software Development – Agile Modeling – Agile Unified Process – Tool set for Agile
Process.
Introduction to Git – Setting up a Git Repository - Recording Changes to the Repository -
Viewing the Commit History - Undoing Things - Working with Remotes -Tagging - Git
Aliases- Git Branching - Branches in a Nutshell - Basic Branching and Merging - Branch
Management - Branching Workflows - Remote Branches - Rebasing.
Introduction to GitHub – Set up and Configuration - Contribution to Projects, Maintaining
a Project – Scripting GitHub.
UNIT II HTML 15
Introduction – Web Basics – Multitier Application Architecture – Client Side Scripting
versus Server-side Scripting – HTML5 – Headings – Linking – Images– Special Characters
and Horizontal Rules – Lists – Tables – Forms – Internal Linking – meta Elements – Form
input Types – input and datalist Elements – Page-Structure Elements.

UNIT III CSS 15

Inline Styles – Embedded Style Sheets – Conflicting Styles – Linking External Style
Sheets – Positioning Elements – Backgrounds – Element Dimensions – Box Model
and Text Flow – Media Types and Media Queries – Drop-Down Menus – Text
Shadows – Rounded Corners – Color – Box Shadows – Linear Gradients – Radial
Gradients – Multiple Background Images –Image Borders – Animations – Transitions
and Transformations – Flexible Box Layout Module – Multicolumn Layout.
UNIT IV JAVASCRIPT BASICS 15
Introduction to Scripting – Obtaining user input – Memory Concepts – Arithmetic –
Decision Making: Equality and Relational Operators – JavaScript Control Statements –
Functions – Program Modules – Programmer-defined functions – Scope rules – functions
– Recursion – Arrays – Declaring and Allocating Arrays – References and Reference
Parameters – Passing Arrays to Functions – Multidimensional arrays.
UNIT V JAVASCRIPT OBJECTS
Objects – Math, String, Date, Boolean and Number, Document Object – Using
JSON to Represent objects – DOM: Objects and Collections – Event Handling.
Indicative List of Experiments:
1. Form a Team, Decide on a project:
a) Create a repository in github for the team.
b) Choose and follow a git workflow
▪ Each team member can create a StudentName.txt file with contents
about themselves and the team project
▪ Team members can now create a Pull request to merge the branch to
master branch or main development branch.
▪ The Pull request can have two reviewers, one peer team
member and one
faculty. Reviewers can give atleast one comment for Pull Request
updation.
▪ Once pull request is reviewed and merged, the
master or main development branch will have files
createdby all team members.
2. Create a web page with atleast three links to different web pages. Each of the web
page is to be designed by a team member. Follow Git workflow, pull request and
peer reviews.
3. Create web pages using the following:
o Tables and Lists
o Image map
o Forms and Form elements
o Frames
4. Apply Cascading style sheets for the web pages created.
5. Form Validation (Date, Email, User name, Password and Number validation)
using JavaScript.
6. Implement Event Handling in the web pages.
7. Mini Projects-Develop any one of the following web applications (not limited to
one) using above technologies.
a. Online assessment system
b. Ticket reservation system
c. Online shopping
d. Student management system
e. Student result management system
f. Library management
g. Hospital management
h. Attendance management system
i. Examination automation system
j. Web based chat application
TOTAL: 45+30 = 75 PERIODS
OUTCOMES:
At the end of this course, the students will be able to:
CO1: Apply agile development methods in software development practices.
CO2: Set up and create a GitHub repository.
CO3: Develop static and dynamic webpages using HTML.
CO4: Design interactive personal or professional web pages using CSS. CO5:
Develop web pages using Javascript with event-handling mechanism.

TEXT BOOKS:
1. Roger S. Pressman, “Software Engineering: A Practitioner‘s Approach”,
McGraw Hill International Edition, Ninth Edition, 2020.
2. Scott Chacon, Ben Straub, “Pro GIT”, Apress Publisher, 3rd Edition, 2014.
3. Deitel and Deitel and Nieto, “Internet and World Wide Web - How to
Program”, Pearson, 5th Edition, 2018.

REFERENCES:
1. Roman Pichler, “Agile Product Management with Scrum Creating Products
that

Customers Love”, Pearson Education, 1st Edition, 2010.

2. Jeffrey C and Jackson, “Web Technologies A Computer Science Perspective”,
Pearson Education, 2011.
3. Stephen Wynkoop and John Burke, “Running a Perfect Website”, QUE,
2nd Edition, 1999.
4. Chris Bates, “Web Programming – Building Intranet Applications”, 3rd
Edition, Wiley Publications, 2009.
5. Gopalan N.P. and Akilandeswari J., “Web Technology”, Second Edition,
Prentice Hall of India, 2014.
6. https://infyspringboard.onwingspan.com/web/ en/app/toc/
lex_auth_013382690411003904735_shared/overview
7. https://infyspringboard.onwingspan.com/web/e n/app/
toc/lex_auth_0130944214274703362099_share d/overview
5. Course Outcomes
CO# COs K Level

CO1 Apply agile development methods in software development practices K3

CO2 Set up and create a GitHub repository K6

CO3 Develop static and dynamic webpages using HTML K3

CO4 Design interactive personal or professional webpages using CSS K6

CO5 Develop web pages using Java script with event-handling mechanism K6

Knowledge Level Description

K6 Evaluation

K5 Synthesis

K4 Analysis

K3 Application

K2 Comprehension

K1 Knowledge
 6. CO – PO /PSO Mapping Matrix

CO PROGRAM OUTCOMES PSO

CO
Attain
#
ment PO PO PO PO PO PO PO PO PO PO PO PO PS PS PS0
1 2 3 4 5 6 7 8 9 10 11 12 O1 O2 3

CO1 1 3 3 3 1 1 1 - - 2 1 2 1 - - -

CO2 2 3 2 3 1 2 1 - - 2 1 2 1 - - -

CO3 3 3 3 3 1 2 1 - 1 2 1 2 1 - - -

CO4 4 3 3 3 1 2 1 - - 2 1 2 1 - - -

CO5 5 3 3 3 1 2 1 - - 2 1 2 1 - - -
 7. LECTURE PLAN : UNIT – IV
JAVASCRIPTS

UNIT – I I HTML

Highest
Proposed Actual Cognitive
S. Lecture Lecture Level Mode of Delivery
Topic CO LU Outcomes Remark
No Date Date Delivery Resources

1 Introduction to Scripting – MD1,MD4

05.01.2023 01.12.2022 K6 & T3 Introduction to Scripting –
Obtaining user input
MD5 Obtaining user input

MD1,MD4
2 Memory Concepts – Arithmetic T3
05.01.2023 01.12.2022 K6 & Memory Concepts – Arithmetic
MD5

MD1,MD4
Decision Making: Equality and & Decision Making: Equality and
06.01.2023 01.12.2022 K6 MD5
3 Relational Operators T3 Relational Operators

CO6 MD1,MD4
4 JavaScript Control Statements T3
06.01.2023 01.12.2022 K6 & JavaScript Control Statements
MD5

Functions: Program Modules –

Functions: Program Modules – MD1,MD4
5 T3 Programmer-defined functions–
06.01.2023 Programmer-defined functions– 02.12.2022 K6 &
MD5 Scope rules – functions –
Scope rules – functions – Recursion
Recursion
Arrays – Declaring and Allocating Arrays – Declaring and
Arrays – References and Reference MD1,MD4 Allocating Arrays – References
6 & T3
Parameters – Passing Arrays to MD5 and Reference Parameters –
07.01.2023 02.12.2022 K6
Functions – Multidimensional Passing Arrays to Functions –
arrays. Multidimensional arrays.

• ASSESSMENT COMPONENTS MODE OF DELIVERY

• AC 1. Unit Test MD 1. Oral presentation
• AC 2. Assignment MD 2. Tutorial
• AC 3. Course Seminar MD 3. Seminar
• AC 4. Course Quiz MD 4. Hands On
• AC 5. Case Study MD 5. Videos
• AC 6. Record Work MD 6. Field Visit
• AC 7. Lab / Mini Project
• AC 8. Lab Model Exam
• AC 9. Project Review

13
8. Activity Based Learning: UNIT IV
Lecture Notes – Unit 4
JAVASCRIPT BASICS
 Unit 4 -JAVASCRIPT BASICS

Sl. No. Contents Page No.

Introduction to Scripting – Obtaining user input
1 17
Memory Concepts – Arithmetic
2 27
Decision Making: Equality and Relational Operators
3 32
JavaScript Control Statements - I
4 40
Functions: Program Modules – Programmer-defined
5 53
functions– Scope rules – functions – Recursion
Arrays – Declaring and Allocating Arrays – References
6 and Reference Parameters – Passing Arrays to 64
Functions – Multidimensional arrays.
 9. LECTURE NOTES
4.1 INRODUCTION TO SCRIPTING:

A script or scripting language is a computer language that does not need the
compilation step and is rather interpreted line by line at runtime. Scripts are programs
with instructions that are often utilized to create dynamic web pages and web
applications.

There are 2 types of Scripting Languages. They are:

1. Server-Side Scripting Language - Python, PHP, and Perl
2. Client- Side Scripting Language – JavaScript

These scripting languages are often developed with the goal of communicating with other
programming languages.

Advantages of Scripting Languages:

o It can port easily between different operating systems.
o It directly executes the files without the need of compilation.
o It is an open-source platform that helps the users to view and edit the script when
required as per their requirement.
o As compared to an actual program, it is much faster to develop.

What is JavaScript?

JavaScript is a powerful yet lightweight, cross-platform (able to be used with

different types of computer systems), client-side scripting language.

JavaScript is used mainly for enhancing the interaction of a user with the
webpage. JavaScript is also being used widely in game development and Mobile
application development.

JavaScript was developed by Brendan Eich in 1995. The language was initially
named as Mocha then was renamed as LiveScript which was later renamed JavaScript to
leverage the popularity of Java.

Note:

• JavaScript can be run on any operating systems and almost all web browsers.

• You need a text editor to write JavaScript code and a browser to display your web
page.
Introduction to JavaScript:
• JavaScript is a powerful programming language that can add interactivity to a website
• JavaScript is versatile, beginner-friendly, compact and very flexible

Applications created using core JavaScript Language

a. Browser Application Programming Interfaces (API’s) built into web

browsers, providing functionality such as dynamically creating HTML and setting CSS
styles; collecting and manipulating a video stream from user ‘s webcam, or generating
3D graphics and audio samples

b. Third party API’s allow developers to incorporate functionality in sites

from other content providers, such as Twitter or Facebook (companies such as FB,
Twitter or Google allow you to access their functionality via JavaScript and use it on
your site)

c. Third party frameworks and libraries that you can apply to HTML to
accelerate the work of building sites and applications. Frameworks and libraries are
blocks of code developed by third parties that help solve common problems in a
particular programming language.

• JavaScript is a cross-platform, object-oriented scripting languages used to make

webpages interactive (eg. Having complex animations, clickable buttons, popup
menus etc.)

• Core JavaScript can be extended for a variety of purposes by supplementing it with

additional objects.

a. Client side JavaScript supply object to control the browser and its Document
Object Model (DOM). For example, client side extensions allow an application to place
elements on an HTML form and respond to user events such as mouse clicks, form
input and page navigation. It is simply running scripts on the client device, usually
within a browser.

b. Server side JavaScript is relevant to running JavaScript on a server. For example,

server side extensions allow an application to communicate with a database, provide
continuity of information from one invocation to another to the application, or perform
file manipulations on a server.
 c. Imperative Language : It simply controls the flow of consumption. The
procedural programming approach, object oriented approach comes under this like
async await we are thinking what is it to be done further after async call. Imperative
programming is oldest programming paradigm. The source code is a series of
commands which specify what the computer has to do. The code is easy to understand
but many lines of code are required to describe what has to be achieved. Eg. Fortran,
Pascal, Java

d. Declarative programming : Requirement of Logical Computation. Main

goal is to describe the desired result without direct dictation on how to get it like arrow
function do. It is a non-imperative style of programming in which programs describe
their desired results without explicitly listing commands or steps that must be
performed. Eg. HTML, CSS, SQL, XML

JavaScript and Java

JavaScript can be added to your HTML file in two ways:

Internal JS: We can add JavaScript directly to your HTML file by writing the code
inside the <script> tag. The <script> tag can either be placed inside the <head> or
the <body> tag according to the requirement

External JS: We can write JavaScript code in other file having an extension.js and
then link this file inside the <head> tag of the HTML file in which we want to add this
code.
4.2 OBTAINING USER INPUT:

To create a dynamic web page, we need to obtain the users’ input dynamically
at run time and display it on the page created. A dynamic web page displays
different content for different users while retaining the same layout and
design.

JavaScript is a special from few other languages because it can accept input and
produce output on the basis of the user’s input in the same page. This means, we don’t
have to move to the next page or refresh or reload the page to see the output.

In JavaScript, there are different in built functions to get the inputs from the
user. They are:
Built In Function Names Functionalities
prompt(), readLine(prompt msg) Reads a string input from the user.

readInt(prompt msg) Reads an integer input from the user.

readFloat(prompt msg) Reads an input with decimal values
from the user.
parseInt(variable name) Used to convert a string input to an
integer.
typeOf variable name Used to return the type the value stored
in the variable.
4.2.1 JavaScript Fundamentals:

In this topic we will discuss about the basic elements required for constructing a
basic program in JavaScript.

1. Whitespace Characters:

Characters that provide space between other characters are referred to as whitespace
characters. Some of the white space characters are:
• Carriage return - moves the cursor to the beginning of the line without advancing
to the next line (tag used for CR representation - \r)
• Space
• Tab
• Newline
2. Statements:

A statement is a code that declares a variable or instructs a JavaScript to do a task. A

simple statement is terminated by a semicolon (;).

Eg: let message = "Welcome to JavaScript"; //Statement 1

console.log(message); //Statement 2
3. Blocks:

A block is a collection of one or more simple statements enclosed within a pair of curly
braces {}.
If(condition)
Eg: {
// Block of code
}

4. Identifiers:

• An identifier is a name you choose for variables, parameters, functions,

classes, etc.

• An identifier name starts with a letter (a-z, or A-Z), an underscore(_), or a dollar sign
($) and is followed by a sequence of characters including (a-z, A-Z), numbers (0-9),
underscores (_), and dollar signs ($).

• Identifiers are case-sensitive. For example, the message is different from the
Message.

5. Comments:

Comments allow you to add notes or hints to JavaScript code. When

executing the code, the JavaScript engine ignores the comments.

Types:

1. single-line comments (Symbol Used: //comment).

2. block comments (Symbol Used: <!-- comments -->).

6. Keywords & Reserved words:

JavaScript defines a list of reserved keywords that have specific uses. Therefore, you
cannot use the reserved keywords as identifiers or property names by rules..
4.2.2 VARIABLES:

Variables are containers which are used for storing data.

Rules:

1. Before using a variable, you need to declare it. But you don’t need to specify the
variable’s type in the declaration like other static typed languages such as Java or C.

2. Variable names are case-sensitive. Eg: the message and Message are different
variables.

3. Variable names can only contain letters, numbers, underscores, or dollar signs
and cannot contain spaces. Also, variable names must begin with a letter, an
underscore (_) or a dollar sign ($).

4. Variable names cannot use reserved words as their identifier.

5. variable names use camelCase. Eg. myName, mySection

4.2.3 Functions to show the output:

1. windows.alert()

2. windows.status()

3. document.write()

4. document.writeln()

1. windows.alert():

This function shows the message in a small message box. The message box
contains a string and an OK button on it. If the user clicks on OK button then the message
box disappears. The message to be displayed has to be passed as a parameter to the
windows.alert() function.

Syntax:
windows.alert(messsage);
Example:

Output:

2. windows.status():

This function shows the message in the status bar. The message to be displayed has
to be passed as a parameter to the windows.status() function.

Syntax:

windows.status(message);
Example:

Output:

The above code displays a message “Welcome to JS” in the status bar.
3. document.write():

This function prints a string. The message to be displayed has to be passed as a

parameter to the document.write() function. Without inserting a newline character
in between the strings, it continuously prints all of the strings.

Syntax:

document.write(message);

Example:

Output:

4. document.writeln():

This function prints a string. The message to be displayed has to be passed as a

parameter to the document.writeln() function. This function inserts a newline
character in between the statements, and prints all of the strings.

Syntax:
document.writeln(message);

Example:
Output:

4.2.4 Functions to Get Inputs From User:

1. window.prompt()

2. window.confirm()

1. window.prompt():

This function is used to get any value from the user. This function takes two optional
parameters. It either returns the “value” entered by the user in the “string format” or
returns “null” if the user clicks on “cancel”.

Syntax:

Variable_name = window.prompt(“Prompt Message to be displayed”);

Example:

Output:
2. window.confirm():

This function prompts the user to confirm the decision with either true or false.

Its shows a message box with two buttons “OK” AND “CANCEL” on it. If the user
clicks on “OK” then it returns “true” else if the user clicks on “CANCEL” then it returns
“false”.

Syntax:

Variable_name = window.confirm(“Message to be displayed”);

Example:
Output:

Case 1: If the user clicks on “OK”

Case 2: If the user clicks on “CANCEL”

4.3 MEMORY CONCEPTS:

Variable names such as pno1, pno2 and sum actually correspond to locations in the
computer’s memory. Every variable has a name, a type, and a value.
Explanation:

In the Addition of Integers script, the strings sno1 and sno2 are converted to integer and
are placed into the memory locations which are named as pno1 and pno2 by the
interpreter. Now these two integer values are added and the resultant value is placed into
a variable sum.

Output:
Datatypes in JavaScript:

A data type in any language defines the type of data a variable can hold. There
are six primitive datatypes such as Number, String, Boolean, NULL, Undefined and Symbol
and one non-primitive data type, ‘object’. (Non-primitive data types can be created or
modified by programmers.)

JavaScript is a dynamic language with dynamic types (i,e) Variables in

JavaScript are not directly associated with any particular value type, and any
variable can be assigned (and re-assigned) values of all types dynamically.

var x = 42; // x is now a number

x = "bar"; // x is now a string
x = true; // x is now a Boolean
JavaScript is a weakly or loosely typed language (i.e) it allows implicit type
conversion when an operation involves mismatched types, instead of throwing type errors.
var x, str; Output:
x = 10; 10 Chocolates
str = 10 + " Chocolates"; string
console.log(str); number
document.write(typeof str);
document.write(typeof x);

Note:

1. To find the type of a variable, typeof variable or typeof(variable) is used.

2. When a variable is declared in JavaScript, but is not given a value, the variable is
typed as an Undefined because it has an undefined value.

var x; Output:
console.log(x); undefined
document.write(typeof x); undefined

3. Assigning the value null to a variable indicates that this variable does not contain a
value. This means the type of a null value is an object, not null.

var x = null; Output:

console.log(x); null
document.write(typeof x); object

4.4 OPERATORS IN JavaScript

Operators are symbols that instructs the compiler to perform specific operations on two or
more operands(data/value). The operators prominently do two things. They are:

• Operate on its operands.

• Returns the operated results.

The value to which the operator is applied is called as an Operand.

A combination of an operator and an operand is called as an Expression.

4.4.1 Arithmetic Operator:
The Arithmetic operators are used for performing basic mathematical operations like
addition(+), subtraction (-), multiplication (*), division (/), reminder calculation(%) and
increment(++), decrement(--) operations.

Remainder Operator:
The modulo operator (%) is used for calculating the remainder value of two operands
after division. In the expression a%b, if the value of a is greater than be then it displays
the remainder value after division (Eg. 17%5 = 2) but if the value of a is less than b, the
it displays the value of a as the remainder (Eg. 5%17 = 5)
Parentheses () are used to group expressions in the same manner as in algebraic
expressions (Eg. a*(b%c))
Output:
Program:

4.5 Decision Making Operators:

The Decision-making operators allows a script to make a decision based on the truth and
falsity of a condition. If the condition is met, the statements in the body of the if statement
is executed. If the condition is not met, the statement in the body of the else is executed.

There are two types of Decision-making operators in JavaScript. They are:

1.Equality Operators (==,!=, ===,!==)

2.Relational Operators (>,<,>=,<=)

The Empty Statement:

There is no semicolon (;) at the end of the first line of each if statement. Including such a
semicolon is actually a logical error at the execution time.
if(hour<12);
document. write(“Good Morning “);

But the above statement will be interpreted by JavaScript erroneously as:

if(hour<12)
;
document. write(“Good Morning“);

where the semicolon on a separate line is called as the empty statement. The empty
statement gets executed if the if condition is true or false. That is, when an empty
statement executes, no task is performed in the script.
Output: Good Morning
Program:
Output:

Note:

The Date object – Contains the information about the local time in its getHours() method.
The time ranges from 0 to 23.

Syntax:
var date = new Date();
var time = date.getHours();

Conditional Operator:

The Conditional operator is a ternary operator which takes 3 operands, a condition to be

evaluated and 2 alternative values to be returned based on the truth and falsity of the
condition.

Syntax:
Condition ? value1 : value2
Program:

Output:

Assignment Operator:

The Assignment operator is used to assign the value of right-hand operands to its left-hand
operand. That is if a = b+c assigns the value of b+c to a.
Program:

Input:

Output:
Program:

Output:

Increment and Decrement Operator:

The JavaScript Increment and Decrement Operators useful to increase or decrease the
value by 1. For instance, Incremental operator ++ used to increase the existing variable
value by 1 (x = x + 1). The decrement operator – – is used to decrease or subtract the
existing value by 1 (x = x – 1).

The syntax for both the increment and decrement operators in JavaScript is

• Increment Operator: ++x or x++

• Decrement Operator: --x or x--

Note: When ++ or - - is used before operand like: ++x, –x then we call it as prefix and if
++ or - - is used after the operand like: x++ or x– then we called it as postfix.
Program:

Output:
Logical Operators:

The logical operators are used to compare and test more than two conditions.
Operator Name Symbol Function
Logical AND && Returns true, when all the conditions are true
Logical OR || Returns true, when atleast one condition of all the
conditions is true.
Logical NOT ! Returns true, if the condition evaluated is false.

Program:

Output:

Inputs: a=10, b=20, c=15

Operator Precedence and Associativity:

Operator Functionality Associativity Precedence

(),[] Brackets Left to Right 1
++,-- Increment & Decrement Right to Left 2
! Logical NOT Right to Left 2
/, * ,% Div, Multi, Rem Left to Right 3
+,- Add, Sub Left to Right 4
+ String Concatenation Left to Right 4
>>,<< Left Shift, Right Shift Left to Right 5
>,<,>=,<= greater than, less than, Left to Right 6
greater than or equal to,
less than or equal to

==,!=,===,!== Equal to, not equal to, Left to Right 7

Strictly equal to and
Strictly not equal to.

&& Logical AND Left to Right 11

|| Logical OR Left to Right 12
?: Ternary Operator Left to Right 13
=,**= Assignment, Expo(pow) Right to left 14
*=,/=,%=,+= Compound Assignment Right to left 14
Operators.

4.6 JavaScript CONTROL STATEMENTS:

Conditional statements are used to perform different actions based on different
conditions.
In JavaScript, the Control Statements are of following types. They are:
1. Decision Making Statements.
2. Looping or Iterative Statements.
3. Jump Statements.
4.6.1 Decision-Making Statements:
Decision making statements allow you to decide the order of execution of specific
statements in your program based on the tested condition being true. Decision-making
statements are of 4 types. They are:
1. if statements
2. if-else statements
3. if-else if-else ladder
4. switch statements
4.6.1.1 if statements:
The if statement is used to execute a block of JavaScript code, if the condition tested
results true.
Syntax:
if (condition)
{
// if Block of JavaScript code
}
Example:
Output:

4.6.1.2 if-else statements:

The if-else statement is used to execute a block of JavaScript code, if the condition tested
results true. But if the condition tested results false, then the else block of the code is
executed.

Syntax:
if (condition)
{
// if Block of JavaScript code
}
else
{
// else Block of JavaScript code
}

Example:
Output:
Input 1:

Input 2:

4.6.1.3 if-else if-else ladder:

The if-else if-else ladder is used to specify and test a new condition if the first if block
results false.
Syntax:
if (condition)
{
// if Block of JavaScript code
}
else if (condition)
{
// if Block of JavaScript code
}
---
---
---
else
{
// else Block of JavaScript code
}
Example:

Output:

Input 1:

Input 2:
4.6.1.4 Switch Statements:

The switch statement is used to execute one block of many blocks of code.

Syntax: Example:

switch(expression)
{
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
4.6.2 LOOPS IN JAVASCRIPT

Looping in programming languages is a feature that facilitates the execution of a set

of instructions/functions repeatedly while some condition evaluates to true.

For example, suppose we want to print “Hello World” 10 times. This can be done in
two ways as shown below:

Iterative Method: The iterative method to do this is to write the document.write()

statement 10 times.

<script type="text/javascript">
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
document.write("Hello World<br>");
</script>

Using Loops: In Loop, the statement needs to be written only once and the loop will
be executed 10 times as shown below:

<script type="text/javascript">
for (let i = 0; i < 10; i++)
{
document.write("Hello World!<br>");
}
</script>
There are mainly two types of loops:

Entry Controlled loops: In these types of loops, the test condition is tested before
entering the loop body. For Loops and While Loops are entry-controlled loops.

Exit Controlled loops: In these types of loops the test condition is tested or
evaluated at the end of the loop body. Therefore, the loop body will execute at least
once, irrespective of whether the test condition is true or false. The do-while loop is
exit controlled loop.

4.6.2.1 WHILE LOOP: A while loop is a control flow statement that allows code to
be executed repeatedly based on a given Boolean condition. The while loop can be
thought of as a repeating if statement.
Syntax :
while (boolean condition)
{
loop statements...
}

While loop starts with checking the condition. If it is evaluated to be true,

then the loop body statements are executed otherwise first statement following the
loop is executed. For this reason, it is also called the Entry control loop.

Once the condition is evaluated to be true, the statements in the loop

body are executed. Normally the statements contain an update value for the
variable being processed for the next iteration.

When the condition becomes false, the loop terminates which marks the
end of its life cycle.
4.6.2.2 FOR LOOP: for loop provides a concise way of writing the loop structure.
Unlike a while loop, a for statement consumes the initialization, condition,
and increment/decrement in one line thereby providing a shorter, easy-to-debug
structure of looping.

Syntax:

for (initialization condition; testing condition; increment/decrement)

statement(s)

Initialization condition: Here, we initialize the variable in use. It marks the start of
a for loop. An already declared variable can be used or a variable can be declared,
local to loop only.

Testing Condition: It is used for testing the exit condition for a loop. It must return
a boolean value. It is also an Entry Control Loop as the condition is checked prior to
the execution of the loop statements.

Statement execution: Once the condition is evaluated to be true, the statements in

the loop body are executed.

Increment/ Decrement: It is used for updating the variable for the next iteration.

Loop termination: When the condition becomes false, the loop terminates marking
the end of its life cycle.
VAR vs LET

The difference between let and var is in the scope of the variables they create:
Variables declared by let are only available inside the block where they're defined.
Variables declared by var are available throughout the function in which they're
declared.
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript For Loop</h2>

<p id="demo"></p>

<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.writeln(text);
</script>
</body>
</html>

OUTPUT:
DO-WHILE: The do-while loop is similar to the while loop with the only difference
that it checks for the condition after executing the statements, and therefore is an
example of an Exit Control Loop.

Syntax:
do
{
statements..
}
while (condition);

The do-while loop starts with the execution of the statement(s). There is no
checking of any condition for the first time.

After the execution of the statements, and update of the variable value, the
condition is checked for a true or false value. If it is evaluated to be true, the next
iteration of the loop starts.

When the condition becomes false, the loop terminates which marks the end of
its life cycle.

It is important to note that the do-while loop will execute its statements at least
once before any condition is checked, and therefore is an example of the exit control
loop.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript for Do While Loop</h2>
<p id="demo"></p>
<script>
let count = 0;
do {
console.log(count);
count++;
document.writeln(count);
} while (count < 5)
</script>
</body>
4.6.3 JUMP STATEMENT IN JAVASCRIPT

Jump statements can jump out of the branch, loop, or statement returned from a
function call.

JavaScript jump statements include 2 types: break Statement, continue Statement.

4.6.3.1 BREAK The statement is used to exit the loop or switch statement. The
syntax is as follows.

break；

[Example 1] In the following example, set the loop expression of the while
statement to always be true (while can convert the value 1 to true). Then set an if
statement in the while loop structure to judge that when the variable i is greater than
50, then jump out of the while loop body.

var i=0;

while(1){

if(i>50)

break;

i++;

document.write(i);

[Example 2] Jump statements can also be used in conjunction with tags to achieve
jumps to specified lines instead of just jumping out of the loop body. In the following
nested for loop body, define a mark x in the outer for statement, and then use the if
statement to set in the inner for statement: When a is greater than 5, the outer for
statement is jumped out, and the result is as follows:

x: for (a = 1; a <10; a ++) {// Add label

document.write("<br />"+a+"<br />");

for(var b=1;b<10;b++){

if (a> 5)

break x; // If a is greater than 5, jump out of the label

document.write(b);

}
CONTINUE
The continue statement stops the current iteration of loop and begins to
execute the next iteration of the loop.
It has the following syntax:
continue;
The continue statement used without label terminates the current iteration
of immediately enclosing loop. Whereas using continue with a label inside nested
loops it terminates the current iteration of loop identified with that label.
for (var i = 1; i <= 10; i++)
{
if (i % 2 === 0) {
continue;
}
console.log(i);
}

In the example above, even numbers are skipped and only the odd numbers are
displayed.
===============================================
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript break</h2>
<p id="demo"></p>
<script>
x: for (a = 1; a <10; a ++) {// Add label
document.write("<br />"+a+"<br />");
for(var b=1;b<10;b++){
if (a> 5)
break x; // If a is greater than 5, jump out of the label
document.write(b);
}
}
</script>
</body>
</html>
4.7 FUNCTIONS IN JavaScript:
Functions in JavaScript is used to develop and maintain a larger program by dividing it into
smaller simple blocks of code or modules. These smaller blocks of code are called as
functions. These functions are designed to perform a specific task when it is been
invoked(called).

There are two types of functions. They are:

• User Defined Functions
• Predefined Functions
4.7.1 USER DEFINED FUNCTIONS:
User-defined functions in JavaScript are defined by the programmer to perform specific
operations. They are also known as “tailor-made functions” which are built only to
satisfy the given condition.
(I) Function Definition:
• A JavaScript function is defined with the function keyword, followed by a
name, followed by parentheses ().
• Function names can contain letters, digits, underscores, and dollar signs.
• The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
• The code to be executed, by the function, is placed inside curly brackets: {}
• Function parameters are listed inside the parentheses () in the function definition.
• Inside the function, the arguments (the parameters) behave as local variables.
Returning Program Control from a Function Definition:

There are three ways to return control to the point at which a function was invoked.

(i) If the function does not return a result, control returns when the program reaches the
function-ending right brace or by executing the statement

return;

(ii)If the function does return a result, the statement

return expression;

returns the value of expression to the caller.

(iii)When a return statement is executed, control returns immediately to the point at which
the function was invoked.

(II) Function Call/ Function Invocation:

The code inside the function will execute when "something" invokes (calls) the function:

• When an event occurs (when a user clicks a button)

• When it is invoked (called) from JavaScript code

• Automatically (self invoked)

Function arguments are listed inside the parentheses () in the function call. These values
are received by the function definition when it is invoked.

Syntax:

Function Definition:
function name(parameter1,parameter2,parameter3)
{
// code to be executed
}
Function Call:
name(argument1, argument2);
There are 3 ways of writing a function in JavaScript:
• Function Declaration
• Function Expression
• Arrow Function
1. Function Declaration: Function Declaration is the traditional way to define a
function. It is somehow similar to the way we define a function in other programming
languages. We start declaring using the keyword “function”. Then we write the function
name and then parameters.
After defining a function, we call it whenever the function is required.

Output:

2. Function Expression: Function Expression is another way to define a function in

JavaScript. Here we define a function using a variable and store the returned
value in that variable.
Output:

Here, the whole function is an expression and the returned value is stored in the variable.
We use the variable name to call the function.
3. Arrow Functions: Arrow functions are been introduced in the ES6 version of
JavaScript. It is used to shorten the code. Here we do not use the “function” keyword
and use the arrow symbol.
Output:

4.7.2 Pre-Defined Functions / Built-in Function:

Built in functions are methods whose definition is already defined in the
objects of JavaScript. More Formally, the programmer sends a message to the Objects in
the JavaScript to run its methods.
Syntax: objectname.methodname(arguments);
4.7.2.1 Methods in “Number” Object:

Sl.N Method Name Return Value

o
1. toFixed() Formats a number with a specific number of digits
to the right of the decimal.
2. toString() Returns the string representation of the number's
value.
3. valueOf() Returns the number's value.

4.7.2.2 Methods in “String” Object:

Sl.No Method Name Return Value

1. length() Returns the length of the string.
2. slice() Extracts a section of a string and returns a new
string.
3. split() Splits a String object into an array of strings by
separating the string into substrings.
4. toLowerCase() Returns the calling string value converted to lower
case.
5. toUpperCase() Returns the calling string value converted to Upper
case.
6. concat() Combines the text of two strings and returns a new
string.
7. indexOf() Returns the index within the calling String object of
the first occurrence of the specified value, or -1 if
not found.
8. lastIndexOf() Returns the index within the calling String object of
the last occurrence of the specified value, or -1 if
not found.
9. charAt() Returns the character at the specified index.
4.7.2.3 Methods in “String HTML wrappers” Object:

Sl.No Method Name Return Value

1. fontcolor() Causes a string to be displayed in the specified
color as if it were in a <font color="color"> tag.
2. fontsize() Causes a string to be displayed in the specified font
size as if it were in a <font size="size"> tag.
3. link() Creates an HTML hypertext link that requests
another URL.
4. blink() Creates a string to blink as if it were in a <blink>
tag.
5. bold() Creates a string to be displayed as bold as if it were
in a <b> tag.
6. italics() Causes a string to be italic, as if it were in an <i>
tag.

4.7.2.4 Conversion and Comparison:

Sl.No Method Name Return Value

1. escape(string) Encodes a string from ASCII into an ISO Latin-1
(ISO 8859-1) character set for HTML processing. It
is passed the string to be encoded, and returns the
encoded string.
2. unescape Converts an ISO8859-1 character set to ASCII.
3. eval() Converts a string to integer or float value.
4. isNaN(value) If the value passed is a not a number, the boolean
value of true is returned, if it is a number, it returns
false.
5. parseFloat() Returns floating point numbers the same as the
parseInt function, but looks for floating point
qualified strings and returns their value as a float.
6. parseInt() Converts a string to an integer returning the first
integer encountered which is contained in the
string. If no integer value are found such as in the
string “abcd”, then a value of 0 is returned.
Program:

Input:

Output:
4.7.3 Scope Rules:
Identifiers are names given to the user-defined functions are variables. Each
identifier in a program has a specific scope. The scope of an identifier for a variable or
function is the portion of the program in which the identifier can be referenced. There are
two types of Scope for any variable or a function in a program. They are:
• Global Scope
• Local Scope

4.7.3.1 Global Scope:

Global variables or script-level variables that are declared in the head element are
accessible in any part of a script and are said to have global scope. Thus, every function in
the script can potentially use the variables.
Note: The variables declared inside a function without var keyword also become global
variables.
Program:

Output:
4.7.3.2 Local Scope:
Identifiers declared inside a function have functional (or local) scope and can be used only
in that function. That is, Local variables cannot be accessed or modified outside the
function definition.
Note: If a local variable in a function has the same name as a global variable, the global
variable is “hidden” from the body of the function.
Program:

Output:

Points to Remember:
1. JavaScript has global scope and local scope.
2. Variables declared and initialized outside any function become global variables.
3. Variables declared and initialized inside function becomes local variables to that
function.
4. Variables declared without var keyword inside any function becomes global
variables automatically.
5. Global variables can be accessed and modified anywhere in the program.
6. Local variables cannot be accessed outside the function declaration.
7. JavaScript does not allow block level scope inside { } brackets.
8. If a local variable in a function has the same name as a global variable, the global
variable is “hidden” from the body of the function.

4.7.4 Recursive Function:

Recursive Function is a function that calls itself directly or indirectly through
another function to solve problems that contain smaller sub-problems.

A recursive function can receive two inputs: a base case (ends recursion) or a
recursive case (resumes recursion). The recursion step normally includes the keyword
return, to return back the result to combine with the portion of the original problem until
the base case is reached.
Program:
Execution Flow:

3! •3*2=6

2! •2*1=2

1! •1

0!
Output:

4.7.5 Recursion vs Iteration:

Property Recursion Iteration

A set of instructions
Definition Function calls itself. repeatedly executed.

Application For functions. For loops.

Through base case, When the termination

where there will be condition for the iterator
Termination function call. ceases to be satisfied.

Code Size Smaller code size Larger Code Size.

Very high (generally Relatively lower time

exponential) time complexity (generally
Time Complexity complexity. polynomial-logarithmic).
4.8 JavaScript ARRAYS:
JavaScript array is an object that represents a collection of similar type of
elements.
4.8.1 Characteristics of an Array:
• JavaScript arrays are resizable and can contain a mix of different data types.
• JavaScript arrays are not associative arrays and so, array elements cannot be
accessed using arbitrary strings as indexes, but must be accessed using nonnegative
integers.
• JavaScript arrays are zero-indexed: the first element of an array is at index 0, the
second is at index 1, and so on — and the last element is at the value of the array's
length property minus 1.
• The length property returns the length of an array.
4.8.2 Creation of an Array in JS:
There are 3 ways to construct array in JavaScript
1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal:

The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and separated by , (comma).
Program: Output:
2) JavaScript Array directly (new keyword)
The syntax of creating array directly is given below:
var arrayname=new Array();
Here, new keyword is used to create instance of array.
Program: Output:

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we
don't have to provide value explicitly.
Output:

Find the Output for the following code:

Snippet:
<script>
var house = new Array(10, 20, 30, 40, 50);
var house1 = new Array[5];
var home = new Array("1BHK");
document.write(house)
document.write(house1)
document.write(home)
</script>

Find the Output:

4.8.3 References and Reference Parameters:

Two ways to pass arguments to functions (or methods) in many programming

languages are pass-by-value and pass-by-reference.

When an argument is passed to a function by value, a copy of the argument’s

value is made and is passed to the called function. In JavaScript, numbers, Boolean values
and strings are passed to functions by value.
 With pass-by-reference, the caller gives the called function direct access to the
caller’s data and allows it to modify the data if it so chooses. This procedure is
accomplished by passing to the called function the actual location in memory (also called
the address) where the data resides. Pass-by-reference can improve performance because
it can eliminate the overhead of copying large amounts of data, but it can weaken security
because the called function can access the caller’s data. In JavaScript, all objects (and
thus all Arrays) are passed to functions by reference.

Arrays are objects in JavaScript, so Arrays are passed to a function by reference

— a called function can access the elements of the caller’s original Arrays. The name of an
array actually is a reference to an object that contains the array elements and the length
variable, which indicates the number of elements in the array.

4.8.3.1 Pass by Value in JavaScript

Pass by value in JavaScript means that a copy of the actual parameter’s value is
made in memory i.e., a new memory allocation is done, and all the changes are made in
that new value (i.e., copied value).

The original value and the copied value are independent of each other as they
both have a different space in memory i.e., on changing the value inside the
function, the variable outside the function is not affected.

The original value and the copied value are independent of each other as they
both have a different space in memory i.e., on changing the value inside the function, the
variable outside the function is not affected.

In simple language, we can understand it as, in a pass-by value, the function

receives a copy of the variable, which is independent of the originally passed variable.

Pass by value in JavaScript requires more space as the functions get a copy of
the actual content therefore, a new variable is created in the memory.

In this concept, equals operator plays a big role. When we create a variable, the
equals operator notices whether you are assigning that variable a primitive or non-
primitive value and then works accordingly.
Note: When we use the = operator, there is a function call (behind the scenes) where pass
by value (or reference) in JavaScript is done.

Program: Output:

4.8.3.2 Pass by Reference in JavaScript

Unlike pass by value in JavaScript, pass by reference in JavaScript does not

create a new space in the memory, instead, we pass the reference/address of the actual
parameter, which means the function can access the original value of the variable. Thus, if
we change the value of the variable inside the function, then the original value also gets
changed.

It does not create a copy, instead, it works on the original variable, so all the
changes made inside the function affect the original variable as well.
 Program: Output:

When to Use Pass by Value?

As in pass-by value in JavaScript, a new copy of the variable is created,
and any changes made in the new variable are independent of the original variable, so
it is useful when we want to keep track of the initial variable and don't want to lose its
value.
When to Use Pass by Reference?
When we are passing arguments of large size, it is better to use pass-by-
reference in JavaScript as no separate copy is made in the called function, so memory
is not wasted, and hence the program is more efficient.

4.8.4 Passing an Array to a Function:

We can pass an array as an input to a function using the following 3 ways.
Method 1: Using apply() method:
The apply() method is used to call a function with the given arguments as
an array or array-like object. It contains two parameters. The this value provides a call
to the function and the arguments’ array contains the array of arguments to be passed.
 The apply() method is used on the function that has to be passed as the arguments
array. The first parameter is specified as ‘null’ and the second parameter is specified with
the arguments array. This will call the function with the specified arguments array.

Program:

Output:

Method 2: Spread Operator:

The spread syntax is used in place where zero or more arguments are expected. It
can be used with iterators that expands in place where there may not be a fixed number of
expected arguments (like function parameters).
Program:

Output:

Method 3: Argument Object

Here, we use the arguments object to pass the names array to displyName()
function. We can pass the entire array to the function as an argument to simplify the code.

Program:
Output:

4.8.5 Multidimensional Array:

Multidimensional arrays are not directly provided in JavaScript. If we want to use

anything which acts as a multidimensional array then we need to create a multidimensional
array by using another one-dimensional array. So multidimensional arrays in JavaScript is
known as arrays inside another array.

Method 1:
var arr1 = ["ABC", 24, 18000];
var arr2 = ["EFG", 30, 30000];
var arr3 = ["IJK", 28, 41000];
var arr4 = ["EFG", 31, 28000];
var arr5 = ["EFG", 29, 35000];
// "salary" defines like a 1D array but it already contains some 1D array
var salary = [arr1, arr2, arr3, arr4, arr5];

Method 2:
var salary = [
["ABC", 24, 18000],
["EFG", 30, 30000],
["IJK", 28, 41000],
["EFG", 31, 28000],
];
Print the Elements in the Multi-dimensional Array:
Example:

Output:

Find the Output for the following Code:

Snippet:
<script>
// Prints a simple multidimensional array in JavaScript
// where we just print the salary of a specific person
var salary = [
["ABC", 24, 18000],
["EFG", 30, 30000],
["IJK", 28, 41000],
["EFG", 31, 28000],
];
 document.writeln("salary of 2nd person : " + salary[1][2] + "<br>");

document.writeln("salary of 4th person : " + salary[3][2] + "<br>");

</script>

Output:
 10. Assignments : UNIT IV
(CO5,K6)

Infosys Springboard Course to be completed mandatorily.

Certification Course Name:

JavaScript

Link to access the course:

https://infyspringboard.onwingspan.com/web/en/app/toc/lex_auth_013382690411
003904735_shared/overview
 11. PART A - QUESTION AND ANSWERS
1. What are types of scripting language? (CO5, K6)

i. Server-Side Scripting Language - Python, PHP, and Perl

ii. Client- Side Scripting Language – JavaScript

2. List down the advantages of Scripting Languages. (CO5, K6)

o It can port easily between different operating systems.

o It directly executes the files without the need of compilation.

o It is an open-source platform that helps the users to view and edit the script
when required as per their requirement.

o As compared to an actual program, it is much faster to develop.

3. What is JavaScript? (CO5, K6)

JavaScript is a powerful yet lightweight, cross-platform, client-side scripting

language. JavaScript is used mainly for enhancing the interaction of a user with the
webpage. JavaScript is also being used widely in game development and Mobile application
development.

JavaScript was developed by Brendan Eich in 1995. The language was initially
named as Mocha then was renamed as LiveScript which was later renamed JavaScript to
leverage the popularity of Java.

4. What are the built-in functions available in JS to get inputs from user? (CO5,
K6)
Built In Function Names Functionalities

prompt(), readLine(prompt msg) Reads a string input from the user.

readInt(prompt msg) Reads an integer input from the user.

readFloat(prompt msg) Reads an input with decimal values

from the user.

parseInt(variable name) Used to convert a string input to an

integer.

typeOf variable name Used to return the type the value stored
in the variable.
5. What are Whitespace Characters in JS? (CO5, K6)

Characters that provide space between other characters are referred to as whitespace
characters. Some of the white space characters are:

• Carriage return - moves the cursor to the beginning of the line without advancing
to the next line (tag used for CR representation - \r)

• Space

• Tab

• Newline

6. What are Statements in JS? (CO5, K6)

A statement is a code that declares a variable or instructs a JavaScript to do a task. A

simple statement is terminated by a semicolon (;).

Eg:

let message = "Welcome to JavaScript"; //Statement 1

console.log(message); //Statement 2

7. Define Identifiers in JS. (CO5, K6)

• An identifier is a name you choose for variables, parameters, functions, classes,

etc.

• An identifier name starts with a letter (a-z, or A-Z), an underscore(_), or a dollar

sign ($) and is followed by a sequence of characters including (a-z, A-Z), numbers (0-
9), underscores (_), and dollar signs ($).

• Identifiers are case-sensitive. For example, the message is different from the
Message.

8. What are the rules for creating variables in JS? (CO5, K6)

1. Before using a variable, you need to declare it. But you don’t need to specify the
variable’s type in the declaration like other static typed languages such as Java or C.

2. Variable names are case-sensitive. Eg: the message and Message are different variables.

3. Variable names can only contain letters, numbers, underscores, or dollar signs and
cannot contain spaces. Also, variable names must begin with a letter, an underscore (_) or
a dollar sign ($).

4. Variable names cannot use reserved words as their identifier.

5. variable names use camelCase. Eg. myName, mySection

9. List down the functions to show the output. (CO5, K6)
a. windows.alert()
b. windows.status()
c. document.write()
d. document.writeln()

10. List down the functions to get inputs from user. (CO5, K6)
a. window.prompt()
b. window.confirm()

11. What is the unique feature of datatype in JavaScript? (CO5, K6)

A data type in any language defines the type of data a variable can hold. There are six
primitive datatypes such as Number, String, Boolean, NULL, Undefined and Symbol and one
non-primitive data type, ‘object’.
JavaScript is a dynamic language with dynamic types (i,e) Variables in JavaScript are not
directly associated with any particular value type, and any variable can be assigned (and re-
assigned) values of all types dynamically.
• var x = 42; // x is now a number
• x = "bar"; // x is now a string
• x = true; // x is now a Boolean

12. What is meant by operators in JavaScript? (CO5, K6)

Operators are symbols that instructs the compiler to perform specific operations on two or
more operands. The operators prominently do two things. They are:
• Operate on its operands.
• Returns the operated results.
The value to which the operator is applied is called as an Operand.
A combination of an operator and an operand is called as an Expression.

13. List the two types of Decision-making operators in JavaScript. (CO5, K6)
i. Equality Operators (==,!=, ===,!==)
ii. Relational Operators (>,<,>=,<=)
14. What is conditional operator? What is its syntax? (CO5, K6)
The Conditional operator is a ternary operator which takes 3 operands, a condition to be
evaluated and 2 alternative values to be returned based on the truth and falsity of the
condition.
Syntax: Condition ? value1 : value2
15. What is meant by Increment and Decrement Operator? (CO5, K6)

16. List down the types of control statements in JavaScript. (CO5, K6)
i. Decision Making Statements.
ii. Looping or Iterative Statements.
iii. Jump Statements.

17. What is meant by functions in JavaScript? (CO5, K6)

Functions in JavaScript is used to develop and maintain a larger program by dividing it into
smaller simple blocks of code or modules. These smaller blocks of code are called as
functions. These functions are designed to perform a specific task when it is been
invoked(called).
18. What are the 3 ways of writing a function in JavaScript? (CO5, K6)
i. Function Declaration
ii. Function Expression
iii. Arrow Function

19. Differentiate between recursion and iteration. (CO5, K6)

Property Recursion Iteration

A set of instructions
Definition Function calls itself. repeatedly executed.

Application For functions. For loops.

Through base case, When the termination

where there will be condition for the iterator
Termination function call. ceases to be satisfied.

Code Size Smaller code size Larger Code Size.

Very high (generally Relatively lower time

exponential) time complexity (generally
Time Complexity complexity. polynomial-logarithmic).

20. List down the characteristics of an Array. (CO5, K6)

• JavaScript arrays are resizable and can contain a mix of different data types.
• JavaScript arrays are not associative arrays and so, array elements cannot be accessed
using arbitrary strings as indexes, but must be accessed using nonnegative integers.
• JavaScript arrays are zero-indexed: the first element of an array is at index 0, the second
is at index 1, and so on — and the last element is at the value of the array's length
property minus 1.
• The length property returns the length of an array.
21. What are the 3 ways to construct an array in JS? (CO5, K6)

i. By array literal

ii. By creating instance of Array directly (using new keyword)

iii. By using an Array constructor (using new keyword)

 12. Part-B Questions : UNIT IV

Q. Questions CO K Level
No. Level

1 Explain the memory concepts of JavaScript in detail. CO5 K6

Define operators and explain the different types of

2 CO5 K6
operators in detail.

3 Illustrate the various control statements in JavaScript. CO5 K6

Define functions and explain the program modules

4 CO5 K6
and the programmer defined functions in detail.

5 Explain the scope rules in JavaScript. CO5 K6

Define recursive function and explain it in detail with

6 CO5 K6
an example.
Define arrays and demonstrate how to create an array
7 CO5 K6
and how to allocate elements to it.
Explain reference and reference parameters in detail
8 and demonstrate the different ways to pass an array CO5 K6
to a function.

9 Define multi-dimensional array and explain it in detail. CO5 K6

 13. Supportive Online Certification
Courses

UNIT IV
Sl. Courses Platform
No.
1 JavaScript for Beginners Coursera
2 JavaScript Part I NPTEL
3 Complete JavaScript Course - Beginner to Professional Udemy
 14. REAL TIME APPLICATIONS : UNIT IV

Hands-on-Exercise
1. Whip-up gift boxes
2. Chronometer
3. Theme Clock
4. Numberates Game
5. My Tasks
6. Event Handling
7. Form Validations

Art

A recent feature of HTML5 in JavaScript is the canvas element, which allows drawing
2D and 3D graphics easily on a web page. This has helped open doors for various
digital art projects on the browser. Become a digital artist, creating your own code of
art using JavaScript.

Flying Robots

Last but not least, you can use JavaScript to program a flying robot. With the Node.js
ecosystem, users can control numerous small robots, creative maker projects, and IoT
devices. Step into the exciting world of drones, flying robots, and quadcopters with
JavaScript.

Games

Creating games on the web is another important one among applications of JavaScript.
The combination of JavaScript and HTML5 plays a major role in games development
using JS. The EaselJS library provides rich graphics for games. HTML5 provides total
access to the web without additional plugins like Flash. Complex browser games Tower
Building, CrossCode, HexGL game are based on JavaScript and HTML5.
15. Content Beyond Syllabus
JavaScript - Page Printing

JavaScript helps you to implement this functionality using the print function of
window object.

The JavaScript print function window.print() prints the current web page when
executed. You can call this function directly using the onclick event as shown
in the following example.

Output

Although it serves the purpose of getting a printout, it is not a recommended

way. A printer friendly page is really just a page with text, no images, graphics,
or advertising.
 16. Assessment Schedule
Tentative schedule for the Assessment During 2022-2023 Odd semester

S.NO Name of the Start Date End Date Portion

Assessment

1. Unit Test I - - Unit I

2. IAT 1 07.12.2022 14.12.2022 Unit I & II

3. Unit Test II - - Unit III

4. IAT II 22.01.2023 30.01.2023 Unit III & IV

5. Revision I 11.02.2023 14.02.2023 Unit V,I & II

6. Revision II - - Unit III & IV

7. Model 15.02.2023 24.02.2023 All 5 Units

17. Prescribed Text & Reference Books

Sl. Book Name & Author Book

No.
1 Roger S. Pressman, “Software Engineering: A Practitioner‘s Text Book
Approach”, McGraw Hill International Edition, Nineth Edition,
2020.

2 Scott Chacon, Ben Straub, “Pro GIT”, Apress Publisher, 3rd Text Book
Edition, 2014.

3 Deitel and Deitel and Nieto, “Internet and World Wide Web - Text Book
How to Program”, Pearson, 5th Edition, 2018.

4 Roman Pichler, “Agile Product Management with Scrum Reference

Creating Products that Customers Love”, Pearson Education, 1 Book
st Edition, 2010.
5 Jeffrey C and Jackson, “Web Technologies A Computer Science Reference
Perspective”, Pearson Education, 2011. Book
6 Stephen Wynkoop and John Burke, “Running a Perfect Reference
Website”, QUE, 2nd Edition, 1999. Book
7 Chris Bates, “Web Programming – Building Intranet Reference
Applications”, 3rd Edition, Wiley Publications, 2009. Book
8 Gopalan N.P. and Akilandeswari J., “Web Technology”, Second Reference
Edition, Prentice Hall of India, 2014.. Book
9 https://infyspringboard.onwingspan.com/web/en/app/toc/ Reference
lex_auth_013382690411003904735_shared/overview Book
10 https://infyspringboard.onwingspan.com/web/en/app/ Reference
toc/lex_auth_0130944214274703362099_shared/overview Book
18. Mini Project Suggestions

Develop any one of the following web applications

1. Online assessment system

2. Ticket reservation system

3. Online shopping

4. Student management system

5. Student result management system

6. Library management

7. Hospital management

8. Attendance management system

9. Examination automation system

10.Web based chat application

 Thank you

Disclaimer:

This document is confidential and intended solely for the educational purpose of RMK Group of
Educational Institutions. If you have received this document through email in error, please notify the
system manager. This document contains proprietary information and is intended only to the
respective group / learning community as intended. If you are not the addressee you should not
disseminate, distribute or copy through e-mail. Please notify the sender immediately by e-mail if you
have received this document by mistake and delete this document from your system. If you are not
the intended recipient you are notified that disclosing, copying, distributing or taking any action in
reliance on the contents of this information is strictly prohibited.