SYMBIOSIS UNIVERSITY OF APPLIED SCIENCES

INDORE

An INTERNSHIP REPORT
(Based on certificate course completion)

ON

“JavaScript Essentials”

Submitted to “Symbiosis University of Applied Sciences, Indore

As an Internship report for the partial fulfillment of the award of degree of

BACHELOR OF TECHNOLOGY
IN
SCHOOL OF COMPUTER SCIENCE AND INFORMATION TECHNOLOGY

Submitted To: Submitted By

Mr.Ankit Jain Soham Chatterjee
Class co-ordinator Enrollment No.:2023btcs051
 SYMBIOSIS UNIVERSITY OF APPLIED SCIENCES
INDORE

CERTIFICATE

This is to certify that the Certification Course entitled “JavaScript Essentials”, completed by
Soham Chatterjee, student of First year towards partial fulfillment of the degree of Bachelor of
Technology in School of Computer Science and Information Technology in year 2024 Symbiosis
University of Applied Sciences , Indore (M.P.).It is a bonafide record of the work carried by
Infosys Springboard during the academic semester 2023-2027

Place:Indore
Date:30-07-2024

INTERNAL EXAMINER EXTERNAL EXAMINER

SYMBIOSIS UNIVERSITY OF APPLIED SCIENCES

INDORE
 Student Undertaking

I hereby undertake that the course entitled “JavaScript Essentials” has been completed by me
from the period to and the report so prepared is a record ofmy learnings during course duration.
I further declare that I have completed the certification course in accordance with the Summer
Training / Internship policy of the University. This report is submitted towards fulfillment of
my academic requirement and not forany otherpurpose.

I hereby undertake that the material of this report is my own learning and I have not copied
anything from anywhere else. The material obtained from other sources
hasbeendulyacknowledged.Iunderstandthatifatanystage,itisfoundthatIhave indulged in any
malpractice or the certificate of completion is obtained using any unfair means by me, the
university shall cancel my degree/withhold my result and appropriate disciplinary action shall
be initiated againstme.

Soham Chatterjee Mentor Name &Signature

EnrollmentNumber:2023btcs051
School of CS/IT
Date:30/07/24
 Head of School Name & Signature

SYMBIOSIS UNIVERSITY OF APPLIED SCIENCES

INDORE

ACKNOWLEDGEMENT

The successful completion of any work is generally not an individual effort. It is an

outcome of dedicated and cumulative efforts of a number of persons, each having its own
importance to the objective. This section is a value of thanks and gratitude towards all those
persons who have implicitly or explicitly contributed in their own unique way towards the
completion of the project. For their invaluable comments and suggestions, I wish to thank them
all.
Positive inspiration and right guidance are must in every aspect of life. Especially, when
we arrive at academic stage for instance. For the success of our project a number of obligations
have been taken. We have performed solemn duty of expressing a heartfelt thanks to all who
have endowed us with their precious perpetual guidance, suggestions and information. Any kind
of help directly or indirectly has proved importance to us.

Student Signature
 SYMBIOSIS UNIVERSITY OF APPLIED SCIENCES
INDORE

The course of JavaScript Essentials is a course provided by Infosys Springboard in which we

learn about concepts of front end development especially JavaScript , the course also contains
HTML and CSS which provides Basics for the foundation of JavaScript the course was around
roughly 19 hours or time containing assessments and interactable ‘WayFarer’ app , and the
execution of code without the use of an Integrated Development Enviornment helps grasping the
contents better and it had projects which can be completed using the given example codes it also
provides us with capstone projects which include a website named MEGA CART in which html
is used , The second project of portfolio management includes coding in javascript and solve
questions inside of the code which was provided by the creators , we have to audit the code and
fix the present bugs,the third project includes a motor shop website in which we add code of our
own to the given code.Concluding the course is great for beginners trying to learn JavaScript.

CONTENTS
Chapter 1: INTRODUCTION
1.1 Introduction of the course
The JavaScript Essentials course begins with a focus on core JavaScript concepts, including
its syntax and fundamental constructs. It progresses through essential topics such as data
types, functions, and object-oriented programming. A significant emphasis is placed on
understanding the Document Object Model (DOM) to manipulate HTML and CSS
effectively.
Key Learning Objectives:
 Fundamental Concepts: Gain proficiency in JavaScript syntax, data types, and
operators.
 Functional Programming: Learn to write and utilize functions, manage scope, and
understand closures.
 DOM Interaction: Develop skills to dynamically interact with and modify HTML and
CSS through JavaScript.
 Event Handling: Understand how to capture and manage user inputs and interactions.
 Asynchronous JavaScript: Explore asynchronous programming techniques, including
callbacks, promises, and async/await.
1.2 Hands-on Practice: Engage in practical exercises and projects to apply theoretical
knowledge in real-world scenarios.
1.2.1 JavaScript Essentials
1.2.2 Infosys Springboard
1.2.3 JavaScript Essentials-:
 Prelude
 Setting up the Environment
 JavaScript Fundamentals
 Functions
 Object Oriented Programming
 Pattern Matching and Error Handling
 Asynchronous Execution
 Web API - DOM and AJAX (XHR)
 Web API - ES6 Module system, Notification and Storage API
 JavaScript Security
 JavaScript - Best Practices
 Case Study: mCart Shopping App
 Course Summary: JavaScript Essentials
 JavaScript - Capstone Project
 Appendix
 JavaScript Essentials: Assessment
1.2.4 Overview of training outcome
1. Understanding JavaScript Fundamentals
 Syntax and Operators: Learn the basic syntax of JavaScript, including data types,
operators, and expressions.
 Control Structures: Gain knowledge of conditional statements (if, switch) and loops
(for, while, do-while).
2. Working with Functions
 Function Declaration and Expression: Understand how to define and invoke functions,
including function expressions and arrow functions.
 Scope and Closures: Learn about variable scope, closures, and how they affect function
behavior.
3. Object-Oriented JavaScript
 Objects and Arrays: Learn how to work with objects and arrays, including creating,
modifying, and accessing their properties and methods.
 Prototypes and Inheritance: Understand the prototype chain and how inheritance works
in JavaScript.
4. Asynchronous JavaScript
 Callbacks: Learn how to use callbacks for handling asynchronous operations.
 Promises and Async/Await: Gain insights into promises and the async/await syntax for
better managing asynchronous code.
5. Error Handling and Debugging
 Try-Catch: Learn how to handle errors using try-catch blocks.
 Debugging Techniques: Understand common debugging practices and tools.
6. DOM Manipulation
  Selecting and Modifying DOM Elements: Learn how to interact with the Document
Object Model (DOM) to manipulate HTML and CSS.
 Event Handling: Understand how to handle user events like clicks, form submissions,
and key presses.
7. Best Practices and Tools
 Code Quality: Learn about best practices for writing clean, maintainable code.
 Development Tools: Get acquainted with tools and libraries commonly used in
JavaScript development, like version control systems and build tools.
8. Practical Application
 Mini-Projects: Apply your skills through hands-on mini-projects or exercises to build
practical JavaScript applications.

1.2.5 Assessment procedure

1. Quizzes and Tests

 Concept Checks: Short quizzes or tests are often used to assess understanding of key concepts
such as syntax, control structures, and functions.

 Mid-Course Assessments: There may be a more detailed test halfway through the course to
evaluate your grasp of the topics covered up to that point.

2. Practical Exercises

 Coding Challenges: Regular coding challenges or exercises are designed to test your ability to
apply concepts in real-world scenarios.

 Hands-On Projects: You might be required to complete mini-projects that involve building
functional JavaScript applications or features, demonstrating your practical skills.

3. Assignments

 Programming Assignments: These assignments usually require you to solve specific problems or
implement features using JavaScript.

 DOM Manipulation Tasks: Assignments might focus on manipulating the DOM or handling user
events to reinforce practical skills.

4. Peer Reviews

 Code Reviews: Some courses include peer review activities where you review and provide
feedback on other learners’ code, and receive feedback on your own code.
 5. Final Project

 Capstone Project: At the end of the course, you may need to complete a larger project that
integrates various concepts learned throughout the course. This project often involves creating a
more complex application or feature, demonstrating your ability to apply your knowledge
comprehensively.

6. Assessments and Feedback

 Automated Feedback: Immediate feedback on coding exercises and quizzes can help you
understand mistakes and improve.

 Instructor or Mentor Feedback: Personalized feedback from instructors or mentors can provide
deeper insights into your strengths and areas for improvement.

7. Grading Criteria

 Correctness: Accuracy of the solutions to coding challenges and assignments.

 Code Quality: Adherence to best practices in writing clean, maintainable code.

 Functionality: How well the final projects or assignments meet the specified requirements and
function as expected.

8. Participation and Engagement

 Forum Contributions: Engagement in course forums or discussion boards may also be part of
the assessment, encouraging active participation and collaboration with peers.

Chapter 2:COURSE MODULES OF INTERNSHIP

THE TOPICS FOR THE COURSE ARE AS FOLLOWS

o Running JavaScript Code

o JavaScript can be executed in web browsers using <script> tags or on the server-side
using Node.js.
o Variables and Datatypes
o Variables: Declared using var, let, or const.
o Data Types: Includes primitive types (Number, String, Boolean, Undefined, Null, Symbol, BigInt)
and non-primitive types (Object, Array).

o Operators
o Arithmetic: +, -, *, /, %
o Comparison: ==, ===, >, <
o Logical: &&, ||, !
o Assignment: =, +=, -=
o Ternary: condition ? expr1 : expr2

o Data Types and Operators - Tryout

o Exercises to practice defining variables, using different data types, and applying
operators.
o Conditional Statements
o if, else if, else: Execute code based on conditions.
o switch: Multi-way branching.

o Iterational Statements and Loops

o for: Fixed number of repetitions.
o while: Repeats while a condition is true.
o do-while: Executes at least once.

o Iteration Structures - Tryout

o Exercises focused on using loops to solve problems.

o JavaScript Fundamentals - Quiz

o Tests understanding of variables, data types, operators, conditionals, and loops.

o Iterational Structure - Exercise

o Practical problems requiring iterative solutions.

o Module Summary: JS Fundamentals

o Recap of key points, best practices, and tips for writing efficient code.

o Functions

o Function Declarations

o Defining reusable code blocks using the function keyword.

o 2. Advanced Function Parameters
o Default Parameters: Provide defaults for missing arguments.
o Rest Parameters: Gather remaining arguments into an array.
o Parameter Destructuring: Extract values from objects/arrays passed as arguments.
o 3. Functions - Tryout

o Practice defining and using functions with various parameters.

o 4. Tryout: Function Parameters

o Exercises focused on using default, rest, and destructured parameters.

o 5. Functions as Objects - Tryout

o Understanding and practicing functions as first-class objects.

o 6. Anonymous Function - Tryout

o Working with unnamed functions often used as arguments or assigned to variables.

o 7. Arrow Functions

o Concise function expressions using =>.

o 8. Variable Scopes
o Global Scope: Accessible anywhere.
o Local Scope: Accessible within the block/function it’s declared.

o 9. Built-in Functions

o Predefined functions provided by JavaScript (e.g., Math, Date).

o Functions - Quiz

o Tests knowledge of function definitions, parameters, scopes, and usage.

o Function Assignment - Exercise

o Solving problems using function implementations.

o Object-Oriented Programming

o Objects Introduction

o Collections of key-value pairs representing complex entities.

o 2. Array Object

o Ordered lists of values, with various methods for manipulation.

o 3. Array Methods

o Common methods: .push(), .pop(), .shift(), .unshift(), .map(), .filter(),

.reduce().

o 4. Array Object - Demo

o Practical exercises on creating and manipulating arrays.

o 5. String Object

o Immutable sequences of characters with methods for manipulation.

o 6. Date Object

o Working with dates and times, providing various methods for manipulation.
o 7. Date Object - Demo

o Exercises on creating and manipulating date objects.

o 9. Object-Literal Notation

o Defining objects using key-value pairs directly.

o 10. Object Literal - Tryout

o Practicing creating and using objects defined using object-literal notation.

o 11. Class and Static Keywords
o Class: Defines a blueprint for objects.
o Static: Methods/properties belong to the class, not instances.

o Class Inheritance

o Creating a new class based on an existing class to promote code reuse.

o Class - Tryout

o Exercises on defining classes, creating instances, and implementing inheritance.

o Custom Objects - Quiz

o Testing knowledge on creating and using custom objects and classes.

 o Object Iteration

o Traversing object properties using for...in, Object.keys(), Object.values(), and

Object.entries().

o Spread Operator

o Expanding iterable objects into individual elements.

o JSON Object

o JavaScript Object Notation for lightweight data interchange.

o Regular Expression Basics

o Regular Expressions (RegEx) are patterns used to match character combinations in

strings. They are used for searching, extracting, and manipulating text. A RegEx consists
of literals and metacharacters.
o Common Metacharacters:
o .: Matches any single character except newline.
o ^: Matches the start of a string.
o $: Matches the end of a string.
o *: Matches 0 or more repetitions.
o +: Matches 1 or more repetitions.
o ?: Matches 0 or 1 repetition.
o \d: Matches any digit (0-9).
o \w: Matches any word character (alphanumeric + underscore).
o \s: Matches any whitespace character.

o RegEx In JavaScript

o JavaScript provides built-in methods for working with RegEx:

o String Methods with RegEx:
o .match(): Executes a search for a match and returns an array of results.
o .replace(): Executes a search for a match and replaces the matched substring with a
replacement substring.
o .search(): Executes a search for a match and returns the index of the match, or -1 if not
found.
o .split(): Splits a string into an array of substrings using the RegEx as the delimiter.

o RegExp Methods:
o .test(): Tests for a match and returns true or false.
o .exec(): Executes a search for a match and returns an array of results or null.
o Pattern Matching - Tryout

o This tryout session involves practical exercises to apply pattern matching using RegEx.
Activities may include:
o Writing RegEx to match specific patterns in strings.
o Using RegEx methods to search, replace, and manipulate strings.
o Solving real-world problems with RegEx.

o Regular Expression - Quiz

o A quiz to test your understanding of Regular Expressions, covering:

o Basic syntax and usage of RegEx.
o Practical application of RegEx methods.
o Writing and interpreting RegEx patterns.

o Regular Expression Assignment - Exercise

o An exercise to further practice your skills with Regular Expressions. This may involve:
o Creating complex RegEx patterns to match specific requirements.
o Using RegEx to validate input data.
o Applying RegEx in different contexts and scenarios.

o Error-Handling and Error Object

o Error-Handling in JavaScript involves managing and responding to errors during code

execution. The Error object provides a standard way to create error messages.
o Creating an Error:
o Properties of the Error Object:
o name: The name of the error (e.g., 'Error', 'TypeError').
o message: A description of the error.
o stack: A stack trace of the error.

o Try and Catch Keywords

o The try...catch statement is used to handle exceptions. Code within the try block is
executed, and if an error occurs, control is transferred to the catch block.
o Finally and Throw Keywords

o The finally block is used to execute code after the try and catch blocks, regardless of
whether an error was thrown or caught.
o Module Summary: RegEx

o The Module Summary provides a recap of key concepts covered in the module:
o Understanding and using Regular Expressions.
o Practical application of RegEx in JavaScript.
o Error-handling mechanisms in JavaScript.
o Best practices for writing and managing code with RegEx and error handling.

o Module 5: Asynchronous Execution

o Asynchronous Execution of JavaScript Code

o JavaScript is single-threaded, meaning it can only execute one task at a time. However, it
supports asynchronous execution, allowing tasks to run in the background without
blocking the main thread. This is crucial for operations like network requests, file I/O,
and timers.
o Callback

o A callback is a function passed as an argument to another function and is executed after

the completion of that function. Callbacks are a common way to handle asynchronous
operations in JavaScript.
o Callback-Tryout

o This tryout session involves practical exercises using callbacks to handle asynchronous
tasks. Activities may include:
o Writing functions that accept callbacks.
o Using callbacks to manage sequences of asynchronous operations.
o Handling errors with callback functions.

o Asynchronous Execution - Quiz

o A quiz to test your understanding of asynchronous execution in JavaScript, covering:

o Basics of asynchronous execution.
o Practical application of callbacks.
o Managing asynchronous tasks.

o Promises

o Promises provide a cleaner way to handle asynchronous operations compared to

callbacks. A Promise represents a value that may be available now, later, or never.
o Promises-Tryout

o This tryout session involves practical exercises using Promises to handle asynchronous
tasks. Activities may include:
o Creating and using Promises.
o Handling success and failure cases.
o Converting callback-based functions to Promise-based.
o Chaining of Promises

o Promise chaining allows you to chain multiple asynchronous operations in sequence,

passing the result of one operation to the next.
o Promise Chaining-Demo

o A demo showcasing how to chain Promises to perform a series of asynchronous

operations in a readable and maintainable manner. This includes handling multiple
asynchronous tasks sequentially and dealing with errors in the chain.
o Promise - Quiz

o A quiz to test your understanding of Promises and Promise chaining in JavaScript,

covering:
o Basics of Promises.
o Creating and handling Promises.
o Chaining Promises for sequential asynchronous operations.

o Async and Await

o async and await provide a more synchronous-like way to handle asynchronous

operations using Promises. An async function returns a Promise, and await pauses the
execution until the Promise is resolved.
o async/await - Tryout

o This tryout session involves practical exercises using async and await to handle
asynchronous tasks. Activities may include:
o Converting Promise-based functions to use async and await.
o Handling errors with try...catch in async functions.
o Writing clean and readable asynchronous code.

o Executing Network Requests using Fetch API

o The Fetch API provides a modern way to make network requests. It returns a Promise
that resolves to the response object.
o Demo: Fetch API

o A demo showcasing how to use the Fetch API to make network requests, handle
responses, and deal with errors. This includes fetching data from a server and processing
the response.
o Module Summary: Asynchronous Execution

o The Module Summary provides a recap of key concepts covered in the module:
o Understanding and using callbacks for asynchronous execution.
o Promises and their usage.
o Chaining Promises for sequential operations.
o Using async and await for cleaner asynchronous code.
o Making network requests with the Fetch API.

o WayFar App: Asynchronous Execution

o In this section, you apply your knowledge of asynchronous execution to the WayFar app.
This may involve:
o Implementing asynchronous features using callbacks, Promises, and async/await.
o Handling network requests to fetch and update data.
o Ensuring smooth and responsive user interactions by managing asynchronous tasks effectively.

o Introduction to Web API

o Web APIs provide a set of functions and tools for building web applications. They allow
developers to interact with the browser, manipulate the document, and perform network
requests, enhancing the functionality and interactivity of web pages.
o Introduction to Document Object Model

o The Document Object Model (DOM) is a programming interface for web documents. It
represents the structure of a document as a tree of objects, allowing developers to
manipulate the content, structure, and styles of a web page programmatically.
o DOM Events

o DOM events are actions that occur as a result of user interaction or browser
manipulation. Common events include clicks, key presses, and mouse movements. Event
listeners can be added to elements to perform specific actions when events occur.
o DOM Events- Quiz

o A quiz to test your understanding of DOM events, covering:

o Event types.
o Adding and removing event listeners.
o Handling events in a web application.

o DOM and Error Handling Assignment - Exercise

o An exercise focused on manipulating the DOM and handling errors. This includes:
o Selecting and modifying DOM elements.
o Adding and removing event listeners.
o Implementing error handling for DOM operations.
o DOM Assignment - Exercise

o This exercise involves practical tasks related to the DOM, such as:
o Traversing the DOM tree.
o Modifying element attributes and styles.
o Creating and appending new elements to the document.

o DOM Event Assignment - Exercise

o This exercise focuses on working with DOM events, including:

o Adding event listeners to various elements.
o Handling different types of user interactions.
o Implementing event delegation for better performance.

o AJAX

o AJAX (Asynchronous JavaScript and XML) is a technique for creating dynamic and
interactive web applications. It allows for updating parts of a web page without reloading
the entire page. This is achieved using the XMLHttpRequest object or the Fetch API.
o DOM and AJAX Assignment - Exercise

o An exercise that combines DOM manipulation and AJAX. Tasks may include:
o Making an AJAX request to fetch data from a server.
o Updating the DOM with the retrieved data.
o Handling errors and displaying messages to the user.

o Module Summary: Web APIs, DOM, and AJAX

o The Module Summary provides a recap of key concepts covered in the module:
o Understanding and using Web APIs.
o Manipulating the DOM to create dynamic web pages.
o Handling DOM events to respond to user interactions.
o Using AJAX to fetch and update data asynchronously.

o WayFar App: Web API - DOM and AJAX

o In this section, you apply your knowledge of Web APIs, DOM, and AJAX to the WayFar
app. This may involve:
o Implementing dynamic and interactive features using DOM manipulation.
o Handling user interactions with DOM events.
o Making AJAX requests to retrieve and display data from the server.
o Ensuring a seamless user experience by efficiently managing asynchronous operations.
o ES6 Module System

o The ES6 module system allows for the organization and reuse of JavaScript code across
different files. Modules help in maintaining clean and manageable code by encapsulating
functionality. Each module can export variables, functions, or classes, and other modules
can import them as needed.
o Modularizing the Code - Quiz

o A quiz to test understanding of the ES6 module system, covering:

o Syntax for exporting and importing modules.
o Advantages of modular code.
o Handling module dependencies.

o Modules - Exercise

o This exercise involves creating and working with modules, including:

o Breaking down a larger codebase into smaller, reusable modules.
o Exporting and importing functions, variables, and classes.
o Understanding and resolving module dependencies.

o Notification API

o The Notification API allows web applications to display notifications to the user.
Notifications can be used to inform users of important events, even when the web page is
not in focus. Permissions must be granted by the user to display notifications.
o Notifications API Assignment - Exercise

o An exercise that involves implementing the Notification API in a web application. Tasks
may include:
o Requesting notification permission from the user.
o Displaying notifications based on certain events or actions.
o Customizing notification content and behavior.

o Storage API

o The Storage API provides mechanisms for storing data on the client side, either
temporarily or persistently. There are two main types of storage: LocalStorage and
SessionStorage. LocalStorage stores data with no expiration time, while SessionStorage
stores data for the duration of the page session.
o Web Storage API

o The Web Storage API allows for storing key-value pairs in a web browser. This is useful
for persisting user data and preferences across sessions. It includes LocalStorage and
SessionStorage, providing simple methods for setting, retrieving, and removing data.
o Web Storage Assignment - Exercise

o An exercise that involves using the Web Storage API in a web application. Tasks may
include:
o Storing user preferences or data using LocalStorage or SessionStorage.
o Retrieving and displaying stored data.
o Managing data lifecycle and handling storage limits.

o Module Summary: ES6 Modules, Notification, and Storage API

o The Module Summary provides a recap of key concepts covered in the module:
o Understanding and using the ES6 module system for organizing code.
o Implementing the Notification API to display user notifications.
o Utilizing the Storage API for storing and managing client-side data.

o WayFar App: ES6 Module System, Notification, and Storage API

o In this section, you apply your knowledge of the ES6 module system, Notification API,
and Storage API to the WayFar app. This may involve:
o Organizing the app's codebase using ES6 modules.
o Implementing notifications to alert users of important updates.
o Using web storage to persist user data and preferences.

o JavaScript Strict Mode

o Strict mode in JavaScript is a way to opt into a restricted variant of JavaScript, which
helps in catching common coding errors and improving the performance of your code. By
using strict mode, you can enforce stricter parsing and error handling in your JavaScript
code.
o Introduction to JavaScript Security

o This topic covers the basics of JavaScript security, highlighting common vulnerabilities
and the importance of securing JavaScript code. It provides an overview of the types of
attacks that can target JavaScript applications.
o A Scenario - JavaScript Security Attack

o A real-world scenario is presented to demonstrate how JavaScript security attacks can

occur. This section helps in understanding the potential impact of security vulnerabilities
in JavaScript applications.
o Cross-Site Scripting (XSS)

o XSS is a type of security vulnerability typically found in web applications. It allows

attackers to inject malicious scripts into webpages viewed by other users. This section
explains how XSS attacks work and their potential consequences.
o XSS Mitigation Techniques

o Various techniques to prevent XSS attacks are discussed, including:

o Validating and sanitizing user input.
o Using secure coding practices.
o Employing Content Security Policy (CSP).

o Demo: DOM XSS

o A demonstration of a DOM-based XSS attack, showcasing how attackers can exploit

vulnerabilities in the Document Object Model (DOM) to inject malicious scripts. This
demo helps in understanding the practical aspects of such attacks.
o Code Analysis - DOM XSS

o An analysis of code vulnerabilities that can lead to DOM-based XSS attacks. This section
involves identifying and fixing insecure code to prevent such attacks.
o Exercise: XSS

o An exercise focused on applying the knowledge gained about XSS and its mitigation
techniques. Participants are tasked with identifying and addressing XSS vulnerabilities in
a given codebase.
o Need for JavaScript Obfuscation

o This topic explains why obfuscating JavaScript code is necessary for security.
Obfuscation helps in making the code difficult to understand and reverse-engineer,
thereby protecting it from potential attackers.
o JavaScript Obfuscation

o An in-depth look at JavaScript obfuscation techniques, which transform the code into an
unreadable format while preserving its functionality. This section discusses various tools
and methods for obfuscating JavaScript code.
o JavaScript Security Checklist

o A checklist of best practices and recommendations for securing JavaScript applications.

This includes guidelines for secure coding, input validation, output encoding, and other
security measures.
o Quiz: JavaScript Security

o A quiz to test the understanding of JavaScript security concepts covered in the module.
The quiz includes questions on XSS, mitigation techniques, obfuscation, and general
security best practices.
 o Summary: JavaScript Security

o A recap of the key points discussed in the module, emphasizing the importance of
securing JavaScript code and the techniques to mitigate common vulnerabilities. This
summary serves as a quick reference guide for the security practices learned.

Chapter 3:ASSIGNEMENTS AND ASSESSMENTS

3.1 Assignment 1 – Write a function, check_palindrome() to check whether the given string is a palindrome or not.
The function should return true if it is a palindrome else it should return false.

function check_palindrome(str) {
const reversedStr = str.split('').reverse().join('');
return str === reversedStr;
}

const testStrings = ['MAN', 'civic', 'WOW', 'hello', 'racecar', 'level'];

testStrings.forEach(str => {
console.log(`${str}: ${check_palindrome(str)}`);
});

#The return str is set as the first string and the reverse is used to reverse the order of alphabets .
the testStrings function is used to check the palindromes

3.2 Write a JavaScript code to process name as the sample below.

Sample Input: Rama Krishna Narayan

Sample Output: R. K. Narayan

function process_name(fullName) {
const names = fullName.split(' ');
const firstInitial = names[0][0];
 const middleInitial = names[1][0];
const lastName = names[2];
return `${firstInitial}. ${middleInitial}. ${lastName}`;}
const sampleInput = "Rama Krishna Narayan";
const processedName = process_name(sampleInput);
console.log(processedName);

#here in this code the name is split into 3 sections first ,middle ,last and after the name is
processed the code is used to take the first indexed initial and put it in the processed name

3.3) Write a JavaScript function to extract unique characters from a string.

Examplestring: "thequickbrownfoxjumpsoverthelazydog"
Expected Output : "thequickbrownfxjmpsvlazydg"

function extractuniquecharacters(str) {
const seen = new Set();
let result = '';
for (const char of str) {
if (!seen.has(char)) {
seen.add(char);
result += char;
}
} return result;
}
const exampleString = "thequickbrownfoxjumpsoverthelazydog";
const uniqueCharacters = extractuniquecharacters(exampleString);
console.log(uniqueCharacters);

#here the function extract unique characters uses has seen or !seen.has to check if the consonant
or vowel is unique or repeated if its unique it will be printed else will be erased from the output
3.4) Write a JavaScript code to formulate date for a specified date after given 'n' number of days.

Sample Input:16th Jul, 2018 and n=30

function addDays(dateString, n) {
const date = new Date(dateString);
date.setDate(date.getDate() + n);

const monthNames = [
"January", "February", "March", "April", "May", "June", "July",
"August", "September", "October", "November", "December"
];

const day = date.getDate();

const month = monthNames[date.getMonth()];
const year = date.getFullYear();

const daySuffix = (day % 10 === 1 && day !== 11) ? "st" :

(day % 10 === 2 && day !== 12) ? "nd" :
(day % 10 === 3 && day !== 13) ? "rd" : "th";

return `${day}${daySuffix} ${month}, ${year}`;

}

const initialDate = "16 Jul, 2018";

const n = 30;

console.log(addDays(initialDate, n));
#

3.5) Write a JavaScript program to search a date within a string.

Sample Input: "Albert Einstein was born in Ulm, on 14/03/1879."

function findDate(str) {
const datePattern = /\b\d{2}\/\d{2}\/\d{4}\b/;
const match = str.match(datePattern);
return match ? match[0] : null;
}
const sampleInput = "Albert Einstein was born in Ulm, on 14/03/1879.";
console.log(findDate(sampleInput)); // "14/03/1879"

#here the string.match(date Pattern); is used to match the function written as const datePattern
and its pattern /\b\d{2}\/\d{2}\/\d{4}\b/.

3.6) Upon clicking "Register" button, store the Username and Password locally using sessionStorage object and display it
in a new success.html page.

Write a JavaScript function add() to achieve the above requirements.

<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Online, Shopping" />
<title>Infy Shopping</title>
</head>
<body>
<header>
<h1>Sign Up!</h1>
</header>

<article>
<form action="success.html" method="GET" onsubmit="add()">
<table>
<tr>
 <td><br><label for="username">Username:</label></td>
<td><br><input type="text" id="username" placeholder="Enter your username"
required autofocus/></td>
</tr>
<tr>
<td><label for="email_id">Email ID:</label></td>
<td><input type="email" id="email_id" placeholder="Enter your email ID"
required/></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" placeholder="Enter your password"
required/></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td><label for="male">Male<input type="radio" id="male" name="gender"
value="M" />&nbsp;
<label for="female">Female<input type="radio" id="female" name="gender"
value="F" ></td>
</tr>
<tr>
<td><label for="dob">DOB:</label></td>
<td><input type="date" id="dob" required/></td>
</tr>
<tr>
<td><label for="phone_no">Phone number:</label></td>
<td><input type="text" id="phone_no" placeholder="Enter your contact number"
pattern="+ [0-9] {12}" required/></td>
</tr>
<tr>
 <td><label for="country">Country:</label></td>
<td><select id="country" placeholder="Select your country">
<option value="India"/>India
<option value="USA"/>USA
<option value="UK"/>UK
<option value="Canada"/>Canada
<option value="Belgium"/>Belgium
<option value="France"/>France
</select></td>
</tr>
<tr>
<td><label id="language">Languages Known:</label></td>
<td><input type="checkbox" name="language" id="english" value="English"
checked="checked"/><label for="english"> English </label>
<input type="checkbox" name="language" id="hindi" value="Hindi"/><label
for="hindi"> Hindi </label>
<input type="checkbox" name="language" id="french"
value="French"/><label for="french"> French </label></td>
</tr>
<tr>
<td><label for="pic">Profile pic:</label></td>
<td><input type="file" id="pic" required/></td>
</tr>
<tr>
<td><label for="yourself">About yourself:</label></td>
<td><textarea></textarea></td>
</tr>
<tr>
<td><input type="submit" value="Register"/>
<td><input type="reset" value="Reset"/>
</tr>
 </table>
</form>
<br/> <br/> <br/> <br/>
</article>

<footer>
<nav> About Us | Privacy Policy | Contact Us | FAQ | Terms & Conditions </nav>
Copyright &copy; 2016 | ETA UI and MarkUp
</footer>
<aside>
Like and Connect with us FB Twitter g+
</aside>

<script>
function add() {
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
sessionStorage.setItem('username', username);
sessionStorage.setItem('password', password);
}
</script>
</body>
</html>
SUCCESS.html
<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Online, Shopping" />
<title>Infy Shopping - Success</title>
</head>
<body>
 <header>
<h1>Registration Successful</h1>
</header>

<article>
<p id="message"></p>
</article>

<footer>
<nav> About Us | Privacy Policy | Contact Us | FAQ | Terms & Conditions </nav>
Copyright &copy; 2016 | ETA UI and MarkUp
</footer>
<aside>
Like and Connect with us FB Twitter g+
</aside>

<script>
document.addEventListener('DOMContentLoaded', function() {
var username = sessionStorage.getItem('username');
var password = sessionStorage.getItem('password');
var message = 'Username: ' + username + '<br>Password: ' + password;
document.getElementById('message').innerHTML = message;
});
</script>
</body>
</html>

These are some examples of the problem statements

Chapter 4:CAPSTONE PROJECTS DETAILS AND CASE STUDIES
Capstone projects contain the projects
1)Mega Cart :
 Sign-Up.html
In this html we have to create a form which consists of the username and password of the
user . we use
 Login.html
 Shop.html

Chapter 5:Attendance Report(The course was completed by me in 14 hours,

All Quiz assessments have been completed
All modules have been completed
All the tryout codes have been completed
All the example codes have been completed

WEEK 1
Summary of Time Spent
• Prelude:(24m 20s)
• Setting up the Environment (1h 1m)
• JavaScript Fundamentals: (1h 21m)
Grand Total Time Spent: (2h 46m)
Achievements
• Course Introduction: Familiarized with the course structure and objectives.
• Environment Setup: Successfully configured the development environment, including
internal and external setups.
• JavaScript Fundamentals: Gained a solid understanding of JavaScript basics, including
syntax, operators, and data types. Completed tryouts and exercises to reinforce learning..
Attended Javascript Fundamentals Quiz and attempted 5/7 questions correctly.
WEEK 2
Summary of time spent
 Functions (1hr 32min)
 Object oriented programming(3 hr)
 Grand total time spent (4hr 32min)
Achievements
 Lean about how to use functions in JavaScript
 Learn about how to use objects, JSON objects, Classes and various assignments and
example codes
 Attempted custom objects quiz and got the score of 5/6.

WEEK 3
 Pattern Matching and Error Handling(1 hr 2min)
 Asynchronous Execution(2hr 20 min)
 Grand total time spent(3hr 22min)
Achievements
 Learnt about pattern matching and types of error handling such as try catch throw throws
 Leant about Callbacks and promises along with tryout codes
 Attempted the quiz on promises got 2/2.

WEEK 4
WEB API
 DOM and AJAX(1hr 40min)
 ES6 Module systems and Notifications and Storage API(59 min)
 Grand total time spent(2 hr 39min)
Achievements
 Learnt about applying Data Object Models and AJAX applications on JavaScript
code
 ES6 module system and Notifications in the browser and notify about the
notification and Storage API for storing data into the local system.
 Attempted the text on DOM quiz and scored 3/3.

WEEK 5
  JavaScript Security(1hr 20min)
 Best practices (5min)
 ECart Case Study(20min)
 Course summary (12min)
 Grand total time spent(1hr 57min)
Achievements
 Leant about scopes and security accesses for JavaScript code and files
 Learnt about code readability and reusability
 Case Study for eCart
 Summarize the learning of the course

WEEK 6
 Capstone projects
 Appendix and last assessment
Achievements
 Progress on capstone projects
 Scored passing grade on the assessment
 And got the certificate on the course

WEEK 7 & 8
 Capstone projects and problem statement evaluations
 Looking through example and tryout codes
Achievements
 Capstone projects understanding and getting a better understanding upon the
example and tryout codes

Chapter 6: CONCLUSION (Anticipatory approach)

Conclusion of the course is to be certified with the JavaScript Essentials certificate and learn
about the topics of JavaScript on a better level of understanding .

Chapter 7: Learning Outcome

About the course we can learn about various topics with example codes and tryout codes
alongside real life examples and the mentor explaining the topics in the video modules.

APPENDIX:

1. Introduction to JavaScript

 Overview: JavaScript is a high-level programming language essential for adding interactivity and
dynamic features to websites. It is primarily used on the client side in web browsers but can also
run on the server side with platforms like Node.js.

2. Basic Syntax

 Variables: JavaScript allows you to store and manage data using variables, which can be
declared with different keywords and have various scopes and mutability.
 Data Types: JavaScript supports several data types, including strings, numbers, booleans,
objects, arrays, null, and undefined.

3. Operators

 Arithmetic Operators: Used to perform basic mathematical operations.

 Comparison Operators: Allow you to compare values and determine the relationship between
them.
 Logical Operators: Used to combine or invert boolean values for conditional logic.

4. Control Structures

 Conditionals: Used to execute code based on certain conditions, including basic if, else, and
switch statements.
 Loops: Enable repetitive execution of code, with options like for, while, and do...while
loops to handle various iteration scenarios.

5. Functions

 Function Declaration: Allows you to define reusable blocks of code that perform specific tasks.
 Arrow Functions: A shorter syntax for writing functions, often used for more concise and
readable code.

6. Objects and Arrays

 Objects: Collections of key-value pairs used to store and manage related data.
 Arrays: Ordered lists of values, useful for storing multiple items in a single variable.
7. DOM Manipulation

 Selecting Elements: Methods to access and interact with HTML elements on a web page.
 Modifying Elements: Techniques to change the content, styles, and attributes of selected
elements.

8. Event Handling

 Events: Actions or occurrences that happen in the browser, such as clicks, form submissions, or
mouse movements.
 Event Listeners: Functions that respond to events, allowing you to execute code when specific
actions occur.

9. Error Handling

 Try...Catch: A mechanism for managing errors that occur during the execution of code, enabling
graceful error handling and debugging.

10. Asynchronous JavaScript

 Promises: Objects representing the eventual completion or failure of an asynchronous

operation.
 Async/Await: Syntax for handling asynchronous operations in a more readable and manageable
way, allowing code to be written as if it were synchronous.

11. Best Practices

 Code Readability: Writing clear and understandable code by using meaningful variable names,
consistent formatting, and comments.
 Avoid Global Variables: Reducing potential conflicts and unintended side effects by using local
scope.
 Modular Code: Organizing code into reusable functions and modules to enhance maintainability
and scalability.

BIBLIOGRAPHY AND REFERENCE (as applicable)

The bibliography used here is Infosys Springboard and StackOverflow and AI tools
References of the projects are Infosys Springboard and the language JavaScript