JavaScript Basics | Local Development cover image

JavaScript Basics | Local Development

Jonathan Barrios • September 1, 2020

javascript

Introduction

Welcome to the JavaScript Basics series for beginners. We'll focus on the fundamentals of JavaScript, a dynamic object-oriented, general-purpose programming language. That said, we won't cover frameworks such as React, Vue, Express, and Node.

In part 1, we'll set up a local development environment using Visual Studio Code and some useful JavaScript development extensions. After getting a development environment running, we'll explore how to implement JavaScript and leverage the JavaScript console nestled in your browser.

Prerequisites

To get the most out of this course, you should have some experience with the following:

In Part 1 of JavaScript Basics: Local Development, we will:

In future JavaScript Basics posts, we will:

Note: It takes years of focused practice to become a great JavaScript engineer. This JavaScript Basics course is an introduction to JavaScript fundamentals and will improve your coding skills, but don't expect to transform into a JavaScript expert overnight instantly. Remember, the JavaScript learning journey is a marathon, not a sprint.

Development Environment

In Part 1 of the JavaScript Basics series, we'll set up our local development environment using Visual Studio Code. That said, feel free to use any code editor or IDE you prefer. In closing, we'll explore the JavaScript console and how to start using JavaScript right away.

Visual Studio Code

Before we start writing JavaScript, we will need to download, install, and set up Visual Studio Code. We'll also go over useful extensions for JavaScript development, and the benefits extend to JavaScript frameworks such as Vue, React, and more. Here's a list of useful JavaScript development extensions for Visual Studio Code:

In the next section, we'll install each extension one by one, but first, head over to the Visual Studio Code website and follow the installation instructions. Once you install Visual Studio Code, let's explore some of the basic features such as Emmet and useful Visual Studio Code extensions.

Working Directories & Extensions

To get started, create a working directory––this can be any directory where you normally keep your projects. I'll be using the Desktop directory with a folder named js2020. Next, let's explore extensions and the built-in Emmet actions with the following action steps:

  1. Create a working directory in your preferred location
  2. cd into your preferred working directory
  3. Open Visual Studio Code
    • Use the code . command in the terminal
    • Drag the folder into the Visual Studio Code icon
  4. Create an index.html file
  5. Open the file and type ! + TAB to create some HTML boilerplate
  6. Change the title to something fitting
  7. Add an h1 with the message: Hello, world! inside the <body></body> tags
  8. Click on the Visual Studio Code extension icon on the left side-bar(⇧⌘x)
  9. Type Live Server into the search field
  10. Install the Live Server extension by Ritwik Dey
  11. Right-click on the index.html file and select Open with LiveServer(⌘L ⌘O)
  12. Navigate to localhost:8000 in your browser

You should see Hello, world! printed in the browser window. ✨

Using Emmet to create HTML boilerplate is quite powerful, right out of the box. We then displayed Hello, world! using Live Server, which auto-updates on each save. You now have an excellent development environment to learn JavaScript fundamentals. Way to go! 🙌🏼

Here is the HTML code from my file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Crash Course</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

Go ahead and install the rest of the extensions by clicking on the extension's icon on the left or using the ⇧ ⌘ x keyboard shortcut. Type each extension name in the search bar and click install to add the extension to Visual Studio Code.

Auto Rename Tag will do just that; if you change an <h1> tag, the ending tag will auto rename to the starting tag name. Bracket Pair Colorizer will help you see where brackets start and stop using color, much like indent-rainbow, which adds color to indentations making each layer easier to read. The ES7 React/Redux/GraphQL/React-Native snippets extension is great for React and more. Type clg + TAB, and you'll get a console log ready to receive a parameter.

Client-side JavaScript

How do we start writing javaScript? The two categories we can use to distinguish between code running in the browser and code running on a server are client-side and server-side. For the scope of this course, we'll focus on client-side JavaScript in the context of web development, mostly working in the browser. In the next examples, we'll cover three ways to use JavaScript in a browser using our local development environment––inline, internal, and external.

1. Inline JavaScript (much like CSS: external, internal, and inline).

<button onclick="alert('Hello, world!')">click me</button>

The line of code above, inside the body tag, produces a button with a clickable alert.

2. Internal JavaScript: We can add internal JavaScript using a <script> tag:

<script> alert('Hello, again?') </script> (before end of body) </body>

Here's an example in the context of clicking a button. Don't worry about the code example, we'll cover all of that later in the course, for now, focus on how it works and behaves:

<body>
  <button class="btn">Click Me?</button>
  <script>
    document.querySelectorAll('.btn').forEach((item) => {
      item.addEventListener('click', () => {
        alert('This is JavaScript!✨')
      })
    })
  </script>
</body>

3. External JavaScript: Create a new folder: js with a new file, app.js inside. Next, add the JavaScript code inside without any HTML.

document.querySelectorAll('.btn').forEach((item) => {
  item.addEventListener('click', () => {
    alert('👋🏼 Howdy!')
  })
})

Next, open the index.html file and change the script tags by adding a src property with the location of the JavaScript file, like this:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button class="btn">Click Here</button>
    <script src="./js/app.js"></script>
  </body>
</html>

Save your changes and open the browser again, and you'll see the same functionality, but this time, we are using an external JavaScript file instead of using internal or inline code.

The Console

The console.log command is the most popular console function we'll use throughout this course, and the alert function is the pop up that we see from time to time––to accept terms or verify something. Last but not least, we'll also cover the document.write function.

Let’s try all three functions out by adding the following code to the app.js file:

document.querySelectorAll('.btn').forEach((item) => {
  item.addEventListener('click', () => {
    alert('Hello, from alert! 👋🏼')
    console.log('Hello, from console.log! 👋🏼')
    document.write('Hello, from document.write! 👋🏼')
  })
})

Open your browser, and you'll see an alert pop up, a message in the browser window, and a console message in the JavaScript console.

🙌🏼 Great job making it to the end of JavaScript Basics: Part 1! We covered how to:


Now that you have Visual Studio Code installed with some useful extensions, we'll begin learning all about JavaScript syntax in Part 2 of JavaScript Basics. Follow me on Twitter @_jonathan_codes for more JavaScript Basics and other web development frameworks, databases, and more. As always, happy coding! 👋🏼