Index von JavaScript Lehrling
Diese Seite ist das Inhaltsverzeichnis für den Teil JavaScript Lehrling. Ich verlinke hier alle Einzelseiten des Teils JavaScript mit deren Teaser und den dort behandelten Sprachelementen.
Javascript - Updates
Ich lerne weiter, dies sind die letzten 10 überarbeiteten Dateien im Teil Javascript
zeit_verzoegerung26.10.2016
von www.lehrling.biefer.com:
window_prompt26.10.2016
window_scroll26.10.2016
window_poper26.10.2016
window_move26.10.2016
window_location26.10.2016
window_history26.10.2016
window_frame26.10.2016
window_confirm26.10.2016
window_alert26.10.2016
Suche JavaScript
Nutzen Sie hier die Suche nach einem Sprachelement (im braunen Balken oben rechts).
einfuehrung.php
JavaScript ermöglicht dem Webmaster via Browser die Darstellung der Webseite oder den Code selbst zu verändern. Alle im Browser vorhandenen Elemente bzw. Objekte lassen sich (durch name, id oder Array-Index) aufrufen und manipulieren. Das verändert den Code auf dem Server genauso wenig, als würde jemand seine Tasse Kaffe über die Tastatur ausschütten.
Sprachelemente in einfuehrung.php:
- Progressive Enhancement
- <script type="text/Javascript"> </script>
- <noscript>...</noscript>
- /* <![CDATA[ */ und /* ]]> */
fehlersuche.php
Was bedeuten diese Klammern, Punkte und Semikollon? Was machen diese kryptischen Angaben?
Sprachelemente in fehlersuche.php:
- Einzelne Zeichen
sprachelemente.php
Ein JavaScript besteht aus einer Abfolge von einzelnen Anweisungen bzw. Befehlen an den Browser und ist in ziemlich kurzen Zeilen gehalten; ein Anweisungs-Element pro Zeile. Hier folgt ein Überblick zu den wichtigsten Elementen in Javascript wie Methoden, Funktionen, Variablen, Arrays, Operatoren, Bedingungen und Eventhandlern.
Sprachelemente in sprachelemente.php:
- Kommentar
- Methoden
- Funktion
- Variable
- Wert
- Array
- Prototypen
- Operator
- Reservierte und sonstige Worte
- Bedingung
- Eventhandler
objekte.php
Der Browser teilt alles, angefangen bei sich selbst(navigator), die Systemzeit des Computers, seine Fenster(window), das Dokument(document) und alle Elemente die sich darin befinden wie Bilder(images) und Formulare(forms), in Objekte (object) ein. JavaScript erlaubt, diese Objekte anzusprechen, zu lesen und grösstenteils auch zu verändern.
Sprachelemente in objekte.php:
- Abbildung Objekt Hierarchie
dom.php
Das HTML-Dokument wird als ein Baum betrachtet. Will man einen Apfel pflücken, muss man sich den Ästen entlang zu ihm hin hangeln. DOM wurde nicht ausschliesslich für HTML mit seinem eingeschränkten Satz an Tags konzipiert, sondern es lässt sich auch auf XML Dokumente anwenden, bei denen die Tags nicht vorgegeben sind. Die Abstraktion baut auf Relationen auf: Elternknoten, Kindknoten, Geschwisterknoten.
Sprachelemente in dom.php:
- Dokument-Objekt-Model
- Node
- ChildNodes und Siblings
- DOM Illustration
- Knoten Tabellen
variablen.php
Variablen sind Behälter für Werte, der Behälter ist der Name der Variablen, der Wert ist der Inhalt des Behälters; Variablen heissen sie, weil man die Inhalte verändern kann. (Könnte man sie nicht verändern, dann wären es Konstanten.) Beim Vergeben eines Variablennamens reserviert man einen Platz auf dem Zwischenspeicher. Die Werte, die dort abgelegt werden, können bolsche sein (true oder false), Strings (Zeichen in Anführungszeichen) oder Zahlen (ohne Anführungszeichen).
Sprachelemente in variablen.php:
- global
- lokal
- var =
variablen_array.php
Ein Array ist eine Schublade voller Variablen. Eine Komode mit mehreren Schubladen voller Variablen nennt man einen mehrdimensionalen Array. Jede Variable hat eine Nummer oder einen Namen [index]. Die Nummerierung beginnt immer mit Null, die erste Variable heisst also [0]. Arrays mit Variablennamen nennt man assoziative Arrays. Der Array selbst hat natürlich auch einen Namen.
Sprachelemente in variablen_array.php:
- new Array()
window.php
window ist das oberste Objekt in der Objekt Hierarchie und meint das Browser-Fenster.
Sprachelemente in window.php:
- self.name
- window.print()
- window.sidebar.addPanel() und window.external.AddFavorite()
- window.status = "..."
window_alert.php
Ein alert ist ein Aufmerksamkeits- oder Weckruf, welcher vom User mit einem OK bestätigt werden muss. Das OK startet aber nichts (keine versteckte Funktion), sondern lässt den Browser einfach fortfahren.
Sprachelemente in window_alert.php:
- alert('myText');
window_confirm.php
Die Methode confirm() verlangt eine ja / nein Entscheidung vom User, in Abhängigkeit zur Antwort kann danach via Javascript z.B. eine entsprechende Seite geöffnet werden.
Sprachelemente in window_confirm.php:
- confirm(Frage)
window_prompt.php
Vom Dialogfenster prompt() wird eine Tastatureingabe durch den User erwartet. Diese kann in einer Variablen aufgefangen werden, und danach irgend eine fragwürdige Verwendung finden.
Sprachelemente in window_prompt.php:
- prompt(Frage, Antwort)
- document.write(variable)
window_history.php
Die Information, auf die das Objekt history zugreift ist in der History-Liste des Web-Browsers gespeichert. Sie ist weitgehend schreibgeschützt.
Sprachelemente in window_history.php:
- window.history.length
- window.history.back()
- window.history.forward()
- window.history.go()
window_location.php
Zugriff auf den vollständigen URI der aktuell angezeigten Web-Seite, falls diese online ist (sonst zeigt es nur localhost). Beim Ändern der location lädt der Web-Browser die neue URI (so, als hätte der user auf einen Link geklickt).
Sprachelemente in window_location.php:
- window.location.href=""
- window.location.replace()
- window.location.reload()
- window.location.hash
- window.location.search
- window.location.hostName
- window.location.host
- window.location.port
- window.location.protocol
window_poper.php
Popups beim Verlassen der Seite, Popups mit obszöner Werbung beim Überfahren eines unscheinbaren Links, Popups bei jeder Gelegenheit, haben dazu geführt, dass die meisten Browser (via Popup Blocker Plugin) den Usern die Möglichkeit geben, Popups zu blockieren und die Ausführung von JavaScript ganz zu verhindern. Möchte ich also mit Popups Inhalte vermitteln, muss absolut gewährleistet sein, dass ich das persönliche Vertrauen des Users besitze, oder meine Popup-Inhalte werden ausgeschlossen und die User verlassen meine Site fluchtartig.
Sprachelemente in window_poper.php:
- window.open()
- info.opener =
- close()
- moveTo()
- moveBy()
window_frame.php
Jeder Frame kann durch seine Relation angesprochen werden, durch seinen Namen oder seinen frames[] index. An die Stelle von 'window' tritt der Frame!
Sprachelemente in window_frame.php:
- self, parent, top
window_scroll.php
Dieses Script scrollt zu einer Koordinate weiter unten in einem jetzt noch nicht sichtbaren Seitenbereich.
Sprachelemente in window_scroll.php:
- window.scrollTo()
- window.scrollBy()
navigator.php
Welchen Web-Browser verwendet der Anwender? Und nähere Spezifikationen über den Browser. Das navigator Objekt steht in der Objekthierarchie neben, nicht unter dem window Objekt.
Sprachelemente in navigator.php:
- navigator.appName
- navigator.userAgent
document.php
Das Objekt Dokument ist das umfangreichste, mit den meisten Unterobjekten. Beim Aufruf kann die oberste Ebene 'window' weggelassen werden, denn niergendwo anders kann sich das Dokument befinden. Einzelne Objekte im Dokument erreicht man auch via DOM (Dokument Objekt Modell).
Sprachelemente in document.php:
- document.write()
- document.title
- document.location
- document.referrer
- document.fgColor (deprecated)
- document.linkColor (deprecated)
- document.bgcolor='Black' (deprecated)
select_screentext.php
Dieses Script zeigt, wie im Browserfenster selektierter Text erfasst und weiter verwendet werden kann.
Sprachelemente in select_screentext.php:
- getSelection()
links_austiteln.php
Dieses Script sucht sich innerhalb einer Seite alle Titel einer bestimmten Ordnung aus (z.B.: h3) und erstellt daraus in einem div-Container eine Navigation für diese Seite; die Links zeigen auf die Titel, welche mit einer Anker-Adresse versehen wurden.
Sprachelemente in links_austiteln.php:
- document.getElementsByTagName('h3')
- document.getElementById("seitennavigation").innerHTML =
dom_toplink.php
Die Daseinsberechtigung dieses Scripts liegt eher im Beispiel für DOM als im tatsächlichen Nutzen.
Sprachelemente in dom_toplink.php:
- document.getElementsByName()
images.php
Das image Objekt ist ein Unterobjekt von document. Die wichtigsten Eigenschaften von image sind name und vor allem src. Ein Bild spricht man an, über den Array Images[] welcher bei 0 beginnend alle Bilder im Dokument zählt, oder über den vergebenen Namen. Mit src kannn man die Quelle der Bildinstanz ändern.
Sprachelemente in images.php:
- new Image
images_omo.php
Es gibt hier 4 unterschiedliche Scripts um einen onmouseover (Rollover) Bildwechsel zu erzielen. Allen gemeinsam ist, dass jedes Bild einen eigenen Namen haben muss, durch welchen es via Javascript angesprochen werden kann. Und, jedes Bild, welches für einen Effekt genutzt werden soll, muss vorgeladen werden.
Sprachelemente in images_omo.php:
- new Image()
images_gallery.php
Eine Galerie mit Vorschaubildern, bei onmouseover auf diese Thumbnails (Daumennägel) wird das grosse Bild ausgewechselt.
Sprachelemente in images_gallery.php:
- eval()
images_diashow_auto.php
Diese Diashow hat keine Bedienung, sie läuft und läuft automatisch. Dazu werden alle Bilder in einen Array gefasst; die Adresse, der Name und die Endung der Bilddateien können ganz individuell sein. In Formularfeldern kann die Bildnummer und der Dateiname angezeigt werden.
Sprachelemente in images_diashow_auto.php:
- this[]
images_diashow_auto.php ansehen
images_diashow_arrows.php
Diese Diashow läuft nicht automatisch, zum Bildwechsel muss einer der beiden Richtungspfeile angeklickt werden. Diese Show läuft auch mit gemischten Bildern dank des Arrays.
Sprachelemente in images_diashow_arrows.php:
- new Array()
images_diashow_arrows.php ansehen
images_diashow.php
Diese Diashow bedingt, dass alle Bilddateinamen durchnummeriert sind. Die Dateiendung kann jpg oder gif sein, aber innerhalb einer Show immer die Gleiche. Die Anzahl Bilder ist beliebig, muss aber bekannt sein. Zusätzliche Funktionalitäten umfassen einen Preload und die manuelle Bedienung. Die Diashow kann begutachtet werden auf biefer.com.
Sprachelemente in images_diashow.php:
- setTimeout();
- eine Flag setzen
- document.getElementById
- new Image()
form.php
Das Formular wie seine Felder können durch die Indizes der automatisch erstellten Arrays 'forms' und 'elements' angesprochen werden oder auch durch ihre Namen. Das erste Formular der Seite und das erste Feld des Formulars tragen die Indizes [0], weil Arrays mit 0 zu zählen beginnen. Das letzte Element eines Arrays spricht sich per length-1 an.
Sprachelemente in form.php:
- document.myForm.myTextarea.value='...'
form_events.php
Verschiedene Maus-Aktionen werden hier auf ein Formular angewandt. Die sogenannten EventHandler lösen ein Javascript Ereignis aus.
Sprachelemente in form_events.php:
- focus()
- onfocus="...select()"
- onselect="..."
- onclick="..."
- onblur="..."
- onchange="..."
- onfocus="this.blur()"
- onmouseover="..." onmouseout="..." onClick="..."
- new Function
form_check.php
Der Javascript Check ist nur eine Hilfe beim Ausfüllen des Formulars, er kann mühelos umgangen werden und taugt daher nicht als Sicherheitsfeature; serverseitige Prüfung ist unerlässlich.
Sprachelemente in form_check.php:
- onsubmit="return tesTer()"
form_promptfill.php
Dieses JavaScript prüft, ob ein Feld leer blieb und öffnet - wenn ja - eine prompt()-Eingabeaufforderung. Die Eingabe wird prompt in das entsprechende Feld geschrieben.
Sprachelemente in form_promptfill.php:
- prompt()
form_swapper.php
Aus einem Menü auswählen und in ein zweites Menü hinüber tauschen und wieder zurück. Mehrfachauswahl ist möglich.
Sprachelemente in form_swapper.php:
- new Option()
form_depende.php
Der Inhalt des zweiten Menu steht in Abhängigkeit zur Auswahl im ersten Menu. Wählen wir im ersten Menu einen Schriftsteller aus, erscheinen im zweiten Menu ausschliesslich dessen Werke zur Auswahl. Die Wahl im zweiten Menu löst dann eine Meldung aus (im Praktischen Fall würden wir etwas damit anfangen).
Sprachelemente in form_depende.php:
- gewaehlter_Wert=document.banane.eins.options[document.banane.eins.options.selectedIndex].value;
form_sprungmenu.php
Dieses JavaScript macht aus einer Auswahlliste eine Navigation. Es gibt eine Variante, welche die Seite in einem neuen Fenster öffnet.
Sprachelemente in form_sprungmenu.php:
- onchange="geheZu('parent',this,0)"
- eval()
form_suche.php
Dieses Script wird auf der ganzen lehrlings-Site verwendet (im oberen Balken). Es findet und markiert einen String, wahlweise zusammenhängend oder als einzelne Worte. Die Markierungen bleiben auch nach erneuter Suche erhalten, es sei denn, die Seite wird neu geladen.
Sprachelemente in form_suche.php:
- document.body.innerHTML
form_zeichenzahl.php
Dieses JavaScript zählt die Zeichen in einem TexteingabeFeld und zeigt sie in einem TextFeld an.
Sprachelemente in form_zeichenzahl.php:
- Objekt.Methode()
form_grafic_radio.php
Die Checkbox und der Radiobutton lassen sich nicht stylen, auch nicht mit CSS, sie behalten ihren 3D look. Aber sie lassen sich durch ein Bild ersetzen, welches mit einem Hidden Feld verknüpft wird, das die Werte speichert. Die Bilder der Boxen und Butons können beliebig gestaltet werden, es braucht je ein Bild für den Off und den On Zustand.
Sprachelemente in form_grafic_radio.php:
- firstChild.nodeValue
login_coder.php
Dieser Javascript Codegenerator stammt aus einer Zeit, als es PHP noch nicht gab und die Anpassung des Servers per .htdocs vom Host nicht erlaubt wurde. Keinesfalls ist dieser Passwortschutz ein wirklicher Schutz, wenn die Zieladresse bekannt ist, kann die Seite über die Adresszeile angesprungen werden. Und natürlich validiert dieses Script, welches ich nur wiedergebe aber nicht so ganz verstehe, auch nicht nach w3c.
Sprachelemente in login_coder.php:
- Komplex aber nicht geschützt
date.php
Eine neue Instanz des Datums Objekts Date, holt automatisch das heutige Datum.
Sprachelemente in date.php:
- new Date();
date_lastmodified.php
Auf english könnten wir das Datum einfach ausgeben, auf Deutsch muss alles konvertiert werden.
Sprachelemente in date_lastmodified.php:
- parse(Datums-String)
- document.lastModified
- split()
zeit_verzoegerung.php
Dieser Funktionsaufruf erfolgt zeitverzögert, als würde etwas interaktives geschehen.
Sprachelemente in zeit_verzoegerung.php:
- setTimeout()
zeit_countdown.php
Nur noch wenige Sekunden bis zur Stunde Null.
Sprachelemente in zeit_countdown.php:
- setTimeout()
date_countdown.php
Das Datumsobjekt kann mit einem beliebigen Datum erstellt werden, indem bei der Instanzierung ein Datum übergeben wird.
Sprachelemente in date_countdown.php:
- new Date("3 May, 2019")
- getTime()
- floor()
tooltip.php
Zur Userfreundlichkeit gehören klare Angaben an fraglicher Ort und Stelle; weiss einer nicht wie etwas geht, ist er schnell weg.
Sprachelemente in tooltip.php:
- Browserweiche prüft auf document.all
dhtml_ein_aus.php
Dieses JavaScripts zeigt und versteckt einen Container und passt den Text des aufrufenden Links dem Status des Containers an.
Sprachelemente in dhtml_ein_aus.php:
- getElementById()
- .innerHTML="..."
- .firstChild.nodeValue = "..."
- .firstChild.data = "..."
dhtml_fix.php
Objekt_1 zeigt die CSS Eigenschaft position:fixed. Im Objekt_2 selbst wird durch ein kleines Script die CSS Eigenschaft position: von absolute zu fixed verändert. Dies kann auch durch einen Link bedient werden.
Sprachelemente in dhtml_fix.php:
- onclick="this.style.position='fixed'
dhtml_move.php
Auf dieser Seite lernen wir ein Objekt zu messen und zu repositionieren (sprunghaft).
Sprachelemente in dhtml_move.php:
- obj.style.left = y+'px';
dhtml_animation.php
Auf dieser Seite lernen wir ein Objekt zu animieren (Stück um Stück alle paar Millisekunden zu verschieben) als würde es springen oder fliegen.
Sprachelemente in dhtml_animation.php:
- setTimeout('fly()',100);
dhtml_drag-n-drop.php
Die Eventhandler sind Javascript, die Positionen sind CSS. Die Position einesObjektes muss absolut gegeben sein, eine ID braucht es aber nicht.
Sprachelemente in dhtml_drag-n-drop.php:
- dragobjekt.style.left = (posx - dragx) + "px"
random.php
Eine Zufallszahl errechnen; dies sind einfache Beispiele, komplizierter wird noch zufälliger. Wichtig ist immer die Range (von-bis) anzugeben.
Sprachelemente in random.php:
- Math.random()
- Math.round()
- parseInt()
sound_omo.php
Geräusche, Töne, Sounds und Musik einbinden sind schwierig standardkonform einzubinden, eigentliche Medientags wird es erst in HTML 5 geben, bis dahin muss via 'embed'-Tag (für FF) und dem document.all Objekt (für IE) dem Browser das Abspielen beigebracht werden. Die meissten User erschrecken, wenn auf einer Website plötzlich und unerwartet Geräusche ertönen, Auf einer Seite mit Spielen hingegen darf Ton schon eingesetzt werden.
Sprachelemente in sound_omo.php:
- document.all
Check den Code.