You are on page 1of 60

1

2

3

# TOPICS

4

## Assessment / Evaluation

5

### 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.

### 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

• ### 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

 Quizzes Recitation Long Exam Name of Students 1 2 3 Total % 1 2 3 Total % 1 2 3 Total % Final Rating 15 15 15 20 20 20 100 100 100 ABC 5 9 11 12 15 14 60 68 89 DEF 7 8 12 11 16 15 80 78 90 GHI 5 7 12 12 17 16 90 78 95 JKL 6 8 14 13 13 16 78 76 67 MNO 13 9 9 10 16 16 89 88 95 PQR 8 7 14 9 15 17 78 88 89 STU 6 8 10 12 17 17 50 65 45 VWX 8 8 9 13 18 18 88 86 87 YZA 13 9 7 14 19 19 55 65 45 CCC 8 6 11 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

### 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 Indicates the beginning and end of an HTML development Indicates the beginning and end on the document used for the title and other document header information 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 Indicates the beginning and end of the web page body Indicates the beginning and the end of the text section called heading; size ranges from

through

Indicate the beginning of a new paragraph; inserts a blank line above the new paragraph Indicates the beginning and the end of an unordered (bulleted) list
• Indicates that the item that follows the tag is an item within a list
Inserts a horizontal rule
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

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

20

### 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

• 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
attributes.
some
of
the

font

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 BORDER loaded  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 SRC from the text  Defines the URL of the image to be loaded YSPACE  Defines the vertical space that separate the image from WIDTH text  Defines the width of the image

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

• 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

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

• 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 2 nd 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

27

### 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:

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

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

### 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.

### 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:

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.

• 2. Redraw the following using MS Visio:

• A. SSB Receiver

37

• B. Power Supply

38

### 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

### 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.

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= πr

2

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

### Objectives:

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

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

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

### 

• 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");

system("PAUSE"); return 0;

}

//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");

system("PAUSE"); return 0;

}

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”.

#include

<stdio.h>

#include <stdlib.h> int main()

{

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");

system("PAUSE"); return 0;

}

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"); system("PAUSE"); return 0; }

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

# -Dennis Ritchie

48

### Objectives:

1.

Learn

the

conditional

statements

case/switch statements.

of

C-language

using

if-else

and

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

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

### Discussion:

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

#include

<stdio.h>

#include <stdlib.h> int main()

 { 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"); system("PAUSE"); return 0; }

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

#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

### 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.

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

### 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

• ### 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

### 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> <stdlib.h> int main() { int n;

#include

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

### Objectives:

• 1. Learn the different Arrays in C.

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

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

### 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;

}