Programming Concepts: Introduction to Programming Concepts

 

 

Last Updated:   22 Jan 2006

Objectives - This section introduces the students to many of the terms used in Computer Programming.  While this course focuses on HTML and JavaScripts as the programming languages used for the Labs, these programming concepts can be used for any programming language.  

NOTE: There are many Hot Links to help you out on many of these Programming Terms. Simply click on the underlined word, and you will see a definition / description from www.webopedia.com.

Programming  Background   (See  also Chapters 4 & 18 for additional information on HTML and JavaScript programming, but also use the Web sites provided with Chapter 4 and 18 for additional items that may be on useful and on the exams. However, there are fundamental differenced between what the text provides regarding Programming Concepts and the information provided in the contents of this page.  The exams will focus on these Web pages, and use Text as well as other Web sites to supplement this information as appropriate.)

bullet

Describe what programmers do and do not do

bullet

List and describe the levels of programming languages – machine, assembly, high level, very high level, and natural

bullet

Describe the major programming languages in use today (High Level Languages)

bullet

Explain the concepts of object-oriented programming

bullet

Getting Started:  Introduction to Programming Concepts

bullet

List and Explain the five steps in the Programming Process (NOTE: These are different than the Text)

  1. What you will need to Define the Problem!

  2. What you will need to Design the Solution

  3. What you will need to Write the Program

- Starting to Program using the Notepad text editor

  1. What you will need to Test and Debug the Program!

  2. What you will need to Document Throughout!

Return to Top

bullet

Describe what programmers do and do not do

One thing to remember about computer programmers, what they do is in the Name, they write computer programs. Programmers: 

  1. Prepare instructions that make up the program (values and variables, then desk check the anticipated results)

  2. Run the instructions to see if they produce the correct results (interpreters and compilers)

  3. Make corrections (debug)

  4. Write a report on the program

  5. Interact with (a) Users , (b) Managers , and (c) Systems analysts

  6. Coordinate with other programmers to build a complete system

Programmers do not normally do analysis work, as in designing solutions, that's what computer analysts do.  Analysts participate in the entire System Development Life Cycle (SDLC), where Programmers usually only write Programs.

Return to Top

bullet

List and describe the levels of programming languages – machine, assembly, high level, very high level, and natural

As mentioned above, the programming process can be used for most any programming language. However, since machine language is basically the language the language that computers understand there aren't interpreters and compilers to translate the source code to object code.

  1. Machine language - the language that computers understand.  This language includes binary digits (bits) which are 0 and 1.  These bits communicate with the computer electrical circuits in changing the states of the circuits.

  2. Assembly language - introduced in during the 1st Generation of computers (see Appendix) but widely used in 2nd Generation computers, basically to assist programmers better use of acronyms.  These acronyms are call mnemonic codes, for example: LDA 1 stands for 'Load the A register with the contents of 1'.    Assemblers are used translates Assembly language to machine language .

  3. High Level language - more simple than Assembly Language mnemonics, during the 2nd Generation, High Level languages were introduced.  These languages were more English like languages. One of the 1st High Level languages was FORTRAN.  In this class, we use QBasic as the High Level Language.  As mentioned above QBasic source code needs to be translated into machine language using interpreters or compilers.

  4. Very High Level language (4GL) - followed High Level languages, in that programmers needed certain tools to assist them to write complex programs and get the necessary data out of computer.  Therefore,  Query languages (most are Structures Query languages which have sets of rules that must be followed, like the syntax mentioned above) and Natural language (even more English like toward more of the spoken language) were developed.

Return to Top

bullet

Describe the major programming languages in use today (High Level Languages)

The following is a listing of current major programming languages in use today. The Visual Basic, C+++ and Java are some of the most popular because of the wide variety of options.

  1. FORTRAN – math based applications

  2. COBOL – business based applications

  3. BASIC – primarily on PC and for educational purposes

  4. RPG – rapid creation of reports primarily on IBM midrange computers   

  5. Visual Basic – easily creates user interfaces with standard Windows features (QBasic does not use Windows)

  6. C – provides efficient code and supports portable programs and structured programming

  7. C++ – enhanced version of C that supports object-oriented programming

  8. Java – Is an object-oriented programming language that runs on different platforms

NOTE:  While HTML and JavaScripts are NOT 'truely' classified as High Level Languages, the concept of Algorithmic Thinking and the use of structured programming tool as described below in the Five Steps of the Programming Process do apply to HTML and JavaScript programming. Thus we will be using HTML and JavaScripts to introduce the students to Programming concepts, since HTML and JavaScripts both use Object-Oriented Programming (OOP) techniques.

Return to Top

bullet

Explain the concepts of object-oriented programming   

Programmers have always tried to find ways to improve the programming activity.  From using mnemonics in Assembly language, to making FORTRAN, COBOL and QBasic more English like to make it easier for programmers to understand the language, to now the concept of using Objects to represent traditional programming functions.  Similar to the way Microsoft has used icons to represent commands, Object are used in the Programming process to allow Inputting of data into a program, computing the results of data and printing out these results.  Object are used in a wide variety of programming languages, hence the term 'Object Oriented Programming'.

Objectives - This section introduces the students to many of the terms used in Object Oriented Programming.  While this course focuses on HTML and JavaScripts as the programming languages used for the Labs, understanding Object Oriented Programming will assist you in learning HTML and JavaScript programming tools.  

I.                   Explain the concepts of object-oriented programming

II.                Objects

III.              Methods

IV.            Properties

          V.               Event Handlers

Objects are used in a wide variety of programming languages, such as HTML and JavaScript, hence the term 'Object Oriented Programming'.

I.                   Object Oriented Programming Defined: A type of programming in which programmers define not only the data type of a data structure, but also the types of operations (functions) that can be applied to the data structure.  In this way, the data structure becomes an object that includes both data and functions.

The following represents some characteristics of Object Oriented programs.

II.                 Object – A complex data type that represents a real world person, place, thing or idea.  It is a self-contained unit of data and functions called methods (subprograms / operations / procedure/ routine) that act on that data.

e.g. objectName

Object = document

III.              Property - are characteristics of the object. For example, a Cat object might logically have name, size, color, and age Properties, with corresponding property values of “Boots”, “large”, “white”, and “2 years”.

e.g. objectName.propertyName=“value”

document.write=”This is Fun”

Object = document

Property = write

Value = “This is Fun”

Result: The words This is Fun will be displayed.

IV.             Methods – are the functions (subprograms / operations / procedure/ routine) that are defined specifically for a particular object and operates only on that object’s data (e.g. methods tell the object what to do).  Different objects can have methods of the same name for example, document.close() and window.close().

e.g.   objectName.methodName()

                        RightNow = new Date();
    var mpo = RightNow.getMonth();
    var mpo1 = mpo + 1
    document.write("Today's Month is " +mpo1+ "");

Object = RightNow

Method = getMonth()

Result: The Today’s Month is 7 will be displayed.

V.               Event Handlers - Attributes of HTML tags embedded in documents. The attribute assigns a JavaScript command or function to execute when the Event happens.

e.g.   eventName=myJavaScriptCode

<onClick=Return to >

<a href="a:RicksHomePage.html">Ricks Home Page</a>

          Event = onClick

Result:  When the user clicks the mouse on the Ricks Home Page  words, the user will be sent to the a driver where the RicksHomePage.html code will be executed by the Browser.

Return to Top

bullet

Getting Started:  Introduction to Programming Concepts

Before we begin our journey into learning Programming, it is important to realize that the best way to understand programming is to look at it as a different Language.  Some people have no problem learning new languages, others it's more difficult.  As we go through this journey, be prepared to 'dig deeper' into the programming language to learn more and different techniques.

Before we begin, I would first like to wish you luck with learning this new language (but does luck really come into play?), and to tell you that it is Very Important that you read these section while sitting in front of your computer actually doing the exercises. 

We will be using the Object Oriented Programming (OOP) languages of HTML and JavaScripts, so look at the HTML and JavaScript Tutorials that are available on the web, but some are better than others, and some will just plain confuse you.

Also, don't be afraid to try things on your own. Try changing the numbers around that are presented in the examples, and see how the computer responds! That is the best way to learn!! Experiment! As you go along, try changing around something in the Program and then predict what the outcome will be - that is a great way to really test your knowledge of a command.

In short, learn by doing! It is the best way to retain knowledge! One study on learning states: You only remember about 25% to 30% of what you hear, about 50% of what you read or see, but about 75% to 80% of what you do!

Since the programming assignments are all laid out in a logical manner, each assignment builds on the commands and functions learned in previous lab, use the book or find a "quick-reference" guide online, one that also includes a full explanation of the command and includes examples of how to use the command. It bridges the gap between an overly brief quick reference guide and a very dry, not too understandable and sometimes still sparsely-explained HTML or JavaScript reference guides.

For an HTML Quick Reference Guide: http://www.devguru.com/Technologies/html/quickref/html_intro.html

For a JavaScript Quick Reference Guide: http://www.devguru.com/Technologies/ecmascript/quickref/javascript_intro.html

Again, I wish you well in your venture to become just a bit more computer literate. While this is not overly hard work, it will take a little bit of persistence, or stick-to-it-iveness, if you prefer. Above all, however, have fun!! Don't just try the examples in the book, but see if you can write some interesting Programs of your own! Since HTML and JavaScripts programming produce 'visual images' you will be able to see your problems in a different manner than simply printed words.

Now sit down in front of your computer, turn it on, get ready, stretch out your fingers over the keyboard, and let's have some fun!

Return to Top

bullet

List and Explain the five steps in the Programming Process (NOTE: These are different than the Text)

There is a basic flow for computers as well as in programming.  All programming commands can be mapped to this basic flow:  BASIC FLOW OF COMPUTERS = INPUT, PROCESS, OUTPUT.  

All computer programs are also called software.  Programs basically tell the computer what to do.  By following some fundamentals about writing programs, you too can tell the computer what to do.  Remember computers can only do what they are told through programs.

Computer programmers write programs using programming languages such as QBasic, Fortran, Cobol, HTML, JavaScripts, Java, C++ and many others.

Computer analysts review what software is needed for an individual, corporation or even school district, and write Problem Definitions.

To be effective in anything, you really need a Process.  The programming process can and should be used for any programming language that you use.  In this class this process is used to develop QBasic programs.  For more details on this process refer to the QBasic Supplement page.  The five steps in the programming process are:

To be effective in anything, you really need a Process.  The programming process can and should be used for any programming language that you use.  The five steps in the programming process are:

  1. Define the Problem discuss problem with the users of a system and the systems analyst to determine the necessary input, processing, and output

  2. Design the Solution design an algorithm and represent the logic using a Flowcharts or Pseudocode

  3. Write the Program express the solution in a programming language 

  1. write source code

  2. translate the algorithm into formal programming language

  3. syntax (following the programming rules)

  1. Test and Debug the Program translate and debug.  Insure that the program works as planned (Use an Interpreter or Compiler - Run or Execute the Commands which translate source code into  object code)

  1. interpreter - translates line by line from source code (actual programming language) into  object code (language computer understands - machine language) , and identifies syntax errors (violations in using programming language instructions)

  2. compiler - translates entire program of source code (actual programming language) into  object code (language computer understands - machine language) , and identifies syntax errors (violations in using programming language instructions)

  1. Document Throughout – provide material that supports the design, development, and testing of the program. Listings of your source code is a type of documentation, so are comments within the source code as well as user manuals.

Return to Top

  1. What you will need to Define the Problem!

Normally there is a Computer Analyst who will develop Problem Definitions for the Programmers.  In this class, I fill that role and give your Problem Definitions in the form of Lab Assignments!

Your job as a computer programmer is to take these Problem Definitions (which I provided in the form of Lab Assignments) and Write the Programs, using QBasic commands.  Most of the commands that you will need are available either in the HTML or JavaScript Tutorials.

But wait, there is a missing step, between Defining the Problem and Writing the Program, that would be Design the Solution.

Return to Top

  1. What you will need to Design the Solution!

The best way to explain the Design the Solution step, is to look again at the Basic Flow of Computers as they apply to programming.  Look at this step as if you were going to get a paycheck, for example.

To write the program, first you must know what the data will be that is needed to create a check.  This data is call INPUT.  Next you need to know what must be PROCESSed or calculated or added, subtracted, multiplied or divided before a check can be printed.  By the way, the printed check is call the OUTPUT, so you may need to decide what the check (output) will look like. 

Most of the commands provided in this file have either Input, Process or Output after them.  This is so when you are breaking up the Program Design in to its fundamental components (Input, Process, Output) then the progression into which command to use becomes a mapping exercise.  Therefore, look for the appropriate commands that map to your Program Design as you go through the Lab assignments.

The programming assignments have been separated into the three Program Control Structures:    

  1. Simple Sequence

  2. Loops

  3. Branch/Selection

This design process can be illustrated either in plain text similar to rewriting the Problem Definition or by using some Design tools, such as: Pseudocode or Flowcharts.  I've provided links to some further discussion on how to develop Pseudocode or Flowcharts, by clicking on either of these two words in this paragraph.

A good source for Flowcharts is Microsoft Visio 2003. This software is available at the AVC library for free.

NOTE: The Microsoft website already has a download with 20 different samples.

Return to Top

  1. What you will need to Write the Program!

            Selecting the Programming Language:

As we stated above, in this class we will be using HTML and JavaScripts as the Programming language to introduce the student to Programming concepts, as well as providing more details as to some of the syntax associated with the respective language.  All languages use Values and Variables in order to assist in Executing the program, to get the desired output.

You will need a Text Editor, such as Notepad, which comes with Window's operating systems, or you can use the Netscape Composer.  However, I don't have Netscape so my Helps may be limited.

The Notepad text editor with Windows can be found under the Accessories program.  Move your Mouse to the Start button at the bottom Left of your Monitor, press the Left Mouse button once, and you should see an All Programs option.  Simply move the Curser over the All Programs option and you should notice that All of the programs installed on your computer listed in a Column. Move the Mouse to the Accessories option and you should see the Notepad program.  Move the Mouse to the Notepad, press the Right Mouse button to create a Shortcut, or the Left Mouse button to Open the Notepad program.

If you created a Shortcut of the Notepad program, you will have to place the Notepad where you would like it.  Some people like all of the Shortcuts on the Desktop, some do not.  My kids make me place all of my shortcuts in my personal C:/DAD directory or folder.  Which ever the case you will need to be able to find the Shortcut when you need it, so don't forget to move the Shortcut to where you can find it.

Unlike some Programming Languages, Notepad does not Execute the code generated by Notepad.  For this class you will be using either Netscape or MicroSoft's Internet Explorer Browser, which actual Translate the code into a form that the computer understands, or Executes the Program Instructions.  More on Programs, Instructions and Execution Instructions below.

Return to Top

bullet

Starting to Program using the Notepad text editor

From the Notepad editor you can perform the following:

  1. To begin a new program, go to the "FILE" menu and click "NEW."

BEWARE - any Program in the Notepad will be LOST FOREVER, if it is not saved!

  1. To save a program, go to the "FILE" menu and click on "SAVE."  Notepad will prompt you for a file name, and once you press enter after entering the file name, and your program will be saved to disk under the file name you provide.  It is recommended to use the name of the programming assignment you are writing, (e.g. MyHomePage).

You will need to add a File Extension of .html at the end of each file you create. This tells the Browser how to Translate the source code (e.g. MyHomePage.html) into object code (e.g. machine language) that the computer can understand.

With the cursor in the File Name box, type in

MyHomePage.html

and press ENTER. If everything went OK, you will receive no error messages, and the word "Untitled" at the top of the Notepad program window will change to "MyHomePage.html", indicating the name of the program.

  1. To save a program under a different name, go to the "FILE" menu and click on "SAVE AS".  Notepad will prompt you for a file name, and once you press enter after entering the file name, your program will be saved to disk under the file name you provided. It is recommended to use the name of the programming assignment you are writing, (e.g. MyHomePage.html).

You will need to add a File Extension of .html at the end of each file you create. This tells the Browser how to Translate the source code (e.g. MyHomePage.html) into object code (e.g. machine language) that the computer can understand.

With the cursor in the File Name box, type in

          MyHomePage.html

and press ENTER. If everything went OK, you will receive no error messages, and the new file name will be displayed at the top of the Notepad program window will change to "MyHomePage.html", indicating the new name of the program.

  1. To load that program again, go to the "FILE" menu and click on "LOAD".  You will need to point to the disk drive and folder that has your .html programs in it, then click to open that drive and folder.  Once you find the the program you want to open, double-click on the program name (e.g. MyHomePage.html).

Return to Top

  1. What you will need to Test and Debug the Program!

You will need either an internet Browser (either Netscape Navigator 4.0MicroSoft Internet Explorer 4.0, or higher, OR Mozilla). The browser will translate your source code into  object code and basically Execute the .html instructions. (NOTE: www.mozilla.com is a Netscape 'like' browser that has an online JavaScript Debugger).

You don't even need to be connected to the Web to see your programs work.  Simply open the Browser, place the .html file name in the Address block and press GO.  The Browser will execute the instructions and display the results (hopefully).  If the results are not as expected, 'debug' your program, use the Text Editor to make the change, SAVE the program again, then REFRESH the Browser to Execute the new / changed

Chapter 7: The text outlines some steps toward debugging HTML code, but in reality every time you write a program, you will have to take a step back and do some fundamental activities to make sure it will work, and also to find out why it doesn't work. Trust me when I say that you WILL get discouraged that your program doesn't work correctly the 1st time. But, you should learn from each of these little set backs and don't get to discourages.  Follow some of the text advise (while not memorizing the steps since these are NOT extracted exactly from what the text has):

  1. Eliminate the obvious, this usually results in a typing error or using a command or instruction that the syntax is not correct.

  2. Look for logical design errors which occurs when you look at the Design (Flowchart or Pseudocode) and make sure your source code maps to the Design.  You may have to change your Design to match your source code, but 1st look for Logical (FLOW) errors.  Since you were suppose to Divide up the Program into smaller pieces, finding the logic errors should be easier.  If your program is one Large clump of code, it's harder to debug.

  3. Make sure your data used in your program is the correct data.  Sometimes, the program works but you are using the wrong source data to get the desired answer, or the correct format on the Web Page.

  4. Look for workarounds, which are ways you can accomplish a desired result but you may have to use another command or instruction that what you had originally anticipated, or you may have to move some data to another place on the Web page to make it look and work better for the user of your page.

  5. It is recommended for beginners to only change one piece of  code at a time and to view or test the results of the change, before preceding to the next change.

Return to Top

  1. What you will need to Document Throughout!

Save your Notes you write down the initial Requirements (Define the Problem), the different Designs (Design the Solution), the different version of your source code, working or not (Write the Program), save the outputs, if printed as well as the copies of your source code, so you can 'desk check and debug' your program when things don't go quite right (Test and Debug the Program) and finally add comments to your code to make sure you can find out what it does when / if you go back to the code at a later time.

Return to Top

 

AVC Online Email Instructor: AVC Online Webmaster AVC Home