(I) Einführung in JavaScript

Motivation

In der letzten Zeit habe ich gemerkt das ich für die Entwicklung von nicht allzu sehr komplexen Webinhalten immer noch viel zu lange brauche. Mit JavaScript hatte ich mich weder im Studium noch danach intensiv befasst. Bei LinkedIn habe ich einen interessanten Einstiegskurs gefunden.

Programmieren lernen mit JavaScript

  • Niveau: Einsteiger
  • Kursdauer: 2 Std 44 min
  • Trainer: Thomas Rose

Der Kurs besteht aus 7 Abschnitten. Ich habe jetzt den ersten Abschnitt “1. Einführung in JavaScript” durchgearbeitet, d.h. das Gelernte mit eigenen praktischen Beispielen in die Tat umgesetzt.

  1. Einführung in JavaScript
  2. Bedingte Anweisungen in JavaScript
  3. Variablen und Berechnungen
  4. For- und While-Schleifen
  5. JavaScript-Quellcode mit Funktionen strukturieren
  6. Ein JavaScript-Spiel programmieren
  7. Los geht’s – viel Spaß und Erfolg mit JavaScript

Cookielet 1: “Hallo Welt”-Beispiel

<html>
  <head>
    <title>Hallo Welt Beispiel</title>
  </head>
  <script>
	alert("Hallo Welt");
  </script>
  <body>
    <p>Javascript in Aktion!</p>
  </body>
</html>

Merker:

  • JavaScript Code wird mit dem HTML-Tag <script> eingebunden.
  • JavaScript Befehle werden mit einem Semikolon abgeschlossen.
  • Befehl: alert(nachricht); Text in einem Dialogfenster ausgeben.

Cookielet 2: Variablen & Berechnungen

<html>
  <head>
    <title>Cookielet 2: BMI ausrechnen</title>
  </head>
  <script>
	var koerpergroesse = prompt("Ihre Körpergröße in cm?");
	var gewicht = prompt("Ihr Gewicht in Kg?");
	var bmi = gewicht / ((koerpergroesse/100)^2);
	alert("Ihr BMI: " + bmi);
  </script>
  <body>
    <p>Body-Mass-Index (BMI) mit JavaScript berechnen!</p>
  </body>
</html>

Merker:

  • Mit der Anweisung var werden Variablen deklariert
  • Befehl: prompt(aufforderung, feldvorbelegung); Erfassung von Anwendereingaben

Cookielet 3: HTML- & JavaScript-Editoren

Es gibt gefühlt unzählige Editoren und integrierte Entwicklungsumgebungen. Je nach Schwerpunkt und Komplexität der Software ergeben sich unterschiedliche Stärken und Schwächen. Für die Java-Entwicklung ist eclipse mein Favorit. Für die Webentwicklung habe ich noch kein Lieblingstool gefunden.

Aktuell verwende ich noch Notepad++. Dieser Editor hat von Haus aus keine Funktionen für Syntaxüberprüfung. Es gibt jedoch etliche Plugins mit denen sich Notepad++ erweitern lässt. Ich habe das Plugin JSLint sehr kurz getestet. Beispielsweise wird eine Variable die zuvor nicht deklariert wurde, leider nicht als Fehler angezeigt. Ich möchte gar nicht ausschließen, dass es ggf. an einer fehlenden Einstellung des Plugins liegt.

Lange Rede kurzer Sinn, ich bin noch am ausprobieren und austüfteln, welcher Editor bzw. IDE das beste Werkzeug für meine Zwecke ist. Zuerst werde ich mich noch das eine oder andere kostenlose Tool anschauen. Ich wäre jedoch auch nicht abgeneigt eines der kostenpflichtigen zu wählen, wenn mich das Produkt überzeugt.

EntwicklerEditorKostenBetriebssystemeAlexa-Rank
MicrosoftVisual Studio Codekostenlosplattformübergreifend960
JetBrainsWebStormerstes Jahr €59plattformübergreifend2,082
Don HoNotepad++kostenlosWindows6,545
Jon SkinnerSublime Text$80plattformübergreifend9,636
GitHubAtomkostenlosplattformübergreifend10,378
AdobeBracketskostenlosplattformübergreifend37,864
Bare Bones SoftwareBBEdit$49.99macOS213,083
Helios Software SolutionsTextPad$27Windows315,146

Cookielet 4: Online Quellcode-Editoren

Eine durchaus nützliche Alternative für bspw. schnelle Tests sind diverse Online Tools. Man kann ohne Anmeldung einfach drauflos entwickeln und das Resultat direkt begutachten. JSFiddle bietet zudem eine Möglichkeit JavaScript Bibliotheken aus einer Dropdown-Liste auszuwählen und bequem einzubinden.

ToolAlexa-Rank
CodePen2,055
JSFiddle8,559
JS Bin11,595

Cookielet 5: Die meistverwendete JavaScript-Bibliothek

Die 2005 erschienene freie JavaScript-Bibliothek jQuery hat in kürzester Zeit das Word Wide Web erobert und ist weiterhin die Nummer Eins. Mittlerweile gibt es diverse alternative JavaScript Ressourcen von den Softwaregiganten wie bspw. Angular (Google), React (Facebook) und Bootstrap (Twitter). Diese modernen Konkurrenten unterscheiden sich in vielerlei Hinsichten von dem Pionier. jQuery entstand mit der Idee wiederkehrende nützliche Funktionalitäten verfügbar zu machen. Ein zweiter Schwerpunkt war die Unzulänglichkeiten der früheren Browser abzufedern. Hingegen verfolgen die Nachfolger zumeist einen ganzheitlichen Ansatz zur Webentwicklung und sind deshalb eher als Framework oder gar Plattform zu verstehen.

Nach diesem sehr kurzen “historischen” Exkurs möchte ich ein einfaches Animationsbeispiel implementieren. Mit der jQuery-Funktion fadeOut() lassen wir einen Teddybär 🧸 verschwinden 😄. Zudem lernen wir wie man jQuery via CDN einbindet.

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <h1>Hast Du den Teddybär gesehen?</h1>
  <p>
       ,~~.,''"'`'.~~.<br>
      : {` .- _ -. '} ;<br>
       `:   O(_)O   ;'<br>
        ';  ._|_,  ;`<br>
         '`-.\_/,.'` hjw
  </p>
  <script>
    $("p").fadeOut("slow");
  </script>
</body>

</html>

Merker:

  • jQuery-Bibliotheken können bequem via CDN eingebunden werden. Diese Form hat zusätzliche Vorteile wie bspw. die Verwendung des Browsercache sofern der Benutzer auf einer vorherigen Webseite diese Dateien bereits heruntergeladen hat.
  • Die Einbindung der jQuery-Bibliothek erfolgt mit dem HTML-Tag <script> und wird in dem Abschnitt <head> platziert.
  • jQuery-Funktion: fadeOut(speed,callback); der optionale Parameter speed bietet drei Varianten: “slow”, “fast”, Angabe von Millisekunden; der zweite optionale Parameter dient dem Aufruf einer Funktion nach der Ausführung der Animation.

Cookielet 6: Text auf Webseite manipulieren

Hier in diesem Abschnitt lernen wir neben der Textmanipulation auch verschiedene jQuery-Selektoren kennen.

<html>

<head>
  <title>Cookielet 6: Text auf Webseite manipulieren</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    var name = prompt("Ihr Name?")
    var koerpergroesse = prompt("Ihre Körpergröße in cm?");
    var gewicht = prompt("Ihr Gewicht in Kg?");
    var bmi = gewicht / ((koerpergroesse / 100) ^ 2);
  </script>

</head>

<body>
  <h1 id="name">Hallo </h1>
  <h2 class="temp">Berechnung in Arbeit: ⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀⣀ 50%</h2>
  <h2 class="temp">Deine Angaben:</h2>
  <ul>
    <li>Körpergröße: </li>
    <li>Gewicht: </li>
  </ul>
  <p>Wir haben Ihren BMI ausgerechnet: <input type="text" value="..."></p>
  <script>
    $("#name").html("<h1>Hallo " + name + "!</h1>");
    $('ul li:first-child').text("Körpergröße: " + koerpergroesse);
    $('ul li:first-child').next().text("Gewicht: " + gewicht);
    $(".temp").fadeOut(5000);
    $("li").fadeOut(10000);
    $('ul:first-child').text("Körpergröße " + koerpergroesse);
    $("input").val(bmi);
  </script>
</body>

</html>

Merker:

  • jQuery-Textmanipulation
    • text(); Text der selektierten HTML-Elemente ändern
    • html(); Text inklusive HTML-Tags ändern
    • val(); Wert für Eingabefeld ändern
  • jQuery-Selektoren
    • id-Selektor: HTML-Element mit id-Attribut wird mit einer Raute selektiert. Beispiel: “#name”.
    • class-Selektor: HTML-Elemente mit class-Attribut werden mit einem Punkt selektiert. Beispiel: “.temp”.
    • Element-Selektor: HTML-Elemente werden mit dem Elementnamen selektiert. Beispiel: “input”.

Cookielet 7: Mini-Exkurs CSS

Also Vorbereitung für die nächsten Übung wollen wir zunächst ein kleinen Abstecher in die Welt der Farben und Layouts im WWW machen. HTML war zunächst so gestartet das sowohl Inhalt und Struktur als auch die visuelle Darstellung in einer Sprache vermengt wurden. Mit dem Wachsen der Internetpräsenzen an Umfang und Komplexität und der Etablierung von dynamischen Webinhalten, wurde eine strikte Separierung des Design mittels Cascading Style Sheets geschaffen.

Hier in diesem Beispiel schauen wir uns verschiedene Dinge an. Es werden wie im vorangegangenen Cookielet die unterschiedlichen Möglichkeiten der Selektion vorgestellt. Denn manchmal möchten wir alle Exemplare eines bestimmten Elementtyps mit dem gleichen Style versehen. In anderen Fällen bilden wir beliebige Gruppen mit dem Attribut class, denen wir ein gemeinsames Style verpassen möchten. Ein anderer Anwendungsfall ist die eindeutige Identifizierung eines ganz bestimmten Elements mit dem Attribut id.

Es werden einige grundlegende Styles beispielhaft aufgezeigt: Farbe, Hintergrund, Schriftart, Rahmen etc.

<html>

<head>
  <title>Exkurs CSS</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function myFunction() {
      var vorname = $("#vorname").val();
      var nachname = $("#nachname").val();
      var koerpergroesse = $("#koerpergroesse").val();
      var gewicht = $("#gewicht").val();
      var bmi = gewicht / ((koerpergroesse / 100) ^ 2);
      $("#ergebnis").text("Hallo " + vorname + " " + nachname + ", dein BMI beträgt: " + bmi);
    }
  </script>
  <style>
    body {
      background-color: lightblue;
    }

    h1 {
      color: white;
      text-align: center;
    }

    h2 {
      border-bottom: 1px solid purple;
    }

    label {
      color: purple;
      width: 100px;
      display: inline-block
    }

    .name {
      font-weight: bold;
    }

    #ergebnis {
      font-family: verdana;
      font-size: 20px;
      color: white;
      background: purple;
      padding: 10px;
      border: 3px solid white;
    }
  </style>
</head>

<body>

  <h1>BMI Rechner</h1>

  <form>
    <h2>Ihre Angaben:</h2>
    <label for="vorname" class="name">Vorname:</label>
    <input type="text" id="vorname"><br><br>
    <label for="nachname" class="name">Nachname:</label>
    <input type="text" id="nachname"><br><br>
    <label for="koerpergroesse">Körpergröße:</label>
    <input type="text" id="koerpergroesse"><br><br>
    <label for="gewicht">Gewicht:</label>
    <input type="text" id="gewicht"><br><br>
    <button type="button" onclick="myFunction()">Jetzt berechnen!</button>
  </form>

  <p id="ergebnis">Bitte geben Sie ihre Daten ein. Vielen Dank!</p>

</body>

</html>

Merker:

  • CSS
    • Selektion mit Elementtyp, Klasse und ID
      • Beispiel: h1 { }
      • Beispiel: .name { }
      • Beispiel: #ergebnis { }
    • Farbe ändern
      • color: Schriftfarbe
      • background-color: Hintergrundfarbe
      • background: Das ist eine Sammeleigenschaft und umfasst u.A. color, image, size
    • Schrift & Text anpassen
      • font-family: Schriftart
      • font-size: Schriftgröße
      • text-align: Textausrichtung
    • Rahmen & Abstand & Layout
      • border: Rahmen
      • border-bottom: Rahmen unten
      • padding: Innenabstand
      • width: Breite
      • display: Entscheidend wie sich einzelne Elemente bezüglich dem Layout verhalten. Hier in diesem Beispiel benötigt für die Eigenschaft width.
  • HTML
    • <form> Erstellung eines HTML-Formulars
    • <label> Bezeichnungen für die Eingabefelder
    • <input> Eingabefelder
    • <button> Button

Cookielet 8: JavaScript und CSS kombinieren

Nachdem wir die Grundzüge von CSS kennengelernt haben, möchten wir zeigen wie sich die visuelle Darstellung mittels JavaScript ändern lässt. Die Bibliothek jQuery besitzt sowohl spezielle Funktion wie das width(), als auch eine sehr Allgemeine css() für jegliche CSS-Manipulation.

<html>

<head>
  <title>Teleportation</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function myFunction() {
      $("#hier").fadeOut("slow");
      $("h1").css("color", "purple");
      $("#dort").fadeIn("slow");
      $("body").css("background-color", "darkblue");
      $("#spaeter").width(5);
    }
  </script>
  <style>
    #erde {
      font-size: 100px;
      float: left;
    }

    #mond {
      font-size: 50px;
      float: right;
    }

    #dort {
      display: none;
    }

    #spaeter {
      background-color: purple;
      color: purple;
      float: none;
      bottom: 0px;
      width: 200px;
    }
  </style>
</head>

<body>

  <h1>Beame dich zum Mond!</h1>
  <div id=spaeter>   Hurra!!   </div>
  <br><br>
  <div id="erde">🌍
    <div id="hier">👨‍🚀</div>
  </div>
  <div id="mond">🌚
    <div id="dort">👨‍🚀</div>
  </div>
  <button type="button" onclick="myFunction()">Jetzt beamen 🚀</button>

</body>

</html>

Merker:

  • jQuery-Funktionen
    • width(value); Breite ändern
    • css(propertyName, value); Beliebige CSS Manipulation
    • fadeIn(duration); Ein zuvor mit display:none verstecktes Element wird eingeblendet

Cookielet 9: Ein Balkendiagramm, das das Alter visualisiert

Hier in dieser letzten Übung soll ein farbiger Balken die Benutzereingabe visuell unterstreichen. Für diese Aufgabe musste ich eine einzige neue CSS-Eigenschaft verwenden, die zuvor noch nicht behandelt wurde.

<html>

<head>
  <title>Balkendiagramm</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function myFunction() {
      var vorname = $("#vorname").val();
      var alter = $("#alter").val();
      $("#ergebnis").text("Hallo " + vorname + " " + ", du bist " + alter + " Jahre jung!");
      $("#ergebnis").css("background", "linear-gradient(to right, purple " + alter + "% , white " + 0 + "%");
    }
  </script>
  <style>
    h1 {
      text-align: center;
    }

    label {
      width: 100px;
      display: inline-block
    }

    #ergebnis {
      font-family: verdana;
      font-size: 20px;
      padding: 10px;
    }
  </style>
</head>

<body>

  <h1>Übung: Balkendiagramm</h1>

  <form>
    <h2>Ihre Angaben:</h2>
    <label for="vorname">Vorname:</label>
    <input type="text" id="vorname"><br><br>
    <label for="alter">Alter:</label>
    <input type="text" id="alter"><br><br>
    <button type="button" onclick="myFunction()">Anzeigen!</button>
  </form>


  <div id="ergebnis">Bitte geben Sie ihre Daten ein. Vielen Dank!</div>

</body>

</html>

Merker:

  • CSS
    • background-color: linear-gradient(direction, color, color)

Schreibe einen Kommentar