Teil 1: Automatisieren mit JS++ und Node.js
- 7 hours on-demand video
- 21 downloadable resources
- Full lifetime access
- Access on mobile and TV
- Certificate of Completion
Get your team access to 4,000+ top Udemy courses anytime, anywhere.
Try Udemy for Business- Anwendung der Programmiersprache JavaScript mit Node_JS für Aufgaben aus der industriellen Automatisierung
- Programmierung eines eigenen Tools JS++ für den Aufbau einer SPA (Single Page Application)
- Das Zusammenspiel zwischen Server (nodeJs) und Client (Google-Chrome) als Private-Server
- Aufbau einer Function-Data-Base (FDB) zur Anwendung eigener SVG-Elemente
- Schreiben und Lesen des Projektes auf die lokale Festplatte
- SVG-Objekte mittels Menü auf die Browser-Oberfläche ziehen, zoomen, kopieren und als SPA speichern
Diese Übersicht zeigt die Möglichkeiten für den Einsatz dieser Techniken, wenn das Framework entsprechend vom Entwickler ausgebaut wird.
Zeigt Abschnitte aus Kapitel 1 zu A1, A2 und P1
Was lernen wir:
Dieses Kapitel zeigt die Deklaration einer Klasse und deren speziellen Eigenschaften. Die Anwendungen der weiteren Klassen in den folgenden Kapiteln zur Erstellung einer SPA (Single-Page-Application), welche später als sogenanntes Framework JS++ zur Anwendung kommt, setzt u. a. das Wissen aus diesem Kapitel voraus, wenn wenig Vorkenntnisse vorhanden sind. In diesem Kapitel gibt es keine Source-Vorgaben, da alle Inhalte als Praktikum vorgestellt werden.
Das Schlüsselwort class zur Erstellung einer Klasse
Der Konstruktor und seine Eigenschaften
Klassen deklarieren und anwenden
Übergabeparameter und Argumente für den Konstruktor
Attribute mit dem this-Objekt (this-Zeiger)
Methoden und deren Anwendung
Klassen in Klassen
Klassen-Ableitung
Praktisches Beispiel zur Klassenbildung und erste Schritte mit JS für Umsteiger
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
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
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
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
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
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
- Installation NodeJS, Nodemoon und Google-Chrome, PC mit Windows-10 Betriebssystem
- Grundlagen JS oder C/C++, C#
Erstellen einer SPA mit JavaScript pur für Automatisierer aus verschiedenen Branchen.
Lernen und Praktizieren mit JavaScript, SVG-Elemente sowie die Anwendung eines eigenen Private-Server mit Node.js und dem Browser Google-Chrome.
Basis-Grundlagen der Web-Technologie für die industrielle Automatisierung zur ersten SPA mit dem Framework JS++, welches schrittweise selbst erarbeitet wird.
Der Kursteilnehmer kann nach diesem ersten Teil die eigenen SVG-Elemente in einfacher Form erstellen und diese als Objekte über ein Menü auf dem Browser abbilden. Das so entstehende Projekt wird über den Browser auf die Festplatte gespeichert und bei einem Neustart des Browsers automatisch gelesen und abgebildet.
Dazu wird ein eigenes Fadenkreuz programmiert, welches die gesamte Webseite nutzt, so wie das bei CAD-Systemen der Fall ist.
Die Programmierung in JavaScript erfolgt ausschließlich nach dem Prinzip der Klassen (class), so wie es C/C++-Programmierer kennen.
Doing learning ist hier zu 100% angesagt. Es handelt sich um ein praktisches System-Seminar für Experten und bietet den besten learning style.
Die Quellcode (Sourcen) in JavaScript zur Umsetzung in eine SPA für diesen Kurs, können in eigener Verantwortung beliebig verwendet werden.
- Umsteiger oder Quereinsteiger von C/C++, C# oder ähnliche Sprachen nach JavaScript
- Automatisierer aus den industriellen Bereichen, welche SPA mit JavaScript programmieren möchten
- JS-Programmierer für technische Aufgaben wie Web-HMI
- Studenten aus Maschinenbau, Softwareentwicklung, Informatik und Automatisierung ab fünftes Semester