JavaScript Die ersten Schritte. Holger Chudek Perfect Chain

(1)

JavaScript 

Die ersten Schritte

Holger Chudek

Perfect Chain

(2)

INHALTE UND ZIELSETZUNG

๏ Grundlagen zu Javascript vermitteln 

๏ Anfangshürden abbauen 

๏ Spass am Programmieren mit JavaScript vermitteln 

๏ Anwendungsfelder in Notes / Domino aufzeigen 

ZIEL

(3)

JavaScript  Die ersten Schritte

Holger Chudek Perfect Chain

INHALTE UND ZIELSETZUNG

๏Grundlagen zu Javascript vermitteln 

๏Anfangshürden abbauen 

๏Spass am Programmieren mit JavaScript vermitteln 

๏Anwendungsfelder in Notes / Domino aufzeigen 

๏Einstieg erleichtern

ZIEL 2

(4)

20 min 10 min 25 min 

10 min

25 min

3

๏Grundlagen / Theorie

๏Arbeitsumgebung einrichten : Firefox 35

๏Praxis

– Kleine Aufgaben mit der Firefox-Umgebung 

๏DDE : Theorie

– ClientSide JavaScript (CSJS) – ServerSide JavaScript (SSJS) 

๏DDE : Praxis

AGENDA 3

ÜBERSICHT

๏Allgemeines

๏Funktionen

๏Variablen

๏Typen

๏Operatoren

๏Schleifen und Bedingungen

GRUNDLAGEN 4

(5)

5 ALLGEMEINES

๏JavaScript <> Java

๏Interpretierte Sprache

๏Objekte

๏Klassen sind möglich

๏Bibliotheken sind möglich

๏„loose typing“ : Lose Typisiert

GRUNDLAGEN

FUNKTIONEN

๏function myFunc(){}

๏function (){}

๏function myFunc(){return myVal}

๏Function(){return myVal}

GRUNDLAGEN 6

(6)

7 VARIABLEN

๏Var i = 0;

๏i=0; (Achtung, Global)

๏Var i <> I

๏Globale und lokale Variablen / Gültigkeitsbereiche

GRUNDLAGEN 7

DATENTYPEN

๏string

๏number

๏boolean

๏object

๏(null)

๏(undefined)

GRUNDLAGEN 8

(7)

9 OPERATOREN

๏Vergleichsoperatoren – „=“ ist eine Zuweisung !!

– „==“ macht eine Typkonvertierung

– „===“ macht einen typabhängigen Vergleich – „<“, „<=“, „>“, „>=“, „!=“, „!==“

๏Logische Operatoren – „&&“ (und) , „||“ (oder)

GRUNDLAGEN

SCHLEIFEN

๏for(Init;Bedingung;Inkrement){}

๏while(Bedingung){}

๏Break

– Sofortiger Abbruch der Schleife

๏Continue

– Nächster Schleifendurchlauf starten

GRUNDLAGEN 10

(8)

11 BEDINGUNGEN (1)

๏IF - ELSE

GRUNDLAGEN 11

BEDINGUNGEN (2)

๏„?“

๏SWITCH

GRUNDLAGEN 12

(9)

13 EINGABEN / AUSGABEN

๏Prompt

๏Alert

๏Confirm

๏console.log

GRUNDLAGEN

๏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

ARBEITSUMGEBUNGEN 14

(10)

15 FIREFOX EINRICHTEN

๏Einrichten / prüfen

– Aktueller Firefox mit JS-Konsole – Web-Developer AddIn

– Firebug

PRAXIS 15

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

PRAXIS 16

(11)

17 KATAS

๏FizzBuzz

๏Römische Nummern

๏Arabische Nummern

๏Taschenrechner

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

PRAXIS 18

(12)

19 RÖMISCHE NUMMERN (SCHWIERIGKEIT : SEHR SCHWER)

๏Umsetzung von römischen zu arabischen Nummern 

๏Eingabe einer römischen Nummer 

๏Die korrespondierende arabische Nummer wird ausgegeben

PRAXIS 19

ARABISCHE NUMMERN ( SCHWIERIGKEIT : SCHWER)

๏Umsetzung von Arabischen zu Römischen Nummern  

๏Eingabe einer arabischen Nummer 

๏Ausgegeben wird die korrespondierende römische Nummer

PRAXIS 20

(13)

21 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) PRAXIS

THEORIE

๏Benutzung

๏Clientseitiges JavaScript

๏Serverseitiges JavaScript

Domino Designer 22

(14)

23 JAVASCRIPT : SERVERSEITIG / CLIENTSEITIG (SSJS / CSJS)

JAVASCRIPT IM CLIENT

๏Kann im Client an vielen Stellen benutzt werden : Masken-Events, Felder-Events

(15)

25 JAVASCRIPT : WEBELEMENTE

๏Alle Elemente, die fürs Web verwendet werden – OnKeyDown, onKeyUp, onMouseOut...

Domino Designer

PRAXIS

(16)

27 SERVERSIDE JAVASCRIPT (SSJS)

๏Nur für XPages…

๏Xpages haben Client- und Serverseitiges Javascript

KATAS : ÜBERSICHT

๏Katas Client:

– Feldvalidierung

– Produkt berechnen und eintragen 

๏Katas Server

– Datenbank-Eigenschaften auslesen + anzeigen

(17)

29 KATA : FELDVALIDIERUNG (1)

๏Xpage oder Notes-Maske mit mehreren Feldern 

๏ Feldvalidierung Nummer, Länge

๏Fehler ausgeben wenn Kriterium nicht stimmt

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

(18)

31 KATA : AUSLESEN UND ANZEIGEN DATENBANKNAME

๏Auslesen des aktuellen Datenbanknamens 

๏Ausgabe in einer Meldungs-Box oder im Dokument

EXKURS XPAGES

๏Globale Objekte im SSJS – Database

– Session

– currentDocument 

๏Sonderbehandlung – alert, prompt, confirm 

(19)

33

๏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 Anlagen

Rückfragen / Kontakt

VIELEN DANK FÜR DIE AUFMERKSAMKEIT

Für Rückfragen : Holger Chudek

Perfect Chain info@perfect-chain.de

34