Introduction to programming

There's a lot of code. Everywhere

A huge amount of software exists in the world, controlling the systems that enrich our lives. Some code is really obvious, such as operating systems like Windows, web sites, and video games. Some is not so obvious, for example the embedded code that controls our microwave, our thermostat, or our car engine.

The exact format, syntax and usage of different types of code differs greatly, but most share fundamental structures and concepts. In this course, I'll aim to teach you these fundamentals. The particular type of code we'll use in this course is JavaScript, the programming language that powers many web sites and applications. I've chosen this one because it is readily available, and very easy to demonstrate tangible results with, but the aim here is not really to just teach you JavaScript, but to teach you the underlying principles that apply to pretty much every programming language.

What are we doing when we write code?

Regardless of what type of code we write, we write it to control computer systems: this could be because we want to find more information about those systems, give them information/data to process, or give them instructions. In the same way that we can use a language like English, German or Chinese to ask a person questions and give them instructions, we can use a language like JavaScript to ask computers questions and give them instructions.

The computer has to take in this code in some way, read it, and then do something as a result. For the computer to understand the code, it has to be written in the right syntax: the structure of any language is important, for making yourself understood. The syntax of English and other human languages is verbs, nouns, adjectives, etc. The syntax of JavaScript is variables, functions, loops, etc.

The computer will have a piece of software that reads the code you write, works out what to do with it, and then returns a result. This is often called an interpreter, or an engine perhaps. In the case of JavaScript, the interpreter is the web browser you are using. A web browser downloads web pages, interprets the code contained within them (which will usually include some JavaScript), and gives you a web page to look at.

To make sense of this, let's have a quick look at my javascript-gradient-image.html example. This simply creates a drawing canvas on the page using the HTML canvas element, then uses JavaScript to place some pixels on the canvas, in this case, a circle filled with a colour gradient, and a copy of the Firefox logo, which it grabs out of an image file. You can view the source of the example by right clicking/Cmd + clicking on the page and selecting the "View Source" or "source" option.

Compiler: Some languages also need a compiler to run: an application that turns code into a package that can then be run to create an output. Flash is an example of a compiled language — you create some Flash source code, then compile it into a Flash Movie. A web browser with the Flash Player plugin installed can then display this Flash movie, which is its own standalone little block; the source code is no longer readable.

Let's now look at a Flash example to see how this works. Open up my flash example, which is an old advertising banner for my band. If you try to "View source" on the banner, you won't be able to: the code is compiled and locked away.

Interpreted languages are often easier to learn than compiled languages, because with interpreted languages you can just open up the source code and see how it works. You can't do that with compiled languages because the language is converted into a non-human readable form when compiled.

A quick course in Web

The web works like so: when you type a web address into your browser, it sends a request to the server that the web site is stored on. The server then sends the files that comprise the web page back to the web browser, which is on the client, aka your computer.

Exercise: server-side vs. client-side

To illustrate this a bit better, let's look at a basic HTML example, and compare it to a basic PHP example. If we look at the HTML example, we can see that the source code is the same as the code after it has been processed. The PHP however is different on the server to how it is when it has been run in the browser. This is because the PHP is processed on the server and converted to some HTML, whihc is then sent to the browser.

The HTML, on both the client and server:

<h1>This is just simple HTML</h1>

The PHP on the server:

<h1>This is PHP: the current date and time is
<?php print strftime('%c');?></h1>

The PHP on the client:

<h1>This is PHP: the current date and time is
Sat Jan 18 20:17:27 2014 </h1>

Server-side and client languages are no better than each other; they have different uses on the Web. Client-side is for displaying and interacting with content; server-side is for storing data, and providing the right data to the client, based on instructions it is given. For example, when you look at Amazon, you are not looking at a different page every time you look at a product. You are looking at the same page, but with different information inserted into it. when you search for a product using the interface displayed to you on the client-side, a query is sent to a database on the server-side, and server-side technologies find and retrieve the correct data that matches your search, and sends it back to the client to be displayed on the page.

JSBin fundamentals

In this course we'll be typing code into a web site called JSBin - follow the link now. This is a simulation of a web site, all conveniently stored in the same web page, so we can easily add different types of code and see how they will react together.

Normally, to see the same result you'd have to have to create your own HTML, CSS, JavaScript, etc. files, and load the HTML file in the browser. But here we're not interested in the architecture of web sites. We want to explore programming fundamentals as easily and painlessly as possible, so we're going to use this environment to cut out some of the clutter.

A typical web site directory structure, showing index.html and separate folders for style, script, etc.

When you first load JSBin, you'll see two separate "panes" — HTML and Output. We will want to make use of the JavaScript and Console panes, so press those two buttons in the top bar of the application.

You'll see two new panes appear. The JavaScript pane is where we will type in our JavaScript code. JSBin then applies that to the HTML document automatically (normally you'd have to do this yourself, which is harder.)

The console pane is used for checking and debugging your code. Don't worry too much about this for now.

You'll also notice, when typing in code in the JavaScript pane, that it gives you messages to tell you what is wrong with your code. This is rather useful!

When you create a new demo in JSBin, it gives your code a unique web address that you can give to other people to check out your demo. Try my example, at http://jsbin.com/ikuber/2/edit. You can then click the JSBin button in the top left corner, and choose to clone the example, so you can make edits to your own copy, and even download it as a working HTML page.


Creative Commons License
This work is licensed under a Creative Commons Attribution 4.0 International License. Share it, make it better, use it for good.