JavaScript Die ersten Schritte

JavaScript
Die ersten Schritte
Holger Chudek
Perfect Chain
ZIEL
INHALTE UND ZIELSETZUNG
๏ Grundlagen zu Javascript vermitteln
๏ Anfangshürden abbauen
๏ Spass am Programmieren mit JavaScript
vermitteln
๏ Anwendungsfelder in Notes / Domino aufzeigen
๏ Einstieg erleichtern
2
AGENDA
20 min ๏ Grundlagen / Theorie
10 min ๏ Arbeitsumgebung einrichten : Aktueller Firefox
25 min
๏ Praxis
– Kleine Aufgaben mit der Firefox-Umgebung
10 min ๏ DDE : Theorie
– ClientSide JavaScript (CSJS)
– ServerSide JavaScript (SSJS)
25 min ๏ DDE : Praxis
3
GRUNDLAGEN
ÜBERSICHT
๏ Allgemeines
๏ Funktionen
๏ Variablen
๏ Typen
๏ Operatoren
๏ Schleifen und Bedingungen
4
GRUNDLAGEN
ALLGEMEINES
๏ JavaScript <> Java
๏ Interpretierte Sprache
๏ Objekte
๏ Klassen sind möglich
๏ Bibliotheken sind möglich
๏ „loose typing“ : Lose Typisiert
5
GRUNDLAGEN
FUNKTIONEN
๏ function myFunc(){}
๏ function (){}
๏ function myFunc(){return myVal}
๏ Function(){return myVal}
6
GRUNDLAGEN
VARIABLEN
๏ Var i = 0;
๏ i=0;
(Achtung, Global)
๏ Var i <> I
๏ Globale und lokale Variablen / Gültigkeitsbereiche
7
GRUNDLAGEN
DATENTYPEN
๏ string
๏ number
๏ boolean
๏ object
๏ (null)
๏ (undefined)
8
GRUNDLAGEN
OPERATOREN
๏ Vergleichsoperatoren
– „=“ ist eine Zuweisung !!
– „==“ macht eine Typkonvertierung
– „===“ macht einen typabhängigen Vergleich
– „<“, „<=“, „>“, „>=“, „!=“, „!==“
๏ Logische Operatoren
– „&&“ (und) , „||“ (oder)
9
GRUNDLAGEN
SCHLEIFEN
๏ for(Init;Bedingung;Inkrement){}
๏ while(Bedingung){}
๏ Break
– Sofortiger Abbruch der Schleife
๏ Continue
– Nächster Schleifendurchlauf starten
10
GRUNDLAGEN
BEDINGUNGEN (1)
๏ IF - ELSE
11
GRUNDLAGEN
BEDINGUNGEN (2)
๏ „?“
๏ SWITCH
12
GRUNDLAGEN
EINGABEN / AUSGABEN
๏ Prompt
๏ Alert
๏ Confirm
๏ console.log
13
ARBEITSUMGEBUNGEN
๏ Firefox (V 35.x)
– Enthält JavaScript-Umgebung und Entwickler-Erweiterungen :
• Firebug
• Web-Developer-Toolkit
๏ Domino Designer für Eclispe(DDE)
– Integrierte Umgebung
– Ab 8.5.2
14
PRAXIS
FIREFOX EINRICHTEN
๏ Einrichten / prüfen
– Aktueller Firefox mit JS-Konsole
– Web-Developer AddIn
– Firebug
15
PRAXIS
SPASS MIT JAVASCRIPT
๏ Fliesskommazahlen
–
0,1 + 0,2 // (0,1 + 0,2) + 0,3 // 0,1 + (0,2 + 0,3)
๏Impliziete Typumwandlung
- 3 + True //„2“ + 3 // 1 + 2 + „3“ // 1 + „2“ + 3
๏Bitweise arithmetische Operationen
- 8 | 1 // (8).toString(2) // (1).toString(2)
๏null und NaN
- 0 == null // NaN == NaN // NaN != NaN
๏ truthiness und falsy
-function check(x){alert !x} mit „null“, „false“, false, true, 0, undefined
๏Primitive Datentypen / Objektwrapper
-„hello“.someProperty = „17“; alert(„hello“.someProperty)
16
PRAXIS
KATAS
๏ FizzBuzz
๏ Römische Nummern
๏ Arabische Nummern
๏ Taschenrechner
17
PRAXIS
FIZZ BUZZ (SCHWIERIGKEIT : EINFACH)
๏ 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
18
PRAXIS
RÖMISCHE NUMMERN (SCHWIERIGKEIT : SEHR SCHWER)
๏ Umsetzung von römischen zu arabischen
Nummern
๏ Eingabe einer römischen Nummer
๏ Die korrespondierende arabische Nummer wird
ausgegeben
19
PRAXIS
ARABISCHE NUMMERN ( SCHWIERIGKEIT : SCHWER)
๏ Umsetzung von Arabischen zu Römischen
Nummern ๏ Eingabe einer arabischen Nummer
๏ Ausgegeben wird die korrespondierende römische
Nummer
20
PRAXIS
TASCHENRECHNER (SCHWIERIGKEIT : EINFACH)
๏ 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(x, y), mal(x,y), minus(x,y), durch(x,y) / geteilt(x,y)
21
Domino Designer
THEORIE
๏ Benutzung
๏ Clientseitiges JavaScript
๏ Serverseitiges JavaScript
22
Domino Designer
JAVASCRIPT : SERVERSEITIG / CLIENTSEITIG (SSJS / CSJS)
23
Domino Designer
JAVASCRIPT IM CLIENT
๏ Kann im Client an vielen Stellen benutzt werden :
Masken-Events, Felder-Events
24
Domino Designer
JAVASCRIPT : WEBELEMENTE
๏ Alle Elemente, die fürs Web verwendet werden
– OnKeyDown, onKeyUp, onMouseOut...
25
Domino Designer
PRAXIS
26
Domino Designer
SERVERSIDE JAVASCRIPT (SSJS)
๏ Nur für XPages…
๏ Xpages haben Client- und Serverseitiges
Javascript
27
Domino Designer
KATAS : ÜBERSICHT
๏ Katas Client:
– Feldvalidierung
– Produkt berechnen und eintragen
๏ Katas Server
– Datenbank-Eigenschaften auslesen + anzeigen
28
Domino Designer
KATA : FELDVALIDIERUNG (1)
๏ Xpage oder Notes-Maske mit mehreren Feldern
๏ Feldvalidierung Nummer, Länge
๏ Fehler ausgeben wenn Kriterium nicht stimmt
29
Domino Designer
KATA : FELDVALIDIERUNG (2)
๏ 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
30
Domino Designer
KATA : AUSLESEN UND ANZEIGEN DATENBANKNAME
๏ Auslesen des aktuellen Datenbanknamens
๏ Ausgabe in einer Meldungs-Box oder im
Dokument
31
Domino Designer
EXKURS XPAGES
๏ Globale Objekte im SSJS
– Database
– Session
– currentDocument
๏ Sonderbehandlung
– alert, prompt, confirm
๏ Type Ahead für Objekte
32
Anlagen
๏ Hilfreiche Webseiten
– http://de.selfhtml.org/javascript/sprache/
– http://content.codersdojo.org/home/
– http://http://www.w3schools.com/js/
๏ Bücher
- Das Beste an JavaScript : ISBN 978-3-89721-876-5
- JavaScript effektiv : ISBN 978-3-86490-127-0
- JavaScript Entwurfsmuster : ISBN 978-3-7723-6488-4
33
Rückfragen / Kontakt
VIELEN DANK FÜR DIE
AUFMERKSAMKEIT
Für Rückfragen :
Holger Chudek
Perfect Chain
[email protected]
34