JavaScript für Einsteiger
Also, ich finde Java Script is die beste "Einsteiger-Programiersprache" da sie net so schwer is und man einzelne Sachen in andren Programiersprachen wiederfindet :)Also ersteinmal JavaScript ist NICHT daselbe wie Java:
JavaScript wurde von den allbekannten Firma "Netscape" entworfen und ist eine kleine, recht einfach zu lernende "Skriptsprache".
Und Java is eine ziemlich komplexe Programiersprache mit der man eigenständige Anwendungen programieren kann. Entwickelt wurde Sie von der Firma "Sun". Das wird halt bei den meisten Chats oder Online Spielen verwenden.
So genung geschwafelt, wer mehr drüber wissen will, soll gfälligst google benutzen ;)
Ajo, für die Scripts genügt ein Stinknormaler Text Editor (Start -> Ausführen -> notepad) falls nix andres da is.
Java Script wird genauso wie bei Html mit einem Anfangs-tag eingeleitet und mit einem End-tag beendet. Dazwischen kommt der Code:
<script language="JavaScript">
So dann kommt der schöne JavaScript Code und zum beenden
</script>
Denke is net so schwer, da is HTML ähnelt.
Unser erstes Script (ich weiß das es dazu schon ein Tut gibt aber ich dachte es is n leicher einstieg)
<html>
<head>
<title>Unser erstes Script</title>
<script language="JavaScrip">
alert ("Hallo Welt!");
</script>
</head>
<body bgcolor="white">
<h1>JavaScript is lustig!</h1>
</body>
</html>
Guut was habe ich jetz also gemacht? Ich habe in einem ganz normalem Html Quelltext einen Java Script befehl eingefügt. (Falls du dich jetz fragst was der html oder head schaß soll, dann lese zuerst das Tutorial in der "Html" Katergorie.)
Ich könnte den "JavaScript Tag" genausogut in den <body> bereich schreiben, irgndwie hat es sich aber eingebürgert das man es (zumindest bei einem solchen Script in den <head> bereich schreibt).
Also der JavaScript Code lautet: alert ("Text");. Guut was bewirkt das: Es popt ein Hinweis fenster mit den Text "Hallo Welt auf". Geile Sache was ?
Naja nicht ganz, den das Script hat nen ziemlichen Schönheitsfehler, was heißt: Das Script wird immer geladen wenn die Seite neu aufgerufen wird.
Dh würdest du ständig aktualisiern (F5) drücken, dann würde jedes mal der Text "Hallo Welt" aufpoppen!
Es wäre doch viel krasser wenn du auf ne Schaltfläche draufklickst und das ganze popt-auf.
Und da kommen wir auch schon zu den "Funktionen und Event-Handlern".
Event Handler sind eine tolle Sache aber um diese zu nutzen müssen, wir unser "alert" in eine Funktion umwandeln. Dabei wird dem "alert" nur n name zu gewiesen und kann damit vielfälltig (zb: Handler) eingesetzt werden.
<script language="JavaScript">
function hallo() {
alert("Hallo Welt!");
}
</script>
Was habe ich hier gemacht? Zuerst habe ich mit "function" die Funktion eingeleitet. "Hallo" ist dann einfach der Name der Funktion, der natürlich beliebig verändert werden kann.
Hmmm?? Was zum Teufel machen den die geschwungenen Klammer jetz da?? Ganz einfach: Diese Klammer werden immer dann eingesetzt wenn man Ausdrücke in einem Block zusammenfassen möchte. Diese Blöcke werden dann vom Browser dann "im Block" abgearbeitet.
Ja gut klingt vieleicht jetz net so klar, aber du wirst nach einigen Scripts draufkommen was ich meine.
Gut jetz haben wir also den "alert" in eine "function" umgewandelt. Jetz können wir mit den Event-Handlern fortfahren:
Tja was sind Event Handler eigentlich? Wie der Name schon sagt wird dabei auf ein Ereigniss gehandelt ;). Ereigniss wäre zum beispiel ein klick auf eine Schaltfläche oder ein Mousover über ein Bild.
Darauf folg dann eine Handlung wie zb.: ein Warnfenster popt auf ;)
Es gibt Massenhaft Handler ich werd die wichtigsten jetz hier mal nacheinander auflisten. Solche Hanlder fangen immer mit der Silbe "on" an zb.: "onLoad, onClick...."
OnClick - Funktionen starten durch einen Klick auf eine Schaltfläche
<form>
<input type="button" value="Hier klicken!" onClick="hallo()"/>
</form>
So da mit dem <form> Tag generieren wir lediglich eine Html Schaltfläche. Das wesentliche ist der "onClick" Befehl. Damit weiß sage ich einfach den Pc das, wenn wer auf die Schaltfläche klick die Funktion "hallo()" ausgeführt werden soll.
Und was fürn Zufall die haben wir ja schon oben definiert.
Falls das net so verständlich is schreib ich den kompletten Quelltext mal her:
<html>
<head>
<title>Was geht Leude!</title>
<script language="JavaScript">
function hallo() {
alert("Hallo Welt");
}
</script>
</head>
<body>
<form>
<input type="button" value="(F)Klick mich" onClick="hallo()"/>
</form>
</body>
</html>
Nach dem Prinzip funktionieren alle anren Handler auch:
OnMouseover - Funktion starten durch Überstreiche
Jo also wie schon in der Überschrift das Event wird durch onMouseover="Funktionsname()" in den jeweiligen Tag eingebunden.
Beispiel für ein Bild:
<img src=bild.gif onMouseover="Funktionsname"/>
Vorausetzung ist jedoch das eben vorher die Funktion festgelegt wurde.
OnLoad - Funktion starten bei Laden eines Dokuments
Die Funktion wird einfach in den Body Tag eingefügt:
<body onLoad="Funktionsname()">
---- oder falls du die Funktion beim schließen der Seite haben willst -----
<body onUnload="Funktionsname()">
Noch am Rande habe ich letzns noch was rausgefunden, und zwar kann man eine Funktion auch über nen Hyperlinken aufrufen:
Klickst du hier<a href="javascript:funktionsname()">hier</a>!
Nachwort: Mir is Vollkommen bewusst das, es dieses Tutorial schon gibt. Ich habe es nur für nen Einstieg in die Welt des JavaScripts benutzt und deswegen jedes einzelne genau erklärt.
Also wems Interessiert JavaScript zu lernen, würd ich raten alles aus diesem Tutorial durchzumachen und auszuprobieren. Ich hoffe es is verständlich.
Falls es Fragen gibt bitte an mich oder andre Leute im Forum richten ;)
Bis zum nächsten Teil des JavaScript Tutorials
mfg
Matthias aka -xXx-
Kommentare