Welcome to CMIS102

Introduction to Problem Solving and Algorithm Design

My Face This section of CMIS102 will be a normal Face to Face class and we will meet two nights per week.

Before the first class, I recommend that you download and print the latest updated version of the of the Syllabus and other Week 1 materials described below which are posted as PDF files. I highly recommend using the freeware version of PDFXChangeViewer, which allows you to make notes and save them to any PDF file or you could use Adobe Acrobat Reader.

I recommend that you get started with Week 1 content today, by clicking Week 1 in the navigation bar above or scrolling down.

Robert Laurie

Week 1: What is Data?

Week 1 we will focus on understanding data representation. Please read the following handout prior to the first class.

The LEO -Discussions are a kind of collective online discussion. This week you need to utilize five online discussions to introduce yourself and demonstrate that you have learned how to convert between various number systems and codes:

Post your Introduction in the Discussion >> Introductions Topic
Post in the Number System and Codes Conversion Discussion
- Binary to Decimal Conversion
- Binary to Hexadecimal conversion
- Hexadecimal to Binary Conversion
- Convert your name from ASCII to Hexadecimal

These LEO - Discussions exercises will provide you with an understanding of digital data, which is fundamental to understanding How computers work?

The file extension is important in Windows, because it determines which application will open the file. Unfortunately, Microsoft hides file extensions by default, but it is useful to view the file extensions of known file types within Windows Explorer file display pane. File extensions can be viewed by opening Windows Explorer and selecting the menu item
Tools > Folder Options > View Tab.
Find and uncheck the check box labeled Hide extensions of known file types. You will now be able to see the difference between filename.docx file and filename.pdf file.

You must be logged into LEO and then click the Link to the OLI Classroom below from within LEO to access the OLI content.

If you have any questions about the class or assignments feel free to post in the
LEO Discussion > Ask your Professor
or email me at:

Direct Links to YouTube Videos:

Activities

Please post in the five discussions below this week which are due next week at the end of class.

Cyber-Cafe [Optional]

Post your non-course or course related comments or ramblings here. Maybe no one will read them except for me. Computers can be frustrating until you realize they are dumb binary machines and with good software we can fix that. That is what this course is about; How to write good procedural command line software in a programming language.

Introductions [Required]

Welcome to our class! You can enter this Discussion Conference by clicking on the conference title [IntroduceYourself] (above).

Then click the [Start a New Thread] button to post an introduction about yourself.

Enter your name as the thread title (see my example) and then please tell us:

What name or nickname you would like to be called in class and who are you as in what are your passions in life.
What kind of computers you typically use including Operating System? (e.g.Windows 7, MacOSX 10.9, or Linux Zorin 9)
What kind of Office Suite you typically use including software versions. If you don't have or dislike your Office Suite then try
Libre Office and it is the one I use. It is free and works great on Windows, MacOSX, and comes with Linux. Looks the same on any operating system and uses menus and toolbars and not the ever changing "adaptive" ribbon. Comes with offline viewable docmentation for Help and Getting Started.
What is your major field of study?
What are your feelings about computers?
What you hope to gain from this class?

After you have posted your thread then reply to two other peoples threads by clicking on there name.

I look forward to getting to know each of you and working with you this semester.

Week 2: Design and Implementation Processes

The PowerPoint slides and activites wil focus on learning HTML. The HTML language is a document description language and Assignment 1 requires creating three HTML documents and hosting them on a web host. These activities will be your first steps in computer coding.

Please download and print the following two documents in color before class this week:

This week we will be finishing the Number Systems and Codes handout and you need to read Chapter 1 - Introduction to Problem Solving content from the Books 24x7. The Pseudo Code discussed in this chapter is for structured design purposes only and will not run on any compiler or interpreter. Fowcharts are a much better design method for procedural programs. Work through the module reading before class. Please bring a USB Drive to class to store computer files that you create in class and your personal notebook computer.

We made some collective decisions as a class Week 1 and will be using JavaScript as the primary programming language for the class. JavaScript is a modern interpreted scripting language and the program code is typically embedded in an HTML document which then accesses a JavaScript interpreter contained in the browser. JavaScript is an object-based language that shares a common syntax with both Java and C++. It is a relatively easy language to learn with many interesting applications.

A hyperlink to a JavaScript video tutorial is below. This 5 minute content covers content from the next three weeks of the class. We will be taking it slower, but it provides a good overview.
JavaScript QuickStart Video Tutorial

You will need to download and install a text editor or IDE software, which will be used to develop HTML5 documents and JavaScript programs.

I believe you will appreciate the advanced features of Komodo Edit once you become familiar with it.

Komodo Edit is an advanced programming text editor. It has code templates and advanced code completion features for creating HTML documents. The program is open-source and available for free download (Do not download Komodo IDE trial). It is available for all OS's. [win, mac, linux].
Videos are available on YouTube to get you started:

If you would like to try a more advanced graphics editor I would recommend GIMP which is free and cross platform or PIXLR desktop application by Autodesk.

Watch the videos to help you get started writing HTML code using a text editor. As an alternative text editor you could also use Notepad++ featured here if you are a windows user which is used in these videos, but Komodo Edit has more features.

After watching these videos and reviewing Slide Set 2 then do Assignment 1.

For Part B you will need to select colors using RGB codes. You need to select colors that have high contrast between text color and background color. A sites with color samples and RGB codes is: http://www.rapidtables.com/web/color/RGB_Color.htm

Verify your HTML code is valid and works by submitting it to the online validation service at validator.w3.org. If the code validates and displays as you wish then submit hyperlinks for your three HTML files using LEO for Assignment 1 submissions.

A good reference web site is http://www.w3schools.com/tags/default.asp

Please bring a USB Drive that is 1 GigaByte or greater to class this week and every week. It is best if the USB Drive attaches to your key ring so that it is less likely to be lost. You may use the UMUC computer lab during the week to work on your assignments and all computers in the lab have Windows 7 and Microsoft Office 2010.

An interesting way to store and transfer files between computers is Dropbox which is cloud storage. DropBox will also automatically sync files between computers on which it is installed with your account. This is useful if you use multiple non-government computers. It supports Windows, MacOSX, iOS, Android, and Linux. You can also download and upload any files to your Dropbox cloud storage through a web browser. This is handy to access your computer files using a browser through Dropbox website after you login.

Download and install Dropbox to your computer by clicking here. Create a login and password that will be utilized to access your cloud storage using
You will need to select one folder for Dropbox so make it easy to find. I suggest using your My Documents folder. Upon installation Dropbox will create a Dropbox folder within the folder selected.
Create a subfolder called CMIS102_YourName where YourName is your name. I suggest you store all files for the course in this folder.
Using Pancake.io we can use a DropBox folder to host a website as described in the next paragraph.

Pancake.io is a great way to host a free website using the DropBox subfolder located at Dropbox\Apps\Pancake.io
All files placed in the folder will be hosted as a static website and subfolders can be created if you wish. After you have DropBox installed and running on your computer you can create a Pancake.io account. You can then host your web site which can be viewed at yourURL.pancakeapps.com

This week you should host the following files in your dropbox Apps/pancake.io folder:

freedom.html (part A)
combustion.html (part B)
index.html (Part C)

I have created a short 3 minute video about how to setup a Dropbox Pancake.io Web Sever available at http://www.screencast.com/t/lPFiTbJs

Content

Read all Module Readings for this week and take Self Assessment Quiz
Assignment 1: HTML
For assignment, you write the HTML code to create a web site with three web pages. After hosting all three pages on a web host then submit their 3 URL's here. The Assignment 1 Handout by clicking here.

Week 3: Developing a Sequential Program

I added some items to the end of Week 2 for setting up a web site using Dropbox and Pancake.io so please review these items from last week. It is really an easy setup and I would like you to install Dropbox and link to a Pancake.io account. Everyone can then host all their class work.

Please bring your notebook computers and also a USB (Thumb) Drive, which you may need to print items in the UMUC computer lab. Please store a copy of your most recent code to the USB (Thumb) Drive as a backup and for printing and demonstration purposes.

This Week 3 class we will focus on sequential programming structures and you will design and code two JavaScript programs. Please read the Module Reading on Sequential Statements before coming to class and the topic listed in Books24x7 Readings.

Print and read through the following PDF files posted as Assignment 2 and Slide Set 3:

Slide Set 3: Sequential Structure Programming
Assignment 2: Sequential Structure Programs (Due Week 4 class)

Slide Set 3 and the readings describes the program development process to include analysis, design, implementation, and verification. Important concepts are structured programming principles and the use of flowcharts to describe the sequential processing.

We will build on the concepts learned last week by making an HTML document that encapsulates JavaScript program code within the HTML documents as described in Slide Set 3. You will gain practical hands-on experience in program design and implementation phases with Assignment 2.

The videos listed below will help you get writing JavaScript code encapsulated HTML code with a text editor such as Notepad++:

Assignment 1 is due in class this week and you will need to verify your web pages work in the UMUC computer lab. Please bring your code on a USB Drive.

I recommend also installing PortableApps to your USB drive and also the following apps so it can run on any computer windows computer such as in the UMUC Lab.

Activities

For this assignment, you write HTML and JavaScript code to make a web pages that satisfy Part A and B program requirements. After hosting two web pages on a web host then submit their 2 URL's here. Also create links to these two programs from you home page. You can also download Assignment 2 Handout by clicking here.

Week 4: Selection Structures

This week we will focus on the selection programming structure that provides the ability of a program to make decisions based on a True or False criteria. Please read Chapter 3 before coming to class.

Please examine Slide Set 4 and Assignment 3 and create the Program Design document for each part before class this week. Use a word processor to create the Specifications Section, Algorithm Design, and Known Test Data sections. Create input and output displays for desired output for the known test data. Use Yed, LibreOffice, PowerPoint, or another graphics program to make flowcharts. Another interesting option is the Google Chrome plugin draw.io
Make sure that you use diamonds for the flowchart symbol for a selection structure with assertion displayed and two arrows out labeled True or False. Embed the flow chart in your Program Design document or attach as file.

Check your JavaScript code by copying pasting the contents contained in the <script> element to the text area at jshint.com during the implementation process and before submission. Note that not all errors are really accurate for browser JavaScript. Ignore radix errors for parseInt( ) and can be a form of eval errors for document.write( ) .

Use the browser Error Console throughout the implementation process to view errors. This will identify syntax errors as the code is run.

Use window.alert(variableName) to display the value of variables during the implementation process to identify logic errors after all syntax errors are cleared.

Create links to your web pages that contain the JavaScript code for each part of this assignment. Make sure all links work for the program implimentation files. If they do not you will receive a zero.

Print and examine Slide Set 4, and create the Program Design document for all parts of Assignment 3 described below:

Watch these videos before class. which cover how to write JavaScript code encapsulated HTML code with a selection structure:

Week 4 Checklist

Be sure to complete all of the activities for this week including:

Read Books 24x7 topic
Read all Module topic
Review the Pseudocode Reference document
Complete Assignment 3

Do Design Phase before class
Do Implementation Phase after Design

Post any questions in the Week 4 Questions and Comments

Week 5: Repetition Structures

Assignment 3 is due in class this week. Please turn in your design document at the beginning of class this week and provide a working link to each file on Website. I will test your code using your web site. The design document is worth half of the grade so do a quality job.

This fifth week of class we will focus on Repetition Structures which allows your programs to loop. They are often used to process enormous amounts of structured data with relatively little program code. Please read and work through all reading material described below to include Books24x7 and Modules before class this week. We will need to use the Math.random() and Math.floor() JavaScript functions this week in class, which is part of the Math object and will be used to program your guessing game in Assignment 4 Part B.

Please print Assignment 4 and Slide Set 5, before coming to class. The slide sets are posted as PDF documents with four slides per page in color.

Watch these videos to help you get started writing JavaScript code encapsulated HTML code:

Content

Be sure to complete all of the activities for this week including:

Read all Books 24x7 topics
Read though both Modules on Loops
Complete and submit Assignment 3
Work through Assignment 4 this week and submit next week
Post any questions in the Week 5 Questions and Comments Discussion

Week 6: Functions

Programming functions is the focus of Slide Set 6 this week. The assignment submission this week will be more collaborative and you will create three functions in class for the temperature conversion program. Your submissions will be done by posting your link in the Week 6 Discussion: Functions for Temperature Conversions [Required] so that everyone can view them.

Program Functions allows you to break up your code into modules. Functions are defined with a function definition, which specifies what code will be executed when the function is called. A function can be called from your main program, other functions, or GUI events. Functions in programming are really an adaptation of mathematical functions. Hopefully, you have learned algebraic functions in the past. Assignment 4 will be assigned this week covering function programming.

Please print Assignment 5 Final Project and Slide Set 6, before coming to class this week. You may want to take notes on them during lecture. The slide sets are posted as PDF documents with four slides per page in color.

Watch these videos to help you get started writing JavaScript code encapsulated HTML code:

Design and implement a program will convert temperature systems and utilize three functions:

Name your file Temp4-YourName.html
Create at least three user defined functions for

F to C Conversion
C to F Conversion
Entry validation
Display Results

Prompt for which Conversion to perform F to C or C to F?
Prompt for the temperature to convert
Perform the conversion using the appropriate function.
Display both the input value and the results with units.
Display your name as the programmer.

Be sure to provide an overview of what your function is doing as a comment.

We will develop this program in class this week using a flowchart. You simply have to post your working code here. If it doesn't work then please ask for help in this discussion.

For this assignment, you write HTML and JavaScript code to make a web pages that satisfy the Final Project requirements. After hosting your web pages on a web host then submit their URL's here. Also create links to these programs from you home page.

Week 7: Arrays and Event Driven Programming Demo

Before class this week please read the Course Content covering arrays.

Arrays are a group of variables with the same identifier and an index number. They work well with loops to process collections of similar data.

This weeks class will be primarily lecture as we have 28 slides in Slide Set 7. They bring a lot of loose ends together for the course and finishes off with a demonstration of event driven programming using HTML form elements. You will have the option of doing the Final Project as an event driven program. It is important that you examine these slides several times before class and do the reading assignment.

Please print Slide Set 7, before coming to class this week. You may want to take notes on them during lecture. The slide sets are posted as PDF documents with four slides per page for seven pages in color.

Watch these videos to help you get started writing JavaScript code encapsulated HTML code:

As and example of a JavaScript GUI Event program you may want to check out my Risk Game Dice Roller program available here.

Week 8: Project Presentations

This is the last week of our classes. This week you will be doing the talking doing presentations of your final project.

All work must be completed by Thursday this week. Anything completed after Thursday will not be considered when determining your course grade.

It was a pleasure to have you in the class this session and I wish you much success with your education and career development.