Please Buy now at Leanpub
Written and illustrated by GetContented.
Published on 2016-05-22.
This chapter is where you start to become a beginner programmer by learning how to read your first few simple programs.
Using programs that put what’s called an “alert” on the screen, our aim for this lesson is to get you familiar with some basic JavaScript code and some words to talk about it.
We’ll open the Chrome web-browser now, because it’s easier to start programming in. If you don’t have it, visit https://www.google.com/chrome/ and follow the instructions there.
Each window in Chrome has a place to enter small programs directly called the JavaScript console, which is normally hidden. Let’s go to it now:
Open a new window with File... New Window, then a console with View... Developer... JavaScript console. To select it, click beside the > symbol:
We can type any text we like here, and pressing the return key, the browser will interpret it as JavaScript. If it makes sense, our program will do its work (run or execute).
Below you’ll see your first program — just one line. Type it into the console carefully and press return to run it. If you make a mistake, try again on the next line, or start again.
alert();
Congratulations on your first step into the world of JavaScript programming! We’re now going to walk through what this line means and explain some of the terms and pieces common to all programs.
When you pressed return, a dialog box appeared, so-named because the computer is “talking” to us, and needs a response. We give one by clicking the button on that window which will dismiss it, and it will disappear. This tells the computer you’ve seen the window.
After it’s gone, you’ll see undefined is “printed” to the console. This is normal, but for now ignore this.
What actually happened, though? Well, JavaScript programs are written as a sequence of statements of actions to take. These end in a semi-colon, and each tells the computer what to do.
For simplicity, our first program is only one statement. We’ll see programs with more soon.
When you run a program, JavaScript executes its statements. In our case, we have a function call in our statement, so the computer looks at the word alert, and this is how it knows we’re talking about its built-in alert function — it matches on the name alert. A function is a kind of block (or parcel) of code; it’s like a mini-program, in a way!
When it gets to the round brackets written after alert, which are called parentheses, it sees them and that’s how it knows we’re telling it to call that function. We’ll explain that next.
Calling a function means executing all of the statements inside the definition of that function, in sequence (one after another): evaluating its contents and responding with what’s called a return value. This is the value that a function call can give back as its “answer” to being called. This will become clearer as we keep going.
When we’re talkinga bout JavaScript, the word value means “piece of data”. An example would be the number 100 or the word "cats".
So, the alert function is built-in to JavaScript, and it displays an alert box on the screen and waits for you to click the button. Until you click it, JavaScript pauses program “execution”. After you click it, the alert function responds with the undefined value. Another way to say this is that the return value of alert is the value undefined.
The undefined value is returned when the computer hasn’t got anything more meaningful to respond. It’s returned here because all function calls must return some value.
If you think about what an alert message does, it’s whole job is just to put a message on the screen. It doesn’t have anything meaningful to feed back into the computer. That’s why we get the undefined value back from it.
Putting a blank alert on the screen is ok, but it’d probably be more useful and interesting if we could actually display a text message.
Let’s call the alert function with a message now:
alert("hi");
If you run this program (by typing it into the console, then pressing the return key), an alert will pop up with the message in it. As before when you dismiss it undefined is printed in the console.
We can tell from doing this that the message shown is whatever value we put in quotes in-between the parentheses (the rounded brackets).
So the alert function can take a parameter, or not: the message to display. JavaScript programmers call the parameters that a function takes its arguments.
What about if we write two statements on the one line:
alert("hello") ; alert("hello, again") ;
If you try this, you’ll see that it does the left statement first, then the statement on the right, displaying an alert each time and waiting for you to dismiss it: it runs them in sequence.
So we can see that the semi-colon tells JavaScript where the end of a statement is, even if there are more than one of them on a single line of code.
You may notice that extra spaces don’t change anything for JavaScript. We usually won’t write our code like this, but it’s good to know it’s possible, so you don’t get confused when you read other people’s programs that do this.
Well we made it to the end of the first lesson. Well done! Take a breather, and then try the homework.
Your homework is to type the code in and try it if you haven’t. This will make it more your experience. Then try writing five different alerts with your own messages in them. Don’t forget the quotation marks around the messages, or you’ll get an error. We’d also like you to do an internet search for JavaScript code and make sure you can see the statements in any code you see in a few pages. You shouldn’t try anything more complicated yet. We want to make sure you only do a little bit at a time and not get confused.
If you’ve enjoyed reading this, please consider purchasing a copy at Leanpub today
Please follow us, and check out our videos Follow @HappyLearnTutes