Abonniere die Beiträge von PinkPearl Info

EMail Adresse hinzufügen

Teile dich mit!

Verwende den Hashtag #ppiupdate in den Sozialen Medien (wie zum Beispiel Twitter), um Besucher auf deine Updates aufmerksam zu machen.
Mehr Infos...

Donnerstag, 8. Mai 2014

Javascript - Was ist das?

lulu
Im Zusammenhang mit Websiten und Coding hört man sehr oft den Begriff "Javascript". Immer noch kopieren viele Javascript Code ohne zu wissen was Javascript eigentlich ist und wie es funktioniert, was sehr schade ist.

Javascript ist, wie der Name schon vermuten lässt, eine Scriptsprache, mit der man dynamische Websiten Inhalte erstellen kann. Zum Beispiel ist der "Schnee" der manchmal im Winter auf verschiedenen Homepages fällt in Javascript geschrieben.

Sehr oft wird Javascript mit Java verwechselt. Zwar sind beides Programmiersprachen, aber sonst haben sie nicht all zuviel gemeinsam. Java ist eine objektorientierte Sprache, mit der man Computer Programme erstellen kann. Mit Javascript ist das nicht möglich. Javascript kann nur in einem Browser wie zum Beispiel Mozilla Firefox verwendet werden.

Javascript hat eine eigene Syntax und eigene Funktionen. Mit HTML kann es nicht verglichen werden, da es um einiges Komplexer ist.

Um Javascript zu "schreiben" ist kein spezieller Editor notwendig und es muss auch nichts nachträglich installiert werden. Die Javascript Dateien haben immer die Endung ".js". Aber natürlich muss Javascript nicht zwingend in einer eigenen Datei sein. Kleinere Scripte kann man auch direkt in den HTML Code integrieren.
Damit aber der Browser erkennt, dass nun kein HTML Code sondern Javascript Code kommt, muss man das Script folgendermaßen einleiten:

<script type="text/javascript">
</script>
Wichtig ist, dass es in Javascript sogenannte "Funktionen" gibt. Diese Funktionen sind eine Art Kapsel, in der Code rein geschrieben wird. Zum Beispiel können wir eine Funktion erstellen, die uns "Hallo" sagt.
function hallo(){
    document.write("Hello World");
}
Das "function" sagt dem Browser: das ist eine Funktion. "hallo" ist in diesem Fall der Name dieser Funktion, aber ihr könnt euch auch einfach jeden x-beliebigen Namen ausdenken. Die beiden Klammern () müssen hinter jedem Funktionsnamen sein. Aber dazu kommen wir später.
Das document.write() ist eine Funktion, die Javascript schon von Haus aus kann. Sie sagt: schreib mir das, was in der Klammer steht, auf den Bildschirm. Und da wir der Welt Hallo sagen wollen, schreiben wir "Hello World" auf die Website. Warum man Funktionen erstellt? Der Code innerhalb einer Funktion kann somit beliebig oft an einer Stelle aufgerufen werden, ohne jedes Mal den ganzen Code zu kopieren.
Wir müssen also nun statt "document.write("Hello World");" im Code selbst jedes mal nur noch hallo(); tippen. Wichtig sind auch die beiden geschleiften Klammern {}, denn sie zeigen den Anfang und das Ende einer Funktion. Das kennen wir auch zum Beispiel schon vom CSS Code.  Nur das es dort so aussieht:

body{...}


Wenn wir den Code so weit haben, macht er noch überhaupt nichts. Erst müssen wir ihn irgendwo in unserem HTML Code aufrufen. Und das funktioniert dann so:
<script language="JavaScript">
     hallo();
</script>

Nun steht dort, wo wir das hallo() aufrufen "Hello World". Insgesamt würde unser Code übrigens dann so aussehen:

<html>
  <head>
     <title></title>
       <script type="text/javascript">
               function hallo() {
                 document.write("Hello World");
              } 

       </script>
   </head>
   <body>
        <script language="JavaScript">
           hallo(); 
        </script>
  </body>
</html>
Innerhalb der Klammern () einer Funktion können wir nun noch verschiedene Parameter mitgeben. Zum Beispiel wenn wir nicht die Welt grüßen wollen, sondern eine bestimmte Person. Wir ändern also unser Javascript folgendermaßen ab:

 <script type="text/javascript">
               function hallo(name) {
                 document.write("Hello " + name);
              } 

       </script>
Ihr seht, innerhalb der Klammer steht nun "name". Ihr könnt diesen Paramter benennen wie ihr Lust habt. Er kann auch "person" oder "holla" heißen :) Grad egal. In diesem Parameter steht nachher das drin, was wir übergeben. Wichtig ist, dass innerhalb der Funktion der Parameter gleich heißen muss. Heißt, wenn wie ihn hier ausgeben:  document.write("Hello " + name); muss er gleich heißen wie das, was in der Klammer steht. Logisch oder?

Wenn wir nun die Funktion im Quelltext aufrufen wollen, können wir ihr nun auch einen Namen übergeben.

<script language="JavaScript">
           hallo("Franzi"); 
 </script>
Nun wird zum Beispiel statt "Hello World" einfach "Hello Franzi" ausgegeben.
Das ganze könnte zum Beispiel dann so aussehen:

<html>
  <head>
     <title></title>
       <script type="text/javascript">
               function hallo(name) {
                 document.write("Hello " + name) ;
              } 
       </script>
   </head>
   <body>
Wir sagen:
        <script language="JavaScript">
           hallo("Franzi"); 
        </script><br/>
        Wir könnten aber auch sagen:
        <script language="JavaScript">
           hallo("World"); 
        </script><br/>
        oder aber
        <script language="JavaScript">
           hallo("Germany");
        </script><br/>
  </body>
</html>

Das Beispiel gibt es auch hier zum Downloaden (rechtsklick: Link speichern unter).

Das war nun einfach nur ein kleiner Einblick in Javascript :) Habt ihr Interesse an mehr?
Bei Fragen könnt ihr mir gerne einen Kommentar hinterlassen oder mir eine Mail schicken.

1 Kommentare:

  1. Ich würde wirklich gerne mehr sehen! :D Ich kenn mich nämlich mit Javascript gar nicht aus^^
    Was mich interessieren würde wäre wie man so Klapptexte integrieren kann. Wie in Forums diese Spoiler. Vermutlich ist es ziemlich einfach aber irgendwie finde ich nichts was wirklich hilft xD und du kannst das immer so gut erklären c:
    wäre toll wenn du sowas in der art mal machen würdest :3 lg~

    AntwortenLöschen

Coprights @ 2016, Blogger Templates Designed By Templateism | Distributed By Gooyaabi Templates