ITG-Wiki

Diese Seite ist nicht editierbar. Sie können den Quelltext sehen, jedoch nicht verändern. Kontaktieren Sie den Administrator, wenn Sie glauben, dass hier ein Fehler vorliegt.
====== Lektion 1: Einführung ======

> **JavaScript** (kurz **JS**) ist eine Skriptsprache, die ursprünglich für dynamisches HTML in Webbrowsern entwickelt wurde, um Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern... [[http://de.wikipedia.org/wiki/JavaScript | Wikipedia]]

> JavaScript is used by 89.1% of all the websites [[http://w3techs.com/technologies/details/cp-javascript/all/all | w3techs.com]]

Hinweis: Auch wenn der Name es vermuten lässt, hat JavaScript nichts (mehr) mit der Programmiersprache [[http://java.com/de/download/whatis_java.jsp|Java]] zu tun!

===== Verwendung =====
JavaScript wird vor allem Client-Seitig eingesetzt und ermöglicht eine direkte Manipulation von HTML-Elementen.

So werden einfache Aufgaben, wie [[http://jqueryvalidation.org/files/demo/ | Html-Formulare validieren]], EMail-Adressen verschlüsseln oder Dialogfenster anzeigen, heutzutage per JavaScript realisiert.

Sehr wichtig ist mittlerweile auch die Möglichkeit, Aufrufe an den Server zu schicken, ohne dass die Seite neu geladen werden muss ([[http://de.wikipedia.org/wiki/Ajax_%28Programmierung%29|AJAX]]). Dies ermöglicht zum Beispiel eine Autovervollständigung beim Suchen.

Es existieren sehr viele Erweiterungen / Bibliotheken für JavaScript und bieten so den einfachen Einbau von [[http://www.jssor.com/|Bilderslidern]], [[https://www.datatables.net/examples/basic_init/multi_col_sort.html|interaktiven Tabellen]], [[http://www.highcharts.com/demo/line-time-series|Diagrammen]] oder [[http://bl.ocks.org/mbostock/1345853 | Animationen]].

===== Funktionsweise =====
Wie schon erwähnt, wird JavaScript "client-seitig" im Browser ausgeführt. Im Unterschied zu PHP, welches auf dem Server ausgeführt wird und nur das Ergebnis an den Client zurück gesendent wird. 

Abbildung 1.1 zeigt die verschiedenen Schritte, die notwendig sind, um bspw. die Seite von Google aufzurufen.
{{:javascripting:request_response.png?350 | Abbildung 1.1: Request-Response Modell}}
  - **Anfrage (Request)** \\ Eintippen in die Adresszeile des Browsers sendet eine Anfrage an den entsprechenden Server.
  - **Server** \\ Der Server nimmt die Anfrage entgegen und entscheidet, was zu tun ist. Bspw. führt ein PHP-Script aus und generiert daraus ein HTML-Dokument.  
  - **Antwort (Response)** \\ Dieses HTML-Dokument ist das Ergebnis der Anfrage und wird an den Client geschickt. Die Antwort kann neben HTML-Dateien auch aus anderen Dateitypen wie CSS, Bildern, aber auch JavaScript-Dateien bestehen.
  - **Client (Browser)** \\ Je nach Dateityp generiert der Browser aus der Antwort irgendeine Form von Darstellung (Zeigt bspw. die HTML-Seite an). Wird eine JavaScript-Datei geliefert, wird diese sofort im Browser ausgeführt.

**Vorteile:**
  * Weniger Last auf dem Server, da die Ausführung beim Client läuft
  * Es kann auf spezielle Einstellungen (bspw. Fenstergröße) Rücksicht genommen werden
  * Der Benutzer bekommt bei Formularen sofort Rückmeldung bei Falscheingaben.
**Nachteile:**
  * Die Last liegt nun beim Client (Der eigene Rechner hat mehr zu tun)
  * Das Laden der Seite dauert unter Umständen sehr lange
  * Die Seite verändert sich während dem Ladevorgang
  * Die Ausführung kann sich von Browser zu Browser leicht unterscheiden (Probleme vor allem alten Internet Explorer Versionen)

===== Sicherheit =====
Über das Internet werden im Browser teilweise sehr wichtige und kritische Daten (Bankdaten, EMail-Login usw.) verschickt. Hätte nun eine aufgerufene Seite Schadcode, so könnte dieser u.U. Daten ausgelesen und versenden. Damit dies nicht (so leicht) passiert, wird JavaScript in einer sogenannten SandBox ausgeführt. Das bedeutet, dass die Ausführung isoliert geschieht und kein Zugriff auf andere Tabs im Browser oder gar das Dateisystem möglich sind.

Trotzdem kann JavaScript nervig oder sogar gefährlich sein. So kann JavaScript ungefragt PopUps anzeigen, direkt auf andere Seiten weiterleiten, das Browserfenster schließen oder es kann ungewollt Schadcode enthalten. Einige dieser Sicherheitslücken sind mittlerweile von neueren Browsern geschlossen geworden. In älteren Browsern besteht das Problem weiterhin (Also immer Updaten!).


===== Geschichte =====
Brendan Eich entwickelte um 1995 die Scriptsprache "LiveScript". Diese wurde in den Browser der Softwarefirma Netscape eingebettet und diente dort u.a. für die Überprüfung von Formulareingaben. Zusammen mit Sun Microsystems wurde die Interaktion zwischen JavaApplets und LiveScript forciert - daher der neue Name **JavaScript**.

JavaScript entwicklte sich stetig weiter und kann bspw. auf Bilder zugreifen. Microsoft veröffentlichte 1996 den ersten JavaScript-fähigen Internet Explorer.

Die European Computer Manufacturers Association veröffentlichte in Zusammenarbeit mit Netscape einen ersten Standard ECMA-262 (ECMA-Script). Diese wurde knapp ein Jahr später zur ISO-Norm ISO/IEC 16262:1998 Information technology – ECMAScript language specification.

Seitdem kommen immer wieder neue Versionen auf den Markt...

===== Beispiel: Hello World =====

JavaScript Code kann direkt in eine HTML-Seite im <head>-Bereich eingebettet werden.
<code html>
<html>
  <head>
    <script>
      ... dein Code hier ...
    </script>
  </head>
  <body>
    ... weitere HTML-Elemente ...
  </body>
</html>  
</code>


Dieser Code-Schnipsel erzeugt eine Meldung im Browserfenster:
<code javascript>
<script>
  alert("Hello World!");
</script>
</code>

Dieser Code erzeugt eine Log-Meldung und ist nur in der JavaScript-Konsole des Browsers zu sehen:
<code javascript>
<script>
  console.log("Hello World");
</script>
</code>

===== Die JavaScript Konsole =====
In jedem modernen Browser (FireFox, Chrome) oder auch dem "Internet Explorer" finden sich mittlerweile Entwickler-Tools. Hier werden Informationen zu HTML, CSS oder Netzwerkverbindungen angezeigt. Gestartet wird sie in der Regel mit der Taste "F12".

In den Entwickler-Tools ist immer auch eine JavaScript Konsole enthalten.
Dort werden Debug-Meldungen (Fehler, Warnungen oder Infos) bei der JavaScript-Ausführung der Seite angezeigt. 

Weiterhin gibt es eine Live-Konsole, wo direkt JavaScript-Code ausgeführt werden kann. Bei Problemen oder Nichtausführung von JavaScript-Code, ist die Konsole immer ein guter Einstiegspunkt zur Fehlersuche.

{{:javascripting:firefox_console_with_error.png?700|JavaScript Konsole im FireFox}}
**JavaScript Konsole im FireFox:** Die Abbildung zeigt einen typischen Tippfehler ("loog" statt "log") und die Konsole gibt mir Hinweise, was nicht funktioniert.

Der Code kann entweder mit einem Klick auf den Auführen-Button oder der Tastenkombination Strg+Enter ausgeführt werden.

===== Zusammenfassung =====
In dieser Lektion haben wir etwas über die Entstehung von JavaScript und über die Ausführung im Browser gelernt. Weiterhin haben wir Vor- und Nachteile beim Einsatz von JavaScript gesehen. Wir haben weiterhin die Entwicklerkonsole im Browser kennengelernt.

==== Aufgabe ====
  - Öffnet einen Browser eures Vertrauens
  - Untersuche deine Lieblingsseite mit der JavaScript Konsole
  - Macht euch mit der Entwicklerkonsole und ihren Funktionen vertraut
  - Erstellt in eurem Arbeitsverzeichnis einen Ordner „JavaScript/Lektion_1“ \\ und dort eine Datei „index.html“ aus dem "Hello World" Beispiel
  - Öffnet die HTML Datei im Browser und führt das „Hello World“ Beispiel aus

[[javascripting:lektion_02|Lektion 2: JavaScript Grundlagen >>]]