Labo 1
Voorbereiding
Voordat je dit labo start moet je de volgende topics bekeken hebben!
NPM
Arrow Functions
Interfaces (Objects en Functions)
Opzetten Git Repository
Log in op https://gitlab.apstudent.be/webontwikkeling20232024 met je studenten credentials.
Navigeer naar je klasgroep en vervolgens je persoonlijke groep (jouw naam)
Als je nog geen toegang hebt tot deze repository vraag dan toegang aan je lector.
Maak een nieuwe git repository aan met de naam Webontwikkeling
Zorg dat je een
.gitignore
bestand in je git repository hebt staanBijvoorbeeld: https://www.toptal.com/developers/gitignore/api/node
Maak een nieuw bestand aan README in de root van je git repository met als inhoud: Voornaam Achternaam - Jouw Email Adres
Commit en push dit bestand.
Alle oefeningen van dit labo dienen in een folder labo_1
te staan
Na elke oefening dien je de laatste wijzigingen te comitten en pushen naar git
Oefening 1: cat-me
Maak een nieuwe folder cat-me waarin je jouw bronbestanden voor deze oefening kan plaatsen.
Maak een nieuw bestand cat-me.ts
We gaan gebruik maken van de module cat-me. Volg de instructies op de npm pagina en print een kat op jouw console. De catMe()
functie heeft als return type string
en het loggen zal je zelf moeten doen.
Zorg dat je zeker require
gebruikt!
Vergeet de commando's
niet uit te voeren in je cat-me folder.
Oefening 2a: goodbye-functions
Maak een nieuwe folder goodbye waarin je jouw bronbestanden voor deze oefening kan plaatsen.
Maak een nieuw bestand goodbye_a.ts
Pas de volgende code aan zodat het arrow functions gebruikt in plaats van het function keyword.
Gebruik zo veel mogelijk de verkorte notatie waar mogelijk!
Oefening 2b: goodbye-functions (uitbreiding)
Deze oefening gaat gewoon verder op de vorige goodbye-functions oefening
Maak een kopie van goodbye_a.ts
en noem ditgoodbye_b.ts
Maak een interface voor alle functies en gebruik deze.
Indien je exceptions al gezien hebt: Zorg ervoor dat je exceptions gebruikt voor de onbestaande taal op te vangen. Gebruik ook try catch om deze op te vangen.
Oefening 3a: Movies
Maak een nieuwe folder movies waarin je jouw bronbestanden voor deze oefening kan plaatsen.
Maak een nieuw bestand movies_a.ts
Hieronder zie je een json object:
In jouw ts file, maak een variable thematrix
van het Interface type Movie
en zorg dat die variable de properties en waarden van hierboven bevatten.
De interface Movie maak je natuurlijk zelf
Vergeet niet dat er een verschil in notatie is tussen JSON en een object in TypeScript
Maak een tweede variable aan myfavoritemovie
van het type Movie en geef die een object mee die de info over jouw favoriete film bevat.
Maak een derde variable aan myworstmovie
van het type Movie en geef die een object mee die de info over jouw meest gehate film bevat.
Oefening 3b: Movies
Maak een kopie van movies_a.ts
en noem ditmovies_b.ts
In deze oefening maken we 2 functies aan:
de functie
wasMovieMadeInThe90s
met de parameter
movie
van typeMovie
met return waarde
true
orfalse
(of de film in de jaren 90 is gemaakt of niet)roep deze functie op met The Matrix en jouw favoriete film
de functie
averageMetaScore
met de parameter
movies
die een array van het typeMovie
bevatmet return waarde de gemiddelde score van alle films in die array
print het gemiddelde van metascore van de 3 films adhv deze functie
de functie
fakeMetaScore
met de parameters
movie
van het typeMovie
newscore
die een nieuwe score bevat
met return waarde een nieuw
Movie
object met de nieuwe score
Oefening 3c: Movies
Maak een kopie van movies_b.ts
en noem ditmovies_c.ts
Maak 3 interfaces aan:
een interface die de functie
wasMovieMadeInThe90s
omschrijfteen interface die de functie
averageMetaScore
omschrijfteen interface die de functie
fakeMetaScore
omschrijft
Last updated