Webtechnologie
Home

Webtechnologie

JavaScript
JavaScript

Webtechnologie

JavaScript: de basis

Doelstelling

Na deze les kan je in JavaScript:

  1. variabelen declareren;
  2. werken met controlestructuren;
  3. functies declareren;
  4. de DOM manipuleren
  5. events afhandelen

Leerplan

  1. JavaScript - De basis
  2. Waar plaats je JavaScript code in je HTML bestand?
  3. Filmpje Werken met JavaScript in de console
  4. Document Object Model
  5. Events
  6. De tijd controleren met JavaScript

Oefening

  1. Een lichtkrant maken
    1. Filmpje Een lichtkrant maken in JavaScript
    2. Maak een submap met de naam javascript:
      |-javascript
        |-js
          |-marquee.js
        |-marquee.html
    3. In het bestand met de naam javascript/js/marquee.js:
      var scrollDelay = 2000; //Specify initial delay before marquee starts to scroll on page (2000=2 seconds)
      var marqueeSpeed = 1; //Specify marquee scroll speed (larger is faster 1-10)
      var timer;
      
      var scrollArea;
      var marquee;
      var scrollPosition = 0;
      
      var scrolling = function() {
        if (scrollPosition + scrollArea.offsetHeight <= 0) {
          scrollPosition = marquee.offsetHeight;
        }
        else {
          scrollPosition = scrollPosition - marqueeSpeed;
      
        }
        scrollArea.style.top = scrollPosition + "px";
      }
      
      var startScrolling = function() {
        timer = setInterval(scrolling, 30);
      }
      
      var initializeMarquee = function() {
        scrollArea = document.getElementById("scroll-area");
        scrollArea.style.top = 0;
        marquee = document.getElementById("marquee");
        setTimeout(startScrolling, scrollDelay);
      }
      
      var pauseMarquee = function() {
        if (marqueeSpeed > 0) {
          marqueeSpeed = 0;
        }
        else {
          marqueeSpeed = 1;
        }
      }
      
      var speedUpMarquee = function() {
        if (marqueeSpeed <= 3) {
          marqueeSpeed++;
          // alert(marqueeSpeed);
        }
      
      }
      
      var slowDownMarquee = function() {
        // alert(marqueeSpeed);
        if (marqueeSpeed > 1) {
          marqueeSpeed--;
        }
      }
      
      window.onload = initializeMarquee;
    4. In het bestand met de naam javascript/marquee.html:
      <!DOCTYPE html>
      <!-- Alex Homer, Pro ASP.NET Web Forms Techniques, 2004 -->
      <html>
      
      <head>
          <title>JavaScript - Een autootje laten rijden</title>
          <meta charset="utf-8" />
          <meta name="application-name" content="Multimedia JavaScript">
          <meta name="description" content="De tijd controleren met JS - Een marquee maken met JavaScript">
          <meta name="keywords" content="HTML, JavaScript, setInterval, setTimeout">
          <meta name="author" content="Jef Inghelbrecht">
          <script src="js/marquee.js" type="text/javascript"></script>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
              
              h1 {
                  margin-bottom: 1em;
                  text-align: right;
                  width: 250px;
              }
              #marquee {
                  position: relative;
                  width: 250px;
                  height: 200px;
                  background-color: yellow;
                  padding: 5px;
                  overflow: hidden;
              }
              
              #marquee #scroll-area {
                  position: absolute;
                  top: 0;
                  padding: 5px;
              }
              
              .commandbar {
                  margin: 1em 0 0 0;
                  text-align: center;
                  width: 250px;
              }
              
          </style>
      </head>
      
      <body>
          <h1>De gazet</h1>
          <div id="marquee" onMouseover="pauseMarquee();" onMouseout="pauseMarquee();">
              <div id="scroll-area">
                  Toen ik als kind van de buurtwinkel terugkwam met gruyèrekaas, maakte mijn oom, die wekelijks op bezoek kwam, telkens hetzelfde grapje: ‘Heb je ook betaald voor de gaatjes?’ Nu worden jeansbroeken met scheuren en gaten in vele winkels verkocht, soms voor
                  een (veel) hogere prijs dan een gewone jeans. Zo lanceerde het luxejeansmerk Dussault Apparel een Thrashed-versie voor maar liefst 250.000 dollar: een broek die al 13 keer gewassen was voor hij in de winkel kwam, tussendoor nog een paar keer
                  opnieuw geverfd om meer diepte aan de kleur te geven én enkele scheuren vertoonde.
              </div>
          </div>
          <div class="commandbar">
              <button onClick="speedUpMarquee();" type="button">Sneller</button>
              <button onClick="slowDownMarquee();" type="button">Trager</button>
          </div>
      </body>
      
      </html>
  2. Yaphi Berhanu, Make a Simple JavaScript Slideshow without jQuery, May 26, 2016 (optioneel)

Opdracht

  1. Maak een eigen lichtkrant.
  2. Deze opdracht hoef je niet in te sturen.
  3. Deadline: de dag van het examen

JI
2019-05-18 14:29:26