1.1 - What is a Program?

A program is simply a collection of code which is executed by the computer, which cases some change in the inner workings of the computer. This is usually observed by some visible change on the computer screen.

Everything your computer does is running a program. Firefox is a program, a web browser which can display content from the web. Word is a program which displays text that you have typed into its editor. Even your operating system (such as Windows or Mac OS) are programs that are being executed by your computer.

Writing a program requires knowledge of the language that the computer understands. This can be very, very tedious to learn and write. However, over the past 50 years high-level languages such as Python, Java, C++, and Javascript have been developed to help make the process of writing programs easier and more manageable.

The language we are going to be using for this course is JavaScript. This language is executed in your browser, and is likely responsible for most of the interactive webpages that you use on a daily basis.

Learning a programming language is a lot like learning another human language: You need to learn the syntax and semantics of the language before you begin to make sense to others who speak the language. Luckily, visual programming environments reduce the overhead of learning these ideas.

We are going to be using a system known as Blockly to write our programs to begin with. You can see the environment below. Blockly breaks down the syntax of the language into a set of blocks which can be connected in multiple ways in order to create a working program. We will see later in the semester how this gets converted into text the computer understands. But for now, this will be our only interaction with the underlying language.


1.2 - Welcome to Turtle

Turtle graphics are a mechanism that was developed in the 1960's, and are heavily featured in Computer Science education. You will unlikely be seeing this out in the wild after you leave this course, but it is a very good environment for learning the basics of programming.

For now, our programs will be a linear set of blocks which are placed one ontop of another. A turtle program will always begin with the block, and will end with the block. The following is the most simple turtle program we can write:

And pressing the "Run" button will produce the following output:

When you create a pond, a Turtle is created at the center of the pond. It will always start out facing directly to the right. The Turtle's tail has been dipped in ink, so any movement of the turtle will leave a trail of ink, allowing us to draw. From this spot, we can add new commands to our program by placing them between the create and close blocks. For example, the block allows us to command the turtle to move forward through the pond. We simply need to type in an amount to move the turtle forward where the 0 currently exists in the block.

Which will create the output:

Another command that we can execute is the command. This command forces the turtle to turn left by the number of degrees specified on the block. In this case, the turtle will turn left, and will end up facing north.

Produces the following pond. Pay attention to the arrow representing the turtle.


1.3 - Order of Operations

The important thing to realize about programs is that the sequence of events is always a linear progression through the program. Create Pond will always be executed first, followed by the block directly below it, followed by the block directly below that, and so on until it finishes with the Close Pond. This means that the following programs produce two different results. Think about what each program will create, and then try each of them below to verify your assumptions.