hover/ onmouseover

Ich hatte schon lange vor mal einen Bildeffekt zu schreiben, der mittels :hover und onmouseover mehrere Overlays erzeugt. Heute hab ich es ausprobiert und es funktioniert 🙂
Hier mein hover-/onmouseover-Effekt mit einem David Bowie Image, von dem ich die Farben jeweils verändert habe, damit sich die Images voneinander unterscheiden und das Gesamtbild somit effektreicher gestalten :

hover/ onmouseover

Und hier noch die onclick-function, die bewirkt, dass das blau-graue Bild nach links verschoben wird :

onclick

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>

Fang den I-Punkt!!!

hab gerade ein ziemlich cooles script, ein bisschen auf unser logo umgewandelt, wo das „logo“ – mittels onmouseover auf den I-punkt – per klick, den I-punkt fangen muss 😀
was natürlich nicht geht, weil das script so aufgebaut ist, dass sich der I-punkt bei onmouseover um ein paar pixel vom cursor entfernt xD

😍

jetzt wäre noch ein onclick-event cool, mittels dem eine gewinnernachricht erscheint, wenn man den i.punkt erwischt! 🙂 😁 …es hat geklappt! 😍 jetzt würde ich noch gerne einen kurzen gewinnersound einfügen…😏 aber da müsste ich dann sowas wie if gewinnernachricht visible…audio.play true oder so schreiben. die frage ist nur, wie genau 😀

MUHIIIIIIIIIIIIII 😆, ES HAT GEKLAPPT!!!!!

mittels onmousedown=“tadaa.play()“ 😜

Javascript window.onscroll – GELÖST! :D

Lol, bin vor kurzem aufgestanden und schon hab ich das problem gelöst! wahrscheinlich hab ich die ganze nacht davon geträumt und scripts gebüffelt 😀
keine ahnung, aber ich hatte mir erwartet, die nächsten tage daran arbeiten zu müssen^^ doch heute morgen kam mir die entscheidende idee, den scrollback-window.onscroll befehl einfach mit einem window.onwheel befehl zu ersetzen! …jo und somit kann ich nun beide scripts nutzen, juhu!!!

😊

allerdings wäre es auch gut zu checken, wie man zwei scripts zusammenfügen kann, denn es kommt bestimmt öfter mal vor, dass man zwei gleiche javascript-events verwenden muss.

Hui, hui :)

ich glaube, dass es jetzt langsam zeit wird, mir javascript genauer unter die lupe zu nehmen. vor ein paar tagen hatte ich mir bei einem second-hand-büchershop 4 leerbücher für ein paar euro bestellt…ich werde mir jeden monat ein paar lehrbücher kaufen, damit ich jederzeit auch was zum nachschlagen habe.
– dadurch, dass sich zwei scripts auf meiner seite beißen, bin ich nun gezwungen mir die scriptsprache genauer anzusehen…was mich eigentlich gar nicht stört, denn ich möchte es ja lernen. fraglich ist nur, ob ich es schnallen werde, beide scripts in einem zusammenzufassen, denn im grunde handelt es sich um dasselbe script, allerdings seitenverkehrt. einmal wäre dies der scrollback befehl (dass man vom seitenende zum seitenanfang per onclick hochscrollen kann) und einmal der hide on scrollbefehl (dass das logo bei scrolldown verschwindet). na, es ist auf jeden fall der window.onscroll-befehl, der bei beiden scripts verwendet wird, weswegen ein script nicht funktioniert. nun muss ich gucken aus beiden scripts eines zu schreiben…klingt einfach, doch ich glaube, dass ich ewig dafür brauchen werde, weil ich ja noch keinen plan habe 😀 ..aber ich werde es versuchen und ich weiß jetzt schon, dass es SPAßIG werden wird^^ …ähnlich wie bei LUA-Script, wo ich unbedingt einen aufleuchtenden HUD haben wollte, der bei objektnähe aufleuchten sollte. boa ey, ich hatte es zum teil geschafft, mit einem fehler, dass der HUD trotzdem noch weiterleuchtete sobald das objekt gefunden war. er schaltete sich erst nach einer gewissen entfernung ab, was nicht so ganz meiner idee entsprach, doch ich war froh es zumindest annähernd geschafft zu haben.
hier das tutorial vom script, welches ich für den hud verwendete: ❤

mein HUD (bei 03:50 leuchtet er auf):

öhm, ich war urstolz auf meinen HUD! xD und auf meine animierten blutwände! als ich dann jedoch versucht hatte fahrende autos zu scripten, da kam ich langsam aber sicher an meine grenzen…damals war ich von morgens bis morgens am gamegurun oder von nachts bis nachts…monatelang…3 monate, pausenlos!

muhhihihi …und diese AUFREGUNG, als LEE BAMBER auf meine review geantwortet hatte, das war für mich ein grund zwei stunden lang hochglücklich durch die wohnung zu tanzen^^…äh, ich bin immer noch äußerst glücklich darüber! ich bewundere lee bamber, der is echt hammer! ich bewundere sowas!
deswegen guckte ich oft stundenlang tutorials an, weil da teils live programmiert wird, richtig toll!


– ich mutierte zwar zum zombie, aber es war ne tolle zeit, die ich nicht vergessen- und im hinterkästchen behalten werde, denn gameguru liegt nur auf eis, weil mein pc leider nicht mitmachen wollte/WILL. allerdings wird das dauern, denn vorerst möchte ich wichtigeres lernen und zwar javascript, weil das muss ich können!

jo, dann mal ab an die arbeit! 😀

Bild per Klick vergrößern: JS & CSS

Bin gerade dabei, eine einfache Foto-Gallery vom Kopf heraus zu schreiben.
In diesem Fall sind es verlinkte Images, die mittels hover, den border-radius langsam mit einer transition ändern und zusätzlich noch Farbe wechseln.

Momentan öffnen sich die Bilder im neuen Fenster (_blank), doch ich möchte nun versuchen mittels Javascript, die Bilder im Popup zu vergrößern, per onclick natürlich. Mal sehen, ob ich das hinkriege!

YES!!!!

Es hat geklappt!!! Wow, ich finds echt hammer 🙂

Javascript: onmouseover – Banner wechselt Hintergrundfarbe

Heute hab ich ein bisschen mit dem Javascript-Befehl „onmouseover“ herumprobiert. Mit jenem Befehl kann man beim Darüberfahren mit der Maus, diverse Änderungen vornehmen, ähnlich wie mit dem Hovereffekt. In meinem Fall hab ich ein Blockelement (div) mit einer ID erstellt und innerhalb dieses Blockelements ein weiteres Div mit einem transparenten background-image eingefügt. Den Onmouseover-Befehl fügte ich dann in einem Inlineelement (span) im Hauptmenü ein, von wo aus der entsprechende Effekt dann startet 🙂 Der Banner wechselt Farbe, indem man über die Themen bzw. Punkte im Hauptmenü fährt.

Hier ein kleiner Einblick:

Das Submenü ist zwar noch ein bisschen schief, aber darum ging es mir zunächst mal nicht, ich wollte lediglich mal gucken, ob der Farbwechsel auch mit onmouseover funktioniert und es hat geklappt 🙂



Javascript: onclick Menu – Banner wechselt Farbe!

So, nun hab ich ein bisschen geübt und konnte ein ScaleY-Menu erstellen, durch den sich bei onclick die Farbe des Banners ändert 🙂
Das ist cool, denn somit könnte man nicht nur die Farbe-, sondern auch das Bild per Mausklick ändern…muss nur noch gucken wie der Befehl lautet 😀
Hammer!



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!

Dienstag: ARRRRRRRRRR

😀

In Javascript konnte ich heute nicht wirklich punkten^^ Ich glaube es fiel mir sogar schwer einen normalen html/css Button ohne Hover hinzuschreiben 😀 muhihihihih
Konzentration gleich 0 oder so…

…Das hindert mich jedoch nicht daran, die nächsten Tage-Wochen zu üben. Ich glaube nicht, dass ich grobe Schwierigkeiten mit den Javascript-Übungen haben werde, da ich mit diesen Befehlen – besonders mit onmouseover – bereits zu tun hatte. Dies ist allerdings schon ein Jahr her…
Link: Javascript – erste Übung vor einem Jahr
Es freut mich sehr, dass ich demnächst ein paar Tage frei habe, denn somit hab ich Zeit- und die nötige Konzentration dafür, denn ohne diese geht bei mir diesbezüglich gar nichts.
Javascript hat mich immer schon interessiert, besonders deren Animationen, die ich vielleicht in mein Projekt mit einbringen könnte. Da gab es doch diese Augen (schwarzer Punkt auf weißem Kreis), die sich mit dem Mauszeiger mitbewegten… ich frag mich, ob diese Augen eine Image-Datei waren oder ob sie in anderer Form dargestellt wurden, denn wenn es sich dabei um ein Image handelt, dann müsste man auch eigene Bilder verwenden können…mal gucken…
Vorerst werde ich Übungen machen, damit ich überhaupt verstehe wie welcher Befehl funktioniert und wie man Js direkt im HTML verwenden kann. Jo, irgendwie freu ich mich darauf, weil …öhm… ich wills lernen!

Wochenende

Am Wochenende möchte ich an meiner Projektseite arbeiten und diese – erneut – komplett umbauen. Ich weiß nicht warum das so ist, aber ich schaffe es nicht ein Projekt zu beenden…ich fange immer wieder von vorn an, doch diesmal sollte es der schlussendliche Entwurf sein. Dasselbe gilt auch für meine Bilder, ich könnte keines meiner Bilder nennen, welches wirklich beendet ist…ich übermale sie immer wieder…bzw. bessere sie aus.
– Ich lerne laufend Neues hinzu, weswegen ich stetig an meiner Seite arbeiten- bzw. diese umbauen muss. Ideen habe ich sehr viele und verliere mich häufig an den Effekten, die ich einbauen möchte. Das Menu – welches ich für meine Seite verwendet habe – finde ich recht cool und bin im Grunde genommen auch ziemlich zufrieden damit, was die Optik, sowie auch den Mouseover-Effekt betrifft. Doch da es sich bei jener Navi um eine Javascript-Navi handelt, möchte ich sie komplett ändern und etwas Ähnliches mit einer simplen – aber schönen – CSS-Variante versuchen, da ich diese nun auch kenne. Bei der Optik, bzw. den Farben bin ich mir noch unsicher…ich möchte sie jedoch eher dunkel halten oder eine Hell- und Dunkel-Möglichkeit anbieten, denn wenn ich der Mittelpunkt dieser Seite sein soll, dann muss sie auch farblich auf mich abgestimmt sein.
– All dies, was ich in den letzten Unterrichtsstunden gelernt habe, öffnet so verdammt viele Experimentiermöglichkeiten, dass ich es kaum abwarten kann, daran zu arbeiten. Es gibt so viele, wirklich simple Befehle, die man locker in X unterschiedliche Fabrikationen umfunktionieren kann.
Nehmen wir meinen Sternenhimmel her, der lediglich aus Zeichen (Text) und Texteffekt besteht. Beim Ufo hingegen, handelt es sich um ein transparentes png, welches ebenfalls mit kleinen Animationen versehen wurde. Was ich sagen will ist, dass man mit einfachen, kurzen Befehlen sehr viel erreichen kann und je einfacher eine Seite aufgebaut ist, umso besser ist es. Deswegen möchte ich meine Projektseite neu beginnen, weil ich sie einfach aber effektreich gestalten- und auch komplett selbst aufbauen möchte, ohne groß zu kopieren.
Jo, leider ist es schon spät, deswegen werde ich mich, wohl oder übel, hinlegen müssen. Ich freue mich jedoch auf morgen 🙂

Javascript

Bin gerade wieder dabei mit Javascript anzufangen. Ich hatte ja schon mal damit begonnen, aber dadurch, dass ich über einen längeren Zeitraum hinweg aufgehört hatte zu lernen, muss ich nun wieder von vorn beginnen, weil ich mittlerweile alles vergessen habe 😀 … wobei das nicht schlimm ist, weil ich damals nur Übungen zu den Variablen und Arrays gemacht hatte:

Javascript Zusammenfassung

Ich war nicht weit gekommen, daher ist dies nicht wirklich schlimm^^
Doch da wir im März mit Javascript beginnen, möchte ich zumindest ein bisschen etwas davon können. Mal schauen wie weit ich komme^^

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