JavaScript

Einführung in JavaScript (JavaScript Tutorial)

Tutorial erstellt von Jatzia, letzte Änderung am 16.03.2008

Was ist JavaScript?


JavaScript ist wie der Name schon sagt eine Scriptsprache. Sie dient zur Erweiterung des HTML-Befehlssatzes und ist alleine nicht lauffähig. Daher muss sie grundsätzlich in HTML-Seiten eingebaut werden. Dies kann man mit professionellen Editoren (ähnlich den HTML-Editoren) oder auch einfach im Texteditor tun. Durch JavaScript ist es möglich objektorientierte Anwendungen in Internetseiten einzubauen, mathematische Formeln zu berechnen, Formulare zu verifizieren, Popups zu öffnen oder andere schöne Effekte aufzurufen. Allerdings sind es auch genau diese Möglichkeiten, die teilweise zu nervtötenden Effekten auf Internetseiten werden können. Daher bieten viele Browser die Möglichkeit an, JavaScript zu „deaktivieren“. Außerdem kann es passieren, dass verschiedene Browser den gleichen Quelltext anders interpretieren und es somit auch zu anderen Ergebnissen kommt. Aus diesen Gründen sollte man sich vorher immer gut überlegen, ob sich die Verwendung von JavaScript lohnt und wenn ja, seine Internetseiten mit möglichst vielen bzw. den gängigsten Browsern vorher testen!


Das Grundgerüst


In HTML gibt es einen Tag, der es ermöglicht verschiedene Scriptsprachen zu inkludieren: <script> </script>. Damit auch erkannt wird, welche Skriptsprache innerhalb der Tags verwendet wird, müssen wir diese näher definieren.

JavaScript kann in einer HTML-Datei an mehreren Stellen eingebunden werden. Wollen wir z.B. „unsichtbare“ Aktionen mit JavaScript ausführen, wie das Neuladen der Seite alle 5 Minuten etc., dann bauen wir die <script>-Tags üblicher Weise in den Kopf des HTML-Dokuments ein. Der Code um JavaScript in HTML einzubauen würde daher so aussehen:

Code:
<html>
<head>
<title>Titel der Internetseite</title>
<script language="JavaScript">
//Hier stehen später die JavaScript-Anweisungen
</script>
</head>
<body>
//Hier stehen dann die normalen HTML-Befehle
</body>
</html>


Will man stattdessen z.B. an einer bestimmten Stelle in der HTML-Datei einen Effekt einbauen, wie etwa eine animierte Schrift o.ä., dann sollte man den JavaScript-Teil auch an dieser Stelle in der Datei (innerhalb der Body-Tags) einfügen.


Extrahieren von JavaScript


Nun kommt es auch vor, dass man auf mehreren Internetseiten den gleichen JavaScript-Code verwenden möchte und die Anweisungen möglicher Weise auch noch recht umfangreich sind. Damit man nun den ganzen Quelltext nicht in dieser einzelnen Seite einbauen muss, gibt es die Möglichkeit die eigentlichen JavaScript Anweisungen in andere Dateien zu verlagern. Diese Dateien sind kann man genau so bearbeiten wie die HTML-Dateien, nur dass sie die Endung .js tragen. Der Code für eine derartige Verlinkung würde wie folgt aussehen:

Code:
<script language="JavaScript" src=“anweisung.js“>
</script>



Was ist, wenn JavaScript deaktiviert ist?


Haben wir uns nun einmal entschieden, auf unserer Seite JavaScript zu verwenden, so laufen wir natürlich auch Gefahr, dass manche unserer Besucher es deaktiviert haben und es daher zu fehlenden Seitenteilen oder gar gravierenden Fehlern kommen kann. Daher ist es zu empfehlen eine Alternativ-Angabe zu machen, die den User zumindest darauf hinweist, dass die Seite auf Grund des deaktivierten JavaScripts nicht vollständig angezeigt bzw. ausgeführt werden kann. Diese Angaben kommen in eigene Tags direkt unterhalb des Scripts.

Code:
<script language="JavaScript">
//Hier stehen später die JavaScript-Anweisungen
</script>
<noscript>
Sie haben JavaScript in ihrem Browser deaktiviert. Die Seite kann Ihnen daher leider nicht richtig angezeigt werden!
</noscript>


Der <noscript>-Tag wird nur ausgeführt, wenn JavaScript wirklich deaktiviert ist. Der enthaltene Text wir einfach auf dem Bildschirm auf der Internetseite ausgegeben.


So, ihr seid auch schon am Ende des Einführungstutorials. Ich hoffe, ich konnte euch die ersten Einblicke in JavaScript vermitteln.

Liebe Grüße
Tina


>> Allgemeine Fragen oder Probleme mit dem Tutorial? Hier gehts zum Forum!

Impressum / Datenschutzerklärung          © der-Webdesigner.net 2002 - 2011           top ▲