Writing your first program — Programming fundamentals

Lesson notes
- console.log
- Hexlet's small virtual computer (kind of)
Recommended reading
Optional
Lesson transcript

Lesson notes

console.log

console.log is used to print stuff onto the screen in JavaScript
Print "Hello, World!" like so: console.log('Hello, World!');

Hexlet's small virtual computer (kind of)

Exercises open in a kind of small virtual computer that we build for you on the fly
Look at the bottom or click "The Problem" to see your task
Write your code between BEGIN and END
Check your solution as many times as needed
Ask a question in the Q&A if you need help. We always answer!

Optional

Your internet browser probably includes so called 'developer tools', and one of the features of those tools is a 'console'. It's a place where you can write and run JavaScript code.

Chrome Developer Tools
Safari Web Inspector
Firefox Web Console

Try opening a console there and writing the same "hello, world" code. As a question in the Q&A if you need help.

Lesson transcript

I have to admit, this might not look super exciting, but it is! Let me show you something. We wanna write our first simple program. Maybe you've heard about "Hello, World!". Millions of developers started their careers with this simple program. And all it does is just puts the words "Hello, World!" onto the screen.

So, when you finish with this video and click "Continue", you'll see an exercise screen like this. This is basically a small computer that we built on the fly for you personally, for this particular exercise. It's not a real physical computer, of course, but pretty close to that.

There are four areas here:

The sidebar with some buttons. The editor where you write code. The terminal where you run commands. And the file tree.

Let's start with the sidebar. This is probably the most important button — it checks your solution and tells you if you got it right. You can check your solution as many times as you want. This checking is done automatically with so-called "tests". It's basically just another program that runs your program and tries to understand if your program does what it supposed to do.

When you click it, the editor switches to another tab called OUTPUT, and it prints some information about your code being checked. If your solution is not yet correct, then you'll see some details right there. Read them first and try to understand what's wrong, most of the time it's a matter of figuring out somewhat primitive English phrases.

The cool thing about this is that tests like these are used in the real life, in the industry level software development too. This whole website with all the complex infrastructure has a lot of tests, small programs like this, that check our own code all the time. It helps us improve the quality and avoid many, many mistakes.

Of course, before you start coding you have to understand what to do. This button shows you the description of the problem. The format is easy: headers are the files you need to work on, and descriptions below headers tell you what to do. All of these files, in this case, this one file, is open in the editor by default, and you can see tabs right here.

You can also look at the solution, but not right away. It's only available few minutes after you start the exercise, so, try yourself first, but there is no shame in looking at the solution.

[DING]

Shame!

Some exercises might be pretty difficult at first. We also recommend checking out the solution after you've completed the task yourself.

But, if you find yourself struggling and waiting for the solution to become available, just go ahead and ask a question in the Q&A section. We always answer all the questions there.

And, finally, you sometimes might need to go back to the video and refresh your memory. It's easy: just click "Theory" and when you're done click "Lesson" to go back.

Now, to the main part — the editor. It looks just like any other code editor, which is basically means a text editor with some additional features that make programming easier.

Write your code between these BEGIN and END markers. This is important, our system expects your code to be there.

All your changes are autosaved, so you don't have to worry about saving files.

The last part is the terminal. It's a command prompt, a way to talk to this small virtual computer of yours. You don't need it most of the time in this course, and you don't need it in this particular exercise, but you can always play around. The operating system here is called Linux, and you can try and run some commands. We also show the description of the problem in a tab there, just to make it easier to find.

And, finally, if something breaks or you delete a file by mistake or something else happens, you can always go back to an initial version, it's like a factory reset for the exercise. Press "Reset" in the sidebar and you're all set. Just remember: your code you wrote will be deleted as well, the exercise will be fresh and clean.

Okay, now we're ready. When you need to print something onto the screen, JavaScript offers this command: "console.log". We want to print text – in programming we call it a "string", because it's a sequence of characters, like a string with some letters hanging.

Just write "console.log" and then "('Hello, World!');" like this, put a semicolon in the end and click "Check solution". You can see that "Hello, World!" was actually printed on the screen and this message shows you that you have completed the exercise successfully. If you click on the filename you can see the teacher's solution which is exactly the same as yours in this case, and you can click continue or click "stay here" to stay here and play around some more.

So, just try to print something else. Print other words. Print numbers. Break something. This is part of the fun: you don't have to worry, you can break stuff.

So, there you go, this was your first program. And, I know, this is no an app that will make you rich or famous. This is the simplest possible step. But it's like a baby step: simple, but important.