Stand und Ausblick

• Einführung: 26.04.2017, 16.00 Uhr (c.t.), PC Pool • Übung: 03.05.2017, 16.00 Uhr, PC Pool • Übung: 10.05.2017, 16.00 Uhr, HS 020 • Übung: 31.05.2017, 16.00 Uhr, HS 020 • Übung: 21.06.2017, 16.00 Uhr, HS 020 • Klausurvorbereitung: 12.07.2017, 16.00 Uhr, HS 020

31.05.2017

IT-Management Übung SS 2017

JavaScript – was ist das eigentlich? JavaScript ist eine vollwertige Programmiersprache und ermöglicht Anwendungen im Web! JavaScript ist Web-Entwicklung und geht weit über Web-Design hinaus (HTML und CSS ermöglichen Web-Design) Achtung: JavaScript hat nichts mit Java zu tun, trotz Namensähnlichkeit Definition:

5 kann z. B. als Text bezeichnet werden und später kann man das ändern, das 5 als Zahl interpretiert wird.

JavaScript ist eine dynamisch typisierte, … , interpretierte Programmiersprache Interpretiert heißt, der Code wird genau dann analysiert und in Instruktionen übersetzt, wenn er auch ausgeführt wird.

31.05.2017

IT-Management Übung SS 2017

JavaScript in HTML einbinden … alert("Hallo Welt"); JavaScript ist nicht aktiv!

Der Script-Tag sollte am Ende des Bodys stehen. So wird erst alles sichtbare geladen und dann die unsichtbaren Skripte.

Der noscript-Tag ist ebenso wichtig, wie der script-Tag, damit der Nutzer weiß, dass sein JavaScript z. B. im Browser abgeschaltet ist.

…

31.05.2017

IT-Management Übung SS 2017

JavaScript in HTML einbinden – Übungsaufgabe 8 Binde folgendes JavaScript in HTML ein. Alert ist ein Funktionsaufruf. Fast alle Aktionen in JavaScript werden durch Funktionsaufrufe erreicht.

… alert("Hallo Welt");

Alert öffnet ein Dialogfenster im Browser.

JavaScript ist nicht aktiv!

Abschluss immer durch Semikolon

…

31.05.2017

IT-Management Übung SS 2017

In der Klammer stehen die Parameter, die übergeben werden sollen. Dadurch können Funktionen vielseitig gestaltet werden. Parameter für alert sind die Informationen die via Dialog übergeben werden sollen.

JavaScript-Datei in HTML einbinden …

Script-Dateien enden auf .js

JavaScript ist nicht aktiv! Wird eine Script-Datei eingebunden, bleibt der Tag-Body leer.

…

Der Script-Tag darf trotzdem nie! als leeres Tag geschrieben werden (

31.05.2017

IT-Management Übung SS 2017

Rechnen mit JavaScript

… 7+3=

Das Ergebnis wird als Dialog angezeigt.

alert(7+3); JavaScript beherrscht die 4 Grundrechenarten

JavaScript ist nicht aktiv! …

31.05.2017

IT-Management Übung SS 2017

Rechnen mit JavaScript Das Ergebnis ist allerdings nicht sonderlich hilfreich…

31.05.2017

IT-Management Übung SS 2017

Rechnen mit JavaScript Funktion, die direkt ins Dokument schreibt wird benötigt: … 7+3= document.write(7+3); JavaScript ist nicht aktiv! …

31.05.2017

IT-Management Übung SS 2017

Das Ergebnis wird im Text angezeigt.

Rechnen mit JavaScript: Übungsaufgabe 9 Rechenart

Operator

Addition

+

Subtraktion

-

Multiplikation

*

Division

/

Divisionsrest /Modulo

%

1. Probiere die vier Grundrechenarten aus 2. Prüfe die Notwenigkeit von Klammern vs. ‚Punkt vor Strich‘ 3. Was ergibt 5%3 und warum?

31.05.2017

IT-Management Übung SS 2017

Variablen in JavaScript Für eine strukturierte Berechnung werden Variablen verwendet. Variablen sind Speicherstellen, in der ein Wert abgelegt wird, um ihn später wiederhervorzuholen.

Variable wird deklariert mit var

var meineVariable; meineVariable = 3*3; Var andereVariable = 5;

Reihenfolge: Variable = Wert

31.05.2017

Deklaration und Wert können auch in einer Zeile stehen.

Name der Variable: Regeln für die Namensvergabe: 1. Start mit Kleinbuchstabe (Konvention) 2. Jedes weitere Wort startet mit Großbuchstaben (CamelCase) & kein Leerzeichen 3. Buchstaben, Zeichen “_“ und “&“, Ziffern 4. Sprechende Variablenverwendung

IT-Management Übung SS 2017

Variablen aus JavaScript auslesen Der Variablenwert kann überall im Quelltext stehen, wo auch der Wert der Variable stehen könnte.

Document.write(3 * meineVariable);

Hier könnte ebenso “9“ stehen.

Variablen sollten generell so benannt werden, dass sie dem Inhalt entsprechen (bspw. vorname, alter ).

IT-Management Übung SS 2017

Rechnen mit Variablen in JavaScript: Übungsaufgabe 10 Erstellen Sie eine Berechnung, wie viele Bücher in ihrem Wohnzimmer stehen: Zusatzinformationen: 1. Sie haben zwei identische Regale 2. Ein Regal hat 8 Regalböden 3. Ein Regalboden hat 20 Bücher 4. Neben einem Regal stehen auch noch 17 Bücher gestapelt

31.05.2017

IT-Management Übung SS 2017

konstante Variablen in JavaScript Java Script kennt keine Konstanten, also unveränderliche Werte. Konstante Werte (Konvention) : var GROSSBUCHSTABEN

var TAGE_IM_JAHR = 365 ; document.write (TAGE_IM_JAHR / buecher);

31.05.2017

IT-Management Übung SS 2017

Zahlentheorie Rechnen funktioniert einfach -> aber was passiert im Hintergrund? Generelle Probleme von Zahlen in Programmiersprachen: 1. Unterschied ganze Zahlen (integer) und Kommazahlen (float) (Datentyp Number bei pos. Zahlen, aber Fließkommawerte mit doppelter Genauigkeit)) 2. Zahlen können nicht unbegrenzt groß werden (-9.007.199.254.740.992 bis 9.007.199.254.740.992) 3. Nachkommastellen sind begrenzt (aber genauer als wir es benötigen)

31.05.2017

IT-Management Übung SS 2017

Zahlentheorie var ergebnis = 7/11; Ergebnis: document.write(ergebnis); Ergebnis mit toFixed(): document.write(ergebnis.toFixed(2)); Mit dem Punkt wird eine Methode für ein Objekt aufgerufen. Hier ist das Objekt ergebnis und die Methode toFixed()

31.05.2017

toFixed ermöglicht die Darstellung des gerundeten Nachkommawertes.

IT-Management Übung SS 2017

In der Klammer steht die Anzahl der Dezimalstellen.

Interaktivität mit JavaScript function zaehleBuecher (){ var regale = 2; var regalBoeden = 8;

Die geschweiften Klammern umfassend den Code der Funktion.

var buecherJeBoden = 20; var buecherNebenRegal = 17; var buecherJeRegal = regalBoeden * buecherJeRegal; var buecher = buecherJeRegal * regale + buecherNebenRegal; document.write(buecher); } function leitet eine Funktionsdefinition ein.

31.05.2017

Funktionsname ermöglicht das spätere aufrufen der Funktion.

IT-Management Übung SS 2017

Das Klammernpaar muss dem Funktionsnamen folgen. Hier könnten weitere Parameter der Funktion stehen,

Interaktivität mit JavaScript - Eventhandler function zaehleBuecher(){ … alert(buecher); } Klick mich! document.write gibt nur genau an der Stelle etwas aus, wo es auch steht. Es funktioniert nicht auf Aufforderung. Deswegen muss es hier durch alert ersetzt werden.

31.05.2017

Wir erstellen einen Button, der als Button funktionieren soll (keine Formulardatenübermittlung oder -entleerung)

IT-Management Übung SS 2017

onclick bedeutet schlicht, dass bei Klick der Code ausgeführt wird, in diesem Fall wird die Funktion aufgerufen.

Interaktivität mit JavaScript - IDs function zaehleBuecher(){ … document.getElementById("ausgabe").innerHTML=buecher; } Jetzt die Zahl der Bücher anzeigen mit einer ID:

.getElementById() findet das Element auf der Seite, dessen id-Attribut dem übergebenen Parameter entspricht.

31.05.2017

Darf nicht als leeres Tag geschrieben werden.

IT-Management Übung SS 2017

Die Eigenschaft (&Variable) innerHTML gibt den Zielwert an, welcher dem vorherigen Objekt zugeordnet werden soll.

Fehleranalyse Um Fehler zu sehen, muss man sie suchen! Es gibt keine Anzeige, wenn ein Script abgebrochen wurde :( Fehleranzeige findet man in der Fehlerkonsole.

31.05.2017

IT-Management Übung SS 2017

null heißt immer, das etwas nicht definiert ist.

Fehleranalyse Das Script funktioniert nicht richtig, aber es gibt keinen Fehler in der Fehlerkonsole. -> Gehe jede Zeile von oben mit console.log(); durch und prüfe in der Konsole die angezeigten Ergebnisse auf korrekte Ausgabe. var buecher = 8; console.log(buecher);

31.05.2017

IT-Management Übung SS 2017

Zeichentheorie Neben Zahlen gibt es Zeichen, Zeichenketten -> sog. Strings “ausgabe“ -> Der Text innerhalb der Anführungszeichen ist ein String, dieser wird string literal genannt. Strings können an Funktionen übergeben werden (wie im vorherigen Bsp.). Strings können in Variablen geschrieben und wieder ausgelesen werden. var name=„Laura"; document.getElementById(name);

31.05.2017

IT-Management Übung SS 2017

Zeichentheorie – Verkettung von Strings Man kann Strings durch ein “+“ miteinander verketten, dies wird Stringkonkatenation genannt.

var name="Laura"; document.getElementById(name); var gruss= "Hallo " + name + ", wie geht es dir?"

Ein String ist ein Objekt, mit eigenen Methoden und Eigenschaften (hier: lenght).

31.05.2017

IT-Management Übung SS 2017

Zeichentheorie – Methoden von Strings Methode

Erläuterung

Beispiel

charAt()

Die Methode findet ein Zeichen an der n-ten Stelle

"ok".charAt(0); //=o "ok".charAt(1); //=k

indexOf()

Wo steht ein bestimmtes Zeichen?

"Beispiel".indexOf("e") //=1

lastIndexOf() Wo steht ein bestimmtes Zeichen? Gesucht von hinten.

"Beispiel".LastIndexOf(" e, 5") //=1

Ergebnis, wenn der gesuchte String nicht vorkommt.

31.05.2017

//-1

IT-Management Übung SS 2017

Eingabe von Werten – Übung 11 - Teil 1 Zurück zu den Büchern… Wir könnten Eingabefelder benötigen, um jmd. die Anzahl der Bücher selbst eingeben zu lassen. Erstelle ein neues HTML-Dokument: 1. Erstelle die benötigten Variablen, mit der Methode getElementById() und der Eigenschaft value. 2. Erstelle auch die Variablen zur Berechnung der Bücher. 3. Gebe den Variablen passende IDs (mehrwörtige IDs -> Kleinbuchstaben und Bindestrich z. B. buecher-je-regal) 4. Nach dem Script stehen die Eingabefelder (Formulare) mit dem type=„number“ und der passenden ID.

31.05.2017

IT-Management Übung SS 2017

Eingabe von Werten – Übung 11 – Teil 2 5. Der input type="number" funktioniert noch nicht in jedem Browser. Oft wird zwar nur eine zahl zur Eingabe zugelassen, der Wert aber als String interpretiert. Bei einer Addition wird eine Konkatenation ausgeführt buecherImRegal + buecherNebenRegal = buecherImRegalbuecherNebenRegal 3

+4

= 34

Lösung: füge für jeden eingelesenen Wert (nach dem Einlesen und vor der Berechnung) hinzu: regale = parseInt(regale); (für Dezimalzahlen parseFloat();) 6. Ausgabe der Anzahl aller Bücher über Klick auf einen Button.

Dynamisch typisiert

31.05.2017

IT-Management Übung SS 2017