Skip to content
Permalink
Browse files
fixed merge conflict
  • Loading branch information
aa7401 committed Feb 11, 2019
2 parents 21f0d64 + 4b6ef20 commit 42406c8c3cf10d357df123b94f7237832ccd4322
Show file tree
Hide file tree
Showing 12 changed files with 179 additions and 57 deletions.
@@ -139,12 +139,12 @@ Once the web server is up and running you access the page by pointing the browse

As we develop more complex web apps it becomes more and more difficult to fully test our app every time we change the code. By not testing everything at regular intervals there is an increasing chance that our new code could break the existing code in our system. Since regular testing is a chore, programmers have developed ways to automate this process.

In this section you will be given a sneak preview of how an automated test suite works. We will be using a testing framework developed by Facebook, called [Jest](https://jestjs.io) and will be using a second tool called [Supertest](https://github.com/visionmedia/supertest#readme) which allows us to interact with our code using http.
In this section you will be given a sneak preview of how an automated test suite works. We will be using a testing framework developed by Facebook, called [Jest](https://jestjs.io) and will be using a second tool called [Supertest](https://github.com/visionmedia/supertest#readme) which allows us to interact with our code using http. Rather than using the status code numbers in our tests we will use a module called [http-status-codes](https://www.npmjs.com/package/http-status-codes) to display these as human-readable strings.

The process requires you to install both these packages and then run the `jest` command:

```shell
$ npm install jest supertest
$ npm install jest supertest http-status-codes
$ ./node_modules/.bin/jest
PASS .test/index.test.js
GET /
@@ -121,7 +121,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.
@@ -148,7 +148,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.

0 comments on commit 42406c8

Please sign in to comment.