1.4 Javascript leren

Library

Library: Literature study

Three.js is een Javascript library, dit betekend dus ook dat ik Javascript moet kunnen om iets in Three.js te kunnen maken of te kunnen bewerken. Ik heb daarom van Dylan een Javascript course op Udemy gekregen waar ik vooral in de eerste weken van mijn stage veel gebruik van maakte. Udemy is een online platform waar mensen hun eigen cursussen op kunnen verkopen, vaak voor een relatief lage prijs. Wij hebben een van de meest populairste cursussen gekozen, deze was van Jonas.

 

Inhoud cursus

In de Udemy course heb ik 70 uur aan lesmateriaal met alles wat ik moet weten over Javascript en Object Georiënteerd programmeren. In het begin was het  voornamelijk uitleg over ‘wat is javacript’ en waar het voor gebruikt wordt samen met een instructie over hoe de course in elkaar zat. Later ben ik steeds meer opdrachten gaan maken.

Elke video is ongeveer 5 tot 10 minuten lang waarin hij een onderwerp of functie uitlegt, bijvoorbeeld:

  1. Section Intro
  2. Hello World!
  3. A Brief Introduction to JavaScript
  4. Linking a JavaScript File
  5. Values and Variables
  6. Practice Assignments
  7. Data Types
  8. let, const and var
  9. Basic Operators
  10. Operator Precedence
  11. Coding Challenge #1
  12. Strings and Template Literals
  13. Taking Decisions: if / else Statements
  14. Coding Challenge #2
  15. Type Conversion and Coercion
  16. Truthy and Falsy Values
  17. Equality Operators: == vs. ===
  18. Boolean Logic
  19. Logical Operators
  20. Coding Challenge #3

Na elk onderdeel kwamen er ook opdrachten die je kon maken voor jezelf om het beter te begrijpen. Bij deze een paar opdrachten die ik heb gemaakt:


// Oefening 1
country = "Netherlands";
continent = "Noord-Brabant";
population = 16000;

console.log(
    "I live in the " + country + " in " + continent + ". Along with " + population + " others."
);

let age = 30;
age = 31;
// Einde oefening 1

const birthYear = 1991;
birthYear = 1990;

const Mark = [
    ['height', 1.69],
    ['weighth', 78]
];
const John = [
    ['height', 1.95],
    ['weighth', 92]
];

Dingen an elkaar plakken met ` en ${}`
const ofzoiets = "Dit dus";
const firstName = `Coen ${ofzoiets}`;
const testString = "Dit loopt nu aan elkaar zonder +'";
console.log(`test ${testString} ${firstName}`);

// BMI OPDRACHT
const People = [
    ["Mark", 1.69, 78],
    ["John", 1.95, 92],
];

const BMIMark = People[0][2] / (People[0][1] * People[0][1]);
const BMIJohn = People[1][2] / (People[1][1] * People[1][1]);
const MarkHigherThanJohn = Boolean(BMIMark > BMIJohn);
console.log(BMIJohn);

if (BMIMark > BMIJohn) {
    console.log(`Mark has a higher BMI (${BMIMark}) than John (${BMIJohn})`);
} else {
    console.log(`John has a higher BMI (${BMIJohn}) than Mark (${BMIMark})`);
}

// console.log("Has Mark a higher BMI?: " + MarkHigherThanJohn);

// Congatinate numbers
let inputYear = "1991";
console.log(Number(inputYear), inputYear);
inputYear = Number(inputYear);
console.log(inputYear + 18);
// EINDE BMI OPDRACHT

// New
const DolphinsTotal = 97 + 112 + 101;
const DolphinsAverage = DolphinsTotal / 3;

const KoalasTotal = 109 + 95 + 123;
const KoalasAverage = KoalasTotal / 3;

if (DolphinsAverage > KoalasAverage && DolphinsAverage >= 100) {
    console.log(
        `Dolphins have won with a average  of ${DolphinsAverage} points! Against Koalas with ${KoalasAverage} points.`
    );
} else {
    console.log(
        `Koalas have won with a average of ${KoalasAverage} points! Against Dolphins with ${DolphinsAverage} points.`
    );
}

// OPDRACHT BILLS (laatste opdracht Part 1)
let tip;
const bill = 430;
console.log(
    `The bill was ${bill}, the tip was ${
        bill >= 50 && bill <= 300 ? (tip = bill * 0.15) : (tip = bill * 0.2)
    }, and the total value ${bill + tip}`
);


// Strict mode
"use strict";

let fruit = 5;
function fruitProcessor(apples, oranges) {
    console.log(apples, oranges);
    const juice = `Juice with ${apples} apples and ${oranges} oranges.`;
    fruit = 8;
    return juice;
}

const appleJuice = fruitProcessor(fruit, 0);
console.log(fruit);
console.log(appleJuice);

////////////////////////////////////

function calculator(number1, number2) {
    const som = parseInt(number1) + parseInt(number2);
    return som;
}

var number1 = prompt("Number 1: ");
var number2 = prompt("Number 2: ");
console.log(calculator(number1, number2));


const dolphinScore = 44 + 23 + 71;
const koalaScore = 65 + 54 + 49;

const calcAverage = total => total / 3;
const calcDolphins = calcAverage(dolphinScore);
const calcKoalas = calcAverage(koalaScore);

// let winner;
// const checkWinner = winner => winner = (calcDolphins > calcKoalas) ? "Dolphins wins" : "Koalas wins";
// console.log(winner);

const checkWinner = function(avgDolphins, avgKoalas) {
    if(avgDolphins >= 2* avgKoalas) {
        console.log(`Dolphins win:🏆 (${avgDolphins} vs. ${avgKoalas})`);
    } else if(avgKoalas >= 2* avgDolphins) {
        console.log(`Koala's win:🏆 (${avgKoalas} vs. ${avgDolphins})`);
    } else {
        console.log("No team won❌");
    }
}

console.log(`Dolphins average: ${calcDolphins} - Koalas average: ${calcKoalas}`);
checkWinner(calcDolphins, calcKoalas);

Wat ik van de cursus vond

Jonas is een goede docent, ik moest in het begin wel wennen aan zijn accent omdat hij oorsprongelijk niet engels is. Maar eenmaal hieraan gewend kwam ik makekelijk zijn video’s door. Ik had al een beetje javascript kennis maar het is altijd goed om me iets meer in de fundementals te verdiepen, want het is belangrijk om het ook te begrijpen.

Hij legde het erg goed uit en samen met de opdrachten werd het ook een stuk duidelijker, soms had ik wel net iets andere uitwerkingen dan die hij uiteindelijk in de video uitlegde, maar er zijn meerdere wegen naar Rome.

De structuur van de cursus was ook heel fijn, de onderwerpen liepen soepel in elkaar over en hij begon niet meteen teveel informatie op je af te vuren, vaak verwees hij dan door naar een later hoofdstuk. Dus het was wel duidelijk dat hij van tevoren een goede tijdlijn had gemaakt.

Ik heb helaas niet de hele cursus afgekregen omdat 70 uur veel te veel is om helemaal af te ronden. Ik heb de eerste 50 onderwerpen behandeld wat ongeveer 1/5e van de gehele cursus bedraagt. De 70 uur is namelijk alleen als je de video in één keer zou afronden zonder het maken van de opdrachten. Vaak keek ik een video 2x en nam ik om de 3 video’s heel even pauze om het te verwerken. Ook kon ik soms met een opdracht wel een halfuur bezig zijn.

Al met al heeft het me wel enorm geholpen en raad ik deze cursus ook aan vele anderen aan, ook kostte namelijk ook maar een tientje.

Bijlage

Bijgaand een zip bestand met daarin de overige uitwerkingen.