Introduction to programming - basic concepts

This guide provides an introduction to programming

1 Basic concepts

The first thing I'm going to explain in these sections on basic programming is what a program is; you can think of a program as a recipe for baking a cake, for example, from its ingredients, through the process of creating the batter to baking it; in a computer program, we have the same elements; therefore.

A program allows for:

1. Data input: It collects input data for processing. For example, through the keyboard or mouse.
2. Processing: The program uses the input information to perform the operations it has been programmed to do.
3. Output: The program returns the result obtained after processing the data.

In our specific case of web development, it could be like the following examples:

1. (Data input) Our user enters through the web browser.
2. (Processing) The program processes what in this example is the input source, the URL, to know exactly what our user wants to see.
3. (Output) The program returns a page that is tied to the previous route.

Another example would be; if we have the following form:

1. (Data input) Our user enters the data in the form.
2. (Processing) The program processes the URL to know what request our user is sending and to know through the URL or route which function we have to call, that is, to know exactly what it has to do, since you can take as a reference that the previous form is tied to a function, which describes other steps or processes to do something with the data that our user is receiving; which can be, for example:
   1. Create or update a resource, such as a post
   2. Filter a list, and so on
3. (Output) Finally, the program returns the requested information through the browser.

A practical example of a function that receives a request from our user through a form would be as follows:

@invoiceProductBp.route('/link')
def process_form():
     form = InvoiceForm()
     form.validate_on_submit()
     if form.errors:
        return render_template('errors.html')
     post = Post()
     post.title = request.form['title']
     post.description = request.form['description']
     db.save(post)
  return render_template('success.html')

Overview of the previous code

In which we see a process of how we can receive a request sent by our user from the browser, in our previous examples, this would be the function in charge of processing our user's request; it goes from obtaining a reference to the form that our user sent, through verifying if it is valid. Displaying an error page in case of errors; in this case, this error page would be the program's output, the rest explained would simply be the processing level.

Then, if there are no errors, the process continues in which we simply create an entity, which can be anything, a contact, a redoubt or in this case for example a post that we then save in the database and finally we output an HTML document to our user.  

In short, what is a program?

A program is simply a set of code instructions, which are written in a programming language and perform a particular task.

Generally, programs usually have a graphical interface or UI, where the user can interact with the program, but there are also command-line based programs.

Programs today not only run on a computer with Windows, MacOS, Linux... but we have a wide range of technological elements that can run programs; such as smartphones or not with Android, iOS, tablets, watches, televisions, video game consoles... in general, EVERY technological device that allows the user to interact with it digitally, has a program or set of programs for that purpose.

A common characteristic of programs is that in order to be executed and therefore used, they must be "loaded into memory", this term refers to the fact that the program has to be in the RAM memory which is the VOLATILE memory of our equipment, EVERY program that is running in the Operating System (OS) is "in memory" RAM.

Steps or parts of an algorithm

Basically, an algorithm in computer science is a sequence of operations to be performed that we define to solve a problem and that we then take to a program like the function I showed you earlier in the previous entry; it is important to note that these operations are executed sequentially, that is, one after the other.

Steps or parts of an algorithm

As we mentioned before, algorithms, like programs, consist of the 3 fundamental steps.

Input: to enter the data with which we are going to work

Process: which is to do the logical operations to solve the task and we take as input, the previous data or those received in the previous step.

Output: finally, the objective of every objective is to solve a problem, and show the result; for this last would be the output phase that shows the response of the same once the execution of the algorithm is finished.

With algorithms we have the steps to follow to solve a problem and of course they have a beginning and an end.

Example of an algorithm

For example, to make a cake; we have the same 3 steps that I indicated before; that is, Start or Data Input, processing and Output:

Start (input elements: ingredients and steps to follow) Add milk to a saucepan Add salt Add flour Mix Serve Bake Output/End (Present)

In the example we saw earlier as data input the route or URL that our user used to get to see that form and the data that he placed in it.

As processing we have, the reference to the form, the validation of the data, creating and registering the data in a structure, which in this case would be a post or a blog entry.

And as output we finally have the response to an HTML page, which can be the error page if we have problems with the data provided or the success page.

2 What is a programming language and some types?

To make a program like the one shown in the previous entry, we need programming languages. Today there are multiple programming languages; they practically come out daily and we have everything depending on what we want to do; but...

What is a programming language?

It can be a bit difficult to define what a programming language is, because it can take many different definitions and all of them are true; so I offer you several key concepts so that you understand what a program is and some of its characteristics:

1. A programming language is a set of symbols, (syntax) and a particular order to guide programming.
2. A programming language is a set of instructions (symbols and syntax) that allows a person/programmer the ability to write so that the computer "understands" and executes these orders to do a task, understand a program.
3. A programming language is a program that allows you to build other programs in writing (through instructions)

Every computing technological device or apparatus requires a programming language to be able to comply with the processes or tasks that they have programmed.

Types of programming languages

To make a program like the one shown in the previous entry, we need programming languages. Today there are multiple types of programming languages; they practically come out daily and we have everything depending on what we want to do:

1. If you want to develop desktop applications we have C#, Python and even JavaScript to name a few.
2. If we want to develop web pages (that is, static content) or derivatives we have JavaScript.
3. If we want to develop web applications (you can see a web application as if it were a  web page but with dynamic content, that is, that is changing and we can manage it in some way); for web applications we have PHP, Python, and even JavaScript etc; but these are the ones we deal with in my courses and therefore they are of interest.

This is not really the classification of types, since the types go a little beyond simply changing from one programming language to another.

Machine language

This is the lowest level language, and it is the one that the machine understands, they are pure zeros and ones, that is, binary, therefore it is not a language that a person in their right mind can program.

Assembly language

This is an intermediate language between machine language and a high-level programming language, which were the ones mentioned above; here we have instructions that are really blocks of commands to perform various operations

High-level language

Here are the most used programming languages today such as JavaScript, Python, PHP, Java, Kotlin, Dart, among others; and they are the languages that allow us to communicate between a person and the machine, therefore, they are the ones we generally use when making our programs.

They are languages that have a set of instructions and a logic that is easier to understand because it is closer to human language.
All these languages need the use of an interpreter or a compiler to be able to translate into a machine language that our computer can understand.
 

3 Main elements of a programming language

We already know what a program is and its relationship with algorithms in computer science as a series of steps to solve a problem, we also saw programming languages in the previous entry, now we are going to see what are the main elements that we have to take into account when programming; the first thing you have to take into account would be the syntax, the syntax or way in which we can program in a programming language, defines the elements of said language and how they are combined to form a program. The typical elements of any language are the following:

• Data types
• Variables
• Operators
• Control structures
• Comments
• Code blocks (Functions, Classes, etc)

We will address all these elements little by little throughout the course.

4 What is JavaScript? and Reasons to take the first steps in programming

JavaScript allows us to add interactivity to our web pages and in a few words convert a static site into something dinamic; for example adding connections with other applications that we make for example in PHP, Python or other services.
JavaScript is the programming language selected to start and take the first steps in programming and learn the fundamentals in any programming language, which we will deal with in the next section; therefore it is the programming language selected in this course to take the first steps in this introduction to the main technologies in web development.

Reasons to take the first steps in JavaScript

Many recommend starting to program with JavaScript because it is quite flexible in syntax, you can immediately see the results of what you have done, and it is not necessary to learn many tools; you do not need to have practically anything installed except a web browser to take the first steps with this programming language; therefore we are going to take JavaScript to teach the most basic things like variables or functions; since in all my JavaScript courses in one way or another it is a central and essential element to be able to do any development.

JavaScript has the following advantages:

1. It is a very simple and flexible language
2. It is fast and stable
3. It is supported in any self-respecting web browser, therefore we can start programming it right away without having anything else.
4. It is extremely cross-platform, since you can run it regardless of whether you are on Windows, MacOS, Linux, an iPhone, iPad, an Android and a long etc.
5. It allows you to work in what is known as FullStack, that is, in the frontend and  the backend; that is, on the client and server side; later we will see what this is.
6. I leave you a reference link for you to take a look and know exactly what JavaScript is for.

We are going to use JavaScript to teach the most basic things like variables or functions. If you want to program interactive elements for a web page, JavaScript is a must.

5 What is a VARIABLE in programming?

Variables are one of the fundamental characteristics of programming languages, they allow access to memory to store and retrieve (that is, we can read or store data) the data with which our programs are going to work.

age = 5;
name = "andres"

They have to have a very specific scheme and this can change depending on the programming language

age = age + 1

Actually, variables are a fairly flexible scheme in terms of their uses and for now I want you to stay with the idea that a variable is simply a software component that we can use to store and read data that can be of various types according to what we saw previously.

Operators

In JavaScript, as in most programming languages, we have arithmetic operators to perform mathematical operations such as adding, subtracting, multiplying and dividing and also to perform comparisons; for example:

1. + Addition. The operands can be integers or real numbers
2. - Subtraction. The operands can be integers or real numbers
3. * Multiplication. The operands can be integers or real numbers
4. / Division. The operands can be integers or real numbers
5. % Remainder of the division

Comparison in programming

Comparison operators are another fundamental element in any programming language and allow us to compare variables, expressions and obtain a true or false value, that is, a boolean:

<    Less than
>    Greater than
<=    Less than or equal to
>=    Greater than or equal to
!=    Different
==    Equal

As you saw in the previous example, with an example of how we can add for example ages, in a unit; the same applies to the rest of the cases depending on the mathematical operator you want to use.

6 Data Types Programming

Data types are simply a mechanism with which we can represent to store values through the variables that we will see later what they are.

So, in most programming languages we have the following data types, maybe there are some more or less depending on the programming language of your choice:

Data types or primitives

1. Numbers
2. Integer types: byte, short, int, long.
3. Real types: float and double.
4. Booleans
5. String

Each primitive type has a different range of positive and negative values, except for the boolean which only has two values: true and false. 

Now, which one to select you might ask; the data type that is selected for a given program will depend on the range and type of values that are going to be stored in each of them and whether they are integers, real numbers, text strings, etc.

In the following table, you can see a representation of the size of the previous primitives; for example for an integer we can represent up to this number that we see on the screen both in the negative and in the positive; therefore, if you want to represent a number that can be in this range, you can use an int.

On the other hand, for shorts we can only represent up to 32,768 in its negative or positive part; therefore if you want to represent for example a cedula number in a country where millions live, you would have to use an int instead of a short, but if you want to represent for example the number of tomatoes that a person has in their fridge, you will most likely be fine with a short; and so on for the rest of the cases.

Control structure in programming

Control structures are the mechanism we have in programming languages to break the basic or sequential flow of the instructions that we define in our program; we can for example use conditions like "If this is met then do this" or "If this is not met do this other" or create really complex conditions; for that we can rely on the operators that we saw before since basically what we evaluate in these conditions are true and false conditions.

There are also control structures in which we can establish conditions or rules such as "Repeat this while a condition is met" which again this condition is simply a state, which can be true or false; in other words a boolean.

Control structures: if to make conditionals

The if is the control structure par excellence, it allows us to make decisions according to a condition to be evaluated; its definition looks like the following:

if(condition) {
  ...
}

If the condition is met, that is, its value is true, then everything we put between the braces will be executed; which can be anything, any instruction we have seen up to this point and many more; we can even put another condition, that is, another conditional or if; for example:

var bool = true;
n=0
if(bool) {
  n = n + 5
}
n

But what if our bool is not true:

var bool = false;
n=0
if(bool) {
  n = n + 5
}
n

Control structures: if-else

Now, what if we also want to determine "if this is met then do this" or "if this is not met do this other"; that is, create a flow both if the condition is correct and if it is not correct; in this type of situation we can perfectly use another type of structures known as the if-else

n=0
if(bool) {
  n = n + 5
} else {
  n = 2
}
n
age = 21
ofAge = false
if(age >= 18) {
  ofAge = true
} else {
  ofAge = false
}
ofAge

Control structures: nested ifs

We can chain the conditional structure to ask for several conditions; we can create as many nestings as we want; as you can see in this example we have a nesting to ask to know if the person is a minor; as you can see we have two conditions in a single conditional structure which would be the whole body that you can see.

In short, to create a nested if or nested conditional, we have to use the else if structure and we can create as many of these structures as we want, as we need.

status = ""
age = 12
if(age < 12) {
  status = "You are a child"
} else if(age < 18) {
  status = "You are a teenager"
} else {
  status = "You are an adult"
}
status = ""
age = 12
if(age < 12) {
  status = "You are a child"
} else if(age < 18) {
  status = "You are a teenager"
} else if(age >= 18) {
  status = "You are an adult"
} else if(age >= 60) {
  status = "Third age"
}

Logical operators and conditions in programming

Now, what if you want to evaluate more than one true and false condition in a conditional; for example, suppose you want to ask if a person is of legal age and is a man or a woman:

age = 21
woman = false
adultMan = false
For now we have the following:
if(age >= 18) {
  adultMan = true
} else {
  adultMan = false
}

But how can we also put that we need the person to be a man, for example; for that we can use the logical and operator in JavaScript and it is also supported in any programming language that we are going to see in this course but in some its definition changes a bit; that is, for example to represent the and operator in JavaScript it would be to put the sign known as et twice; that is && and we have something like the following:

if(age >= 18 && woman == false) {
  adultMan = true
} else {
  adultMan = false
}
adultMan

And here we are asking that the age be greater than 18 and that the person be a man, therefore with one of them being false it is enough that the previous condition is not met.

On the other hand, if we want to make a slightly more flexible structure and we are simply interested in it being either a man or of legal age; as you can infer from the context, with only one of them being true, it is enough for the condition to be met; for that we have the or operator in JavaScript or in any programming language; it is represented by the character ||:

if(age >= 18 || woman == false) {
  manOrAdult = true
} else {
  manOrAdult = false
}
manOrAdult

Complex conditions

Now, what if you need to make more complex conditions; you can perfectly define as many logical operators as you need; for example:

age = 21
woman = false
manOrAdult = false
thirdAge = false
if(age >= 18 || woman == false && thirdAge) {
  manOrAdult = true
} else {
  manOrAdult = false
}
manOrAdult

Control structures: switch

Undoubtedly the conditional structure, that is, the if, is the most used control structure today; but as you can realize, when you have multiple conditions a conditional becomes impractical; due to the poor readability of the code for these cases there is the structure called switch which allows grouping a set of expressions in a more simplified way:

switch(day) {
  case 1: dayOfWeek = "monday."; break;
  case 2: dayOfWeek = "tuesday."; break;
  case 3: dayOfWeek = "wednesday."; break;
  case 4: dayOfWeek = "thursday."; break;
  case 5: dayOfWeek = "friday."; break;
  case 6: dayOfWeek = "saturday."; break;
  case 7: dayOfWeek = "sunday."; break;
}

As you can see, instead of evaluating repeated conditions for the same entity, we simply put the value, which can be anything and as complex as you want; in this case we are simply evaluating what day it is from a numerical representation of the day of the week; but maybe you are interested in evaluating texts, booleans, or complex conditions like the one we dealt with in previous videos.

The use of break may sound a bit familiar to you; which as its name indicates is a reserved word that we can use to break with the rest of the execution of the block or in this more specific case of the control structure; therefore when it finds a match for the value we are comparing it will simply stop the execution of the rest of the switch block.

7 Control structures: for to make loops 

From here we finish the conditional blocks and enter another universe in which we see how to create loops, that is, a control structure that allows us to repeat the same instruction or the instructions that define a finite set of times; the ones we specify; its use is very structured and is as follows:

for(initialization; condition; update) {  instruction 1  instruction 2  ...  instruction N } 

1. In the initialization phase we have to put what will be the initial value of a variable that is in charge of keeping the record of the iteration that is being carried out and that is incremented in the update phase.
2. The condition specifies the stopping condition; that is; when it is not met (returns a false) the repetition of the for simply stops.
3. The update phase is the update of the value that we do for each iteration to the variable that we initialized in the initialization phase.

Example of for

The traditional example of a for looks like the following:

n=0
for(var i = 0; i < 5; i++) {
  n=n+1;
}
n

Shortened way of adding a unit to an element

n=0
for(var i = 0; i < 5; i++) {
  n++;
}
n

For loops or loops in general are quite useful when we have collections to iterate, which we will see later what these collections are; but abstract a little, and suppose we have collections of elements, which can be posts, products etc, it all depends on the purpose of the application you are building, you have a set of values that you want to display in some way; for example, in our case of interest which is web development, you have 3 values for which you want to build a list like the following:

Perfectly with for loops you can repeat the instructions that allow you to build one of those boxes given this set of values; but we will deal with that later.

Now another example; what if we add the value of i:

n=0
for(var i = 0; i < 5; i++) {
  n=n+i;
}
n

Now we are going to do another example using the console.log function; at this point we have not seen what a function is but you can see it as if it were simply a block with a set of instructions that does some particular operation; for the case of console.log it would be to show a message in the console:

for(var i = 0; i < 5; i++) {
   console.log(i);
}

And in this way you can see the value of i more effectively.

Control structures: while loop or loop

The while structure is similar to that of for, but a little cleaner and we simply define the condition that indicates until when the loop or cycle will be executed; as you can see, if we start from the for in which we had three phases, the initialization phase, the condition phase and the update phase; here we only have one phase, therefore, the rest of the phases we have to carry them out manually in some part of our code; the while offers us a more flexible structure than the for, although in web development, since we always have a finite set of elements that we want to work with, generally the structure that the for offers us is better:

var n = 0
 
while(n < 10) {
  console.log(n);
  n++
}
var n = 0
 
while(n < 10) {
  console.log(n);
  n = n + 2
}
var n = 10
 
while(n < 10) {
  console.log(n);
  n = n + 2
}

Control structures: do while loop or loop

The do while is basically the same while only that the condition is evaluated at the end of everything, and with this we are guaranteeing that at least the instruction or instructions are executed once; starting from the previous exercise:

var n = 10
while(n < 10) {
  console.log(n);
  n = n + 2
}

Which we remember that it was not executed since n is equal to 10 therefore it exceeds the one of the condition that we put in the while; but if we convert it to a do while:

var n = 10
do{
  console.log(n);
  n = n + 2
}while(n < 10) 

You will see that the instruction is executed at least once regardless of whether the condition is initially true or false; therefore, if you need this kind of behavior in your program, the do while is your choice.

8 Use of functions in programming

Functions are one of the fundamental pillars in any programming language and in JavaScript it is no exception; it allows executing a set of instructions to perform a task, calculate a value and in a few words we can easily reuse a set of instructions through the use of functions.

To create a function we have to use the reserved word function followed by the name of the function and to indicate the name of the function you have to take into consideration the same aspects that we talked about when we defined the name of a variable, not starting with numbers, not using special characters, spaces, etc:

function multiply() {
  console.log(5 * 2);
}

Here we simply create a function called multiply that is in charge of multiplying two values; then, if for some reason in life we need to multiply 5 * 2 multiple times in our program, we can perfectly create a function; but notice that we have only declared it, but for the moment it has not been executed, that is, the operation or set of operations, understand instructions that we define in it have not been executed; to execute the function we simply have to put the name of the function and the parentheses:
multiply() 

9 Comments in programming languages and HTML

Comments are the mechanism we have to leave annotations in our program, and the character or set of characters that we can use varies depending on the programming language we are using; in JavaScript they are represented by a pair of consecutive slashes (//) to place comments on a single line.

and in the following format to make multi-line comments, comments have many functions; but their main objective is that they allow us to leave annotations or help other programmers or ourselves who are working with our code in which we explain what the objective of what we are doing is.

Comments are simply one or multiple lines of text that when compiling or interpreting the code the compiler or interpreter ignores.

This is basically how any compiler works today, which basically allows translating from one language to another; in our case of interest, from a programming language like Java, C, C++, etc to machine language, that is, to a binary; pure zeros and ones which is the only thing our computer understands; therefore, in practice, when the compiler these //, it simply does NOT take them into account, they will NOT be part of the compiled or the binary code generated by the compiler.

Examples of comments

Multi-line comments

In most programming languages, we can define multiple lines of comment using /**/; in JavaScript, Kotlin, Java... they work based on this scheme:

/*
This is a comment
On several lines
*/

In Python we can use the following scheme:

"""
This is a comment
On several lines
"""

Single-line comments

The traditional or simplest would be to place comments after the two slashes:

// Single-line comment, we use it in JavaScript, C, Java...

And in Python we have to use the number sign # instead:

# comment in Python

Comment in HTML

In HTML, being a tag language (and not a programming language), things change a bit and we can create multi-line comments in the following way:

<!-- 
HTML comment 
We can put as much content as we want
-->

10 Arrays in Programming

Functions are one of the fundamental pillars in any programming language and in JavaScript it is no exception; it allows executing a set of instructions to perform a task, calculate a value and in a few words we can easily reuse a set of instructions through the use of functions.

To create a function we have to use the reserved word function followed by the name of the function and to indicate the name of the function you have to take into consideration the same aspects that we talked about when we defined the name of a variable, not starting with numbers, not using special characters, spaces, etc:

function multiply() {
  console.log(5 * 2);
}

Here we simply create a function called multiply that is in charge of multiplying two values; then, if for some reason in life we need to multiply 5 * 2 multiple times in our program, we can perfectly create a function; but notice that we have only declared it, but for the moment it has not been executed, that is, the operation or set of operations, understand instructions that we define in it have not been executed; to execute the function we simply have to put the name of the function and the parentheses: multiply() 

Array indexes

As we saw before, to access a particular element, it is enough to put a numerical value; for example:

cars[0]

This number is known as an index and with it we can access ALL the elements of the array, to access the first one, we have to put or use the index with a value of zero, the next one would be one:

var cars = ["Corona Car", "Fier Car", "Safari Car", "Car"]; 
cars[1] // here you access "Fier Car"

And so on for the rest of the elements.

Extra: Two-dimensional array

As I was saying, there are multiple types of arrays, although matrices are not a scheme that you are going to use as much when developing most of your web projects, we are going to see a little how all this works.

If as we have seen up to this point, an array is simply a list of elements, something sequential that goes in only one direction, then a two-dimensional array is an array of arrays, that is, an array with two dimensions (like a spreadsheet); and here we have a very important point and that is that we can define multiple dimensions to an array, although again, in web development, we rarely need to use multi-dimensional arrays.

Array size

As with single-dimensional arrays (the ones presented above), we can present the size we want the array to have, whether it is dimensional or not; for example:

matrix = [5][5]
* * * * *
* * * * *
* * * * *
* * * * *
* * * * *

In this case we would be creating a two-dimensional array of size 5x5; if we want a one-dimensional array of size 5:

matrix = [5]
* * * * *

Two-dimensional arrays in JavaScript - Matrices

This to cite all this a little theoretically, in JavaScript, we can create two-dimensional arrays in the following way:

var matrix= [1, 1, 2, 3, 5, [1,2,3]];

In this case, we are simply creating an array, where one of its elements has another array; therefore, to access for example element 1:

matrix[0]

Or the array within the array:

matrix[5]

And we specify a particular value; for that we follow the same order, of specifying the index; for example, to access the last element:

matrix[5][2]

11 Objects in programming languages

In a real world a car is an object, a table is an object; and in JavaScript we have ways to represent this class of structures.

Objects in JavaScript are an approach to the classes that are supported by other programming languages with PHP or Python but much simpler.

If we analyze a real-world object, like a car, we will see that it has common characteristics and that allow us to discriminate by different types; for example.

A car has a brand, it has a model, it has a weight and it has a color; to name its most basic elements. we in JavaScript can simulate this behavior through objects.

To create an object in JavaScript we can do it in the following way

var car = {brand:"Fiat", model: 5000, color: "White"}

As you can see, it is a very simple structure and it seems that we have a variable that contains variables; but if you look at the assignment that we do internally it changes, we no longer use the equal sign but the colon, because now we are working with an object and not with variables.

So starting from the previous object, to access for example the name of the car 

car.brand

As you can see, we simply access the object called car and it would be the attribute, which is how each of the variables or pseudo-variables that is contained within car is now known; for the rest everything remains exactly the same, depending on the data type of these attributes we can do some operations or others, such as adding, subtracting, etc.

We can also access each of its attributes to update a value:

car.name="corona"