JavaScript: The Basics: The Series (1)

Creating a “Hello World” application

Hello again. Hope you’ve been well! Today I’d like to start this series with the basics and foundations of one of my favorite languages, JavaScript, or JS for short.

What is JS? It is an extremely popular programming language for the web. It gives functionality to a site, and allows users to interact with it. Let’s dive right in, and create your first application!

Here are the tools you’ll need for this practice application:

What we will be creating is an application that prints out, “Hello World!” “My name is (your first name and last name).” To do this we are going to use the Google Chrome Developer Tools. To bring up the tools, do the following:

1. Open Google Chrome

2. Right click on your screen

3. Select “Inspect”

This will pull up the Google Chrome Developer Tools, and you should have a screen that looks like this

Google Chrome Developer (Dev) Tools

You can increase the width of the tools so that they take up more of your screen (something I recommend for this app). Once you’ve set up the screen to your liking, head over to the Sources section of the Developer Tools.

Sources section in Dev Tools

When you’ve gotten to the Sources section, you’ll want to select “Snippets” from the drop down menu when you click the >> symbol on the lefthand sidebar. Now it’s time to create a new code snippet. Click on “New Snippet”, name it helloWorld.js, and get ready to code.

Typically, you’ll be creating applications in a code text editor, but for our purposes, using the Developer Tools is just fine. To create our Hello World application, we’ll need some variables. What is a variable? You can think of a variable like a container. It holds information for us to use in our applications. Variables hold the different data types in JS. There are two main types: primitive and objects (we’ll discuss these in a later post), but for this app, we will be dealing with primitive types. The primitive data types are: strings, booleans, numbers, null, undefined, and symbols. We will be working with strings for this application.

To define a variable you’ll want to use a JavaScript keyword. A keyword is a reserved word. The keywords for defining variables are: var, let, and const.

I’ll do a more in-depth look at these keywords over on the gram (@thedecodr) but, for our application, we’ll be using var. A rule of thumb in development, always be specific. This is true for naming variables and functions in your code. Trust me, your fellow developers and your future self will highly appreciate it. In your Dev Tools code snippet, let’s define our variables. Our first variable will be named, firstName and our second variable will be named lastName. You can set both of these variables to your first name and last name, or whatever names you prefer.

var firstName = 'Jane'
var lastName = 'Smith'

Now, there are a couple of different things happening above. First, we’re using the var keyword to start the definition of our variables. Next, we’re giving our variables a name (firstName and lastName). The variable naming practice we’re using here is called, camelCasing (best practice for naming in JS). This just means that the first word of our variable name is lowercase and all following words are uppercase. See below for a longer variable name using camel casing.

var myFirstName = 'Jane'

Lastly, we are assigning the string data type to our variable. In this case, the names ‘Jane’ and ‘Smith’. Strings are a series of characters surrounded by quotes (single or double).

Another best practice tip, if you use single quotes at the beginning of your app, use them throughout your app. Same goes for double quotes.

It’s also important to note that when naming a variable, you do not want to name things like this:

var 1stWord = 'Hello'
var var = 'Hello'
var first name = 'Jane'

These are are invalid variable names. The first example is invalid, because it starts with a number. The second is invalid, because it uses a keyword as a variable name (and just looks weird). The third is invalid, because it has spaces.

Alright, we’ve defined variables, so what’s next? Let’s create a function to actually use our variables. A function is a series of statements that perform specific tasks that you define. Again, you’ll want to be specific when naming functions, so that you know what your function is supposed to be doing. Let’s create our function below. Type the following under your variables:

function helloWorldGreeting() {
}

So far, you should have something like this:

Function is another keyword in JS and is used to define the different functions in your application. Our function is named helloWorldGreeting(), using camel casing, and followed by a set of empty parentheses. These parentheses are for holding function parameters or arguments however, this function will not be using or needing them. The space between the curly braces will hold the ‘main chunk’ or, specific tasks, that we want our function to execute.

Every function needs to return a value. Functions use return statements to stop the execution of them, and return the value. So what do we want our function to return? Hmmm let’s have our function return a short greeting to us. Type the following in your console:

You’ll notice that I tabbed ‘into’ the function, then started writing my return statement. This is necessary for JavaScript function syntax. As it stands right now, all our function will return is the string, ‘Hello World!’

Let’s have it return our variables, so that the output of the function will be, ‘Hello World!’ ‘My name is, (firstName lastName).’ To do this we will need to connect a few different strings together. Connecting a string of strings, is called concatenating. You can do this by using the plus symbol. Add the following to your return statement:

return 'Hello World!' + ' My name is, ' + firstName + ' ' + lastName- don't forget to add a space before 'My', after the comma, and in between ''

What we’re doing is connecting a couple strings and the variables we created. You’ll notice that I added some spaces in the line above. This is for the readability of our function’s output. If you didn’t add spaces, the output would read like one extremely long word (also weird). There is even a space between firstName and lastName. The JS interpreter reads a space between the beginning of a quotation mark and end of a quotation mark as an actual space between words. So far, your code should look like this:

We’re almost done! The last thing we want to do is call our function. Calling a function means telling the computer to execute the function, so that we can see the output of it in the console (the empty space at the bottom of our screen). To do this, type the following under your function:

console.log(helloWorldGreeting())

The console.log command allows us to log the value of our function, or anything really, to the console by placing statements inside the parentheses. We are going to place the name of our function followed by empty parentheses in our console.log() to call and execute it.

We’re so close! All there is left to do is run our function. To run your function on a Mac, press Cmd + ‘Enter’ and to run the function on a Windows computer, press Ctrl + ‘Enter’

You should see the following value from your function:

And there you have it! You have successfully created your very first application! You should feel proud and accomplished. If you’ve made it this far along, thank you! This may seem like a small win, but always remember, it’s all about the small wins. Even in programming. If you have any questions about what we’ve done today, or suggestions on how I can improve these types of posts (I know they’re a little lengthy), please feel free to email or send me a message on Instagram. Thank you again and write to you soon!

Email: thedecodr@gmail.com | Instagram: @thedecodr | GitHub: umreen24

your weekly coffee talk