Skip to content

Introduction to Programming

Note

We will be focussing on two major themes during the semester, designing a program and then getting it to work in a real programming language.

Program Development

  1. After making sure the specifications for the program are understood correctly, then plan your program
    • List of Input Variables
    • List of Output Variables
    • Processing Checklist
  2. Develop a testing strategy
  3. Code the program in JavaScript, working in "versions"
  4. Run the latest "version" of the program on the computer and fix any problems
    • Repeat Steps 3 and 4 above until the program is completed.

Steps in Program Development

Note

We'll do this full process later in the course.
  1. After the program's specifications are understood:
    • Create a list of the input variables to be used in the program
    • Create a list of the output variables to be used in the program
    • Create a list of the processing steps that the program will need to take to create the required output
  2. Outline the solution more precisely, considering now in more detail:
    • the major processing steps
    • the major subtasks
    • the user interface
    • the major control structures
    • the major variables and record structures
    • the program logic
  3. Develop the outline into an algorithm
    • Expand the outlined solution into an algorithm
  4. Test the algorithm for correctness
    • Develop a testing strategy and test the algorithm
  5. Code the algorithm into a specific programming language working in "versions"
    • Code the program in JavaScript, one "version" at a time
  6. Run the latest "version" of the program on the computer
    • Find and fix any problems with the current "version"
  7. Document and maintain the program
    • We'll be documenting our code all along, not just at the end.

Program Design Methodology

meth•o•dol•og•y:

noun ( pl. -gies) a system of methods used in a particular area of study or activity : a methodology for investigating the concept of focal points | courses in research methodology and practice.

There are different approaches to program design and there isn't one correct way of doing it. Here at Madison College you will be introduced to several of the different methodologies. Here are some of the common ones (don't worry about the details of these different approaches at this time):

  • Procedure-driven Program Design (or Procedural Program Design)
  • Event-driven program design
  • Data-driven program design
  • Functional program design

Procedural vs. New Methodologies

Procedural programming is an older style of software development that has mostly been replaced by Object-oriented programming (OOP) and functional programming. All the major web development environments, including PHP, .NET, Java, and JavaScript use the OOP way of thinking and working. Newer systems sometimes use the functional programming approach. Most of our curricula here at Madison College teach OOP. In this course we are concentrating on learning the fundamentals that precede learning OOP and we will be getting a gentle introduction to OOP from time to time during the semester.

Source Code:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function demoFirstJavaScript() {
    // DEMO CODE STARTS AFTER THIS LINE:

    // We put variables up here before anything else.
    let name;
    let count;

    // We assign data to the variables.
    name = "Fred";
    count = 10;

    // Once all of our variables are declared we can start
    // our logic code.

    document.write("Hello, " + name + "!");

    /*
       It's good to have lots of lines like this that
       explain our code. For example the next line of code
       puts an HTML line break tag on our page.
    */

    document.write("<br />");

    document.write("Your count is " + count);

    // The next line of code is what we call "Commented out".
    // This means that we don't want it to run but we don't
    // want to delete it.

    //alert("Yo, " + name + "!");

    // END OF YOUR CODE
}

Demo Output:

Explanation:

We're just looking at what our JavaScript code will look like.

Demos

  1. Demo: First JavaScript
    • unit01/demos/demo-javaScript-code.html