How to REALLY Learn JavaScript Series: Part 1 Getting

JavaScript is a dynamic computer programming language. It’s commonly used to enhance a website’s user experience. This can be anything from what happens after clicking on a hyperlink to dictating what loads and when on a mobile device.

In an attempt to become more familiar with the language I wanted to document my process from the beginning to end on how to learn the language. Unlike most resources I’ve find online that only speak of the fundamentals, I wanted to try my hand at applying the information I learned into real world applications that actually make sense. I plan to build a number of JavaScript applications to really understand the language. My hope is as you follow along you can do the same. My goal is to put emphasis on the expression learn by doing. This philosophy is what makes you actually learn how to code properly. This series of posts will show you my process and hopefully one that you can follow to learn the language in a new perspective. Let’s get started.

What is JavaScript?

I’ll start things off explaining what JavaScript is. There’s a history behind it but like you, I wasn’t really interested in reading about it when I got started. I mostly wanted to dive in to start seeing what I could do with the language. We will get there soon I promise. It helps first to understand what the language is, where it comes from, and why we use it to this day.

JavaScript is a dynamic programming language that can be applied to an HTML document and used to create dynamic interactivity on websites. Aside from just websites new projects are being formed daily which use JavaScript as its core language to parse and process data. If you’ve heard of projects like jQuery, Grunt, Gulp, Node, Angular, and more you’re already familiar with where JavaScript currently resides. Its most common use is within a web browser. By default a web browser allows for basic JavaScript to run. jQuery and JavaScript can coincide in the same environment because they are essentially the same language. jQuery takes standard JavaScript and simplifies a lot of its functionality. The result is reduced lines of code for the same if not more functionality. For this series I will primarily focus on tradition “vanilla” JavaScript. Learning the real language first will make learning any variation like jQuery that much easier (at least it did for me).

While Java is in the name. JavaScript is in no way Java. Keep this in mind when using the language. Again I won’t get in to details of the differences but just know they are different. JavaScript implementations allow client-side scripts to interact with your websites’s users. It also allows you to control the browser and communicate with the content being displayed on a given webpage.

The syntax of JavaScript is derived from the C programming language. C is used to make applications on your computer as opposed to web based applications. C is also more geared towards PCs as opposed to Macintosh’s whose operating system is now running on Swift/Objective - C.

The language itself is fairly compact and is extremely flexible. White space is generally ignored so you can write the code the way you prefer without consequence. Below is a list of only a handful of things you can accomplish with JavaScript.

Cool Things You Can Do With JavaScript

Build an interactive calendar
Load data from other websites or sources onto your webpage
Use API’s to tie into other developers projects to customize their data for your specific use.
Manipulate video, audio, CSS, and more
Control a users webcam with their permission of course.
Use pre-built frameworks and libraries to rapidly build applications and websites
Create a search application that fires back data in real-time as opposed to loading another page or resource.

Basic Requirements

JavaScript is baked in almost every web browser available. To make the best use of JavaScript you should be familiar with HTML and CSS to a certain degree.

To work with JavaScript you will need at the very least a simple text editor. I would recommend using a code editor with hinting and syntax highlighting to help you keep your code organized and easier to read. Some editors I would recommend are:

Hello World

The famous hello world example can be a big help in getting started in any programming language. Starting small and building upon what you know is key and is the path we are taking in this series. Once you can understand a new technique or piece of code only then should you move forward. This allows you to process what you have learned and apply it so you don’t forget it!

If you’re new to HTML I suggest you learn it and CSS first before attempting JavaScript. There are multitudes of tutorials on the web for learning more about these languages. Google is a hell of a thing ;).

To start off let’s do a hello world example. First we need an HTML page and a JavaScript file inside a project folder. My folder looks like this.

simple folder structure

Inside the folder I have created an HTML document and a JavaScript document. I’ve named the HTML document index.html and the JavaScript document main.js.

My HTML structure is a bare bones basic HTML page. I have linked to our JavaScript file as well. Notice the structure below.

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>How To REALLY learn JavaScript | Getting Started</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>

         <script src="main.js"></script>
    </body>
</html>

script

Linking a JavaScript document is a lot like linking an external CSS file if you have had experience doing this (which, I hope you have). Notice the tags. These are required when linking to any type of JavaScript document. With HTML5 you now only need to supply the src=“” attribute. Before you used to have to specify a type=“text/javascript" attribute as well, this also applied for a CSS document in case you were wondering.

The key thing to remember is to close your opening script tag. Doing this along with linking to the correct file inside the correct directory will get you on your way in no time.

You may be wondering why the script is linked where it is inside the HTML document. Over time developers have found that linking to a javascript document just before the closing </body> tag in an HTML document decreases load times in most browsers. Along with load time, the browser renders data is sees on a webpage from top to bottom. Any HTML is loaded first and then once the browser sees the JavaScript file then that data is loaded last. This all deals with something known as the DOM or Document Object Model which I will explain in an upcoming article.

Onward

With our project set up we can now write some JavaScript to perform our Hello World test. Inside your HTML page go ahead and add a h1 tag with whatever content you like.

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>How To REALLY learn JavaScript | Getting Started</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

    </head>
    <body>
            <h1>This is a Heading</h1>

      <script src="main.js"></script>
    </body>
</html>

Take note of your content between the h1 tags. Then in your main.js file add the code below.

var myHeading = document.querySelector('h1');

myHeading.innerHTML = "Hello World!";

With the code added, open up the index.html file in a browser of your choice. You should now see the H1 tag displaying “Hello World!” as opposed to what I originally I use chrome because it’s my favorite but use whatever browser you prefer.

If you remember our initial HTML had “This is a Heading” as the content between the h1 tags. With our JavaScript initialized the content now reads ”Hello World!”. This all happened dynamically which is why JavaScript is so handy.

Quick Code Review

JavaScript makes use of variables. You define a variable like I have in the example above or like this:

var myName = “Andy”;

Notice how you can name a variable however you want (some restrictions apply). I’ll expand further on variables in an upcoming article but just know you can assign a variable to pretty much anything in JavaScript.

I named the variable myHeading because it deals with the heading we have inside our HTML. To find the heading, JavaScript makes use of its querySelector property. When you give the h1 tag to the querySelectorproperty as a parameter, the code will traverse the HTML document until it finds what you have supplied. This is all taking place in this one line of code which I have set to the myHeading variable.

var myHeading = document.querySelector(‘h1’);

After assigning this functionality to a variable I needed some way to print it inside the page where our current h1 tag lives. To do this I used the innerHTML property to replace the default text we created with the new “Hello World!” text.

var myHeading = document.querySelector(‘h1’);
myHeading.innerHTML(‘Hello World!’);

In the code I made use of the variable I created to chain it to the innerHTML property which in return injected the new content into our HTML page.

In two lines of code we dynamically chained content in our HTML page. This is a super simple example of the possibilities you can achieve with JavaScript. I’ll get into more advanced JavaScript techniques and real world examples in the upcoming series or articles. Be sure to follow along to learn along with me.

Resources to Speed Up Learning
Books:

Online:

Up Next

Up next in this series I will talk about variables in JavaScript. In the article I’ll cover how to use them to make your code more concise, legible, and efficient within your web pages and applications. Stay tuned!

How to REALLY Learn JavaScript Series: Part 1 Getting Started