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:, 16.00 Uhr, HS 020 Übung: 21.06.2017, 16.00 Uhr, HS 020 Klausurvorbereitung: 12.07.2017, 16.00 Uhr, HS 020
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.
JavaScript in HTML einbinden <body> <script> alert("hallo Welt"); <noscript> JavaScript ist nicht aktiv! </noscript> </body> 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.
JavaScript in HTML einbinden Übungsaufgabe 8 Binde folgendes JavaScript in HTML ein. <body> </body> <script> alert("hallo Welt"); <noscript> JavaScript ist nicht aktiv! </noscript> Abschluss immer durch Semikolon Alert ist ein Funktionsaufruf. Fast alle Aktionen in JavaScript werden durch Funktionsaufrufe erreicht. Alert öffnet ein Dialogfenster im Browser. 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 <body> <script src="meinscript.js"> <noscript> JavaScript ist nicht aktiv! </noscript> </body> Script-Dateien enden auf.js Wird eine Script-Datei eingebunden, bleibt der Tag-Body leer. Der Script-Tag darf trotzdem nie! als leeres Tag geschrieben werden (<script/>
Rechnen mit JavaScript <body> <span> 7+3= </span> <script> alert(7+3); <noscript> JavaScript ist nicht aktiv! </noscript> </body> Das Ergebnis wird als Dialog angezeigt. JavaScript beherrscht die 4 Grundrechenarten
Rechnen mit JavaScript Das Ergebnis ist allerdings nicht sonderlich hilfreich
Rechnen mit JavaScript Funktion, die direkt ins Dokument schreibt wird benötigt: <body> <span> 7+3= </span> <script> document.write(7+3); <noscript> JavaScript ist nicht aktiv! </noscript> </body> 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?
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. var meinevariable; meinevariable = 3*3; Var anderevariable = 5; Reihenfolge: Variable = Wert Deklaration und Wert können auch in einer Zeile stehen. Variable wird deklariert mit var 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
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 ).
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
konstante Variablen in JavaScript Java Script kennt keine Konstanten, also unveränderliche Werte. Konstante Werte (Konvention) : var GROSSBUCHSTABEN <script> var TAGE_IM_JAHR = 365 ; document.write (TAGE_IM_JAHR / buecher);
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)
Zahlentheorie <script> var ergebnis = 7/11; Ergebnis: <script> document.write(ergebnis); Ergebnis mit tofixed(): <script> 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() tofixed ermöglicht die Darstellung des gerundeten Nachkommawertes. In der Klammer steht die Anzahl der Dezimalstellen.
Interaktivität mit JavaScript <script> function zaehlebuecher (){ } var regale = 2; var regalboeden = 8; var buecherjeboden = 20; var buechernebenregal = 17; var buecherjeregal = regalboeden * buecherjeregal; var buecher = buecherjeregal * regale + buechernebenregal; document.write(buecher); function leitet eine Funktionsdefinition ein. Funktionsname ermöglicht das spätere aufrufen der Funktion. Die geschweiften Klammern umfassend den Code der Funktion. Das Klammernpaar muss dem Funktionsnamen folgen. Hier könnten weitere Parameter der Funktion stehen,
Interaktivität mit JavaScript - Eventhandler <script> function zaehlebuecher(){ alert(buecher); } <button type="button" onclick="zaehlebuecher();"> Klick mich! </button> 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. Wir erstellen einen Button, der als Button funktionieren soll (keine Formulardatenübermittlung oder -entleerung) onclick bedeutet schlicht, dass bei Klick der Code ausgeführt wird, in diesem Fall wird die Funktion aufgerufen.
Interaktivität mit JavaScript - IDs <script> function zaehlebuecher(){ document.getelementbyid("ausgabe").innerhtml=buecher; } Jetzt die Zahl der Bücher anzeigen mit einer ID: <span id="ausgabe"></span>.getelementbyid() findet das Element auf der Seite, dessen id-attribut dem übergebenen Parameter entspricht. Darf nicht als leeres Tag geschrieben werden. 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. 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. <script> var buecher = 8; console.log(buecher);
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. <script> var name= Laura"; document.getelementbyid(name);
Zeichentheorie Verkettung von Strings Man kann Strings durch ein + miteinander verketten, dies wird Stringkonkatenation genannt. <script> 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).
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() lastindexof() Wo steht ein bestimmtes Zeichen? Wo steht ein bestimmtes Zeichen? Gesucht von hinten. Ergebnis, wenn der gesuchte String nicht vorkommt. "Beispiel".indexOf("e") //=1 "Beispiel".LastIndexOf(" e, 5") //=1 //-1
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.
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