Wat is JavaScript nou eigenlijk

Ik heb al aangegeven dat ik de online opleiding doe voor Full Stack JavaScript Developer. Maar wat houdt dat nou in en wat de fuk is javascript? JavaScript is een programeertaal voor websites. Het is een aanvulling op HTML (de taal waarin simpele webpagina’s geschreven worden) en CSS (waarmee je de pagina’s mooi kunt stylen). Javascript (JS) voegt daar interactiviteit aan toe. Zo kun je bijvoorbeeld knoppen maken, die, als je er op de web pagina op klikt, iets doen: tekst laten zien, of de kleur van de pagina veranderen. Of je maakt er formulieren mee die gegevens versturen. JavaScript is ook bekend als ECMAScript, om het nog even ingewikkelder te maken. En het is een scripting taal die nog steeds verder wordt uitgebreid.

Weet je wat ook kan met JavaScript

Je web browser geeft een web pagina weer zodat je het makkelijk kunt lezen en bekijken. Alle HTML en CSS wordt omgezet naar een prachtige layout, waardoor je niet naar leesbare tekst hoeft te zoeken in code. JavaScript kan HTML en CSS ‘genereren’ als het ware. In de code zie je bijvoorbeeld een ‘lees verder’-link naar het volledige artikel. Het lijkt nu net alsof dat alleen maar HTML is, maar stel je voor dat je je blog op die manier moest bijwerken: van elk artikel handmatig een link maken op je voorpagina. JavaScript kan kijken naar de database waarin al je artikelen zijn opgeslagen en bij elk artikel de juiste link genereren voor op je homepage, zonder dat je er bij na hoeft te denken! Dat kan ook met andere script-talen, trouwens. WordPress is ook geschreven in PHP, bijvoorbeeld.

 

Maar JavaScript kan ook een cookie-notice toevoegen aan je site. In dat geval wordt de plugin geschreven in JavaScript en toegevoegd aan je WordPress website. Als beheerder of admin hoef je verder niets te weten over hoe het werkt: alles wordt netjes voor je gedaan en toegevoegd. De JS manipuleert dan de website om een pop-up te laten zien over cookies en privacy verklaringen. Als admin hoef je alleen de informatie toe te voegen in het admin-panel van WordPress.

Zelf doen: korte ‘JavaScript’ tutorial

JavaScript hoeft niet ingewikkeld te zijn. Je hebt er ook geen ingewikkelde tools voor nodig om het zelf te schrijven. Je kunt JavaScript zelfs direct in de browser schrijven! Als je een ‘echt’ JS schrijft, dan gebruik je dezelfde programma’s waarmee je ook HTML pagina’s of CSS maakt: Notepad/kladblok is erg basis, maar editors zoals Sublime, Atom of Visual Studio Code zijn misschien wat uitgebreider en handiger.

‘Maar wacht! JavaScript in de browser??’

Ja! Op deze pagina kun je je eigen JS toevoegen, nu, meteen, via de Web developer tools optie. In Chrome moet je dat misschien nog apart installeren, in FireFox is het een onderdeel van je browser tools. (Firefox heeft zelfs een JavaScript Scratchpad, waar je JS direct in kan schrijven en opslaan! Maar dat hebben we nu niet nodig…)

Wil je het uitproberen? Ga naar het menu rechtsboven in, in Chrome of Firefox. In Chrome kun je onder ‘more tools’ de optie ‘Developer tools’. In Firefox ga je eerst naar Web Developer en dan naar ‘Web Console’ (of Scratchpad…). Als je daaropklikt opent een venster onder of aan de zijkant van je scherm, met allerlei informatie over de pagina waar je nu bent. Best interessant, want je ziet veel meer wat je browser doet dan in bijvoorbeeld source/broncode. Bijvoorbeeld informatie over scripts die gebruikt worden op de pagina, of cookies, of wat er niet geladen kan worden. Maak je geen zorgen als hier rode of alarmerende teksten staan.

In de web console of developer tools kun je de pagina direct manipuleren, lokaal en alleen op je eigen computer (of op de computer van iemand die even is weggelopen van zijn werkplek … prachtige mogelijkheid om een alert box achter te laten!). Klik in Chrome met je muis op de ruimte onderin bij Console, zowel bij Chrome als Firefox, want daar kunt je iets intypen!

In het bovenstaande voorbeeld heb ik al wat geschreven. Een simpele box met een alert: zeg maar het type popupje wat je krijgt bij een foutmelding. Als je dit intypt in je console en dan op enter drukt, krijg je de tekst te zien in een alert box die je hebt ingetypt. Met het woord alert weet je browser dat er een popup boxje getoond moet worden. Dan tussen de haakjes en de aanhalingstekens zet je de tekst die je in de pop-up wilt zien. Je sluit dan de regel van JavaScript af met een puntkomma ;

Alert is op zichzelf geen JavaScript, maar een voorgeprogrammeerde variabele, die je kunt gebruiken in JavaScript. Dit is natuurlijk ook geen uitgebreide JS tutorial, maar je kunt alert wel gebruiken in een JS, bijvoorbeeld als er op een button geklikt wordt. Misschien dat ik dat later nog eens laat zien, hoe je een button maakt die iets doet als je er op klikt.

Je kunt deze alert-regel ook in een HTML pagina schrijven of in een apart JavaScript bestand met als extensie .js (zoals een CSS eindigt op een .css en HTML op een .html). Maar mensen vinden popups vaak erg irritant, dus gebruik dit met mate. Loopt je collega of huisgenoot weer eens weg van zijn/haar pc zonder te vergrendelen? Laat dan eens een leuke pop-up alert achter door de web console op zijn/haar computer te gebruiken! Niet te gemeen, hoor… 😉

 

2 comments on “Wat is JavaScript nou eigenlijk

  • Best interessant allemaal. Ook met WordPress is enige kennis van html best handig. Vooral dwang codes die zorgen dat de tekst goed staat. Of ik me aan de rest ga wagen weet ik nog niet.

    Reply
    • Daenelia says:

      HTML kennis komt altijd van pas. En als je daar al een beetje mee bekend, dan is het een kleine stap om ook iets met CSS te doen. En dan heb je al een goeie basis om iets met JavaScript te proberen. Het hoeft ook niet meteen online, maar het is ook leuk om een hobby-projectje lokaal op je eigen computer te zetten. Gewoon, om te kijken wat je er mee kan en hoe het werkt. Er zijn ook heel veel youtube tutorials die je een eind op weg helpen als beginner.

      Reply

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>