Introduction to JavaScript Programming: Creating Your First JavaScript and NodeJS Program

2020-09-16 14:30:20 | #programming #javascript | Part 1 of 5

Tested On

  • Linux Ubuntu 20.04
  • Windows 10
  • macOS Catalina

JavaScript (JS) is the programming language of the web, allowing us to make web pages and other browser-based content dynamic. A web page consists primarily of 3 components— HTML data/structure, CSS formatting/styling, and JS behavior. JavaScript makes pages alive and complex, but it's also a powerful scripting language on its own.

With NodeJS, a JavaScript runtime environment, JavaScript can run outside of the browser, similar to Python. This allows us to execute JavaScript directly on the server—to perform calculations, process files, set up REST APIs— making it a powerful end-to-end fullstack language that you can make complete web services with. Let's begin.

Introduction

This tutorial series is designed to teach you JavaScript fundamentals, not so much web development fundamentals. This series is suited for people who know little to nothing about programming and want to learn with JS as their first language. We won't be focusing too much on dynamic page manipulation or rendering. That is reserved for a future Web Developer tutorial series. With that being said, we still need to be able to run JavaScript in a browser setting, so we need to set up the minimum amount of HTML to load our main JS script file(s).

How to Run JavaScript in the Browser

Create the following root folder and files. These are file formats the browser can understand— .html for our page structure, and .js for our dynamic JS script.

▾ javascript-boilerplate/
  index.html
  app.js

Filename: index.html

<html>
  <head>
    <title>JavaScript Tutorial</title>
    <script type="text/javascript" src="app.js"></script>
  </head>
  <body></body>
</html>

Filename: app.js

console.log('Hello world!')

This will print "Hello world!" to the browser's console. To access the console, here are the instructions for Google Chrome, Mozilla Firefox, and Microsoft Edge.

How to Run JavaScript on the Server with NodeJS

A server just refers to any computer environment. Even your laptop counts as a server, so you'll be able to run our app.js JavaScript file directly from the terminal, without the use of a browser.

How to Install nvm and NodeJS on Windows 10

Follow these installation instructions from Microsoft. Follow their recommandation to install nvm beforehand, which makes it easier to install different versions of NodeJS. You might think, "wouldn't I always want to install the latest version of NodeJS?" In an ideal world, yes. Unfortunately, you will find that certain environments will prevent you from upgrading to the latest version because it would break compatibility with a package or some old code another developer, before you, has written. Some cloud servers also may not support the latest version of NodeJS. You will have to get used to gathering information about your environment, ahead of time, switching to the compatible version with nvm, and then writing your code.

How to Install nvm and NodeJS on Linux Ubuntu and macOS

Follow the installation instructions at the nvm github page. Afterwards, navigate to the NodeJS releases page, and download the appropriate version with the following nvm commands. This example installs 14.11.0

sudo apt update
nvm install 14.11.0
nvm use 14.11.0
nvm alias default 14.11.0
nvm --help

After you run the following commands, NodeJS will execute as version 14.11.0, moving forward. You can install many different versions of NodeJS with the nvm install command, and switch between them with nvm use. You can even execute without switching by running your script through nvm like so: nvm run 10.0.0 app.js. This quickly verifies that your app.js file is compatible with NodeJs 10.0.0 (make sure to install it first).

How to Code Your First JavaScript/NodeJS Program

For the rest of this tutorial series, we're going to be modifying the app.js file. If you're running JavaScript in the browser, you have to save app.js after making modifications to it, and then refresh the browser to get the results to display in the console. If you're using NodeJS, you just have to save app.js and then run node app.js. Add the following line of code to your app.js file and do just that, and you should see "hello world!" printed to the console.

console.log('Hello world!');

Object Oriented Programming with JavaScript

console.log() is a function we can invoke to print messages to the console. To be precise, log() is the function, and console is the package it belongs to. JavaScript is an object-oriented programming language. Everything is an object with properties and methods/functions. Think of properties as metadata about an object, and methods as behavior to be carried out. Objects help us keep everything organized and modular. Just be aware there are different programming paradigms, and object-oriented programming is highly debated, with some programmers perferring the stateless, lighweight, functional programming style.

While OOP (object-oriented programming) makes it intuitive to group code into modules, people argue that it's overbloated—that they shouldn't have to import an entire vehicle when all they want is the wheel. And that your program shouldn't be changing the state (wheel size, pain color, etc.) of that vehicle object over time because that introduces complexity and variability that could lead to unexpected scenarios, combinations of scenarios, and bugs.

Whichever side of the argument you stand on, you will have to be familiar with these and many other programming paradigms, styles, and patterns.

How to Code Your First JavaScript Function

Functions (or methods) allow us to define reusable behavior that we can invoke with various parameters. We define functions with the function keyword. The format is as follows:

function function_name(parameter1, parameter2...):
    # do something

Let's use this example to update your app.js file with the following code:

function add(a, b) {
  return a + b;
}

var sum = add(1, 2)
console.log(sum)

Here, we define an add function that accepts the variables a and b, adds them together, and returns the sum total. In line 5, we invoke add by name, pass in 1 and 2, which produces 3, which we can store in the variable sum and print to the console.

Run node app.js again to see the calculations printed to the console. In future articles, you'll learn about what this code means in details. You'll learn about defining variables with var, and returning values with return.

Conclusion

That concludes our introductory JavaScript/NodeJS tutorial. You can now add code you learn in future tutorials to your app.js file, and have it running, immediately.

If this tutorial was too easy for you, and you're interested in making interactives and games, we recommend you take our Learn JavaScript While Building a Game Framework course, which teaches you JavaScript and ES6 while you build an HTML5 Canvas, physics-based framework, from scratch. You'll also learn drag and drop, mouse following, velocity, acceleration, friction, and many other useful functionality you can build interactives and games with. In addition, it compiles into a browser-compatible ES2015 build. Start making canvas applications, today.

Want To See More Exercises?

View Exercises View Courses

Comments

You must log in to comment. Don't have an account? Sign up for free.

Subscribe to comments for this post

Want To Receive More Free Content?

Would you like to receive free resources, tailored to help you reach your IT goals? Get started now, by leaving your email address below. We promise not to spam. You can also sign up for a free account and follow us on and engage with the community. You may opt out at any time.



Tell Us About Your Project









Contact Us

Do you have a specific IT problem that needs solving or just have a general IT question? Use the contact form to get in touch with us and an IT professional will be with you, momentarily.

Hire Us

We offer web development, enterprise software development, QA &amp; testing, google analytics, domains and hosting, databases, security, IT consulting, and other IT-related services.

Free IT Tutorials

Head over to our tutorials section to learn all about working with various IT solutions.

Contact