JavaScript

JavaScript ist eine Skriptsprache für Webseiten, wird aber auch außerhalb de Browsers eingesetzt, beispielsweise bei Node.js, Apache CouchDB und Adobe Acrobat. JavaScript ist eine sogenannte prototypbasierte Sprache, die mehreren Mustern folgt, dynamisch ist und sowohl objektorientierte, imperative als auch deklarative Programmierung ermöglicht. ECMAScript ist der Standard für JavaScript.

Im Allgemeinen ist JavaScript eine Programmiersprache mit der sich komplexe Programme in einer Website realisieren lassen, sprich wenn auf einer Website nicht nur statische Infos angezeigt werden wurde JavaScript benutzt. Wenn also ein Liveticker oder eine interaktive Karte auf der Website dargestellt werden, sind diese mit JavaScript dort aufgebeaut worden. Es können aber auch sehr simple Seiten wie beispielsweise diese hier JavaScript beinhalten. Hier wurde mit einer kleinen Methode, Themengebiete die noch nicht bearbeitet/vollständig sind "ausgegraut".

Was kann man mit JavaSript bspw. alles machen?

Variablen speichern:: Werte in Variablen speichern, wie beispielsweise Eingaben die vom Nutzer:in auf der Website eingegeben wurden.
Operationen auf alle möglichen Elemente anwenden:: Wenn beispielsweise ein default Text ausgetauscht werden soll, kannst du dies mit einer Operation tun nachdem der/die Nutzer:in einen Text eingegeben hat.
Mit Code auf Events in einer Website reagieren:: Möchtest du, dass sich bspw. der Text rot färbt, wenn der/die Nutzer:in auf einen Button klickt? Dann kannst du dies mit JavaScript umsetzen.
Und noch so viel mehr...: Es gibt noch so vieles mehr, was mit JavaScript gemacht werden kann. Aber dies wäre zu viel um es hier alles aufzuzählen.

Wie genau JavaScript aufgebaut ist und was man alles damit machen kann, findet man hier in der PDF:

ilovecoding.org

Hier noch eine kurze Einführung in EventListener:

Mit APIs zu mehr Funktionalität!

Wenn du denkst das wars jetzt schon, dann hast du dich getäuscht. Mit Application Programming Interfaces kurz APIs hast du noch mehr tolle Funktionen die du in deine Website einbauen kannst. APIs sind schon fertig geschriebener Code welchen du sozusagen anzapfen & benutzen kannst um diese dort geschriebenen Funktionen für dich zu nutzen. Es gibt zwei Arten von APIs:

Browser APIs:

Dies sind APIs vom Webbrowser der Nutzer:in, welche auf Ressourcen des Computers/Smartphones/etc. zugreifen können, oder komplexe Sachen darstellen/machen können. Das World Wide Web Consortium kümmert sich hier um die neusten Standards im Web
Beispiele hierfür sind:

Die DOM API (vorgestellt wurde diese auf der HTML-Seite)
Mit der Geolocation API können geografische Daten abgefragt werden, so kann bspw. Google Maps deinen Standort ermitteln (wenn du das natürlich akzeptierst) und ihn dir auf der Karte anzeigen.
Möchtest du 2D oder 3D animierte Grafiken erstellen? Mit Canvas & WebGL kannst du diese Darstellen und selbst erzeugen. Hier ein paar Besipiele auf Chrome Experiments was mit WebGL so geht.
Wenn du Sounds oder Videos einbinden möchtest kannst du dies mit den Audio & Video APIsmachen. Hier kannst du unteranderem auch über eine Webcam aufnehmen und diese danach wiedergeben.

Drittanbieter APIs:

Diese APIs sind nicht standardmäßig im Browser integriert, deshalb muss der Code und die Informationen der jeweiligen APIs von außerhalb selbst geholt werden.
Hier sind zwei externe APIs die du benutzten kannst:

Wenn man die heißesten Tweets auf seiner Website darstellen möchte, kann dies mit der Twitter API gemacht werden.
Mit der Google Maps APIkannst du eigene Karten in deiner Website anzeigen lassen oder andere Funktionen von Google Maps nutzen.
Es gibt unendlich viele APIs die man einbinden kann, von absolut sinnlos & witzig - unglaublich nützlich & interessant. Auf der Website API list kann man einige APIs finden.

Was gibt es für HTML DOM Methoden?

Was DOM ist und vorallem wie er aufgebaut ist, wurde in dem Kapitel über HTML erklärt. Hier geht es jetzt darum welche verschiedenen Methoden es gibt, beziehungsweise mit welchem Befehl die noch nicht bearbeitetetn Kapitel ausgegraut wurden.

Auf der Seite von W3 Schools findest du unter HTML DOM alle Möglichkeiten von DOM Methoden und wofür du sie nutzen kannst. Hier habe ich unter Anderem auch die HTML DOM querySelectorAll() Methode gefunden. Hiermit habe ich alle Attribute eines Links ohne einen Link ausgewählt, um ihren Style zu ändern. Durch die DOM Style Objekte, wurden die Kacheln um 50% durchsichtiger gemacht und die Interaktion (Hover + Klick) durch "none" unterbunden. Style Objecte verändert:

          
  var myContainer = document.querySelectorAll("a[href='']");
  for (var i = 0; i < myContainer.length; i++) {
    myContainer[i].style.opacity = 0.5;
    myContainer[i].style.pointerEvents = "none";
  }

Durch das JavaScript30Tutorial habe ich noch einige Learnings zu der Veränderung von CSS Variablen mit JavaScript und Arrays in JavaScript. Diese möchte ich hier kurz aufführen:

CSS Variablen in JavaScript

              
  <html>
  <body>
  <label for="spacing">Spacing:</label>                 
  <input>
    id="spacing"
    type="range"
    name="spacing"
    min="10"
    max="200"
    value="10"
    data-sizing="px"
  </input>
  </body>
  </html>
  ________________________________________________

  <style>
  :root {
    --base: #ffc600;
    --spacing: 10px;
    --blur: 10px;
  }
  // Variablen in CSS          
  img {
    padding: var(--spacing);
    background: var(--base);
    filter: blur(var(--blur));
  }
            
  .hl {
    color: var(--base);
  }
  </style>
  ________________________________________________

  <script>
    const inputs = document.querySelectorAll(".controls input");

    function handleUpdate() {
      const suffix = this.dataset.sizing || "";
      //veränder die Werte von der Variablen und setze das suffix 
      //"px" dahinter damit sich die Werte auch ändern 
      //wenn sie Pixelgrößen haben
      document.documentElement.style.setProperty(
        `--${this.name}`,
        this.value + suffix
      );
    }
    
    //verändert/zeigt die Werte wenn an den "inputs" was 
    //geändert oder darüber gehovert wird
    inputs.forEach((input) => input.addEventListener("change", handleUpdate));
    inputs.forEach((input) => input.addEventListener("mousemove", handleUpdate)
    );
    </script>

Arrays in JavaScript

  
    // FILTERN mit Array.prototype.filter()
    const fifteen = inventors.filter(
        (inventors) => inventors.year >= 1500 && inventors.year < 1600
      );
      console.table(fifteen);

    // Gib uns bestimmte Werte eines Arrays mit Array.prototype.map()
    const fullNames = inventors.map(
        (inventors) => `${inventors.first} ${inventors.last}`
      );
      console.log(fullNames); 

    // SORTIERE mit Array.prototype.sort()
    const ordered = inventors.sort((firstPerson, secondPerson) =>
        firstPerson.year > secondPerson.year ? 1 : -1
      );
      console.table(ordered);

    // Array.prototype.reduce()
    //LONG VERSION
      var totalYears = 0;
      for (var i = 0; i < inventors.length; i++) {
        totalYears += inventors[i].passed - inventors[i].year;
      }
      console.log(totalYears);

      // SHORT VERSION
      const totalYears2 = inventors.reduce((total, inventors) => {
        return total + (inventors.passed - inventors.year);
      }, 0);
      console.log(totalYears2);

      // Nochmal etwas zu .reduce
      const data = [
        "car",
        "car",
        "truck",
        "truck",
        "bike",
        "walk",
        "car",
        "van",
        "bike",
        "walk",
        "car",
        "van",
        "car",
        "truck",
      ];

      const transportation = data.reduce(function (obj, item) {
        if (!obj[item]) {
          obj[item] = 0;
        }
        obj[item]++;
        return obj;
      }, {});
      console.log(transportation);

Noch ein kleines Learning zu leeren Links (ich habe mich für die href=" " Version entschieden) und wie man sie am besten darstellt:

Zurück