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. 1 Lecture No. 3
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
Objects, Understand Java Script Date Objects, Understand Java Script Error Objects.
Chapter-2 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
•T
Unit Name Outcome
I HTML and Web Development Essentials with JavaScript:
JavaScript Basics• Javascript basics,
• Nature of Javascript language
• Understanding it's primitive types
The course outcome of this lecture is to implement the validation using
JavaScript. (CO1)
APEX INSTITUTE OF TECHNOLOGY 6
UNIVERSITY INSTITUTE OF ENGINEERING
What’s a Scripting Language?
• Language used to write programs that compute inputs to another language
processor
• One language embedded in another
• Embedded JavaScript computes HTML input to the browser
• Shell scripts compute commands executed by the shell
• Common characteristics of scripting languages
• String processing – since commands often strings
• Simple program structure, define things “on the fly”
• Flexibility preferred over efficiency, safety
• Is lack of safety a good thing? (Example: JavaScript used for Web
applications…)
APEX INSTITUTE OF TECHNOLOGY slide 7
UNIVERSITY INSTITUTE OF ENGINEERING
Why JavaScript?
• “Active” web pages
• Web 2.0
• AJAX, huge number of Web-based applications
• Some interesting and unusual features
• First-class functions - interesting
• Objects without classes - slightly unusual
• Powerful modification capabilities - very unusual
• Add new method to object, redefine prototype, …
• Many security and correctness issues
• “The world’s most misunderstood prog. language”
APEX INSTITUTE OF TECHNOLOGY slide 8
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Introduction
• JavaScript is a lightweight, interpreted programming language used to
add interactivity to web pages.
• Runs in the web browser (client-side) and on servers via Node.js.
• Works alongside HTML and CSS to build modern websites.
• Uses in Web Development:
• Form validation
• DOM manipulation
• Event handling
• Animations
• API communication
APEX INSTITUTE OF TECHNOLOGY slide 9
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Key Characteristics of JavaScript:
• Lightweight & Dynamic
• Loosely Typed Language
• Object-Oriented & Functional
• Interpreted (not compiled)
• Cross-platform (runs in browser and server)
• Supports event-driven and asynchronous programming
APEX INSTITUTE OF TECHNOLOGY slide 10
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
How JavaScript Works
• Embedded in HTML using <script> tag
• Executed by the browser’s JavaScript engine
• Executes line-by-line (interpreted, not compiled)
• Allows event-driven and asynchronous programming
Example
html
<script>
alert("Welcome to JavaScript!");
</script>
APEX INSTITUTE OF TECHNOLOGY slide 11
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Nature of JavaScript as a Language
• Loosely Typed: No need to declare variable types
• Dynamic Typing: Variables can hold different data types at different times
• Interpreted: Runs directly in browser without compilation
• Object-Based: Everything is treated as objects (except primitives)
• Event-Driven: Responds to user actions like clicks or form inputs
• Prototype-Based: Uses prototypes for inheritance (instead of classes)
APEX INSTITUTE OF TECHNOLOGY slide 12
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Variable Declaration
• Declaring variables using:
o var (function scoped)
o let (block scoped)
o const (block scoped, constant value)
Example
Javascript
let name = "John";
const age = 25;
var isActive = true;
Best practice: Use let and const in modern JavaScript
APEX INSTITUTE OF TECHNOLOGY slide 13
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Primitive Data Types – Overview
• JavaScript has 7 primitive data types:
Type Example
String "Hello"
Number 42, 3.14
Boolean true, false
Null null
Undefined undefined
Symbol Symbol("id")
BigInt 123n
Primitives are immutable and compared by value.
APEX INSTITUTE OF TECHNOLOGY slide 14
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Characteristics of Primitive Types
• Stored directly in memory (not by reference)
• Cannot have properties or methods
• Used to store simple values
• Type coercion may occur in dynamic operations
Example
Javascript
let x = "5" + 2; // Result: "52" (String)
let y = "5" - 2; // Result: 3 (Number)
APEX INSTITUTE OF TECHNOLOGY slide 15
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Basics
Type Detection and Type Conversion
• Type Checking:
javascript
typeof "Hello" // "string"
typeof 123 // "number"
typeof undefined // "undefined“
• Type Conversion:
• Implicit (automatic): "5" + 1 → "51"
• Explicit (manual):
javascript
Number("10") // 10
String(123) // "123"
Boolean("") // false
APEX INSTITUTE OF TECHNOLOGY slide 16
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Code Output Using Primitive Data Types & Control Structures
Example Code:
javascript
let a = 10;
let b = 5;
let result;
if (a > b) {
result = a + b;
} else {
result = a - b;
}
console.log("Result is:", result);
Explanation:
• a = 10, b = 5 → a > b is true
• So, result = a + b = 15
• Output:
Result is: 15
Concepts Involved:
• Primitive Types: Number, String
• Control Structure: if-else
• Output: Uses console.log() for display
Shows how JavaScript uses numbers and conditional logic for simple decision-making and arithmetic.
APEX INSTITUTE OF TECHNOLOGY slide 17
UNIVERSITY INSTITUTE OF ENGINEERING
Role of for and while Loops in JavaScript Control Flow
Why Loops?
• Loops repeat tasks without redundant code.
• Help manage iterations, counts, and logic flows efficiently.
Example: for Loop
javascript
for (let i = 1; i <= 5; i++) {
console.log("Count:", i);
}
Output: Count: 1 … Count: 5
Example: while Loop
javascript
let i = 1;
while (i <= 5) {
console.log("Number:", i);
i++;
}
Output: Number: 1 … Number: 5
APEX INSTITUTE OF TECHNOLOGY slide 18
UNIVERSITY INSTITUTE OF ENGINEERING
Benefits in Control Flow:
• Automates repetitive tasks
• Controls how many times a block of code runs
• Adapts based on conditions or counters
Loops are essential for processing data, rendering UI elements, and controlling program logic
in JavaScript.
APEX INSTITUTE OF TECHNOLOGY slide 19
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript History
• Developed by Brendan Eich at Netscape
oScripting language for Navigator 2
• Later standardized for browser compatibility
oECMAScript Edition 3 (aka JavaScript 1.5)
• Related to Java in name only
o“JavaScript is to Java as carpet is to car”
oName was part of a marketing deal
• Various implementations available
oSpiderMonkey C implementation (from Mozilla)
oRhino Java implementation (also from Mozilla)
APEX INSTITUTE OF TECHNOLOGY slide 20
UNIVERSITY INSTITUTE OF ENGINEERING
Motivation for JavaScript
• Netscape, 1995
• > 90% browser market share
o “I hacked the JS prototype in ~1 week in May and it showed!
Mistakes were frozen early. Rest of year spent embedding in
browser” -- Brendan Eich, ICFP talk, 2006
• Design goals
o Make it easy to copy/paste snippets of code
o Tolerate “minor” errors (missing semicolons)
o Simplified onclick, onmousedown, etc., event handling
o Pick a few hard-working, powerful primitives
o First-class functions, objects everywhere, prototype-based
o Leave all else out!
APEX INSTITUTE OF TECHNOLOGY slide 21
UNIVERSITY INSTITUTE OF ENGINEERING
Common Uses of JavaScript
• Form validation
• Navigation systems
• Basic math calculations
• Dynamic content manipulation
• Sample applications
• Dashboard widgets in Mac OS X, Google Maps, Philips universal
remotes, Writely word processor, hundreds of others…
APEX INSTITUTE OF TECHNOLOGY slide 22
UNIVERSITY INSTITUTE OF ENGINEERING
Example 1: Add Two Numbers
<html>
…
<p> … </p>
<script>
var num1, num2, sum
num1 = prompt("Enter first number")
num2 = prompt("Enter second number")
sum = parseInt(num1) + parseInt(num2)
alert("Sum = " + sum)
</script>
…
</html>
APEX INSTITUTE OF TECHNOLOGY slide 23
UNIVERSITY INSTITUTE OF ENGINEERING
Example 2: Browser Events
<script type="text/JavaScript"> Mouse event causes
function whichButton(event) { page-defined function to
if (event.button==1) { be called
alert("You clicked the left mouse button!") }
else {
alert("You clicked the right mouse button!")
}}
</script>
…
<body onmousedown="whichButton(event)">
…
</body>
Other events: onLoad, onMouseMove, onKeyPress, onUnLoad
APEX INSTITUTE OF TECHNOLOGY slide 24
UNIVERSITY INSTITUTE OF ENGINEERING
Language Basics
• JavaScript is case sensitive
• onClick, ONCLICK, … are HTML, thus not case-sensitive
• Statements terminated by returns or semi-colons
• x = x+1; same as x = x+1
• “Blocks” of statements enclosed in { …}
• Variables
• Define using the var statement
• Define implicitly by its first use, which must be an assignment
• Implicit defn has global scope, even if occurs in nested
scope!
APEX INSTITUTE OF TECHNOLOGY slide 25
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Blocks
• Use { } for grouping; not a separate scope
js> var x=3;
js> x
3
js> {var x=4; x}
4
js> x
4
• Not blocks in the sense of other languages
APEX INSTITUTE OF TECHNOLOGY slide 26
UNIVERSITY INSTITUTE OF ENGINEERING
JavaScript Primitive Datatypes
• Boolean: true and false
• Number: 64-bit floating point
• Similar to Java double and Double
• No integer type
• Special values NaN (not a number) and Infinity
• String: sequence of zero or more Unicode chars
• No separate character type (just strings of length 1)
• Literal strings using ' or " characters (must match)
• Special objects: null and undefined
APEX INSTITUTE OF TECHNOLOGY slide 27
UNIVERSITY INSTITUTE OF ENGINEERING
Summary of the lecture
• Learnt about the basics of JavaScript language.
• Learnt about the nature of language
• Learnt about the primitive datatypes
APEX INSTITUTE OF TECHNOLOGY 28
UNIVERSITY INSTITUTE OF ENGINEERING
Questions of this Lecture
(Discussion Topics)
• Discuss the advantages of JavaScript
• Discuss the fundamental characteristics of JavaScript as an interpreted and loosely typed
language.
• Discuss the syntax and usage of if and switch statements in JavaScript with suitable examples.
• Discuss the type of scripting language JavaScript represents.
• Discuss why JavaScript is considered a loosely typed language.
• Discuss any two basic (primitive) data types used in JavaScript.
• Discuss & Clarify the concept of dynamic typing in JavaScript.
• Discuss the common operations that can be performed on JavaScript primitive data types.
• Discuss & Analyse the output of a JavaScript code snippet that uses primitive data types and
control structures for basic arithmetic tasks.
• Discuss how loop structures like for and while help manage control flow in JavaScript
programs.
APEX INSTITUTE OF TECHNOLOGY 29
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 30
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 31
UNIVERSITY INSTITUTE OF ENGINEERING
Student Feedback Form
Class Session Review
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
12
Thank You
For queries
Email: amardeep.e17149@cumail.in
APEX INSTITUTE OF TECHNOLOGY
UNIVERSITY INSTITUTE OF ENGINEERING
