Week 5
1. Array
An Array stores many values in one variable.
Array values are inside [ ].
Index starts from 0.
Use length to find the number of items.
Common methods:
o push() → Add item at the end.
o pop() → Remove last item.
o shift() → Remove first item.
o slice() → Copy part of an array.
o splice() → Add or remove items from the original array.
2. Objects
An Object stores data as key-value pairs.
Values can be numbers, strings, arrays, or other objects.
Access values using:
o [Link]
o object["property"]
New properties can be added anytime.
3. Comparison, Number and String
Comparison
Used to compare two values.
Common operators:
o == Equal
o === Strict Equal
o != Not Equal
o > Greater Than
o < Less Than
o >= Greater Than or Equal
o <= Less Than or Equal
Number and String
Number stores numeric values.
String stores text inside quotes (" " or ' ').
JavaScript can compare numbers and strings.
4. Functions
A Function is a block of code that performs a specific task.
It can be used many times.
A function can take parameters and return a value using return.
5. Creating Object Prototype
A Prototype is used to create many similar objects.
this refers to the current object.
new creates a new object from the prototype.
New properties and methods can be added using prototype.
6. String and Character
A String is a collection of characters.
Strings store text.
JavaScript provides functions to:
o Change strings.
o Search text.
o Find specific characters.
7. Type Casting / Coercion in JavaScript
Type Casting means changing one data type into another.
Implicit Conversion (Automatic)
JavaScript changes the type automatically.
Example:
o "Age " + 20 → "Age 20"
o 2 * "10" → 20
Explicit Conversion (Manual)
Programmer changes the type.
Methods:
o Number()
o String()
o Boolean()
o parseInt()
o parseFloat()
8. What is DOM
DOM (Document Object Model) is a tree structure of an HTML page.
JavaScript uses the DOM to access and change HTML elements.
Common methods:
o getElementById()
o getElementsByClassName()
o getElementsByTagName()
o getElementsByName()
DOM can change:
o Text
o Color
o Background
o CSS classes
9. jQuery
jQuery is a JavaScript library.
It makes JavaScript easier and shorter.
It is mainly used for:
o DOM manipulation
o Event handling
o Animations
o Effects
Common commands:
o $("#id")
o $(".class")
o .text()
o .css()
o .hide()
o .show()
o .click()
Week 6
1. Defining SPA and MPA
What is Single-Page Application (SPA)?
A Single-Page Application (SPA) is a website that loads only one page. When the user clicks a
button or link, the page does not reload. Only the required content changes using JavaScript.
Features
Loads only one page.
No full page reload.
Fast and smooth user experience.
Feels like a mobile app.
Examples
Google Drive
YouTube
Spotify
Facebook
What is Multi-Page Application (MPA)?
A Multi-Page Application (MPA) is a traditional website. Every time the user opens a new
page, the browser loads a new page from the server.
Features
Each click opens a new page.
Page reload happens every time.
Good for large websites with many pages.
Easy to organize a lot of information.
Examples
Amazon
eBay
Blogs
2. SPA vs MPA: Defining Pros and Cons
SPA (Single-Page Application)
Pros (Advantages)
1. Fast Performance
Loads quickly after the first page.
2. Better User Experience
No page reload between clicks.
3. Reusable Code
Developers can reuse the same code.
4. Easy Debugging
Easier to find and fix errors.
5. Works Offline
Some features can work without internet.
6. Less Server Load
Server sends only data, not full pages.
Cons (Disadvantages)
1. Needs JavaScript to work properly.
2. Can have security risks.
3. Navigation may be difficult.
4. Large applications may use more browser memory.
MPA (Multi-Page Application)
Pros (Advantages)
1. Fast first page load.
2. Better for large websites.
3. Easy navigation with multiple pages.
4. Can show a lot of information.
5. Good for SEO and analytics.
Cons (Disadvantages)
1. Every page reload takes time.
2. Slower than SPA while navigating.
3. Mobile app development is harder.
4. Security must be managed for every page.
Week 8
1. Software Architecture
Software Architecture is the basic design or structure of a software system.
It shows:
The main components of the software.
How the components work together.
How the system is designed.
How the system can grow or change in the future.
Benefits
Easy to understand.
Easy to manage.
Better communication among developers.
Makes software development more organized.
2. Web Application Architecture (Diagram)
Web Application Architecture is the structure that shows how a web application works
between the user, server, and database.
Diagram
+--------+ Request +--------+ Query +-----------+
| Client | ---------------> | Server | -------------> | Database |
|Browser | <--------------- |Backend | <------------- | |
+--------+ Response +--------+ Data +-----------+
3. Types Layers Web Application Architecture (Diagram)
A web application is divided into different layers.
1. Presentation Layer
User interface (UI).
Built using HTML, CSS, JavaScript.
Shows information to users.
2. Business Layer
Contains business rules and logic.
Processes user requests.
3. Data Access (Persistence) Layer
Connects the business layer with the database.
Retrieves and saves data.
4. Database Layer
Stores all application data safely.
Keeps data secure.
Diagram
+-------------------------+
| Presentation Layer |
| (HTML, CSS, JavaScript) |
+-------------------------+
↓
+-------------------------+
| Business Layer |
| (Business Logic) |
+-------------------------+
↓
+-------------------------+
| Data Access Layer |
| (Persistence Layer) |
+-------------------------+
↓
+-------------------------+
| Database Layer |
| (Stores Data) |
+-------------------------+
4. Web Application Architecture Practices (Diagram)
Good web application architecture should have:
System flexibility
High performance
Reusable components
Clean and organized code
High scalability
Stability and reliability
Easy bug detection
Strong security
User feedback support
Diagram
Web Application
│
┌─────────────┼─────────────┐
│ │ │
Flexibility Scalability Security
│ │ │
Reusable Reliability Bug Detection
Components │
User Feedback
Week 9
1. Web App Architecture and All of Its Tier and Architecture
Web App Architecture
Web App Architecture is the structure of a web application. It shows how different parts of the
application work together.
Tier and Layer
Tier = Physical separation (different machines/servers)
Layer = Logical separation (different parts of the application)
1-Tier Architecture
All layers are on one computer.
Presentation, Logic, and Data are together.
Easy to build but difficult to maintain and expand.
2-Tier Architecture
Database is on a separate server.
Presentation and Logic stay together.
Easier to change the database.
Server can become busy.
3-Tier Architecture
Presentation, Logic, and Data are separate.
Each layer can run on a different machine.
Easy to maintain and expand.
Presentation Layer
Shows the user interface (UI).
Takes input from the user.
Does not contain business logic.
Logic Layer
Processes data and business rules.
Connects Presentation and Data layers.
Does not contain UI or database code.
Data Layer
Stores application data.
Connects with the database.
Does not contain UI or business logic.
Advantages of 3-Tier Architecture
Layers are independent.
Easy to maintain.
Code can be reused.
Faster development.
Different developers can work on different layers.
2. Architectural Pattern (MVC, MVVM, MVP)
MVC (Model-View-Controller)
Definition
MVC is an architecture pattern that separates an application into three parts.
Components
Model: Stores and manages data.
View: Shows data to the user.
Controller: Connects Model and View and handles user actions.
When to Use
Simple applications.
Fast development.
Simple user interface.
Easy navigation.
MVVM (Model-View-ViewModel)
Definition
MVVM separates UI logic from business logic.
Components
Model: Stores data.
View: User interface.
ViewModel: Connects Model and View.
Advantages
Easy testing.
Better code organization.
Good for medium-sized applications.
When to Use
Applications with more features.
Projects that may grow in the future.
MVP (Model-View-Presenter)
Definition
MVP is similar to MVC but uses a Presenter instead of a Controller.
Components
Model: Stores data.
View: Displays data and gets user input.
Presenter: Gets data from Model and updates the View.
When to Use
Applications with simple navigation.
Limited UI components.
3. VIPER
Definition
VIPER is a modular architecture pattern used for large and long-term applications.
Components
View: User interface.
Interactor: Handles business logic.
Presenter: Connects View and Interactor.
Entity: Stores application data.
Router: Handles screen navigation.
Advantages
Clean code.
Easy testing.
Easy to add new features.
Good for large projects.
When to Use
Large applications.
Long-term projects.
Projects with complex requirements.
Week 10
1. Applying Quality Dimension to Web Applications
Olsina Model
The Olsina Model checks the quality of a web application using five main attributes.
Usability
Easy to understand
Easy to use
Good interface and design
Help and feedback available
Functionality
Search works correctly
Easy navigation
Features work properly
Reliability
Links work correctly
Errors are handled properly
User input is validated
Efficiency
Fast response time
Pages load quickly
Images and graphics load fast
Maintainability
Easy to fix errors
Easy to update
Easy to add new features
2. Web Testing (Black Box, White Box, Olsina Model)
Web Testing
Web testing means checking a website or web application to find bugs and make sure everything
works correctly.
Why Web Testing is Important
Finds errors before release
Checks website performance
Makes sure all pages and links work
Improves user experience
Black Box Testing
Tester does not see the source code.
Only checks inputs and outputs.
Focuses on website functions.
No programming knowledge is required.
Example:
Testing Login, Search, Registration, Contact Form.
White Box Testing
Tester can see the source code.
Checks program logic and code.
Finds hidden coding errors.
Programming knowledge is required.
Example:
Testing loops, conditions, functions, and code paths.
Olsina Model
The Olsina Model measures web application quality using:
Usability
Functionality
Reliability
Efficiency
Maintainability
3. Terminology of Testing
Website Testing
Checking a website to find bugs.
Orphan Pages
Pages that cannot be reached through any link.
Test Case
A single test with input and expected result.
Test Suite
A collection of many test cases.
Refactoring
Improving code without changing its function.
Test-First Development
Write tests before writing code.
Broken Links
Links that do not open the correct page.
Browser Testing
Checking the website in different browsers.
Test Tools
Tools used for testing like Selenium, Cypress, and Playwright.
Security Testing
Checking the website for security weaknesses.
4. Types of Testing
1. Unit Testing
Tests one small part of the program (function, class, or page).
Purpose
Find bugs early
Check each unit works correctly
2. Integration Testing
Tests whether different modules work together correctly.
Purpose
Check data flow
Find interaction errors
3. System Testing
Tests the complete web application.
Purpose
Check all requirements
Test performance and security
4. Acceptance Testing
Tests whether the application meets user and business requirements.
Purpose
Check if the software is ready for users
Final approval before release
5. Beta Testing
The software is given to real users before the final launch.
Purpose
Get user feedback
Find remaining bugs
Improve the product before release