├── git ├── build.sh ├── merge.png ├── versions.png ├── phd101212s.png ├── play-changes.png ├── README.md ├── PITCHME.md └── PITCHME.html ├── js ├── build.sh ├── README.md └── PITCHME.md ├── html ├── build.sh ├── wordcloud.png ├── README.md ├── PITCHME.md └── PITCHME.html ├── http ├── build.sh ├── resp.md ├── source.md ├── README.md └── PITCHME.md ├── js_dom ├── build.sh ├── button.html ├── button2.html ├── button3.html ├── README.md └── PITCHME.md ├── js_fetch ├── build.sh ├── .DS_Store ├── client │ ├── index.html │ ├── indexasync.html │ ├── index.js │ ├── indexasync.js │ └── indexasyncexception.js ├── server.js ├── package.json ├── README.md └── PITCHME.md ├── json ├── build.sh ├── writeJSONfile.js ├── postStuff.js ├── README.md ├── PITCHME.md └── PITCHME.html ├── code_quality ├── build.sh ├── README.md ├── PITCHME.md └── PITCHME.html ├── git_branch ├── build.sh ├── README.md └── PITCHME.md ├── git_collab ├── build.sh ├── README.md └── PITCHME.md ├── js_intro_node ├── build.sh ├── hello.js ├── .DS_Store ├── express_routing.js ├── package.json ├── express_parameters.js ├── server.js ├── README.md └── PITCHME.md ├── js_objects ├── build.sh ├── pet.js ├── README.md ├── PITCHME.md └── PITCHME.html ├── math_test ├── build.sh ├── README.md ├── PITCHME.md └── PITCHME.html ├── nodejs_rest ├── build.sh ├── client │ ├── index.html │ └── index.js ├── package.json ├── server.js ├── README.md ├── PITCHME.md └── PITCHME.html ├── comp1011_intro ├── build.sh ├── README.md ├── PITCHME.md └── PITCHME.html ├── nodejs_testing ├── build.sh ├── package.json ├── app.test.js ├── README.md ├── PITCHME.md └── PITCHME.html ├── .gitignore └── LICENSE /git/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /html/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /http/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js_dom/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js_fetch/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /json/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /code_quality/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /git_branch/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /git_collab/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js_intro_node/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js_objects/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /math_test/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /nodejs_rest/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /comp1011_intro/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /nodejs_testing/build.sh: -------------------------------------------------------------------------------- 1 | ../build.sh -------------------------------------------------------------------------------- /js_intro_node/hello.js: -------------------------------------------------------------------------------- 1 | console.log("hello world"); -------------------------------------------------------------------------------- /git/merge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/git/merge.png -------------------------------------------------------------------------------- /git/versions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/git/versions.png -------------------------------------------------------------------------------- /git/phd101212s.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/git/phd101212s.png -------------------------------------------------------------------------------- /html/wordcloud.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/html/wordcloud.png -------------------------------------------------------------------------------- /js_fetch/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/js_fetch/.DS_Store -------------------------------------------------------------------------------- /git/play-changes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stevenaeola/progblack_lectures/HEAD/git/play-changes.png -------------------------------------------------------------------------------- /js_dom/button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js_fetch/client/indexasync.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /js_fetch/client/index.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('click', function(event){ 2 | fetch('http://127.0.0.1:8090/list') 3 | .then(response => response.text()) 4 | .then(body => document.getElementById('content').innerHTML=body) 5 | .catch( (error) => alert(error)) 6 | }); 7 | -------------------------------------------------------------------------------- /math_test/PITCHME.md: -------------------------------------------------------------------------------- 1 | # TEST: Maths with markdown and reveal{data-background-color=#7E317B} 2 | 3 | 4 | --- 5 | 6 | ## Summary 7 | 8 | ::: incremental 9 | 10 | - $x+y = y+x$ 11 | - $(x+y)+z = x + (y+z)$ 12 | - Language agnostic 13 | 14 | ::: 15 | 16 | $$ \sum_{n=1}^{\infty} 2^{-n} = 1$$ 17 | --- 18 | -------------------------------------------------------------------------------- /js_fetch/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | app.use(express.static('client')); 5 | 6 | let instruments = [ 'piano', 'concertina', 'double bass']; 7 | 8 | app.get('/list', function (req, resp){ 9 | resp.send(instruments); 10 | }); 11 | 12 | app.listen(8090); 13 | -------------------------------------------------------------------------------- /js_fetch/client/indexasync.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('click', async function(event){ 2 | try{ 3 | let response = await fetch('http://127.0.0.1:809/list'); 4 | let body = await response.text(); 5 | document.getElementById('content').innerHTML=body; 6 | } catch(e) { 7 | alert(e); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /js_fetch/client/indexasyncexception.js: -------------------------------------------------------------------------------- 1 | window.addEventListener('click', async function(event){ 2 | try{ 3 | let response = await fetch('http://127.0.0.1:809/list'); 4 | let body = await response.text(); 5 | document.getElementById('content').innerHTML=body; 6 | } catch(e) { 7 | alert(e); 8 | } 9 | }); 10 | -------------------------------------------------------------------------------- /nodejs_rest/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | REST example 5 | 6 | 7 | 8 |

Minimal REST POST example with JSON encoding

9 |
10 | 11 |
12 | 13 | -------------------------------------------------------------------------------- /nodejs_testing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs_testing", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "app.test.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "author": "", 10 | "license": "ISC", 11 | "dependencies": { 12 | "supertest": "^6.3.3" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /js_dom/button2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 13 | -------------------------------------------------------------------------------- /js_fetch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js_fetch", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /js_intro_node/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js_intro_node", 3 | "version": "1.0.0", 4 | "description": "Simple express example", 5 | "main": "server.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "start": "node server.js" 9 | }, 10 | "author": "s.p.bradley@durham.ac.uk", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.17.1" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /http/resp.md: -------------------------------------------------------------------------------- 1 | - A plain text file 2 | - An image file (jpeg, gif, png) 3 | - An executable (.exe, .msi) 4 | - A document (pdf, word) 5 | - Some data (XML, JSON) 6 | - A CSS file 7 | - A JavaScript program 8 | - A flash movie 9 | - A redirection (in headers) 10 | - A cookie value (in headers) 11 | - An error 12 | - A combination of the above 13 | 14 | Response to request may be used to update or replace some or all of a web page. 15 | -------------------------------------------------------------------------------- /json/postStuff.js: -------------------------------------------------------------------------------- 1 | // for use in client (browser) 2 | 3 | async function postStuff(){ 4 | let response = await fetch('https://httpbin.org/post', 5 | { 6 | method: 'POST', 7 | headers: { 8 | 'Accept': 'application/json, text/plain, */*', 9 | 'Content-Type': 'application/json' 10 | }, 11 | body: JSON.stringify({a: 1, name: 'Billy'}) 12 | }) 13 | let jsonContent = await response.json(); 14 | return jsonContent 15 | }; 16 | -------------------------------------------------------------------------------- /nodejs_rest/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nodejs_rest", 3 | "version": "0.0.1", 4 | "description": "Example of REST API", 5 | "main": "server.js", 6 | "scripts": { 7 | "start": "nodemon server.js", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "s.p.bradley@durham.ac.uk", 11 | "license": "ISC", 12 | "dependencies": { 13 | "express": "^4.18.2" 14 | }, 15 | "devDependencies": { 16 | "nodemon": "^3.0.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /http/source.md: -------------------------------------------------------------------------------- 1 | - Hyperlink followed 2 | - Form submitted 3 | - Clicking in an image map 4 | - Image included in source file 5 | - CSS included in source file 6 | - Frameset or iframe in HTML source (can be recursive) 7 | - Following a redirection (including 301 error) 8 | - JavaScript execution (triggered by mouseover etc) 9 | - Plugin execution e.g. pdf 10 | - From a server (e.g. curl, robot, web service request) 11 | 12 | Response to request may be used to update or replace some or all of a web page. -------------------------------------------------------------------------------- /js_dom/button3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /nodejs_rest/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express'); 2 | const app = express(); 3 | 4 | let names = []; 5 | // parse JSON bodies, where they have the document type application/json 6 | app.use(express.json()); 7 | app.use(express.static('client')); 8 | 9 | app.get("/names", function(req, resp){ 10 | resp.send(names); 11 | }); 12 | 13 | app.post("/name", function(req, resp){ 14 | console.log("request body", req.body); 15 | names.push(req.body.my_input); 16 | resp.send(names); 17 | }); 18 | 19 | app.listen(8090); -------------------------------------------------------------------------------- /js_intro_node/express_parameters.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | 4 | app.get('/random/:max', function(req, resp){ 5 | max = parseInt(req.params.max) 6 | rand = Math.floor(Math.random()*max) +1 7 | console.log('Max via url is ' + max + ' rand is ' + rand) 8 | resp.send('' + rand) 9 | }) 10 | 11 | app.get('/r', function(req, resp){ 12 | max = parseInt(req.query.max) 13 | rand = Math.floor(Math.random()*max) +1 14 | console.log('Max via query is ' + max + ' rand is ' + rand) 15 | resp.send('' + rand) 16 | }) 17 | 18 | app.listen(8090) 19 | -------------------------------------------------------------------------------- /js_intro_node/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | const app = express() 3 | 4 | app.get('/random/:max', function(req, resp){ 5 | let max = parseInt(req.params.max) 6 | let rand = Math.floor(Math.random()*max) +1 7 | console.log('Max via url is ' + max + ' rand is ' + rand) 8 | resp.send('' + rand) 9 | }) 10 | 11 | app.get('/r', function(req, resp){ 12 | let max = parseInt(req.query.max) 13 | let rand = Math.floor(Math.random()*max) +1 14 | console.log('Max via query is ' + max + ' rand is ' + rand) 15 | resp.send('' + rand) 16 | }) 17 | 18 | app.listen(8090) -------------------------------------------------------------------------------- /nodejs_rest/client/index.js: -------------------------------------------------------------------------------- 1 | const form = document.getElementById('my_form'); 2 | form.addEventListener('submit', async function(event){ 3 | event.preventDefault(); 4 | const formData = new FormData(form); 5 | const formJSON = JSON.stringify(Object.fromEntries(formData.entries())); 6 | console.log("Form data", formData); 7 | const response = await fetch('/name', 8 | { 9 | method: 'POST', 10 | headers: { 11 | "Content-Type": "application/json" 12 | }, 13 | body: formJSON 14 | }); 15 | if(response.ok){ 16 | const responseBody = await response.text(); 17 | console.log("response from POST: ", responseBody) 18 | } 19 | else{ 20 | alert('Problem with POST request ' + response.statusText); 21 | } 22 | // do nothing with the response 23 | }) 24 | -------------------------------------------------------------------------------- /js_objects/pet.js: -------------------------------------------------------------------------------- 1 | let pet = {height: 0.76, weight: 80, species: "goat"}; 2 | 3 | let coatLength = pet.height; 4 | pet.weight += 5; 5 | pet["colour"] = "red"; // no declaration required 6 | 7 | pet.draw = function(){ alert("I am a pet");} 8 | pet.draw(); 9 | 10 | pet.draw = function(){ 11 | alert("I am a pet this big: " + this.height); 12 | } 13 | pet.draw(); 14 | 15 | for (let x of [1,2,3]){console.log(x)}; 16 | 17 | const me = {name: 'Steven', game: 'Lecturer'}; 18 | for(let k in me){ 19 | console.log('I have a ' + k); 20 | console.log('It is ' + me[k]); 21 | } 22 | 23 | class Pet{ 24 | constructor(h, w, s){ 25 | this.height = h; 26 | this.weight = w; 27 | this.species = s; 28 | } 29 | draw(){ 30 | alert("I am a pet this big: " + this.height); 31 | } 32 | } 33 | let p = new Pet(0.76, 80, "goat"); 34 | p.draw(); 35 | -------------------------------------------------------------------------------- /nodejs_testing/app.test.js: -------------------------------------------------------------------------------- 1 | 2 | 'use strict'; 3 | 4 | const request = require('supertest'); 5 | const app = require('./app'); 6 | 7 | describe('Test the things service', () => { 8 | test('GET /thing/list succeeds', () => { 9 | return request(app) 10 | .get('/thing/list') 11 | .expect(200); 12 | }); 13 | 14 | test('GET /thing/list returns JSON', () => { 15 | return request(app) 16 | .get('/thing/list') 17 | .expect('Content-type', /json/); 18 | }); 19 | 20 | test('GET /thing/list includes red hair', () => { 21 | return request(app) 22 | .get('/thing/list') 23 | .expect(/red hair/); 24 | }); 25 | 26 | test('GET /thing/1 succeeds', () => { 27 | return request(app) 28 | .get('/thing/1') 29 | .expect(200); 30 | }); 31 | 32 | test('GET /thing/1 returns JSON', () => { 33 | return request(app) 34 | .get('/thing/1') 35 | .expect('Content-type', /json/); 36 | }); 37 | 38 | test('GET /thing/1 includes 40', () => { 39 | return request(app) 40 | .get('/thing/1') 41 | .expect(/40/); 42 | }); 43 | 44 | test('POST /thing/add succeeds', () => { 45 | const params = {'newthing': 'TechUp'}; 46 | return request(app) 47 | .post('/thing/add') 48 | .send(params) 49 | .expect(200); 50 | }); 51 | }); 52 | -------------------------------------------------------------------------------- /code_quality/README.md: -------------------------------------------------------------------------------- 1 | # Code Quality 2 | 3 | 4 | ## Summary 5 | 6 | - ESLint 7 | - Getting the most out of VSCode 8 | - Next term 9 | 10 | 11 | ## [ESLint](https://eslint.org/) 12 | 13 | - Check coding standards are applied 14 | - Install with `npm install eslint` possibly with `-g` 15 | - Configure in your project with `eslint --init` 16 | - Use a particular set of rules e.g. standard (need to install) 17 | - Customise (see coursework specification) 18 | - Run with `eslint file.js` 19 | - Autofix with `eslint --fix file.js` 20 | - Beware [bikeshedding](https://exceptionnotfound.net/bikeshedding-the-daily-software-anti-pattern/) over standards 21 | 22 | 23 | ## Recommended style 24 | 25 | Put this in .eslintrc.js 26 | ``` 27 | module.exports = { 28 | "extends": "standard", 29 | "rules": { 30 | "semi": [2, "always"], 31 | "indent": "off" 32 | } 33 | }; 34 | ``` 35 | 36 | ## ESLint tooling 37 | 38 | - Add as a pretest script (assignment) 39 | - Consider [adding a git pre-commit hook](https://levelup.gitconnected.com/how-to-run-eslint-using-pre-commit-hook-25984fbce17e) 40 | - Install the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): 41 | - identify and auto-fix 42 | 43 | 44 | ## Getting the most out of VSCode 45 | 46 | - [Advanced code editing](https://code.visualstudio.com/docs/introvideos/codeediting) 47 | - Auto-fix for ESLint problems 48 | - [Live share](https://code.visualstudio.com/learn/collaboration/live-share) 49 | 50 | 51 | ## Next term 52 | 53 | - Work on second assignment: collaborative project 54 | - No more practicals 55 | - Weekly drop-in sessions 10:00 Fridays D110 56 | - Sometimes specific content 57 | - second assignment choosing a project 58 | - completing a peer review 59 | - reflective writing 60 | - Other times just answering any questions 61 | 62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /code_quality/PITCHME.md: -------------------------------------------------------------------------------- 1 | # Code Quality {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | ## Summary 6 | 7 | - ESLint 8 | - Getting the most out of VSCode 9 | - Next term 10 | 11 | --- 12 | 13 | ## [ESLint](https://eslint.org/) 14 | 15 | - Check coding standards are applied 16 | - Install with `npm install eslint` possibly with `-g` 17 | - Configure in your project with `eslint --init` 18 | - Use a particular set of rules e.g. standard (need to install) 19 | - Customise (see coursework specification) 20 | - Run with `eslint file.js` 21 | - Autofix with `eslint --fix file.js` 22 | - Beware [bikeshedding](https://exceptionnotfound.net/bikeshedding-the-daily-software-anti-pattern/) over standards 23 | 24 | --- 25 | 26 | ## Recommended style 27 | 28 | Put this in .eslintrc.js 29 | ``` 30 | module.exports = { 31 | "extends": "standard", 32 | "rules": { 33 | "semi": [2, "always"], 34 | "indent": "off" 35 | } 36 | }; 37 | ``` 38 | --- 39 | 40 | ## ESLint tooling 41 | 42 | - Add as a pretest script (assignment) 43 | - Consider [adding a git pre-commit hook](https://levelup.gitconnected.com/how-to-run-eslint-using-pre-commit-hook-25984fbce17e) 44 | - Install the [ESLint plugin for VSCode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint): 45 | - identify and auto-fix 46 | 47 | --- 48 | 49 | ## Getting the most out of VSCode 50 | 51 | - [Advanced code editing](https://code.visualstudio.com/docs/introvideos/codeediting) 52 | - Auto-fix for ESLint problems 53 | - [Live share](https://code.visualstudio.com/learn/collaboration/live-share) 54 | 55 | --- 56 | 57 | ## Next term 58 | 59 | - Work on second assignment: collaborative project 60 | - No more practicals 61 | - Weekly drop-in sessions 10:00 Fridays D110 62 | - Sometimes specific content 63 | - second assignment choosing a project 64 | - completing a peer review 65 | - reflective writing 66 | - Other times just answering any questions 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /html/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # HTML 4 | HyperText Markup Language 5 | 6 | 7 | ## Last time 8 | 9 | 10 | * Source code control with git 11 | * File; commit; branch; repository; remote 12 | * init/clone; add; commit; (pull then) push 13 | 14 | 15 | 16 | ## Today 17 | 18 | * HTML tags 19 | * What makes a good HTML page 20 | * Web front-end frameworks 21 | 22 | 23 | ## HTML tags and elements 24 | 25 | ``` 26 | 27 | 28 |

Hello

29 |

World

30 | 31 | 32 | ``` 33 | 34 | 35 | (In groups) 36 | 37 | * Introduce yourselves 38 | * List the HTML tags you are familiar with 39 | - five minutes 40 | * One person to create a text file with them in 41 | - one per line 42 | - just the name of the tag (no angle brackets) 43 | 44 | 45 | ## Putting them together 46 | 47 | * Paste into shared doc 48 | * We'll make a [word cloud](https://www.wordclouds.com/) 49 | 50 | 51 | ## What makes a good HTML page? 52 | 53 | 54 | * Standards compliant HTML5 [W3C](https://www.w3.org/TR/html52/) 55 | - Check with 56 | - Or developer tools or chrome plugin 57 | * Accessible: alt tags; contrast; [WCAG](https://www.w3.org/TR/WCAG21/); [MDN advice](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) 58 | * Mobile-friendly: viewport; lightweight; responsive 59 | * Quick-loading 60 | * Review with e.g. [Lighthouse](https://developers.google.com/web/tools/lighthouse) 61 | 62 | 63 | 64 | ## HTML/CSS Frameworks 65 | 66 | 67 | - Apply styles with CSS classes 68 | - Pre-written HTML templates and (some) JavaScript 69 | - Make it easy to make things look nice 70 | - Make it easy to make things responsive 71 | - Can sometimes be heavy (large file size, slow) 72 | - e.g. [Bootstrap](https://getbootstrap.com/) and [alternatives](https://www.creative-tim.com/blog/educational-tech/bootstrap-alternatives/) including [CSS](https://colorlib.com/wp/free-css3-frameworks/) 73 | - N.B. Frameworks like [React](https://react.dev/) and [Vue](https://vuejs.org/) are different things: they generate HTML 74 | 75 | 76 | 77 | ## Example 78 | 79 | To sieve out the stuff we don't want we can 80 | 81 | - make our page HTML5 compliant 82 | - include it in a bootstrap template 83 | 84 | Follow progress at 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /comp1011_intro/README.md: -------------------------------------------------------------------------------- 1 | # COMP1101 Programming (Black) 2 | 3 | Introduction to the module 4 | 5 | 6 | ## Why choose this module (poll)? 7 | 8 | https://pollev.com/stevenaeola 9 | 10 | 11 | - To become more like a professional programmer 12 | - To learn how to do cool things 13 | - To stretch yourself 14 | - Not just for the marks 15 | 16 | 17 | # What tools do developers use (poll)? 18 | 19 | [...](https://www.jetbrains.com/lp/devecosystem-2022/) 20 | [...](https://www.jetbrains.com/lp/devecosystem-2022/testing/) 21 | [...](https://survey.stackoverflow.co/2023/) 22 | 23 | 24 | ## We will be learning 25 | 26 | * Web front-end (including HTML, CSS, JavaScript) 27 | * Web back-end (including nodejs, REST API) 28 | * Collaboration tools (git) and processes (code review) 29 | * Automated testing (jest) 30 | 31 | 32 | ## Assessment 33 | 34 | 35 | - Two assignments 36 | - No exam 37 | - First assignment: single-page app web site 38 | - you choose what it does 39 | - peer code review 40 | - Second assignment: contribute and collaborate 41 | - you choose what you learn 42 | - collaborate (open source, hackathon, competition) 43 | - reflect on what you have learned 44 | - See LU for deadlines 45 | 46 | 47 | 48 | ## Gold vs Black 49 | 50 | - Black is for more experienced programmers (e.g. with A level) 51 | - Both have the same fixed content 52 | - Gold second assignment = Black first assignment 53 | - Black has no content lectures second term: drop-in tutorials 54 | - Gold has more examples 55 | - You can choose which one 56 | 57 | 58 | 59 | ## Self-evaluation 60 | 61 | - Questionnaire (Module information) 62 | - Your score is only for your information 63 | - I will publish the score distributions to help you choose 64 | 65 | 66 | ## Teaching plan 67 | 68 | - Two lectures a week f2f (Thurs 4, Fri 1) 69 | - One practical a week term 1 (see allocation on MyTimetable) 70 | - Office hours 2:30-3:30 Friday in person or by zoom (see contacts on LU to book a slot) 71 | - Term 2 tutorials: no lectures or practicals 72 | 73 | 74 | ## Examples 75 | 76 | 77 | - This is a practically motivated course 78 | - What should we do as an example? 79 | - Previously have done cheese, memes, hats, Sue Black, goats, pasta 80 | - Come up with a suggestion in a group of three 81 | - Then we will have a vote 82 | 83 | 84 | 85 | # Next time 86 | 87 | Version control with git 88 | 89 | -------------------------------------------------------------------------------- /html/PITCHME.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # HTML {data-background-color=#7E317B} 4 | HyperText Markup Language 5 | 6 | --- 7 | 8 | ## Last time {data-background-color=#7E317B} 9 | 10 | ::: incremental 11 | 12 | * Source code control with git 13 | * File; commit; branch; repository; remote 14 | * init/clone; add; commit; (pull then) push 15 | 16 | ::: 17 | 18 | --- 19 | 20 | ## Today 21 | 22 | * HTML tags 23 | * What makes a good HTML page 24 | * Web front-end frameworks 25 | 26 | --- 27 | 28 | ## HTML tags and elements 29 | 30 | ``` 31 | 32 | 33 |

Hello

34 |

World

35 | 36 | 37 | ``` 38 | 39 | --- 40 | 41 | (In groups) 42 | 43 | * Introduce yourselves 44 | * List the HTML tags you are familiar with 45 | - five minutes 46 | * One person to create a text file with them in 47 | - one per line 48 | - just the name of the tag (no angle brackets) 49 | 50 | --- 51 | 52 | ## Putting them together 53 | 54 | * Paste into shared doc 55 | * We'll make a [word cloud](https://www.wordclouds.com/) 56 | 57 | --- 58 | 59 | ## What makes a good HTML page? 60 | 61 | ::: incremental 62 | 63 | * Standards compliant HTML5 [W3C](https://www.w3.org/TR/html52/) 64 | - Check with 65 | - Or developer tools or chrome plugin 66 | * Accessible: alt tags; contrast; [WCAG](https://www.w3.org/TR/WCAG21/); [MDN advice](https://developer.mozilla.org/en-US/docs/Learn/Accessibility) 67 | * Mobile-friendly: viewport; lightweight; responsive 68 | * Quick-loading 69 | * Review with e.g. [Lighthouse](https://developers.google.com/web/tools/lighthouse) 70 | 71 | ::: 72 | 73 | --- 74 | 75 | ## HTML/CSS Frameworks 76 | 77 | ::: incremental 78 | 79 | - Apply styles with CSS classes 80 | - Pre-written HTML templates and (some) JavaScript 81 | - Make it easy to make things look nice 82 | - Make it easy to make things responsive 83 | - Can sometimes be heavy (large file size, slow) 84 | - e.g. [Bootstrap](https://getbootstrap.com/) and [alternatives](https://www.creative-tim.com/blog/educational-tech/bootstrap-alternatives/) including [CSS](https://colorlib.com/wp/free-css3-frameworks/) 85 | - N.B. Frameworks like [React](https://react.dev/) and [Vue](https://vuejs.org/) are different things: they generate HTML 86 | 87 | ::: 88 | 89 | --- 90 | 91 | ## Example 92 | 93 | To sieve out the stuff we don't want we can 94 | 95 | - make our page HTML5 compliant 96 | - include it in a bootstrap template 97 | 98 | Follow progress at 99 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /comp1011_intro/PITCHME.md: -------------------------------------------------------------------------------- 1 | # COMP1101 Programming (Black) {data-background-color=#6A246D} 2 | 3 | Introduction to the module 4 | 5 | --- 6 | 7 | ## Why choose this module (poll)? 8 | 9 | https://pollev.com/stevenaeola 10 | 11 | ::: incremental 12 | 13 | - To become more like a professional programmer 14 | - To learn how to do cool things 15 | - To stretch yourself 16 | - Not just for the marks 17 | 18 | ::: 19 | 20 | # What tools do developers use (poll)? {data-background-color=#6A246D} 21 | 22 | [...](https://www.jetbrains.com/lp/devecosystem-2022/) 23 | [...](https://www.jetbrains.com/lp/devecosystem-2022/testing/) 24 | [...](https://survey.stackoverflow.co/2023/) 25 | 26 | --- 27 | 28 | ## We will be learning 29 | 30 | * Web front-end (including HTML, CSS, JavaScript) 31 | * Web back-end (including nodejs, REST API) 32 | * Collaboration tools (git) and processes (code review) 33 | * Automated testing (jest) 34 | 35 | --- 36 | 37 | ## Assessment 38 | 39 | ::: incremental 40 | 41 | - Two assignments 42 | - No exam 43 | - First assignment: single-page app web site 44 | - you choose what it does 45 | - peer code review 46 | - Second assignment: contribute and collaborate 47 | - you choose what you learn 48 | - collaborate (open source, hackathon, competition) 49 | - reflect on what you have learned 50 | - See LU for deadlines 51 | 52 | ::: 53 | 54 | --- 55 | 56 | ## Gold vs Black 57 | 58 | - Black is for more experienced programmers (e.g. with A level) 59 | - Both have the same fixed content 60 | - Gold second assignment = Black first assignment 61 | - Black has no content lectures second term: drop-in tutorials 62 | - Gold has more examples 63 | - You can choose which one 64 | 65 | 66 | --- 67 | 68 | ## Self-evaluation 69 | 70 | - Questionnaire (Module information) 71 | - Your score is only for your information 72 | - I will publish the score distributions to help you choose 73 | 74 | --- 75 | 76 | ## Teaching plan 77 | 78 | - Two lectures a week f2f (Thurs 4, Fri 1) 79 | - One practical a week term 1 (see allocation on MyTimetable) 80 | - Office hours 2:30-3:30 Friday in person or by zoom (see contacts on LU to book a slot) 81 | - Term 2 tutorials: no lectures or practicals 82 | 83 | --- 84 | 85 | ## Examples 86 | 87 | ::: incremental 88 | 89 | - This is a practically motivated course 90 | - What should we do as an example? 91 | - Previously have done cheese, memes, hats, Sue Black, goats, pasta 92 | - Come up with a suggestion in a group of three 93 | - Then we will have a vote 94 | 95 | ::: 96 | 97 | --- 98 | 99 | # Next time {data-background-color=#a5c8d0} 100 | 101 | Version control with git 102 | 103 | -------------------------------------------------------------------------------- /nodejs_rest/README.md: -------------------------------------------------------------------------------- 1 | # REST 2 | 3 | ## [Representational State Transfer](https://en.wikipedia.org/wiki/Representational_state_transfer) 4 | 5 | 6 | ## Summary 7 | 8 | - Architectural style for web services 9 | - Provides interoperability (language independent) 10 | - Uses http methods (GET, POST, PUT, DELETE ...) 11 | - Like function call 12 | - Parameters provided in URL (GET) or body (POST) 13 | - Results provided in body 14 | - Published as an API e.g. [twitter](https://developer.twitter.com/en/docs/api-reference-index), [github](https://developer.github.com/v3/), [gmail](https://developers.google.com/gmail/api/v1/reference/) 15 | 16 | 17 | ## Implementing a REST API in nodejs 18 | 19 | - Think about your entities 20 | - GET methods for listing/searching and detail 21 | - POST method(s) for adding/updating 22 | - DELETE method (not necessary for the assignment) 23 | - Need to thing about http response code e.g. 24 | - 200 for OK (sent by default in express) 25 | - 403 for unauthorised 26 | - 400 for other request error 27 | - Extract parameters; send response 28 | 29 | 30 | ## REST parameters 31 | 32 | - For GET methods we have [already talked about this](https://github.com/stevenaeola/progblack_lectures/blob/main/js_intro_node/README.md) 33 | - For POST methods you will need to configure body parser for [urlencoding](https://github.com/stevenaeola/proglabs_js/tree/master/node_routing) and/or JSON 34 | 35 | ``` 36 | app.use(express.json()); 37 | ``` 38 | 39 | 40 | - Access values with `req.body.var_name` 41 | 42 | See also [tutorial on nodejs to build a REST API](https://codeburst.io/node-js-by-example-part-1-668376cd4f96) 43 | 44 | 45 | ## REST and Single Page App 46 | 47 | - In a single page app reduce traffic by updating content rather than reloading 48 | - Access REST methods directly from client (using fetch) 49 | - Problem: if we use a form it gets submitted and loads 'action' page 50 | - Solution: stop default form action (client-side) 51 | ``` 52 | event.preventDefault(); 53 | ``` 54 | 55 | or 56 | 57 | ``` 58 | event.stopPropogation(); 59 | ``` 60 | 61 | 62 | ## Sending POST data from a form as JSON 63 | 64 | - Use a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object to extract all inputs 65 | - Turn this into an object with [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) 66 | - Turn this into a string with [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 67 | - Make sure the headers in your fetch set the content type to be application/json 68 | - Make sure your server is using the [express.json middleware](https://expressjs.com/en/api.html#express.json) 69 | - See the [example server](server.js) and [example client](client/) -------------------------------------------------------------------------------- /nodejs_rest/PITCHME.md: -------------------------------------------------------------------------------- 1 | # REST {data-background-color=#7E317B} 2 | 3 | ## [Representational State Transfer](https://en.wikipedia.org/wiki/Representational_state_transfer) 4 | 5 | --- 6 | 7 | ## Summary 8 | 9 | - Architectural style for web services 10 | - Provides interoperability (language independent) 11 | - Uses http methods (GET, POST, PUT, DELETE ...) 12 | - Like function call 13 | - Parameters provided in URL (GET) or body (POST) 14 | - Results provided in body 15 | - Published as an API e.g. [twitter](https://developer.twitter.com/en/docs/api-reference-index), [github](https://developer.github.com/v3/), [gmail](https://developers.google.com/gmail/api/v1/reference/) 16 | 17 | --- 18 | 19 | ## Implementing a REST API in nodejs 20 | 21 | - Think about your entities 22 | - GET methods for listing/searching and detail 23 | - POST method(s) for adding/updating 24 | - DELETE method (not necessary for the assignment) 25 | - Need to thing about http response code e.g. 26 | - 200 for OK (sent by default in express) 27 | - 403 for unauthorised 28 | - 400 for other request error 29 | - Extract parameters; send response 30 | 31 | --- 32 | 33 | ## REST parameters 34 | 35 | - For GET methods we have [already talked about this](https://github.com/stevenaeola/progblack_lectures/blob/main/js_intro_node/README.md) 36 | - For POST methods you will need to configure body parser for [urlencoding](https://github.com/stevenaeola/proglabs_js/tree/master/node_routing) and/or JSON 37 | 38 | ``` 39 | app.use(express.json()); 40 | ``` 41 | 42 | 43 | - Access values with `req.body.var_name` 44 | 45 | See also [tutorial on nodejs to build a REST API](https://codeburst.io/node-js-by-example-part-1-668376cd4f96) 46 | 47 | --- 48 | 49 | ## REST and Single Page App 50 | 51 | - In a single page app reduce traffic by updating content rather than reloading 52 | - Access REST methods directly from client (using fetch) 53 | - Problem: if we use a form it gets submitted and loads 'action' page 54 | - Solution: stop default form action (client-side) 55 | ``` 56 | event.preventDefault(); 57 | ``` 58 | 59 | or 60 | 61 | ``` 62 | event.stopPropogation(); 63 | ``` 64 | 65 | --- 66 | 67 | ## Sending POST data from a form as JSON 68 | 69 | - Use a [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object to extract all inputs 70 | - Turn this into an object with [Object.fromEntries](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) 71 | - Turn this into a string with [JSON.stringify](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 72 | - Make sure the headers in your fetch set the content type to be application/json 73 | - Make sure your server is using the [express.json middleware](https://expressjs.com/en/api.html#express.json) 74 | - See the [example server](server.js) and [example client](client/) -------------------------------------------------------------------------------- /math_test/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 21 | 22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 |
30 |

TEST: Maths with markdown and reveal

31 | 32 |
33 |
34 |

Summary

35 |
36 |
    37 |
  • x + y = y + x
    • 38 |
  • (x + y) + z = x + (y + z)
    • 39 |
  • Language agnostic
    • 40 |
41 |
42 |
43 |
44 |

$$ \sum_{n=1}^{\infty} 2^{-n} = 1$$

45 |
46 |
47 |
48 | 49 | 50 | 51 | // reveal.js plugins 52 | 53 | 54 | 55 | 56 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /json/README.md: -------------------------------------------------------------------------------- 1 | # JSON: JavaScript Object Notation 2 | 3 | 4 | 5 | ## Summary 6 | 7 | 8 | - Human- and machine- readable and writable 9 | - Used for storage and transmission of data 10 | - Language agnostic 11 | - Alternative to XML in AJAX 12 | - JavaScript methods `JSON.stringify` and `JSON.parse` 13 | - Equivalents in [python](https://docs.python.org/3/library/json.html), [Java](https://github.com/FasterXML/jackson) etc 14 | 15 | 16 | 17 | ## What does it look like? 18 | 19 | - Plain text 20 | - Encodes objects, lists, strings, numbers, boolean, null 21 | - Does not encode functions 22 | - Read the [language summary](https://www.json.org/json-en.html) 23 | - Subset of object literal notation in JavaScript 24 | - Object keys need to be in (double) quotes 25 | 26 | 27 | ## Sending JSON with fetch 28 | 29 | - Set method to `POST` 30 | - Set `'Content-Type': 'application/json'` in headers 31 | - Use [JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) to encode body 32 | - See [postStuff example](./postStuff.js) 33 | - Note use of [httpbin](https://httpbin.org) for testing client without a server 34 | 35 | ## Using JSON response to update DOM (client) 36 | 37 | - Get JSON from server with [res.json](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) 38 | - Or use [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) on [res.text()](https://developer.mozilla.org/en-US/docs/Web/API/Response/text) to make an Array/Object 39 | - Iterate through the response with 40 | - [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) for an Array 41 | - [for...in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) for an Object 42 | - Create/append/update DOM nodes based on result 43 | - Could use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) to update [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 44 | 45 | ## JSON with express (server) 46 | 47 | Add middleware for JSON body parsing 48 | 49 | ``` 50 | app.use(express.json()); 51 | ``` 52 | 53 | Then access `req.body` within a `.post` route. 54 | 55 | To send JSON jwith express either 56 | - use [res.json()](https://expressjs.com/en/api.html#res.json) 57 | - pass [res.send()](https://expressjs.com/en/api.html#res.send) an Array or Object 58 | 59 | ## Writing JSON to a file 60 | 61 | - Server-side only (nodejs) 62 | - Convert object to JSON with `JSON.stringify` 63 | - Use `writeFileSync` from the `fs` module 64 | 65 | ``` 66 | const fs = require('fs'); 67 | let data = JSON.stringify([1, 2, 3]); 68 | fs.writeFileSync('./file.json', data); 69 | ``` 70 | 71 | ## Loading JSON from a file 72 | 73 | - Server-side only (nodejs) 74 | - Could load a file and then use `JSON.parse` 75 | - Or simply 76 | 77 | ```const jsonContent = require("./file.json");``` 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /nodejs_testing/README.md: -------------------------------------------------------------------------------- 1 | # Testing nodejs REST 2 | 3 | 4 | ## Why testing? 5 | 6 | 7 | - Does not prove the absence of bugs 8 | - Can help identify existing bugs 9 | - Can avoid introducing new bugs 10 | - Repeated testing necessary in agile development 11 | - Automated as far as possible 12 | - It's in the assignment ... 13 | 14 | 15 | 16 | ## Basic Approaches 17 | 18 | - Using browser (manual) 19 | - Using Postman (partly automatic) 20 | - Using test scripts (automatic) 21 | 22 | 23 | ## Browser-based testing 24 | 25 | - GET is easy: just type in URL 26 | - POST is slightly harder: build HTML form 27 | - Other http methods more difficult 28 | 29 | 30 | ## Postman 31 | 32 | - Originally a chrome plugin 33 | - Now a [web/dekstop application](https://www.postman.com/) 34 | - Define a set of requests in a collection 35 | - Choose GET or POST (or other) 36 | - Include body parameters for POST 37 | - Use raw/JSON for JSON 38 | - Can specify expected responses 39 | 40 | 41 | ## Test scripts 42 | 43 | - There are very many JavaScript unit testing frameworks (mocha, jasmine, ava) 44 | - I recommend using [Jest](https://jestjs.io/) 45 | - Read a [recent review](https://raygun.com/blog/javascript-unit-testing-frameworks/) 46 | - Also see [StateofJS](https://2023.stateofjs.com/en-US/libraries/testing/) 47 | - `npm install --save-dev jest` 48 | - Tests are js programs (as in jUnit) 49 | - Put tests in test directory or name .test.js 50 | 51 | 52 | ## Running tests 53 | 54 | - Get it going first 55 | - Use nodemon to auto-restart server 56 | - Add test script to your package.json 57 | - run test with npm test 58 | - see some [example tests for thing](https://github.com/stevenaeola/progblack_lectures/blob/main/nodejs_testing/app.test.js) 59 | 60 | 61 | ## Separate out app from server 62 | 63 | So that running tests does not launch the server 64 | 65 | e.g. app.js file 66 | ``` 67 | const express = require('express'); 68 | const app = express(); 69 | // ... add routes 70 | module.exports = app; 71 | 72 | ``` 73 | e.g. server.js file 74 | ``` 75 | const app = require('./app'); 76 | app.listen(8090); 77 | 78 | ``` 79 | 80 | 81 | ## Test coverage 82 | 83 | - In testing we try to improve quality 84 | - Coverage measures how much functionality has been tested 85 | - Could measure this in terms of 86 | - the space of possible inputs (black box) 87 | - the code that has been executed (white box) 88 | - Unit testing combines the two 89 | - Need to think about valid and invalid inputs 90 | 91 | 92 | ## Mocking 93 | 94 | - You want to avoid accessing live systems during tests 95 | - Reading may be brittle 96 | - Writing may be dangerous 97 | - Real system may not be developed yet 98 | - Replace access to live data using [mocking](https://en.wikipedia.org/wiki/Mock_object) 99 | - There are [specific jest functions for this](https://jestjs.io/docs/en/mock-functions.html) 100 | - If you intend to use a remote web service you should use mocking 101 | - Same for a remote database (e.g. Firebase) 102 | 103 | -------------------------------------------------------------------------------- /json/PITCHME.md: -------------------------------------------------------------------------------- 1 | # JSON: JavaScript Object Notation{data-background-color=#7E317B} 2 | 3 | 4 | --- 5 | 6 | ## Summary 7 | 8 | ::: incremental 9 | 10 | - Human- and machine- readable and writable 11 | - Used for storage and transmission of data 12 | - Language agnostic 13 | - Alternative to XML in AJAX 14 | - JavaScript methods `JSON.stringify` and `JSON.parse` 15 | - Equivalents in [python](https://docs.python.org/3/library/json.html), [Java](https://github.com/FasterXML/jackson) etc 16 | 17 | ::: 18 | 19 | --- 20 | 21 | ## What does it look like? 22 | 23 | - Plain text 24 | - Encodes objects, lists, strings, numbers, boolean, null 25 | - Does not encode functions 26 | - Read the [language summary](https://www.json.org/json-en.html) 27 | - Subset of object literal notation in JavaScript 28 | - Object keys need to be in (double) quotes 29 | 30 | --- 31 | 32 | ## Sending JSON with fetch 33 | 34 | - Set method to `POST` 35 | - Set `'Content-Type': 'application/json'` in headers 36 | - Use [JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) to encode body 37 | - See [postStuff example](./postStuff.js) 38 | - Note use of [httpbin](https://httpbin.org) for testing client without a server 39 | 40 | ## Using JSON response to update DOM (client) 41 | 42 | - Get JSON from server with [res.json](https://developer.mozilla.org/en-US/docs/Web/API/Response/json) 43 | - Or use [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) on [res.text()](https://developer.mozilla.org/en-US/docs/Web/API/Response/text) to make an Array/Object 44 | - Iterate through the response with 45 | - [for...of](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) for an Array 46 | - [for...in](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in) for an Object 47 | - Create/append/update DOM nodes based on result 48 | - Could use [template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of) to update [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) 49 | 50 | ## JSON with express (server) 51 | 52 | Add middleware for JSON body parsing 53 | 54 | ``` 55 | app.use(express.json()); 56 | ``` 57 | 58 | Then access `req.body` within a `.post` route. 59 | 60 | To send JSON jwith express either 61 | - use [res.json()](https://expressjs.com/en/api.html#res.json) 62 | - pass [res.send()](https://expressjs.com/en/api.html#res.send) an Array or Object 63 | 64 | ## Writing JSON to a file 65 | 66 | - Server-side only (nodejs) 67 | - Convert object to JSON with `JSON.stringify` 68 | - Use `writeFileSync` from the `fs` module 69 | 70 | ``` 71 | const fs = require('fs'); 72 | let data = JSON.stringify([1, 2, 3]); 73 | fs.writeFileSync('./file.json', data); 74 | ``` 75 | 76 | ## Loading JSON from a file 77 | 78 | - Server-side only (nodejs) 79 | - Could load a file and then use `JSON.parse` 80 | - Or simply 81 | 82 | ```const jsonContent = require("./file.json");``` 83 | 84 | 85 | 86 | -------------------------------------------------------------------------------- /nodejs_testing/PITCHME.md: -------------------------------------------------------------------------------- 1 | # Testing nodejs REST {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | ## Why testing? 6 | 7 | ::: incremental 8 | 9 | - Does not prove the absence of bugs 10 | - Can help identify existing bugs 11 | - Can avoid introducing new bugs 12 | - Repeated testing necessary in agile development 13 | - Automated as far as possible 14 | - It's in the assignment ... 15 | 16 | ::: 17 | 18 | --- 19 | 20 | ## Basic Approaches 21 | 22 | - Using browser (manual) 23 | - Using Postman (partly automatic) 24 | - Using test scripts (automatic) 25 | 26 | --- 27 | 28 | ## Browser-based testing 29 | 30 | - GET is easy: just type in URL 31 | - POST is slightly harder: build HTML form 32 | - Other http methods more difficult 33 | 34 | --- 35 | 36 | ## Postman 37 | 38 | - Originally a chrome plugin 39 | - Now a [web/dekstop application](https://www.postman.com/) 40 | - Define a set of requests in a collection 41 | - Choose GET or POST (or other) 42 | - Include body parameters for POST 43 | - Use raw/JSON for JSON 44 | - Can specify expected responses 45 | 46 | --- 47 | 48 | ## Test scripts 49 | 50 | - There are very many JavaScript unit testing frameworks (mocha, jasmine, ava) 51 | - I recommend using [Jest](https://jestjs.io/) 52 | - Read a [recent review](https://raygun.com/blog/javascript-unit-testing-frameworks/) 53 | - Also see [StateofJS](https://2023.stateofjs.com/en-US/libraries/testing/) 54 | - `npm install --save-dev jest` 55 | - Tests are js programs (as in jUnit) 56 | - Put tests in test directory or name .test.js 57 | 58 | --- 59 | 60 | ## Running tests 61 | 62 | - Get it going first 63 | - Use nodemon to auto-restart server 64 | - Add test script to your package.json 65 | - run test with npm test 66 | - see some [example tests for thing](https://github.com/stevenaeola/progblack_lectures/blob/main/nodejs_testing/app.test.js) 67 | 68 | --- 69 | 70 | ## Separate out app from server 71 | 72 | So that running tests does not launch the server 73 | 74 | e.g. app.js file 75 | ``` 76 | const express = require('express'); 77 | const app = express(); 78 | // ... add routes 79 | module.exports = app; 80 | 81 | ``` 82 | e.g. server.js file 83 | ``` 84 | const app = require('./app'); 85 | app.listen(8090); 86 | 87 | ``` 88 | 89 | --- 90 | 91 | ## Test coverage 92 | 93 | - In testing we try to improve quality 94 | - Coverage measures how much functionality has been tested 95 | - Could measure this in terms of 96 | - the space of possible inputs (black box) 97 | - the code that has been executed (white box) 98 | - Unit testing combines the two 99 | - Need to think about valid and invalid inputs 100 | 101 | --- 102 | 103 | ## Mocking 104 | 105 | ::: incremental 106 | - You want to avoid accessing live systems during tests 107 | - Reading may be brittle 108 | - Writing may be dangerous 109 | - Real system may not be developed yet 110 | - Replace access to live data using [mocking](https://en.wikipedia.org/wiki/Mock_object) 111 | - There are [specific jest functions for this](https://jestjs.io/docs/en/mock-functions.html) 112 | - If you intend to use a remote web service you should use mocking 113 | - Same for a remote database (e.g. Firebase) 114 | 115 | ::: 116 | -------------------------------------------------------------------------------- /js_objects/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Objects 2 | 3 | 4 | ## Collection of properties 5 | 6 | Each property is named (with a key) and has a value 7 | 8 | In object literal notation (like JavaScript Object Notation (JSON)) we can write 9 | 10 | ``` 11 | let pet = ; 12 | ``` 13 | 14 | 15 | ## obj.prop 16 | 17 | Access properties like this 18 | 19 | ``` 20 | let coatLength = pet.height; 21 | pet.weight += 5; 22 | pet["colour"] = "red"; // no declaration required 23 | 24 | ``` 25 | 26 | 27 | ## Function-valued properties 28 | 29 | Object properties can be any type, including functions 30 | 31 | ``` 32 | pet.draw = function() 33 | pet.draw(); 34 | ``` 35 | 36 | 37 | ## this 38 | 39 | `this` refers to the object it was called on 40 | 41 | ``` 42 | pet.draw = function(){ 43 | alert("I am a pet this big: " + this.height); 44 | } 45 | pet.draw(); 46 | 47 | ``` 48 | 49 | ## of and in 50 | 51 | In a `for` loop over a list you can use `of` 52 | ``` 53 | for (let x of [1,2,3]); 54 | ``` 55 | 56 | In a `for` loop over an object you can use `in` (gives keys) 57 | ``` 58 | const me = ; 59 | for(let k in me){ 60 | console.log('I have a ' + k); 61 | console.log('It is ' + me[k]); 62 | } 63 | ``` 64 | 65 | 66 | ## Prototypal Inheritance 67 | 68 | 69 | - Every object has a property `__proto__` which refers to another object 70 | - If a property isn't found in an object's own properties, then `__proto__` is checked 71 | - Every function has a property `prototype` which is used when creating an object 72 | - The `new` keyword is used with a constructor function to create an object and set its `__proto__` 73 | - Read more at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 74 | 75 | 76 | 77 | ## Inheriting behaviour 78 | 79 | 80 | - In other languages (e.g Java, C#) every object belongs to a *class* 81 | - Data values (fields) are associated with objects 82 | - Behaviour (methods) are associated with classes 83 | - Things of the same type (class) can do the same things 84 | - JS is more flexible: each object can define its own behaviour 85 | - JS allows inheritance (common behaviour) through prototypes 86 | 87 | 88 | 89 | - Java uses *class-based inheritance* 90 | - JS use *prototypal inheritance* 91 | 92 | 93 | 94 | ## Emulating classes in JS 95 | 96 | [Simple syntax for constructors and prototype functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 97 | 98 | ``` 99 | class Pet{ 100 | constructor(h, w, s){ 101 | this.height = h; 102 | this.weight = w; 103 | this.species = s; 104 | } 105 | draw(){ 106 | alert("I am a pet this big: " + this.height); 107 | } 108 | } 109 | let p = new Pet(0.76, 80, "goat"); 110 | p.draw(); 111 | 112 | ``` 113 | 114 | 115 | ## Why classes? 116 | 117 | 118 | - Reduces cut-and-paste: eases maintenance 119 | - Encourages *encapsulation*: hide the details so they can be changed easily 120 | - No global variables: no clashes 121 | - Make reusable components with classes 122 | - Reuse in the same project (multiple pets) or in different projects 123 | 124 | 125 | 126 | # Next time 127 | 128 | JavaScript and the DOM 129 | -------------------------------------------------------------------------------- /git_collab/README.md: -------------------------------------------------------------------------------- 1 | # Collaboration with git 2 | 3 | 4 | ## Formative group task (wk 4) 5 | 6 | - Work in groups of about three from your practical group 7 | - Develop a set of web pages showcasing societal impact of CS 8 | - Use a framework e.g. Bootstrap 9 | - All pages to have author info linking to github and linkedin 10 | 11 | 12 | ## Peer review (week 5) 13 | 14 | - Interesting content 15 | - Good consistent visual presentation 16 | - Good written presentation 17 | - Valid HTML 18 | - Author info not to be written by author 19 | - Balanced contributions from members 20 | - Not done at the last minute 21 | - Provide comments as pull request 22 | 23 | 24 | ## Working together 25 | 26 | - git supports collaboration 27 | - It is a tool not a method 28 | - Need to think about collaboration method 29 | 30 | 31 | ## Questions to ask 32 | 33 | 34 | - Where to host remote repos (one or many)? 35 | - Who has control over the remote (one or many)? 36 | - How will you decide and allocate tasks 37 | - How will you know if the tasks are complete? 38 | - (How) will you make a release? 39 | 40 | 41 | 42 | ## Who has control? 43 | 44 | Options include: 45 | 46 | 1. One person approves changes, others make pull requests (fork?) 47 | 2. One person owns the repository, others are collaborators 48 | 3. Collaborators form an organization for multiple projects 49 | 50 | 51 | ## Task planning 52 | 53 | Outside of scope of version control. Options include: 54 | 55 | 1. spreadsheet 56 | 2. github issues 57 | 3. dedicated bug tracking tool e.g. bugzilla 58 | 4. development 'board' e.g. trello 59 | 60 | 61 | ## Is it any good (complete?) 62 | 63 | - Code review 64 | - Automated test e.g. html validator 65 | - Git log 66 | 67 | 68 | ## Making a release 69 | 70 | 71 | - Push to [github pages](https://pages.github.com/) 72 | - Branching: main and develop 73 | - Feature branching 74 | - E.g. [trunk-based development](https://www.atlassian.com/continuous-delivery/continuous-integration/trunk-based-development) 75 | - Release vs continuous delivery/deployment 76 | 77 | 78 | 79 | ## See also 80 | 81 | - [Collaborating with Git](https://www.atlassian.com/git/tutorials/syncing) 82 | - [Git Branching](https://git-scm.com/book/en/v2/Git-Branching-Basic-Branching-and-Merging) 83 | 84 | 85 | ## Why are we doing this? 86 | 87 | See [Comparing Computing Professionals’ Perceptions of Importance of Skills and Knowledge on the Job and Coverage in Undergraduate Experiences](https://dl.acm.org/citation.cfm?id=3218430) (institution sign-in) 88 | 89 | 90 | They noted, for example, that “software craftsmanship and clean code,” “emphasis on coding style and commenting,” and “software maintenance” were not sufficiently stressed within their own undergraduate experiences 91 | 92 | 93 | One participant recommended "Working on a large code base and making changes/additions to it. Reviewing changes other people are making to the codebase. Testing. Finding and fixing bugs. Using source control software, etc. This way students are actually prepared for developing in the real world upon graduating and have an appreciation for best practices, comments, reviews, developer testing, and so on." 94 | 95 | 96 | Such projects should be incorporated into early stages of the curriculum "From the get-go people would learn the development environment. Essential tools like git, svn, in unix, and learn some of the history. Then learn languages, design patterns, team interaction, the roles in an agile team, etc 97 | -------------------------------------------------------------------------------- /js_objects/PITCHME.md: -------------------------------------------------------------------------------- 1 | # JavaScript Objects {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | ## Collection of properties 6 | 7 | Each property is named (with a key) and has a value 8 | 9 | In object literal notation (like JavaScript Object Notation (JSON)) we can write 10 | 11 | ``` 12 | let pet = {height: 0.76, weight: 80, species: "goat"}; 13 | ``` 14 | 15 | --- 16 | 17 | ## obj.prop 18 | 19 | Access properties like this 20 | 21 | ``` 22 | let coatLength = pet.height; 23 | pet.weight += 5; 24 | pet["colour"] = "red"; // no declaration required 25 | 26 | ``` 27 | 28 | --- 29 | 30 | ## Function-valued properties 31 | 32 | Object properties can be any type, including functions 33 | 34 | ``` 35 | pet.draw = function(){ alert("I am a pet");} 36 | pet.draw(); 37 | ``` 38 | 39 | --- 40 | 41 | ## this 42 | 43 | `this` refers to the object it was called on 44 | 45 | ``` 46 | pet.draw = function(){ 47 | alert("I am a pet this big: " + this.height); 48 | } 49 | pet.draw(); 50 | 51 | ``` 52 | 53 | --- 54 | ## of and in 55 | 56 | In a `for` loop over a list you can use `of` 57 | ``` 58 | for (let x of [1,2,3]){console.log(x)}; 59 | ``` 60 | 61 | In a `for` loop over an object you can use `in` (gives keys) 62 | ``` 63 | const me = {name: 'Steven', game: 'Lecturer'}; 64 | for(let k in me){ 65 | console.log('I have a ' + k); 66 | console.log('It is ' + me[k]); 67 | } 68 | ``` 69 | 70 | --- 71 | 72 | ## Prototypal Inheritance 73 | 74 | ::: incremental 75 | 76 | - Every object has a property `__proto__` which refers to another object 77 | - If a property isn't found in an object's own properties, then `__proto__` is checked 78 | - Every function has a property `prototype` which is used when creating an object 79 | - The `new` keyword is used with a constructor function to create an object and set its `__proto__` 80 | - Read more at [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain) 81 | 82 | ::: 83 | 84 | --- 85 | 86 | ## Inheriting behaviour 87 | 88 | ::: incremental 89 | 90 | - In other languages (e.g Java, C#) every object belongs to a *class* 91 | - Data values (fields) are associated with objects 92 | - Behaviour (methods) are associated with classes 93 | - Things of the same type (class) can do the same things 94 | - JS is more flexible: each object can define its own behaviour 95 | - JS allows inheritance (common behaviour) through prototypes 96 | 97 | ::: 98 | 99 | --- 100 | 101 | - Java uses *class-based inheritance* 102 | - JS use *prototypal inheritance* 103 | 104 | 105 | --- 106 | 107 | ## Emulating classes in JS 108 | 109 | [Simple syntax for constructors and prototype functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 110 | 111 | ``` 112 | class Pet{ 113 | constructor(h, w, s){ 114 | this.height = h; 115 | this.weight = w; 116 | this.species = s; 117 | } 118 | draw(){ 119 | alert("I am a pet this big: " + this.height); 120 | } 121 | } 122 | let p = new Pet(0.76, 80, "goat"); 123 | p.draw(); 124 | 125 | ``` 126 | 127 | --- 128 | 129 | ## Why classes? 130 | 131 | ::: incremental 132 | 133 | - Reduces cut-and-paste: eases maintenance 134 | - Encourages *encapsulation*: hide the details so they can be changed easily 135 | - No global variables: no clashes 136 | - Make reusable components with classes 137 | - Reuse in the same project (multiple pets) or in different projects 138 | 139 | ::: 140 | 141 | --- 142 | 143 | # Next time 144 | 145 | JavaScript and the DOM -------------------------------------------------------------------------------- /http/README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | # HTTP 4 | 5 | 6 | ## Possible responses from a web request 7 | 8 | Responses include ... 9 | 10 | - A plain text file 11 | - An image file (jpeg, gif, png) 12 | - An executable (.exe, .msi) 13 | - A document (pdf, word) 14 | - Some data (XML, JSON) 15 | - A CSS file 16 | - A JavaScript program 17 | - A flash movie 18 | - A redirection (in headers) 19 | - A cookie value (in headers) 20 | - An error 21 | - A combination of the above 22 | 23 | Response to request may be used to update or replace some or all of a web page. 24 | 25 | 26 | 27 | 28 | 29 | 30 | ## Sources of requests 31 | 32 | How might http requests be generated? 33 | 34 | - Hyperlink followed 35 | - Form submitted 36 | - Clicking in an image map 37 | - Image included in source file 38 | - CSS included in source file 39 | - Frameset or iframe in HTML source (can be recursive) 40 | - Following a redirection (including 301 error) 41 | - JavaScript execution (triggered by mouseover etc) 42 | - Plugin execution e.g. pdf 43 | - From a server (e.g. curl, robot, web service request) 44 | 45 | Response to request may be used to update or replace some or all of a web page. 46 | 47 | 48 | ## Hypertext Transfer Protocol (HTTP) basics 49 | 50 | 51 | - Underlies many aspects of the web 52 | - Based around sockets (usually port 80 for web pages) 53 | - Fairly stable: 54 | - HTTP 0.9 (1991) 55 | - HTTP 1.0 (1996) 56 | - HTTP 1.1 (1997) 57 | - HTTP 2.0 (2015/2020) 58 | - Commonly accepted extensions: cookies 59 | 60 | 61 | 62 | ## HTTP: more 63 | 64 | - HTTP 2 approved in 2015, including compression, push, pipelining and multiplexing 65 | - For full details see 66 | - For tutorial see 67 | - Some knowledge important for web apps 68 | - Not just for HTML, but general resource (uRl) 69 | 70 | 71 | ## Overview 72 | 73 | 74 | - Client/Server: (usually) no response without request 75 | - Requests and responses have similar format: 76 | - __Request/Status Line__ including HTTP version and Status Codes for response 77 | - __Headers__ including the host in HTTP 1.1, allowing for multiple sites on same IP 78 | - __Blank Line__ 79 | - Can run manually using curl 80 | - Default port number is 80 (443 for https) 81 | 82 | 83 | ## curl requests 84 | 85 | At a command prompt: 86 | 87 | ``` 88 | curl -v google.coom 89 | curl -v gooogle.com 90 | curl -v google.com 91 | curl -v www.google.com 92 | ``` 93 | 94 | 95 | ## Request types include 96 | 97 | - __GET__ most common 98 | - __POST__ for some forms 99 | - __HEAD__ to check if a page exists 100 | - __PUT__ replace (rarely used outside web services) 101 | - __PATCH__ update (rarely used outside web services) 102 | - __DELETE__ rarely used outside web services 103 | 104 | Headers can include cookie values 105 | 106 | URLs can include GET-encoded variables 107 | 108 | 109 | ## Response 110 | 111 | Response Codes 112 | 113 | - __100-199__ Informational (e.g. continue). Client should respond 114 | - __200-299__ Successful 115 | - __300-399__ File has moved (permanently or temporarily) 116 | - __400-499__ Client error (401 Unauthorised, 403 Forbidden, 404 Not Found) 117 | - __500-599__ Server error 118 | 119 | Headers can include setting cookie values 120 | 121 | 122 | ## Summary 123 | 124 | - A web server responds to http requests, usually on port 80 125 | - Request provides data in header and (possibly) body 126 | - Response provides data in body and (possibly) header -------------------------------------------------------------------------------- /js_dom/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript and the DOM 2 | 3 | 4 | ## Document Object Model (DOM) 5 | 6 | 7 | - Internal representation of browser page 8 | - Read contents with JavaScript 9 | - Update contents to change page content 10 | - Historically problematic (so [jQuery](https://jquery.com/)) 11 | - Better in ES6, now widespread 12 | - [Documentation](https://developer.mozilla.org/en-US/docs/Web/API/Document) 13 | 14 | 15 | 16 | ## Event handling with HTML 17 | 18 | - Add `onclick` attribute to an element 19 | - JavaScript is executed (without separate tag) 20 | - Note embedded single quotes 21 | 22 | ``` 23 | 24 | 44 | 45 | 46 | ``` 47 | 48 | 49 | ## Fetch client JS 50 | 51 | ``` 52 | window.addEventListener('click', function(event){ 53 | fetch('http://127.0.0.1:8090/list') 54 | .then(response => response.text()) 55 | .then(body => 56 | document.getElementById('content').innerHTML=body) 57 | }); 58 | 59 | ``` 60 | Note use of => for anonymous function declaration 61 | 62 | 63 | ## Fetch server JS 64 | ``` 65 | const express = require('express'); 66 | const app = express(); 67 | 68 | let instruments = [ 'piano', 'concertina', 'double bass']; 69 | 70 | app.get('/list', function (req, resp){ 71 | resp.send(instruments); 72 | }); 73 | 74 | app.listen(8090); 75 | 76 | ``` 77 | 78 | 79 | ## Problem 80 | 81 | This does not work: browser console says 82 | 83 | 84 | > index.html:1 Access to fetch at 'http://127.0.0.1:8090/list' from 85 | > origin 'null' has been blocked by CORS policy: No 86 | > 'Access-Control-Allow-Origin' header is present on the requested 87 | > resource. If an opaque response serves your needs, set the request's 88 | > mode to 'no-cors' to fetch the resource with CORS disabled. 89 | 90 | 91 | ## [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy) 92 | 93 | 94 | - Security feature of browsers 95 | - Asynchronous requests only to source of page 96 | - Cross-Origin Resource Sharing (CORS) can get around it 97 | - Or, better, serve from the same place 98 | 99 | 100 | ## Promises 101 | 102 | - Fetch uses [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) 103 | - Promises should make it easier to attach callbacks/handlers 104 | - Include success and failure callbacks 105 | - Add (chains of) success callbacks with `.then` 106 | - Add failure callback with `.catch` 107 | - N.B. a 404 is still counted as success 108 | 109 | 110 | ## catch example 111 | 112 | Add this to handle any errors from `fetch` handler chain 113 | 114 | ``` 115 | .catch( (error) => alert(error)) 116 | ``` 117 | 118 | If you want to deal with 404 errors you will have to look at `response.ok` 119 | 120 | 121 | ## async and await 122 | 123 | - New in ES2017 124 | - Provide 'syntactic sugar' for promises `.catch` 125 | - Use `async` keyword before `function` keyword 126 | - use `await` keyword in execution 127 | 128 | 129 | ## async example 130 | 131 | ``` 132 | window.addEventListener('click', async function(event){ 133 | let response = await fetch('http://127.0.0.1:809/list'); 134 | let body = await response.text(); 135 | document.getElementById('content').innerHTML=body 136 | }); 137 | ``` 138 | 139 | 140 | ## Exceptions 141 | 142 | What happens if things go wrong? 143 | 144 | ``` 145 | window.addEventListener('click', async function(event){ 146 | try{ 147 | let response = await fetch('http://127.0.0.1:809/list'); 148 | let body = await response.text(); 149 | document.getElementById('content').innerHTML=body; 150 | } catch(e) { 151 | alert(e); 152 | } 153 | }); 154 | ``` 155 | 156 | N.B. `catch` instead of Python `except` 157 | 158 | 159 | ## Summary 160 | 161 | - Asynchronous JavaScript (AJAX) 162 | - Fetch API 163 | - Cross-Origin Resource Sharing 164 | - Promises 165 | - async and await 166 | - Exceptions 167 | 168 | -------------------------------------------------------------------------------- /git/PITCHME.md: -------------------------------------------------------------------------------- 1 | # Version control and git {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | Some material reused and adapted from [Version Control with Git](https://swcarpentry.github.io/git-novice/) by the [Software Carpentry Foundation](https://software-carpentry.org/) 6 | 7 | Licensed under [Creative Commons Attribution 4.0 International](https://creativecommons.org/licenses/by/4.0/) 8 | 9 | --- 10 | 11 | ![Piled Higher and Deeper](https://raw.githubusercontent.com/stevenaeola/progblack_lectures/main/git/phd101212s.png){width=40%} 12 | 13 | --- 14 | 15 | “Piled Higher and Deeper” by Jorge Cham 16 | 17 | --- 18 | 19 | ## Linear history 20 | 21 | ![linear development of a document](https://raw.githubusercontent.com/stevenaeola/progblack_lectures/main/git/play-changes.png) 22 | 23 | --- 24 | 25 | ## Multiple authors 26 | 27 | ![different changes](https://raw.githubusercontent.com/stevenaeola/progblack_lectures/main/git/versions.png) 28 | 29 | --- 30 | 31 | ## Merging changes 32 | 33 | ![merges](https://raw.githubusercontent.com/stevenaeola/progblack_lectures/main/git/merge.png) 34 | 35 | --- 36 | 37 | ## Version control software 38 | 39 | ::: incremental 40 | 41 | - Revision Control System (RCS) 42 | - Concurrent Versions System (CVS) 43 | - Microsoft Word Track Changes 44 | - Subversion 45 | - git 46 | - mercurial 47 | - darcs 48 | 49 | ::: 50 | 51 | --- 52 | 53 | ## All about git 54 | 55 | - Distributed version control system 56 | - Developed by Linus Torvalds and others to manage the Linux kernel 57 | - Linus named it after himself 58 | - Designed to be fast 59 | - Very widely used in academia and industry 60 | 61 | 62 | --- 63 | 64 | ## The Linux kernel development under git 65 | 66 | [Visualised with gource](https://www.youtube.com/watch?v=MkJxlKD2bjk) 67 | 68 | --- 69 | 70 | ## git under the hood 71 | 72 | - Different from earlier systems such as RCS, CVS and Subversion: no diffs 73 | - Originally developed under Linux, but available elsewhere 74 | - No central repository, but can synchronise with remotes 75 | - Cloud-hosted repository servers: github; gitlab; bitbucket 76 | 77 | Recommend you use github with education: free private repositories 78 | 79 | --- 80 | 81 | ## Key concepts in git 82 | 83 | ::: incremental 84 | 85 | - A __file__ (in a path) 86 | - A __commit__: a snapshot of a collection of files at a particular time 87 | - A __branch__: a linear sequence of commits 88 | - A __repository__: (possibly) many branches of a project 89 | - A __remote__: another place where a repository is stored 90 | 91 | ::: 92 | 93 | --- 94 | 95 | ## Key commands in git 96 | 97 | Working on the command line (like [84% of developers](https://survey.stackoverflow.co/2022/#version-control-vc-interaction)) 98 | ``` 99 | git init 100 | git add 101 | git status 102 | git commit 103 | git push 104 | ``` 105 | 106 | --- 107 | 108 | ## git init 109 | 110 | Creates a directory `.git` where everything is stored 111 | 112 | You may also want to do `git config` at this stage 113 | 114 | Think about adding a `.gitignore` file 115 | 116 | --- 117 | 118 | ## git add 119 | 120 | Puts the current working version of a file into the staging area 121 | 122 | Preparing for a commit 123 | 124 | Check what will be committed with `git status` 125 | 126 | --- 127 | 128 | ## git commit 129 | 130 | Makes a commit based on currently staged files 131 | 132 | Will start an editor (see git config) 133 | 134 | Consider 135 | ``` 136 | git commit -m "message" 137 | ``` 138 | to avoid editor 139 | 140 | --- 141 | 142 | ## git push 143 | 144 | Pushes a branch to a remote repository 145 | 146 | `git push origin main` 147 | 148 | `origin` defined by 149 | ``` 150 | git remote add origin 151 | ``` 152 | or 153 | ``` 154 | git clone 155 | ``` 156 | 157 | The default branch used to be `master` instead of `main`. See [SO article on changing](https://stackoverflow.com/questions/67543278/git-how-to-change-default-branch-for-everything-i-do) 158 | 159 | --- 160 | 161 | ## See also 162 | 163 | - [Summary of main commands](https://confluence.atlassian.com/bitbucketserver/basic-git-commands-776639767.html) 164 | - [Useful tutorials in particular Getting Started and Collaborating](https://www.atlassian.com/git/tutorials) 165 | - [Git from the bottom up](https://jwiegley.github.io/git-from-the-bottom-up/) an explanation of how git works 166 | -------------------------------------------------------------------------------- /js_fetch/PITCHME.md: -------------------------------------------------------------------------------- 1 | # JavaScript Client-Server Interaction {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | ## Summary 6 | 7 | ::: incremental 8 | 9 | - Asynchronous JavaScript (AJAX) 10 | - Fetch API 11 | - Cross-Origin Resource Sharing 12 | - Promises 13 | - async and await 14 | - Exceptions 15 | 16 | ::: 17 | 18 | --- 19 | 20 | ## Asynchronous JavaScript and XML (AJAX) 21 | 22 | ::: incremental 23 | 24 | - Use to update part of an HTML page with the result of a request 25 | - Client-side JavaScript sends request 26 | - Page needs to work while waiting 27 | - An event is triggered when response arrives 28 | - Content of response is used to update page content 29 | - 'Single page app' 30 | - Mostly use JSON instead of XML these days 31 | 32 | ::: 33 | 34 | --- 35 | 36 | ## Fetch API 37 | 38 | ::: incremental 39 | 40 | - Before ES6 most people used [jQuery for AJAX](http://api.jquery.com/category/ajax/) 41 | - Now the [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) does this natively 42 | - Polyfill https://github.com/github/fetch works on any browser 43 | 44 | ::: 45 | 46 | --- 47 | 48 | ## Fetch example HTML 49 | 50 | ``` 51 | 52 |
53 | 54 | 55 | 56 | ``` 57 | 58 | --- 59 | 60 | ## Fetch client JS 61 | 62 | ``` 63 | window.addEventListener('click', function(event){ 64 | fetch('http://127.0.0.1:8090/list') 65 | .then(response => response.text()) 66 | .then(body => 67 | document.getElementById('content').innerHTML=body) 68 | }); 69 | 70 | ``` 71 | Note use of => for anonymous function declaration 72 | 73 | --- 74 | 75 | ## Fetch server JS 76 | ``` 77 | const express = require('express'); 78 | const app = express(); 79 | 80 | let instruments = [ 'piano', 'concertina', 'double bass']; 81 | 82 | app.get('/list', function (req, resp){ 83 | resp.send(instruments); 84 | }); 85 | 86 | app.listen(8090); 87 | 88 | ``` 89 | 90 | --- 91 | 92 | ## Problem 93 | 94 | This does not work: browser console says 95 | 96 | 97 | > index.html:1 Access to fetch at 'http://127.0.0.1:8090/list' from 98 | > origin 'null' has been blocked by CORS policy: No 99 | > 'Access-Control-Allow-Origin' header is present on the requested 100 | > resource. If an opaque response serves your needs, set the request's 101 | > mode to 'no-cors' to fetch the resource with CORS disabled. 102 | 103 | --- 104 | 105 | ## [Same-origin Policy](https://en.wikipedia.org/wiki/Same-origin_policy) 106 | 107 | 108 | - Security feature of browsers 109 | - Asynchronous requests only to source of page 110 | - Cross-Origin Resource Sharing (CORS) can get around it 111 | - Or, better, serve from the same place 112 | 113 | --- 114 | 115 | ## Promises 116 | 117 | - Fetch uses [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises) 118 | - Promises should make it easier to attach callbacks/handlers 119 | - Include success and failure callbacks 120 | - Add (chains of) success callbacks with `.then` 121 | - Add failure callback with `.catch` 122 | - N.B. a 404 is still counted as success 123 | 124 | --- 125 | 126 | ## catch example 127 | 128 | Add this to handle any errors from `fetch` handler chain 129 | 130 | ``` 131 | .catch( (error) => alert(error)) 132 | ``` 133 | 134 | If you want to deal with 404 errors you will have to look at `response.ok` 135 | 136 | --- 137 | 138 | ## async and await 139 | 140 | - New in ES2017 141 | - Provide 'syntactic sugar' for promises `.catch` 142 | - Use `async` keyword before `function` keyword 143 | - use `await` keyword in execution 144 | 145 | --- 146 | 147 | ## async example 148 | 149 | ``` 150 | window.addEventListener('click', async function(event){ 151 | let response = await fetch('http://127.0.0.1:809/list'); 152 | let body = await response.text(); 153 | document.getElementById('content').innerHTML=body 154 | }); 155 | ``` 156 | 157 | --- 158 | 159 | ## Exceptions 160 | 161 | What happens if things go wrong? 162 | 163 | ``` 164 | window.addEventListener('click', async function(event){ 165 | try{ 166 | let response = await fetch('http://127.0.0.1:809/list'); 167 | let body = await response.text(); 168 | document.getElementById('content').innerHTML=body; 169 | } catch(e) { 170 | alert(e); 171 | } 172 | }); 173 | ``` 174 | 175 | N.B. `catch` instead of Python `except` 176 | 177 | --- 178 | 179 | ## Summary 180 | 181 | - Asynchronous JavaScript (AJAX) 182 | - Fetch API 183 | - Cross-Origin Resource Sharing 184 | - Promises 185 | - async and await 186 | - Exceptions 187 | 188 | -------------------------------------------------------------------------------- /js_intro_node/README.md: -------------------------------------------------------------------------------- 1 | # Introduction to nodejs 2 | 3 | ![.](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/220px-Node.js_logo.svg.png) 4 | 5 | 6 | ## What and Why? 7 | 8 | 9 | - Server-side scripting in JavaScript: alternative to php, asp, RoR 10 | - Single thread execution: non-blocking 11 | - Not designed for compute-heavy applications 12 | - Package manager npm claims to be largest ecosystem of open source libraries in the world 13 | 14 | 15 | 16 | ## History 17 | 18 | 19 | - Developed from 2009 20 | - Based on Chrome V8 Javascript engine: compiles to machine code 21 | - Originally by Joyent, part of [OpenJS foundation](https://openjsf.org/) 22 | - [Major fork in 2014](https://flaviocopes.com/node-history/) to io.js, since merged: confusing version numbers 23 | - MIT-style licence 24 | - Package manager [npm](https://www.npmjs.com/) (and [yarn](https://yarnpkg.com/)). See [left pad incident](https://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) 25 | 26 | 27 | 28 | ## Hosting 29 | 30 | 31 | - Cross-platform installation available for local hosting 32 | - Available on many PaaS installations e.g. AWS, Azure, openshift, IBM bluemix 33 | - Not as widely available as php but more than most others (my opinion/experience) 34 | 35 | 36 | 37 | ## Hello world 38 | 39 | ``` 40 | console.log("Hello world") 41 | ``` 42 | 43 | 44 | - Save in hello.js 45 | - run with ```node hello.js``` or via VSC 46 | - uses terminal as console instead of browser tools 47 | 48 | 49 | 50 | ## Web server 51 | 52 | ``` 53 | http = require("http") 54 | 55 | http.createServer(function (request, response) { 56 | response.writeHead(200, ); 57 | response.end('Hello World\n'); 58 | }).listen(8080); 59 | 60 | console.log('Server running at http://127.0.0.1:8080/'); 61 | ``` 62 | 63 | 64 | - Use module http, based on CommonJS 65 | - Module = file 66 | - `require` returns a js object that contains the module components 67 | - modules are installed with npm if necessary (plus dependencies) 68 | - node starts its own web server rather than running as an apache module (like php often is) 69 | 70 | 71 | 72 | ## Event loop 73 | 74 | 75 | - node runs on an event loop 76 | - callbacks are associated with events 77 | - programs should be non-blocking so that callbacks are provided for things like 78 | - block of data arrives from file 79 | - block of data arrives from REST request 80 | - results data arrives from database request 81 | - callbacks can themselves trigger new events 82 | - next instruction is executed once all callbacks are complete 83 | 84 | 85 | 86 | ![nodejs threading model](https://i.stack.imgur.com/YCTgK.png) 87 | 88 | Thanks to [SO user568109](http://stackoverflow.com/questions/14795145/how-the-single-threaded-non-blocking-io-model-works-in-node-js) 89 | 90 | 91 | # Routing requests 92 | 93 | 94 | ## Why express? 95 | 96 | 97 | - Variables can be GET-encoded 98 | - In REST APIs they are often included in the URL directly (without question marks) 99 | - E.g. use [twitter API](https://developer.twitter.com/en/docs/api-reference-index) 100 | - We want to use routing to pick bits out of the URL for this in nodejs 101 | - There is a commonly used package called [express](https://expressjs.com/) 102 | 103 | 104 | 105 | # npm packages 106 | 107 | - npm is your friend 108 | - Dependencies are stored in package.json 109 | - Uses [semantic versioning](http://semver.org) 110 | - Code should have public API by version 111 | - Version is X.Y.Z 112 | - X = major version, Y = minor version, Z = patch 113 | - Never change code within version once released 114 | 115 | 116 | - version semantics 117 | - X = 0 for pre-release versions 118 | - Increase Z for bug-fixes, no new functionality 119 | - Increase Y, set Z=0 for backwards-compatibile new functionality 120 | - Increase X, set Y=Z=0 for backwards-incompatible new functionality 121 | - In package.json can use tilde to match minor version, caret to match major version etc 122 | 123 | 124 | 125 | # Install express 126 | 127 | ``` 128 | npm init 129 | ``` 130 | 131 | creates package.json 132 | 133 | ``` 134 | npm install express 135 | ``` 136 | 137 | installs express package and its dependencies 138 | 139 | ``` 140 | npm install express --save 141 | ``` 142 | 143 | installs and puts dependency in package.json 144 | 145 | 146 | # Express routing 147 | 148 | ``` 149 | const express = require('express') 150 | const app = express() 151 | 152 | app.get('/', function(req, resp){ 153 | resp.send('Hello world') 154 | }) 155 | 156 | app.listen(8090) 157 | ``` 158 | This just starts an express app handling GET requests via port 8090 159 | 160 | 161 | ``` 162 | const express = require('express') 163 | const app = express() 164 | 165 | app.get('/random/:max', function(req, resp){ 166 | max = parseInt(req.params.max) 167 | rand = Math.floor(Math.random()*max) +1 168 | console.log('Max via url is ' + max + ' rand is ' + rand) 169 | resp.send('' + rand) 170 | }) 171 | 172 | app.get('/r', function(req, resp){ 173 | max = parseInt(req.query.max) 174 | rand = Math.floor(Math.random()*max) +1 175 | console.log('Max via query is ' + max + ' rand is ' + rand) 176 | resp.send('' + rand) 177 | }) 178 | 179 | app.listen(8090) 180 | ``` 181 | 182 | 183 | - Adds two separate routes 184 | - Extract max value in two different ways 185 | - Via value in URL (:max) 186 | - Via value in GET-encoded variable 187 | 188 | 189 | 190 | ## Serving client content through node 191 | 192 | - Add this line to server (middleware) 193 | ``` 194 | app.use(express.static('client')); 195 | ``` 196 | - Put all static content in `client` directory 197 | - E.g. html, client JS, CSS, images, sounds 198 | - Access via server (without `client` in url) 199 | ``` 200 | 127.0.0.1:8090/index.html 201 | ``` 202 | 203 | 204 | # In Summary 205 | 206 | - nodejs provides server-side JavaScript 207 | - npm is the package manager 208 | - servers can run locally or remotely 209 | - express is a very popular package for routing requests 210 | 211 | -------------------------------------------------------------------------------- /js_intro_node/PITCHME.md: -------------------------------------------------------------------------------- 1 | # Introduction to nodejs {data-background-color=#7E317B} 2 | 3 | ![.](https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Node.js_logo.svg/220px-Node.js_logo.svg.png){width=40%} 4 | 5 | --- 6 | 7 | ## What and Why? 8 | 9 | ::: incremental 10 | 11 | - Server-side scripting in JavaScript: alternative to php, asp, RoR 12 | - Single thread execution: non-blocking 13 | - Not designed for compute-heavy applications 14 | - Package manager npm claims to be largest ecosystem of open source libraries in the world 15 | 16 | ::: 17 | 18 | --- 19 | 20 | ## History 21 | 22 | ::: incremental 23 | 24 | - Developed from 2009 25 | - Based on Chrome V8 Javascript engine: compiles to machine code 26 | - Originally by Joyent, part of [OpenJS foundation](https://openjsf.org/) 27 | - [Major fork in 2014](https://flaviocopes.com/node-history/) to io.js, since merged: confusing version numbers 28 | - MIT-style licence 29 | - Package manager [npm](https://www.npmjs.com/) (and [yarn](https://yarnpkg.com/)). See [left pad incident](https://blog.npmjs.org/post/141577284765/kik-left-pad-and-npm) 30 | 31 | ::: 32 | 33 | --- 34 | 35 | ## Hosting 36 | 37 | ::: incremental 38 | 39 | - Cross-platform installation available for local hosting 40 | - Available on many PaaS installations e.g. AWS, Azure, openshift, IBM bluemix 41 | - Not as widely available as php but more than most others (my opinion/experience) 42 | 43 | ::: 44 | 45 | --- 46 | 47 | ## Hello world 48 | 49 | ``` 50 | console.log("Hello world") 51 | ``` 52 | 53 | ::: incremental 54 | 55 | - Save in hello.js 56 | - run with ```node hello.js``` or via VSC 57 | - uses terminal as console instead of browser tools 58 | 59 | ::: 60 | 61 | --- 62 | 63 | ## Web server 64 | 65 | ``` 66 | http = require("http") 67 | 68 | http.createServer(function (request, response) { 69 | response.writeHead(200, {'Content-Type': 'text/plain'}); 70 | response.end('Hello World\n'); 71 | }).listen(8080); 72 | 73 | console.log('Server running at http://127.0.0.1:8080/'); 74 | ``` 75 | 76 | --- 77 | 78 | - Use module http, based on CommonJS 79 | - Module = file 80 | - `require` returns a js object that contains the module components 81 | - modules are installed with npm if necessary (plus dependencies) 82 | - node starts its own web server rather than running as an apache module (like php often is) 83 | 84 | 85 | --- 86 | 87 | ## Event loop 88 | 89 | ::: incremental 90 | 91 | - node runs on an event loop 92 | - callbacks are associated with events 93 | - programs should be non-blocking so that callbacks are provided for things like 94 | - block of data arrives from file 95 | - block of data arrives from REST request 96 | - results data arrives from database request 97 | - callbacks can themselves trigger new events 98 | - next instruction is executed once all callbacks are complete 99 | 100 | ::: 101 | 102 | --- 103 | 104 | ![nodejs threading model](https://i.stack.imgur.com/YCTgK.png) 105 | 106 | Thanks to [SO user568109](http://stackoverflow.com/questions/14795145/how-the-single-threaded-non-blocking-io-model-works-in-node-js) 107 | 108 | --- 109 | 110 | # Routing requests {data-background-color=#A5C8D0} 111 | 112 | --- 113 | 114 | ## Why express? 115 | 116 | ::: incremental 117 | 118 | - Variables can be GET-encoded 119 | - In REST APIs they are often included in the URL directly (without question marks) 120 | - E.g. use [twitter API](https://developer.twitter.com/en/docs/api-reference-index) 121 | - We want to use routing to pick bits out of the URL for this in nodejs 122 | - There is a commonly used package called [express](https://expressjs.com/) 123 | 124 | ::: 125 | 126 | --- 127 | 128 | # npm packages 129 | 130 | - npm is your friend 131 | - Dependencies are stored in package.json 132 | - Uses [semantic versioning](http://semver.org) 133 | - Code should have public API by version 134 | - Version is X.Y.Z 135 | - X = major version, Y = minor version, Z = patch 136 | - Never change code within version once released 137 | 138 | --- 139 | 140 | - version semantics 141 | - X = 0 for pre-release versions 142 | - Increase Z for bug-fixes, no new functionality 143 | - Increase Y, set Z=0 for backwards-compatibile new functionality 144 | - Increase X, set Y=Z=0 for backwards-incompatible new functionality 145 | - In package.json can use tilde to match minor version, caret to match major version etc 146 | 147 | 148 | --- 149 | 150 | # Install express 151 | 152 | ``` 153 | npm init 154 | ``` 155 | 156 | creates package.json 157 | 158 | ``` 159 | npm install express 160 | ``` 161 | 162 | installs express package and its dependencies 163 | 164 | ``` 165 | npm install express --save 166 | ``` 167 | 168 | installs and puts dependency in package.json 169 | 170 | --- 171 | 172 | # Express routing 173 | 174 | ``` 175 | const express = require('express') 176 | const app = express() 177 | 178 | app.get('/', function(req, resp){ 179 | resp.send('Hello world') 180 | }) 181 | 182 | app.listen(8090) 183 | ``` 184 | This just starts an express app handling GET requests via port 8090 185 | 186 | --- 187 | 188 | ``` 189 | const express = require('express') 190 | const app = express() 191 | 192 | app.get('/random/:max', function(req, resp){ 193 | max = parseInt(req.params.max) 194 | rand = Math.floor(Math.random()*max) +1 195 | console.log('Max via url is ' + max + ' rand is ' + rand) 196 | resp.send('' + rand) 197 | }) 198 | 199 | app.get('/r', function(req, resp){ 200 | max = parseInt(req.query.max) 201 | rand = Math.floor(Math.random()*max) +1 202 | console.log('Max via query is ' + max + ' rand is ' + rand) 203 | resp.send('' + rand) 204 | }) 205 | 206 | app.listen(8090) 207 | ``` 208 | 209 | ::: incremental 210 | 211 | - Adds two separate routes 212 | - Extract max value in two different ways 213 | - Via value in URL (:max) 214 | - Via value in GET-encoded variable 215 | 216 | ::: 217 | 218 | --- 219 | 220 | ## Serving client content through node 221 | 222 | - Add this line to server (middleware) 223 | ``` 224 | app.use(express.static('client')); 225 | ``` 226 | - Put all static content in `client` directory 227 | - E.g. html, client JS, CSS, images, sounds 228 | - Access via server (without `client` in url) 229 | ``` 230 | 127.0.0.1:8090/index.html 231 | ``` 232 | 233 | 234 | # In Summary {data-background-color=#A5C8D0} 235 | 236 | - nodejs provides server-side JavaScript 237 | - npm is the package manager 238 | - servers can run locally or remotely 239 | - express is a very popular package for routing requests 240 | 241 | -------------------------------------------------------------------------------- /js/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript 2 | 3 | 4 | ## [History](https://app.pluralsight.com/player?name=javascript-good-parts-m2&mode=live&clip=0&course=javascript-good-parts&author=douglas-crockford) 5 | 6 | 7 | - Originally in browsers 8 | - Not Java 9 | - It has some good parts 10 | - Standardised by [ecma](https://www.ecma-international.org/) (once ECMA) as EcmaScript 11 | - Current version is [ES13 (2023)](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) with some [new features](https://blog.saeloun.com/2023/08/11/2023-ECMAScript-2023-new-features/) 12 | - Most recent widely-supported version is ES6 (2015) 13 | - [Support varies](https://caniuse.com/?search=javascript) 14 | 15 | 16 | 17 | ## Client- and server- side 18 | 19 | 20 | - More recently JS is also used server-side: nodejs 21 | - Good JS engines in mobile browsers 22 | - JS often used for cross-platform App dev with [Progressive Web Apps](https://web.dev/progressive-web-apps/) 23 | - Also for desktop applications with [electron](https://electronjs.org/) 24 | - Interpreted, not compiled: errors only happen at run-time 25 | - `console.log` is your friend 26 | 27 | 28 | 29 | ## Hello world 30 | 31 | - Embed JavaScript in a web page 32 | - Use `script` tag 33 | ```HTML 34 | 35 | 38 | 39 | ``` 40 | 41 | 42 | ## What just happened? 43 | 44 | Nothing? 45 | 46 | Looks the same as this 47 | ```HTML 48 | 49 | 52 | 53 | ``` 54 | 55 | Use developer tools to see the console output and error, or for [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) 56 | 57 | 58 | ## Hello again 59 | 60 | In the browser we can also use the `alert` function 61 | ```HTML 62 | 63 | 66 | 67 | ``` 68 | Can run in browser as file, not just with http 69 | 70 | 71 | ## Importing code 72 | 73 | 74 | - Link to external JavaScript code with `src` attribute 75 | - Usually placed at end or in `head` 76 | - Can refer to files in same source 77 | - Can refer to external files via http 78 | - Content Delivery Networks (CDN) 79 | ```HTML 80 | 151 | 152 | // reveal.js plugins 153 | 154 | 155 | 156 | 157 | 173 | 174 | 175 | -------------------------------------------------------------------------------- /js/PITCHME.md: -------------------------------------------------------------------------------- 1 | # JavaScript {data-background-color=#7E317B} 2 | 3 | --- 4 | 5 | ## [History](https://app.pluralsight.com/player?name=javascript-good-parts-m2&mode=live&clip=0&course=javascript-good-parts&author=douglas-crockford) 6 | 7 | ::: incremental 8 | 9 | - Originally in browsers 10 | - Not Java 11 | - It has some good parts 12 | - Standardised by [ecma](https://www.ecma-international.org/) (once ECMA) as EcmaScript 13 | - Current version is [ES13 (2023)](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) with some [new features](https://blog.saeloun.com/2023/08/11/2023-ECMAScript-2023-new-features/) 14 | - Most recent widely-supported version is ES6 (2015) 15 | - [Support varies](https://caniuse.com/?search=javascript) 16 | 17 | ::: 18 | 19 | --- 20 | 21 | ## Client- and server- side 22 | 23 | ::: incremental 24 | 25 | - More recently JS is also used server-side: nodejs 26 | - Good JS engines in mobile browsers 27 | - JS often used for cross-platform App dev with [Progressive Web Apps](https://web.dev/progressive-web-apps/) 28 | - Also for desktop applications with [electron](https://electronjs.org/) 29 | - Interpreted, not compiled: errors only happen at run-time 30 | - `console.log` is your friend 31 | 32 | ::: 33 | 34 | --- 35 | 36 | ## Hello world 37 | 38 | - Embed JavaScript in a web page 39 | - Use `script` tag 40 | ```HTML 41 | 42 | 45 | 46 | ``` 47 | 48 | --- 49 | 50 | ## What just happened? 51 | 52 | Nothing? 53 | 54 | Looks the same as this 55 | ```HTML 56 | 57 | 60 | 61 | ``` 62 | 63 | Use developer tools to see the console output and error, or for [REPL](https://en.wikipedia.org/wiki/Read%E2%80%93eval%E2%80%93print_loop) 64 | 65 | --- 66 | 67 | ## Hello again 68 | 69 | In the browser we can also use the `alert` function 70 | ```HTML 71 | 72 | 75 | 76 | ``` 77 | Can run in browser as file, not just with http 78 | 79 | --- 80 | 81 | ## Importing code 82 | 83 | 84 | - Link to external JavaScript code with `src` attribute 85 | - Usually placed at end or in `head` 86 | - Can refer to files in same source 87 | - Can refer to external files via http 88 | - Content Delivery Networks (CDN) 89 | ```HTML 90 | 167 | 168 | // reveal.js plugins 169 | 170 | 171 | 172 | 173 | 189 | 190 | 191 | -------------------------------------------------------------------------------- /code_quality/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
39 |

Code Quality

40 | 41 |
42 |
43 |

Summary

44 |
    45 |
  • ESLint
    • 46 |
  • Getting the most out of VSCode
    • 47 |
  • Next term
    • 48 |
49 |
50 |
51 |

ESLint

52 |
    53 |
  • Check coding standards are applied
    • 54 |
  • Install with npm install eslint possibly with 55 | -g
    • 56 |
  • Configure in your project with eslint --init
    • 57 |
  • Use a particular set of rules e.g. standard (need to install)
    • 58 |
  • Customise (see coursework specification)
    • 59 |
  • Run with eslint file.js
    • 60 |
  • Autofix with eslint --fix file.js
    • 61 |
  • Beware bikeshedding 63 | over standards
    • 64 |
65 |
66 | 77 |
78 |

ESLint tooling

79 | 91 |
92 |
93 |

Getting the most out of VSCode

94 | 103 |
104 |
105 |

Next term

106 |
    107 |
  • Work on second assignment: collaborative project
    • 108 |
  • No more practicals
    • 109 |
  • Weekly drop-in sessions 10:00 Fridays D110
    • 110 |
  • Sometimes specific content 111 |
      112 |
    • second assignment choosing a project
      • 113 |
    • completing a peer review
      • 114 |
    • reflective writing
      • 115 |
    • 116 |
  • Other times just answering any questions
    • 117 |
118 |
119 |
120 |
121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 282 | 283 | 284 | -------------------------------------------------------------------------------- /comp1011_intro/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 |
38 |

COMP1101 Programming (Black)

39 |

Introduction to the module

40 |
41 |
42 | 43 |

Why choose this module (poll)?

44 |

https://pollev.com/stevenaeola

45 |
46 |
    47 |
  • To become more like a professional programmer
    • 48 |
  • To learn how to do cool things
    • 49 |
  • To stretch yourself
    • 50 |
  • Not just for the marks
    • 51 |
52 |
53 |
54 |
56 |

What tools do developers use 57 | (poll)?

58 |

… … …

61 |
62 |
63 | 64 |

We will be learning

65 |
    66 |
  • Web front-end (including HTML, CSS, JavaScript)
    • 67 |
  • Web back-end (including nodejs, REST API)
    • 68 |
  • Collaboration tools (git) and processes (code review)
    • 69 |
  • Automated testing (jest)
    • 70 |
71 |
72 |
73 | 74 |

Assessment

75 |
76 |
    77 |
  • Two assignments
    • 78 |
  • No exam
    • 79 |
  • First assignment: single-page app web site 80 |
      81 |
    • you choose what it does
      • 82 |
    • peer code review
      • 83 |
    • 84 |
  • Second assignment: contribute and collaborate 85 |
      86 |
    • you choose what you learn
      • 87 |
    • collaborate (open source, hackathon, 88 | competition)
      • 89 |
    • reflect on what you have learned
      • 90 |
    • 91 |
  • See LU for deadlines
    • 92 |
93 |
94 |
95 |
96 | 97 |

Gold vs Black

98 |
    99 |
  • Black is for more experienced programmers (e.g. with A level)
    • 100 |
  • Both have the same fixed content
    • 101 |
  • Gold second assignment = Black first assignment
    • 102 |
  • Black has no content lectures second term: drop-in tutorials
    • 103 |
  • Gold has more examples
    • 104 |
  • You can choose which one
    • 105 |
106 |
107 |
108 | 109 |

Self-evaluation

110 |
    111 |
  • Questionnaire (Module information)
    • 112 |
  • Your score is only for your information
    • 113 |
  • I will publish the score distributions to help you choose
    • 114 |
115 |
116 |
117 | 118 |

Teaching plan

119 |
    120 |
  • Two lectures a week f2f (Thurs 4, Fri 1)
    • 121 |
  • One practical a week term 1 (see allocation on MyTimetable)
    • 122 |
  • Office hours 2:30-3:30 Friday in person or by zoom (see contacts on 123 | LU to book a slot)
    • 124 |
  • Term 2 tutorials: no lectures or practicals
    • 125 |
126 |
127 |
128 | 129 |

Examples

130 |
131 |
    132 |
  • This is a practically motivated course
    • 133 |
  • What should we do as an example?
    • 134 |
  • Previously have done cheese, memes, hats, Sue 135 | Black, goats, pasta
    • 136 |
  • Come up with a suggestion in a group of three
    • 137 |
  • Then we will have a vote
    • 138 |
139 |
140 |
141 |
143 |

Next time

144 |

Version control with git

145 |
146 |
147 |
148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 309 | 310 | 311 | -------------------------------------------------------------------------------- /nodejs_rest/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
42 |

REST

43 | 44 |
45 |
46 |

Representational 48 | State Transfer

49 |
50 |
51 |

Summary

52 |
    53 |
  • Architectural style for web services
    • 54 |
  • Provides interoperability (language independent)
    • 55 |
  • Uses http methods (GET, POST, PUT, DELETE …)
    • 56 |
  • Like function call 57 |
      58 |
    • Parameters provided in URL (GET) or body (POST)
      • 59 |
    • Results provided in body
      • 60 |
    • 61 |
  • Published as an API e.g. twitter, 63 | github, gmail
    • 65 |
66 |
67 |
68 |

Implementing a REST API in nodejs

69 |
    70 |
  • Think about your entities
    • 71 |
  • GET methods for listing/searching and detail
    • 72 |
  • POST method(s) for adding/updating
    • 73 |
  • DELETE method (not necessary for the assignment)
    • 74 |
  • Need to thing about http response code e.g. 75 |
      76 |
    • 200 for OK (sent by default in express)
      • 77 |
    • 403 for unauthorised
      • 78 |
    • 400 for other request error
      • 79 |
    • 80 |
  • Extract parameters; send response
    • 81 |
82 |
83 |
84 |

REST parameters

85 | 93 | 
app.use(express.json());
94 |
    95 |
  • Access values with req.body.var_name
    • 96 |
97 |

See also tutorial 99 | on nodejs to build a REST API

100 |
101 |
102 |

REST and Single Page App

103 |
    104 |
  • In a single page app reduce traffic by updating content rather than 105 | reloading
    • 106 |
  • Access REST methods directly from client (using fetch)
    • 107 |
  • Problem: if we use a form it gets submitted and loads ‘action’ 108 | page
    • 109 |
  • Solution: stop default form action (client-side)
    • 110 |
111 | 
event.preventDefault();
112 |

or

113 | 
event.stopPropogation();
114 |
115 |
117 |

Sending POST data from a form as JSON

118 | 134 |
135 |
136 |
137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 298 | 299 | 300 | -------------------------------------------------------------------------------- /html/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |

HTML

41 |

HyperText Markup Language

42 |
43 |
44 | 45 |

Last time

46 |
47 |
    48 |
  • Source code control with git
    • 49 |
  • File; commit; branch; repository; remote
    • 50 |
  • init/clone; add; commit; (pull then) push
    • 51 |
52 |
53 |
54 |
55 | 56 |

Today

57 |
    58 |
  • HTML tags
    • 59 |
  • What makes a good HTML page
    • 60 |
  • Web front-end frameworks
    • 61 |
62 |
63 |
64 | 65 |

HTML tags and elements

66 | 
<html>
 67 | <body>
 68 |   <h1>Hello</h1>
 69 |   <p>World</p>
 70 | </body>
 71 | </html>
72 |
73 |
74 | 75 |

(In groups)

76 |
    77 |
  • Introduce yourselves
    • 78 |
  • List the HTML tags you are familiar with 79 |
      80 |
    • five minutes
      • 81 |
    • 82 |
  • One person to create a text file with them in 83 |
      84 |
    • one per line
      • 85 |
    • just the name of the tag (no angle brackets)
      • 86 |
    • 87 |
88 |
89 |
90 | 91 |

Putting them together

92 | 97 |
98 |
99 | 100 |

What makes a good HTML page?

101 |
102 |
    103 |
  • Standards compliant HTML5 W3C 105 |
    • 110 |
  • Accessible: alt tags; contrast; WCAG; MDN 113 | advice
    • 114 |
  • Mobile-friendly: viewport; lightweight; 115 | responsive
    • 116 |
  • Quick-loading
    • 117 |
  • Review with e.g. Lighthouse
    • 119 |
120 |
121 |
122 |
123 | 124 |

HTML/CSS Frameworks

125 |
126 |
    127 |
  • Apply styles with CSS classes
    • 128 |
  • Pre-written HTML templates and (some) 129 | JavaScript
    • 130 |
  • Make it easy to make things look nice
    • 131 |
  • Make it easy to make things responsive
    • 132 |
  • Can sometimes be heavy (large file size, slow)
    • 133 |
  • e.g. Bootstrap and alternatives 136 | including CSS
    • 138 |
  • N.B. Frameworks like React and Vue are different things: they generate 141 | HTML
    • 142 |
143 |
144 |
145 |
146 | 147 |

Example

148 |

To sieve out the stuff we don’t want we can

149 |
    150 |
  • make our page HTML5 compliant
    • 151 |
  • include it in a bootstrap template
    • 152 |
153 |

Follow progress at https://github.com/stevenaeola/progblack_2324

156 |
157 |
158 |
159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 320 | 321 | 322 | -------------------------------------------------------------------------------- /nodejs_testing/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 |
37 |
39 |

Testing nodejs REST

40 | 41 |
42 |
43 |

Why testing?

44 |
45 |
    46 |
  • Does not prove the absence of bugs
    • 47 |
  • Can help identify existing bugs
    • 48 |
  • Can avoid introducing new bugs
    • 49 |
  • Repeated testing necessary in agile 50 | development
    • 51 |
  • Automated as far as possible
    • 52 |
  • It’s in the assignment …
    • 53 |
54 |
55 |
56 |
57 |

Basic Approaches

58 |
    59 |
  • Using browser (manual)
    • 60 |
  • Using Postman (partly automatic)
    • 61 |
  • Using test scripts (automatic)
    • 62 |
63 |
64 |
65 |

Browser-based testing

66 |
    67 |
  • GET is easy: just type in URL
    • 68 |
  • POST is slightly harder: build HTML form
    • 69 |
  • Other http methods more difficult
    • 70 |
71 |
72 |
73 |

Postman

74 |
    75 |
  • Originally a chrome plugin
    • 76 |
  • Now a web/dekstop 77 | application
    • 78 |
  • Define a set of requests in a collection
    • 79 |
  • Choose GET or POST (or other)
    • 80 |
  • Include body parameters for POST
    • 81 |
  • Use raw/JSON for JSON
    • 82 |
  • Can specify expected responses
    • 83 |
84 |
85 |
86 |

Test scripts

87 |
    88 |
  • There are very many JavaScript unit testing frameworks (mocha, 89 | jasmine, ava)
    • 90 |
  • I recommend using Jest
    • 91 |
  • Read a recent 93 | review
    • 94 |
  • Also see StateofJS
    • 96 |
  • npm install --save-dev jest
    • 97 |
  • Tests are js programs (as in jUnit)
    • 98 |
  • Put tests in test directory or name .test.js
    • 99 |
100 |
101 |
102 |

Running tests

103 |
    104 |
  • Get it going first
    • 105 |
  • Use nodemon to auto-restart server
    • 106 |
  • Add test script to your package.json
    • 107 |
  • run test with npm test
    • 108 |
  • see some example 110 | tests for thing
    • 111 |
112 |
113 |
114 |

Separate out app from server

115 |

So that running tests does not launch the server

116 |

e.g. app.js file

117 | 
const express = require('express');
118 | const app = express();
119 | // ... add routes
120 | module.exports = app;
121 |
122 |

e.g. server.js file

123 | 
const app = require('./app');
124 | app.listen(8090);
125 |
126 |
127 |
128 |

Test coverage

129 |
    130 |
  • In testing we try to improve quality
    • 131 |
  • Coverage measures how much functionality has been tested
    • 132 |
  • Could measure this in terms of 133 |
      134 |
    • the space of possible inputs (black box)
      • 135 |
    • the code that has been executed (white box)
      • 136 |
    • 137 |
  • Unit testing combines the two
    • 138 |
  • Need to think about valid and invalid inputs
    • 139 |
140 |
141 |
142 |

Mocking

143 |
144 |
    145 |
  • You want to avoid accessing live systems during 146 | tests
    • 147 |
  • Reading may be brittle
    • 148 |
  • Writing may be dangerous
    • 149 |
  • Real system may not be developed yet
    • 150 |
  • Replace access to live data using mocking
    • 152 |
  • There are specific jest 154 | functions for this
    • 155 |
  • If you intend to use a remote web service you 156 | should use mocking
    • 157 |
  • Same for a remote database (e.g. Firebase)
    • 158 |
159 |
160 |
161 |
162 |
163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 324 | 325 | 326 | -------------------------------------------------------------------------------- /json/PITCHME.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | PITCHME 7 | 8 | 9 | 10 | 11 | 12 | 32 | 33 | 34 | 35 |
36 |
37 | 38 | 39 |
40 |
42 |

JSON: JavaScript Object 43 | Notation

44 | 45 |
46 |
47 |

Summary

48 |
49 |
    50 |
  • Human- and machine- readable and writable
    • 51 |
  • Used for storage and transmission of data
    • 52 |
  • Language agnostic
    • 53 |
  • Alternative to XML in AJAX
    • 54 |
  • JavaScript methods JSON.stringify and 55 | JSON.parse
    • 56 |
  • Equivalents in python, Java etc
    • 59 |
60 |
61 |
62 |
63 |

What does it look like?

64 |
    65 |
  • Plain text
    • 66 |
  • Encodes objects, lists, strings, numbers, boolean, null
    • 67 |
  • Does not encode functions
    • 68 |
  • Read the language 69 | summary
    • 70 |
  • Subset of object literal notation in JavaScript 71 |
      72 |
    • Object keys need to be in (double) quotes
      • 73 |
    • 74 |
75 |
76 |
77 |

Sending JSON with fetch

78 |
    79 |
  • Set method to POST
    • 80 |
  • Set 'Content-Type': 'application/json' in headers
    • 81 |
  • Use JSON.stringify() 83 | to encode body
    • 84 |
  • See postStuff example
    • 85 |
  • Note use of httpbin for testing 86 | client without a server
    • 87 |
88 |
89 |
91 |

Using JSON response to update DOM (client)

92 | 115 |
116 |
117 |

JSON with express (server)

118 |

Add middleware for JSON body parsing

119 | 
app.use(express.json());
120 |

Then access req.body within a .post 121 | route.

122 |

To send JSON jwith express either - use res.json() - pass 124 | res.send() an 125 | Array or Object

126 |
127 |
128 |

Writing JSON to a file

129 |
    130 |
  • Server-side only (nodejs)
    • 131 |
  • Convert object to JSON with JSON.stringify
    • 132 |
  • Use writeFileSync from the fs module
    • 133 |
134 | 
const fs = require('fs');
135 | let data = JSON.stringify([1, 2, 3]);
136 | fs.writeFileSync('./file.json', data);
137 |
138 |
139 |

Loading JSON from a file

140 |
    141 |
  • Server-side only (nodejs)
    • 142 |
  • Could load a file and then use JSON.parse
    • 143 |
  • Or simply
    • 144 |
145 |

const jsonContent = require("./file.json");

146 |
147 |
148 |
149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 310 | 311 | 312 | --------------------------------------------------------------------------------