JavaScript lessons for beginners but they're for actual beginners

It's 2020 and suddenly you ask yourself: "omg what if I learned JavaScript? 🤯".

You already learned three things here:

1. My introductions suck.
2. The S is capitalized in JavaScript.
3. Did you know that the color orange was named after the fruit and not the reverse?

Note that #2 doesn't really matter anyway because from now on I'll write it as JS.

Alright, you've come to the right place. Let's friggin do this. 🚀

Wait what was that about the orange?

With that said: what is JS? You might have heard of it before. If you came here from my previous series of articles (I doubt that's the case but let's pretend I'm a famous writer for a bit here, thank you very much) where I teach HTML & CSS starting from scratch, I mentioned it in those.

If you don't come from there, have a look for yourself! 😊 https://codeburst.io/lets-make-a-website-ae5e28758519

A programming language

JS is a programming language. In the mystical world of computers, a language is actually quite similar to spoken languages like French, English, or Māori. It lets you (the star in this story) talk to your computer in a language you can both understand.

Photo by Brina Blum on Unsplash
A French postal box, to communicate with the rest of the world.

Just like there's a lot of languages in the world, there's also a lot of programming languages. JS is one of the most famous among them, if not the most famous (I can already hear the rumble of keyboards ready to prove me wrong in the comments ❤).

Others you might have heard of could be C, C++, C#, PHP, Java (no relation with JavaScript... yes JS came after and yes that choice of name is the worst), Ruby 💎 (one of my favorites ❤)... and many, many more. They all allow you to talk to your machine in different ways. Today, we'll focus on JS.

The source code

The text we type to communicate with the computer is called the source code, or simply "code" in its shorter form. In JS, code looks like this:

const test = "abc";
console.log(test);

Now you might be thinking hmmmmmm yes, I see wtf is this sh BUT bear 🐻 with me here and I'm sure it'll make more sense pretty soon.

OK let's code

Let's start with some easy stuff.

1 + 1

This is valid JS. I know, it's crazy. And I'm sure you already know what your computer would display here when reading this code.

Yes, 11!
...
...
...
Just kidding it was 2, as you probably guessed! 😛
I am a comedian.

OK let's code for real now

So you might be thinking: "ok yes that's great and all but how do I actually tell my computer to read this code? I want to try this on my machine!".

There are lots of ways to do that, but we'll keep it super simple for this first lesson. We'll talk about the other options in later articles. So, just click here!

This will open CodePen, an online web editor that allows you to run (a.k.a. tell your machine to read) JS code. At the bottom of the page, just above Console | Assets | Shortcuts, you can see a small > symbol. Click on its row. You can now type JS code in this area.

Type 1 + 1 there. Note that I use spaces between the numbers and the +. In my opinion, it's a good habit to take. It doesn't make much difference here, but later when you'll be writing much longer code, it'll make things more readable. But you could also type 1+1, it's totally valid.

Now take a deep breath and press Enter.

In the console, a new line must have appeared magically with 1 + 1. And can you see the 2 that's displayed just below? Yes, this is your computer answering you! 🤯
You made it. You just ran your first JavaScript code! 🎉🎊✨

Photo by Charles Deluvio on Unsplash
You can now relive the joy of using a calculator.

Until next time

And that's a wrap for that first lesson. Next time, we'll talk about variables and maybe even display some actual text, not just numbers!

In the meantime, feel free to experiment with the console! Of course, you're not limited to 1 + 1, you can actually enter any operation there. Yes, you got yourself a free calculator! A small note: in JS, the multiplication sign is * (the asterisk), not x. It won't work if you use x!

Stay safe, and see you next time! 🚀

PS: This is my first article on dev.to, lemme know what you think in the comments! All constructive feedback is appreciated! 😊

Cover photo by Paul Esch-Laurent on Unsplash
That keyboard looks amazing.