JavaScript Die ersten Schritte. Holger Chudek Perfect Chain

Transkript

1 JavaScript Die ersten Schritte Holger Chudek Perfect Chain

2 Agenda JavaScript Grundlagen Arbeitsumgebungen Firefox (Mit Erweiterungen für Webentwickler) DDE (Domino Designer for Eclipse) Praxis Kleine Aufgaben mit Firefox DDE : Theorie ClientSide JavaScript (CSJS) ServerSide JavaScript (SSJS) DDE : Praxis

3 JavaScript Grundlagen Allgemeines Funktionen Variablen Typen Operatoren Schleifen und Bedingungen

4 JavaScript Grundlagen Allgemeines JavaScript <> Java Interpretierte Sprache Alles sind Objekte Klassen sind möglich Bibliotheken sind möglich loose typing : Lose Typisiert

5 JavaScript Grundlagen Funktionen function myfunc(){} function (){} function myfunc(){return myval}; Function(){return myval}

6 Var i = 0; JavaScript Grundlagen Variablen i=0; (Achtung, Global) Var i <> I!!!

7 string number boolean object null undefined JavaScript Grundlagen Typen

8 JavaScript Grundlagen Operatoren Vergleichsoperatoren = ist eine Zuweisung!! == macht eine Typkonvertierung === macht einen Typabhängigen Vergleich <, <=, >, >=,!=,!== Logische Operatoren && (und), (oder)

9 JavaScript Grundlagen Schleifen for(init;bedingung;inkrement){} while(bedingung){} Break Sofortiger Abbruch der Schleife Continue Nächster Schleifendurchlauf starten

10 If-Else JavaScript Grundlagen Bedingungen Switch

11 Arbeitsumgebungen Firefox (V 19.x) Mit Entwickler-Erweiterungen : Firebug Web-Deveoper-Toolkit Domino Designer für Eclispe(DDE) Integrierte Umgebung

12 Praxis Firefox Einrichten Aktueller Firefox mit JS-Konsole Web-Developer AddIn

13 Praxis Firefox Katas : FizzBuzz Römische Nummern Arabische Nummern Taschenrechner

14 FizzBuzz : Praxis : Firefox FizzBuzz Geben Sie die Zahlen von 1 bis 100 aus Jede Zahl, die durch 3 teilbar ist, wird als Fizz ausgegeben Jede Zahl, die durch 5 teilbar ist, wird als Buzz ausgegeben Jede Zahl, die durch 15 teilbar ist, wird als FizzBuzz ausgegeben

15 Praxis : Firefox Römische Nummern Umsetzung von römischen zu arabischen Nummern : Eingabe einer römischen Nummer Die korrespondierende arabische Nummer wird ausgegeben

16 Praxis : Firefox Arabische Nummern Umsetzung von Arabischen zu Römischen Nummern : Eingabe einer arabischen Nummer Ausgegeben wird die korrespondierende römische Nummer

17 Praxis : Firefox Taschenrechner Abbilden eines Taschenrechners : Eingabe von plus Zahl1 Zahl2 Gibt die Summe von Zahl 1 und Zahl 2 aus Eingabe von minus Zahl1 Zahl2) Gibt die Differenz von Zahl1 und Zahl 2 aus Eingabe von mal Zahl1 Zahl2 Gibt das Produkt von Zahl 1 und Zahl 2 aus Eingabe von durch Zahl1 Zahl2 Gibt den Quotient von Zahl1 und Zahl 2 aus Oder Direkter Aufruf der jeweiligen Funktion Plus, Mal, Minus, Durch

18 Benutzung Domino Designer Theorie Clientseitiges JavaScript Serverseitiges JavaScript

19 Domino Designer Theorie

20 Domino Designer Theorie : Benutzung Client Kann im Client an vielen Stellen benutzt werden : Masken-Events, Felder-Events

21 Domino Designer Theorie : Benutzung Web Alle Elemente, die fürs Web verwendet werden OnKeyDown, onkeyup, onmouseout...

22 Domino Designer Praxis

23 Domino Designer Theorie : Server Side Nur für XPages... Xpages haben Client- und Serverseitiges Javascript

24 Katas Client: Domino Designer Praxis Feldvalidierung Produkt berechnen und eintragen Katas Server Datenbank-Eigenschaften auslesen + anzeigen

25 Domino Designer Praxis : Feldvalidierung Xpage oder Notes-Maske mit mehreren Feldern: Feldvalidierung Nummer, Länge Fehler ausgeben wenn Kriterium nicht stimmt

26 Domino Designer Praxis : Feldvalidierung Xpage oder Notes-Maske mit mehreren Feldern: Werte werden in Feld 1 und Feld 2 eingegeben Nach Eingabe in Feld 2 oder nach betätigen einer Schaltfläche wird in Feld 3 die Summe / das Produkt angezeigt Fehler ausgeben wenn Kriterium nicht stimmt

27 Domino Designer Praxis : Datenbankname Auslesen des aktuellen Datenbanknamens Ausgabe in einer Meldungs-Box oder im Dokument

28 Domino Designer Exkurs XPages Globale Objekte im SSJS Database Session currentdocument Sonderbehandlung alert, prompt, confirm Type Ahead für Objekte

29 Anlagen Hilfreiche Webseiten Bücher