
JavaScript Basics | Local Development
Jonathan Barrios โข September 1, 2020
javascriptIntroduction
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:
- Building websites using HTML and CSS
- Navigating the Terminal or Command Line
In Part 1 of JavaScript Basics: Local Development, we will:
- Setup a
local JavaScript development environment
using Visual Studio Code - Install useful
Visual Studio Code extensions
for JavaScipt development - Note the basic differences between
client-side
andserver-side
JavaScript - Implement inline, internal and external JavaScript for
client-side
development - Explore the JavaScript console with:
alert
,console.log
anddocument.write
In future JavaScript Basics posts, we will:
- Implement JavaScript Data Types and Variables
- Recognize the differences between โsloppyโ and โstrictโ modes
- Implement JavaScript functions and methods
- Apply conditional statements and operators
- Construct and utilize objects, arrays, and loops
- Construct classes and use modules
- Leverage JavaScript tools for linting, formatting, and testing
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:
- Auto Rename Tag
- Bracket Pair Colorizer
- ES7 React/Redux/GraphQL/React-Native snippets
- Highlight Matching Tag
- indent-rainbow
- Live server
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:
- Create a working directory in your preferred location
cd
into your preferred working directory- Open Visual Studio Code
- Use the
code .
command in the terminal - Drag the folder into the Visual Studio Code icon
- Use the
- Create an
index.html
file - Open the file and type
!
+TAB
to create some HTML boilerplate - Change the
title
to something fitting - Add an
h1
with the message:Hello, world!
inside the<body></body>
tags - Click on the Visual Studio Code extension icon on the left side-bar(
โงโx
) - Type
Live Server
into the search field - Install the Live Server extension by Ritwik Dey
- Right-click on the
index.html
file and selectOpen with LiveServer
(โL โO
) - 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
- Bracket Pair Colorizer
- ES7 React/Redux/GraphQL/React-Native snippets
- Highlight Matching Tag
- indent-rainbow
- ~~Live Server(already installed)~~
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.
- alert(โhiโ);
- console.log(โhiโ);
- document.write(โhiโ);
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:
- Setup a
local JavaScript development environment
using Visual Studio Code - Install useful
Visual Studio Code extensions
for JavaScipt development - Differentiate between
client-side
andserver-side
JavaScript - Implement inline, internal and external JavaScript for
client-side
development - Leverage the JavaScript console with:
alert
,console.log
anddocument.write
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! ๐๐ผ