Skip to content

Week 1

Jump to bottom
ralfz123 edited this page Feb 24, 2020 · 28 revisions

Welcome to the eersteRepositoryRalf wiki!

Procesboek Alles documenteren
Ook iteratieslagen. Waarom kies je voor sommige dingen?. Research: waarom zo en zo?.

Week 1

Project-Tech

We gaan bezig met GitHub en Git. GitHub is de interface van het programma Git en staat op het web. Git is het programma dat je installeert op je laptop. Git is dan ook de CLI (Command Line Language).

Deze week is er veel onderzoek gedaan naar de bekende apps met betrekking tot dating (Benchmark). Bovendien is er ook een style guide gemaakt van de app die er gaat komen. Hierdoor kreeg ik een betere kijk op de case.

De benchmark:

Benchmark

De style guide:

Styleguide

Deskresearch Progressive Enhancement

Front-End

Samenvatting Chapter 13 & 14 Chapter 13 Javascript and the browser

Zonder web browsers was er geen JavaScript. In 1950 waren er computer networks. Je kon dan bijzondere dingen doen als je kabels aanlegde tussen meerdere pc’s en data ging sturen door deze kabels heen. In 1980 werd de ontwikkeling doorgevoerd, waardoor het Internet ontstond. Een network protocol beschrijft een stijl van communicatie over een netwerk (zoals bij mails versturen, bestanden delen).

HTTP (HyperText Transfer Protocol) is een protocol om bronnen te herstellen. De Transmission Control Protocol (TCP) is een protocol dat zich richt op dit probleem (om de bits op de goede bestemming en in de goede volgorde te zetten). Een computer en een target machine die met elkaar communiceren--> de target machine (listening computer) heet de server en de connecting computer heet de client.

WWW (World Wide Web) is een set van protocols en opzetjes dat ons toegang geeft om websites te bezoeken in een browser. Elk document op het Web heeft een Uniform Resource Locator (URL).

http://google.com/13_browser.html

http:// = protocol google.com = server 13_browser.html = path

De HTML (HyperText Markup Language) is de document opzet, dat gebruikt wordt voor web pages. De <script> -tag is de belangrijkste tag van dit boek, dat gaat namelijk over (een stukje van) de JavaScript.

Sandboxing = het isoleren van een programming environment om virussen tegen te gaan. Het idee dat het programma zonder kwade bedoeling in de sandbox aan het spelen is.

Browser wars --> web developers hadden allemaal incompatible platforms, inclusief veel bugs. Het was een zware tijd voor de web page writers. Toen kwam Apple met Safari en Google met Chrome. Dat was beter en zij hadden minder bugs dan Internet Explorer.

Chapter 14 The Document Object Model (DOM) Definitie: een web page bestaat uit verschillende documenten. Die documenten zijn met elkaar verbonden via een document structuur waardoor de web page op een bepaalde manier weergegeven wordt in de browser.

JavaScript heeft iets moois hierin. Het is een data structuur dat je kan lezen of bewerken. Het werkt als een live data structuur; wanneer het aangepast is, is de pagina geüpdatet naar de veranderingen die zojuist hebben plaatsgevonden.

Data structuur = a tree wanneer het een vertakkende structuur heeft. Node = children Leaves= Identifiers en values

document.body.getElementsByTagName(“a”)[0]; --> eerste link pakken --> deze is live, omdat de DOM automatisch zichzelf update

Precieze positie van een element meten --> gebruik getBoundingClientRect --> top, bottom, left en right properties.

CSS (Cascading Style Sheets) : het stylen van elementen --> JavaScript kan de style van element manipuleren door zijn style property.

De exercise over Elements by Tag Name (Ch. 14) is mij niet gelukt, omdat ik het moeilijk vond. Ook na research op Internet gedaan te hebben, is het mij niet gelukt.

Dit is de code:

 <p>A paragraph with <span>one</span>, <span>two</span>
  spans.</p>

<script>
let span1 = document.body.getElementsByTagName("span").length;
  
let arrayish = {
  	0: "span1", 1: "span2", 2: "span3"
};
let array = Array.from(arrayish);
  
  function byTagName(node, tagName) {
   let link = document.body.getElementsByTagName("h1");
};

  
 console.log(byTagName(document.body, "h1").length);
  → 1
 console.log(byTagName(document.body, "span").length);
   → 3
 console.log(byTagName(para, "span").length);
  → 2
   console.log(array.map(toUpperCase()));
 </script>

Jobstories

Tijdens de les zijn we jobstories aan het schrijven om een goede en concrete functionaliteit te beschrijven.

1.Wanneer ik op zoek ben naar een connectie met een persoon, wil ik weten welke genres iemand luistert, zodat ik met diegene een muziek gerelateerde activiteit kan gaan doen.

1.1 Wanneer ik op zoek ben naar een serieuze connectie met een persoon, wil ik weten wat voor muziekgenre's iemand luistert, zodat ik op basis van een selectie activiteiten kan gaan doen met een persoon.

--> Elk genre is gekoppeld aan 1 activiteit.

Back-End

De opdracht. Ik heb camelcase werkend gemaakt en ben ondertussen bezig met de server opdracht.


console.log(camelCase('foo-bar'));

const express = require ('express')
express()
    .get('/', onhome)
    .listen(1900)

function onhome(req, res){
    res.send('<h1>Hello client</h1>\n');
}
Clone this wiki locally