Lbyec71 Lab Manual v3.0

LBYEC71

Laboratory

Manual

1

Student’s Information Sheet

Subject: ___________________ Section: ___________ Schedule: ___________

Tri-Academic Year: __________ Professor: __________________________

Personal:

Name: _______________________________________________________

Address: ______________________________________________________

Telephone No: ___________________ Cellphone No: ________________

E-mail Address: ________________________________________________

Birthday: _________________________ Age: ________

Family:

Father: __________________________ Occupation: __________________

Mother: _________________________ Occupation: __________________

Schools:

High School: __________________________________________________

Elementary: ___________________________________________________

Others: _______________________________________________________

2

Lab Rules

1. Late students = 0% in lab performance and final report. (grace period=

10 minutes) No special lab performance whenever a student is tardy or

absent.

2. During lab performance, excellent behaviour is always expected. Behave

in a manner that does not disrupt classroom learning.

3. No eating, drinking and smoking inside the laboratory. Chewing gum is

not allowed.

4. Students must abide by the dress policies as indicated in Student

Handbook.

5. Avoid erasures and write legibly in your laboratory manual. Use black

pen for narrations/explanations and pencil for illustrations.

6. Academic honesty should be observed at all times as indicated in

Student Handbook (e.g. Cheating, Plagiarism, etc)

7. Late submission of project or No Show during presentation = 0%

3

TOPICS

Week 1: Orientation

Week 2: Office Productivity Tools: Word Processing and Excel

Week 3: Basic and Advanced HTML

Week 4: Introduction to CSS

Week 5: MS Visio and Flowchart/Algorithm

Week 6: C-Basic I/O

Week 7-8: C-Conditional Statements/ Midterm Project Submission (Website)

Week 9-10: C- Looping Statements

Week 11-12: Arrays

Week 13: Practical Exam /Final Project Submission (Software)

4

Requirements

Preliminary Report /Lab Performance

The student will print the reports from the lab manual and use it to record all

pertinent data or the Professor will require the students to submit the report online

thru Turnitin. This must be submitted to the Professor for checking after

conducting the lab exercise.

Final Report

This report must be submitted one week after the exercise was performed.

Practical Exam

This is a timed-exam that will be administered to each student when all laboratory

Final Report have been performed or as scheduled.

Midterm Project

The student will develop a project proposal or the professor may provide the

project specifications.

Final Project

The student will develop a project proposal or the professor may provide the

project specifications.

Assessment / Evaluation

Average of Preliminary Reports/ Laboratory Activities 20%

Average of Final Reports/ Journal Entry 20%

Project 1 /Midterm Project 15%

Project 2 /Final Project 15%

Practical Exam 30%

_________________

Total 100%

Passing Grade: 70%

5

Laboratory Activity 1

Office Productivity Tools: MS Word and MS Excel

Objectives:

1. To familiarize the students in using MS Word and MS Excel

2. To learn how to compute, use logical IF and graph in MS Excel.

I. MS Word

Personal Portfolio

Create a personal portfolio or a resume by making a list of accomplishments, education

and previous positions. Do not be concerned with the order of information. Gather, create,

collect and document your history with important facts, figures and milestones. Use MS

Word.

Highlights:

Name and contact info

Work Experience (if any)

Educational Background

Awards/Accomplishments

Organizations/Affiliations

II. MS Excel

A. Formulas and Functions

The worksheet below contains the performance of 10 students in quizzes, recitations, and long

examinations. Compute the final rating of the students in column Q. Compute the total of quizzes in

column E and the % rating in column F. Compute the total of recitation in column J and the % rating

in column K. Compute the total exams in column O and the % rating of long exams in column P. The

Final Rating is 20% quizzes, 20% recitation, and 60% long exams. You may use/create your own

formula or use the built-in functions of the program.

6

Name of Students

Quizzes Total %

Recitation Total %

Long Exam Total % Final Rating

1 2 3 1 2 3 1 2 3

15 15 15 20 20 20 100 100 100

ABC 5 11 9 12 15 14 60 68 89

DEF 7 12 8 11 16 15 80 78 90

GHI 5 12 7 12 17 16 90 78 95

JKL 6 14 8 13 13 16 78 76 67

MNO 9 13 9 10 16 16 89 88 95

PQR 8 14 7 9 15 17 78 88 89

STU 6 10 8 12 17 17 50 65 45

VWX 8 9 8 13 18 18 88 86 87

YZA 9 13 7 14 19 19 55 65 45

CCC 8 11 6 12 18 18 94 67 96

9

B. Use of Logical function (IF)

Create the worksheet below. Copy the names of students and the final rating (values) from the worksheet

in exercise No. 2 to columns A and column B, respectively. In column C, with the used of IF command,

make a statement that will print “Passed” if final rating of the student is equal to or above 75%,

otherwise it will print “Failed”.

10

C. Graphs

Graph the enrollment data shown in Table 1. Your graph should look like the figure below and with

complete labels.

11

2. Present the age distribution of the population shown in Table 2 in graphical form (pie chart). The chart

should look like the figure below.

12

Laboratory Activity 2.1

Creating a Simple Web Page

Objectives:

At the end of this activity, the students are expected to:

1. Start and quit the MS Notepad

2. Start and quit the web browser (Internet Explorer)

3. Draw, label and identify the basic parts of the MS Notepad

4. List down the functions of the parts of the MS Notepad

5. Enter and use HTML, HEAD, TITLE and body tags correctly

6. Create a simple web page

7. Save the HTML file

8. View the HTML file in the web browser

9. Identify and correct simple HTML programming errors

Discussion:

A. Starting Notepad

1. Click the Start Button on the taskbar and then point to Programs on the Start

Menu. Point to Accessories on the Programs submenu and then point to

Notepad on the Accessories submenu or Notepad++.

2. Click Notepad.

3. Click the Maximize button on the Notepad title bar to maximize the window.

4. In Notepad, the text users type will scroll continuously to the right unless the

WordWrap feature is turned on. WordWrap makes all the text visible in the

window, but it doesn't affect the way text appears when it is printed. For all

our activities, we will always activate the Word Wrap feature of Notepad.

5. To turn the WordWrap feature on, click the Edit Menu on the Menu

bar and then point and click Word Wrap.

Elements of the Notepad Window

1. Menu Bar

It is located at the top of the screen just below the title bar

It displays the Notepad Menu names

Each menu name

2. Text Area

This is where the text is display every time the user types

13

3. Scroll Bars

Display different portions of the text file in the window

The Vertical scroll bar is located at the right side of the window while the

horizontal scroll bar is located at the bottom of the window

Both scroll bars contain the scroll box which indicate the current location

in the file

B. Entering HTML Tags and Text

HTML is not case sensitive, uppercase, lowercase letters or

combination of both is treated as the same. To adhere standard practice HTML

development, we will use the uppercase letters when writing HTML tags.

Table 1 list down the basic HTML tags as well as their functions.

Table 1. HTML Tags and Their Functions

HTML Tags Function

<HTML></HTML> Indicates the beginning and end of an HTML development

<HEAD></HEAD> Indicates the beginning and end on the document used for the title

and other document header information

<TITLE> </TITLE> Indicates the beginning and end of the title. Please take note that

the title does not display in the body of the Web page, but displays

on the title bar of the browser

<BODY></BODY> Indicates the beginning and end of the web page body

<HN></HN> Indicates the beginning and the end of the text section called

heading; size ranges from <H1> through <H6>

<P></P> Indicate the beginning of a new paragraph; inserts a blank line

above the new paragraph

<UL<</UL> Indicates the beginning and the end of an unordered (bulleted) list

<LI></LI> Indicates that the item that follows the tag is an item within a list

<HR> Inserts a horizontal rule

<BR> Breaks a line of text at the point where the tag appears

14

Entering Headings in an HTML Tags

Headings serve to separate text and introduce new topics on Web pages. The

heading tags used for this purpose vary in size. The size ranges from <H1> through

<H6>, with <H1> being the largest. Figure 2.1.1 displays the various sizes of headings.

For consistency and to maintain a good look to your Web page, use the same sized

heading for the same level of topic.

Your main heading may contain the name of business or school, or the main idea

of the web page. Users usually have only one (1) tag on each Web Page.

Figure 2.1.1 HTML Heading Sizes

15

Entering Text in Paragraph Format

Web pages contain significant amount of text usually in paragraph format. The <P>

tag is one of the few tags that did not originally have corresponding ending tags. Newer

versions of HTML added </P> tag, but it is optional. When the Web browser finds </P>

tag, it starts a new line and adds some additional vertical spaces between the line that it just

displayed and the following lines. This gives enough of a break in the text to indicate that

there is a new paragraph. It is good habit to enter large sections having paragraph breaks.

Creating a List

Lists structure the text in an outline format instead in paragraph format. It helps

itemize the information on the web page.

Two Types of List

1. Unordered List

Also known as the bulleted list

Formats information as bullet points

The <UL> and </UL> must be at the beginning and end of this list

Users can use disc, square or circle as bullets in this list

By default, the disc is used

2. Ordered List

Also known as the numbered list

Information is shown as numbered or lettered points

The <0L> and </0L> must be at the beginning and end of this list

Users can create an ordered list using numbers, letters or roman numerals

The default option is to number the list

Note:

To change the bullet or number type, use the TYPE attribute within the <OL> or

<UL> tags. The tag could be <UL TYPE = “disc” or <OL TYPE=" 1“) where the selected

type is found within the quotes. The <LI> and </LI> tags define a list item within the

ordered and unordered list. Remember that each item within the list has <LI> tag in front of

it and </LI> tag at the end.

Please refer to Figures 2.1.2 and 2.1.3 for various types of ordered and unordered

list.

16

Figure 2.1.2 Various Types of Unordered List

Figure 2.1.3 Various Types of Ordered List

17

Procedure:

Entering Initial HTML Tags

1. In your notepad, type <HTML> and then press the Enter Key.

2. Type <HEAD> and then press the Enter key

3. Type <TITLE> Computer Technician </TITLE> and then press the Enter key

4. Type </HEAD> and then press the Enter key.

5. Type <BODY> and then press the Enter key twice.

6. Type </BODY> and then press the Enter key.

7. Type </HTML> as the tag.

To create the Web page heading:

8. Click the blank line below <BODY> type <H1> What is a Computer

Technician ?</H1> and then press the enter key.

To enter text in paragraph format:

9. With the insertion point on line 7, type <P> A computer technician is a

person who repairs and maintains computers and servers. The

technician’s responsibilities may extend to include building or configuring

new hardware, installing and updating software packages, and creating

and maintaining computer networks. Computer repair technicians work

in a variety of settings, encompassing both the public and private sectors.

Because of the relative newness of the profession, institutions offer

certificate and degree programs designed to prepare new technicians, but

computer repairs are frequently performed by experienced and certified

technicians who have little formal training in the field </P> and then press

the Enter key

Creating a Bulleted List

10. With the Insertion Point at line 11, type <H2> What steps do I need to follow to

become a computer technician?</H2> and then press the Enter key

11. Type <UL> and then press the Enter key

12. Type <LI>Learn about computers </LI> and then press the Enter key

13. Type <LI>Gain experience</LI> and then press the Enter key

14. Type <LI>Get formal computer training </LI> and then press the Enter key

15. Type <LI>Obtain certifications </LI> and then press the Enter key

16. Type the </UL> tag

18

Saving the HTML File

17. Save this as lbyec71.htm on your folder in the hard disk.

Using the Web Browser to View the HTML File

18. Click the Start button on the taskbar and then point to Programs on the Start Menu.

Point to the Internet Explorer or your web browser on the Programs submenu.

19. Now, open your HTML file. Your screen should at least resemble Figure 2.1.4.

You've just created your first web page.

Figure 2.1.4 Your First HTML Page

20. Now, go back to the Notepad and edit your work by simply trying different sizes of

heading. Remember that your heading size ranges from 1 to 6. Use other heading

sizes. Use also other bulleted list format such as the circle and square. Save this

edited work as lbyec71_1.htm

19

21. View lbyec71_1.htm on your browser

22. Close and exit your Web Browser and Notepad.

20

Laboratory Activity 2.2

Creating a Website with Images

Objectives:

At the end of this activity, the students are expected to

1. Change the font size, colour and format of text of a web page

2. Describe what is homepage

3. Create a home page

4. Explain the difference between the two (2) classes of web images

5. Differentiate the various types of web images

6. Insert a background image

7. Insert a horizontal rule image

Discussion:

Homepage

A homepage is the main page of the Web site. This is the first page, which the

visitors view. On your home page, these are the important things to consider:

The purpose of the web site

What is the web site all about?

How visitors can move from one page to another?

E-mail link so visitors can email you directly from the initial page.

Font Attributes

To enhance the appearance of our web page and make it more interesting to the

visitors, different font size, font style and font face are available in HTML. Table 2 shows

the different FONT attributes and their functions:

Table 2. Font Attributes and Their Functions

Attributes Function

COLOR Changes the font color

Uses Color Codes

FACE Changes the font type

If the user doesn‟t specify a font the

default font is displayed

SIZE Changes the font size

Choices range from 1 to 7, or relative

values such as +2

21

The format use to change the color of the text is <FONT COLOR = " "> with the

color number code between the quotation marks. Figure 3.1 shows some of the font

attributes.

Figure 2.2.1. Web Page with Different Attributes

Web Page Images

Images can be used as backgrounds, horizontal rules or as pictures or graphics in any

web page. These images make the web page more interesting and colorful. They also help to

clarify or make a point being made in the text or as links to other Web pages. They also

serve as directional symbols that allow the visitors to navigate through the Web site.

Please take into consideration that the purpose of Web page determines which class

of image to use. HTML image tags are <IMG> and </IMG>.

Classes of Images

1. Inline Images

Images that display on the Web page directly, together with the text

22

2. External Images

Images that are stored separately from the Web page and are displayed only when

the visitor clicks a link to display them

Image Types

1.Joint Photographic Experts Groups (.JPEGS)

Pronounced as JAY-peg

It has an extension of .jpg, .jpe or .jpeg

It is a graphic image that is saved using compression techniques to make it

smaller for a download on the Web

When creating a JPEG image, users can specify the image quality to

reach a balance between image quality and file size

JPEG files are often used for photographs because they support millions of

colors. Photographs are more complex images than any other images

2. Graphics Interchange Format (.GIF)

Pronounced as Jiff or giff

It has an extension of .GIF

A graphic file with this type is also saved using compression technique to make it

smaller for download on the Web

GIF however supports more colors and resolutions than JPEG making it more

effective for scanned photographs

LSW compression, the technique that is used to compress GIF files is patented,

thus saving in GIF files needs license

GIF images play one line at a time when loading

Interlaced GIF images load all at once, starting with a blurry look and becoming

sharper as they load

3. Portable Network Graphics (.PNG)

Pronounced as ping Designated with a png or ping extensions A patent-free alterative to the GIF which has been developed and approved by the

World Wide Web Consortium as an Internet graphics standard

PNG file is also a compressed file that supports multiple colors and resolutions

Table 3. Image Attributes and Their Functions

Attributes Function

ALIGN Controls alignment

Alignment can be from top, middle, bottom, left, or right

ALT Alternative text to display when an image is being

loaded

BORDER Defines the border width

23

HEIGHT Defines the height of the image

Improves the loading time

HSPACE Defines the horizontal space that separate the image

from the text

SRC Defines the URL of the image to be loaded

YSPACE Defines the vertical space that separate the image from

text

WIDTH Defines the width of the image

Improves loading time

Inserting Background Image

To insert a background image, we will use the BACKGROUND attribute. The

BACKGROUND attribute defines the source of the image. This statement tells the browser

where to locate the image users want displayed.

Procedure:

Creating an Image File

1. Open MS Paint.

2. Create an image that will serve as your background for your homepage.

3. If you like, you can copy any image file available in Windows and then paste it in

Paint.

4. Save this file as background.jpg in your folder

Creating a Home Page

5. Open Notepad or Notepad++. Be sure that your Word Wrap is ON.

6. Enter initial HTML tags. Type <HTML> and then press the Enter key. Type

<HEAD> and then press the Enter key

7. Type <TITLE> CCT Home Page </TITLE> and then press the Enter key

8. Type </HEAD> and then press the Enter key

9. Type <BODY> and then press the Enter key

10. Type </BODY> and then press the Enter key

24

11. Type </HTML> and then press the Enter key

12. Position the insertion point on the blank line between the <BODY> and </BODY>

13. We know that <H1> tag assigns the largest possible size to a heading and the attribute ALIGN = "CENTER" will center the heading. We will enhance our home page with the <FONT> and </FONT> tags. Click line 6 between the <BODY> and the </BODY> tags, type <H1 ALIGN = "CENTER"><FONT COLOR = "#000066"> Computer Technician </FONT></H1> and then press the Enter key.

14. With the insertion point in line 7, type <P> In a nutshell, computer technicians

perform installation & maintenance or solve problems that people have with

their computers. Just as there are different types of computers and different

levels of computer systems and networks, there are also several different types

of computer specialist. A partial list of some of the job designations in this

growing field includes the following: </P> as the first paragraph of the body.

15. Press the ENTER key.

16. After the first paragraph, type <H2> What does a computer technician do? </H2>

and then press the Enter key.

17. Now, we are to add a bulleted list of information. Recall that in lbyec71.htm, we

performed this operation without changing the bullet type available, which is the

disc. We will now use the bullet type square for this activity. Create a bulleted list

for the following elements:

Desktop Support Specialist

Network Administrator

Systems Administrator

Computer Forensics Specialist

Help Desk Technician

Customer Support Analyst

Internet Professional

18. Now, type <H2>Our Services </H2> next and then press the enter key. This would

be our next subheading.

19. Create another list, using the bullet square, with the following elements:

Computer Troubleshooting and Repair

Software Package Installation

Network Maintenance and Troubleshooting

Web Page Development and Maintenance

Printing

25

We've just created the first part of our web page.

20. Now, we are to insert background and horizontal rule image for our web page. To

add a background image. First, position the insertion point insertion point

immediately to the Y in the <BODY> tag and then press the space bar. Type

BACKGROUND = "directory and the filename of the image" . In this case, use

the image file, background.jpg you've created earlier.

21. We have just added an image background to our web page. We are now ready to

create a horizontal rule image. But we first have to create the horizontal bar. Open

your MS Paint and then using the box object, create a rectangular image filled with

color blue. Save this at c:\desktop\lbyec71 with filename bluebar.jpg. We will use

this as our horizontal rule image.

22. Going back to Notepad, point the insertion point to the right of the </H1> and then

press the Enter key. Type <CENTER> <IMG SRC =

"c:\desktop\lbyec71\bluebar.jpg" HEIGHT = 5 WIDTH = 500> </CENTER> as

the tag. This line defines our horizontal rule. It tells that the horizontal rule should be

place at center and with height and weight dimensions specified.

23. We are to copy this horizontal rule image in the middle of two bulleted lists.

Highlight the text <CENTER> <IMG SRC = "c:\desktop\lbyec71\bluebar.jpg"

HEIGHT = 5 WIDTH = 500> </CENTER> and then click the EDIT menu then

Copy. Now, position the insertion point at the end of our 2nd unordered list and then

click the EDIT menu again and then click PASTE. We have now two (2)

horizontal rule images.

24. Save this exercise as lbyec71_lab3.htm. View this file on the web browser. Your

screen should at least resemble Figure 2.2.2.

26

Figure 2.2.2. The Finished Work

25. Close and exit your Web Browser and Notepad.

27


Introduction to CSS

Objectives:

1. Learn the basic of cascading style sheets or CSS.

2. Design a website using HTML and CSS

3. Differentiate different styles of CSS

Discussion:

What is CSS?

CSS stands for Cascading Style Sheets

Styles define how to display HTML elements

Styles were added to HTML 4.0 to solve a problem

External Style Sheets can save a lot of work

External Style Sheets are stored in CSS files

CSS Syntax

A CSS rule has two main parts: a selector, and one or more declarations:

To make the CSS more readable, you can put one declaration on each line:

p

{

color:red;

text-align:center;

}

The id Selector

The id selector is used to specify a style for a single, unique element.

The id selector uses the id attribute of the HTML element, and is defined with a "#".

The style rule below will be applied to the element with id="para1":

28

Example:

#para1

{

text-align:center;

color:red;

}

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the

class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a “.”

In the example below, all HTML elements with class="center" will be center-aligned:

Example:

.center {text-align:center;}

You can also specify that only specific HTML elements should be affected by a class.

All p elements with class="center" will be center-aligned: p.center {text-align:center;}

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet

Internal style sheet

Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style

sheet, you can change the look of an entire Web site by changing just one file.

Each page must link to the style sheet with the <link> tag. The <link> tag goes inside the head

section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

An external style sheet can be written in any text editor. The file should not contain any html

tags. The style sheet file must be saved with a .css extension. An example of a style sheet file is

shown below:

29

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/background.gif");}

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define

internal styles in the head section of an HTML page, inside the <style> tag, like this:

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/background.gif");}

</style>

</head>

Inline Styles

An inline style loses many of the advantages of a style sheet (by mixing content with

presentation). Use this method sparingly!

To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any

CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

Source: http://www.w3schools.com/css/css_howto.asp

(you may also click the source to view different CSS commands)

Exercises:

Before you begin, create a folder on your desktop and name the folder as: lbyec71. Save all

your files to lbyec71 folder.

1. Type and save the following as a CSS (.css) file. Make sure that you are NOT saving it

as a text file. Name the file "sample.css" (without the quotes).

body{ background-color: gray;}

p {color: blue;}

h3{color: white;}

2. Type and save it as CSS1.html

<HTML>

<HEAD>

<link rel="stylesheet" type="text/css" href="test.css"/>

</HEAD>

<body>

<h3> A White heade </h3>

http://www.w3schools.com/css/css_howto.asp

30

<p> This paragraph has a blue font.

The background color of this page is gray because

we changed it with CSS! </p>

</body>

</HTML>

3. Run the html file using notepad++. The output should be similar to this:

31


Block Diagram and Flowchart Using MS Visio

Objectives:

1. Learn and manage basic diagrams, workflows and flowcharts.

2. Get acquainted with Microsoft Visio, which is the fastest, easiest tool for creating flowcharts,

organization charts, timelines, marketing diagrams and much more.

Discussion:

Block Diagram It is a simplified illustration of a system, program, or process. The electronic and computer

industries use block diagrams to convey a variety of technical information.

Block Representations

Each individual block represents a stage, substage or unit of the total system as

an independent function.

Individual blocks may represent aspect of process, as inflow diagrams

Blocks may represent individual modules, units or removable portions of the total

system made up of multiple sections.

Components of a Block Diagram

1. Blocks – a variety of simple geometric shapes is used for block diagrams, although

rectangular forms are the most common. Blocks can be placed vertically or horizontally,

depending on the needs of the diagram. In general, a block diagram should contain as

few different sizes of blocks as possible.

32

2. Symbols – These are usually units and are normally depicted with aspects of their real-life

configuration.

3. Flow Lines- connects blocks and symbols according to the functional sequence of the system.

Flow lines are drawn as solid, medium-weight lines. The thickness of the lines should be the

same as that used for the blocks. All flow lines are drawn with horizontal and vertical lines. Do

not use diagonal lines or rounded corners.

Algorithms and Flowcharts A typical programming task can be divided into two phases:

1. Problem solving phase - produce an ordered sequence of steps that describe solution of

problem. This sequence of steps is called an algorithm

2. Implementation phase - implement the program in some programming language

Flowcharts

(Dictionary) A schematic representation of a sequence of operations, as in a manufacturing

process or computer program.

(Technical) A graphical representation of the sequence of operations in an information system

or

program. Information system flowcharts show how data flows from source documents through

the computer to final distribution to users. Program flowcharts show the sequence of

instructions

in a single program or subroutine. Different symbols are used to draw each type of flowchart.

33

Example 1: Write an algorithm and flowchart to determine a student‟s final grade and indicate

whether it is passing or failing. The final grade is calculated as the average of four marks

Algorithm

Step 1:

Input M1,M2,M3,M4

Step 2:

GRADE (M1+M2+M3+M4)/4

Step 3:

if (GRADE < 70) then

Print “FAIL”

else

Print “PASS”

endif

Flowchart

34

Example 2: Write an algorithm and draw a flowchart to convert the length in feet to centimeter.

35

Example 3: Write an algorithm that reads two values, determines the largest value and prints

the

largest value with an identifying message.

Exploring MS Visio

36

1. Open Visio and open the shapes template.

2. Drag and drop the following shapes to the workspace: square, rectangle, triangle.

*drag is done by pointing on the object, then hold down the left button of the mouse and

move it to the point where the object will be placed. Release to drop.

3. Flip the triangle both horizontally and vertically and observe what happens.

4. Misalign them and group them by dragging the left mouse button until all of the blocks are

highlighted. Connect them using the connect button.

5. Undo what you just did, and connect the shapes by using the pencil tool. You may also

choose the line tool.

6. You can change the thickness of the line and the block by clicking on the shape first, then

click on the line tool. Make sure that the object is highlighted when you do this.

7. Name the block by double clicking on the shape or by using the text tool.

8. Save your file as visio_exercise.

Exercises:

1. Draw the flow diagram using proper line weights and proper standards.

37

2. Redraw the following using MS Visio:

A. SSB Receiver

B. Power Supply

38


Introduction to C- Programming

Objectives:

1. Learn the basic of C-Language: printf() and scanf().

2. Develop algorithms and flowcharts for use in programming applications.

3. Design, compile, test, run, and implement C language program

Discussion:

In the Beginning C is a general purpose programming language and it started to run under UNIX

environment.

Dennis Ritchie invented the C-Programming language at AT&T Bell Laboratories

C is similar to Pascal, a functional programming language

Aimed in designing and developing operating systems, compilers, interpreters, database software and embedded intelligence programs.

C Data Types

Before a variable name can be used in a C program, it must be declared explicitly, together with its corresponding data type.

39

Variable Declaration

Before you can use a variable, you must tell the compiler about it by declaring it and telling the compiler about what its "type" . To declare a variable you use the syntax: <variable type> <name of variable>;

Individual declaration

int sum;

float area;

char letter;

Group declaration

int n1, n2, sum, diff;

float area, fahr, celsius, div;

A Simple Program #include <stdio.h> int main() {

printf( "ANIMO La Salle!\n" );

getchar();

return 0; }

The #include is a "preprocessor" directive that tells the compiler to put code from the header called

stdio.h into the program before actually creating the executable. By including header files, you can gain

access to many different functions--both the printf and getchar functions are included in stdio.h.

The next important line is int main(). This line tells the compiler that there is a function named main, and

that the function returns an integer, hence int. The "curly braces" ({ and }) signal the beginning and end

of functions and other code blocks.

40

The printf function is the standard C way of displaying output on the screen. The quotes tell the compiler

that you want to output the literal string as-is (almost). The '\n' sequence is actually treated as a single

character that stands for a newline; for the time being, just remember that there are a few sequences that,

when they appear in a string literal, are actually not displayed literally by printf and that '\n' is one of

them. The actual effect of '\n' is to move the cursor on your screen to the next line. Notice the semicolon:

it tells the compiler that you're at the end of a command, such as a function call. You will see that the

semicolon is used to end many lines in C.

The next command is getchar(). This is another function call: it reads in a single character and waits for

the user to hit enter before reading the character. This line is included because many compiler

environments will open a new console window, run the program, and then close the window before you

can see the output. This command keeps that window from closing because the program is not done yet

because it waits for you to hit enter. Including that line gives you time to see the program run.

Finally, at the end of the program, we return a value from main to the operating system by using the

return statement. This return value is important as it can be used to tell the operating system whether our

program succeeded or not. A return value of 0 means success. The final brace closes off the function.

(Source: http://www.cprogramming.com)

printf() and scan() printf()

This function is used in order to display the contents of a variable on the screen or to simply print the contents as it is on the screen. This function can be accessed from anywhere within a program simply by writing the function name, followed by a list of arguments enclosed in parentheses. The arguments represent data items that are sent to the function. The necessary information required for printf ( ) and scanf ( ) function is supplied by < stdio.h > file. This < stdio.h> file is called header file. Different header files are like < conio.h >,< stdio.h > etc. The general form of printf ( ) is printf(“format string”); or printf( “ < format string >” , < list of variables>); < Format string > consists of character to be display with following specifiers.

%f: For printing real values. %d: For printing integer values. %c: For printing character values. %s: For printing string values.

http://www.cprogramming.com/

41

scanf ( )

Input is entered into the computer from a standard input device by using scanf ( ) function. This function can be used to enter any combination of numerical values, single characters & strings. The general form of scanf ( ) is scanf(“data type format”, &variable name ); Note: that the ampersand (&) before the variables in the scanf ( ) statement is must

Basic Data Type Format Type Format Meaning

int %d whole number (3, 7, -9, 10000)

float %f A number with decimal point (5.8, -5.67,0.32)

char %c A single letter, symbol or number enclosed with single quotes („B‟, „r‟, „*‟)

%s a string of characters enclosed with double quotes (“Bok”, “JAY”)

Example 1: Write a C program that calculates the sum of two input numbers and display the result

Algorithm:

Input: Enter two numbers (n1, n2)

Process: Compute the sum (sum=n1 +n2)

Output: Display the sum (sum)

#include <stdio.h> #include <stdlib.h> int main() {

int sum, n1, n2; printf(“\n Enter two numbers: “); scanf("%d %d", &n1, &n2); sum = n1+n2; printf("\n The sum is: %d\n", sum); system("PAUSE"); return 0;

}

42

Example 2: Write a program to calculate the area of a circle and display the result. Use the formula:

A= πr2

Algorithm:

Input: enter the radius

Process: Compute the Area

Output: Display the area

// 2. Area of a Circle #include <stdio.h> #include <stdlib.h> #define Pi 3.1416 int main()

{ int r; float A;

printf(“\nEnter the radius:” ); scanf("%d", &r);

A=Pi*r*r;

printf("The area: %5.2f \n", A);

system("PAUSE"); return 0;

} Example 3: Write a program that computes the average of three input quizzes, then display the result.

Algorithm

Input: Enter three quizzes(q1, q2, q3)

Process: Compute the average (ave=(q1+q2+q3)/3)

Output: Display the Average #include <stdio.h> #include <stdlib.h> int main() { int q1, q2,q3; float ave;

printf("\nEnter Three Quizzes: "); scanf("%d %d %d", &q1, &q2, q3); ave=(q1+q2+q3)/3; printf("the average: %.3f\n", ave);

system("PAUSE"); return 0; }

43


C- Conditional Statements: If and If-Else

Objectives:

1. Learn the conditional statements of C-language using if and if-else.



Discussion:

If and if-else statement A statement in C used to select one or two alternative course of actions.

If statement is used in single alternative structure where it executes only when the condition is TRUE.

If-else statement is used in two alternative structures, where it executes when the condition is either TRUE or FALSE.

Syntax of if and if-else

44

If-else statement if (condition) statement 1; else statement 2; When the condition is proven true, statement 1 is executed. Otherwise, Statement 2 will run. Else part is optional which means that it can be included or not.

C- Logical Operators

&& - The logical-AND operator produces the value 1 if both operands have nonzero values. If either operand is equal to 0, the result is 0. If the first operand of a logical-AND operation is equal to 0, the second operand is not evaluated.

|| - The logical-OR operator performs an inclusive-OR operation on its operands. The result is 0 if both operands have 0 values. If either operand has a nonzero value, the result is 1. If the first operand of a logical-OR operation has a nonzero value, the second operand is not evaluated.

Relationship and Equality Operators

Operator Relationship Tested

< First operand less than second operand

> First operand greater than second operand

<= First operand less than or equal to second operand

>= First operand greater than or equal to second operand

= = First operand equal to second operand

!= First operand not equal to second operand Example 1: Write a program that determines if the input age is qualified to vote or not. The qualifying age is 18 years old and above. Algorithm:

Enter age

If age > 18 : “Qualified”

Else: “Too young!”

#include <stdio.h> #include <stdlib.h> int main() { int age; printf("\nEnter age: ");

45

scanf("%d", &age); if (age>=18)

printf("Qualified to vote\n");

else

printf("Too Young!\n");


} //using logical operators #include <stdio.h> #include <stdlib.h> int main()

{ int age; printf("\nEnter age: "); scanf("%d", &age);

if ((age>=1)&&(age<=100)) { if (age>=18)

printf("qualified to vote\n"); else printf("too young!");

}

else

printf("out of range!\n");


}

Example 2: Write a program that accepts the input magic number. If the input is right, the magic words will be displayed. The magic number is 143 and its corresponding magic words are: “I love you!” if the input number is wrong, displays: “Sorry, better luck next time”.


int mn; printf("Enter a magic number: "); scanf("%d", &mn); if (mn==143)

printf("I love you!\n");

46

else printf("Sorry, better luck next time!\n");


} Example 3: Write a program that determines if the input number is POSITIVE or NEGATIVE. Consider 0 as positive, considering that it contains no negative sign. #include <stdio.h> #include <stdlib.h> int main() {

int n; printf("\nEnter a number:"); scanf("%d", &n);

if(n>=0) printf("Positive\n");

else

printf("Negative\n");


}

Example 4: Write a program that determines if the input number is ODD or EVEN

number. Use %= modulo The modulo operation finds the remainder of division of one number by another. For instance, the expression "5 mod 4" would evaluate to 1 because 5 divided by 4 leaves a remainder of 1, while "9 mod 3" would evaluate to 0 #include <stdio.h> #include <stdlib.h> int main() {

int r,n; printf("\nEnter a number:"); scanf("%d", &n); r=n % 2; if(r==0)

printf("EVEN\n"); else

printf("ODD\n"); system("PAUSE"); return 0;

}

47

“The sequence of if-else statements is the most general way of writing a multi-way decision. The expressions are evaluated in order, if any expression is true, the statement associated with it is executed, and this terminates the whole chain.”

-Dennis Ritchie

48


C- Conditional Statements: Ladderized If-Else and Switch/Case

Objectives:

1. Learn the conditional statements of C-language using ladderized if-else and

case/switch statements. 2. Develop algorithms and flowcharts for use in programming applications.


Discussion:

Ladderized if-else

Only those conditional statements and expressions that were first proven true are the ones to be chosen and its associated statements will be executed. When all conditions were proven false, else statement x will run.

Syntax:

if (condition 1)

statement 1; else if (condition )

statement 2; else if (condition )

statement n; else

statement x; Example 1: Write a program to assist a teacher in calculating student grades at the end of the semester. It accepts a numerical grade as input, then it will display the character as output, based on the given scale:

90 and above: A

80-89 B

70-79 C

60-69 D

Below 60 F

49


int g; printf("\nEnter grade: "); scanf("%d", &g); if ((g>=90) && (g<=100))

printf("A\n");

else if ((g>=80) && (g<=89))

printf("B\n"); else if ((g>=70) && (g<=79))

printf("C\n"); else if ((g>=60) && (g<=69))

printf("D\n"); else if ((g>=50) && (g<=59))

printf("F\n");

else

printf("Out of Range\n");


} Example 2: Write a program that displays an equivalent color once an input letter match its first character, for example b for Blue, r for Red, and so on. Here are the given criteria:

„B‟ or „b‟ Blue

„R‟ or „r‟ Red

„G‟ or „g‟ Green

„Y‟ or „y‟ Yellow #include <stdio.h> #include <stdlib.h> int main() {

char let; printf("Enter a letter: \n"); scanf("%c", &let);

if((let=='B') || (let=='b')) printf("Blue\n");

else if((let=='R') || (let=='r')) printf("Red\n");

50

else if((let=='G') || (let=='g')) printf("Green\n");

else if((let=='Y') || (let=='y')) printf("Yellow\n");

else printf("Unknown Color\n"); system("PAUSE"); return 0;

}

Switch/Case Statement

Used to simplify some of the tasks of ladderized if-else statements. Variables declared as integers and characters are the best candidates that can be tested or evaluated by the switch.

“The switch/case statement is a multi-way decision that tests whether an expression matches one of a number of constant integer values, and branches accordingly. If a case matches the expression value, execution starts at the case.” -Dennis Ritchie

switch(var_expression) { case const_value: statement 1; break; case const_value: statement 2; break; case const_value: statement 3; break; case const_value: statement 4; break; default: statement x; break; } “The break statement causes an immediate exit from the switch. Because cases serve just as labels, after the code for one case is done, execution falls through to the next unless you take explicit action to escape.” -Dennis Ritchie

51

Example 3: Write a program to display the high school level of a student, based on its year-entry number.

1 Freshman

2 Sophomore

3 Junior

4 Senior

#include <stdio.h> #include <stdlib.h> int main(int argc, char *argv[])

{ int n; printf("enter your year-entry number: \n"); scanf("%d",&n);

switch(n)

{ case 1: printf("Freshman\n"); break;

case 2: printf("Sophomore\n"); break;

case 3: printf("Junior\n"); break;

case 4: printf("Senior\n"); break; default: printf("Out-of-School\n"); break;

} system("PAUSE"); return 0;

}

52

Case/Switch Structure

53


C- Looping Statements (Part 1)

Objectives:

1. Learn the looping statements of C-language such as for, while and

do-while loop.

2. Develop algorithms and flowcharts for use in programming

applications.


Discussion:

Looping Statement

A program instruction that repeats some statement or sequence of statements in a specified number of times.

A set of instructions to be performed all over again until a certain condition is reached, met, or proven and tested as false.

“Loops are used to repeat a block of code. Being able to have your program repeatedly execute a block of code is one of the most basic but useful tasks in programming -- many programs or websites that produce extremely complex output (such as a message board) are really only executing a single task many times.” –Alex Alain, cprogramming.com

Three Looping Statements of C-Language

1. For-loop

The for loop is the most powerful and flexible of all the loops used in C. the general syntax is:

for(initialization ; condition ; loop control) {

…action; …action; //loop body …action;

}

The initialization is evaluated before the loop begins. You have to declare and assign an initial value for the loop. This initialization is evaluated only once at the beginning of the loop.

54

The condition tells the program that while the conditional expression is true the loop should continue to repeat itself.

The loop control executes after each cycle in the loop. The count may increase, decrease by 1 or of some other value.

Loop control using variable x x++ -incrementation

x-- -decrementation

x+=n / x-=n

where n is any number Example 1: Write a program that generates the given

sequence: 1 2 3 4 5 #include <stdio.h> #include <stdlib.h>

int main()

{

int n;

printf("\nFor loop example- Incrementation");

for(n=1; n<=5;n++) {

printf("\n %d",n);

}

printf("\n");

system("PAUSE"); return 0; }

55

Example 2: Write a program that generates the given

sequence: 5 4 3 2 1

#include <stdio.h> #include <stdlib.h>

int main()

{

int n; printf("\nFor loop example- decrementation"); for(n=5; n>=1;n--)

{

printf("\n %d",n);

} system("PAUSE"); return 0; }

Example 3: Write a program that calculates the sum of a given sequence numbers:

1 + 2 + 3 + 4 + 5

#include <stdio.h> #include <stdlib.h>

int main()

{

int sum, i;

printf("\n the use of accumulator"); sum = 0; for(i=1; i<=5; i++) { printf("\n %d", i); sum = sum+i;

} printf("the sum is %d", sum); getch(); return 0;

}

56


C- Looping Statements (Part 2)

Objectives:

1. Learn the different looping statements: while loop and do-while loop 2. Develop algorithms and flowcharts for use in programming applications. 3. Design, compile, test, run, and implement C language program

While loop

Syntax:

initialization;

while(condition)

{ statements; inc/dec/loop control; }

Example 4. Using while loop, Write a program that generates the given sequence: 1 2

3

4

5 #include <stdio.h> #include <stdlib.h> int main() {

int n;

printf("\n While loop-Incrementation"); n=1; while(n<=5) { printf("\n %d", n); n++;

} getch(); return 0;

}

57

Do-While Loop Syntax: initialization; do { statements; inc/dec; } while (condition); Example 5. Using do- while loop, Write a program that generates the given sequence: 1 2 3 4 5 #include <stdio.h> #include <stdlib.h> int main() { int n; printf("\nDo- While loop-Incrementation"); n=1; do { printf("\n %d",n); n++; } while (n<=5); getch(); return 0; } Example 6. Write a program that calculates the sum of a given sequence numbers: 1 + 2 + 3 + 4 + 5 //USING FOR LOOP #include <stdio.h> #include <stdlib.h> int main() { int sum, i; printf("\n the use of accumulator"); sum = 0; for(i=1; i<=5; i++) { printf("\n %d", i); sum = sum+i;

58

} printf("the sum is %d", sum); getch(); return 0; } //USING WHILE LOOP #include <stdio.h> #include <stdlib.h> int main() { int sum, i; printf("\nWhile loop Accumulator"); i=1; sum=0; while(i<=5) { printf("\n %d",i); sum = sum+i; i++; } printf("\nThe sum is %d", sum); getch(); return 0; } //USING DO-WHILE #include <stdio.h> #include <stdlib.h> int main() { int sum, i; printf("\nWhile loop Accumulator"); i=1; sum=0; do { printf("\n %d",i); sum = sum +i; i++; } while (i<=5); printf("\nthe sum is %d\n", sum); getch(); return 0; }

59


Arrays

Objectives:

1. Learn the different Arrays in C.



Discussion:

An array is a special type of variable which can contain or hold one or more values of the same data type

with reference to only one variable name.

The array variable has a common name identifier and can hold many values at the same time, provided they have the same data type.

An array variable can be distinguished through a pair of square brackets [ ]. The number inside the brackets is called an index or element.

One Dimensional Array Syntax:

data_type array_name[index];

Example:

int ar[5]; or float arrayvar[10]; This example illustrates variable: ar[5] which is an integer type and can store a maximum of 5 values. ar[0] = 10;

ar[1] = 20;

ar[2] = 50; ar[3] = 80;

ar[4] = 30;

60

Two-Dimensional Array Syntax:

data_type array_name[arow][acol] Example:

int Score[2][3]; Score[0][0]= 10

Score[0][1]= 80

Score[0][2]= 30

Score[1][0]= 40

Score[1][1]= 50

Score[1][2]= 90

Example 1. Write a program using one-dimensional array that loads or stores the 5 values into an array variable. The values are the resulting computation from a simple equation. Then display the stored values

61

Example 2. Write a program that determines the highest value among the five input values

Example 3. A program that stores roll numbers and marks obtained by a student side by side in matrix #include <stdio.h> main() { int stud[4][2];

int i, j; for (i=0; i<=3; i++)

{ printf ("\n Enter roll no. and marks"); scanf ("%d%d", &stud[i][0], &stud[i][1] );

}

for (i=0; i<=3; i++)

printf ("\n %d %d", stud[i][0], stud[i][1]);

system("pause"); return 0;

}

Documents

Lbyec71 Lab Manual v3.0