JavaScript/Tutorials/Praxis/Erste Schritte

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

JavaScript ist eine Programmiersprache, die als Zusatztechnik in Webseiten eingebunden wird. Im modernen Webdesign erhalten Webseiten so neben der Inhaltsstruktur und dem Aussehen eine Verhaltensschicht.

Zusammenspiel HTML-CSS-JS

Einbindung

JavaScript-Quelltexte werden in HTML in einem script-Element notiert oder referenziert. Das script-Element darf dabei im body oder head des HTML-Dokuments notiert werden.

Hallo Welt! ansehen …
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JavaScript: Hallo Welt</title>
    <script>
      alert("Hallo Welt!");
    </script>
    <noscript>
      Sie haben JavaScript deaktiviert.
    </noscript>
  </head>
  <body>
    <p>Diese Seite tut nichts weiter, als eine Hinweisbox auszugeben.</p>
  </body>
</html>
Im obigen Beispiel wird mithilfe von JavaScript ein Meldungsfenster mit dem Text „Hallo Welt!“ am Bildschirm ausgegeben.

Ereignis-Verarbeitung

Aufgabe:
  1. Lies das Kapitel Event-Handler registrieren im DOM-Tutorial.
  2. Öffne dieses Script im Frickl mit Klick auf "ausprobieren" in einem neuen Tab (damit Du zwischen dieser Seite und dem Live-Beispiel wechseln kannst!) und setze die passenden Selektoren und Ereignisse ein.
    Beim Klick auf den Button soll der Text erscheinen.
  3. Schritte
    • In der ersten Zeile steht ein Event-Listener, in dem Du noch zwei Angaben ergänzen musst.
    • Setze die id des Elements ein, das interaktiv werden soll.
    • Bei welchem Ereignis soll die Funktion klickverarbeitung ausgelöst werden?
    • In der vierten Zeile wird eine Zeichenkette mit innerText einem Element zugewiesen. Welche id hat das Ausgabe-Element?
1. einen Button interaktiv machen ansehen …
<script>

document.querySelector('#').addEventListener('???', klickverarbeitung);
 
function klickverarbeitung () {
  document.querySelector('#').innerText += ' Huhu, das ist von Javascript eingefügter Text. \n';
}

</script>
...
<button id="interaktiv">Klick mich!</button> 
<output id="output"></output>

<p>Öffne dieses Script im Frickl (mit Klick auf "ausprobieren") und setze die passenden Selektoren und Ereignisse ein. Beim Klick auf den Button soll der Text erscheinen.</p>





Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/Praxis/Erste_Schritte&oldid=97906“