When we say Top-Down, we mean that we will start with a goal.
Even if the goal is very far away, we will use it as a compassing for pointing to the truth north, so we can get there.
Our goal is to build an advanced calculator.
This calculator is advanced in the sense that not only can it handle more formulas than what a regular calculators could, it can also be used and embedded by anyone who wants to provide calculators on their site for some specific formulas. For example:
and any other sorts of “calculator” that you can think of, that you might want to create fairly quickly and easily to get it working on your website.
We might even be able to use it as a mini spreadsheet. Yeah think of a mini-spreadsheet, which might give us a good mental model of what we are trying to do.
Chances are – we will not finish building this calculator inside this module, but we can work toward it.
For this course, we are assuming that you know the following:
- Some HTML. Hopefully you have at least created HTML with a WYSIWYG editor before, if not manually crafted one.
How to Write Your First Program
Since the assumption is that we don’t know anything at all, we have to start from the very basics. In programming, the easiest thing to do is usually try to print out something. We call this the “Hello world” program, meaning that it’s a program that prints “Hello world”, i.e. announcing itself to the world that it exists.
Okay so let’s get started!
It’s obviously harder on mobile devices even though they also have a browser. Programming is much easier with keyboards as you’ll be typing A LOT.
You can use any browser. As of 2017, I personally find Chrome’s developer tool easiest to work with, so I’ll be showing you in Chrome, but Firefox and Safari also work well (Edge is still a bit lacking). Things change fast in the web world though, so perhaps this will be updated in the future.
(Don’t type the
>, which is the prompt. Just type what’s after the prompt)
You should see the console prints something like the below back to you
Go ahead and type in another number. 2, 3, 50, 100. And you’ll see them print back to you as well.
Don’t try to go too fast though. People get lost in programming because they try to move too quickly without having solid foundations. So don’t go crazy in trying to use it to type in whatever you want just yet.
Let’s take things a bit slower.
In more “technical” terms, what you are seeing is something called a “REPL”, which stands for the 4 steps that the program does:
- Read – reads what you have typed in. If you haven’t typed in anything (and pressed ENTER), wait until you do.
- Eval – evaluates what was read and attempts to run it.
- Print – gets the result of the evaluation and “prints it out”, i.e. displays on screen.
- Lloop – repeats from step 1 again.
Okay, so let’s get back to our learning here. You have discovered the power hidden inside your browser, and you have successfully typed in numbers and have them printed out. But now you remembered that we are trying to write a “hello world” program, but right now we aren’t printing out hello world yet.
So go ahead and type the following into your console (again, remember not to type the prompt).
> "Hello world"
Voila – you now see “hello world” printed back at you! Mission accomplished!
Well – let’s take it a bit further. Instead of the above, type:
> hello world
That’s right – without the two double quotes, and let’s see what happens.
Ah – your browser now gives you something like
x Uncaught SyntaxError: Unexpected Identifier
Congrats – this is your first error message (unless you have been running ahead and experiment, of course).
What happened here? Why did it work with quotes, but gives back this error message that you don’t understand yet without quotes?
"hello world" (with the quotes), you are typing in something called a
rint step what you have typed in).
world, and understand them as something called
identifier is like a street address. It’s a piece of information that you can use to lookup the actual content. (think of it this way – your home address tells people how to get to your house).
But wait, we didn’t get an unknown identifier error, we got an unexpected identifier error – are they the same thing?
Good catch, no they are not the same thing. Try to type the following into REPL again:
This time you should get something like
x Uncaught ReferenceError: hello is not defined
Okay – so it says hello is not defined, which is another way of saying “unknown identifier”. But how did we get a different error earlier then?
The difference between what we typed in gives us the clue. Instead of typing in 1 identifier (which gives us the expected unknown identifier error), we typed in two identifiers consecutively separated by space.
ENTER) as a single unit (i.e. the
If we type in the following instead
> hello; world
Then we get back the same
x Uncaught ReferenceError: hello is not defined
As you get deeper in programming, you’ll encounter a lot of errors, because you’ll be making a lot of mistakes, even as a seasoned developer. Don’t get frustrated about errors – they are your friend, since they tell you what you need to fix with your program.
What should you take away from the above so far?
- For programming languages, there are “valid” programs and “invalid programs”
- A few keys can completely change the meaning of what you write
It means that you’ll need to pay attention to what you type. Unlike English, grammars matters much more in programming languages (they need to be exact), otherwise you’ll get a lot of errors.
Luckily that although programming languages are demanding grammar wise, they are a lot simpler when compared to English, so fear not – just understand their behaviors as given, so you can know what to expect and therefore overcome them.
Let’s get back to our first programming lesson.
So unless you want to build programs that no one sees, we still have quite a few steps to do – we need to print this in an HTML page!
Open up your favorite text editor. And let’s just create a blank html page.
<html> <head> </head> <body> </body> </html>
What we want to do is to write a small script that will print “hello world” into that page when you load the page into the browser.
Go ahead and save the html, call it something like
helloworld.html. Find it on your hard drive (via your file browser), and then double click it to open it.
You should see a blank window open. Alright – we now know our blank html page works. Now add the following to the
<script> document.write('hello world'); </script>
Save it and run again. Viola – you now see hello world shown in the web page! What just happened here?
First – the
<script> tag is how you add “script” – a little snippet of code that’ll be run when the page is loaded – into html. So when we add it in the page, we are telling the browser to run the code inside the tags.
Second, when inside a web page, there is an
document basically gives you access to everything associated with the web page as long as you know what you are looking for, and you can then “program” the web page to your heart’s content.
document happens to have a method attached to it called
write. When you run the method with a
string, it will then “write” what you passed in to the document.
When it comes to programming web pages, working with
document and everything else associated with it (together they are called
DOM, which stands for Document Object Model), is inevitable. Programming DOM is how you add interactivity to web pages, so we’ll keep coming back to DOM again and again.
If you don’t understand this last part yet – no worries. We will go through them in much more details in the upcoming lessons.
For now – congratulations on your first real program! You now know how to print out “hello world”, and we are one step closer toward our goal!