1 / 34

Arbeiten mit Javascript

Arbeiten mit Javascript. Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005. Ü bersicht. Allgemeines Entwicklungsgeschichte Funktionen Übungsbeispiele. J avascript...was ist das genau?. Script-Sprache zur Verwendung innerhalb von HTML-Dokumenten

chaela
Download Presentation

Arbeiten mit Javascript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Arbeiten mit Javascript Eine einführende Vortragsübung Referentin: Christin Püschel 29. Juni 2005

  2. Übersicht • Allgemeines • Entwicklungsgeschichte • Funktionen • Übungsbeispiele

  3. Javascript...was ist das genau? • Script-Sprache zur Verwendung innerhalb von HTML-Dokumenten • Skriptsprache = Programmiersprache, die nicht direkt vom Prozessor ausgeführt wird, sondern von einem anderen Programm „interpretiert“ wird Interpreter (Browser) • JavaScript zur Gestaltung interessanter, interaktiver Seiten

  4. Javascript...was ist das genau? • kompakte überschaubare Sprache • Voraussetzung für Erstellung: einfacher Text-Editor und ein JavaScript-fähiger Browser • Direkte Weitergabe des Quellkodes ohne Umwandlung möglich

  5. Geschichte • von Netscape zunächst unter dem Code-Namen mocha, dann unter dem Namen Live-Script entwickelt • Orientierung an Programmiersprache Java von Sun • Nach Anerkennung als "legitimer" Ableger von Java folgte entgültige Namenswahl: JavaScript

  6. Geschichte • Mit Netscape 4.0 folgte JavaScript Version 1.2 • Auf Basis von JavaScript 1.0 hat Microsoft ebenfalls einen Interpreter in den Internet Explorer integriert  JScript • Sprachumfänge sind nicht vollkommen deckungsgleich

  7. Funktionsbeispiele • die Überprüfung von Bedingungen (if ... else) • das Abarbeiten von Schleifen (for ... while ...) • Durchführung von Berechnungen • Überprüfung von Formularen vor dem Abschicken • dynamisches Ändern von Farben • dynamisches Austauschen von eingebundenen Bildern

  8. Einbindung von Javascripts a) Entweder... wird der Quellcode direkt in die Datei eingebettet, in der sich auch der HTML-Code befindet b) Oder... der Quellcode wird in eine eigene Datei verlagert, auf welche von der Webseite verwiesen wird Zur Unterscheidung von Programmskript und Text wird folgendes Element eingefügt:

  9. a)Einfache Modellform <script> ... hier steht das JavaScript-Programm ...</script> beziehungsweise <script type="text/javascript"></script>

  10. Musterwebseite • <html><head> <script type="text/javascript"></script></head> <body> </body> </html>

  11. Position des Scripts innerhalb des html-Körpers • Das Element darf (fast) überall in einer Webseite enthalten sein • Aber: es ist sinnvoll, script im Element head unterzubringen • Außerdem sagt der Name des Elements noch gar nichts darüber aus, um welche Programmiersprache es sich bei dem Inhalt handelt

  12. Position des Scripts innerhalb des html-Körpers • daher braucht der Browser noch den Hinweis, welche Art von Inhalt er in script vorfindet • Hier die Unterscheidung zweier Attribute, language und type. • Ersteres wurde von Netscape eingeführt, das zweite ist eine Vorgabe des HTML-Standards, die in der Praxis noch nicht relevant ist, die man aber schon jetzt einhalten kann.

  13. b) Einbettung in eine eigene Datei • JavaScript wird hier in Dateien mit der Endung .js gespeichert • Um zum Beispiel auf eine Datei library.js zu verweisen, muss folgender Code in den Kopfbereich der Webseite gestellt werden <script type="text/javascript" src="library.js"> </script> Beispiel.js im Übungsskript

  14. Idealform der Einbettung <html> <head> <title>... der Titel des Dokuments ...</title> <script language="JavaScript“ type="text/javascript"> ... hier steht das JavaScript-Programm ... </script> </head> <body> ... hier steht die HTML-Seite ... </body> </html>

  15. Idealform der Einbettung • Die Position von script im Kopf der Seite bietet sich an, um dort Funktionen, Variablen und weitere Datenstrukturen zu definieren, die zu einem späteren Zeitpunkt verwendet werden • Um auf Ereignisse (Cursorbewegung) reagieren zu können, wurden mit JavaScript besondere Attribute für einige HTML-Elemente definiert, die so genannten Event-Handler.

  16. Beispiele für Events • onClick Ein Objekt wird angeklickt • onFocus Objekt wird aktiviert • onLoad Nach Laden eines Objektes • onMouseOut Objekt wird von Maus verlassen • onMouseOver Objekt wird mit der Maus überfahren • onSelect Text wird markiert

  17. Zusammenfassung Javascript- Anweisungen stehen entweder im • Element <script>...</script> Oder in besonderen Attributen, den • Event-Handlern

  18. Aufgabe 1 Kopiert den ersten und zweiten Quellcode aus der Word-Datei Script1 in Euren Editor und aktualisiert anschließend die Browseransicht!

  19. Einbettung der Scripts in Kommentare • Problem: was machen Browser mit JavaScript-Programmen, wenn sie diese nicht lesen können? • Wenn der Web-Browser neuer ist, wird er das Element script kennen und den Inhalt einfach übergehen) • Eventuell kommt das Programm aber auf die Idee, den Inhalt und die Anweisungen anzuzeigen • Um das zu verhindern, muss der Inhalt von script in HTML-Kommentare eingebettet werden:

  20. Einbettung der Scripts in Kommentare <script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken ... hier steht das JavaScript-Programm ... // Ende: Inhalt verstecken --> </script> Erklärungen <!– und --> alles hierzwischen ist für alte Browser unsichtbar //hiermit wird ein JavaScript-Kommentar eingeleitet

  21. Einbettung der Scripts in Kommentare • Will man zusätzlich dem User eine Mitteilung machen, dass er mit einem anderem Browser eine JavaScript-Darstellung erhalten hätte, verwendet man das Element „noscript“ • Der Inhalt wird nur bei ausgeschalteten Javascript angezeigt

  22. Übung 2 Fügt bitte den Skript 3 in den Editor und aktualisiert den Browser

  23. Verwendung des Attributes „language“ • Es gibt mittlerweile von JavaScript mehrere Versionen • der Browser muss erkennen können, um welche Version es sich handelt • wird eine andere Version als 1.0. eingesetzt, sollte dies mit dem Attribut language angezeigt werden:

  24. Verwendung des Attributes „language“ • <script language="JavaScript1.1"> <!-- JavaScript 1.1 --> • <script language="JavaScript1.2"> <!-- JavaScript 1.2 -->

  25. Variablen • Variablen sind Platzhalter für bestimmte, nicht festgelegte Werte • können in JavaScript ohne vorherige Bekanntmachung benutzt werden. Für eine bessere Lesbarkeiteines Programms empfiehlt es sich jedoch, Variablen • zu Beginn des Programms oder script-Elements zu deklarieren • mit aussagekräftigen Namen zu versehen und • mit einem Initialwert zu definieren. • Hier einige Variablendefinitionen:

  26. Variablendefinitionen • var kontonummer = 0; • var kontoinhaber = ""; • var kontostand = 0.0;

  27. Variablen • es können auch "richtige" Werte eingesetzt werden: • var iKontonummer = 0; • var sKontoinhaber = ""; • var fKontostand = 0.0; i für eine Ganzzahl (Integer) s für eine Zeichenkette (String) f für eine Fließkommazahl (float)  nur eine Konvention

  28. Variablen • Durch das „ = “-Zeichen wird der Ausdruck rechts vom Gleichzeichen ausgewertet und dem links stehenden Ausdruck zugeordnet

  29. Programmsteuerung: If-then-else if (kontostand < 0) { document.writeln("Du bist pleite :-("); } else { if (kontostand == 0) { document.writeln("Du hast kein Geld :-|"); } else { document.writeln("Du bist reich :-)"); } }

  30. Programmsteuerung: For-schleife • Anweisungsfolge für eine bestimmte Anzahl an Durchläufen wiederholt • Zum Beispiel var summe = 0; for (var i=1 ; i<=10 ; i=i+1) { summe = summe + 1; } document.writeln("Ergebnis ist: ",summe);

  31. Programmsteuerung: For-schleife • Hier werden die Zahlen von 1 bis 10 aufaddiert und das Ergebnis in die Variable summe geschrieben. Die Zählvariable i beginnt bei 1 (i=1), läuft solange i kleiner oder gleich 10 ist (i<=10) und wird bei jedem Durchlauf um 1 erhöht (i=i+1). Anschließend gibt document.writeln das Ergebnis aus

  32. Übung 3 Schreibt ein Programm, das die Quadrate der Zahlen von 0 bis 9 auf einer HTML-Seite ausgibt. Tipp: Benutzt eine for-Schleife, die von 0 bis 9 hochzählt, den Zähler quadriert und das Ergebnis mit document.writeln() ausgibt

  33. Ergebnis <script language="JavaScript" type="text/javascript"> <!-- Inhalt vor alten Browsern verstecken document.writeln("Ausgabe der Quadratzahlen von 0 bis 9:"); for (var i=0; i<10; i=i+1) { document.writeln("Quadrat von ",i," ist: ",i*i); } // Ende: Inhalt verstecken --> </script>

  34. Literatur und Quellen • SELFHTML.de • Javascript-world.de • DeveloperChannel.de • Web-toolbox.net

More Related