Examination Practice Questions: Enterprise
Application Development I
Client-Server System (N-Tier Architecture)
1. What is the client-server model? Explain the roles of the client and the server.
Answer: The client-server model is a distributed application architecture where clients
(requesters of service) communicate with servers (providers of service) over a network 1 . The
client initiates requests (e.g., an HTTP request for a web page), and the server fulfills them by
processing and returning the requested resource. For instance, a web browser (client) requests a
page, and the web server processes the request and sends back the HTML content 1 .
2. What is N-tier architecture?
Answer: N-tier (multitier) architecture divides an application into multiple logical layers and
corresponding physical tiers 2 . Common layers include a presentation (UI) layer, a business
logic layer, and a data layer. Each layer has a specific responsibility (such as handling user
interface, processing business rules, or managing data) and may run on separate servers. This
separation improves modularity and scalability, since each tier can be developed, deployed, or
scaled independently 2 .
3. List and describe the common layers in a three-tier architecture.
Answer: A typical three-tier architecture consists of:
4. Presentation Tier (Client): The user interface (e.g. a web browser) that handles interaction with
the user. It displays data and captures user input.
5. Application (Business Logic) Tier: The middle layer where data is processed and business rules
are applied. It runs on an application server.
6. Data Tier (Database): The back-end layer where data is stored and managed, typically a
database server.
The presentation layer sends user requests to the application layer, which performs
computations or queries. The data layer returns results to the application layer, which then sends
information back to the presentation tier 3 4 .
7. What are the advantages of using an N-tier architecture in enterprise applications?
Answer: N-tier architecture improves scalability, flexibility, and maintainability 2 . By
separating responsibilities into layers, each tier can be scaled independently. For example,
during high load more servers can be added to the presentation tier without affecting other
tiers. It also improves fault isolation: problems in one tier don’t necessarily crash the others.
More servers can be added to specific tiers to handle load more easily 5 .
8. What are some disadvantages or challenges of N-tier architecture?
Answer: The main drawbacks are increased complexity and performance overhead. More
tiers mean more components to build, configure, and maintain. Communication between tiers
adds network latency 5 . For example, Azure documentation notes that physically separating
1
tiers introduces extra network hops 5 . Coordinating deployments across multiple tiers can also
raise costs and complexity.
9. Compare two-tier and three-tier architectures. Provide an example of each.
Answer: In a two-tier architecture, the client directly communicates with the database server
6 . Often the client has the UI and some logic, and the server is a database. This is simple but
less scalable. For example, a desktop application that reads from a local database is two-tier.
In a three-tier architecture, an intermediate application layer is added between the client and
database 7 . The client sends requests to this middle layer, which processes data and then
queries the database. For instance, a web application with a separate app server is three-tier.
Three-tier systems are more scalable and allow a clear separation of concerns 6 7 .
10. Define a thin client and a thick (fat) client. Give an example of each.
Answer: A thin client is a lightweight client that relies on a central server for processing and
storage 8 . It performs minimal work itself. An example is a web browser running a rich web
application. A thick (fat) client does most processing locally and can operate offline 9 . It has
its own software and storage. An example is a desktop email client that stores data locally and
can work without a constant server connection 9 .
11. Explain strict vs. relaxed communication models in N-tier architectures.
Answer: In a strict model, each request flows sequentially through all tiers. For example, the
client’s request goes to the presentation tier, which then calls the business tier, which then
accesses the data tier 10 . No tier is skipped. In a relaxed model, a request can bypass
intermediate tiers; e.g., the presentation tier might query the data tier directly. Strict mode adds
more overhead at each hop, while relaxed mode can be faster but increases coupling between
tiers 10 .
12. What is middleware in the context of N-tier architecture? Provide an example.
Answer: Middleware is software that connects different tiers of an application. It often runs on
application servers or messaging systems. For example, a message queue (like RabbitMQ) is
middleware: the presentation layer posts messages to the queue, and the business logic layer
consumes them asynchronously 11 . Another example is an application server (e.g. Tomcat or
WebLogic) that hosts the business logic and mediates between the web tier and the database.
13. Provide an example scenario where an application might use more than three tiers.
Answer: Complex enterprise systems often have more than three tiers to isolate functionality.
For example, an e-commerce platform might have: a web front-end tier, a payment processing
tier, an order management tier, and a database tier. Another example is microservices: each
service (user-service, product-service, etc.) can be considered its own tier. Having more tiers
allows each service to scale and be developed independently.
14. Describe the flow of a login request in a three-tier web application.
Answer: When a user attempts to log in: (1) The client (browser) sends credentials to the
presentation tier (web server). (2) The presentation tier forwards the request to the business
logic tier. (3) The business layer validates the input and queries the data tier (database) to
check the user. (4) The data tier returns whether the credentials match a stored user. (5) The
business layer processes the result and sends it back to the presentation tier. (6) The
presentation tier returns the final response to the client (e.g. redirecting to a dashboard on
success or showing an error message on failure).
2
15. What is the role of the business logic (application) layer in an N-tier application?
Answer: The business logic layer contains the core processing rules of the application. It
receives input from the presentation layer, enforces business rules (such as validation or
calculations), and interacts with the data tier to retrieve or update data. For example, it might
apply discounts, enforce user permissions, or coordinate transactions. It acts as the intermediary
that applies the application’s functionality between the UI and the database 7 .
16. How does N-tier architecture improve maintainability of an application?
Answer: By separating concerns into distinct layers, N-tier architecture makes each part of the
system modular. Developers can update or replace one layer without affecting others. For
example, the user interface can be redesigned without changing the database code. Each layer
can be tested and debugged in isolation, which simplifies maintenance and ongoing
development.
17. Explain the client-server model using a web browser and web server as an example.
Answer: In this scenario, the web browser is the client and the web server is the server. The
client sends an HTTP request (for a webpage) to the server. The server processes this request
(often retrieving data from a database) and returns an HTTP response containing HTML, CSS,
and JavaScript. The browser then renders this content. This exemplifies the client-server model
where the client asks for resources and the server provides them 1 .
18. Where is the database located in an N-tier system, and how do other tiers interact with it?
Answer: The database is located in the data tier. Other tiers do not access it directly. Instead,
the business logic layer interacts with the database (sending queries and processing results),
and the presentation layer communicates only with the business layer. This ensures that data
access is controlled centrally by the business logic tier 3 .
19. Essay: Discuss how N-tier architecture can affect application security.
Answer: N-tier architecture can enhance security through isolation. For example, the database
server can be placed behind a firewall and only the business logic server can connect to it. The
business layer can validate and sanitize inputs before querying the database, reducing the risk of
malicious data. Each tier can enforce its own authentication and authorization checks. However,
more tiers also mean more network interfaces to secure, so encryption (e.g. HTTPS) and secure
coding practices must be used throughout.
Web Application Development
HTML5
1. What is HTML5 and how does it differ from previous HTML versions?
Answer: HTML5 is the latest HTML standard. It introduced many semantic elements and new
features that clearly define the structure of web content 12 13 . Unlike older HTML, HTML5
includes tags like <header> , <nav> , <article> , and <section> , which explicitly
describe their purpose. It also adds native support for multimedia (e.g. <video> ) and
advanced form controls. These enhancements allow developers to build richer, more accessible
web pages than before.
2. List at least five semantic elements introduced in HTML5 and briefly describe them.
Answer: Examples include: <header> (page or section header), <nav> (navigation menu),
<section> (thematic grouping of content), <article> (self-contained content like a blog
3
post), <aside> (sidebar or related content), and <footer> (page or section footer) 13 14 .
These elements explicitly convey their meaning, improving the document’s structure and
accessibility.
3. Why are semantic elements important in HTML5?
Answer: Semantic elements provide meaning to the content, helping browsers, search engines,
and assistive technologies understand the page structure. For example, <nav> is recognized as
navigation links and <article> as a standalone piece of content 15 12 . This improves
accessibility (screen readers can navigate by sections) and SEO (search engines better index
content). It also makes the HTML easier to read and maintain.
4. Write a basic HTML5 page skeleton using <!DOCTYPE html> , and include a <header> ,
<nav> , and <footer> .
Answer: Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<header>
<h1>My Website</h1>
</header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<main>
<p>Welcome to my website!</p>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
</body>
</html>
This page begins with <!DOCTYPE html> (HTML5 doctype) 16 and uses semantic tags
<header> , <nav> , <main> , and <footer> .
5. What is the purpose of the <!DOCTYPE html> declaration?
Answer: The <!DOCTYPE html> declaration tells the browser to render the page in standards
mode and indicates that the document is HTML5 16 . It ensures the browser uses the modern
HTML5 rules for parsing and rendering.
4
6. What does <meta charset="UTF-8"> do?
Answer: <meta charset="UTF-8"> specifies that the document uses the UTF-8 character
encoding. This tells the browser how to interpret the characters in the page, ensuring that text
(including special characters) is displayed correctly 17 .
7. Explain the difference between block-level and inline elements. Give examples.
Answer: Block-level elements (e.g. <div> , <p> , <h1> ) create block boxes that start on a
new line and span the full available width 18 . Inline elements (e.g. <span> , <a> , <img> )
only take as much width as their content and flow within a line of text. Block elements stack
vertically, while inline elements flow horizontally within lines 18 .
8. How do you include CSS in an HTML document? Provide an example of internal and
external CSS.
Answer: CSS can be included by linking an external file or embedding it in a <style> tag.
9. External stylesheet: In the <head> , use
<link rel="stylesheet" href="styles.css"> 19 .
10. Internal stylesheet: In the <head> , include <style> tags, e.g.:
<style>
p { color: red; }
</style>
The external method applies the CSS across multiple pages, while the internal method (inside
<style> ) applies only to that page 19 20 .
11. What is CSS specificity? Why does it matter?
Answer: CSS specificity is the rule browsers use to decide which CSS rule applies when multiple
rules target the same element 21 . Each selector has a specificity weight (IDs are more specific
than classes, which are more specific than elements). The rule with higher specificity overrides
others. For example, #menu {} overrides .menu {} for the same element. Understanding
specificity is important to ensure the correct styles are applied 21 .
12. Explain the CSS box model and its components.
Answer: Every element in CSS is considered a rectangular box with these components 22 :
◦ Content: The innermost area where text and images appear.
◦ Padding: Space around the content inside the box.
◦ Border: The edge surrounding the padding (and content).
◦ Margin: The outermost space between this element and others.
The width and height of an element normally apply to the content box; padding and
border extend the total visible size 22 .
13. What does display: block; , display: inline; , and display: none; do?
Answer: display: block; makes the element a block-level box (starts on a new line, can
have width/height). display: inline; makes it an inline box (no line break, only as wide as
content). display: none; hides the element entirely (it takes up no space in the layout) 22 .
5
14. Given the CSS and HTML below, what color will the paragraph be and why?
<style>
p { color: red; }
#intro { color: green !important; }
p.intro { color: blue; }
</style>
<p id="intro" class="intro">Hello</p>
Answer: The paragraph text will be green. The rule #intro { color: green !
important; } has both an ID selector (more specific than class or element selectors) and the
!important flag, so it overrides the other rules. Thus, the class rule and the element rule are
ignored in favor of the ID rule 21 .
15. Name three HTML5 input types with specialized controls and describe them.
Answer: Examples include:
◦ type="email" : Input for email addresses (validates the format) 23 .
◦ type="number" : Numeric input (includes spinner controls) 24 .
◦ type="color" : Color picker input (opens a color selection dialog) 25 .
◦ type="date" : Date picker input (calendar UI).
◦ type="range" : Slider control for numeric ranges.
These types provide built-in UI widgets and validation for their specific data.
16. (Coding) Write an HTML form for a login with "Username" and "Password" fields.
Answer: Example form:
<form action="/login" method="post">
<label for="uname">Username:</label>
<input type="text" id="uname" name="username"><br>
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="password"><br>
<input type="submit" value="Log In">
</form>
This form uses method="post" and the action /login to send the credentials to the server
26 .
17. What is the difference between GET and POST methods in HTML forms?
Answer: With method="GET" , form data is appended to the URL as query parameters (visible
in the address bar and length-limited). With method="POST" , form data is sent in the HTTP
request body (not visible in the URL) 27 . POST is preferred for sensitive or large data (like
passwords), while GET is used for simple queries where data in the URL is acceptable 27 .
18. What does the action attribute of the <form> tag specify?
Answer: The action attribute specifies the URL where the form data should be submitted. For
example, action="/submit" tells the browser to send the form data to /submit on the
server when the form is submitted 26 .
6
19. Name three HTML form elements (other than <input> ) and describe their uses.
Answer: Examples include:
◦ <textarea> : A multi-line text input area (for longer text input like comments).
◦ <select> : A drop-down list, with <option> elements for each choice.
◦ <button> : A clickable button (which can submit the form or reset it).
◦ <label> : Associates text with a form control for better usability.
◦ <fieldset> and <legend> : Group related inputs together with a caption.
These elements help organize and enhance HTML forms.
JavaScript
1. What is JavaScript and what is it used for on web pages?
Answer: JavaScript is a scripting language that runs in the browser to make web pages
interactive and dynamic 28 . It is used for anything beyond static content – for example,
updating the page without refreshing, validating forms, controlling multimedia, or animating
elements. Essentially, whenever a webpage does something interactive, it likely uses JavaScript
29 .
2. How do you include JavaScript code in an HTML page?
Answer: Use the <script> tag. For example:
<script>
alert('Hello!');
</script>
or include an external script:
<script src="app.js"></script>
The <script> tag can be placed in the <head> or at the end of <body> , and it embeds
client-side code into the HTML 30 .
3. What is the DOM and how does JavaScript interact with it?
Answer: The DOM (Document Object Model) is an in-memory representation of the HTML
document as a tree of objects (elements, text nodes, etc.) 31 . JavaScript interacts with the DOM
through methods and properties. For example,
document.getElementById('demo').textContent = 'Hello'; selects an element by its
ID and changes its text. In this way, JS can dynamically update the page’s content, structure, and
styles.
4. Write JavaScript code to display an alert when a button with id "btn" is clicked.
Answer:
<button id="btn">Click me</button>
<script>
document.getElementById('btn').addEventListener('click', function() {
alert('Button was clicked!');
7
});
</script>
This code attaches a click event listener to the button, which triggers the alert when the
button is clicked 32 .
5. What is the difference between == and === in JavaScript?
Answer: == is the loose equality operator (it converts types if needed), whereas === is the
strict equality operator (no type conversion). For example, 5 == '5' is true (string ‘5’ is
converted to number 5), but 5 === '5' is false (different types). Using === avoids
unexpected type conversions.
6. What does the following code output and why?
var a = 10;
function test() {
var a = 20;
console.log(a);
}
test();
console.log(a);
Answer: The output is:
20
10
Inside test() , the code declares a local var a = 20 , so console.log(a) inside the function
prints 20. The global a remains 10. After calling test() , the second console.log(a) (in the
global scope) prints 10. The local variable inside the function does not affect the global variable.
Sources: Reliable web development references and documentation were used, including MDN and
educational resources 1 2 3 6 7 8 9 12 13 14 16 17 18 19 20 21 22 23 24 25
26 27 28 29 30 31 32 .
1 Client–server model - Wikipedia
https://en.wikipedia.org/wiki/Client%E2%80%93server_model
2 5 10 11 N-tier architecture style - Azure Architecture Center | Microsoft Learn
https://learn.microsoft.com/en-us/azure/architecture/guide/architecture-styles/n-tier
3 Multitier architecture - Wikipedia
https://en.wikipedia.org/wiki/Multitier_architecture
4 6 7 Difference Between Two-Tier And Three-Tier Database Architecture - GeeksforGeeks
https://www.geeksforgeeks.org/difference-between-two-tier-and-three-tier-database-architecture/
8 9 Difference Between Thin clients and Thick Clients - GeeksforGeeks
https://www.geeksforgeeks.org/difference-between-thin-clients-and-thick-clients/
8
12 HTML5 Semantics - GeeksforGeeks
https://www.geeksforgeeks.org/html/html5-semantics/
13 15 WebCompare
https://read.webcompare.link-v.pro/html5-semantic-elements_why-they-matter/
14 HTML Semantic Elements
https://www.w3schools.com/html/html5_semantic_elements.asp
16 HTML doctype declaration
https://www.w3schools.com/tags/tag_doctype.ASP
17 : The metadata element - HTML | MDN
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta
18 Block and inline layout in normal flow - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow
19 20 Getting started with CSS - Learn web development | MDN
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Getting_started
21 Specificity - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity
22 CSS box model - CSS | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_model
23 24 25 The HTML5 input types - Learn web development | MDN
https://developer.mozilla.org/en-US/docs/Learn_web_development/Extensions/Forms/HTML5_input_types
26 27 Forms in HTML documents
https://www.w3.org/TR/WD-html40-970708/interact/forms.html
28 29 What is JavaScript? - Learn web development | MDN
https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/What_is_JavaScript
30 The
