CHAPTER 3

1
INPUTS AND OUTPUTS
Prepared by:
DANILYN A. FLORES
NOR-AINE M. CORPUZ

CS 01 1-2023-2024
LEARNING OUTCOMES 2

1. Create simple programs following the steps of the

PDLC with different programming elements using a
specific software
2. Develop interactive programs that gets input and
displays output on console
3. Develop interactive programs that gets input and
displays output on GUI
4. Debug a given erroneous computer program
5. Determine the output of given computer programs
CS 01 1-2023-2024
GETTING TO KNOW THE SOFTWARE
INTERFACE 3

 There are a lot of available software that

can be used to develop programs.
Whatever software is chosen, one must be
familiar with the user interface, and the
different functions and features of the
software to create programs with ease.
Since the language focused on this course
is JAVA, there are many software to choose
from for different devices.
Image Source:
https://www.codemio.com/2016/06/the-top-7-free-ides-for-java.html

CS 01 1-2023-2024
GETTING TO KNOW THE SOFTWARE
INTERFACE 4

Here are some of the common software that can be used

for JAVA programming:

Desktop/Laptop: Smartphone:
1. NetBeans 1. Anacode
2. Eclipse 2. Java N-IDE
3. JCreator 3. AIDE
4. Notepad++ 4. DCoder

 For this lesson, JCreator Pro will be used.

CS 01 1-2023-2024
 GETTING TO KNOW THE SOFTWARE
INTERFACE 5

Just like any other

software, the user
interface of JCreator have
common features to
regular window such as:
 title bar,
 menu bar,
 toolbars, and
 maximize, minimize, and
close buttons.

CS 01 1-2023-2024
 GETTING TO KNOW THE SOFTWARE
INTERFACE 6

Title Bar name or sometimes filename of the app or file.

Menu Bar area of most common software functions such as
creating new files
Standard Toolbar consists of icons for shortcut of software functions
Active Files Window similar to a computer’s taskbar, open files appear as
tabs
Build Output Window here is where bugs will appear, their description and
location
General Output Window here the console output is displayed

CS 01 1-2023-2024
GETTING TO KNOW THE SOFTWARE
INTERFACE 7

 once the UI, features, and functions of the software are

familiarized, coding can now begin, given analysis and
design havv been done.

 during coding, qualities of a good programs and good

programming practices must be applied.

CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 8

Step 1: Create a new file

Click File  New  File on
the menu
or press Ctrl + N on the
keyboard.

Step 2: Select File Type

In the File Wizard window
click Java Classes  Empty
Java File  Next.
CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 9

Step 3: Name your program

and specify location
Name the program following
the naming conventions for
identifiers, specify where it
should be saved and click
Finish.

CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 10

Step 4: Start Coding

A new active file will
appear as a tab with
the filename, a .java
file extension and an *
(the most recent
version of the file is
not saved).

CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 11

Step 5: Run your code

After coding run the code to
test for bugs.
Either press F5 on the
keyboard or
Run  Run File menu or the
► button on the toolbar
 If the code has no bugs,
output will appear on the
General Output Window.

CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 12

 test the accuracy of the

output by running the program
multiple times using different
sets of input.

CS 01 1-2023-2024
 CREATING SIMPLE PROGRAMS 13
Step 6: Debug your code
 if the code has error/s, a list
will appear in the Build Output
Window
 the trick in debugging is
solving the first error first in
case of multiple errors
 in JCreator there is the ^
symbol that points to the line
where the bug is
 a description of the error is
also provided
CS 01 1-2023-2024
CREATING SIMPLE PROGRAMS 14

 sometimes even if an error is

solved, another one appears.
 software have their
limitations as well.
 the hints may not be 100
accurate sometimes but can be
very helpful.

For example, in the figure above, the ^ points to ‘c’ in “class” but the error in that line is the
‘h’ in “hello” because it should be ‘H’. The ^ is in the correct line where the error is just not
the correct character. Sometimes the error is in the line above the line with the ^.

CS 01 1-2023-2024
 CREATING SIMPLE PROGRAMS 15

 another trick in debugging is to keep in mind all the errors

encountered so that they will not be encountered again or can be
easily fixed if encountered again in the code.
 the code in the example is a simple program that will just display an
output. Following the PDLC, the Problem Analysis and Program Design
would look like this:

CS 01 1-2023-2024
 DISPLAYING OUTPUT ON CONSOLE 16

Here is a another example:

 notice that each step in the
Program Design has an
equivalent code.
 the Start is the class
declaration followed by the
main() method which is the
starting point of all Java
programs.
 the data type int and ; are
added to num1=3, num2=4,
and sum = num1 + num2 to
make a complete statement
CS 01 1-2023-2024
 DISPLAYING OUTPUT ON CONSOLE 17

 System.out.print() is the
code to display anything in
the General Output
window.
 whatever needs to be
displayed in any literal
either data or variable
should be inside the ( ).
 in this example, the
variable sum is placed in
the ( ) because the output
should be the value of
sum.
CS 01 1-2023-2024
 DISPLAYING OUTPUT ON CONSOLE 18

 for this example, the output is

7.
 Technically, outputs should
have labels to specify what
they are because seeing just 7
as an output is not clear
especially for end users.
labels can be placed directly
inside the ( ) of the print()
method.

CS 01 1-2023-2024
 DISPLAYING OUTPUT ON CONSOLE 19
in the example, the string “Sum =
“ is added to the identifier sum
separated by a +.
 do not be confused with the use
of the + here. It can be an
arithmetic operator if placed
between 2 integer or floating
point literals but it can act as a
separator when placed between 2
different literals assigned as value
to a string variable or an output in
a single line of code.

CS 01 1-2023-2024
 DISPLAYING OUTPUT ON CONSOLE 20
Another example here is formatting output using
tabs and new line.

public class Subjects {

public static void main(String [ ]args) {
String school = "University of Southern Mindanao";
String schoolYear = "2020-2021";
int semester = 1;
String code1 = "CS 112";
String description1 = "Computer Programming 1";
String code2 = "CS 113";
String description2 = "Introduction to Computing";
System.out.println("\t\t\t"+school);
System.out.println("\t\tSchool Year: " + schoolYear+"\t\tSemester:" + semester+ "\n");
System.out.println("Course Code\t\t\tDescription");
System.out.println(code1+"\t\t\t"+description1+"\t\t\n"+code2+"\t\t\t"+description2);
} } CS 01 1-2023-2024
DISPLAYING OUTPUT ON CONSOLE 21
LESSON ACTIVITY 3.1

Create a program following the PDLC for the problem:

Problem: Solve for the average grade of a BSCS or BSInfoSys student enrolled in the 1st Year
1st semester.
Problem Analysis: Program Design: Program Coding:

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 22

Using JOptionPane

 JOptionPane is a pre-defined class from the javax.swing package

that can be used to pop up standard dialog boxes that prompt end
users for a value or what to do or display outputs.

CS 01 1-2023-2024
 GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 23
 import
javax.swing.JOptionpane;
indicates the use of the
JOptionPane of javax.swing in
the program
name=JOptionPane.showInput
Dialog (“Enter name:”); creates
an input dialog which will
display a dialog box with a
prompt message “Enter name:”,
a textbox, an OK, and a Cancel
button.
 Whatever is typed in the
textbox will be assigned as the
value of the variable name. CS 01 1-2023-2024
 GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 24
 message = “Hello “ + name + “!”;
assigns the string “Hello “, value of
the variable name and an
exclamation point as the value of
variable message.
 JOptionPane.showMessageDialog(n
ull, message); displays a dialog box
which contains the value of the
variable message and an OK button

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 25

CS 01 1-2023-2024
 GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 26
Another example:
 int num1=Integer.parseInt(Joption
Pane.showInputDialog(“Enter a
number:”)); prompts the user for
an input that will be converted to
an integer value through the
parseInt() method, and will be
assigned as the value of variable
num1 same for num2.
 for floating point inputs, use
Double.parseDouble().

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 27

Here is the output of the code in the previous slide:

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 28
Message and input dialog boxes can be customized wherein the dialog
title and message type can be changed. For example:

import javax.swing.JOptionPane;
public class KeyboardIO3{
public static void main (String[] args) {
int num1 = 0;
int num2 = 0;
num1 = Integer.parseInt(JOptionPane.showInputDialog(null, "Enter a number: ",
"NUMBER", JOptionPane.PLAIN_MESSAGE));
num2 = Integer.parseInt(JOptionPane.showInputDialog(null, "Enter another
number: ", "NUMBER", JOptionPane.PLAIN_MESSAGE));
int sum = num1+num2;
String msg = "The sum is: " + sum;
JOptionPane.showMessageDialog(null, msg, "OUTPUT", 1); } }
CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 29
The line

num1 = Integer.parseInt(JOptionPane.showInputDialog(null, "Enter a number: ",

"NUMBER", JOptionPane.PLAIN_MESSAGE));

customizes the input dialog box (Fig. 34) to have the title NUMBER instead of
Input and plain message as its type.

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 30
The line

JOptionPane.showMessageDialog(null, msg, "OUTPUT", 1);

customizes the output dialog box to have the title OUTPUT instead of Message
and 1 as message type.

Type 1 Type 2 Type 3

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 31
LESSON ACTIVITY 3.2
Create programs following the PDLC for the problems below. Write or draw the
output of your programs using assumed input values.
1. The clerk of the department wants to have a way to input the basic
information of each new student such as full name, email address, contact
number, and complete home address and will display those data for
information purposes. If you are tasked to create a simple solution, how will
you do it?
Problem Analysis: Program Design: Program Coding:

Output:

CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 32
2. An instructor wants to solve the grades of his students in Computer
Programming through a computer program. He wants a way that all he has to
type is the student’s raw scores and the grade will be automatically computed
from all criteria. Refer to the data in the table below:
Criteria Percentage Total
Attendance 10 15
Assignment 15 50
Quiz 20 80
Laboratory Activity 25 100
Exam 30 100

Formula for each criteria: (((Raw Score/Total)x60)+40)xPercentage

If you are tasked to create a simple solution, how will you do it?
Problem Analysis: Program Design: Program Coding:

Output:
CS 01 1-2023-2024
GETTING INPUT AND DISPLAYING OUTPUT
USING GUI 33
3. A businessman who owns a small company wants to calculate the net monthly
salary of each of his employees using only their names and number of days
worked as entries. Since all his employees are minimum wage earners, their
daily rate is 500 pesos. Each of them has a monthly deduction of 220 pesos for
PhilHealth and 330 pesos for SSS. What will be your solution to this problem?

Problem Analysis: Program Design: Program Coding:

Output:

CS 01 1-2023-2024
CHAPTER SUMMARY 34

 To be able to create programs with ease, the software used,

especially functions and UI, must be familiarized
 Follow the steps of the PDLC to code faster
 Output can be displayed in console or using GUI depending on the
problem addressed
 If the logic of creating programs is familiarized using a particular
programming language, it will be easy to code using a different
programming language

CS 01 1-2023-2024
REFERENCES 35

 CS 112 | InfoSys 112 Module Prepared and Compiled by:

Flores, D.A. and Corpuz, N.M.

CS 01 1-2023-2024
 36
THANK YOU!
Stay safe. #WeHealAsOne

CS 01 1-2023-2024