These pages should accompany an online programming workshop and chances are high that you are following an online video meeting while trying out some examples by yourself.
Programmers are lazy buggers who leave both of their hands on the keyboard, not touching the mouse if they can avoid it. You can navigate quite well in MS-Windows without the computer mouse using shortcuts which you can enter via the keyboard. If you are participating in the online workshop you will find these shortcuts quite useful:
Alt + Tab : Switch to other window
Alt + Shift + Tab : Switch to other window (other direction)
Win + Tab : Switch to other window
Win + Shift + Tab : Switch to other window (other direction)
Navigate between the tabs of a browser:
Ctrl + Tab : Switch to other tab
Ctrl + Shift + Tab : Switch to other tab (other direction)
Now you can navigate between different application windows without lifting your hands from the keyboard.
But does programming always mean writing text on your keyboard? Alternatives?
Programming with a visual tool like Blockly can help in the understanding of programming and helps a lot when learning to program - not only for kids. If you've tried it out you will notice that programming using Blockly can get tedious and long code is hard to handle.
In this workshop programming means writing code as text. How do you write text? With a text editor of course! So you mean like Microsoft Word? Not exactly! A text editor is much simpler compared to Word.
On MS-Windows you can use Notepad (in the German version simply called "Editor").
Simple text editors on other OS:
Now we have a simple tool to write text and if you have a web browser installed (which is pretty likely), we can write our first simple program:
Enter this simple code in the editor and save it as "hello_world.html".
Look for the file in your file system and start it with a double click.
The folder options in the file explorer are per default set to not show the file extensions on all files. This is intolerable! If you have not done so yet change this immediately! Jokes aside: This is a security hazard!
Windows 7: Open the file explorer and go to "Organize" => "Folder Options" (German: "Ordner- und Suchoptionen").
Go to "View" => "Hide extensions for known file types" (German: "Erweiterungen bei bekannten Dateitypen ausblenden") and uncheck it!
Windows 10: Open the file explorer and go to "File" (German: "Datei") => "Options" (German: "Optionen").
Go to "View" => "Hide extensions for known file types" (German: "Erweiterungen bei bekannten Dateitypen ausblenden") and uncheck it!
Wow! You have written your first JavaScript! Well, purists will probably stone me for that because this is not a proper HTML file. But most web browsers will understand it anyway. So, here is a clean version of the code above:
Let's have a closer look at the last piece of code: We added the file extension ".html" to our file. You most likely have heard of HTML, which is the abbreviation of "Hypertext Markup Language". Most of the internet consists of HTML and the document you are looking at is also written in HTML. So, it's worth having a closer look:
There are parts that are between a "<" and a ">" symbol. These parts are called "HTML-tags".
The first tag is "<!DOCTYPE html>". This tells the web browser that this is HTML. But what else should it be? Actually, this tag is redundant and it's not a big mistake if we ignore it for now.
All the other tags come in pairs: The first looks like "<mytag>" and the second like "</mytag>". You can think of these pairs as of some kind of brackets. The first pair "<html>" and "<html>" brackets the rest of the text.
But back to our first program. Here we see only a single pair of HTML-tags: "<script>" and "</script>". Between these two tags there is the program itself. HTML is a "computer" language but not really a programming language. It is some kind of "MS Word" file for the internet. In 1995 the producers of the Netscape web browser (a predecessor of Firefox) decided, that it would be nice to be able to build "dynamic" web pages. So, they included an interpreter for a new programming language: JavaScript.
The JavaScript code in our first program is only one command:
alert("Hello World!");
The name of the command is "alert". Then follows one argument in parentheses. The argument is the text "Hello World!" and it is between double quotation marks. After that follows a semicolon ";".
A command or call to a function looks very similar in different programming languages. For example, look at this line of code in the programming language C:
puts("Hello World!");
The only difference is the word "puts" instead of "alert".
In the 70s Dennis Ritchie guided us out of the dark age of Assembler to the light of modern programming with C. Then Bjarne Stroustrup introduced us in 1979 to the world of Object Orientation by combining C and Smalltalk to the powerful language C++.
James Gosling followed this path further and gave us the gem stone Java mid-nineties.
And now this abomination of JavaScript even has the audacity to name itself after this masterpiece!
Fortunately, we will not have to endure this hideousness for long. JavaScript will vanish as quick as it spawned!
This summarizes the reaction of the programming world to the introduction of JavaScript. Today it is probably the most used programming language.
So, why did I decide to start this workshop with JavaScript?
Time to look at a bit longer code:
You can copy and paste the text into the editor and save it as "prog2.html" and start it.
If a text like "prevent this page from opening further dialogs" (German: "Diese Seite daran hindern, weitere Dialoge zu öffnen") appears then just ignore it. Don't check the check box.
After the program has executed a blank HTML page appears. For the moment this is ok.
Let us look at the code:
The first line is our script tag as before.
In the second line we call another command (or function as I will call them from here on) named "prompt". This requests input from the user. This function takes two arguments: A text (to be displayed to the user) and a number (which serves as a default value). The two arguments are separated by a comma ",". This function returns something (some information) and we store this information in a new variable named "a".
The third line resembles the second line. This time we present another text and provide another number as a default value and store the result in a variable "b".
In the fourth line we multiply the variables "a" and "b" (using a star "*" as multiplication operator). We store the result in a new variable "c".
Finally, in the fifth line we present the result to the user. This time the argument for the "alert" function is a number stored in a variable.
Time to look at these three "equations" in the code:
On the left side we have the word "var" which denotes that we want to use a new variable. This is called the "declaration" of a variable.
After that we see the variable itself. Then there follows an equation sign "=". On the right side there is the expression which result should be stored in the variable. We can also say we assign the value to the variable.
Declaration and assignment don't necessarily have to be in the same expression or line. The code:
var c = a*b;
...can be written as:
var c;
c = a*b;
...or:
var c;c=a*b;
...or:
var c ; c = a * b ;
Spaces " " or tabs " " are also optional at some positions. They can make the code more readable.
This notation is very close to a mathematical term. If we want to say that "a" is the "cosine" of a certain number, we can write the mathematical expression:
a = cos(3.1415)
The code in JavaScript would be:
a = Math.cos(3.1415);
The function cos is in the namespace Math (1). By writing "Math.cos" we mean that we want to use the function "cos" from the namespace "Math". You can think of the expression "Math." as some kind of "area code" (German: "Telefonvorwahl") of the function.
Let's mess around with the code:
We have inserted a line of code "c = c + 1;" and the result is a number that is higher by one.
It is intuitive what happens here: Take the variable "c", add one and store it in "c" again.
Here it is clear, that this is not a valid mathematical expression! You cannot resolve this "equation" for the variable "c".
This is the reason why the programming language Pascal uses ":=" for an assignment and not "=". Our line of code would look like this in Pascal:
c := c + 1;
There are shorter notations for "c=c+1;" in JavaScript and many other programming languages:
c += 1;
The operator "+=" takes the variable "c" and increases its value by a certain number. There are similar operators "-=", "*=" and "/=". Can you guess what they are doing?
And another new notation:
++c;
This increases the variable by one. After that you can use the variable in another expression. For example:
var c = 1;
alert(++c);
The output of this code is "2". The variable "c" is incremented and then used in "alert".
There is another operator that uses the variable first and then increases its value: "c++".
var c = 1;
alert(c++);
The output of this code is "1". The variable "c" is used in "alert" and then incremented.
Does "c++" look familiar to you? Isn't there a programming language called "C++"?
Find out more in chapter 2!
Footnotes:
(1) Actually, JavaScript does not have namespaces. It just uses objects for this purpose.