DEV Community

Cover image for JavaScript Made Easy: Part 1
David Tetreau
David Tetreau

Posted on • Updated on

JavaScript Made Easy: Part 1

JavaScript is one of the most popular and most widely used languages. It is closer to spoken language and more easily understood by humans than many other programming languages. This along with the fact that it can run nearly anywhere may explain its popularity. It is an easy and fun language to learn if it is done at a slow and steady pace. The key is not to give up and always make forward progress no matter how small. Also, it is good to focus your attention on this topic and not learn too many things at one time. This series aims to lower the difficulty level of learning JavaScript and teach the basics of JavaScript in an easily understood format. This series takes the constant reader from absolute beginner to a more advanced level of proficiency in small increments. Let's get started!

What is JavaScript?

JavaScript is a language or a tool used by developers to add interactivity to their websites. In layman's terms, HTML is like the skeleton or structure of a website, CSS makes it look nice, and JavaScript makes things happen interactively and makes the site come to life. All you have to do is learn how to give the right instructions!

Where Do I write JavaScript?

If you are a brand new beginner, you probably want to know where to start writing JavaScript. In order to keep things simple and focus strictly on JavaScript, I recommend for now. We will get into some other ways to write code later in the series. replit is a tool you can use to write code anywhere. You can even write JavaScript programs on your phone! Any code written on replit is usually for practice but can easily be copied over to other places. You can also invite others to write code with you remotely on replit. Steps to get started with replit are as follows:

  1. Go to this URL sign up for an account.
  2. Sign in.
  3. Make a new repl. repl1
  4. Select JavaScript as your programming language and click 'create repl' repl2
  5. You are ready to write code! The code you write is typed into the white area and the console is the black area on the right. The console is where you will see the results of the code that you run. repl4

First Program

It is a tradition to print "Hello, World!" to the console, so that is what we will do now! Here's how:

  1. Open a repl as described above.
  2. Type the following into the white area of your repl as shown below:
console.log("Hello, World!");
Enter fullscreen mode Exit fullscreen mode
  1. The repl should look like the following: hello world
  2. Click Run. Congratulations! You have written your first JavaScript program!
  3. The console.log() part of the code above logs your code to the console. The "Hello, World!" part of the code is a string. The quotation marks like those around "Hello, World!" must be included for all strings. A string is just a line of text or characters. This entire line of code must be closed with a semi-colon as a good coding convention.

Google Chrome DevTools

This same code can be run in the actual console in the browser. You can see this by:

  1. Right-clicking anywhere inside the Chrome browser on a webpage and clicking "Inspect".
  2. Click "console" in the Chrome DevTools that appear. The console tab along with the code we will be writing are highlighted in the image below: image
  3. If there is anything already in the console, right-click inside the console and select "clear console" to prevent confusion. You can adjust the size of this window if you cannot see it well.
  4. Type the same code you typed into your repl and press "enter":
console.log("Hello, World!);
Enter fullscreen mode Exit fullscreen mode

The code will run, and you will achieve the same result as you did in the repl. However, anything that is run in the DevTools will not make permanent changes. It is essentially a tool to quickly see how changes affect the webpage being displayed in the browser, but it does not rewrite the code. It can be thought of as a "sandbox" for code. These tools are also used for finding bugs in code or identifying errors. This section has given you a basic familiarity with DevTools, and an idea of what replit was meant to simulate. However, we will be working with replit for a while in this series.

I hope you have enjoyed this post! Please check out the entire "JavaScript Made Easy" series by David Tetreau. There will be a new post daily.

Discussion (1)

Some comments have been hidden by the post's author - find out more