Academic Session 2025-26
ODD Semester Jul-Dec 2025
UNIVERSITY INSTITUTE OF ENGINEERING
APEX INSTITUTE OF TECHNOLOGY
B.E CSE/ Cloud Computing & DevOps
(5th Semester)
MICROSERVICES ARCHITECTURE & ITS IMPLEMNTATION
(23CSH-331)
Unit No. 1 Chapter No. 2 Lecture No. 4
Topic : HTML & Java Script Basics
Dr.Amardeep Singh(E17149) Professor
MICROSERVICES ARCHITECTURE & ITS IMPLEMNTATION :
COURSE OBJECTIVES
The Course aims to:
1. Understand the value proposition and technical aspects of microservices.
2. Comprehend the need for microservices and its evolution.
3. Demonstrate use of appropriate containers and microservices for
developing and deploying applications with cloud.
4. Analyze the need of microservices
5. Develop, test and analyze a Microservice.
APEX INSTITUTE OF TECHNOLOGY 2
UNIVERSITY INSTITUTE OF ENGINEERING
COURSE OUTCOMES
On completion of this course, the students shall be able to:-
CO1 Define and differentiate between various Microservices Architectural styles.
CO2 Demonstrate various strategies available for microservices decision making.
CO3 Describe the technical aspects of microservices.
CO4 Explain the use functions for microservices.
CO5 Analyze the microservices for developing and deploying applications with cloud.
APEX INSTITUTE OF TECHNOLOGY 3
UNIVERSITY INSTITUTE OF ENGINEERING
Unit-1 Syllabus
Unit-1 HTML and JavaScript Basics
Chapter-1 HTML and CSS, Client Server Architecture,
JavaScript Basics, Nature of JavaScript language,
Understand JavaScript primitive types.
JavaScript Objects: - Java Script Array, Date and Error Objects types, Understand Java Script Array
Chapter-2 Objects, Understand Java Script Date Objects, Understand Java Script Error Objects.
Java Script Variables and Control Statements: - JavaScript Variables and different Control
Statements, understand how to define JavaScript Variables, Work Java Script If statements, Work
Java Script switch statements, Work Java Script for and while loop statements
JavaScript Functions: -introduces JavaScript Functions, declare a JavaScript function, creating
custom objects with functions, adding functions to prototypes, Self-executing functions.
Chapter-3 Client-Side Java Script: -JavaScript is used with HTML and the Document Object Model i.e DOM,
Understand Scripts in HTML documents, Describe the document object model (DOM) hierarchy,
Overview of the DOM specification levels, Describe the window and document objects, Accessing
document elements.
APEX INSTITUTE OF TECHNOLOGY 4
UNIVERSITY INSTITUTE OF ENGINEERING
SUGGESTIVE READINGS
TEXT BOOKS:
T1 Sam Newman, Building Micro-services: Designing Fine-Grained Systems 1st Edition, O'Reilly, 2015.
T2 Eberhard Wolff, Microservices - A Practical Guide Principles, Concepts, and Recipes, 2018.
REFERENCE BOOKS:
R1 Sam Newman, Building Micro-services: Designing Fine-Grained Systems 1st Edition, O'Reilly, 2015.
APEX INSTITUTE OF TECHNOLOGY 5
UNIVERSITY INSTITUTE OF ENGINEERING
Learning Outcome of this lecture
Unit Name Outcome
I HTML and Objects in JavaScript
JavaScript Basics • Javascript arrays with example codes
• Date and Error object types
• Understand Javascript Array Objects
• Understand Java Script Date Objects
• Understand Java Script Error Objects
The course outcome of this lecture is to explain the working of JavaScript
arrays and other object types (CO1)
APEX INSTITUTE OF TECHNOLOGY 6
UNIVERSITY INSTITUTE OF ENGINEERING
Topic of today
Objects in JavaScript
• Javascript arrays with example codes
• Date and Error object types
• Understand Javascript Array Objects
• Understand Java Script Date Objects
• Understand Java Script Error Objects
APEX INSTITUTE OF TECHNOLOGY 7
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays
Introduction to JavaScript Arrays
Key Points:
•An array is a data structure to store multiple values in a single variable.
•Each item in an array has a numeric index starting from 0.
•Arrays can hold any data type (numbers, strings, objects, etc.).
Example:
Javascript
let fruits = ["Apple", "Banana", "Cherry"];
console.log(fruits[0]); // Output: Apple
APEX INSTITUTE OF TECHNOLOGY 8
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays
What is a JavaScript Array?
•Arrays store multiple values in a single variable.
•Indexed collection (zero-based).
•Syntax: let arr = [val1, val2, val3];
Example:
javascript
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]); // Output: Banana
APEX INSTITUTE OF TECHNOLOGY 9
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays
Array Properties and Length
•length: total number of elements.
•Access using index.
Example:
Javascript
let nums = [10, 20, 30, 40];
console.log(nums.length); // Output: 4
APEX INSTITUTE OF TECHNOLOGY 10
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays
Common Array Methods
•push(), pop(), shift(), unshift()
•indexOf(), includes(), join()
Example:
javascript
let colors = ["Red", "Green"]; colors.push("Blue");
console.log(colors); // ["Red", "Green", "Blue"]
APEX INSTITUTE OF TECHNOLOGY 11
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays
Looping Through Arrays
•for loop, forEach, map
Example:
javascript
let names = ["Alice", "Bob", "Charlie"];
names.forEach((name) => console.log(name));
APEX INSTITUTE OF TECHNOLOGY 12
UNIVERSITY INSTITUTE OF ENGINEERING
Date and Error Object Types
Introduction to Built-in Objects
•Date and Error are built-in object types.
•Used to handle time/date and error information.
APEX INSTITUTE OF TECHNOLOGY 13
UNIVERSITY INSTITUTE OF ENGINEERING
Date and Error Object Types
JavaScript Date Object
•Used to handle dates and times.
•Syntax: let date = new Date();
Example:
javascript
let today = new Date();
console.log(today.toDateString());
APEX INSTITUTE OF TECHNOLOGY 14
UNIVERSITY INSTITUTE OF ENGINEERING
Date and Error Object Types
JavaScript Error Object
•Represents an error when something goes wrong.
•Syntax: new Error("message")
Example:
javascript
let err = new Error("Something went wrong");
console.log(err.message);
APEX INSTITUTE OF TECHNOLOGY 15
UNIVERSITY INSTITUTE OF ENGINEERING
Date and Error Object Types
Usage in Try-Catch Block
Example:
Javascript
try {
throw new Error("Manual error");
} catch (e) {
console.log("Caught error:", e.message);
}
•try-catch is used for error handling in runtime.
APEX INSTITUTE OF TECHNOLOGY 16
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays Objects
What are JavaScript Array Objects?
Key Points:
•Arrays in JavaScript are specialized objects used to store ordered collections.
•Each item has a numeric index.
•Internally, arrays are of type object (not array).
Code Example:
Javascript
let arr = ["JS", "Python", "C++"];
console.log(typeof arr); // "object"
APEX INSTITUTE OF TECHNOLOGY 17
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays Objects
Creating Array Objects
Key Points:
•You can create arrays using:
•Array literal ([])
•new Array() constructor
Examples:
javascript
let a = [10, 20, 30]; // Literal
let b = new Array(100, 200); // Constructor
console.log(b[1]); // Output: 200
APEX INSTITUTE OF TECHNOLOGY 18
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays Objects
Array Object Methods and Properties
Key Methods:
•push(), pop(), shift(), unshift()
•indexOf(), slice(), splice()
•length property gives the number of elements
Code Example:
Javascript
let nums = [1, 2, 3];
nums.push(4);
console.log(nums); // [1, 2, 3, 4]
console.log(nums.length); // 4
APEX INSTITUTE OF TECHNOLOGY 19
UNIVERSITY INSTITUTE OF ENGINEERING
Java Script Arrays Objects
Array Object Methods and Properties
Feature Array Object
Indexing Numeric (0, 1, 2...) String-based keys
Ordered elements Yes No guarantee of order
length property Exists Not defined
Code Comparison:
javascript
let obj = { a: 1, b: 2 };
let arr = [1, 2];
console.log(obj.a); // 1
console.log(arr[0]); // 1
APEX INSTITUTE OF TECHNOLOGY 20
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Array Objects
What are Array Objects?
•Arrays are special type of objects in JavaScript.
•Indexed collections with methods.
Syntax:
Javascript
let arr = new Array("a", "b", "c");
APEX INSTITUTE OF TECHNOLOGY 21
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Array Objects
Array Constructor
•You can create arrays using the Array constructor.
Javascript
let scores = new Array(100, 200, 300);
console.log(scores);
APEX INSTITUTE OF TECHNOLOGY 22
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Array Objects
Array Vs Object
Feature Array Object
Indexing Numeric Key-value
Length Yes No
Built-in Methods Yes No (fewer)
APEX INSTITUTE OF TECHNOLOGY 23
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Array Objects
Checking Array Type
Use Array.isArray() to check
Javascript
let x = [1, 2, 3];
console.log(Array.isArray(x)); // true
APEX INSTITUTE OF TECHNOLOGY 24
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Objects
• Objects are collections of properties (equivalent to members of
classes in Java)
• Properties are either data properties or method properties
• Data properties are either primitive values or references to
other objects
• Subprograms called through objects are called methods,
subprograms not called through objects are called functions
• The Object object is the ancestor (through prototype
inheritance) of all objects in a JavaScript program
• Object has no data properties, but several method properties
APEX INSTITUTE OF TECHNOLOGY 25
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Objects
• An object is a collection of named properties
• Think of it as an associative array or hash table
• Set of name:value pairs
• objBob = {name: “Bob", grade: 'A', level: 3};
• Play a role similar to lists in Lisp / Scheme
• New members can be added at any time
• objBob.fullname = 'Robert';
• Can have methods
• Can refer to this
• JS has built-in objects
• E.g. Math, Date
• Browser creates objects
• These model the document (web page)
• You can create your own objects
• But JS has no class
• Objects are built on-the-fly APEX INSTITUTE OF TECHNOLOGY slide 26
UNIVERSITY INSTITUTE OF ENGINEERING
Built-in Objects
There are objects corresponding to the 3 data primitives
Number, String, Boolean
(note the upper case first letter)
These wrap a single value and provide some methods
One method all three wrapper objects have is valueOf() - returns the
corresponding primitive value of an object
Create an object with new:
var doneObj = new Boolean(true);
var numObj = new Number(3.14159);
APEX INSTITUTE OF TECHNOLOGY 27
UNIVERSITY INSTITUTE OF ENGINEERING
Built-in Objects
Boolean has no useful methods of its own
Number has formatting methods
toExponential(digitsAfterDP) - converts the value of the object
into an exponential notation with the # requested digits after .
var num = new Number(10000);
document.write (num.toExponential(1));
writes into document 1.0e+4
toPrecision(numberOfDigits) - converts a number into a
number with the specified number of digits
toFixed(digitsAfterDP) - rounds the number to the specified
number of decimal places
APEX INSTITUTE OF TECHNOLOGY 28
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Date and Error Objects
Date Object – Methods
•getFullYear(), getMonth(), getDate(), toLocaleString()
Example:
Javascript
let d = new Date();
console.log(d.getFullYear());
APEX INSTITUTE OF TECHNOLOGY 29
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Date and Error Objects
Creating Specific Dates
•Syntax: new Date(year, month, day, hour, minute)
Example:
Javascript
let dob = new Date(1999, 5, 15);
console.log(dob.toDateString());
APEX INSTITUTE OF TECHNOLOGY 30
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Date and Error Objects
Error Object Types
•Error, SyntaxError, ReferenceError, TypeError
Example:
Javascript
try {
eval("alert('hi'");
} catch (e) {
console.log(e.name); // SyntaxError
}
APEX INSTITUTE OF TECHNOLOGY 31
UNIVERSITY INSTITUTE OF ENGINEERING
Understanding JavaScript Date and Error Objects
Custom Error Handling
Creating custom error messages
Javascript
function divide(a, b) {
if (b === 0) throw new Error("Divide by zero");
return a / b;
}
APEX INSTITUTE OF TECHNOLOGY 32
UNIVERSITY INSTITUTE OF ENGINEERING
Arrays
JS has arrays which look like Java arrays
Standard variable names to reference Array objects
Indexed with [ ]
JS arrays are objects!
Can be created with new keyword
var newAr = new Array(“one”, “two”, “three”, 4);
var newAr = new Array(3);
1st way creates and initializes array (> 1 argument)
2nd way just sets size (1 int argument)
Can also be created with array literal
var newAr = [“one”, 2, “three”];
Note the square brackets, not braces
Note that values of different data types can be mixed
APEX INSTITUTE OF TECHNOLOGY 33
UNIVERSITY INSTITUTE OF ENGINEERING
Arrays
Array elements are accessed as in Java: var first =
newAr[0];
Can be multi-dimensional as in Java
.length property gives the current length
= the highest subscript to which a value has been assigned + 1, or
the initial size, whichever is larger
Can be read or written
Arrays are not fixed in length
By setting new array elements using an index beyond the current
length, or by setting the length property to a larger value you extend
the array (very much NOT like Java)
By setting the length property to a smaller value you shrink the array
Space is not reserved for each element, only those defined
(assigned)
var a = new Array(5); // all are undefined
a[100] = 2; // has only 1 defined
APEX INSTITUTE OF TECHNOLOGY 34
UNIVERSITY INSTITUTE OF ENGINEERING
Arrays
Flexibility of arrays allows many methods; var list = [2, 4, 6, 8,
10]
slice() – returns part of an array: list.slice(1,3) => array [4, 6]
concat( ) – concatenates new elements to the end of the array;
returns new array: list.concat(12) => [2, 4, 6, 8, 10, 12]
join( ) – creates a string from the array elements, separated by
commas (or specified delimiter): list.join(“ : ”) => “2 : 4 : 6 : 8: 10”
reverse( ) – reverses order of the array elements; affects calling
array
sort( ) – converts elements to strings, sorts them alphabetically (or
you can specify another order as a function); affects calling array
push( ), pop( ) – add/delete elements to the high end of array
unshift( ), shift( ) – add/delete elements at the beginning of the
array
APEX INSTITUTE OF TECHNOLOGY 35
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Date Object Lets us Work With Dates:
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
Creating Date Object
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
New date (YEAR, MONTH,…)
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
Century Year
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
New Date (DATESTRING)
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Stores Dates As Milliseconds
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
New date (MilliSeconds)
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
The TOUTCStRING() METHOD Converts A Date to a UTC String
(A Date Display Standard)
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
Method to Convert A date to a More Readable Format:
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Get Date Methods
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
Summary of the lecture
Objects in JavaScript
• Learnt about Javascript arrays with example codes
• Learnt about Date and Error object types
• Learnt about Javascript Array Objects
• Learnt about Java Script Date Objects
• Learnt about Java Script Error Objects
APEX INSTITUTE OF TECHNOLOGY 46
UNIVERSITY INSTITUTE OF ENGINEERING
Practice & Discussion
•How do you create an array in JavaScript?
Example: let fruits = ["apple", "banana", "cherry"];
•What are some common methods to manipulate arrays (e.g., push(), pop())?
Example: fruits.push("mango");
•How can you loop through an array to access elements?
Example: fruits.forEach(fruit => console.log(fruit));
•What is the difference between map() and forEach()?
Example: let upperFruits = fruits.map(f => f.toUpperCase());
APEX INSTITUTE OF TECHNOLOGY 47
UNIVERSITY INSTITUTE OF ENGINEERING
Questions of this Lecture
(Discussion Topics)
• Discuss what is the purpose of the Date object in JavaScript
• Discuss how do you create a new date instance using the Date() constructor
• Discuss which methods can you use to get parts of a date (e.g., year, month, day)
• Discuss how can you format or manipulate a date in JavaScript
• Discuss JavaScript based on its scripting type.
• Discuss if JavaScript uses dynamic or static typing.
• Discuss to Identify the method used to obtain the length of an array in JavaScript.
• Discuss about the built-in object used for handling date and time in JavaScript.
• Indicate the error type that appears when a variable is accessed before it’s declared.
• Discuss list of the primitive data types available in JavaScript.
• Discuss the keyword used to define a constant value in JavaScript.
• Discuss Comparison of Array, Date, and Error objects in JavaScript using simple code examples
that highlight their structure and use.
• Demonstrate how to retrieve and format the current date and time using the JavaScript Date
object for display on a webpage.
• Discuss to Compare var, let, and const in JavaScript by presenting concise examples that show
differences in declaration and scope.
• Discuss how var, let, and const behave in terms of scope and hoisting in JavaScript, supported by
theoretical explanation.
APEX INSTITUTE OF TECHNOLOGY 48
UNIVERSITY INSTITUTE OF ENGINEERING
REFERENCES
1. "Index of elements in html 4". w3. World Wide Web Consortium. December 24,
1999. Archived from the original on May 5, 2007. Retrieved April 8, 2007.
2. "CSS Flexible Box Layout Module Level 1". W3C. 19 November 2018. Archived from the
original on 19 October 2012. Retrieved 18 October 2012.
3. "Usage statistics of JavaScript as client-side programming language on
websites". w3techs.com. 2021-04-09. Archived from the original on 2022-02-13.
Retrieved 2021-04-09.
4. https://www.coursera.org/specializations/html-css-javascript-for-web-developers.
5. https://www.coursera.org/learn/introduction-html-css-javascript.
6. https://www.coursera.org/specializations/javascript-beginner
7. https://www.coursera.org/learn/javascript-programming-essentials.
8. https://www.coursera.org/learn/programming-with-javascript.
APEX INSTITUTE OF TECHNOLOGY 49
UNIVERSITY INSTITUTE OF ENGINEERING
E-Resources
1. https://www.mooc.org/blog/best-programming-languages-for-web-
development
2. https://en.wikipedia.org/wiki/CSS
3. https://en.wikipedia.org/wiki/HTML
4. https://en.wikipedia.org/wiki/JavaScript
APEX INSTITUTE OF TECHNOLOGY 50
UNIVERSITY INSTITUTE OF ENGINEERING
Student Feedback Form
Class Session Review
APEX INSTITUTE OF TECHNOLOGY
COMPUTER SCIENCE AND ENGINEERING
12
Thank You
For queries
Email: amardeep.e17149@cumail.in
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
