JavaScript UE1

Information about JavaScript UE1

Published on November 5, 2007

Author: Nikita

Source: authorstream.com

Content

Webdesign mit JavaScript:  Webdesign mit JavaScript Übungseinheit 1 Statuszeile, Zeit und Datum, <script> tag, JavaScript Baum, Date Objekt © 02/2003 - Georg Strauss – HTL Jenbach Bsp1: Beschreibende Links:  Bsp1: Beschreibende Links Angabe einer kurzen Linkbeschreibung in der Statuszeile des Browsers JavaScript direkt im HTML Code implementiert Ausnützung eines Event-Handlers von JavaScript – onMouseOver Event-Handler: Code, der ausgeführt wird, wenn ein Event auftritt Event-Handler können in vielen Elementen der Seite verwendet werden: z.B.: Links, Formularschaltflächen und Bilder Gebräuchliche Event Handler:  Gebräuchliche Event Handler Bsp1: Beschreibende Links:  Bsp1: Beschreibende Links <html> <head> <title>Stauszeilen-Text</title> </head> <body> <a href="http://www.htl-jenbach.at" onMouseOver="window.status = 'Klicken Sie hier, um auf die Internetseite der HTL Jenbach zu gelangen'; return true;"> <img width="145" height="190" border="0" src="HTL.jpg"> </a> </body> </html> Bsp1: Beschreibende Links:  Bsp1: Beschreibende Links Code steht in doppelten Anführungszeichen – Kennzeichnung wo der Code beginnt und endet windows.status: Art wie JavaScript die Statuszeile anspricht (Eigenschaft status des Objektes window) Mit dem Gleichheitszeichen wird der Wert (Zeichenkette) zugewiesen Text steht in einfachen Anführungszeichen – Anfang und Ende des Wertes Wenn eine Zeichenkette in eine andere eingefügt wird muss immer zwischen doppelten und einfachen Anführungszeichen gewechselt werden Direkt vor einem Apostroph innerhalb einer einfacher Anführungszeichen muss ein Backslash \ gesetzt werden Semikolon hinter dem Beschreibungstext kennzeichnet das Ende einer JavaScript Zeile Bsp1: Beschreibende Links:  Bsp1: Beschreibende Links Return true: halten den Browser davon ab, wie gewöhnlich in der Statuszeile den URL anzuzeigen Problem: Text in Statuszeile verschwindet nicht direkt, wenn die Maus wieder wegbewegt wird -> Lösung über onMouseOut Event <a href="http://www.htl-jenbach.at“ onMouseOver="window.status = 'Klicken Sie hier, um auf die Internetseite der HTL Jenbach zu gelangen'; return true;" onMouseOut="window.status =‘ ';"> <img width="145" height="190" border="0" src=„htl.jpg"></a> Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung Script prüft die Tageszeit und liefert dann eine Tages- bzw. Nacht html-Seite Verwendung von: date und document Obejkt Variablen: Datum, Zeit Eigenschaften und Methoden der Objekte date und document werden ausgenützt Vergleich durch if-Anweisung Tag: script: <script language=„JavaScript“> <!-- javascript code //--> Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung <html> <head><title>Tag- und Nacht-Skript</title></head> <body> <script language="JavaScript"> <!— //--> </script> </body> </html> JavaScript Code Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung var jetzt = new Date(); var stunde = jetzt.getHours(); if (stunde >= 4 && stunde <= 16) { document.bgColor = "#FFFFFF"; document.fgColor = "#000000"; document.write("<img height='150' width='244' src='foto-tag.jpg'>"); document.write("<p>W&uuml;rden Sie jetzt nicht lieber "); document.write("im Pulverschnee skifahren, "); document.write("als vor dem Bildschirm zu sitzen?</p>"); } else { document.bgColor = "#000000"; document.fgColor = "#FFFFFF"; document.write("<img height='150' width='244' src='foto-nacht.jpg'>"); document.write("<p>Wollen Sie nicht noch einen trinken gehen, "); document.write("bevor Sie es sich nach dem langen Tag auf der "); document.write("Piste gem&uuml;tlich machen?</p>"); } Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung Versionen von JavaScript: 1.0: wurde mit Netscape Navigator 2.0 eingeführt 1.5: unterstützt durch Netscape 6 und Explorer 5.5. Und höher Standardisierung unter ECMA Script: ECMA-262 Falls ein Script ein Merkmal der neuersten JavaScript Version verwendet -> Angabe im script tag: <script language=„JavaScript 1.5“> Date Objekt und Variablen var jetzt = new date(); Var stunde = jetzt.getHours(); Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung Uhrzeit mit JavaScript ermitteln Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung Kommentare: Es gibt 2 Arten von Kommentaren: einzeilige und Blockkommentare // Dies ist ein einzeiliger Kommentar /* Dieser Kommentar umfasst mehrere Zeilen */ Vergleich html Kommentar: <!-- Dies ist ein html Kommentar --> Seite anzeigen JavaScript bietet die Möglichkeit html Code direkt auf einer Webseite auszugeben document.write(„<img height=‚150‘ width=‚250‘ src=‚foto_tag.jpg‘>“); Bsp2: Tag/Nacht Umschaltung:  Bsp2: Tag/Nacht Umschaltung Variablennamen: Muss mit einem Buchstaben, Dollarzeichen oder Unterstrich beginnen Danach können Buchstaben, Unterstriche, oder Ziffern folgen JavaScript verstecken Für alte Browser, die das script tag nicht verstehen <!-- Verbirg mich vor antiquierter Technologie ... JavaScript Code ... // Höre auf mich zu verbergen. --> </script> Groß- und Kleinschreibung JavaScript arbeitet case sensitiv Bsp3: Begrüßung per Wochentag:  Bsp3: Begrüßung per Wochentag Zuweisung der Zahlenwerte aus dem date-Objekt durch getDay() mit Wochentagsnamen Verwendung der if Abfrage um den numerischen Wert in einen String (Variable: tagesname) umzuwandeln Achtung: Prüfen des Wertes mit: == Zuordnung mit: = Gleichheitsoperator in JavaScript: == Ungleichheitsoperator: != Wertzuweisung: = Bsp3: Begrüßung per Wochentag:  Bsp3: Begrüßung per Wochentag <script language="JavaScript"> var jetzt = new Date(); var tag = jetzt.getDay(); var tagesname; if (tag == 0) { tagesname = "Sonntag"; } if (tag == 1) { tagesname = "Montag"; } if (tag == 2) { tagesname = "Dienstag"; } if (tag == 3) { tagesname = "Mittwoch"; } if (tag == 4) { tagesname = "Donnerstag"; } if (tag == 5) { tagesname = "Freitag"; } if (tag == 6) { tagesname = "Samstag"; } document.write("Heute ist " + tagesname + ". <br>"); </script> Bsp4: Begrüßung per Wochentag:  Bsp4: Begrüßung per Wochentag Date-Obkjekt kann auch ein bestimmtes Datum (Vergangenheit, Zukunft) erzeugen Möglichkeit Zeiträume zu berechnen, z.B.: Wieviel Tage sind es noch bis? Übergabe eines bestimmten Datums an das date-Objekt als Argument Beispiele: var dann = new Date("October 31, 2002"); var dann = new Date("Oct 31, 2002"); var dann = new Date(2002, 9, 31); Bsp4: Begrüßung per Wochentag:  Bsp4: Begrüßung per Wochentag Zwischenzeit Berechnung: Ergebnis der Berechnung liegt in ms vor ms müssen noch in Tage umgewandelt werden Zwischenzeit / (1000*60*60*24) Math.floor(): Abrundung auf den nächstliegenden ganzen Tag Ausgabe über: document.write() -> Anzeige auf der html Seite Bsp4: Zeiträume berechnen:  Bsp4: Zeiträume berechnen <html> <head><title>Halloween</title></head> <body> <script language="JavaScript"> var jetzt = new Date( ); var dann = new Date("October 31, 2002"); var zwischenzeit = dann.getTime() - jetzt.getTime( ); zwischenzeit = Math.floor(zwischenzeit / (1000 * 60 * 60 * 24)); document.write ("Nur noch " + zwischenzeit + " Tage bis Halloween"); </script> </body> </html> Objekte, Eigenschaften, Methoden:  Objekte, Eigenschaften, Methoden Objekte: Begriff ähnlich wie in objektorientierten Sprachen wie Java, C++, allerdings bestehen Unterschiede in Vorgehensweise und Darstellung in JavaScript -> keine echte objektorientierte Sprache Beispiele: document, window, date Eigenschaften: Jedes Objekt weist Eigenschaften auf, die abgefragt und verändert werden können Beispiele: document.bgColor, document.write, window.location Methoden: Name für eine Gruppe von Anweisungen Methode ist direkt mit dem Objekt verbunden und wird ausschliesslich auf das Objekt angewendet Möglichkeiten Objekteigenschaften zu ändern und Aktionen zu setzen Beispiel: document.write(„Es wird langsam spät“); JavaScript Baum:  JavaScript Baum Objekte und Eigenschaften sind durch einen Punkt voneinander getrennt, z.B.: document.bgColor – Hintergrundfarbe des Dokumentes Beispiel: document.mailformular.adresse.value verweist auf den Wert des Elementes adresse eines Formulars namens mailformular, das sich im document befindet JavaScript ordnet alle Teile eines Browserfensters und alle Elemente einer Seite (Formulare, Bilder, ...) wie einen Baum an Zuerst kommt ein Hauptobjekt (Stamm) und dann die Objekte die vom Hauptobjekt abzweigen (Äste) und schließlich die Methoden und Eigenschaften (Blätter) Hauptobjekt ist immer das aktuelle Fenster: window Davon zweigen die Äste ab: document (angezeigte Seite), location (derzeitige Position), history (Abfolge aller Seiten), JavaScript Baum:  JavaScript Baum Form Link Image Document Window Location History Beispiel: document Objekt

Related presentations


Other presentations created by Nikita

Modems
28. 11. 2007
0 views

Modems

Intro to CMMI
02. 10. 2007
0 views

Intro to CMMI

Mantsch Mazur Tank Insulation
06. 11. 2007
0 views

Mantsch Mazur Tank Insulation

embrapa2
27. 11. 2007
0 views

embrapa2

G050249 00
28. 11. 2007
0 views

G050249 00

csw06 lord
25. 10. 2007
0 views

csw06 lord

AboutCaravaggio
31. 10. 2007
0 views

AboutCaravaggio

THE RENAISSANCE
31. 10. 2007
0 views

THE RENAISSANCE

HeWhoLaughs LastsPlenary
02. 11. 2007
0 views

HeWhoLaughs LastsPlenary

buchner
05. 11. 2007
0 views

buchner

6 3 Ship Framing System
06. 11. 2007
0 views

6 3 Ship Framing System

NOROVIRUSESpres
07. 11. 2007
0 views

NOROVIRUSESpres

Volkswagen Stiftung
14. 11. 2007
0 views

Volkswagen Stiftung

Trigonometry examples
15. 11. 2007
0 views

Trigonometry examples

Lufthansa
16. 11. 2007
0 views

Lufthansa

pipeline to the pros updated
20. 11. 2007
0 views

pipeline to the pros updated

tango in a nutshell
22. 11. 2007
0 views

tango in a nutshell

en what is turtle f2f
19. 12. 2007
0 views

en what is turtle f2f

Qatar 2005
28. 12. 2007
0 views

Qatar 2005

butterflydance
23. 11. 2007
0 views

butterflydance

H3NPSmall
02. 01. 2008
0 views

H3NPSmall

nano5
02. 01. 2008
0 views

nano5

flex components slides
28. 11. 2007
0 views

flex components slides

jmcmorrow
06. 12. 2007
0 views

jmcmorrow

fishing
07. 01. 2008
0 views

fishing

Dormancy
07. 01. 2008
0 views

Dormancy

TE Tutorial ACL07
31. 10. 2007
0 views

TE Tutorial ACL07

Knots A
25. 10. 2007
0 views

Knots A

Tutorial AOD 100305
29. 10. 2007
0 views

Tutorial AOD 100305

38006461
21. 11. 2007
0 views

38006461

helioseismology
14. 11. 2007
0 views

helioseismology

Knoblock p123
15. 11. 2007
0 views

Knoblock p123

Lt2 BusiPortfoAnalysis
20. 02. 2008
0 views

Lt2 BusiPortfoAnalysis

Guidaversione19 0SistemaDRG
30. 10. 2007
0 views

Guidaversione19 0SistemaDRG

Modern Ideas
24. 02. 2008
0 views

Modern Ideas

Lotrel and Diovan Talk
05. 03. 2008
0 views

Lotrel and Diovan Talk

BusinessBuddyPresent ation
03. 10. 2007
0 views

BusinessBuddyPresent ation

DFASColumbusConferen ce
01. 11. 2007
0 views

DFASColumbusConferen ce

student movement
25. 12. 2007
0 views

student movement

elettivo2006
04. 12. 2007
0 views

elettivo2006

akshaya friends
21. 12. 2007
0 views

akshaya friends

lctpcremarks
27. 03. 2008
0 views

lctpcremarks

AUTNZFuturesDWYER
30. 03. 2008
0 views

AUTNZFuturesDWYER

Lecture24 07
09. 10. 2007
0 views

Lecture24 07

Lesko Homestake Minn
05. 12. 2007
0 views

Lesko Homestake Minn

2005 FX PAL VS
01. 11. 2007
0 views

2005 FX PAL VS

Deadlock 1941
13. 11. 2007
0 views

Deadlock 1941

20070615 POLICY grid
24. 12. 2007
0 views

20070615 POLICY grid

NYU Brownbag
06. 11. 2007
0 views

NYU Brownbag

Meow
05. 11. 2007
0 views

Meow

ahm2004 workflow
14. 12. 2007
0 views

ahm2004 workflow

08Tirpak
07. 11. 2007
0 views

08Tirpak

UNFFOlgas website
26. 11. 2007
0 views

UNFFOlgas website

rtd Jul24 03
30. 11. 2007
0 views

rtd Jul24 03

Princeton Oct05
05. 11. 2007
0 views

Princeton Oct05