Javascript

musste mir gerade eine mega ladung kaffee gönnen, denn mir fehlen immer noch 6h schlaf, die ich hoffentlich – jetzt am we – wieder aufholen kann.

VARIABLEN/ DEKLARATIONEN VON VARIABLEN


momentan bin ich bei der deklaration von variablen und diese zu üben. hier ein beispiel, wobei es darum geht, bspw. eine längenangabe von zoll in zentimeter umzurechnen.

<!DOCTYPE HTML>
<html>
<script language="javascript">
var zentimeter, zoll;
zoll = 15;
zentimeter = 2.54 * zoll;
document.write(zoll + "zoll sind" + zentimeter + "zentimeter");
</script>
</html>

das ganze funktioniert natürlich auch mit namen. hier eine begrüßung:

<!DOCTYPE HTML>
<html>
    <script language="Javascript">
        var name;
        name = "rosemadder";
        var begruessung;
        begruessung= "hallo " + name + "!";
        document.write(begruessung);
    </script>
</html>

FUNKTIONEN

<!DOCTYPE HTML>
<html>

<head>
    <script language="javascript">
        function schreibeText() {
            document.write("Rosemadder ist am Lernen!");
            document.write("Sie will Javascript lernen" + "!...<br>");
        }
    </script>
</head>

<body>
    <script language="javascript">
        // 3 Funktionsaufrufe 
        schreibeText();
        schreibeText();
        schreibeText();
    </script>
</body>
</html>

Testübung vom Kopf heraus:

<!DOCTYPE HTML>
<html>

<head>
    <title>Übung</title>
    <script language="Javascript">
        var Fruechte;
        Fruechte = "Banane <br>" + "Apfel <br>" + "Kirsche" + "!";
        var Einkauf;
        Einkauf = "Rosemadder <p>" + "hat" + "viele" + "Fruechte" + "eingekauft<br>";
        document.write(Einkauf);
        document.write(Fruechte);
    </script>
</head>

</html>

nun mit „function“:

<!DOCTYPE HTML>
<html>

<head>
    <title>Übung</title>
    <script language="Javascript">
        function schreibeText() {
            var fruechte
            fruechte = "Banane <br>" + "Apfel <br>" + "Kirsche" + "!<br><br>";
            var Einkauf;
            Einkauf = "Rosemadder <p>" + "hat" + "viele" + "Fruechte" + "eingekauft" + ":<br>";
            document.write(Einkauf);
            document.write(fruechte);
        }
    </script>
</head>

<body>
    <script language="Javascript">
        schreibeText();
        schreibeText();
    </script>
</body>

</html>

Nun mit alert()-Funktion:

<!DOCTYPE HTML>
<html>

<head>
    <title>Übung</title>
    <script language="Javascript">
        function schreibeText() {
            var Einkauf;
            Einkauf = "Rosemadder <p>" + "hat" + "viele" + "Fruechte" + "eingekauft" + "!<br>";
            document.write(Einkauf);
            alert("Im Einkaufskorb befindet sich ein Apfel, eine Kirsche und eine Banane!")
        }
    </script>
</head>

<body>
    <form>
        <h2>Rose Madders Einkauf:</h2><br>
        <input type="button" value="Warenkorb" onclick="schreibeText()">
    </form>
</body>

</html>

ÜBERGABEWERTE

<!DOCTYPE HTML>
<html>

<head>
    <script language="Javascript">
        function begruessung(name) {
            var name = "Rosemadder";
            var text = "Hallo" + name + "!";
            alert(text);
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Begruessung" onclick="begruessung(name)">
    </form>
</body>

</html>

ANGABE EINES ARGUMENTS:

<!DOCTYPE HTML>
<html>

<head>
    <script language="Javascript">
        function begruessung(name) {
            var text = "Hallo" + name + "!";
            alert(text);
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Rosemadder" onclick="begruessung('Rosemadder')">
        <input type="button" value="Alex" onclick="begruessung('Alex')">
        <input type="button" value="Christian" onclick="begruessung('Christian')">
        <input type="button" value="Astrid" onclick="begruessung('Astrid')">
    </form>
</body>

</html>

mehrere Argumente:

<!DOCTYPE HTML>
<html>

<head>
    <title>Addition</title>
    <script language="Javascript">
        function addition(x, y) {
            alert(x + y);
        }
    </script>
</head>

<body>
    <form>
        <h3>Berechne 15 + 20:</h3>
        <input type="button" value="ausrechnen" onclick="addition(15,20)"> </form>
</body>

</html>

Anzahl von Übergabewerten:

<!DOCTYPE HTML>
<html>

<head>
    <title>Anzahl von Übergangswerten</title>
    <script language="Javascript">
        function summe() {
            var ergebnis = 0;
            for (var i = 0; i < summe.arguments.length; i++) {
                ergebnis += summe.arguments[i];
            }
            alert(ergebnis);
        }
    </script>
</head>

<body>
    <form>
        <input type="button" value="Beschreibung 1" onclick="summe (23,33,53,12)">
        <input type="button" value="Beschreibung 2" onclick="summe (87,83,12,43,64,120,32,12)">
        <input type="button" value="Beschreibung 3" onclick="summe (12,5)">
    </form>
</body>

</html>

diese übung muss ich mir noch genauer ansehen, weil mir dabei nicht alles klar ist. hier werden die argumente zusammengezählt und im ergebnis, über alert wiedergegeben. die for schleife ist mir nicht ganz klar. warum i? …i für index???
aber soweit ich das verstehe, ist “ var i“ der platz für die anzahl der übergangswerte, der bei 0 beginnt. ist i jedoch kleiner als die summe der argumente – was es ja ist, weil 0 – ändert sich der wert von 0 auf 1, bzw. es wird 1 hinzugezählt…oder so 🙂 😀
ich verstehe die for schleife halt so, dass sie den befehl gibt jedes einzelne argument zusammenzuzählen, doch ich bin mir nicht sicher, ob ich das richtig verstanden habe. übersetzt müsste das heißen: i ist gleich 0, also es enthält 0 werte, ist i jedoch kleiner als die summe des arguments, wird 1 hinzugezählt :), also ein weiteres argument hinzugezählt…so in der richtung müsste es stimmen.

GLOBALE UND LOKALE VARIABLEN

globale variablen werden außerhalb einer funktion oder schleife definiert. lokale variablen hingegen innerhalb dieser. die globale variable greift somit auf alle folgenden blöcke zu, die lokale hingegen wirkt sich nur innerhalb des entsprechenden anweisungsblockes aus.

so und jetzt wirds für mich interessant, weil man damit ziemlich viel anstellen kann =) :

VERZWEIGUNGEN

<html>
<script language="Javascript">
var x = 10;
var y = 17;
if (x == y) document.write("x ist gleich y<br>");
else document.write("<br>x ist nicht gleich y<br>");
if (x > y) document.write("x ist groesser als y<br>");
if (x < y) document.write("y ist groesser als x<br>");
</script>
</html>

mit Namen:

<!DOCTYPE HTML>
<html>
<script language="Javascript">
    var x = "Anna";
    var y = "Anna";
    if (x == y) document.write("x ist gleich y<br>");
    else document.write("<br>x ist nicht gleich y<br>");
    if (x > y) document.write("x ist groesser als y<br>");
    if (x < y) document.write("y ist groesser als x<br>");
</script>

</html>
<!DOCTYPE HTML>
<html>
<script language="Javascript">
    var x = "Anna";
    var y = "Hannes";
    if (x == y) document.write("x ist gleich y<br>");
    else document.write("<br>x ist nicht gleich y<br>");
    if (x > y) document.write("x ist groesser als y<br>");
    if (x < y) document.write("y ist groesser als x<br>");
</script>

</html>

Javascript Zusammenfassung

Ich fasse für mich zusammen, weil ich auf diese Weise leichter bzw. schneller lerne. Außerdem muss ich zuerst mal verstehen, WARUM gewisse Befehle angegeben werden müssen und welche Funktion sie haben, weil ansonsten verstehe ich nur Bahnhof. Wobei ich natürlich einiges schon kenne, aber trotzdem aufschreiben möchte.
Es wird eine Weile dauern, doch ich werde versuchen diese Zusammenfassung nach und nach zu erweitern.

Einstieg in Javascript

script

Javascript Anweisungen müssen zunächst in den HTML-Code eingebunden werden. Das Script kann entweder im Header- oder im Bodybereich eingefügt werden. Wird das Script bspw. im Header eingebunden, so wird es bevor sich die Website öffnet ausgeführt.
Das Script ist mittels eines -Tags anzugeben und all das was sich in diesen Container befindet ist ein Script. Damit verständlich wird, um welche Scriptsprache es sich handelt, kann man dies über den Parameter „language“ angeben, wodurch der Befehl lautet:

language javascript

Der Script-Typ wird mittels“type“ angegeben.

Beispiel:

type javascript

Wird zum Beispiel eine separate Scriptdatei verwendet, so muss man das ebenfalls im Code angeben und zwar durch das Attribut „src„, das auf den Pfad zur separaten Datei hinweist:
<script language=“javascript“ type=“text/javascript“ src=“meineFunktion.js“>

Elementare Grundstrukturen von Javascript

Variablen
Arrays
Datentypen
Operatoren
Ausdrücke
Anweisungen
Kommentare

Variablen

Variablen werden mit const, let oder var deklariert und sind ein Speicher oder Platzhalter , denen zur Laufzeit eines Scripts über das Gleichzeichen temporär Werte zugeordnet werden können. Angesprochen werden diese Variablen über Namen, die sie vorher zugewiesen bekommen haben.

Hier ein Beispiel zu einer Variable ohne Typ und ohne Wert:

var Hanswurst;

Hier ein Beispiel zu einer Variable mit Wertzuweisung:

var Hanswurst =50;

Die Variable Hanswurst wird somit als Zahl festgelegt und erhält den Wert 50.

Nun ein kleines Übungsbeispiel:

HTML:

javascript_html_hanswurst

Javascript:

javascript var hanswurst

document.write(„<BR>“) legt den Zeilenumbruch fest.

Ergebnis im Browser:
javascript ergebnis browser

Im weiteren Beispiel wird dem Wert eine Zahl hinzugefügt, wodurch sich das Endergebnis ändert, bzw. erhöht:

html Gemüsekiste
javascript rosemadder

Ergebnis:

browser rosemadder

Arrays

Ein Array ist eine Sammlung von Variablen, die jeweils mittels eines Namens gekennzeichnet sind und dienen dazu eine Reihe von gleichartigen Informationen zu speichern, wie zum Beispiel die Tage eines Monats.

Beispiel:

var Dies_ist_Tag_1 = 1;
var So_ein_Tag_2 = 2;
var Noch_ein_Tag = 3;
var Undnocheiner = 4;
var Tag_5 = 5;
var Und_hier_Tag_6 = 6;
var Tag_7 = 7;

var Jetztwirdeszweistellig = 10;
var Tag_11 = 11;

var Tag_28 = 28;
var Tag_29 = 29;
var Tag_30 = 30;

Der Unterschied eines Arrays ist – im Vergleich zu einer herkömmlichen Variable – dass man neben dem Namen, noch die Anzahl von Elementen angeben- oder ein Kennzeichen setzen muss, dass es sich um ein Array handelt. Zudem wird zur Erzeugung dessen ein Schlüsselwort namens „new“ verwendet.

Beispiel:

var Tag_im_April = new Array(30);

Wenn man einem Element eines Arrays einen Wert zuordnen möchte, dann muss man diesen in einer eckigen Klammer angeben:

var Tag_im_April [ 0 ] = 1;
var Tag_im_April [ 1 ] = 2;

var Tag_im_April [ 29 ] = 30;

Die vier Grundtypen von Variablen

  • Object
  • Number
  • Boolean
  • String

Object = Kann einen Wert eines beliebigen Typs enthalten. In der Regel dient „Object“ zum Speichern von Instanzen von Klassen.

Number = Diese Variable kann einen Dezimal- oder einen Gleitkommawert enthalten. Sie angegebenen Zahlen müssen anstelle des Kommas einen Punkt enthalten.

Boolean = Bei diesem Variablentyp wird nur entweder „true“ oder „false“ angegeben.

String = Dieser Typ der Variablen kann normalen Text sowie auch Zahlen beinhalten.

Schlüsselworte

Bei Schlüsselwörtern in Javascript, handelt es sich um sogenannte „reservierte Wörter“ (reserved words), die nicht als Name für einen Bezeichner verwendet werden dürfen, weil ansonsten die Ausführung des Programms verhindert wird. Aus diesem Grund muss man bei der Namensgebung eines Bezeichners darauf achten, dass es sich dabei nicht um ein Schlüsselwort, bzw. um ein reserviertes Wort handelt.

Reservierte Wörter (aus SELFHTML-Wiki)

Reserviertes WortErläuterung
breakTeil einer Abbruchanweisung. Wird verwendet in Schleifen und bei switch.
caseFür Fallunterscheidungen mit switch.
catchWird bei der Fehlerbehandlung mit try und catch verwendet.
classFür die Definition einer Klasse (ES6).
constLeitet die Deklaration einer oder mehrerer Konstanten ein.
continueTeil einer Fortsetzungsanweisung.
debuggerDefiniert einen Haltepunkt im Programm für Debugger.
defaultStandardklausel bei switch. Auch verwendet bei Standardexport in einem Modul.
deleteOperator zum Löschen von Objekteigenschaften.
doFür Schleifen mit do und while.
elseTeil einer bedingten Anweisung mit if.
exportWird bei der Deklaration eines Exports in einem Modul verwendet.
extendsMit dem Schlüsselwort extends kann eine abgeleitete Klasse definiert werden.
finallyKann bei der Fehlerbehandlung mit try und catch verwendet werden.
forWird in verschiedenen Schleifen verwendet.
functionSchlüsselwort zur Definition einer Funktion.
ifFür bedingte Anweisungen.
importWird verwendet bei der Deklaration eines Imports aus einem Modul.
inOperator in einem relationalen Ausdruck. Auch verwendet in einer Schleife mit for.
instanceofHiermit kann geprüft werden, ob ein Objekt eine Instanz eines Konstruktors ist.
newOperator für den Konstruktorenaufruf.
returnTeil der Rückgabeanweisung einer Funktion.
superSchlüsselwort zum Methoden- oder Konstruktorenaufruf in Objekt oder abgeleiteter Klasse.
switchFür Fallunterscheidungen.
thisEingebaute Kontextvariable von Funktionen.
throwErzeugt eine benutzerdefinierte Ausnahme.
tryWird bei der Fehlerbehandlung mit try und catch verwendet.
typeofOperator, der den Datentyp des Operanden zurückgibt.
varSchlüsselwort für die Deklaration einer oder mehrerer Variablen.
voidWertet den Ausdruck auf der rechten Seite aus und gibt standardmäßig undefined zurück.
whileWird bei Schleifen verwendet.
withKann verwendet werden, um mehrere Anweisungen mit einem Objekt durchzuführen.
yieldPausiert die Ausführung einer Generatorfunktion.

Weitere Schlüsselwörter, die nicht als Name für einen Bezeichner  verwendet werden sollten:

Reserviertes WortErläuterung
letLeitet die Deklaration einer oder mehrerer Variablen ein.
staticWird verwendet um innerhalb einer Klasse eine eigene Methode zu definieren.
Reserviertes WortErläuterung
nullRepräsentiert die beabsichtigte Abwesenheit eines Wertes.
falseBoolescher Wert, der für falsch steht.
trueBoolescher Wert, der für wahr steht.

  • implements
  • interface
  • package
  • private
  • protected
  • public

Anweisungen

Javascript Tutorial – Schleifen und Funktionen

Ich bin mittlerweile bei Teil 4 angekommen und stoße bereits auf erste Schwierigkeiten.
Ich verstehe zwar was hier gemacht wird und warum der Browser die Befehle so und nicht anders ausführt, doch es fehlt mir an Erklärungen. Um mir Befehle merken zu können, muss ich wissen, warum beispielsweise ein + oder eine bzw. zwei geschwungene Klammern verwendet werden. Ich muss mir merken, dass ++ den Variablenwert um 1 erhöht,  dass != ungleich und ! eine Negation bedeutet. Es gibt Einiges, was man sich hier einprägen muss und daher werde ich mir Teil 3 und 4 noch mehrmals anschauen bange_smileyund viel üben müssengrins_smiley.
Doch es macht Spaß, zu sehen, wie viel man bereits mit so wenigen Befehlen machen kann.

Naja, heute habe ich gelernt, wie man eine Endlosschleife und eine Schleife mit mehreren Anläufen ausführt. Wie ich meinem Browser befehle, dass er den Code 5 mal ausführen- und dann beenden  soll.

fünfmal Schleife

2 mal schleife usw…

Um dies zu bewerkstelligen, wird dieser Code in einer .js Datei abgespeichert:

js schleifencode

So, bis hier hin bin ich gekommen grins_smiley
Werde das aber nun mit verschiedenen Beispielen durchprobieren, ansonsten merke ich mir die Befehle nicht^^