Front end - Adriaan350/blok-tech GitHub Wiki
- Job story
- Front-end Week 1:
- Front-end Week 2:
- Front-end Week 3:
- Front-end Week 4:
- Front-end Week 5:
- Bronnen
Progressive enhancement zorgt voor een basislijn van essentiele content en functionaliteit voor zoveel mogelijk gebruikers. Terwijl het ook de beste levering en ervaring moet geven aan de gebruikers op de nieuwste browsers en de gebruikers die alle code kunnen uitvoeren.
Het is handig, want het zorgt ervoor dat web developers kunnen focussen op de best mogelijke website maken terwijl het ook werkt op bijna alle browsers.
Een Array wordt gebruikt om een reeks van data op te slaan om vervolgens te kunnen gebruiken. Een Array open en sluit je met de [] haakjes. Elke waarde wordt gescheiden door een komma. Een Array begint met tellen vanaf de 0.
let listOfNumbers = [2, 3, 5, 7, 11];
console.log(listOfNumbers[2]);
// → 5
console.log(listOfNumbers[0]);
// → 2
console.log(listOfNumbers[2 - 1]);
// → 3Bijna alle Javascript waardes hebben een property. Alleen null en undefined hebben geen property. Als je een objecten vergelijkt met == dan zal het vergelijken met identiteit. Dus het zal alleen true zijn als het exact dezelfde waarde heeft. === vergelijkt maar kijkt ook naar de datatypes. De waardes van een string, nummer en Boolean zijn niet objecten. Het maakt Javascript niet uit als je er nieuwe waardes op zet maar die waardes worden dan niet opgeslagen. Die waardes zijn “immutable” en die kunnen niet veranderd worden.
Computernetwerken zijn er al sinds de jaren 50. Hypertext Transfer Protocol (HTTP) is een protocol om resources op te halen. Dat zijn stukken informatie zoals webpagina’s of plaatjes. Transmission Control Protocol (TCP) is een protocol die ervoor zorgt dat alles op de goede volgorde terecht komt. De Word Wide Web (WWW) is een set met protocollen. Om deel van het web te worden moet je een computer verbinden met internet en het laten luisteren naar poort 80 zodat andere computers documenten ervan kunnen ontvangen. HTML staat voor Hypertext Markup Language, deze taal wordt gebruikt voor webpagina’s. Een HTML bestand bestaat uit tags die structuur geven in de tekst, zoals linkjes paragrafen en titels. HTML documenten hebben een head en een body. De head bestaat uit informatie over het document. In de body staat de website zelf. Om HTML aan javascript te linken wordt de <script> tag gebruikt. Programma’s die van het internet zijn gedownload kunnen gevaarlijk zijn. Je kan niet weten of de mensen erachter kwade bedoelingen hebben. Maar dat kan het web ook aantrekkelijk maken omdat het je niet heel snel in de weg zit. Een programma isoleren heet Sandboxing. Zo kan het programma veilig gecheckt worden of het veilig is. In de vroege staat van het web was Mosaic de grootste browser. Na een paar jaar ging al snel iedereen over naar Netscape vervolgens was die al weer overtroffen door Internet Explorer. Een paar jaar later waren er allemaal verschillende browsers op de markt, namelijk: Firefox (non profit afstammeling van Netscape), Google Chrome en Safari. Een paar jaar geleden heeft Microsoft internet explorer vervangen voor Microsoft Edge. De nieuwste versie van Edge is gebouwd op chromium (daar zijn tegenwoordig bijna alle browsers op gebasseerd).
Als je een webpagina opent dan haalt de browser de HTML op en dan wordt dat geparsed. HTML bestaat uit een aantal nested boxes. Voor elke box is een object. Zo kunnen we zien welke HTML tag erbij hoort en welke tekst erbij hoort. Dit heet Document Object Model oftewel DOM. Met javascript is het mogelijk de structuur van DOM aan te passen. Elk DOM element heeft een NodeType property, en dat bestaat uit een nummer om zo het type van Node te zien. Elementen krijgen code 1, wat ook wordt als Node.ELEMENT_NODE. Tekst Nodes krijgen code 3 (Node.TEXT_NODE). Opmerkingen krijgen een code 8 (Node.COMMENT_NODE). DOM was niet alleen gemaakt voor Javascript. Het is een neutrale taal. Het kan ook gebruikt worden voor andere systemen zoals XML, en dan is data met een HTML-like syntex. Bijna alles van de DOM structuur kan aangepast worden. Delen van het document kunnen verwijderd worden en toegevoegd worden. Voor de meest gebruikte attributen kan het worden benaderd door een property met dezelfde naam als een element van een DOM object.
Event handlers zijn events (dus gebeurtenissen) die zich in de browser voordoen en met code kunnen deze events worden aangeroepen. Het bekendste event is ‘click’ dat is wanneer de gebruiker klikt op een button bijvoorbeeld. Dat kan dan worden uitgelezen door middel van code:
Click this document to activate the handler.
```js window.addEventListener("click", () => { console.log("You knocked?"); }); ```Een event object heeft meer informatie over het bepaalde opject. Dus als je een button neemt dan kan er gekeken worden naar de property van de button. Zo kan er dus bijvoorbeeld gekeken worden naar welke muisknop wordt ingedrukt:
Click me any way you want
let button = document.querySelector("button");
button.addEventListener("mousedown", event => {
if (event.button == 0) {
console.log("Left button");
} else if (event.button == 1) {
console.log("Middle button");
} else if (event.button == 2) {
console.log("Right button");
}
});Als een toets op het toetsenbord wordt ingedrukt dan kan dat ook opgehaald worden met de event: ‘keydown’
window.addEventListener("keydown", event => {
if (event.key == "v") {
document.body.style.background = "violet";
}
});
window.addEventListener("keyup", event => {
if (event.key == "v") {
document.body.style.background = "";
}
});Alle event handlers zijn te vinden op deze site: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
Een aantal populaire protocollen zijn: GET = om te krijgen wat je nodig hebt van de bron DELETE = Om een onderdeel te verwijderen PUT = om iets te creëren of te vervangen POST = om informatie te sturen
Een moderne website heeft tussen de 10 en 200 middelen. Om die snel te kunnen ophalen wordt er gebruik gemaakt van GET. Webpagina’s die formulieren hebben kunnen gegevens naar de database sturen met GET en POST. Hieronder een stukje voorbeeld code:
<form method="POST" action="/registered">
<label for="email">Wat is je e-mail?</label>
<input type="text" name="email" required="required">
<label for="username">Wat wil je als gebruikersnaam?</label>
<input type="text" name="username" required="required">
<label for="password">Wat wil je als wachtwoord?</label>
<input type="password" name="password" required="required">
<label for="name">Wat is je echte naam?</label>
<input type="text" name="name" required="required">
<label for="age">Hoe oud ben je?</label>
<input type="text" name="age" required="required">
<button type="submit">Let's go</button>
</form>Hoe browser javascript een HTTP aanvraag doet is met fetch. Het is nog redelijk nieuw. Het eerste argument die bij fetch meegegeven moet worden is de URL. De text methode kan gebruikt worden om de content van het antwoord te kunnen uitlezen. Er zijn meerdere velden mogelijk om te gebruiken in een formulier namelijk: text, password, checkbox, radio, file. Dat zijn de bekendste types.
Er zijn 2 manieren om een design te maken, het kan klein en makkelijk blijven of extreem uitgebreid en lastig.
Functies die werken op andere functies, door ze te zien als argumenten of door ze te ‘returnen’, deze heten ‘higher-order functions’. ‘Higher-order functions’ geven ons de mogelijkheid quote ‘abstract over actions, not just values.’ Ze komen op verschillende manieren bijvoorbeeld je kan een functie hebben die nieuwe functies kan maken. Denk daar maar even over na.
function greaterThan(n) {
return m => m > n;
}
let greaterThan10 = greaterThan(10);
console.log(greaterThan10(11));
// → true
Ook kunnen we functies hebben die andere functies aanpast
function noisy(f) {
return (...args) => {
console.log("calling with", args);
let result = f(...args);
console.log("called with", args, ", returned", result);
return result;
};
}
noisy(Math.min)(3, 2, 1);
// → calling with [3, 2, 1]
// → called with [3, 2, 1] , returned 1Deze functie filtert arrays die een bepaalde test niet halen:
function filter(array, test) {
let passed = [];
for (let element of array) {
if (test(element)) {
passed.push(element);
}
}
return passed;
}
console.log(filter(SCRIPTS, script => script.living));
// → [{name: "Adlam", …}, …]Als het gaat om Scope zijn er meerdere varianten. De 2 grootste zijn Local scope en Global scope. Local scope Bij een variabele bijvoorbeeld, als een variabele in een function staat dan kan de variabele alleen worden opgehaald in die functie dat heet Local scope. Zoals hier te zien: user staat in de functie en wordt dus ook opgehaald binnen de functie, maar het is niet mogelijk de variabele op te halen buiten deze functie.
// Database Model
const User = require('./models/Users.js');
app.post("/registered", async (request, response) => {
try {
request.body.password = bcrypt.hashSync(request.body.password, 10);
const user = new User(request.body);
const result = await user.save();
response.redirect('login');
} catch (error) {
response.status(500).send(error);
}
});Global scope Als een variabele buiten een functie staat dan kan hij overal opgehaald worden. Zoals hier bij ‘User’. User staat buiten de functie en wordt binnen de functie opgehaald
// Database Model
const User = require('./models/Users.js');
app.post("/registered", async (request, response) => {
try {
request.body.password = bcrypt.hashSync(request.body.password, 10);
const user = new User(request.body);
const result = await user.save();
response.redirect('login');
} catch (error) {
response.status(500).send(error);
}
});Lexical scope Als er meerdere functies in elkaar zitten dan hebben de binnenste functies de mogelijkheid om de variabelen van de buitenste functies op te halen. Dat heet Lexical scope.
Functies en variabelen zijn beide hoisted. Hoisting is dat declaraties naar het begin van één van de scopes verplaatst worden. Dus in een globale of een Local scope. Dat betekend dus dat een functie of variabele gebruikt kan worden voordat ze gedeclareerd zijn. Let en Const worden beide naar het begin geplaatst maar ze worden niet gestart. Dus dat betekend dat als je een Let gebruikt en het wordt daarvoor al gebruikt dat je een referenceError gaat krijgen. Hetzelfde geldt voor Const.
var initializePassport = require('./passport-config')
initializePassport(
passport,
username => users.find(user => user.username === username),
id => users.find(user => user.id === id)
);
var passport = require('passport');
// Code is aangepast voor voorbeeldDit hierboven zal dus werken, omdat het niet uit maakt wanneer de variabele wordt aangeroepen.
const initializePassport = require('./passport-config')
initializePassport(
passport,
username => users.find(user => user.username === username),
id => users.find(user => user.id === id)
);
const passport = require('passport');
// Code is aangepast voor voorbeeldDit hierboven zal dus niet werken, omdat een const eerst gedeclareerd moet worden.
‘this’ in Javascript werkt anders dan in andere talen. Meestal is de waarde van ‘this’ bepaald door hoe een functie wordt aangeroepen, en het kan ook anders zijn elke keer dat een functie wordt aangeroepen. Sinds ES5 kan je bind() gebruiken om de waarde van ‘this’ vast te zetten.
Als je this in een object gebruikt dan kan je de waarden van het object ophalen bijvoorbeeld:
var dier = {
dier: "hond",
dieren: function() {
return this.dier;
}
};
console.log(dier.dieren()); // HondIn strict mode moet ‘this’ gedefinieerd worden anders blijft het niet gedefinieerd.
In een functie is de waarde van ‘this’ bepalend om hoe de functie wordt aangeroepen. Dus ‘this’ hierbeneden zal standaard nu naar de eerste global context gaan en dat is window.
function f1() {
return this;
}
// In een browser:
f1() === window; // trueEen closure is de combinatie van een functie in functie met referenties naar de buitenste functies. Hier wordt een console.log in een functie gedaan en die functie roept een variabele in de buitenste functie aangeroepen. Dit is een voorbeeld van closure.
const Naam = "Adriaan";
function printName() {
console.log(Naam);
} Hierboven gebruik ik dus de variabele buiten de functie maar als de variabele in de functie zou staan en ik zou een andere functie aanroepen buiten de functie die er al stond, dan zou de code niet werken.
Hierbeneden is een voorbeeld van Inner/Outer functions. De binnenste functie kan dus de variabele lezen van de buitenste functie.
function outerFunc() {
let outerVar = 'Dit is erbuiten';
function innerFunc() {
console.log(outerVar); // logs: "Dit is erbuiten"
}
innerFunc();
}
outerFunc();Progressive Enhancement: What It Is, And How To Use It? (2009, 22 april). Smashing Magazine. https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/
freeCodeCamp.org. (2018, 7 november). What is Progressive Enhancement, and why it matters. https://www.freecodecamp.org/news/what-is-progressive-enhancement-and-why-it-matters-e80c7aaf834a/
Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms | MDN. (2020, 15 september). MDN. https://developer.mozilla.org/en-US/docs/Glossary/Progressive_Enhancement
Closures - JavaScript | MDN. (2021, 19 februari). MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Gupta, D. (2019, 26 december). Understanding Javascript ‘this’ keyword (Context) - Towards Data Science. Medium. https://towardsdatascience.com/javascript-context-this-keyword-9a78a19d5786
JavaScript Hoisting. (z.d.). W3Schools. https://www.w3schools.com/js/js_hoisting.asp
JavaScript Scope. (z.d.). W3Schools. https://www.w3schools.com/js/js_scope.asp
Pavlutin, D. (2020, 24 april). A Simple Explanation of Scope in JavaScript. Dmitri Pavlutin Blog. https://dmitripavlutin.com/javascript-scope/
this - JavaScript | MDN. (2021, 19 februari). MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
What is the difference between scope and context in JavaScript. (2021, 10 februari). Kevin Chisholm - Blog. https://blog.kevinchisholm.com/javascript/difference-between-scope-and-context/