Zurück zur Hauptseite

Die Links wurden am 07.02.21 verifiziert.

Programmier- und Auszeichnungs-Sprachen

 

 

Welche Programmiersprachen sind derzeit im Vormarsch?

Eine detaillierte Antwort befindet sich auf https://www.tiobe.com/tiobe-index/

 

Hier geht es jedoch um die Frage, welche Werkzeuge für die Erstellung von Präsentationen und die Entwicklung von Apps für die Lehre am besten geeignet sind; - nicht um die Berechnung von Ingenieuraufgaben sowie Aufgaben aus der Physik. Bei der Auswahl von Programmiersprachen für Ingenieuraufgaben sollte es auch nicht nur um die Sprache selbst gehen, sondern auch um:

 

Wie wird eine Parallelverarbeitung ermöglicht;

unterstützt die Sprache eine schnelle Verarbeitung;

wie viel Kerne können auf der Graphikkarte verwendet werden;

welche Bibliotheken stehen zur Verfügung;

welche Rechnerkapazität kann genutzt werden, auch solche auf Großrechnern;

darf der Server in dem Umfang wie geplant genutzt werden;

gibt es Unterstützung von Gruppen mit gleicher Zielsetzung;

welche Kosten sind zu erwarten; usw. 

 

Siehe zu diesen Fragen auch die Darstellungen von IT-Großfirmen:

 

https://www.amd.com/de/graphics/servers-solutions-rocm

Open-Software-Plattform für Hochleistungs-Computing, zum Beispiel mit OpenMP®, HIP, OpenCL™, Python™

Es gibt dort auch einen Hinweis auf Bibliotheken.

 

https://www.notebookcheck.com/Bosque-Neue-Programmiersprache-von-Microsoft-ohne-Schleifen-und-Bedingungen.418227.0.html

Microsoft hat mit Bosque eine neue Open Source-Programmiersprache vorgestellt. Vertrieben wird die Programmiersprache unter der MIT-Lizenz und ist hierbei öffentlich auf GitHub einsehbar.

 

https://newsroom.intel.de/wp-content/uploads/sites/21/2020/04/Fact-Sheet-Software_2020.pdf

Intel® Fact Sheet: Software

 

Als top-Programmiersprachen werden auf https://www.westhouse-group.com/weiterbildung-programmiersprachen-fuer-ingenieure  genannt. Dies sind unter anderem

 

           Python

           Java

           Javascript (JS)

           C#

           C und C++

           PHP

           R

           Matlab

           Assembly Language

           SQL

 

Die Sprachen welche für die Erstellung von Präsentationen sowie die Entwicklung von Apps für die Lehre derzeit "die Nase vorn" haben, sind  JS und die Auszeichnungssprachen CSS und HTML5. JS kann zwar auch für Berechnungen eingesetzt werden, jedoch erkennt man, wenn man nach mathematischen Bibliotheken sucht, dass hier, zum Beispiel im Vergleich mit den klassischen Bibliotheken für FORTRAN, wenig Unterstützung zu erwarten ist. Dennoch können kleinere Anwendungen sehr erfolgreich verbreitet werden.

 

Allgemein

 

Die klassische Programmiersprache für Ingenieure war FORTRAN. Einen historischen Überblick erhält man auf

https://en.wikipedia.org/wiki/Timeline_of_programming_languages

Darüber hinaus haben sich in den einzelnen Fachgebieten eigene Sprachen und Programme entwickelt.

 

Für dynamische Webseiten und "Web-App´s" bieten sich die unten aufgeführten Sprachen an. Mit Hilfe von HTML5, CSS, und JS können Anwendungen erstellt werden, die als Webseiten geladen werden, Daten lokal speichern, und grundsätzlich auch offline betrieben werden können.

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_Inhalts%C3%BCbersicht

XHTML, CSS, XML, JavaScript, PHP, AJAX

https://devopsworld.de/1133/language-performance

Diese Seite kann für die Auswahl einer Programmiersprache auch wichtig sein!

 

Inhaltsverzeichnis

 

HTML5, HTML

XHTML

CSS

SVG, HTML und CSS

XML

JavaScript, JS

JS Bibliotheken. jQuery-Bibliothek

JS Bibliotheken. Diagramm-Bibliotheken

JS Ajax

JS parallele Ausführung

Node JS

PHP

Python

Editoren, Entwicklersysteme

Dienstprogramme

Beispiele unter Verwendung von JS

 

 

HTML5, HTML

 

https://www.w3schools.com/

The language for building web pages

https://www.w3schools.com/html/html_exercises.asp

88 Exercises

 

https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst

Grundgerüst

https://wiki.selfhtml.org/wiki/HTML

HTML & CSS mit dem Seiteninspektor untersuchen

Trennung von Inhalt, Präsentation und Verhalten

HTML5

Grundgerüst als Ausgangslage für zukunftsfähige Projekte

Seitenstrukturierung mit den neuen HTML5-Elementen

Schreib- und Gestaltungsregeln für Webseiten

Elemente. Links zu den Elementen der Sprache

https://wiki.selfhtml.org/

Inhaltsverzeichnis

https://wiki.selfhtml.org/wiki/Schnell-Index/HTML

https://wiki.selfhtml.org/wiki/HTML/Elemente

https://wiki.selfhtml.org/wiki/HTML/Tutorials/Formulare

Formulare in HTML auszeichnen und mit CSS benutzerfreundlicher und zugänglicher gestalten

https://wiki.selfhtml.org/wiki/Referenzen

HTML-Referenz

Elemente

Attribute

ARIA-Attribute (Zustände und Eigenschaften)

default-Rollen

benannte Zeichen

CSS-Referenz

Eigenschaften

Funktionen

Selektoren

Farbangaben

 

http://brauchbar.de/wd/artikel/list-html.html

Artikel zum Thema HTML. Umfangreich

 

https://curlie.org/World/Deutsch/Computer/Datenformate/Markup_Languages/HTML/

 

http://www.peraugym.at/html/html.html

HTML-Seiten erstellen. Kurzer Hinweis

 

https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign/bestehende_Webseiten_umbauen

bestehende Webseiten umbauen

 

XHTML

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML

Der W3C-Standard Extensible Hypertext Markup Language (erweiterbare HTML; Abkürzung XHTML) ist eine textbasierte Auszeichnungssprache zur Strukturierung und semantischen Auszeichnung von Inhalten wie Texten, Bildern und Hyperlinks in Dokumenten. XHTML-Dokumente genügen also den Syntaxregeln von XML.

https://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML:_Beschreibung

https://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML#Inhaltsverzeichnis

https://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML:_Syntax

https://de.wikibooks.org/wiki/Websiteentwicklung:_XHTML:_Objekte

Das Buch vermittelt Kenntnisse über die Auszeichnungssprache XHTML, mit der Dokumente strukturiert werden können, die vorrangig Text enthalten. Zumeist wird XHTML verwendet, um Projekte im Internet zu erstellen.

 

http://www.edition-w3.de/TR/2001/REC-xhtml-modularization-20010410/

Modularisierung von XHTML

 

Die Entwicklung der Version XHTML 2.0 wurde zugunsten von HTML5 Ende 2009 eingestellt.

https://www2.informatik.hu-berlin.de/Themen/www/selfhtml/html/xhtml/unterschiede.htm

 

CSS

 

https://www.w3schools.com/css/default.asp

CSS is the language we use to style an HTML document.

https://www.w3.org/TR/CSS1/

Cascading Style Sheets, level 1. CSS1 is a simple style sheet mechanism that allows authors and readers to attach style (e.g. fonts, colors and spacing) to HTML documents.

https://www.w3.org/TR/CSS/#css

CSS Snapshot 2020

https://www.w3.org/TR/CSS/#css-levels

CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, etc.

Classification of CSS Specifications

https://www.w3schools.com/css/default.asp

Tabs

Dropdowns

Accordions

Side Navigation

Top Navigation

Modal Boxes

Progress Bars

Parallax

Login Form

HTML Includes

Google Maps

Range Sliders

Tooltips

Slideshow

Filter List

Sort List

Certificates

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_CSS:_Grundlagen

https://de.wikibooks.org/wiki/Websiteentwicklung:_CSS

Inhaltsverzeichnis

Einbau in HTML/XML

Syntax

Kaskadierung, Spezifität und Vererbung

numerische Angaben

Farben

Farbe und Hintergrund

Box-Modell

Schriftformatierungen

Tabellen

Listen

Pseudoklassen, Pseudoelemente und erzeugte Strukturen

Seitenmedien

Praxis

Werkzeuge zum Bearbeiten von CSS

 

Text-Suche   Kopiere eine Zeile aus einer Liste oder einen beliebigen Text nach

https://www.startpage.com/ 

https://www.startpage.com/de/about-us.html

https://metager.de/ 

https://metager.de/impressum 

https://www.ask.com/?o=1567

https://about.ask.com/

https://www.qwant.com/

https://about.qwant.com/de/

https://www.bing.com/

https://help.bing.microsoft.com/#apex/18/de/n1999/-1/de

 

https://wiki.selfhtml.org/wiki/Schnell-Index/CSS

https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg

Mit Cascading Style Sheets (engl. für: mehrstufige Formatvorlagen) können Sie das Aussehen von Text und HTML-Elementen festlegen.

https://wiki.selfhtml.org/wiki/Referenzen

HTML-Referenz

Elemente

Attribute

ARIA-Attribute (Zustände und Eigenschaften)

default-Rollen

benannte Zeichen

CSS-Referenz

Eigenschaften

Funktionen

Selektoren

Farbangaben

 

http://brauchbar.de/wd/artikel/list-css.html

Artikel zum Thema CSS

 

SVG, HTML und CSS

 

https://de.wikibooks.org/wiki/SVG

SVG (Skalierbare Vektorgraphik, englisch: Scalable Vector Graphics) ist der internationale, vom W3C empfohlene Standard für Vektorgraphiken. SVG ist ein Format der Sprachfamilie XML und beschreibt zweidimensionale Vektorgraphiken.

 

https://wiki.selfhtml.org/wiki/SMIL

Beschreibungssprache für zeitsynchronisierte Multimedia-Präsentationen

https://wiki.selfhtml.org/wiki/Referenz:SVG

 

https://andrew.wang-hoyer.com/

https://andrew.wang-hoyer.com/experiments/svg-animations/#02

Animationen mit Quellcode

https://andrew.wang-hoyer.com/experiments/muda/

Emergent Motion

https://andrew.wang-hoyer.com/experiments/tumbler/

Animation. Dekorativ

https://wiki.selfhtml.org/wiki/SVG

Das auf XML basierende SVG (Scalable Vector Graphics) ist ein vom W3C empfohlenes Grafikformat zur Beschreibung zweidimensionaler Vektorgrafiken.

Einstieg in SVG

Grundformen

SVG mit CSS stylen

SVG mit CSS animieren

SVG in Webseiten einbinden

SVG in responsiven Webseiten

 

XML

 

https://de.wikipedia.org/wiki/Extensible_Markup_Language#Fachbegriffe

Extensible Markup Language

 

https://www.homepage-webhilfe.de/XML/

Es handelt sich um eine Auszeichnungssprache, die es ermöglichen soll, Daten strukturieren zu können und diese in einer Textdatei so zu speichern, dass diese sowohl von Menschen als auch von Maschinen leicht gelesen werden kann.

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_XML:_Syntax

Das wohl bekannteste Format für gültige Dokumente ist XHTML. Es wird eingesetzt für Projekte im Netz, aber auch in nur lokal verfügbaren Textdokumentationen, aber auch im Standardformat für digitale Bücher EPUB. Weitere Formate sind SVG für Vektorgraphik, DocBook für technische Dokumentation, XForms für Formulare, MathML für mathematische Formeln, SMIL für Multimedia. Es gibt viele Schemata und für die verschiedensten Anwendungsbereiche.

Ein XML-Dokument hat eine logische und eine physische Struktur. Beide sind durch XML festgelegt.

XML kennt folgende Sprachelemente für die physische Struktur:

XML-Deklaration

Entitäten

XML kennt folgende Sprachelemente für die logische Struktur:

Verarbeitungsanweisungen

Elemente

Attribute

Kommentare

Text

 

Text-Suche   Kopiere eine Zeile aus einer Liste oder einen beliebigen Text nach

https://www.startpage.com/ 

https://www.startpage.com/de/about-us.html

https://metager.de/ 

https://metager.de/impressum 

https://www.ask.com/?o=1567

https://about.ask.com/

https://www.qwant.com/

https://about.qwant.com/de/

https://www.bing.com/

https://help.bing.microsoft.com/#apex/18/de/n1999/-1/de

 

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_XML:_Beschreibung

XML (Erweiterbare Auszeichnungssprache; englisch: eXtensible Markup Language) ist ein Standard oder eine Empfehlung des W3C für eine gemeinsame Sprachstruktur von Auszeichnungsprachen (englisch: markup languages), die dann zur XML-Sprachfamilie gehören. Mit einem XML-Dokument können also ganz allgemein Informationen strukturiert in einem digitalen Dokument notiert werden. XML selbst gibt dabei vor, wie die Struktur auszusehen hat.

 

https://web-development.github.io/xml/xml-und-javascript/

 

https://jsonformatter.org/xml-editor

Dienstprogramm

https://jsonformatter.org/xml-formatter#Sample

 

JavaScript, JS

 

https://www.w3schools.com/js/js_examples.asp

JavaScript Examples. Sehr empfehlenswert

https://www.w3schools.com/js/default.asp

JavaScript Tutorial

 

https://www.javascript-kurs.de/javascript-auslagern.htm

Code des JavaScripts in eine extra Datei auslagern.

https://www.javascript-kurs.de/dom-document-object-model-einfuehrung.htm

document.getElementById("id")

document.getElementsByClassName("farbe1")

document.getElementsByTagName("h2")

https://www.javascript-kurs.de/dom-zugriff-html-baum.htm

Methoden

https://www.javascript-kurs.de/javascript-dom-eingreifen.htm

Das DOM stellt die Knotenpunkte einer HTML-Seite mit allen Einzelelementen dar. Auf diese kann man dadurch gezielt zugreifen, diese ersetzen oder auch danach bzw. davor etwas einfügen.

https://www.javascript-kurs.de/javascript-ausfuehren-durch-klick-auf-button.htm

Ein Element soll durch den Anwender anklickbar werden und dann durch JavaScript eine Aktion erfolgen.

https://www.javascript-kurs.de/

https://www.javascript-kurs.de/javascript-einbinden.htm

JavaScript einbinden

 

http://www.javascript-workshop.de/index.php?seite=dokus

JavaScript & Co. - Dokumentationen und Standards

 

http://www.codeadventurer.de/?p=3816

JavaScript ist eine Interpreter-Sprache. Jeder Browser, der mit JavaScript umgehen kann, besitzt eine so genannte JavaScript Engine, die den Code interpretiert und ausführt.

 

https://wiki.selfhtml.org/wiki/JavaScript

Für die Entwicklung dynamischer Webseiten ist JavaScript unerlässlich.

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Einstieg

Tutorials

https://wiki.selfhtml.org/wiki/Schnell-Index/JavaScript

Schnell-Index

https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM

Mithilfe von JavaScript, das in jedem Browser läuft, werden Webseiten interaktiv.

 

https://eloquentjavascript.net/

(Part 1: Language)Values, Types, and Operators

Program Structure

Functions

Data Structures: Objects and Arrays

Higher-order Functions

The Secret Life of Objects

Project: A Robot

Bugs and Errors

Regular Expressions

Modules

Asynchronous Programming

Project: A Programming Language

(Part 2: Browser)JavaScript and the Browser

The Document Object Model

Handling Events

Project: A Platform Game

Drawing on Canvas

HTTP and Forms

Project: A Pixel Art Editor

(Part 3: Node)Node.js

Project: Skill-Sharing Website

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_Inhalts%C3%BCbersicht

JavaScript

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Einleitung

JavaScript dient zwar nicht ausschließlich, aber hauptsächlich dazu, (X)HTML oder SVG dekorativ zu ergänzen, um einen alternativen interaktiveren Zugang zum Inhalt eines Dokumentes anzubieten. Auch dient es der Erstellung von Benutzeroberflächen mit Hilfe von Mozillas XUL (XML User Interface Language). Aus den vorherigen Ausführungen ergibt sich bereits die Funktion von JavaScript für insbesondere die Formate (X)HTML oder SVG.

JavaScript ist eine Skriptsprache, die meist auf dem Rechner des Benutzers ausgeführt wird. Im Gegensatz dazu ist beispielsweise PHP eine Skriptsprache, die meist auf einem Dienstrechner ausgeführt wird, welcher das Ergebnis dann etwa über ein Protokoll wie HTTP an das Darstellungsprogramm des Nutzers ausliefert.

Weitere Seiten:

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Inhalt

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Tutorial

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_DOM-Kern

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_DOM-Ereignisbehandlung

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Entwurfsmuster

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Weblinks#JavaScript-Anleitungen

JavaScript-Anleitungen. Links

SELFHTML/JavaScript

Javascript-Workshop

HTML-World/JavaScript

JavaScript-Einführung + browserübergreifende Lösungen (Galileo / Openbook

JavaScript + AJAX (Galileo / OpenBook)

JavaScript-Artikel bei Dr.Web

https://de.wikibooks.org/wiki/Websiteentwicklung:_JavaScript:_Einleitung#(X)HTML-Editoren_f%C3%BCr_die_direkte_Arbeit_am_Quelltext

Webseitenentwicklung mit JS

 

https://www.javascript-kurs.de/

Der Interpreter für JavaScript ist im Internetbrowser integriert.

In den letzten Jahren ist JavaScript geboomt. Nicht zuletzt durch den massiven Einsatz von AJAX.

Erstes JavaScript Programm

Variablen in JavaScript

Funktionen in JavaScript

Ausgabekontrolle mit Firebug

durch JavaScript HTML-Elemente ändern

Datentypen in JavaScript

Berechnungen

if-Bedingung

JavaScript auslagern

Tipps & Tricks zu JavaScript

https://www.javascript-kurs.de/javascript-lernen-spielfigur-zeichnen.htm

https://www.javascript-kurs.de/javascript-lernen-spiel-kollisionskontrolle.htm

Zielerreichung im Spiel über Kollisionskontrolle überprüfen

https://www.javascript-kurs.de/javascript-rechnen.htm

https://www.javascript-kurs.de/dom-zugriff-html-baum.htm

HTML-Baum und Zugriff über DOM darauf

https://www.javascript-kurs.de/dom-nutzen-ueber-getElementById.htm

Wir wollen ein bestimmtes Element auf unserer HTML-Seite ansprechen.

https://www.javascript-kurs.de/javascript-dom-zugriff-elemente-innerhalb-bereiche.htm

querySelector Mit ihm können wir alle Kombinationen von ID, Klassen und Typ-Selektoren nutzen.

https://www.javascript-kurs.de/javascript-html-elemente-aendern.htm

Die Beeinflussung von HTML-Elemente mit JavaScript läuft über DOM (Document Object Model).

Änderungen von Inhalten durch JavaScript

https://www.javascript-kurs.de/javascript-dom-eingreifen.htm

Mit JavaScript gibt es auch Möglichkeiten direkt in das DOM einer Website einzugreifen. Zur Erinnerung: das DOM stellt die Knotenpunkte einer HTML-Seite mit allen Einzelelementen dar. Auf diese kann man dadurch gezielt zugreifen, diese ersetzen oder auch danach bzw. davor etwas einfügen.

https://www.javascript-kurs.de/javascript-Math.htm

Für Berechnungen bietet das JavaScript-Objekt Math alle grundlegenden Möglichkeiten.

https://www.javascript-kurs.de/javascript-ausfuehren-durch-klick-auf-button.htm

EventListener: Elemente durch Nutzer anklickbar machen und JavaScript ausführen

https://www.javascript-kurs.de/javascript-browserobjekt-window.htm

Das Browserobjekt window mit JavaScript nutzen

 

http://brauchbar.de/wd/artikel/list-js.html

Artikel zum Thema JavaScript

 

JS Bibliotheken. jQuery-Bibliothek

 

https://www.javascript-kurs.de/jquery-tutorial.htm

jQuery-Bibliothek in die eigene Website einbinden. Standardvorgehen um jQuery einzubinden.

jQuery beseitigt Nachteile von JavaScript. Z.B. einfache Möglichkeiten, Elemente auf der Website (DOM) auszuwählen.

Es sind zahlreiche Plug-Ins verfügbar.

https://www.javascript-kurs.de/elemente-selektieren-ueber-jquery.htm

https://www.javascript-kurs.de/jquery-css.htm

Wir können auch direkt über jQuery auf die CSS-Eigenschaften zugreifen.

https://api.jquery.com/category/css/

Diese Methoden rufen CSS-bezogene Eigenschaften von Elementen ab und legen diese fest.

https://www.javascript-kurs.de/jquery-aus-u-einblenden.htm

Elemente aus- und einblenden über jQuery

https://www.javascript-kurs.de/jquery-callback-function.htm

Innerhalb der ersten Funktion eine weitere integrieren.

https://api.jquery.com/

API Beschreibung

https://learn.jquery.com/

About jQuery

Using jQuery Core

Events

Effects

Ajax

Plugins

Performance

Code Organization

jQuery UI

jQuery Mobile

 

Text-Suche   Kopiere eine Zeile aus einer Liste oder einen beliebigen Text nach

https://www.startpage.com/ 

https://www.startpage.com/de/about-us.html

https://metager.de/ 

https://metager.de/impressum 

https://www.ask.com/?o=1567

https://about.ask.com/

https://www.qwant.com/

https://about.qwant.com/de/

https://www.bing.com/

https://help.bing.microsoft.com/#apex/18/de/n1999/-1/de

 

JS Bibliotheken. Auswahl.

 

https://en.wikipedia.org/wiki/List_of_JavaScript_libraries

Liste

 

D3

 

https://d3js.org/

D3.js ist eine JavaScript-Bibliothek zum Bearbeiten von Dokumenten basierend auf Daten. Mit D3 können Sie Daten mithilfe von HTML, SVG und CSS bearbeiten. Datengesteuerter Ansatz zur DOM-Manipulation. D3 ist extrem schnell und unterstützt große Datenmengen und dynamisches Verhalten für Interaktion und Animation.

https://github.com/d3/d3-shape

Formen werden von Daten gesteuert: Jeder Formgenerator macht Accessoren verfügbar, die steuern, wie die Eingabedaten einer visuellen Darstellung zugeordnet werden. Sie können beispielsweise einen Liniengenerator für eine Zeitreihe definieren, indem Sie die Felder Ihrer Daten so skalieren, dass sie in das Diagramm passen.

Mit der Eingangs- und Ausgangsauswahl von D3 können Sie neue Knoten für eingehende Daten erstellen und Knoten entfernen, die nicht mehr benötigt werden.

Der Fokus von D3 auf Transformation erstreckt sich natürlich auf animierte Übergänge. Übergänge interpolieren nach und nach Stile und Attribute im Laufe der Zeit.

https://github.com/d3/d3/blob/master/API.md

Erkunden Sie die überwältigende Anzahl von Befehlen!

https://learn.jquery.com/events/

jQuery bietet einfache Methoden zum Anhängen von Ereignishandlern. Wenn ein Ereignis eintritt, wird die bereitgestellte Funktion ausgeführt. Innerhalb der Funktion bezieht sich dies auf das DOM-Element, das das Ereignis ausgelöst hat.

https://github.com/d3/d3/wiki

„Zum einen ist D3 beliebt (80 Millionen Downloads und 90.000 Sterne), sodass Sie in guter Gesellschaft sind. Es gibt viele von der Community entwickelte Ressourcen, darunter Tutorials, Videos, Klassen und Bücher. Und das D3-Team hat Hunderte seiner eigenen Beispiele und Tutorials veröffentlicht, um Ihr Lernen und Ihre Produktivität zu steigern.“ (Übersetzt)

 

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks#Features

Tabelle. Hilfreich für die Auswahl

 

https://mootools.net/

Siehe https://en.wikipedia.org/wiki/MooTools

 

https://en.wikipedia.org/wiki/JQWidgets

„Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.“

 

https://en.wikipedia.org/wiki/OpenUI5

180 UI controls

 

https://en.wikipedia.org/wiki/JQWidgets

jQWidgets features more than 60 widgets and plug-ins. Some are:

jqxGrid - a grid view widget that displays tabular data.

jqxChart - a chart widget.

jqxTree - a tree view widget that displays a hierarchical collection of items.

jqxTreeGrid - a widget which represents data in a tree-like structure.

jqxDropDownList - a drop-down list widget.

jqxDataTable - a widget built as an alternative to HTML Tables.

jqxWindow - a dialog box widget.

jqxComboBox - a combo box control.

jqxDateTimeInput - a date picker widget that enables the user to select a date or time using a popup calendar display or by keyboard input into the text field.

jqxScheduler - a personal information manager control akin to Google Calendar and Apple's Calendar.[24] It supports the iCalendar file format.

jqxDockingLayout - a widget that can be used for creating IDE-like layouts.

 

https://en.wikipedia.org/wiki/Google_Web_Toolkit

Siehe https://en.wikipedia.org/wiki/Google_Web_Toolkit#Features

 

https://en.wikipedia.org/wiki/Ext_JS

Ext JS is a pure JavaScript application framework for building interactive cross platform web applications.

 

JS Bibliotheken. Diagramm-Bibliotheken

 

https://entwickler.de/online/javascript/chart-js-javascript-library-diagramme-243899.html

Chart.js - JavaScript-Library für Diagramme. Die gewünschten Diagramme werden in 2D realisiert, bieten aber keine weiteren Interaktionsmöglichkeiten. Möchte man also mit einzelnen Elementen eines Diagramms interagieren, bietet sich Chart.js eher nicht an.

https://entwickler.de/online/diagramme-mit-javascript-libraries-erstellen-das-sind-die-15-besten-libraries-140624.html

Die 15 besten JavaScript-Diagramm-Libraries

 

https://d3js.org/

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

 

https://developers-dot-devsite-v2-prod.appspot.com/chart

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/gallery

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/basic_load_libs

This page shows how to load the Google Chart libraries.

https://developers-dot-devsite-v2-prod.appspot.com/chart/interactive/docs/basic_preparing_data

Prepare the Data

http://smoothiecharts.org/

A JavaScript Charting Library for Streaming Data

 

https://www.amcharts.com/

Sie können buchstäblich alles tun. Fahren Sie fort und öffnen Sie Demos.

 

http://imaginea.github.io/uvCharts/index.html

Mehr als 101 Möglichkeiten, um jedes Diagramm einzigartig zu machen und Ihre Daten zum Leben zu erwecken. Anpassbar. Über 100 Konfigurationsoptionen. 12 unterstützte Diagrammtypen. Unterstützung für mehrere Skalen

http://imaginea.github.io/uvCharts/documentation.html

uvCharts ist eine JavaScript-basierte Diagrammbibliothek, die mit der berühmten Bibliothek d3.js erstellt wurde. Mit uvCharts können Sie den gesamten schwierigen Lern- und Codierungsteil von d3.js überspringen und dennoch mit Leichtigkeit einfache, robuste und vollständig anpassbare Diagramme auf jeder Seite im Web erstellen.

 

JS Bibliotheken. Mathematik

 

https://smartbear.com/blog/2013/four-serious-math-libraries-for-javascript/?lang=de-de

JavaScript führt alle seine mathematischen Aufgaben mit Gleitkomma-Mathematik aus.

 

http://algebrite.org/

Algebrite ist eine einfache, verständliche und erweiterbare Javascript-Bibliothek für symbolische Berechnungen.

 

https://www.npmjs.com/package/mathjs

Unterstützt Zahlen, große Zahlen, komplexe Zahlen, Brüche, Einheiten, Zeichenfolgen, Arrays und Matrizen.

Ist kompatibel mit der in JavaScript integrierten Mathematikbibliothek.

Enthält einen flexiblen Ausdrucksparser.

Führt symbolische Berechnungen durch.

Kommt mit einer großen Anzahl von eingebauten Funktionen und Konstanten.

Kann auch als Befehlszeilenanwendung verwendet werden.

Läuft auf jeder JavaScript-Engine.

Ist leicht erweiterbar.

Open Source.

 

Text-Suche   Kopiere eine Zeile aus einer Liste oder einen beliebigen Text nach

https://www.startpage.com/ 

https://www.startpage.com/de/about-us.html

https://metager.de/ 

https://metager.de/impressum 

https://www.ask.com/?o=1567

https://about.ask.com/

https://www.qwant.com/

https://about.qwant.com/de/

https://www.bing.com/

https://help.bing.microsoft.com/#apex/18/de/n1999/-1/de

 

 

http://jster.net/category/math-libraries

 

https://www.w3schools.com/js/js_math.asp

Mit dem JavaScript Math-Objekt können Sie mathematische Aufgaben für Zahlen ausführen.

 

http://numbers.github.io/

 

https://mathjs.org/docs/datatypes/matrices.html

https://mathjs.org/examples/index.html

Viele Beispiele

 

Formeldarstellung

 

https://en.wikipedia.org/wiki/MathJax

MathJax wird als Teil einer Webseite heruntergeladen, durchsucht die Seite nach mathematischen Markups und setzt die mathematischen Informationen entsprechend um. Daher erfordert MathJax keine Installation von Software oder zusätzlichen Schriftarten auf dem Lesersystem. Dadurch kann MathJax in jedem Browser mit JavaScript-Unterstützung ausgeführt werden, einschließlich mobiler Geräte. MathJax kann Mathematik mithilfe einer Kombination aus HTML und CSS oder mithilfe der nativen MathML-Unterstützung des Browsers anzeigen, sofern verfügbar. Die genaue Methode, mit der MathJax Mathematik setzt, wird durch die Funktionen des Browsers des Benutzers, die auf dem System des Benutzers verfügbaren Schriftarten und die Konfigurationseinstellungen bestimmt. MathJax v2.0-beta führte das SVG-Rendering ein. Siehe

https://www.mathjax.org/

https://www.mediawiki.org/wiki/Extension:MathJax

 

https://www.mediawiki.org/wiki/Extension:Math

The Math extension provides support for rendering mathematical formulae.

 

https://en.wikipedia.org/wiki/KaTeX

https://katex.org/

KaTeX has no dependencies and can easily be bundled with your website resources.

https://katex.org/docs/node.html

 

https://en.wikipedia.org/wiki/MathML

Integrating mathematical formulae into World Wide Web pages and other documents. It is part of HTML5.

 

JS Ajax

 

https://www.javascript-kurs.de/ajax-einfuehrung.htm

Anhand von Ajax können einzelne Bereiche einer Webseite abhängig von einer Nutzeraktion mit Daten und Inhalte ausgetauscht werden, die von einem Server geliefert werden.

https://learn.jquery.com/ajax/

Das XMLHttpRequest-Objekt ist Teil einer Technologie namens Ajax (Asynchronous JavaScript and XML). Mit Ajax können Daten dann mithilfe der XMLHttpRequest-API zwischen dem Browser und dem Server übertragen werden, ohne dass die Webseite neu geladen werden muss.

 

JS parallele Ausführung

 

http://www.codeadventurer.de/?p=3816

JavaScript Programme laufen nur in einem einzigen Thread ab, was insbesondere für serverseitige Anwendungen ungeeignet ist. NodeJS löst dieses Problem mit Hilfe von C++ Bibliotheken wie die Libuv.

 

https://entwickler.de/online/javascript/hamsters-js-5-0-579831658.html

Hamsters.js ist eine Library, die das Multithreading und die parallele Ausführung von JavaScript-Code unterstützt.

Node.js nun verfügbare Cores automatisch aufspürt um den Workload zu verteilen.

 

https://www.mediaevent.de/javascript/web-worker.html

Siehe dort

https://ichi.pro/de/parallele-programmierung-in-javascript-mit-web-workern-157857751049947

https://www.webundmobile.de/web/api/parallele-ausfuehrung-2527601.html

 

Node JS

 

Node JS besteht nicht nur aus der V8 Engine sondern stellt zusätzlich auch die Libuv Library zur Verfügung, die eine parallele Ausführung ermöglicht.

NodeJS ermöglicht Backend und Frontend in der gleichen Programmiersprache zu entwickeln.

 

https://www.w3schools.com/nodejs/

Node.js is an open source server environment.

Node.js allows you to run JavaScript on the server.

 

Datenbanken

 

https://de.wikipedia.org/wiki/Datenbank

Übersicht

 

https://de.wikipedia.org/wiki/MariaDB

https://mariadb.org/

MariaDB Server is one of the most popular open source relational databases.

https://mariadb.org/documentation/

Introduction to relational databases

A 10-minute MariaDB primer

List of SQL statements

Useful MariaDB queries

 

PHP

 

https://de.wikibooks.org/wiki/Websiteentwicklung:_Inhalts%C3%BCbersicht

PHP

 

https://wiki.selfhtml.org/wiki/PHP/Tutorials/Einstieg/Arrays

Ein Beispiel für Arrays

 

https://www.homepage-webhilfe.de/PHP/sessioncookie.php

Sessions erlauben es, Variablen innerhalb einer Sitzung zu speichern.

https://www.homepage-webhilfe.de/PHP/

Ermöglicht es den HTML-Code, welcher an den Browser gesendet werden soll, vor dem Versand auf dem Server mit aktuellen und dynamischen Informationen zu füllen.

 

Python

 

https://de.wikipedia.org/wiki/Python_(Programmiersprache)

Python-Programme lassen sich in anderen Sprachen als Module einbetten. Beispielsweise können für zeitkritische Teile Routinen in maschinennäheren Sprachen wie z. B. C aufgerufen werden. Umgekehrt lassen sich mit Python Module und Plug-ins für andere Programme schreiben.

 

https://docs.sympy.org/latest/index.html

SymPy ist eine Python-Bibliothek für symbolische Mathematik.

 

Editoren, Entwicklersysteme

 

http://www.pspad.com/de/

Farbig hervorgehobene Syntax für viele Programmiersprachen. Vorlagen (HTML-Tags, Scripts, Code-Vorlagen ...)

Installation beinhaltet Vorlagen für HTML, PHP, Pascal, JScript, VBScript, MySQL, MS-Dos, Perl, ...

Integration von HTML TiDy zum Überprüfen und Formatieren von HTML-Code, Umwandlung in CSS, XML, XHTML

Integrierte HTML- und PHP-Vorschau.

 

http://notepad-plus-plus.org/

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GNU General Public License.

https://www.notetab.com/

Support for HTML5 and CSS3

New HTML/CSS libraries

 

https://www.eclipse.org/downloads/

Open source software development environment

https://www.eclipse.org/ide/

Cloud IDEs

Develop your software wherever you go. It'll be there, in the cloud, right where you left it. Use your browser to develop with hosted workspaces or install desktop packaging to experience a modern development environment for Java, JavaScript, CSS, and HTML.

 

Dienstprogramme

 

http://validator.w3.org/

This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available. As an alternative you can also try our non-DTD-based validator.

https://validator.w3.org/nu/

Nu Html Checker

 

https://www.ftp-uploader.de/ftp-download.php#p5

ftp-uploader

 

https://codepen.io/trending

https://codepen.io/ge1doot/collections/    

(Übersetzung) Echtzeitbearbeitung

Die Schüler sehen in Echtzeit, was Code bewirkt.

Dies kann ein großer Moment für Studenten sein. Webdesign kann wirklich klicken, wenn ein Design Zeile für Zeile zum Leben erweckt wird. Sie sehen das direkte Ergebnis des Codes, den sie schreiben, und wie dieser die Site steuert.

Wenn Sie Schülern beim Erlernen des Internets helfen möchten, ist CodePen Ihr Freund.

Keine zu installierende oder zu wartende Software.

CodePen befindet sich vollständig im Browser. Es funktioniert auf jedem Computer mit einem modernen Webbrowser. Es ist nichts zu installieren. Es gibt keine Upgrades, die Sie jemals herunterladen und ausführen müssen.

Noch besser ist, dass viele Schüler ihre eigenen Computer haben. CodePen arbeitet im Klassenzimmer, und die Schüler können dann in einem Labor, zu Hause oder auf einem anderen Computer direkt auf CodePen weiterarbeiten. Es wird genau dieselbe Umgebung mit all ihren gespeicherten Arbeiten sein.

Lehren Sie die Grundlagen. Dann unterrichten Sie fortgeschrittenere Fächer.

Sie könnten anfangen, nur rohes HTML und CSS zu unterrichten. Das sind grundlegende Dinge, die für einen Web-Lehrplan von entscheidender Bedeutung sind. Integrieren Sie dann JavaScript. Vielleicht suchen und fügen Sie eine Bibliothek wie jQuery hinzu.

Sie können mit CodePen so weit kommen, wie Sie möchten. Unterrichten Sie das Kompilieren von JavaScript mit Babel, ES6 und JSX. Unterrichten Sie eine Bibliothek wie D3. Zeigen Sie den Schülern die CSS-Vorverarbeitung und importieren Sie Abhängigkeiten. HTML in Slim ausgeben. Ajax für einige JSON. Alles, was Sie im Front-End-Web tun können, können Sie mit CodePen tun.

 

Beispiele unter Verwendung von JS

 

http://walter.bislins.ch/blog/index.asp?page=JavaScript+physikalische+Echtzeit%2DSimulation+eines+Pendels

JavaScriptModul, welches ein Pendel simuliert. Beispiel der Programmierung mit JS

 

https://www.w3schools.com/js/js_examples.asp

Beispiele

 

https://www.w3schools.com/js/js_arrays.asp

Arrays

 

https://mathjs.org/examples/browser/printing_html.html.html

Ausgabe

 

https://mathjs.org/examples/objects.js.html

Objekte

 

https://mathjs.org/examples/browser/plot.html.html

Plotten

 

https://mathjs.org/examples/browser/rocket_trajectory_optimization.html.html

System gewöhnlicher Differentialgleichungen

 

https://mathjs.org/docs/expressions/parsing.html

Expressions can be parsed and evaluated. Math.js contains a function math.compile which compiles expressions into JavaScript code.

 

https://www.javascript-kurs.de/spiel-mit-javascript-programmieren-lernen.htm

Ein Spiel programmieren

 

Text-Suche   Kopiere eine Zeile aus einer Liste oder einen beliebigen Text nach

https://www.startpage.com/ 

https://www.startpage.com/de/about-us.html

https://metager.de/ 

https://metager.de/impressum 

https://www.ask.com/?o=1567

https://about.ask.com/

https://www.qwant.com/

https://about.qwant.com/de/

https://www.bing.com/

https://help.bing.microsoft.com/#apex/18/de/n1999/-1/de