MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3

Week 4
UNIT 1: Develop Basic HTML Document Using HTML5 and CSS3 Syntax
Most Essential Learning Competencies: At the end of the course, you must be able to:
1. Explain what is a Class and a Class Diagram
2. Define Unified Modeling Language or UML
3. Describe the benefits and essential elements of a Class Diagram
4. Discover the functionalities of Class Responsibility Card (CRC)

A. What is Class?
A Class is a blueprint that is used to create Object. The Class defines what object can do.

What is Class Diagram?

Class Diagram gives an overview of a software system by displaying classes, attributes, operations, and
their relationships. This Diagram includes the class name, attributes, and operation in separate
designated compartments.

Class Diagram defines the types of objects in the system and the different types of relationships that
exist among them. It gives a high-level view of an application. This modeling method can run with almost
all Object-Oriented Methods. A class can refer to another class. A class can have its objects or may
inherit from other classes. Class Diagram helps construct the code for the software application
development.

B. What is UML?
UML stands for Unified Modeling Language. It is a standard which is mainly used for creating object-
oriented, meaningful documentation models for any software system present in the real world. It
provides us a way to develop rich models that describe the working of any software/hardware systems.

C. Benefits of Class Diagram

 Class Diagram Illustrates data models for even very complex information systems
 It provides an overview of how the application is structured before studying the actual code.
This can easily reduce the maintenance time
 It helps for better understanding of general schematics of an application.
 Allows drawing detailed charts which highlights code required to be programmed
 Helpful for developers and other stakeholders.

Essential elements of class diagram

1. Class Name
2. Attributes
3. Operations

AICS – SHS Department/TVL-ICT Academic Department Page 1 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4
Class Name

Figure 4.1

The name of the class is only needed in the graphical representation of the class. It appears in the
topmost compartment. A class is the blueprint of an object which can share the same relationships,
attributes, operations, & semantics. The class is rendered as a rectangle, including its name, attributes,
and operations in separate compartments.

Following rules must be taken care of while representing a class:

1. A class name should always start with a capital letter.
2. A class name should always be in the center of the first compartment.
3. A class name should always be written in bold format.
4. An abstract class name should be written in italics format.

Attributes
An attribute is named property of a class which describes the object being modeled. In the class
diagram, this component is placed just below the name-compartment.

Figure 4.2

A derived attribute is computed from other attributes. For example, an age of the student can be easily
computed from his/her birth date.

Figure 4.3(a)

AICS – SHS Department/TVL-ICT Academic Department Page 2 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4
Attributes characteristics
 The attributes are generally written along with the visibility factor.
 Public, private, protected and package are the four visibilities which are denoted by +, -, #, or ~
signs respectively.
 Visibility describes the accessibility of an attribute of a class.
 Attributes must have a meaningful name that describes the use of it in a class.

Example Class Representation

A class is represented as a box with 3 compartments. The uppermost one contains the class name. The
middle one contains the class attributes and the last one contains the class methods. Like this:

Figure 4.3(b)

Figure 4.3 (c) Visibility of Class Members

Let’s specify the visibility of the members of the BankAccount class. We made the `owner` and balance
private as well as the withdraw method. But we kept the deposit method public. (Anyone can put money
in, but not everyone can take money out. Just as we like it.)

Relationships

Figure 4.4(a) Relationship Symbols

AICS – SHS Department/TVL-ICT Academic Department Page 3 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4
There are mainly three kinds of relationships in UML:
1. Dependencies
2. Generalizations
3. Associations

Dependency
A dependency means the relation between two or more classes in which a change in one may force
changes in the other. However, it will always create a weaker relationship. Dependency indicates that
one class depends on another. In the following example, Student has a dependency on College

Figure 4.4(b)

Generalization

Figure 4.5

A generalization helps to connect a subclass to its superclass. A sub-class is inherited from its superclass.
Generalization relationship can't be used to model interface implementation. Class diagram allows
inheriting from multiple superclasses. In this example, the class Student is generalized from Person
Class.

Association
This kind of relationship represents static relationships between classes A and B. For example; an
employee works for an organization.

Here are some rules for Association:

 Association is mostly verb or a verb phrase or noun or noun phrase
 It should be named to indicate the role played by the class attached at the end of the
association path
 Mandatory for reflexive associations

In this example, the relationship between student and college is shown which is studies.

AICS – SHS Department/TVL-ICT Academic Department Page 4 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Figure 4.6
Multiplicity

Figure 4.7

A multiplicity is a factor associated with an attribute. It specifies how many instances of attributes are
created when a class is initialized. If a multiplicity is not specified, by default one is considered as a
default multiplicity. Let's say that that there are 100 students in one college. The college can have
multiple students.

Aggregation
Aggregation is a special type of association that models a whole-part relationship between aggregate
and its parts.

Figure 4.8

For example, the class college is made up of one or more student. In aggregation, the contained classes
are never totally dependent on the lifecycle of the container. Here, the college class will remain even if
the student is not available.

Composition

Figure 4.9

The composition is a special type of aggregation which denotes strong ownership between two classes
when one class is a part of another class.

For example, if college is composed of classes student. The college could contain many students, while
each student belongs to only one college. So, if college is not functioning all the students also removed.

AICS – SHS Department/TVL-ICT Academic Department Page 5 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4
Aggregation vs. Composition
Aggregation Composition

Aggregation indicates a relationship where Composition display relationship where the child will
the child can exist separately from their never exist independent of the parent. Example:
parent class. Example: Automobile (Parent) House (parent) and Room (child). Rooms will never
and Car (Child). So, If you delete the separate into a House.
Automobile, the child Car still exists.

Abstract Classes
It is a class with an operation prototype, but not the implementation. It is also possible to have an
abstract class with no operations declared inside of it. An abstract is useful for identifying the
functionalities across the classes. Let us consider an example of an abstract class. Suppose we have an
abstract class called as a motion with a method or an operation declared inside of it. The method
declared inside the abstract class is called a move ().

This abstract class method can be used by any object such as a car, an animal, robot, etc. for changing
the current position. It is efficient to use this abstract class method with an object because no
implementation is provided for the given function. We can use it in any way for multiple objects.

In UML, the abstract class has the same notation as that of the class. The only difference between a class
and an abstract class is that the class name is strictly written in an italic font.
An abstract class cannot be initialized or instantiated.

Figure 4.10
Abstract Class Notation
In the above abstract class notation, there is the only a single abstract method which can be used by
multiple objects of classes.

Example of UML Class Diagram

Creating a class diagram is a straightforward process. It does not involve many technicalities. Here, is an
example:

ATMs system is very simple as customers need to press some buttons to receive cash. However, there
are multiple security layers that any ATM system needs to pass. This helps to prevent fraud and provide
cash or need details to banking customers.

Below given is a UML Class Diagram example:

AICS – SHS Department/TVL-ICT Academic Department Page 6 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Figure 4.11

Class Diagram in Software Development Lifecycle

Class diagrams can be used in various software development phases. It helps
helps in modeling class diagrams
in three different perspectives.

Conceptual

Implementation Specification

Figure 4.12

1. Conceptual perspective: Conceptual diagrams are describing things in the real world. You should
draw a diagram that represents the concepts in the domain under study. These concepts related to class
and it is always language-independent.
independent.

AICS – SHS Department/TVL-ICT Academic Department Page 7 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4
2. Specification perspective: Specification perspective describes software abstractions or components
with specifications and interfaces. However, it does not give any commitment to specific
implementation.

3. Implementation perspective: This type of class diagrams is used for implementations in a specific
language or application. Implementation perspective, use for software implementation.

Best practices of Designing of the Class Diagram

Here, are some points which should be kept in mind while drawing a class diagram:

 The name given to the class diagram must be meaningful. Moreover, It should describe the real
aspect of the system.
 The relationship between each element needs to be identified in advance.
 The responsibility for every class needs to be identified.
 For every class, minimum number of properties should be specified. Therefore, unwanted
properties can easily make the diagram complicated.
 User notes should be included whenever you need to define some aspect of the diagram. At the
end of the drawing, it must be understandable for the software development team.
 Lastly, before creating the final version, the diagram needs to be drawn on plain paper.
Moreover, It should be reworked until it is ready for final submission.

D. What is Class Responsibility Collaborator Card?

A Class Responsibility Collaborator (CRC) model (Beck & Cunningham 1989; Wilkinson 1995; Ambler
1995) is a collection of standard index cards that have been divided into three sections, as depicted
in Figure 4.13.

A class represents a collection of similar objects, a responsibility is something that a class knows or does,
and a collaborator is another class that a class interacts with to fulfill its responsibilities. Figure
4.14 presents an example of two hand-drawn CRC cards.

Figure 4.13 CRC Card Layout

AICS – SHS Department/TVL-ICT Academic Department Page 8 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Figure 4.14 Hand-drawn CRC Cards

A class represents a collection of similar objects. An object is a person, place, thing, event, or concept
that is relevant to the system at hand. For example, in a university system, classes would represent
students, tenured professors, and seminars. The name of the class appears across the top of a CRC card
and is typically a singular noun or singular noun phrase, such as Student, Professor, and Seminar.

You use singular names because each class represents a generalized version of a singular object.
Although there may be the student John O'Brien, you would model the class Student. The information
about a student describes a single person, not a group of people. Therefore, it makes sense to use the
name Student and not Students. Class names should also be simple. For example, which name is
better: Student or Person who takes seminars?

A responsibility is anything that a class knows or does. For example, students have names, addresses,
and phone numbers. These are the things a student knows. Students also enroll in seminars, drop
seminars, and request transcripts. These are the things a student does. The things a class knows and
does constitute its responsibilities. Important: A class is able to change the values of the things it knows,
but it is unable to change the values of what other classes know.

Sometimes a class has a responsibility to fulfill, but not have enough information to do it. For example,
as you see in Figure 4.15 students enroll in seminars. To do this, a student needs to know if a spot is
available in the seminar and, if so, he then needs to be added to the seminar. However, students only
have information about themselves (their names and so forth), and not about seminars. What the
student needs to do is collaborate/interact with the card labeled Seminar to sign up for a seminar.
Therefore, Seminar is included in the list of collaborators of Student.

AICS – SHS Department/TVL-ICT Academic Department Page 9 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Figure 4.15 Student CRC card

Collaboration takes one of two forms: A request for information or a request to do something. For
example, the card Student requests an indication from the card Seminar whether a space is available, a
request for information. Student then requests to be added to the Seminar, a request to do something.
Another way to perform this logic, however, would have been to have Student simply
request Seminar to enroll himself into itself. Then have Seminar do the work of determining if a seat is
available and, if so, then enrolling the student and, if not, then informing the student that he was not
enrolled.

So how do you create CRC models? Iteratively perform the following steps:

 Find classes. Finding classes is fundamentally an analysis task because it deals with identifying the
building blocks for your application. A good rule of thumb is that you should look for the three-to-five
main classes right away, such as Student, Seminar, and Professor in Figure 4.15.
 Find responsibilities. You should ask yourself what a class does as well as what information you wish to
maintain about it. You will often identify a responsibility for a class to fulfill collaboration with another
class.
 Define collaborators. A class often does not have sufficient information to fulfill its responsibilities.
Therefore, it must collaborate (work) with other classes to get the job done. Collaboration will be in one
of two forms: a request for information or a request to perform a task. To identify the collaborators of a
class for each responsibility ask yourself "does the class have the ability to fulfill this responsibility?" If
not then look for a class that either has the ability to fulfill the missing functionality or the class which
should fulfill it. In doing so you'll often discover the need for new responsibilities in other classes and
maybe even the need for a new class or two.
 Move the cards around. To improve everyone's understanding of the system, the cards should be
placed on the table in an intelligent manner. Two cards that collaborate with one another should be
placed close together on the table, whereas two cards that don't collaborate should be placed far apart.
Furthermore, the more two cards collaborate the closer they should be on the desk. By having cards
that collaborate with one another close together, it's easier to understand the relationships between
classes.

AICS – SHS Department/TVL-ICT Academic Department Page 10 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Figure 4.16 CRC Model

How do you keep your CRC modeling efforts agile? By following the AM practice Model in Small
Increments. The best way to do this is to create a CRC model for a single requirement, such as a user
story, business rule, or system use case, instead of the entire collection of requirements for your system.
Because CRC cards are very simple tools they are inclusive, enabling you to follow AM's Active
Stakeholder Participation practice.

It's important to recognize that a CRC model isn't carved in stone. When you evolve it into a UML class
diagram, or perhaps straight into code, you'll change the schema over time. Responsibilities will be
reorganized, new classes will be introduced existing classes will disappear, and so on. This is what
happens when you take an evolutionary approach to development.

AICS – SHS Department/TVL-ICT Academic Department Page 11 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

1. Class Diagrams (PDF)

2. UML (PDF)

1. Class Diagram
https://www.youtube.com/watch?v=Y4-IfywepfU

2. How to Make a UML Sequence Diagram

https://www.youtube.com/watch?v=pCK6prSq8aw

AICS – SHS Department/TVL-ICT Academic Department Page 12 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

Quiz 4.1

Instructions: Write your answer on the Answer Sheet (AS) provided in this module.
A. Write the first letter of the correct classification of the following: Generalization (G), Association (A),
Aggregation (AG), or Composition (C). (1-point each)

1. A country has a capital city.

2. A dining philosopher uses a fork.
3. A file is an ordinary file or a directory file.
4. Files contain records.
5. A class can have several attributes.
6. A relation can be association or generalization.
7. A polygon is composed of an ordered set of points
8. A person uses a computer language on a project
9. The arrow between the two classes indicates (choose letter only)
a) Inheritance
b) Association
c) Dependency
d) Sending a message

10. Which sentences are true?

a) CheckingAccount implements BankAccount
b) CheckingAccount and SavingAccount are BankAccount
c) CheckingAccount and SavingAccount are associated
d) BankAccount is associated to CheckingAccount
e) SavingAccount can processCheck
f) CheckingAccount has a balance

AICS – SHS Department/TVL-ICT Academic Department Page 13 of 14 /mlcds

 MODULE 1: PERFORM PROGRAMMING IN HTML5 WITH JAVASCRIPT AND CSS3
Week 4

B. DESIGN EXERCISE. (2-points each).

Carefully read from the additional resources the file uml.pdf. Answer the following problem on page 30 (Texas
Hold ‘em poker game).

1. What classes are in this system?

2. What are their responsibilities?
3. Which classes collaborate?
4. Draw a class diagram for this system. Include relationships between classes (generalization and
association).

1. https://warwick.ac.uk/
2. https://courses.cs.washington.edu/
3. https://www.youtube.com/

AICS – SHS Department/TVL-ICT Academic Department Page 14 of 14 /mlcds