Basic JavaScript: 3 Concepts You Need to Know

JavaScript is the programming language of the internet. Period. While there are dozens of other programming languages out there, from Python and Ruby to Java and C++, JavaScript has a special place in the hearts and minds of web developers everywhere.

Every real (employable) web developer must know, at the very least, the three basic languages of the internet: HTML, CSS, and JavaScript.

HTML creates the elements on a web page, from paragraphs to images to menus and buttons.

CSS tells the browser how to display everything, and makes the whole thing look pretty.

JavaScript is the brains behind the operation.

JavaScript is all about logic. It tells the website what to do, how to behave, and how to react in specific situations. It allows your website to receive input from your visitors, and to adapt & react in response to their actions. JavaScript is what makes websites dynamic and interactive. For many of us web developers, that’s what makes JavaScript so much fun.

While JavaScript isn’t as easy to learn as HTML and CSS, learning how to program in JavaScript is very rewarding. JavaScript is one of the most popular programming languages in the world today, with new libraries and frameworks coming out (seemingly) every week. Some of these frameworks, like React.js, allow you to create highly responsive Facebook-like interfaces, while others allow you to create Progressive Web Apps that look and feel (and work) just like native mobile apps on your phone. It’s no wonder that the average JavaScript developer in the USA makes over $72,000 per year. This is why we spend a lot of time digging into the intricacies of JavaScript in our web developer courses here at TechLaunch.

So without further ado, here’s a quick crash course to help you learn some basic JavaScript in under 15 minutes!

Basic JavaScript: 3 Concepts You Need to Know

1. How to use JavaScript

The first and most basic thing you need to know when getting started with JavaScript is how to use JavaScript in the first place. Where do you put it? How do you attach it to your website?

First, you’ll need to create an HTML file (if you don’t know how to do that, follow along with this simple tutorial). Without an HTML file, your JavaScript will have nothing to interact with. Once you’ve created an HTML file, there are three different ways that you can insert your JavaScript logic.

Method 1: Put JS Code Inside of HTML Elements (not usually recommended)

The first way to insert JavaScript into your web page is directly inside an HTML element. For example, if you want to create an HTML button that, when clicked, activates a JavaScript function, you can insert the JavaScript directly inside the HTML button code. A simple example could look like this:

<button type="button" onclick="document.getElementById('targetElement').innerHTML = Date()">

Click this button to display the date and time in the target element below.</button>

<p id="targetElement"></p>

If you copy/paste this code into the body section of your HTML file, it will create a button that actually works. Try it!

Method 2: Put JS Code Inside <script></script> tags at the end of your HTML document’s <body> section

Inserting JavaScript into HTML elements is usually not a good idea. It gets confusing, it’s hard to maintain, and it puts your HTML in charge of your JavaScript logic, rather than vice versa.

If you’re going to put your JavaScript code in the same file as your HTML, it’s generally better to put your code inside of <script></script> tags, which you can then put at the end of your HTML document’s <body> section.

While you could insert the <script> tags anywhere in the <body> section, it’s best to put your JS code at the end (just before the </body> tag), so that the JavaScript logic is the last thing that the browser needs to load. This way, it doesn’t slow down the loading of text, images, and crucial UI elements that viewers expect to see loading right away.

Method 3: Put The JS Code In An External File

The “cleanest” method of adding JavaScript to your website (and the way we generally recommend at TechLaunch) is to create a new file specifically to hold your JavaScript code, and then link that file to your HTML file.

The JavaScript file doesn’t need to have any fancy formatting; just put your JavaScript code into a regular old text file, and save the file with the extension .js at the end.

Then, to pull your JavaScript code into your HTML document, all you need to do is to add a “script source” tag in the <head> section of your HTML file. It would look something like this:

<script src="codingIsFun.js"></script>

For a more complete explanation of how to link your JavaScript to your HTML file, check out this tutorial.

2. How to interact with users

One of the coolest things you can do with basic JavaScript is to listen and respond to user behavior. You can do this by attaching event listeners to elements. For example, try adding this line to your code:

document.getElementById("targetElement").addEventListener("click", function(){ alert("You just clicked on the date!"); });

This adds an event listener to your targetElement (the <p> element we created earlier). The event listener waits and listens for the user to “click” on the element. When the user clicks, the event listener triggers a function() that sends an alert to the user!

You can even add event listeners to larger things, like the window itself. For example, if you want to pop up an alert every time the user clicks anywhere on the page, you could add the event listener to the window itself, like so:

window.addEventListener("click", function(){ alert("You just clicked on the page!"); });

Try it out! Have fun with it!

3. How to store information

Let’s say, instead of popping up an alert every time someone clicks on the page, you just want to record how many times a user clicks on the page. You can do this by using a JavaScript variable.

JavaScript variables are just like the variables you used in algebra class, but much more fun and interactive. You can use them to store things like usernames and passwords, or flight record data for drone/aircraft software.

For now, we’re just going to set up a variable to count how many times the user clicks on the page. Try adding the following snippet of code to your file (you might want to delete the old event listener we added, since that will pop up an annoying alert every time you click on the page):

var howManyClicks = 0;

window.addEventListener("click", function(){ howManyClicks++; console.log(howManyClicks); });

How to create and initialize variables

The statement “var howManyClicks = 0;” creates and initializes a variable (or a “var” in JavaScript syntax). We named this variable “howManyClicks,” but you can name a variable whatever you want. You could call it “yummyDonutsVariable” if you want. But it’s generally best to name variables in a way that makes sense for the information they’re storing. That way, you don’t get confused when you read your own code, and other people will be able to read and understand your code as well.

You may notice that we’ve changed our event listener. It no longer pops up an alert whenever a user clicks on the page. Instead, it activates a function() — a block of code that performs a specific task (or series of tasks). In this case, our function looks like this:

function(){ howManyClicks++; console.log(howManyClicks); }

Our function performs two tasks (each one ends with a semicolon).

First, it performs the task howManyClicks++. The ++ that we added at the end of our variable’s name tells the browser to add 1 (++ is the same as +1) to the number stored in the variable. Remember, we initialized the variable to zero, so it started out at zero. Now, every time the user clicks on the page, the count will go up by one! Pretty cool, huh?

The second task that our function performs is console.log(howManyClicks), which allows us to take a peek at the status of our variable, as it changes.

Checking on your variables with console.log()

console.log() is a special JavaScript function. All it does is log information to the console. The console is part of the browser’s developer tools. It lets you check what’s going on under the hood of your website. The console is generally used for testing and/or debugging your code. You can view the console by right-clicking somewhere on the white-space of the page, and clicking “inspect element.” This brings up the developer tools at the bottom of the page. There should be a “console” tab there at the bottom of the page. (This will work if you’re using FireFox or Chrome, but for other browsers, the process may be a little bit different).

Now, if you look at the console and click on the page, you’ll see that every time you click, the number in the console goes up by one. Every time you click on the page, our function is adding 1 to our variable, and then logging the value of our variable to the console!

To learn more about JavaScript variables, check out our more in-depth JavaScript Variables tutorial.

Learn More Basic JavaScript

These are just 3 of the many, many awesome concepts that you’ll learn as you continue your journey into the world of JavaScript. TechLaunch is hosting a free Intro to Javascript workshop on March 20th, 2018, in Doral. If you’re in the Miami area, feel free to stop by! Make sure to sign up in advance, as space is limited. Click here to reserve your spot!