Teil 1: Automatisieren mit JS++ und Node.js
5.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
17 students enrolled

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

Grundlagen zum ersten Framework JS++
5.0 (1 rating)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
17 students enrolled
Created by Johannes Hofer
Last updated 5/2020
German
Current price: $34.99 Original price: $49.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 7 hours on-demand video
  • 21 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • 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
Course content
Expand all 24 lectures 06:52:45
+ Kapitel 1
5 lectures 48:15

Diese Übersicht zeigt die Möglichkeiten für den Einsatz dieser Techniken, wenn das Framework entsprechend vom Entwickler ausgebaut wird.

Preview 03:09

Zeigt Abschnitte aus Kapitel 1 zu A1, A2 und P1

Preview 04:05

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


Abschnitt A1
20:48

siehe Beschreibung zu Abschnitt A1

Abschnitt A2
08:49

siehe Beschreibung zu Abschnitt A1

Abschnitt P1
11:24
+ Kapitel 2
4 lectures 01:14:13

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

Abschnitt A1
26:58

siehe Beschreibung in Abschnitt A1

Abschnitt A2
14:02

siehe Beschreibung in Abschnitt A1

Preview 23:57

siehe Beschreibung in Abschnitt A1

Abschnitt P2
09:16
+ Kapitel 3
3 lectures 59:09

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

Abschnitt A1
28:34

sieh Beschreibung in Abschnitt A1

Abschnitt A2
17:32

siehe Beschreibung in Abschnitt A1

Abschnitt P1
13:03
+ Kapitel 4
3 lectures 57:21

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

Abschnitt A1
20:24

siehe Beschreibung im Abschnitt A1

Abschnitt A2
22:02

siehe Beschreibung in Abschnitt A1

Abschnitt P1
14:55
+ Kapitel 5
2 lectures 54:57

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

Abschnitt A1
25:37

siehe Beschreibung zu Abschnitt A1

Abschnitt P1
29:20
+ Kapitel 6
3 lectures 56:06

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

Abschnitt A1
13:20

siehe Beschreibung in Abschnitt A1

Abschnitt A2
12:27

siehe Beschreibung in Abschnitt A1

Abschnitt P1
30:19
+ Kapitel 7
4 lectures 01:02:44

Zeigt einen Ausschnitt zum letzten Part des Praktikums P1

Preview 02:42

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

Abschnitt A1
21:36

siehe Beschreibung in Abschnitt A1

Abschnitt A2
18:04

siehe Beschreibung in Abschnitt A1

Abschnitt P1
20:22
Requirements
  • Installation NodeJS, Nodemoon und Google-Chrome, PC mit Windows-10 Betriebssystem
  • Grundlagen JS oder C/C++, C#
Description

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.


Who this course is for:
  • 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