JavaScript

  • Programmiersprache des WWW
  • war mal Browserspezifisch
  • auch im Backend

Ausprobieren ist gut, Fehler machen noch besser


Ein Experte ist einer, der alle Fehler
schon gemacht hat

HTML, CSS

HTML Crashkurs

HTML Grundgerüst, bitte kopieren:

                        
<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
  </body>
</html>
                        
                    

Hallo Welt in Javascript

                        
<script>
    var name = prompt("Hallo Welt! Was ist dein Name?");
    alert("Hallo " + name);
</script>
                        
                    

Die Website ändern

                        
<p id="hallotext"></p>
                        
                    
                        
<script>
    var name = prompt("Hallo Welt! Was ist dein Name?");
    var pElement = document.getElementById("hallotext");
    pElement.innerHTML = "Hallo " + name;
</script>
                        
                    

Attribute ändern

                        
<p id="hallotext"></p>
                        
                    
                        
<script>
    var name = prompt("Hallo Welt! Was ist dein Name?");
    var pElement = document.getElementById("hallotext");
    pElement.innerHTML = "Hallo " + name;
</script>
                        
                    

Mini-Quiz

Was ist eine Programmiersprache?

  • HTML
  • CSS
  • JavaScript
  • HTTP

Was kann man mit JavaScript machen?

  • Frontend-Programmierung auf Webseiten
  • Backend-Programmierung auf Servern
  • Spieleentwicklung
  • Apps für Android und iOS
  • Kaffee (Link)
                            name = "Anna";
name = "Anette";
Name = "Olaf";
alert(name); 
                        

Was wird angezeigt?

  • Anna
  • Anette
  • Olaf
                            text = "Hallo" + "Welt";
alert(text);
                        

Was wird angezeigt?

  • Hallo + Welt
  • Hallo Welt
  • HalloWelt
  • "Hallo" + "Welt"
  • text

Variablen

                        var eineVariable; // Deklaration
eineVariable = 3; // Initialisierung
var eineAndereVariable = 2; // Deklaration + Initialisierung in Einem
eineAndereVariable = 5; // Zuweisung
alert(eineVariable + eineAndereVariable);
                    

Ohne das Schlüsselwort var:

                            variableOhneVar = 4;
                        

Kommentare

  • Um anderen Code zu erklären
  • Um den Code später selbst zu verstehen
  • Als Dokumentation
  • Für Zusatzinformationen wie Autor, Lizenz
  • Um auf schwierige Stellen hinzuweisen
                            var i; // Einzeiliger Kommentar
var hallo = "Hallo Welt";
/* mehrzeiliger
   Kommentar */
/*
 * noch ein mehrzeiliger Kommentar,
 * hübsch formatiert
 */
alert(hallo /* theoretisch fast überall erlaubt */);
                        

Aufgabe: kommentiert euren eigenen Code so, dass ihr ihn später gut versteht

const, let

Statt var kann man auch "const" und "let" benutzen.

let nimmt man nur, wenn eine Variable nur innerhalb einer Funktion gültig sein soll.

const definiert eine Konstante, die wie eine Variable benutzt, aber nach der Initialisierung nicht verändert werden kann.

Mehr dazu beim nächsten Mal

Grundrechenarten

Es gibt fünf (!) Grundrechenarten.

                        alert("fünf plus drei ist " + (5 + 3));
alert("fünf mal drei ist " + (5 * 3));
alert("fünf minus drei ist " + (5 - 3));
alert("fünf geteilt durch drei ist " + (5 / 3));
alert("fünf modulo drei ist " + (5 % 3));
                    

Beispiel Addition

Erstelle eine neue HTML-Datei mit:

  • zwei <input>-Elementen mit IDs "operand1" und "operand2". input ist ein Tag ohne Inhalt
  • einem Button mit Text "Addieren" (o. Ä.) und einer beliebigen ID
  • einem leeren <p> oder <div> mit beliebiger ID

Füge folgendes JavaScript hinzu:

                            var inputOperand1 = document.getElementById("operand1");
var inputOperand2 = document.getElementById("operand2");
var ausgabe = document.getElementById("ausgabe");

document.getElementById("button").addEventListener("click", function() {
    let zahl1 = inputOperand1.value;
    let zahl2 = inputOperand2.value;
    let ergebnis = zahl1 + zahl2;
    ausgabe.innerHTML = ergebnis;
});
                        

Warum funktioniert es nicht?

                            var zahl1 = Number(inputOperand1.value);
var zahl2 = Number(inputOperand2.value);
                        

Datentypen

                                alert(typeof(3))
                        
  • number
  • string
  • boolean
  • object
  • undefined
  • Arrays (auch Objekte)