MMProg:WiSe2015:Praktikum:Aufgabe 1:Teil 2

aus GlossarWiki, der Glossar-Datenbank der Fachhochschule Augsburg

Praktikumsaufgabe 1, Teil 2

Eine erste JavaScript-Anwendung: Hello World

Ziel

Ziel dieser Aufgabe ist eine HTML5/JavaScript-Anwendung zu erstellen, welche die Nachricht "Hello World" als Text im Browser ausgibt.


HTML-Datei erstellen

Erstellen Sie eine neue HTML-Datei mittels Rechtsklick auf den Projektordner und dann Klick auf "New" -> "HTML File". Benennen Sie Datei "index.html" und füllen Sie diese anschließend mit folgendem Inhalt: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
    <meta charset="UTF-8">
  </head>

  <body>
  </body>
</html>

Das ist alles was an Markup benötigt wird für ein valides HTML5-Dokument. Weitere Meta-Anweisungen sind durchaus sinnvoll, allerdings nicht benötigt für die folgenden Beispiele.

Öffnen Sie die Seite im Browser mittels Rechtsklick auf die Datei und dann Klick auf "Open in Browser" -> "Firefox". Sie sollten eine komplett weiße Seite sehen. Sichern Sie den aktuellen Stand vom Projekt im Repository.


JavaScript-Code hinzufügen

Es gibt zwei Möglichkeiten um ein HTML-Dokument um JavaScript-Code zu erweitern:

  • Direkte Einbettung mittels Inline-Code in einem <script>-Tag
  • Referenzierung einer externen Datei mittels <script>-Tag

Die direkte Einbettung von JavaScript-Code sollte wenn möglich vermieden werden. Das Auslagern des Codes in eine separate Datei hat folgende Vorteile:

  • Der Code ist sauber getrennt vom HTML (Seperation of Concerns)
  • Der JavaScript-Code kann in mehreren HTML-Dateien eingesetzt werden (Don't Repeat Yourself).
  • Die Ladezeit der Seite ist besser, da der JavaScript-Code im Browser-Cache gespeichert werden kann.


Hauptdatei erstellen

Erstellen Sie eine neue JS-Datei mittels Rechtsklick auf den Ordner und dann Klick auf "New" -> "JavaScript File". Benennen Sie Datei "index.js" und fügen Sie folgenden Code in diese ein: 

var log = function(message) {
  document.querySelector('.messages').innerHTML += '<div class="message">' + message + '</div>';
};

log('Hello World');

Der JavaScript-Code stellt eine Log-Funktion bereit, welche mithilfe der DOM-API Nachrichten in die Seite ausgeben kann. Nach dem Laden der HTML-Seite wird der Logger initial benutzt um die Nachricht "Hello World" auszugeben.

Ändern Sie dann das HTML-Dokument wie folgt ab: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <h1 class="headline">Logged messages</h1>
    <div class="messages"></div>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Öffnen Sie die Seite erneut im Browser. Nun sollten Sie die Nachricht "Hello World" sehen. Sichern Sie den aktuellen Stand im Repository.


Dateien aufsplitten

In den meisten Projekten ist es empfehlenswert, den JavaScript-Code in mehrere modulare Dateien aufzusplitten. Bei der Einbindung dieser muss dann allerdings die Reihenfolge beachtet werden. Der Browser lädt und evaluiert den Code in der Reihenfolge der eingebetteten <script>-Tags.

Teilen Sie nun den Code in der Datei "index.js" so auf, dass die Log-Funktion in einer eigenen Datei "log.js" liegt. Die Datei "index.js" soll also nur noch den Aufruf der Log-Funktion mit der Nachricht "Hello World" beinhalten.

Ändern Sie dann das HTML-Dokument wie folgt ab: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript-Praktikum; Aufgabe 1; Teil 2</title>
    <meta charset="UTF-8">
  </head>

  <body>
    <h1 class="headline">Logged messages</h1>
    <div class="messages"></div>
    <script type="text/javascript" src="log.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Anmerkung: Tauschen Sie testweise die Reihenfolge der JavaScript-Dateien. Was denken Sie, was passieren wird?


Styling

Um die visuelle Darstellung von HTML-Seiten zu steuern werden Cascading Style Sheets (CSS) verwendet. Ebenso wie JavaScript kann CSS auf zwei Weisen in einem HTML-Dokument verwendet werden:

  • Direkte Einbettung mittels Inline-Code in einem <style>-Tag
  • Referenzierung einer externen Datei mittels <link>-Tag

Die gleichen Gründe wie bei JavaScript sprechen dafür das CSS in eine externe Datei auszulagern. Legen Sie dazu eine neue CSS-Datei names index.css an und fügen Sie folgenden Inhalt ein: 

html, body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.headline {
  font-size: 35px;
  font-weight: normal;
}

.messages {
  background-color: #000;
  color: #FFF;
  padding: 20px;
  margin: 0;
}

.message {
  margin: 0 0 20px;
}

.message:last-child {
  margin: 0;
}

Ändern Sie dann das HTML-Dokument wie folgt ab: 

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript-Praktikum; Aufgabe 1; Teil 1</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css" />
  </head>

  <body>
    <h1 class="headline">Logged messages</h1>
    <div class="messages"></div>
    <script type="text/javascript" src="log.js"></script>
    <script type="text/javascript" src="index.js"></script>
  </body>
</html>

Öffnen Sie die Seite erneut im Browser. Diese sollte nun eine andere visuelle Darstellung aufweisen. Sie können das Styling Ihren Wünschen entsprechend verändern. Sichern Sie dann den aktuellen Stand im Repository.


Weitere Nachrichten ausgeben

Die mittels JavaScript erstellte Log-Funktion bietet die Möglichkeit beliebige Nachrichten auszugeben. Erweitern Sie den Code nun so, dass nach der Nachricht "Hello World" die Nachricht "How are you doing?" ausgegeben wird.


Konsole verwenden

In vielen Fällen kann die Browser-Konsole dabei unterstützen Fehler zu finden oder Probleme zu analysieren. In den meisten Browsern finden Sie einen Einstieg in die Entwicklertools mittels Rechtsklick -> "Inspect element". Daraufhin öffnet sich eine Leiste mit unterschiedlichen Werkzeugen wie dem DOM Inspector und auch der Konsole.

Die Konsole hat zwei wesentliche Kernfunktionen. Zum einen stellt Sie eine JavaScript-API bereit welche Nachrichten entgegennimmt und diese dann ausgibt. Dies können Informationen, Warnung und auch Fehler der aktuell geladenen Seite sein. Laufzeitfehler der aktuellen Seite führen implizit zu einem Fehler-Eintrag in der Konsole. Zum anderen ermöglicht die Konsole meist beliebigen JavaScript-Code im Kontext der aktuellen Seite auszuführen.

Öffnen Sie zunächst die Konsole und machen Sie sich mit der Ansicht vertraut. Geben Sie anschließend in die untere Eingabezeile der Konsole console.log('Hello World'); ein und drücken Sie Enter. Dies führt dazu dass die Nachricht "Hello World" in der Konsole ausgegeben wird.

Versuchen Sie abschließend aus der Konsole heraus das Logger-Objekt der aktuellen HTML-Seite anzusteuern und die Nachricht "called from the console" auszugeben.

Abgerufen von „https://glossar.hs-augsburg.de/w/index.php?title=MMProg:WiSe2015:Praktikum:Aufgabe_1:Teil_2&oldid=38254“