SSWD 2025 Lab 1 - JavaScript Review

Enda Lee 2025

PDF Version

Quick Start

Web applications work best when hosted on a web server. The web app needs to run in a web server as same origin policy may prevent the browser from accessing network data in locally loaded pages.

This example uses Node.JS to host the site.

1. Download or clone this repository to your computer

git clone https://git.endalee.ie/enda/sswd2025-Lab1.git

Recommened:

1. create a webapps folder somewhere (e.g. your home folder) to store your lab work - that way you won't lose anything!
2. In the File Explorer view menu, select the options to show hidden files and file extensions - it will avoid a lot of confusion later.

2. Open the site folder (important!) in VS Code.

From the file menu, chose open folder and then browse to where your lab1 folder is located and open it.

Explorer the site in the folder view. The actual website is in the public folder. The other files, e.g. server.js and package.json are used to define and configure a Node.js webserver. Open the files to see what they contain but don't modify for now.

3. Start the webserver and try out the site

3.1 Open a new Terminal from the menu in vs code

Run the following commands to install dependencies (see the node_modules folder after) and start the server.

1. Install dependencies using the node package manager:npm install
2. run the start script defined in package.json to start the server:npm run start

⚠ If you see a npm Execution Policy Error in Windows, enter the following command in PowerShell

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

answer Y if prompted then try running npm install again.

You should see the following:

Now open http://localhost:3000 in a web browser to load index.html from the public folder

Open the page in your web browser using the server address.

Lab Exercises

Getting started

1. Make sure that the ./js/script.js is loaded using a <script src=""></script> element at the end of the <body> section of index.html.

2. Add the following to script.js :

   console.log("Hello World");
   

3. Use the console in your browsers developer tools to see the output.

Interactive tutorials at learn-js.org

Try the tutorials at https://www.learn-js.org/. Start with the basics but move to advanced if you find them too easy. Make sure to try the interactive exercises - look for the Start Exercise button in each section.

Other JavaScript Resources to try

JavaScript Refresher

The Modern JavaScript Tutorial - A full free online book