Webapplikationen IV (JavaScript Grundlagen)

Diesmal wurde über den Zusammenhang von HTML, PHP und JavaScript gesprochen und inwiefern JS dazu benutzt werden kann, um dynamische Websiteinhalte abzubilden. Dazu wurden als Erstes alle Programmiersprachen einander gegenübergestellt und die Anwendungsbereiche sowie die Unterschiede im Syntax festgemacht. Nachdem geklärt wurde an welcher Stelle man JavaScripts in eine bestehende Webseite einfügen kann, musste zuerst das derzeitige Projekt umgebaut werden, sodass die zuvor programmierten PHP-Snippets keine Auswirkung mehr auf die eigentliche Seite haben. Im Anschluss daran wurde auch schon das erste eigene JavaScript programmiert, bei dem mit einfachen Variablen ein Rückgabewert abgefragt wurde, welcher schlussendlich eine Warnmeldung (alert()-Funktion) ausgibt. Des Weiteren wurden auch andere Funktionen (z.B. onClick()-Funktion) innerhalb kleinerer Scripts ausprobiert, um ein besseres Gefühl für dynamische Webseiteninhalte zu bekommen. Anschließend wurde auch noch über die Erstellung und den Aufruf von Funktionen in JavaScript gesprochen. So wurden in diesem Sinne auch zwei weitere JavaScripts programmiert, welche mit der Angabe von einfachen oder mehreren Übergabewerten diverse Berechnungen ausführen und später an ein bestimmtes HTML-Element wieder zurück liefern können. Am Schluss wurde noch eine Passwortabfrage mit JavaScript und dem bestehenden Login-Formular realisiert, um den Unterschied zu PHP aufzeigen zu können. Somit konnte nun endgültig nachvollzogen werden, inwiefern sich die beiden Anmeldeverfahren durch ihren Syntax unterscheiden und welche Möglichkeiten bzw. Probleme beide Methoden haben.


Kompetenzen

  1. Ich verstehe wie Webserver und Datenbankserver im Hintergrund einer Webseite arbeiten und kenne virtuelle Applikationen.
  2. Ich weiß wie JavaScript Webseiten dynamisch verändern kann und wie diese Sprache mit HTML bzw. PHP verknüpft wird.
  3. Ich verstehe wie man JS-Funktionen aufrufen kann und kann mir über Manual-Pages der JS-Dokumentation weiterhelfen.
  4. Ich kenne diverse JS-Funktionen wie onClick() oder alert() und kann diese in kleineren Scripts einbetten.
  5. Ich kann kleinere JavaScripts erstellen und die Ergebnisse dieser mit Hilfe des return Befehls zurückgeben.
  6. Ich kann Kontrollstrukturen wie Verzweigungen in JavaScript programmieren und verstehe das Prinzip hinter ihnen.


Vertiefung

alertscript.html
<script type="text/javascript">
  var eis = 'Schokolade';
  if (eis === 'Schokolade') {
    alert('Yuhu, ich liebe Schokoladeneis!');
  }
  else {
    alert('Awwww, ich hätte gerne ein Schokoladeneis...');
  }
</script>
tempscript.html
<script type="text/javascript">
  function Celsius(f) {
    return (5/9) * (f-32);
  }
  document.getElementById("celsius").innerHTML = Celsius(75);
</script>



Unterrichtsmaterialien


, , , , , , , , , , ,