WETechnology moves so fast doesn’t it? Programming used to be for socially awkward bearded people who didn’t have a girlfriend, now it is essential enough that we need to teach it to the next generation.
On the face of it, programming seems to be a very alien concept, that is very hard to understand. But stick with me here, lets cover some basic programming concepts, and hopefully you will feel more confident to take your first steps into programming!
TL;DR
This article will introduce you to the basic concepts of programming, using the JavaScript language as an example. It is fairly detailed, but will walk you through the basic concepts you need to know to take your first steps into programming.
I don't expect everyone to understand everything upon first read, but by running the examples and referring back to it, it will answer some of your questions and help you fill in the blanks.
Programming Languages
There are a huge number of programming languages in existence, each one with its own use case, tools, syntax and quirks. But generally, the concepts of how they all work will be the same, so once you can program in one language, it’s not hard to turn your hand to another.
Learning How to Learn
No-one can know how to do everything with a programming language or know all the syntax. Part of being a good programmer is knowing how to use the documentation, where to read about techniques, and where to get help when you are stuck.
As a full time programmer myself, looking at my web history over the past week, I have access over 100 different web pages relating to how to do something.
Let’s Get Started!
In this article, we are going to be using a language called Javascript, you have probably heard of it, but might not know much about what it is for and what you can do with it.
Compiled vs Interpreted
Firstly, Javascript is not really a programming language per-se, it is what we would call a Scripting Language, the difference between the two is that a program language is “compiled”, i.e. turned into something your computer can run at build time, whereas a Scripting Language is compiled into machine code at run time, we would called this “interpreted”.
The effect of this is that with interpreted languages, you can view the original source code, whereas with compiled languages you cannot. Generally interpreted languages are slower than compiled languages as the computer has to compile it each time it is run, rather than being precompiled, but it also means they can run more easily on different platforms, as each different type of software (e.g. Windows or MacOS) compiles it for its own machine.
With a compiled language, you would have to compile machine code for each platform producing a different file for each.
What is Javascript?
JavaScript is the scripting language of the web, its primary use is to enable websites to be dynamic, e.g. things to happen on the page after it has loaded.
Take for example a website that has an image slider at the top of the page such as our very own UK Safer Internet Centre website. When you arrive you are shown a big image at the top of the screen which slides over to reveal another after a certain length of time, and there are some dots underneath which you can click to manually navigate to a specific slide. This is all controlled with JavaScript!
Programming Concepts
Ok, so we have the background, now let’s dive into the concepts.
Variables
To be able to do anything in programming, you first need to be able to store information, we do this with variables. Variables have a symbolic name, and a value, which can be any one of a number of types
If a variable doesn’t exist yet, some languages require you to initialise it when you first set its value, in JavaScript we do this with the var keyword, so let’s create our first bit of JavaScript, a variable that contains a string:
var myFirstVar = "hello world";
What this code says is create a new variable (var), called myFirstVar and assign a value (=) to the string "hello world".
Also notice the semi-colon after this statement? This is called a line terminator, and is used to tell the computer were each command ends. In some languages, white-space is significant, meaning that spaces, line breaks and tabs have syntactic meaning.
For example in Python, each command is terminated with a line-break, and control structures use tabs to determine its structure. But in JavaScript, white-space is not significant, so we need to indicate where each command ends with a semi-colon.
To set the same variable to another value, do the same but without var in front of it.
Variable Types/Primitives
There are number of different variable types in programming, and the implementation of these varies from language to language:
- String - Contains text, must be contained within ""
- Integer - A whole number, is written without quotes like var int = 5;
- Float/Double - A floating point number, e.g. var float = 3.14;
- Boolean - Stores either true or false, write without quotes, e.g. var bool = true;
- Array - A variable that contains a number of different values, usually accessed with an index, a number starting at (usually) 0 and ending at the number of items in the array -1, e.g. var arr = [“hello world”, 5, 3.14]
- Object - A more complicated structure that has variables attached to it, and upon which methods (functional blocks of code) can be run (more about this later)
- Null - Some languages have a concept of a nothing value, normally called null, in Javascript there are two, null and undefined, null meaning nothing, and undefined meaning the variable you are trying to access doesn’t exist
Actually in JavaScript, there is only one primitive type for storing a number, and it stores it as a double-precision value with a range of -(253-1) to (253-1), with a floating decimal point. Also in JavaScript there is no Array primitive, an array is a type of Object.
Don’t worry too much about the specifics of their implementation for now, as you use variables you will discover what types you need for different code and what their specifics are.
Expressions and Operators
We have created some variables that contain our data, now we want to actually do something with it! I have always wondered what 5 add 5 is, let’s write some code to work it out for us:
var ten = 5 + 5;
What we have done here is create a variable ten, and assigned a value that we calculated. Here we would say that we evaluated an expression, an expression is something that is calculated to produce a result, and to do that we used an operator +.
There are all sorts of different types of operators, there are arithmetic operators such as that above, as well as comparison operators, assignment operators (Hey we already used one - =), and more. Look at the JavaScript documentation page on operators to see them all.
Flow Control Statements
Now we can make the code do something with expressions, we need to be able to control the flow of our program, so we can run different bits of code depending on certain values. For that we need a flow control statement, the most basic of which is the if statement:
var isTen;
if (5 + 5 == 10) {
isTen = true;
} else {
isTen = false;
}
Using the same expression as above, here we are using an if block to determine if 5 + 5 is equal to 10.
To explain further what is happening here, the if statement accepts a Boolean value to determine whether to enter the first block of code or the second. The expression 5 + 5 is compared to 10 using a comparison operator == which will return true if the values on either side of the expression are the same.
Note that JavaScript is a loosely typed language, meaning a variable doesn’t have to stay as the same type of variable once it is defined, so you could assign a variable as a number, then reassign as a string, which strictly typed languages do not let you do. In the above code the expression we evaluated in the if statement produced a Boolean, but in a loosely typed language, if the expression doesn’t return a Boolean, it will be implicitly converted to a Boolean, so for example:
if ("hello world") {
// hello world was converted to a Boolean, and evaluated as true
}
if ("") {
// this block wouldn’t be entered, because an empty string converted to a Boolean evaluates to false
}
This means we don’t always have to make expressions that result in a Boolean, if ("hello" != "") {} is the same as if ("hello") {}.
For more on flow control statements and to read about what will be implicitly converted to false (Falsy values), read the JavaScript documentation on flow control.
Loops and Iteration
Often you want to do the same thing to lots of different bits of data. instead of writing the same code over and over again, we can use a loop with a iterator to do the work for us:
See the Pen Loops and Iteration by Will Earp (@hexydec) on CodePen.
Cool! That code is shorter, and it will still work if we add more items to arr. There are types of loop in javascript: for, while, and do .. while. You can read more about loops and iterators in JavaScript here.
Functions
Functions are blocks of code that encapsulate a list of variable assignments and expressions to return a result, you can also pass variables to them to get them to do something with your data.
Why? Imagine you needed to do the same thing over and over again, but you didn’t want to have to write the code over and over again. Here is an example of a function and how to execute it:
See the Pen Javascript Functions by Will Earp (@hexydec) on CodePen.
There is much much more you can do with functions, but at a basic level this is all you need.
Objects
Lastly let’s put everything we have learnt together and cover a brief overview of objects. Objects are a more mature way of structuring your code into data models that have data properties (like variables) attached to them and can do something with that data (like functions).
In programming you have the concept of classes, this is like a template for an object. An object is an instance of a class. Take for example if we had a class of a dog, a dog has properties such as breed, age, and name. And it can do things such as sit, walk, eat, and bark, these are called class methods, they are essentially functions you can perform on the object:
See the Pen Javascript Class Example by Will Earp (@hexydec) on CodePen.
In JavaScript this is quite a new way of making classes, but brings it in line with the syntax of many other languages. JavaScript implements function classes, where you just make a function, and create an instance of it with the new keyword.
Read more about JavaScript classes here
Conclusion
If you have made it this far then well done! You are taking your first steps in the amazing world of programming.
I appreciate there is a lot to take in here, but I wouldn’t expect anyone who hasn’t done any programming before to understand every single bit of detail in this article.
I suggest you just give it a try, and you can use this article as a reference to help you if you get stuck. Some of the above examples are published on codepen, so you can click through and see the code in action!
