CMIS102 • Problem Solving and Algorithms

Week 0This is a hybrid class and we will meet for one class per week and you will need to work through the course material online each week and submit weekly assignments. Most of the content provided covers computing from a programmers point of view to include data types and programming control structures. You weekly assignments will be analyzing a described problem and create a solution algorithm to solve the problem sequentially using a flowcharts. You will learn to convert a flowchart to code to make a working program.

We will learn the JavaScript language which is one of the most popular interpreted languages in use today. The JavaScript interpreter is contained within all modern browsers and easy to access within an HTML document. JavaScript is the primary scripting language used for website development and also the JS in many WebApp frameworks such as: Node.js, React.js, Backbone.js, Vue.js, Hexo, and Gatsby. It is a great choice for beginners because it is loosely data typed and utilizes an interpreter which will abort when it encounters a line of code it doesn’t understand. Please utilize the Google Chrome browser for the class.

You can utilize Scratch to do the flowchart algorithm and you may implement the program solution using scratch. However, the final program should be coded using JavaScript.

I recommend the Visual Studio Code editor for creating writing the code. It is an open-source editor created by MicroSoft and supports many different computer languages with many plugins available.

If you have a question you can ask in class or email me at:

I will post handouts and hyperlinks to videos for the class on this web page which is accessible at the hosting URL
islandman.org/um/cmis102/.

So lets get started…

This is a fast paced course in an 8 week session.

I recommend you allocate approximately 15 hours per week to this course:

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. Windows users can use Adobe Acrobat Reader or PDFXChangeViewer

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?

.This week in lecture we will be discussing the Syllabus, LEO course management system, and investigate Data representation for different number types and character codes. If you enrolled in IFSM201 with me we will expanding coverage in this class to include signed integers, floating point representation for rational numbers, and unicode to write content in any human language. Prior to class, please print and read both PDF files listed below:

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.

Programming can be fun and frustrating at times too, but a good lucrative career. The following video is what my first programming job was like. Computers are much better now.

Watch the following videos to enhance your learning of data representations:

eBook readings that maybe helpful for Week 1

Week 1 Duties

Complete all conversion problems at the end of the document covered this week in class.

Week 2: Program Design and Tools

Bring a notebook computer and USB thumb drive this week and every week for transferring files. This weeks PowerPoint slides and activities will focus on learning HTML5. The HTML language is a document description language and Assignment 1 requires creating three HTML documents and hosting them on your Github pages account. These activities will be your first steps in computer coding. You could do the coding using your editor in GitHub pages or try either of the code editors suggested below.

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

eBook readings that maybe helpful for Week 2

We will be using JavaScript as the programming language for this class so it has the added advantage that all your work efforts can be hosted on a website. I recommend GitHub pages as your free web host. Actually, I use it myself and utilize islandman.org as my custom domain name. If you had me in IFSM201 you can continue using the GitHub account your created and continue developing your website in Markdown or HTML. However, for this week I would like you to experience HTML code for Assignment 1. If you need to create a new GitHub account then please follow along with this Assignment: Create a Website handout that we utilized in IFSM201. I created a sample website at http://iwakunibob.github.io. The YouTube video GitHub Hosting in 5 minutes: Free Static Web Hosting also walks you through this same process.

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 Visual Studio Code has more features and is my recommended code editor listed below. If you get weary of watching YouTube advertisements you may want to try the Brave browser.

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 https://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. I will be validating your code…

A good reference web site for HTML is http://www.w3schools.com/tags/default.asp.
I also recommend working through their HTML tutorial from HTML-Introduction to HTML-Color at https://www.w3schools.com/html/

Course Editor Tools

Visual Studio Code Editor

Visual Studio Code is an open source editor project created by Microsoft and available for Windows, MacOS, or Linux. It can be utilized without being online when writing code and can be used for many computer programming languages. It also integrates well with GIT to synchronize code with GitHub pages.

  1. Download Git above and install
  2. Restart Visual Studio Code
  3. Go to Github.com open repository and click the green (Clone or download) button.
  4. Select Clone with HTTPS and copy provided link.
  5. Go to Visual Studio Code and select from menu View > Command Palette
  6. Type Git: Clone then paste URL when directed. Select any local drive folder or create a github folder in documents.
  7. Your files will now be downloaded and available on local drive.
  8. Change a file and save or create a new file.
  9. Select the Git icon and enter a commit message if desired and return or click check mark.
  10. Select Push from … menu.
  11. The first time you will need to Enter your github UserID followed by password.
  12. You can now edit files locall and then Push files to GitHub cloud storage.

Interesting videos on GitHub and Git

Graphics editors

If you would like to try a more advanced graphics editor I would recommend GIMP which is free and cross platform or PhotoFiltre version 6 which is windows only.

Week 2 Duties

This week you should host the following files in your GitHub pages website and provide links in LEO to these pages as a submission for Assignment 1:

Week 3: Developing a Sequential Program

Please bring your notebook computer 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. Print and read through the following PDF files posted as Slide Set 3 and Assignment 2:

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.

thenewboston - JavaScript videos listed below will help you get writing JavaScript code encapsulated HTML code with a text editor:

Learn the Web - JavaScript Syntax utilizes HTML5 code standards in their code and links to the JavaScript program.

Scratch is a great program for prototyping procedural programs using flowchart methodology. It has great graphical features and can be utilized for the development of your assignments.

Week 3 Duties

Assignment 2 is due this week and you will need to 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 on LEO under assignment 2.

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 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 Scratch, 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.

You should also validate the HTML code using https://validator.w3.org/ and styles using https://jigsaw.w3.org/css-validator/.

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. The error console is available in the Developer Tools of most browsers.

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 implementation files. If they do not you will receive a zero.

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

Week 4 Duties

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 URL’s on LEO. Also create links to these two programs from you home page.

Week 5: Repetition Structures

This week 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 and watch videos 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 before class, which cover JavaScript code with a repetition structure

You should also validate the HTML code using https://validator.w3.org/ and styles using https://jigsaw.w3.org/css-validator/.

Week 5 Duties

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 URL’s on LEO. Also create links to these two programs from you home page.

Week 6: Functions and Arrays

This week we will focus on functions and arrays, which are the last two topics required for the course and described in Slide Set 6. Assignment 5 is our Final Project and has two parts. Part A is the conversion of the Temperature Converter program to utilize two functions. Part B is modification of the casino program to include an additional chip color and IRS taxes on winnings. Part B will also require the use of functions and arrays. Both parts require submission of design documents as well as code. For the final project I would like you to submit your Design documents and actual HTML and JavaScript files.

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 which are used to modularize components of a program. Hopefully, you have learned algebraic functions in the past.

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

Watch these videos before class, which cover JavaScript functions and arrays

Week 6 Duties

Upload your design phases to LEO using Assignment 5 Link. Later you can upload the code.

Week 7: Event Driven Programming using HTML Forms and Functions

This week we will learn about Event Driven Programming paradigm using HTML Form events to call functions. It is a different way to program because multiple form events will call functions. It is not required for the final assignment, but if you have completed the procedural program you may think it is fun and create a GUI or the final assignment.

Week 7 Duties

Week 8: Final Project Presentations

.This is the last week of our class. Our Tuesday class this week will be your last chance to get assistance with your code and final assignment.

All work must be submitted 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 hope to see you all in CMIS141 next term. The CMIS141 course will be covering the Java programming language which will be used for application development. I wish you much success with your education and career development.