Notes de cours
Webtechnologie reader
Reader op basis van hoorcollege aantekeningen en PowerPoints over de gehele cursus.
[Montrer plus]
Publié le
20 février 2023
Nombre de pages
52
Écrit en
2021/2022
Type
Notes de cours
Professeur(s)
Dr. s.a. sosnovsky
Contient
Toutes les classes
webtechnologie
programmeren
html
javascript
css
web development
Établissement
Universiteit Utrecht (UU)
Cours
Informatica
Cours
Webtechnologie (INFOB2WT)
Tous les documents sur ce sujet (1)
S'abonner
Envoyer un Message
€9,99
Ajouté
Ajouter au panier
Ajouter au liste de veux
Garantie de satisfaction à 100%
Disponible immédiatement après paiement
En ligne et en PDF
Tu n'es attaché à rien
Webtechnologie
Marlinde Drent
Contents
1 Brief history of the web 5
1.1 DARPA (1958) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.2 ARPANET (1969) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3 More history . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4 CERN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.5 The three phases of web development . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2 Hypertext markup language 7
2.1 Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3 Newer features of HTML5 8
3.1 New semantic elements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
4 Standards 10
4.1 Web standards . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.2 Device compatibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.3 Examples of good practice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.4 Web accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.4.1 Perceivable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.4.2 Operable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.4.3 Understandable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.4.4 Robust . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
4.5 Search engine optimization (SEO) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
5 Cascading Style Sheets: CSS 3.0 12
5.1 Identifiers for id’s and classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.2 Units of measurement . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
5.3 Color declarations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.4 CSS selector syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
5.5 Shorthand notation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
5.6 Implementation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.7 The standard CSS box model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
5.8 BEM naming conventions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
6 Responsive Web Design 17
6.1 RWD step 1: the viewport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.2 RWD step 2: media queries . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
6.3 RWD step 3: images . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
1
,7 JavaScript 18
7.1 Adding JavaScript to your web page . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
7.2 Statements and comments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
7.3 Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
7.4 Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
7.5 Hoisting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
7.6 Data-types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
7.7 Operators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
7.8 Loops, if else and switch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
7.9 Error handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
8 undefined, undeclared, null and NaN 23
8.1 Undefined . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
8.2 Undeclared . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
8.3 Null . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
8.4 NaN . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
9 DOM 23
9.1 Document object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
10 JavaScript Events 24
10.1 Event propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
10.2 Event object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
11 Programming Objects in JavaScript 25
11.1 An empty object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
11.2 An object literal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
11.3 Factory function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
11.4 Constructor function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
11.5 Prototypes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
12 Callback functions 27
13 JavaScript Event Loop 28
13.1 The call stack . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
13.2 Asynchronous callbacks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
14 Arrow functions 29
15 eXtensible Markup Language 30
15.1 Name conflicts and namespaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
15.2 XML schema . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
15.3 XML on the web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
16 JSON - JavaScript Object Notation 31
16.1 JSON vs XML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
16.2 JSON syntax rules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
17 URL 32
17.1 URI/URL components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
18 Unicode 32
19 How the Internet works 33
2
,20 TCP/IP+ 34
20.1 Internet protocol and internet addresses . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
20.2 Transmission control protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
20.3 User datagram protocol . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
21 Hypertext Transfer Protocol 36
22 Client-Server Architecture 37
22.1 Models of computing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
22.2 Rich internet applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
23 The Server-side JavaScripting 37
23.1 Node.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
24 Creating a simple Web-server with Node.JS 38
24.1 Creating a "Hello World!" server . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
25 Node.js web server workflow 38
25.1 GET method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
25.2 POST method . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
25.3 Response object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
25.4 Handling errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
25.5 Putting it all together . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
26 Programming Web-server with Express 41
26.1 Middleware . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
26.2 Setting up a basic Express.JS app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
27 Logging 43
28 Routing 43
29 Serving static files 44
30 Handling errors 44
31 Server-side DB 44
31.1 SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
32 Stateful Web 44
33 Cookies 45
33.1 Creating, reading and deleting cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
33.2 Cookie-based communication through HTTP headers . . . . . . . . . . . . . . . . . . . . . . . 46
33.3 Problems with cookies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
34 Session 47
34.1 Sessions in Node/Express.JS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
35 AJAX 48
35.1 XMLHttpRequest object . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
3
, 36 WebApp Security 50
36.1 A1-2021: Broken Access Control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
36.2 A2-2021: Cryprographic Failures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
36.3 A3-2021: Injection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
36.3.1 Cross-Site Scripting (XSS) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
36.4 A04:2021 Insecure Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
36.5 A05:2021 Security Misconfiguration . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
36.5.1 Information Leakage through Improper Error Handling . . . . . . . . . . . . . . . . . 51
36.5.2 XML External Entities (XXE) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
36.6 A06:2021 Vulnerable and Outdated Components . . . . . . . . . . . . . . . . . . . . . . . . . 51
36.7 A07:2021 Identification and Authentication Failures . . . . . . . . . . . . . . . . . . . . . . . 51
36.8 A08:2021 Software and Data Integrity Failures . . . . . . . . . . . . . . . . . . . . . . . . . . 51
36.9 A09:2021 Security Logging and Monitoring Failures . . . . . . . . . . . . . . . . . . . . . . . . 52
36.10A10:2021 Server-Side Request Forgery (SSRF) . . . . . . . . . . . . . . . . . . . . . . . . . . 52
4