Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
1x bewertet
Wer das Tutorial Grundlagen gelesen hat, kennt bereits eine Funktion.
Meine schicke Hallo Funktion :).
Witzigerweise erkennt man Funktionen in JS sofort, na mal raten wodran? *roll*
Jah, an dem function.
Der Sinn von Funktionen ist ja eigentlich total klar, oder?
Wir können Funktionen überall in der Datei, beliebig oft aufrufen, okay kommt natürlich auf die Funktion drauf an :), aber meien Hallo Funktion ist beliebig oft verwendbar.
Die Syntax
Wichtig hierbei sind die geschweiften Klammern {}. Vergisst man eine, funktioniert das Script nicht mehr.
Am besten man schreibt gleich am Anfang 2 geschweifte Klammern und setzt den Inhalt dann dazwischen.
Der Name der Funktion, darf nicht mit einer Zahl beginnen oder nur aus Zahlen bestehen.
Für HTMller sollte dieses etwas total neues sein. Man könnte aber, soetwas von CSS ableiten.
Ein einfaches CSS Beispiel:
Wir nehmen eine externe CSS Datei
Dann einen einfachen HTML Code:
Stellen wir uns vor, .bla ist keine Klasse sondern eine Funktion.
Diese "Funktion" sorgt dann das der Text pink wird.
In JavaScript würde das ganze so aussehen:
Natürlich macht das keinen Sinn, so etwas mit JS zumachen (in der Dimension hier).
Die beiden () nach dem Funktionsnamen haben auch ihren Sinn.
Man dadurch Variabeln einfügen und je nach Aufruf der Funktion verändern.
Beispiel mit dem Farbwechsel:
Wenn man mit der Maus über Text 1 fährt, wird die Funktion farbe aufgerufen.
Die Funktion farbe erwartet Werte für element und color.
Diese Werte werden hier
Dabei ist die Reihenfolge wichtig.
Die angegebenen Werte werden dann eine Zeile dadrunter ersetzt.
Statt
steht dann da
Eigentlich total logisch :)
Meine schicke Hallo Funktion :).
function hallo(){
document.write("Hello World");
}
Witzigerweise erkennt man Funktionen in JS sofort, na mal raten wodran? *roll*
Jah, an dem function.
Der Sinn von Funktionen ist ja eigentlich total klar, oder?
Wir können Funktionen überall in der Datei, beliebig oft aufrufen, okay kommt natürlich auf die Funktion drauf an :), aber meien Hallo Funktion ist beliebig oft verwendbar.
Die Syntax
function name(){
..
}
Wichtig hierbei sind die geschweiften Klammern {}. Vergisst man eine, funktioniert das Script nicht mehr.
Am besten man schreibt gleich am Anfang 2 geschweifte Klammern und setzt den Inhalt dann dazwischen.
Der Name der Funktion, darf nicht mit einer Zahl beginnen oder nur aus Zahlen bestehen.
Für HTMller sollte dieses etwas total neues sein. Man könnte aber, soetwas von CSS ableiten.
Ein einfaches CSS Beispiel:
Wir nehmen eine externe CSS Datei
a.bla:hover {
color:pink;
}
Dann einen einfachen HTML Code:
<a class="bla" href="">Text</a>
Stellen wir uns vor, .bla ist keine Klasse sondern eine Funktion.
Diese "Funktion" sorgt dann das der Text pink wird.
In JavaScript würde das ganze so aussehen:
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function farbe() {
document.getElementById('bla').style.color = 'pink';
}
//-->
</script>
</head>
<body>
<p id="bla" onMouseOver="farbe()">Text</p>
</body>
</html>
Natürlich macht das keinen Sinn, so etwas mit JS zumachen (in der Dimension hier).
Die beiden () nach dem Funktionsnamen haben auch ihren Sinn.
Man dadurch Variabeln einfügen und je nach Aufruf der Funktion verändern.
Beispiel mit dem Farbwechsel:
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
function farbe(element, color) {
document.getElementById(element).style.color = color;
}
//-->
</script>
</head>
<body>
<p id="1" onMouseOver="farbe('1','pink')">Text 1</p>
<p id="2" onMouseOver="farbe('2','#FFCC00')">Text 2</p>
<p id="3" onMouseOver="farbe('3','blue')">Text 3</p>
</body>
</html>
Wenn man mit der Maus über Text 1 fährt, wird die Funktion farbe aufgerufen.
Die Funktion farbe erwartet Werte für element und color.
Diese Werte werden hier
onMouseOver="farbe('1','pink')" zugewiesen.
Dabei ist die Reihenfolge wichtig.
Die angegebenen Werte werden dann eine Zeile dadrunter ersetzt.
Statt
document.getElementById(element).style.color = color;
steht dann da
document.getElementById('1').style.color = 'pink';
Eigentlich total logisch :)