Skip to content
Permalink
Browse files
fixed some issues in lab notes
  • Loading branch information
aa7401 committed Jan 31, 2019
1 parent e3d0582 commit 16211ac43f08ed128532c67dc02bc1edaadb7530
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 13 deletions.
@@ -34,9 +34,9 @@ We will be working through some exercises that make use of all of these.

Start the server:

1. Open the terminal (on Windows this is called the bash shell).
2. Navigate to the `exercises/01_http/` directory.
3. Install the dependencies using 1. `npm install koa koa-router koa-bodyparser koa-static js2xmlparser`.
1. Open the terminal.
2. Navigate to the `exercises/01_http/01_url/` directory.
3. Install the dependencies using `npm install koa koa-router koa-bodyparser koa-static js2xmlparser`.
4. Start the server using `node index.js`
5. Access the root url, notice that the message **Hello World** is displayed in the browser.
6. Access the `/hello` url. This should result in the same message being displayed.
@@ -108,7 +108,7 @@ In this section you will learn about a number of JavaScript functions. In each c
1. Modify the route to add a second parameter called `index2`.
2. Make sure this is triggered by restarting the server and accessing this by passing a second parameter.
3. Modify the script to print out both book titles.
3. Next you need to add some validation to make sure the script does not crash:
3. Next you need to add some validation to make sure the script does not crash (note that if you are using GoormIDE you will not be able to test it):
1. If the index in the URL exceeds to number of books in the array you get an error. Insert an [`if...else` statement](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) that sends a suitable message to the browser if the index number in the URL is too high.
2. The index must be a number. Use the [`isNaN()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN) to check and send a suitable message to the browser if it is not. if it is, use the [`parseInt()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt) to convert it to a number.
3. The number needs to be a whole number (integer). All JavaScript numbers are objects and have a number of useful functions. Use the [`Number.isInteger()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isInteger) to check it is indeed an integer. Send a suitable message to the browser if it is not.
@@ -135,7 +135,10 @@ Open the `index.js` file. The route is between lines 37-43.
1. Modify the route so that if the `format` query string is set to `lower` the name is set as [lowercase](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toLowerCase).
2. Add a second query string called `reverse`:
1. if missing or set to `false` the text is left alone.
2. If it has a value of `true` the text should be reversed by using the [`split()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) to convert the string to an array of characters and then the [`join()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) to convert the array back into a string.
2. If it has a value of `true` the text should be reversed. You will need to use the following JavaScript functions, read the documentation carefully before trying to complete the task:
1. You will need to use the [`split()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split) to convert the string to an array of characters.
2. Then you will need to use the [Array.reverse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) function to reverse the array indexes.
3. Finally the [`join()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join) to convert the array back into a string.

### 1.4 Request Headers

@@ -1,7 +1,7 @@

# Learning HTML5

The worksheet is based on the materials from the HTML lecture and you should refer to the [slide deck](https://goo.gl/DGFkr6) to help your understanding. It will take approximately **15 hours** to work through all the exercises and you should ensure that you have completed them all before attempting subsequent worksheets.
The worksheet is based on the materials from the HTML lecture and you should refer to the [slide deck](https://drive.google.com/open?id=1-kA3w6-H7AkW5iWRG2D1O-soxAnHgnU0YgOH3eYfeAQ) to help your understanding. It will take approximately **15 hours** to work through all the exercises and you should ensure that you have completed them all before attempting subsequent worksheets.

Before you start you need to download and new materials. To do this you will be carrying out three tasks:

@@ -41,7 +41,7 @@ You should get into the habit of doing this each time you sit down to work on yo

## 1 Syntax

Lets take a look at some basic HTML syntax. Start by locating the `exercises/03_html/01_syntax/` directory. Navigate to this using the SSH Terminal, install the `express` package and start the web server. If you navigate to the base route `/` you will see a screen full of text.
Lets take a look at some basic HTML syntax. Start by locating the `exercises/02_html/01_syntax/` directory. Navigate to this using the SSH Terminal, install the all the necessary `koa` packages and start the web server. If you navigate to the base route `/` you will see a screen full of text.

![the unformatted text](exercises/.images/chrome_07.png)

@@ -58,7 +58,7 @@ As you work, save the html file and refresh the browser, you don't need to resta

## 2 Lists

Now you have mastered the basics of html its time to move on to how it can be used to render lists of different types. Start by locating the files in the `exercises/03_html/02_lists/` directory. Now start the Express server and view the root URL `/`. This should display a simple page with the title **1980's Home Computers**.
Now you have mastered the basics of html its time to move on to how it can be used to render lists of different types. Start by locating the files in the `exercises/02_html/02_lists/` directory. Now install the necessary packages, start the `koa` server and view the root URL `/`. This should display a simple page with the title **1980's Home Computers**.

Now, add a list on your web page. Insert the following lines of code after the paragraph describing clever uses for home computers:

@@ -110,11 +110,11 @@ Now you have mastered the basics of HTML markup we will look at one of the most

### 3.1 Routes

Every resource on the WWW (such as html documents and images) has a unique URL and so when we design our website we need to define these. In a website built using _NodeJS_ and _Express_ these are known as **routes**. Start by locating the `exercises/03_html/02_hypermedia/` directory. Start the web server and opening the `index.js` file.
Every resource on the WWW (such as html documents and images) has a unique URL and so when we design our website we need to define these. In a website built using _NodeJS_ and _Koa_ these are known as **routes**. Start by locating the `exercises/02_html/03_hypermedia/` directory. Start the web server and open the `index.js` file.

1. Some resources need to be directly accessible in the web browser (they are accessed either directly or loaded by the html web page). These need to have their own directly accessible URL.
1. One directory needs to be specified as being publicly available. In this example we have created a directory called `public/`
2. Express needs to make this directory public. This is achieved on line by importing a static module and using this to specify the public directory.
2. Koa needs to make this directory public. This is achieved on line by importing a static module and using this to specify the public directory.
3. assuming the server is running you can directly view the image using the URL `http://xxx:8080/paradox.jpeg`, remembering to substitute your server's URL.
2. Some resources are _virtual_ and are generated by a script running on the server before being sent back to the browser client.
1. There are some simple examples in `index.js`. Both the `/` and `/paradoxes` routes trigger scripts that take the contents of html files and send this back to the browser.
@@ -128,15 +128,15 @@ Every resource on the WWW (such as html documents and images) has a unique URL a

### 3.2 Hyperlinks

Now you understand the concept of URLs representing resources and how this relates to _routes_, it is time to start linking resources together. With the Express server running access the `/commodore` URL which should display a web page describing the **Commodore 64 home computer**
Now you understand the concept of URLs representing resources and how this relates to _routes_, it is time to start linking resources together. With the server running access the `/commodore` URL which should display a web page describing the **Commodore 64 home computer**

Add a link to the appropriate Wikipedia article to this web page, in a suitable location directly inside the `body` element:

```html
<p>Read the <a href="http://en.wikipedia.org/wiki/Retrocomputing">Wikipedia article for Retrocomputing</a>.</p>
```

To test the functionality in your browser you will need to make sure the Express server is running and navigate to the correct URL.
To test the functionality in your browser you will need to make sure the server is running and navigate to the correct URL.

A link, defined by the `a` element contains the URL of the linked web page as its `href` attribute. The link above contains an absolute path to a document on the external server. The absolute path begins will full protocol identifier and domain name.

@@ -13,7 +13,6 @@ app.use(views(`${__dirname}/views`, { extension: 'html' }, {map: { handlebars: '
router.get('/', async ctx => await ctx.render('index'))
router.get('/commodore', async ctx => ctx.render('commodore64'))
router.get('/paradoxes', async ctx => ctx.render('paradoxes'))
router.get('/cathedral', async ctx => ctx.render('cathedral'))

router.get('/date', async ctx => {
const today = new Date()

0 comments on commit 16211ac

Please sign in to comment.