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 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^^