advertisement

JavaScript UE1

38 %
63 %
advertisement
Information about JavaScript UE1
Entertainment

Published on November 5, 2007

Author: Nikita

Source: authorstream.com

advertisement

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

Add a comment

Related presentations

Related pages

Polynomdivision üben - Homepage von Arndt Brünner

Auf dieser Seite findet sich ein Programm (JavaScript) zum Üben der Polynomdivision. Matheseiten-Übersicht • Polynomdivision : Übungsaufgaben zur ...
Read more

Hourences.com – Tutorials UE1/UE2 BSP

Tutorials UE1/UE2 BSP. About : This tutorial aims at providing info and insight into BSP and brushwork in the Unreal Engine. Although it focusses on Engine ...
Read more

FiiO RC-UE1 Ersatzkabel für Ultimate Ears In-Ear Kopfhörer ...

FiiO RC-UE1 Ersatzkabel für Ultimate Ears In-Ear Kopfhörer ... Das Abschicken einer Bestellung ist bei deaktiviertem JavaScript leider NICHT möglich!
Read more

Benutzer:Dedlfix/Sandbox – SELFHTML-Wiki

JavaScript; Linkliste; Mitmachen. Letzte Änderungen; Mitmachen! Hilfe; SELFHTML e.V. Werkzeuge. Links auf diese Seite; Änderungen an verlinkten Seiten ...
Read more

1&1 Control-Center

Webmailer Login. Mit jedem internetfähigen Rechner E-Mails abrufen und verwalten - egal, wo Sie gerade sind.
Read more

Hourences.com – Tutorials UE1/UE2 Semi Solids

Tutorials UE1/UE2 Semi Solids. About : ... Semi Solids however do not create cuts in the surrounding geometry. They only receive cuts.
Read more

Waypoint JavaScript Exercises 1-35: FreeCodeCamp.com Part ...

Brief video going over Waypoint JavaScript Exercises 1-35: FreeCodeCamp.com. Fan funding goes towards buying the equipment necessary to deliver ...
Read more

LG Klimaanlage Wandgerät Prestige Inverter H12AL NSM ...

LG Klimaanlage Wandgerät Prestige Inverter H12AL NSM + H12AL UE1 Lieferzeit: 3-4 Tage (Ausland abweichend) 1.931,00 EUR. inkl. 19% MwSt. zzgl. Versand.
Read more

Von Waldeck nach Hemfurth - www.wandergerne.de

MargreTours > 2014 > Urwaldsteig ...
Read more

Ü1 A2b - Messtechnik - Maschinenbauer-Forum.de

Hey ich hab ne Frage zu Ü1 A2b 1. Weiß jemand wie man darauf kommt das die Verstärkung des Sensors v_sen=10^-4 ist?
Read more