Einführung Javascript

Was ist das?

Im Gegen­satz zu HTML ist Java­script (Java­Script, JS) eine rich­ti­ge Pro­gram­mier­spra­che, mit der man Web­sei­ten inter­ak­tiv gestal­ten kann. So las­sen sich etwa Ein­ga­ben in HTML-For­mu­la­ren über­prü­fen, Dia­log­fens­ter mit Nach­rich­ten anzei­gen, die Rech­te von soge­nann­ten Coo­kies ver­wal­ten usw. Des Wei­te­ren ist es mög­lich, Spie­le in Java­script zu pro­gram­mie­ren.

Hallo Welt

Wenn man eine Pro­gram­mier­spra­che erlebt, ist es üblich, sich zunächst ein Hal­lo-Welt-Bei­spiel anzu­schau­en.

Zunächst ein­mal stel­len wir fest, dass es sich um eine ganz nor­ma­le HTML-Datei mit der typi­schen Struk­tu­rie­rung han­delt. Hier haben wir im Body-Bereich zusätz­lich ein neu­es Tag <script>. Die­ses teilt dem Brow­ser mit, dass Java­script-Code inter­pre­tiert wer­den muss. In unse­rem Bei­spiel ist es die Aus­ga­be eines kur­zen Tex­tes: Hal­lo Welt!

Wir kön­nen auch alle mög­li­chen Tags anfü­gen, um unse­re Text­aus­ga­be zu for­ma­tie­ren. So kön­nen wir in der Zei­le 8 auch schrei­ben document.write(“document.write(“Hallo Welt!”); und Hal­lo Welt! wird als Über­schrift 1. Ord­nung aus­ge­ge­ben.

Variablen und Datentypen

Varia­blen wer­den in Java­script mit let oder, nach alter Kon­ven­ti­on, mit var defi­niert:

Der Varia­ble begru­es­sung wur­de hier der Wert ‘Hal­lo’ zuge­wie­sen. Jetzt kann der Wert der Varia­ble mit document.write aus­ge­ge­ben wer­den. Wir kön­nen aber natür­lich auch spä­ter­hin einen ande­ren Wert zuwei­sen, wie hier das förm­li­che­re ‘Guten Tag’ und das dann wie­der­um auch aus­ge­ben.

In Java­script kön­nen die Varia­blen drei Typen anneh­men, näm­lich String, Num­ber und Boolean. Strings, also Varia­blen die­ses Daten­typs, sind Zei­chen­ket­ten, die von Gän­se­füß­chen oder Hoch­kom­mas ein­ge­schlos­sen wer­den, also etwa let s=”Hund” oder let s=’Hund’. Varia­blen des Daten­typs Num­ber sind Zah­len, also z.B. let x=3.14 oder let x=300. Bool­sche Varia­blen neh­men ent­we­der den Wert true (1) oder fal­se (0) anneh­men.

Mit dem +-Zei­chen las­sen sich Strings mit Strings und ande­ren Daten­ty­pen kom­bi­nie­ren, wobei immer wie­der ein String ent­steht.

Wei­ter­hin gibt es noch die Daten­ty­pen Array und Object. In einem Array kön­nen ver­schie­de­ne Wer­te gespei­chert wer­den, z.B. alle Spiel­ergeb­nis­se oder alle Noten, was zuge­ge­be­ner­ma­ßen manch­mal nicht so weit aus­ein­an­der liegt. Ein Objekt kann in Java­script so ziem­lich alles sein. Auf Array und Objek­te wer­den wir spä­ter noch zurück­kom­men.

Rechenoperationen

Über­ra­schen­der­wei­se kön­nen Zah­len mit dem Plus­zei­chen addiert wer­den:

Mit dem Minus­zei­chen wird ana­log dazu sub­tra­hiert:

Mul­ti­pli­ka­tio­nen und Divi­si­on las­sen sich mit * bzw. / vor­neh­men:

Math ist ein Stan­dard­ob­jekt von Java­script, das ver­schie­de­ne mathe­ma­ti­sche Funk­tio­nen ent­hält. Objek­te kön­nen mit der Punkt­no­ta­ti­on ange­spro­chen wer­den, so gibt Math.PI die Zahl π zurück. Mit Math kön­nen natür­lich auch Poten­zen und Wur­zeln berech­net wer­den.

Rund und zufällig

Bei vie­len Anwen­dun­gen, z.B. bei Spie­len, spie­len Zufalls­zah­len eine gro­ße Rol­le. Hier­mit eng ver­bun­den sind ver­schie­de­ne Mög­lich­kei­ten des Run­dens und ande­rer Zah­len­ma­ni­pu­la­tio­nen in Java­script. Las­sen Sie uns an einem vir­tu­el­lem Wür­fel bas­teln und wir wol­len drei­mal wür­feln.

Betrach­ten wir zunächst ein­mal die Funk­ti­on Math.round(), mit der Zufalls­zah­len erzeigt wer­den:

Jedes Mal, wenn die Funk­ti­on auf­ge­ru­fen wird erhal­te ich einen ande­ren zufäl­li­gen Wert. Aller­dings sind die Wer­te alle klei­ner 1. Beim Wür­feln möch­te ich mich aber auf die gan­zen Zah­len 1 bis 6 beschrän­ken.

Daher mul­ti­pli­zie­re ich die Aus­ga­be mit dem Fak­tor 6.

Im fol­gen­den Schritt run­de ich mit Math.floor die Zufalls­wer­te ab und addie­re die Zahl 1, da die kleins­te Zahl nicht 0 sein darf:

Da ich immer wie­der wür­feln möch­te, ist es nicht sinn­voll, wenn ich jedes Mal eine lan­ge Zei­le auf­schrei­ben muss. Daher kann ich das Gan­ze auch in einer Funk­ti­on wuer­fel() unter­brin­gen, die mir mit return mei­nen gewür­fel­ten Wert zurück­gibt.

Wei­te­re Run­dungs­mög­lich­kei­ten stel­len Math.round, Math.trunc und Math.ceil dar. Der ganz­zah­li­ge Wert wird mit Math.trunc zurück­ge­ge­ben. Math.round run­det zur nächs­ten gan­zen Zahl. Math.ceil run­det zur nächs­ten gan­zen Zahl auf, also 8.2 zu 9 und -7.1 zu -7.

Arrays

In Array las­sen sich Wer­te vom glei­chen Daten­typ abspei­chern. Im fol­gen­den Bei­spiel sind das einer­seits die Vor­na­men der ers­ten vier Prä­si­den­ten der USA (ich woll­te ein­fach nicht hin­ten begin­nen) und ande­rer­seits die Jah­re des jewei­li­gen Amts­an­tritts.

Die Wer­te im Array kön­nen jetzt ein­zeln ange­spro­chen wer­den, wobei zu beach­ten ist, dass wir nicht bei 1 son­dern bei 0 begin­nen. Dem­nach ist vornamen[0]=George und jahre[2]=1801. Die Anzahl der Ele­men­te in einem Array kann ich über die Eigen­schaft length ermit­teln, so ist vornamen.length=4.

Mit einer soge­nann­ten for-Schlei­fe kann ich ein Array durch­lau­fen, wobei eine bestimm­te Syn­tax zu beach­ten ist. Hin­ter das Wort for kommt eine run­de Klam­mer mit drei Aus­drü­cken, die durch Semi­ko­lons getrennt sind.

Der ers­te Aus­druck ist eine Zähl­va­ria­ble, hier ist das i, für die ein Anfangs­wert defi­niert wird. Die­ser ist zumeist 0. Der zwei­te Aus­druck stellt die Bedin­gung dar, bis zu der eine Schlei­fe durch­lau­fen wird. In unse­rem Bei­spiel ist das die Län­ge des Arrays vor­na­men. Der drit­te Aus­druck ist die soge­nann­te Inkre­ment-Anwei­sung. Hier wird fest­ge­legt, um wie­viel die Zähl­va­ria­ble bei jedem Durch­lauf hoch­ge­zählt wer­den soll. Bei uns steht i++, also wird immer eine 1 dazu addiert.

Inhalte verändern

Mit Java­script lässt sich der Inhalt einer Web­sei­te ver­än­dert, ohne dass die­se neu gela­den wer­den muss. Hier­zu müs­sen ledig­lich Ele­men­te vor­han­den sein, die ein­deu­tig ange­spro­chen wer­den kön­nen. Das erfolgt dann mit document.getElementById.

Ergeb­nis

Hallo

hal­lo

Formulare und Javascript

Auf HTML-Sei­ten ist es mög­lich, For­mu­la­re zu plat­zie­ren. Die­se die­nen zur Ein­ga­be von Daten, z.B. in einem Kon­takt­for­mu­lar, und zum Aus­lö­sen von Aktio­nen, z.B. dem Ver­schi­cken eben die­ser Kon­takt­da­ten. Ein For­mu­lar wird mit dem Tag <form> defi­niert.

Einfache Ausgabe

Im For­mu­lar gibt es ein Input­feld, das ein­deu­tig über die id=”name” ange­spro­chen wer­den kann. Wei­ter­hin gibt es einen But­ton, der mit Aus­ga­be beschrif­tet ist. Drückt man die­sen But­ton, wird eine Akti­on aus­ge­löst, hier wird die Java­script-Funk­ti­on aus­ga­be() auf­ge­ru­fen. In die­ser Funk­ti­on wird zunächst der Wert des Fel­des über die Eigen­schaft value ermit­telt und schließ­lich mit alert aus­ge­ge­ben, d.h. es erscheint ein klei­nes Mel­dungs­fens­ter.

Würfel mit Button

Wir wol­len unser Wür­fel-Pro­gramm neu auf­grei­fen und den Wür­fel mit einem But­ton star­ten. Dazu defi­nie­ren wir ein Aus­ga­be­feld <out­put>, das wir mit­tels CSS auf­hüb­schen. Wir ver­än­dern die Schrift­grö­ße auf 400 Pixel und die Schrift­far­be auf rot, also doch sehr dezent. Die­ses Aus­ga­be­feld kön­nen wir über die id=”output” anspre­chen.

Des Wei­te­ren haben wir einen But­ton, der mit Wür­feln beschrif­tet ist. Wenn die­ser But­ton ange­klickt wird, also das Ereig­nis onClick aus­ge­löst wird, so erfolgt der Auf­ruf der Funk­ti­on wuer­fel(). Inner­halb der Funk­ti­on wird zunächst ein­mal wie­der die Zufalls­zahl im Bereich 1…6 erzeugt. Anschlie­ßend erfolgt die Aus­ga­be über das Set­zen des Attri­buts innerHTML des Aus­ga­be­felds.

Die Zahl wird hier­bei als Son­der­zei­chen aus­ge­ge­ben, näm­lich tat­säch­lich in der Form eines Wür­fels. Hier­bei hat der Wür­fel mit einem Auge das Uni­code-Son­der­zei­chen U+9856, was als soge­nann­te HTML-Enti­tät als &#9856; aus­ge­drückt wird. Wir set­zen also die HTML-Enti­tä­ten zusam­men, indem wir die gewür­fel­te Zahl zu 9855 addie­ren.

Quadratische Funktion

Wir wol­len in einem For­mu­lar die Funk­ti­ons­wer­te einer qua­dra­ti­schen Funk­ti­on $y=a x^2 + b x + c$ berech­nen. Hier­zu benö­ti­gen wir Input die Fak­to­ren a, b und c sowie die Gren­zen, in denen die Berech­nung erfol­gen soll. Das wird mit ganz nor­ma­len <input>-Feldern vom Typ text rea­li­siert, und die Fel­der wer­den mit IDs ver­se­hen, sodass man die­se über Java­script bequem anspre­chen kann.

Die eigent­li­che Berech­nung wird über ein onClick-Ereig­nis eines But­tons gestar­tet, den wir mit Berech­nen beschrif­ten.

Für die Aus­ga­be haben wir ein <text­area> vor­ge­se­hen. Das ist nichts ande­res als ein Text­feld, wel­ches sich über meh­re­re Zei­len erstreckt. Die Anzahl der Zei­len kann über das Attri­but Rowe ein­ge­stellt wer­den. Bei uns ist rows=”20″, also sind stan­dard­mä­ßig 20 Zei­len sicht­bar. Über cols kann die Anzahl der Spal­ten beein­flusst wer­den. Im Brow­ser lässt sich die Dimen­si­on des Text­be­reichs mit der Maus anpas­sen.

In der Funk­ti­on berech­nen wer­den zunächst die ein­ge­ge­be­nen Wer­te mit document.getElementById aus­ge­le­sen. Mit der Funk­ti­on par­s­e­Float wird sicher­ge­stellt, dass die Wer­te auch tat­säch­lich als Zah­len inter­pre­tiert wer­den.

Die Funk­ti­ons­wer­te wer­den in einer for-Schlei­fe berech­net. Oben haben wir bereits gelernt, dass eine der­ar­ti­ge Schlei­fe über drei Aus­drü­cke defi­niert wird. Hier beginnt die Schlei­fe bei der unte­ren Gren­ze, geht bis ein­schließ­lich der obe­ren Gren­ze und der Zäh­ler i wird immer um 1 her­auf­ge­setzt.

Eine Varia­ble vom Typ String wird inner­halb der for-Schlei­fe suk­zes­si­ve erwei­tert, näm­lich jeweils um den Wert von x gefolgt von einem Tabu­la­tor \t, dem berech­ne­ten Funk­ti­ons­wert und einem Zei­len­en­de­zei­chen \n.