Impulse Programmeer Naslag

Op https://repl.it/@mevanloon/rps kun je de huidige code voortgang bekijken.

JavaScript

Variables

Een variable bevat data, en is te hergebruiken in de rest van de code in hetzelfde blok. Het aanduiden van een nieuwe variable gebeurt met het var keyword.

var myNumberVariable = 123
var myFloatVariable = 3.1457
var myStringVariable = "Hello world!"
var myArrayVariable = ["Hallo", 128, myStringVariable]
var myObjectVariable = {myStringProperty: "Hello object"}
var myFunctionVariable = function() {} // Deze functie is valide, maar doet verder niks

Variabels worden doorgaans in camelCase geschreven, omdat er geen streepjes in diens namen mag. Na de naam van de variable zet je een enkele =, en daarna de waarde.

Datatypes

Een variable mag onder andere deze datatypes bevatten:

string
Tekst, omsloten door aanhalingstekens: "Dubbel" en 'Enkel'. Deze zijn er om het script te vertellen waar de tekst begint en eindigt.
boolean true of false
integer
Een heel getal, zonder komma’s. Bijvoorbeeld: 128
float
Een getal met cijfers achter de komma, maar de komma word hier altijd met een punt geschreven.
variable
Een variable mag toegewezen worden naar de waarde van een andere variable.
array
Een reeks met data-items, gescheiden door komma’s en omringd met blokhaakjes. Items kunnen datatypes uit deze lijst zijn. Losse items uit een array zijn te gebruiken door hun index achter de array-naam te zetten. Zo krijg je uit myArrayVariable[0] de string “Hallo”. [0] wordt in dit geval ook wel de key genoemd.
object
Een object kan net als een array meerdere items bevatten, maar waarbij de key zelf bepaald moet worden. Als een item in een object een function is, wordt het ook wel een method genoemd.
function
Een function is een blok code die een resultaat teruggeeft, of andere acties doet. Een function mag zelf allerlei regels code hebben.

Functions

Een functie maak je door een variable op te maken, of met het speciale function keyword. Voorbeeld:

function multiply(n) {
  return n * n
}

multiply(5) // Geeft 25 terug

Bestaande functies

JavaScript, wanneer het in een webbrowser draait, heeft een groot aantal ingebouwde functies. Zo kun je een waarschuwing tonen met alert("text"), allerlei wiskundige dingen doen met Math en zelfs dingen doen met de camera of gyroscoop van je apparaat.

Een aantal voorbeeld functies die in JavaScript zijn ingebouwd:

var myName = prompt("Wat is je naam?")
// Vraagt de gebruiker met een dialoog venster, en zet de variable myName naar het antwoord

console.log(myName, "123", etc)
// Logt de gegeven variables naar de console van de browser

Omdat er zo veel functies zijn is het belangrijk dat je weet hoe je deze kunt opzoeken; er wordt niet van je verwacht dat je ze allemaal onthoud. Wil je bijvoorbeeld weten hoe je een array sorteert? Dan kun je zoeken op javascript array sort.

HTML

HTML staat voor Hyper Text Markup Language is de data die webbrowsers uitlezen.

HTML is geen dynamische taal, en bestaat vooral om te beschrijven wat voor inhoud een webpagina heeft. Wat voor titel, hoeveel paragraven, of wat voor afbeeldingen en scripts er zijn, bijvoorbeeld.

De basis van moderne HTML data heeft doorgaans deze opzet.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <p>Dit is een paragraaf.</p>
    <p title="Extra tekst">Dit is een paragraaf met een attribuut</p>
    <!-- dit is een code comment in HTML, dit wordt niet weergeven of gebruikt -->
    <link rel="stylesheet" href="style.css"></link>
    <script src="script.js"></script>
  </body>
</html>

CSS

CSS staat voor Cascading Style Sheets en is de code die gebruikt wordt om de stijl en weergave van HTML aan te passen.

body {
  font-size: 16px; 
}
// body is een CSS selector
// 'font-size' is een CSS property

Er zijn heel, heel veel CSS properties. Te veel om te onthouden. Ook hier geld dat je het vooral op moet zoeken. Wil je bijvoorbeeld een andere achter grond kleur? Zoek dan op css background color.

Meer bronnen en hulpmiddelen

Atom Texteditor

Mozilla Developer Network

Voortgang Code

Op https://repl.it/@mevanloon/rps kun je de huidige code voortgang bekijken.