Official (Open)

SCHOOL OF COMPUTING

ST0523 Fundamentals of Programming

Practical 0: Setup

What you will learn / do in this lab

 Download and install node.js & Visual Studio Code (VS Code)
 Configure VS Code to work with node.js
 Write the first computer program using JavaScript
 Execute the program to display the output on the terminal
console of VS Code

1 April 2025
 Official (Open)

Note: The versions shown in the screenshots may differ from what you see during
installation. This is because the screenshots reflect the version available at that time. Newer
versions may be available for updates.

Guide to Installing Node.js and Visual Studio Code

1. View the following videos to get a quick idea what is node.js and Visual Studio Code.
Search and view any node.js installation video in YouTube to see how installation can
be easily done.
Overview of Visual Studio Code: Documentation for Visual Studio Code

Sample YouTube videos:

(265) What is Node.js || Node.js Installation || Coders Arcade - YouTube

(265) #02 Installing NODE JS | Fundamentals of NODE JS | A Complete NODE JS Course - YouTube

2. Install Node.js

2.1 Visit the official Node.js website: https://nodejs.org/en

Note : This may show a newer version. Do not be alarm.

2.2 Click on the green LTS button to download the installer for your operating system
(Windows, macOS, or Linux)

2 April 2025
 Official (Open)

2.3 Once download is complete, run the installer file. You can accept all default options
during the installation process. Follow the prompts to complete the installation. The
default settings will work fine, so just keep clicking "Next" until you reach "Finish.".

2.4 Verify Node.js installation

Open your command prompt

by entering 'cmd'

3 April 2025
 Official (Open)

A command prompt interface will appear, and you may enter 'node -v'. This should display
the version number of node that you had installed. Do note that the version may be different
here due to new updates.

7
3. Install Visual Studio Code

3.1 Visit the official : https://code.visualstudio.com/download

Access this URL to download Visual Studio Code (choose the one that is
compatible with your notebook, choose the latest version):

3.1 Once download is complete, run the installer file. You can accept all default options
during the installation process.

[For windows user, note that ‘System Installer’ is for the users who has full
administrative right to their PC, whereas ‘User Installer’ is for those without.]

4 April 2025
 Official (Open)

3.2 Launch Visual Studio Code:

a) Create a new folder on your desktop or hard drive, called "FOP", in this case, the
"FOP" folder is created on the desktop, e.g. C:\Users\s43546\Desktop\FOP

5 April 2025
 Official (Open)

b) In VS Code, from the menu, choose View à Explorer to show the Explore side bar.
Alternatively, you may click on the icon directly to access the Explorer side
bar.

c) Click "Open Folder " button on the left pane of the screen. Select the "FOP" folder
that you have just created in the previous step.

Your explorer should display the content of "FOP" folder which is currently empty.
4. Write your first line of JavaScript program.

6 April 2025
 Official (Open)

4.1 Click on the 'New File' or the icon shown below to create new file.

a) Type filename as helloWorld.js.

b) Type the console.log statement as shown below and save (CRTL + S) the file.

Note: If you notice a 'white dot' beside your file name, it means that you have yet to
save your file!

c) From top menu, select Terminal > New Terminal.

7 April 2025
 Official (Open)

d) A terminal window will be displayed at the bottom area of the screen showing the
current file directory you are in. Type "node helloWorld.js" in the terminal and click
the 'Enter' button. You should be able to see the output "Hello World" displayed.

What we just did was to execute the file in the terminal using the node command,
followed by the name of the file.

Tip: The file name can be lengthy at times, and we may type the file name wrongly,
so to avoid this – we can type "node " followed by the first character of the file name
(in this case would be 'h') and click on the 'Tab' button on the keyboard. This will
populate the next file name that starts with the character 'h'.

and 'Tab' button

e) Now that you can execute the program, open up next Practical and continue the
exercises over there! Have fun with FOP!

8 April 2025
 Official (Open)

5. To set up folders in your desktop or local hard disk to store future FOP
JavaScript Programs

Every JavaScript program must have file extension .js. For every topic there will be a
Practical worksheet where you are required to write many JavaScript program. Thus,
you must systematically organize your files so that you know where to locate your
exercises.

The following section is to create folders to store your codes in by Practical worksheet.

6. Create 8 subfolders to store future JavaScript programs. Do not have spaces in between.
Folders name: p1, p2, p3………….…p8
Do not create a folder name p 1 i.e. do no have any spaces in between.

Create a JS program using only console.log statement as follows and run the program to
display the output:

Folder File name Display using console.log Check if results

statements only is correct
p1 p1test.js I am in p1 folder
p2 p2test.js My name is <use your name>.

-- End –

9 April 2025
 Official (Open)

Annex

Command prompt
Remarks
commands
cd.. navigate one level up
cd\ navigate to root of drive
cd fop navigate to sub-folder fop
dir list the files in the current folder
mkdir pract1 create a new sub-folder called pract1
rmdir test delete sub-folder test
cls Clears the terminal

10 April 2025