Explore

CSD3103: Practices of Node.js NPM Application Development with Visual Studio Code

Objective: Familiarize you with the basics of Node.js development using NPM (npmjs.com) and Visual Studio Code, and execute JavaScript coding drills escalating from simple scripts to TypeScript objects.

Is "npm" an acronym for "Node Package Manager"?

npm is not an acronym

Contrary to popular belief, npm is not in fact an acronym for "Node Package Manager"; It is a recursive bacronymic abbreviation for "npm is not an acronym" (if the project was named "ninaa", then it would be an acronym). The precursor to npm was actually a bash utility named "pm", which was the shortform name of "pkgmakeinst" - a bash function that installed various things on various platforms. If npm were to ever have been considered an acronym, it would be as "node pm" or, potentially "new pm".

Setup and Introduction

Installation: Ensure Visual Studio Code is installed along with the Node.js runtime. Install Node.js from

nodejs.org⁠

and Visual Studio Code from

code.visualstudio.com⁠

Visual Studio Code Configuration:

Install the following extensions: ESLint, Prettier, and npm. And Live Server.

Configure your environment for Node.js by setting up launch.json for debugging.

Create Your First Node.js Project:

Open Visual Studio Code, create a new folder named NodeJsBasics, and open it.

Open a new terminal in Visual Studio Code and run npm init -y to create a package.json file.

Install Express.js as an example of a Node.js framework: npm install express.

Introduction to NPM:

Discuss the purpose of NPM and its role in managing packages and dependencies.

Explore package.json and its significance in a Node.js project.

JavaScript Coding Drills

Drill #1: Hello World

Create a file hello.js and write a simple script to print "Hello, World!" to the console.

Drill #2: Basic Variables

Use var,let and const to declare variables. Create a script that calculates the area of a rectangle and prints it.

⁠

Drill #3: Functions and Scoping

Write a JavaScript function that takes two numbers and returns their sum. Demonstrate function scoping.

Here are the JavaScript programs for the first three coding drills :

Drill #1: Hello World

Create a file named hello.js and add the following JavaScript code:

console.log("Hello, World!");

To run this script, use the command line and navigate to the directory containing your hello.js file, then execute:

node hello.js

This will print "Hello, World!" to the console.

Drill #2: Basic Variables

Create a file named rectangleArea.js and add the following JavaScript code:

// Declare dimensions of the rectangle using letlet length = 5; // length of the rectanglelet width = 3; // width of the rectangle

// Calculate area using constconst area = length * width;

// Print the area to the consoleconsole.log("The area of the rectangle is:", area);

To execute this script, run:

node rectangleArea.js

This script calculates the area of a rectangle with a length of 5 units and a width of 3 units, then prints the result.

Drill #3: Functions and Scoping

(Note scoping also connects to the TDZ which we will cover in a Future Lesson)

Create a file named sumFunction.js and add the following JavaScript code:

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

// Example of function scopinglet number1 = 8;let number2 = 12;const sum = calculateSum(number1, number2);

console.log("The sum of", number1, "and", number2, "is:", sum);

To run this program, use:

node sumFunction.js

This program defines a function calculateSum that takes two numbers and returns their sum. It demonstrates function scoping by accessing variables number1 and number2 defined outside but used inside the function when it is called.

Each of these scripts provides a clear example of the fundamental concepts and practices in JavaScript within a Node.js environment, suitable for initial learning and experimentation.

Drill #4: Objects and Arrays

Create an object representing a book with properties like title, author, and year. Display each property.

For Drill #4, Let's create a more complex Node.js script that involves managing a bookstore.

This script will demonstrate modelling books as objects, adding them to an array, and then performing operations like displaying and organizing these books.

Step-by-Step Guide to Creating a Bookstore Management Program

1. Create a File

Create a new file named bookstore.js.

2. Write the JavaScript Code

Below is the code you can write in bookstore.js to manage a simple bookstore:

// Define a class to represent a Bookclass Book { constructor(title, author, year) { this.title = title; this.author = author; this.year = year; }

// Method to display book details displayInfo() { console.log(`Title: ${this.title}, Author: ${this.author}, Year: ${this.year}`); }}

// Create an array to store the book objectslet bookstore = [];

// Function to add books to the bookstorefunction addBook(book) { bookstore.push(book);}

// Function to display all books in the bookstorefunction displayBooks() { bookstore.forEach(book => book.displayInfo());}

// Create book objectsconst book1 = new Book("To Kill a Mockingbird", "Harper Lee", 1960);const book2 = new Book("1984", "George Orwell", 1949);const book3 = new Book("The Great Gatsby", "F. Scott Fitzgerald", 1925);

// Add books to the bookstoreaddBook(book1);addBook(book2);addBook(book3);

addBook(book1);addBook(book2);addBook(book3);

// Display all booksconsole.log("Displaying all books in the bookstore:");displayBooks();

3. Run the Program

To run this script, navigate to the directory containing your bookstore.js file and execute:

node bookstore.js

Explanation of the Code

Book Class: A simple class Book is defined with properties for the title, author, and publication year, along with a method to display the book's details.

Bookstore Array: An array bookstore is used to store multiple Book objects.

addBook Function: This function takes a Book object as an argument and adds it to the bookstore array.

displayBooks Function: This function iterates over the bookstore array and calls the displayInfo method on each Book object to print its details.

This script showcases how to work with objects and arrays in JavaScript, providing a foundational understanding of managing collections of items, which is common in many real-world applications. The principles demonstrated here are highly applicable across various types of software development tasks involving data management.

Drill #5: Modules

Create a module in calculator.js that exports functions for addition, subtraction, multiplication, and division. Import and use it in index.js.

For Drill #5, we'll set up a simple module system using Node.js. This involves creating two files: calculator.js for the module which contains the arithmetic functions, and index.js for the main script that imports and uses these functions.

Step 1: Create the Module File (calculator.js)

Create a file named calculator.js and add the following JavaScript code:

// Define functions for basic arithmetic operations

function add(x, y) { return x + y;}

function subtract(x, y) { return x - y;}

function multiply(x, y) { return x * y;}

function divide(x, y) { if (y === 0) { console.log("Error: Division by zero is not allowed."); return undefined; } return x / y;}

// Export the functions so they can be used in other filesmodule.exports = { add, subtract, multiply, divide};

Step 2: Create the Main Script File (index.js)

Create another file named index.js in the same directory as calculator.js. Add the following code to import and use the calculator module:

// Import the calculator moduleconst calculator = require('./calculator');

// Examples of using the imported functionsconst sum = calculator.add(5, 3);const difference = calculator.subtract(10, 4);const product = calculator.multiply(7, 6);const quotient = calculator.divide(20, 5);

// Display the resultsconsole.log(`Sum: ${sum}`);console.log(`Difference: ${difference}`);console.log(`Product: ${product}`);console.log(`Quotient: ${quotient}`);

Step 3: Running the Program

To run the program, navigate to the directory containing your files and execute index.js using Node.js:

node index.js

Explanation of the Code

Module Creation (calculator.js): This file defines four functions—add, subtract, multiply, and divide. These functions are then exported using module.exports, making them available to be imported into other JavaScript files.

Module Importing and Use (index.js): This file imports the calculator module using require('./calculator'). It then uses the functions from the calculator module to perform arithmetic operations and prints the results.

This setup exemplifies how modularization in Node.js can help organize and reuse code effectively, allowing you to maintain separate functionalities in different files and import them as needed. This is fundamental for building scalable and maintainable software systems.

Drill #6: Template Literals

Use template literals to create a complex string that includes variables and expressions.

For Drill #6, we'll explore using JavaScript ES6 template literals to create complex strings. Template literals are enclosed by backticks (`) and allow embedded expressions, which are expressions included within ${}.

Step-by-Step Guide: Using Template Literals in JavaScript

1. Create a File

Create a file named templateLiterals.js.

2. Write the JavaScript Code

Add the following JavaScript code to templateLiterals.js:

javascriptCopy code// Define some variables to use within template literalsconst user = { name: "James T. Kirk", role: "Captain", ship: "USS Enterprise"};const missionCount = 112;

// Create a complex string using template literalsconst introduction = `Hello, my name is ${user.name}, and I am the ${user.role} of the ${user.ship}.I have commanded over ${missionCount} missions across various galaxies.Today's date is ${new Date().toLocaleDateString()}.`;

// Use template literals to perform calculations directly within the stringconst operationalYears = 5;const report = `As of ${new Date().getFullYear()}, the ${user.ship} has been operational for ${operationalYears} years.In this time, we've completed ${Math.floor(missionCount / operationalYears)} missions per year on average.`;

// Display the resultsconsole.log(introduction);console.log(report);

3. Run the Program

To run this script, navigate to the directory containing templateLiterals.js and execute:

bashCopy codenode templateLiterals.js

Explanation of the Code

Template Literals: The script defines a user object and uses its properties within a template literal to create a detailed introduction. It also demonstrates how to embed JavaScript expressions directly within the template literals, like calculations and method calls (e.g., new Date().toLocaleDateString() and Math.floor()).

Dynamic Content: Template literals support dynamic expressions, which are evaluated at runtime. This allows the inclusion of current dates, calculated values, and other dynamic content directly in strings without concatenation.

Multiline Strings: The example also illustrates how template literals naturally support multiline strings, making them ideal for creating complex, formatted text.

This functionality showcases the power of template literals for creating readable, maintainable code when dealing with complex strings in JavaScript applications, enhancing both functionality and readability.

Drill #7: Spread Operator

Use the spread operator to combine arrays and objects in creative ways.

For Drill #7, we'll create an illustrative example using the JavaScript spread operator, specifically for a flower shop scenario. The spread operator (...) is a useful feature in JavaScript that allows elements of an array or properties of an object to be expanded into another array or object. This can simplify combining data, cloning objects, and working with arrays in various operations.

Step-by-Step Guide: Using the Spread Operator in a Flower Shop Context

1. Create a File

Create a file named flowerShop.js.

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.