Javascript

From Frack - Hackerspace Friesland
Jump to navigationJump to search
Onderwerp: Javascript
Deskundigen
Gebruiker CodeHunger.jpg CodeHunger
Gebruiker CodeHunger.jpgCodeHunger (CodeHunger) Rol: niet-deelnemer Deskundig met: Arduino, HTML, Javascript, Mustache, Programmeren, Python, Sammy Werkt aan: Geen projecten :(
,
Afbeelding Anoniem.png Failbaitr
Failbaitr Rol: deelnemer Deskundig met: Arduino, CNC, CNC-Frezen, Canvas, Digitale Fabricatie, ENC28J60, Glasvezel lassen, HTML, Hydroponics, Javascript, LPD8806, Linux, Mercurial, Programmeren, Python, Robotica, Software, Stappenmotor Beginnend met: Elektronica Werkt aan: Geen projecten :(
,
Afbeelding Anoniem.png FruitCake
Guido Bouman (FruitCake) Rol: niet-deelnemer Deskundig met: Javascript, Pannenkoeken, Sammy Werkt aan: Geen projecten :(
Beginners
Gebruiker Elmer.jpg Elmer
Gebruiker Elmer.jpgElmer de Looff (Elmer) Rol: niet-deelnemer Deskundig met: Arduino, ENC28J60, Elektronica, GnuCash, HTML, LPD8806, Linux, MediaWiki, Mercurial, Netwerken, OpenVPN, Programmeren, Python, SSH, Software, Solderen Beginnend met: Dm-crypt, Javascript Werkt aan: Geen projecten :(
Deelonderwerpen Canvas, Mustache, Sammy
Javascript wordt o.a. gebruikt in
Lightbox, RobotArm, TheHosts, Twitterboom, Verlanglijstje, Voedselbank, Web development lessen, Wiki v2

JavaScript is een scripttaal die veel gebruikt wordt om webpagina's interactief te maken en webapplicaties te ontwikkelen.

Waarom Javascript

Waarom wel

  1. Bijna elke computer heeft een Javascript interpreter en kan dus Javascript code uitvoeren.
  2. Javascript is de enige scripttaal die in elke moderne browser werkt.
  3. Javascript verwerkt browser events waar door het internetpagina's meer interactief maakt.
  4. Javascript is een erg brede programmeertaal en kan op vele platformen gebruikt worden.
  5. Javascript code draait met de juiste tools zowel op de client en server side maar wordt ook gebruikt in sommige databases als opslag en query taal.

Waarom niet

  1. Javascript scopes zijn voor beginners wel eens lastig, zeker als er gewerkt wordt met events
  2. Javascript is niet altijd even consequent met zijn schrijfwijze en mist enkele broodnodige mogelijkheden in z'n 0bject georienteerde delen.
  3. Javascript code is in een door de browser uitgevoerde omgeving altijd zichtbaar en kan maar heel lastig beschermd worden

Welke tools?

  • Om te beginnen met javascript programmeren kun je de reeds beschikbare javacript engine in je browser gebruiken. Dit doe je door een html bestand te maken met daarin script tags. De binnen deze tags geplaatste code zal door je browser worden uitgevoerd als je dat html bestand opent.
  • Om aan de server-kant met javascript te werken kun je een Node.js installeren.
  • Om met een javascript gebaseerde database te werken kun je bijvoorbeeld MongoDB proberen.
  • Op codecademy.com Kun je in een interactieve sessie met javascript spelen en opdrachtjes uitvoeren
  • Op MongoDB.org Kun je de via de knop 'Try it Out'met de MongoDB syntax spelen.

Tutorials

1. Hello world

Typ het volgende in een .html file en open deze vervolgens met een browser.

<html>
  <head>
    <script>
      alert('hello world');
    </script>
  </head>
  <body>
  </body>
</html>

Javascript roep je aan met de html script tags. Javascript wordt uitgevoerd op de plek waar het in de html geplaatst is. Als de script tags openen in de head dan gaat het script ook geactiveerd worden tijdens het opbouwen van de head. Wees je er van bewust dat de rest van de HTML dan nog niet ingeladen is, je javascript kan dan dus nog geen HTML elementen aanspreken, ze zijn immers nog niet aanwezig.

2. Replace Text

<html>
  <head>
    <script>
      function showDate() {
        document.getElementById("tutorial").innerHTML=Date();
      }
    </script>
  </head>
  <body>
    <h1>My First Web Page</h1>
    <p id="tutorial">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <button type="button" onclick="showDate()">Knop</button>
  </body>
</html>

In dit voorbeeld wordt een paragraaf met loremipsum vervangen. Dit gebeurt door de 'onClick' property binnen de button tag. Hierin zit de waarde 'showDate()'. welke refereerd naar de door ons gemaakte showDate functie.