Teil 1: Automatisieren mit JS++ und Node.js

Kapitel 2:

Was lernen wir:

Der erste Einstieg zur Browser-Oberfläche mit reinem JS-Code, zeigt dieses Kapitel wie nach der Erweiterung mit einem Fadenkreuz und den notwendigen Events der (Tastatur) und Maus die erste Oberfläche für eine SPA im Browser entsteht. Zur Abbildung der Grafiken im Browser verwenden wir grundsätzlich skalierbare Vektorgrafik (SVG). Die Grundlagen dazu werden in diesem Kapitel erarbeitet. Dazu gehören auch Grundlagen zur Bildung von Arrays, welche Klassen-Objekte aufnehmen können.

• Die Klasse main und dessen Anwendung mit der Klassen-Ableitung C_JS

• Die erste Klassenstruktur von C_JS

• Globale und lokale Konstanten

• Die Klasse C_InitLayer und der Layer für den Browser

• Grundlagen zum Array

• Übungen zum Array für die Anwendung von Klassen und deren Methoden

• Die Klasse C_Event erweitert unsere Anwendung zur SPA

• Die Klasse main wird mit einem Fadenkreuz aus der Klasse C_CrossHairs erweitert

• Übungen mit Arrays speziell am Beispiel zum Fadenkreuz

• Das Array und seine wichtigsten Eigenschaften für die ersten Schritte

• Grundlagen der Grafik-Elemente mit SVG

• Grundsätzliche Anwendung der Klassen zur Visualisierung mit SVGs

• Praktische Beispiele zu internen SVG-Elementen

siehe Beschreibung in Abschnitt A1

siehe Beschreibung in Abschnitt A1

siehe Beschreibung in Abschnitt A1

Was lernen wir:

Erstellen einer externen JS-Datei, welche die Klassen der SVG-Elemente beinhalten soll. Erstellung und Anwendung des eigenen „private-Server“ mit node.js. Der Browser Google Chrome wird nun über den Server gestartet und die Grafik-Klasse aus der externen Datei geladen, damit SVG-Objekte im Browser angezeigt werden können. Dazu führen die System-Funktionen wie Exception, setTimeout, promice und fetch zur ersten Anwendung mit dem eigenen Framework JS++. Im Praktikum wird der setTimeout und der Callback erklärt.

• Erstellen der Datei FDB.js zum Laden der SVG-Klassen

• Wie kommt die Klasse über den Server in den Browser

• Modul mit exports anwenden

• Grundsätzliche Anwendung über den eigenen Server mit node.js

• Grundsätzliche Vorgehensweise zum Laden von Skripten über den Server

• Anwendung der Promice fetch zum Laden der Scripte aus der FDB.js-Datei

• Was passiert bei einer Exception?

• Eine Exception-Liste erstellen

• Wie werden Methoden rekursiv aufgerufen

• Wie funktioniert setTimeout

• Was ist ein Callback

• Die Anwendung eines Callback in der Methode

• Praktikum

sieh Beschreibung in Abschnitt A1

siehe Beschreibung in Abschnitt A1

Was lernen wir:

Wie SVG-Objekte für ein Projekt eingesetzt werden können. Erweiterter Ausbau eines SVG-Objektes mit JS-Code und dessen Schnittstellen zu anderen Objekten. Wie das geladene Skript in einer Objektliste gespeichert und über die Kopier-Methode im Browser abgebildet wird. Das Speichern der SVG-Elemente über den Server auf die Festplatte verstehen und anwenden.

• SVG-Elemente als selbständige Objekte ausbauen

• Versions-Unabhängigkeit erzeugen

• Die Schnittstelle RunScript des SVG-Elementes

• Die Schnittstelle Set_Datas()

• Die Methode RequestSaveProject in der Anwendung

• Hash-Code erzeugen

• Die Methode WriteProject

• Die Methode FetchWriteDatas

• Server-Programm zur Speicherung der SVG-Elemente auf die Festplatte erweitern

• Praktikum

siehe Beschreibung im Abschnitt A1

siehe Beschreibung in Abschnitt A1

Was lernen wir:

Die gespeicherten SVG-Elemente vom Datenträger in den Browser laden. Die Anwendung der eval-Funktion mit der Parameterübergabe zum Starten des SVG-Objektes nutzen. Die Methode LoadSvgObjList und deren Anwendungen verstehen. Arrays und Strings besser verstehen.

• Die Methode LoadProject in der main-Klasse

• Die Methode RequestLoadProject anwenden

• Die SVG-Elemente über den Server von der Festplatte in den Browser laden

• Server-Erweiterung mit REQUEST_LOAD

• Den Hash-Code prüfen

• Die gespeicherte Datenstruktur besser verstehen

• String-Anweisungen in der Anwendung kennen lernen

• Die Methode PushObjectCode anwenden

• Das SVG-Objekt in das Projekt-Array einfügen

• Die Methode Set_Datas(obj) verstehen

• Praktikum

siehe Beschreibung zu Abschnitt A1

Was lernen wir:

Die bereits kennengelernten Methoden der SVG-Elemente werden von der Klasse C_Basics abgeleitet und dazu einige Überlegungen praktiziert. Zudem gibt es bei dieser Gelegenheit einen kleinen Einblick in das Debugging mit dem Google Chrom Browser. Zur Festigung der einfachen SVG-Elemente wird im Praktikum ein Text-SVG-Element erklärt und angewendet. Neue Methoden wie Selektieren mehrerer SVG-Elemente, Löschen der selektierten SVG-Elemente und die Texteingabe werden praktiziert. Dieser Abschnitt zeigt die erste Anwendung in Richtung SPA (Single Page Application).

• Die Ableitung der Klasse C_Basics

• Sinn und Zweck der Ableitung

• Test der Ableitung am Copy-Befehl

• SVG-Elemente im Browser kopieren

• Wie funktionieren die Methoden GroupObject und Clear_GroupObject

• Ein neues SVG-Element in Basics.js für Texte erzeugen

• Erweiterung der Datei Basics.js für die Texteingabe

• Die Texteingabe Set_TextField() im SVG-Element

• Anwendung verschiedener Methoden zur Browser-Darstellung der SVG-Elemente

• SVG-Elemente zoomen

• Praktikum

siehe Beschreibung in Abschnitt A1

siehe Beschreibung in Abschnitt A1

Zeigt einen Ausschnitt zum letzten Part des Praktikums P1

Was lernen wir:

SVG-Elemente in das Menü laden und anzeigen. SVG-Objekte aus dem Menü anklicken, kopieren und auf die Arbeitsfläche ziehen. Kopieren der SVG-Elemente über die Tastatur. Anwendung der Buttons im Menü. Run-Test in einfachster Form verstehen.

• Die Klasse C_Menu verstehen

• Info-Anzeige im Menü

• Die SVG-Objekte im Menü darstellen

• SVG-Elemente mit der Maus aus dem Menü in die Arbeitsfläche kopieren

• On-Top-Fadenkreuz

• Kopierbefehle über die Tastatur mit Str+C und Str+V

• Der neue C_PressButton im FDB.js

• Praktikum

siehe Beschreibung in Abschnitt A1

siehe Beschreibung in Abschnitt A1