JavaScript 1 Einführung

From Coders.Bay Wiki
Revision as of 12:38, 7 February 2022 by Titzi (talk | contribs) (Created page with " ====Allgemeines==== *Einsatzzweck: dynamische Internetseiten erstellen *Vielfältige Möglichkeiten um Aufbau, Layout und Inhalte zu verändern *Zählt mittlerweile zu den...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

Allgemeines

  • Einsatzzweck: dynamische Internetseiten erstellen
  • Vielfältige Möglichkeiten um Aufbau, Layout und Inhalte zu verändern
  • Zählt mittlerweile zu den etablierten Web-Technologien
  • Aufgrund großer Beliebtheit hat sich Anwendungsbereich ausgeweitet
  • 2009 erschien bspwNode.js => Plattform um mit JavaScript Serveranwendungen programmieren zu können
  • Später auch Entwicklungsumgebungen wie Electronoder NW.js => möglich, Desktop-Anwendungen zu erstellen
  • Browser-Anwendungen bleiben mit großem Abstand der häufigste Einsatzbereich von JS
  • Läuft innerhalb einer Sandbox, dadurch kein Zugriff auf Funktionen des Betriebssystems, Hardware oder zu Netzwerken möglich


Entstehung

  • Entstehung eng mit Entwicklung der Webbrowser verbunden
  • Erste Version erschien 1995 unter der Bezeichnung „LiveScript“ und wurde im Netscape Navigator 2.0 umgesetzt
  • Wenige Monate nach Ersterscheinung umbenannt in JavaScript (Marketingstrategie)


Erste Schritte

  • Früher musste innerhalb des script-Tags das Attribut type=“text/javascript“stehen => heute nicht mehr nötig
  • alert-Befehl erzeugt eine kleine Info-Box
  • Semikolon beendet JS Befehle
<script type="text/javascript">
</script>
<script>
alert("Hallo Welt!");
</script>

Kommentare in JS
<script>
//Ich bin ein einzeiliger Kommentar
/* Ich bin ein Kommentar
der über mehrere Zeilen
gehen kann */
</script>


JavaScript in einer eigenen Datei

HTML-Datei 

<!DOCTYPE html>
    <html>
        <head>
          <meta charset=“UTF-8″>
          <title>JSSeite</title>
      </head>
      <body>
         <script src=“./meinScript.js“></script>
      </body>
    </html>

JavaScript Datei 

alert("Hallo Welt!");


"use strict"

  • Fehler und schlecht implementierte Funktionen wurden nicht verbessert Grund: Entwickler legen viel Wert auf abwärtskompatible Programmiersprache (sonst kann es passieren, dass entsprechende Funktionen plötzlich nicht mehr funktionsfähig sind)
  • 2009 neue JavaScript-Version die alle bekannten Schwachstellen entfernen sollte => ECMA SCRIPT 5 (ES5) wurde veröffentlicht => nicht mehr abwärtskompatibel
  • Mit „use strict“;wird dem Browser mitgeteilt, dass er die neue Version verwenden soll, ansonsten wird ES5 vom Browser nicht berücksichtigt
  • Befehl muss stets am Anfang eingefügt werden
  • Befehl kann nicht rückgängig gemacht werden
  • Empfehlenswert neue Programme in dieser moderneren Version zu verfasse
<script>
    „use strict“;
    alert("Hallo Welt!");
</script>


promp() - Eine Eingabe eines Anwenders aufnehmen

  • Einfache Möglichkeit für Interaktion mit Nutzer ist der prompt-Befehl
  • Erzeugt ein neues Fenster, ähnlich dem alert-Befehl
"use strict";
prompt("Wie alt bist du?","Geben Sie das Alter an");


Variablen in JavaScript

  • Können unterschiedliche Werte aufnehmen (am häufigsten sind es Zahlen)
    • Buchstaben, Zeichen, Wörter, längeren Text, Wahrheitswerte, …
  • Jede Variable hat einen Typ
  • In JS nicht notwendig den Datentyp anzugeben
    • Interpreter wählt während der Ausführung automatisch eine passende Möglichkeit aus
    • auch möglich zuerst eine Zahl, und dann einen String in die gleiche Variable abzulegen
  • Einige Operationen lassen sich aber nur mit bestimmten Variablentypen durchführen (zB.: Division
// Variable deklarieren => Initialisierung
let meineErsteVariable;

// Der Variable einen Wert zuweisen
meineErsteVariable = 5;
/* oder */
meineErsteVariable = "Ich bin ein Text";

/*
Mehrere Variablen mit Wert initialisieren 
Nicht empfehlenswert wegen Übersichtlichkeit im Code = schlechter Programmierstil
Wenn „use strict“ verwendet wird, ist diese Methode nicht möglich
*/
let meineVariable = 5, text = "Hallo du", zahl = 10;


alert() - Einfache Ausgabe im Browserfenster

    "use strict";
    let text = "mein erster Text";
    alert(text);


let vs. var

  • In einem einfachen Programm gibt es keinen Unterschied
  • Funktionsweisen sehr ähnlich
  • Üblich, dass eine Variable, die innerhalb einer if-Abfrage deklariert wird, nur im Inneren dieses Blocks gültig ist

im übrigen Programm käme es zu einem Fehler wenn sie aufgerufen wird

  • Variablen, die mit let deklariert sind, beachten diesen Grundsatz

mit var, sind sie auch außerhalb verwendbar, deshalb sollte man darauf verzichten

  • Verhalten innerhalb von Funktionen:
    • Geht der Interpreter die gesamte Funktion durch und realisiert alle Variablen-Deklarationen (sofern mit var ausgeführt). Danach beginnt Abarbeitung des übrigen Programmcodes.
    • Folge: möglich, die Variablen am Anfang der Funktion zu verwenden und sie erst später zu deklarieren => let unterstützt das nicht


  • Fazit: altere Bezeichnung var unterstützt einige Verhaltensweisen, die nicht mehr gängigen Programmiertechniken entsprechen. Bezeichner let erfüllt diese Ansprüche


const - Konstanten verwenden

  • Werte die in der gesamten Verwendung gleich bleiben
  • Verwendung kann Performance eines Programms etwas verbessern
    • Beispiel: Bestimmung von Farben für die Beeinflussung des Designs mit JavaScript
    "use strict";
    const a = "mein erster Text";
    alert(a);


Datentypen ermitteln

  • Mit typeof kann ausgegeben werden, um welchen Typ von Variable es sich handelt
  • Befehl: document.write() schreibt Inhalte direkt in das Hauptfenster
  • Ganze Zahlen und Fließkommazahlen behandelt JS gleich als number
  • Typ einer Variable kann sich in JS im Laufe des Programms ändern
"use strict";
let ganzeZahl = 3;
let kommazahl = 2.34;
let buchstabe = "a";
let wort = 'hallo';
let wahrheitswert = true;
let ohneInitialisierung;

document.write("ganzeZahl: " + typeof ganzeZahl + "<br>");
document.write("kommazahl: " + typeof kommazahl + "<br>");
document.write("buchstabe: " + typeof buchstabe + "<br>");
document.write("wort: " + typeof wort + "<br>");
document.write("wahrheitswert: " + typeof wahrheitswert + "<br>");
document.write("ohneInitialisierung: " + typeof ohneInitialisierung + "<br>");


Datentypen verändern

  • Eingabeaufforderung durch prompt-Befehl
  • Ausgabe des Datentyp (string)
  • Ausgabe und versuch einen String mit einer Zahl zu addieren, es kommt zu einer Konkatenaktion
  • Ausgabe von Zeilenumbrüchen
  • Umwandlung des Eingabewerts in eine Zahl
  • Ausgabe und Addition der Zahl mit 3 = richtiges Ergebnis
let eingabe = prompt("Gib eine Zahl ein:");
document.write("Datentyp: " + typeof eingabe + "<br>");
document.write(eingabe + 3);
document.write("<br><br>");
eingabe = Number(eingabe);
document.write("Datentyp: " + typeof eingabe + "<br>");
document.write(eingabe + 3);


Operationen mit Variablen durchführen

Zeichen Beschreibung
"+" Addition
"–" Subtraktion
/ Division
* Multiplikation
** Potenz
% Modulo
"+=" Erhöhung um den angegebenen Wert
"-=" Verringerung um den angegebenen Wert
"*=" Variable wird mit dem angegebenen Wert multipliziert
"/=" Variable wird durch den angegebenen Wert geteilt
"++" Erhöhung um 1 (Kurzschreibweise für +1)
"--" Verringerung um 1 (Kurzschreibweise für -1) 
let meineVariable = 3;
meineVariable = meineVariable * 2;
document.write(meineVariable + "<br>");
meineVariable = 3;
meineVariable *= 2;
document.write("Kurzschreibweise: " + meineVariable + "<br>");
meineVariable = 3;
meineVariable = meineVariable + 5;
document.write(meineVariable + "<br>");
meineVariable = 3;
meineVariable += 5;
document.write("Kurzschreibweise: " + meineVariable + "<br>");


if-Abfrage

// Beispiel 1
let bedingung = true;
if(bedingung) {
    alert("Die Bedingung trifft zu.");
}

// Beispiel 2
let eingabe = Number(prompt("Was ist das Ergebnis aus 3 + 2?"));
if(eingabe == 5) {
    document.write("Richtige Lösung!");
} 
if(eingabe < 5) {
    document.write("Wert ist zu klein<br>");
} else if(eingabe > 5) {
    document.write("Wert ist zu groß<br>");
}
if(eingabe != 5) {
    document.write("Wert ist falsch!");
}

// Beispiel 3
"use strict";
let eingabe1 = Number(prompt("Ergebnis aus 2 + 3?"));
let eingabe2 = Number(prompt("Ergebnis aus 2 * 3?"));
if(eingabe1 == 5 || eingabe2 == 6) {
    document.write("Mindestens eine Antwort ist richtig?");
} else {
    document.write("Beide Antworten sind falsch");
}


Arrays

  • Arrays sind in JS Objekte mit besonderen Eigenschaften
  • können mehrere Werte enthalten
  • sind 0-indiziert (erste Position im Array ist 0, nicht 1)
  • Elemente müssen nicht den gleichen Datentyp aufweisen
// Variante 1: Entspricht Vorgaben für objektorientierte Programmierung 
let meinArray = new Array();


// Variante 2: Häufiger im Einsatz - Kann gleich befüllt werden
let neuesArray = [];
neuesArray = ["Hund", "Katze", "Maus"];
alert(neuesArray);


// Beispiel
// Produkt, Preis, Lieferbar
let neuesArray = ["Brot", 2.99, true];
alert(neuesArray);
Länge des Arrays: .length
  • .length enthält die Länge des Arrays(ist 1 Element enthalten, ist die Länge auch 1)
// Ausgabe bestimmte Stelle des Array
let neuesArray =  ["Hund", "Katze", "Maus"];
alert(neuesArray[0]);

// Wert an bestimmter Stelle ändern
neuesArray[0] = "Papagei";

// Wert hinzufügen
neuesArray[3] = "Hund";

// um an das Ende des Arrays einen Wert hinzuzufügen, kann '''.lenght''' verwendet werden, leere Felder & Überschreibungen können so vermieden werden!
neuesArray[neuesArray.length] = "Hund";
Mehrdimensionale Arrays
let meinArray = [];
meinArray[0] = ["Brot", 1.99, true];
meinArray[1] = ["Krapfen", 0.99, true];
meinArray[2] = ["Reindling", 6.99, false];
meinArray[3] = ["Linzer Torte", 13.99, true];
meinArray[4] = ["Windbeute", 0.80, false];
// An bestimmte Stelle zugreifen
document.write(meinArray[0][1] + "<br><br>");
document.write(meinArray[2][2] + "<br><br>");
document.write(meinArray[4][0] + "<br><br>");
document.write(meinArray);


Schleifen

while-Schleife

  • Befehl decodeURI
    • Notwendig, da der Text Umlaute enthält
    • Werden sonst im Feld nicht richtig angezeigt
"use strict";
let eingabe = Number(prompt(decodeURI("Bis zu welchem Wert m%C3%B6chten sie z%C3%A4hlen?")));
let i = 1;
while(i <= eingabe) {
    document.write(i + "<br>");
    i++;
}

// oder
let inhalt = encodeURI("Bis zu welchem Wert möchtest du zählen?")
let eingabe = Number(prompt(decodeURI(inhalt)));

do-while-Schleife

  • Das do...while statement erstellt eine Schleife, die einen bestimmten Ausdruck ausführt, bis die zu überprüfende Aussage falsch wird
"use strict";
let eingabe;
do {
    eingabe = prompt("Ergebnis aus 3 + 2?");
} while(eingabe != 5);
alert("Richtige Antwort!");

for-Schleife

"use strict";
let inhalt = encodeURI("Bis zu welchem Wert möchtest du zählen?");
let eingabe = Number(prompt(decodeURI(inhalt)));

for (let i = 1; i <= eingabe; i++) {
    document.write(i + "<br>");
}

Sonderform der for-Schleife

"use strict";
let arr = [2, 5, 9, 4, 2];

for (let wert of arr) {
    document.write(wert + "<br>");
}


Funktionen definieren und aufrufen

  • Dient dazu, bestimmte Abfolge von Befehlen außerhalb des Hauptprogramms abzuspeichern
  • Macht es möglich, sie durch Nennung des Funktionsnamens an einer anderen Stelle aufzurufen
"use strict";
function begruessung() {
    let name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen: " + name);
}

begruessung();

Gültigkeitsbereich der Variablen

  • Variablen die innerhalb einer Funktion erstellt werden sind auch nur dort gültig
  • Variablen außerhalb einer Funktion ist im gesamten Bereich des Programms gültig = globale Variable
  • Achtung: Variable innerhalb der Funktion nicht noch einmal deklarieren
  • So wenig wie möglich globale Variablen nutzen => ua Fehleranfällig, Probleme bei der Wiederverwendung von Code können auftreten
"use strict";
function begruessung() {
    name = prompt("Gib deinen Namen ein:");
    alert("Herzlich willkommen, " + name);
}
let name;
begruessung();
document.write("Ihr Name: " + name);

Funktionen mit Übergabewerten

  • Übergabewert steht in den runden Klammern des Funktionsnamens und werden auch als Parameter der Funktion bezeichnet.
  • Sobald die Funktion mit den "tatsächlichen Werten" aufgerufen wird, heißen diese Argumente
  • Beliebiger Datentyp
  • Entweder direkt Wert übergeben oder eine Variable
  • Auch möglich mehrere Werte zu übergeben = mehrere Werte in der Funktionsklammer (durch einen Beistrich getrennt)
// Bsp 1
"use strict";
function begruessung(name) {
    alert("Herzlich willkommen, " + name);
}
let anwender = prompt("Gib deinen Namen ein:");
begruessung(anwender);


// Bsp 2
"use strict";
function begruessung(name, alter) {
    document.write("Name: " + name + "<br>");
    document.write("Alter: " + alter);
}
let anwender = prompt("Gib deinen Namen ein:");
let alter = prompt("Gib dein Alter ein");
begruessung(anwender, alter);

Funktionen mit Rückgabewerten

  • Eine Funktion kann Werte an das Hauptprogramm übermitteln mit Hilfe eines Rückgabewert
  • Die Rückgabe erfolgt über das return Keyword
  • Jede Funktion darf nur einen einzigen Wert an das Programm zurück geben
  • Wenn mehrere Variablen übermittelt werden sollen => jeweils eine eigene Funktion erstellen oder Array erstellen und darin mehrere Werte aufnehmen
"use strict";
function beispiel(x) {
    let ergebnis = 2 * x * x + 5 * x + 7;
    return ergebnis;
}
let wert = beispiel(3);
alert(wert);

Quelle: JavaScript programmieren für Einsteiger
ISBN: 978-3-96645-016-4

Retrieved from "http://wiki.streampy.at/index.php?title=JavaScript_1_Einführung&oldid=549"