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>

🌙

zurzeit ist es so extrem warm, dass ich absolut nicht schlafen kann. ich bin ja eh schon so ziemlich die nachteule, wodurch ich mich nachts ohnehin schon schwer tue einzuschlafen…
is aber nicht weiter schlimm, denn so hatte ich zeit ein bisschen zu lesen.
ein tolles buch, weil wirklich alles ganz genau, in verständlicher sprache erklärt wird! ich werde wieder mit den allerersten übungen beginnen und…

HALLO WELT!

auf den bildschirm zaubern

😉

<html>
Dies ist normales HTML.<br>
<script language="Javascript">
    document.write ("Hallo Welt! Dies ist Javascript.");
    </script>
    <br>
    Wieder normales HTML. <br>
</html>
<html>
Dies ist normales HTML.<br>
<script language="Javascript">
    document.write ("Hallo Welt!<br>");
    document.write ("Dies ist Javascript");
    document.write ("- eine neue Scriptsprache.");
</script>
    <br>
    Wieder normales HTML. <br>
</html>
<html>
    <form>
        <input type="button" name="button" value="Dr&uuml;ck mich!" onclick="alert ('Hallo Welt!')">    
    </form>
</html>

Javascript – Onclick

Bin gerade dabei den Javascript-Befehl „onclick“ auszuprobieren.
Oncklick/Alert oder Onclick/change backgroundColor haut hin 🙂
Jetzt möchte ich es noch zusammenbringen, dass ein Imagetag bei onclick Image wechselt. Das ist nicht so einfach, weil ich keine Profi-Vorlage habe

…und ich weiß nicht wie der Befehl für den Imagewechsel lautet 😀
Nebenbei schreibe ich momentan alles im HTML (inline), also ohne externer js-Datei und ohne <script>-Befehl. Das ist zwar nicht so ganz Neuland für mich, aber ich muss mir das jetzt erstmal zusammensuchen oder mir vielleicht mal die Unterlagen ansehen?

Hm… Ziel der nächsten Tage: Üben, üben, üben und…Onclick checken 😀

– Gestern war ich leicht durch den Wind^^ Da kam Einiges zusammen, bis es platzte …wobei der erwähnte Grund, nicht wirklich mein „Platzgrund“ war, daher …öhm…einfach mal vergessen und Schwamm drüber xD Es war einfach nur die negative Krönung, des positiven Ganzen oder so^^


Ich bin zurzeit wohl etwas sensibel und extremst aufgekratzt, da kommts schon mal vor, dass ich kurzerhand mal abdreh. …Es geht mir wieder gut!
Mir ist ehrlich gesagt jetzt nur Eines wichtig und zwar, dass ich ALLES was ich im Kurs lerne, auch umsetzen kann…alles Andere sollte mich mal nicht interessieren!

SO, FROHE OSTERN!