Merge remote-tracking branch 'upstream/master' into Comparisons

Author: engag1ng

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: iliakan

.gitignore

@@ -21,3 +21,4 @@ sftp-config.json
 Thumbs.db
 
 
+/svgs

1-js/01-getting-started/1-intro/article.md

@@ -1,42 +1,75 @@
 
 # Handbücher und Spezifikationen
 
+<<<<<<< HEAD
 Dieses Buch ist ein *Tutorial*. Es soll dir helfen, die Sprache nach und nach zu erlernen. Aber sobald du mit den Grundlagen vertraut bist, wirst du andere Quellen benötigen.
+=======
+This book is a *tutorial*. It aims to help you gradually learn the language. But once you're familiar with the basics, you'll need other resources.
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
 ## Spezifikation
 
 [The ECMA-262 specification](https://www.ecma-international.org/publications/standards/Ecma-262.htm) enthält die ausführlichsten, detailliertesten und formalisiertesten Informationen über JavaScript. Es definiert die Sprache.
 
 Die Tatsache dass es so festgschrieben ist, macht es am Anfgan etwas schwer verständlich. Wenn du also die vertrauenswürdigste Informationsquelle benötigst, dann ist die Spezifikation dir richtige Stelle. Sie ist jedoch nicht für den alltäglichen Gebrauch passend. 
 
+<<<<<<< HEAD
 Eine neue Spezifikationsversion wird jedes Jahr veröffentlicht. In der Zwischenzeit kann der letzte entwurf unter <https://tc39.es/ecma262/> gefunden werden.
+=======
+A new specification version is released every year. Between these releases, the latest specification draft is at <https://tc39.es/ecma262/>.
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
 Um mehr über die neuen bleeding-edge features, einschliesslich derjendigen, die "fast Standard" sind ("stage 3" genannt), siehe Vorschläge unter <https://github.com/tc39/proposals>.
 
+<<<<<<< HEAD
 Wenn du für den Browser entwickeln, dann gibt es noch weitere Spezifikationen, die im [zweiten Teil](info:browser-environment) des Tutorials behandelt werden.
+=======
+Also, if you're developing for the browser, then there are other specifications covered in the [second part](info:browser-environment) of the tutorial.
+>>>>>>> a82915575863d33db6b892087975f84dea6cb425
 
 ## Handbücher
 
+<<<<<<< HEAD
 - **MDN (Mozilla) JavaScript Reference** ist ein Handbuch mit Beispielen und anderen Informationen. Es ist grossartig, sich über einzelne Sprachfunktionen, Methoden etc. ausführlich zu informieren.
+=======
+- **MDN (Mozilla) JavaScript Reference** is the main manual with examples and other information. It's great to get in-depth information about individual language functions, methods etc.
+>>>>>>> a82915575863d33db6b892087975f84dea6cb425
 
+<<<<<<< HEAD
     Man kann es unter <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference> finden.
 
+<<<<<<< HEAD
     Obwohl es oft am besten ist, stattdessen eine Internetsuche zu verwenden. Benutze einfach "MDN [Begriff]" in der Anfrage, z.B. <https://google.com/search?q=MDN+parseInt> um nach der `parseInt` Funktion zu suchen.
 
 
 - **MSDN** – Microsoft Handbuch mit vielen Informationen, einschließlich JavaScript (oft als JScript bezeichnet). Wenn man etwas speziell für den Internet Explorer benötigt, sollte man besser dorthin gehen: <http://msdn.microsoft.com/>.
 
     Wir können auch eine Internetsuche mit Phrasen wie "RegExp MSDN" oder "RegExp MSDN jscript" verwenden.
+=======
+Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for `parseInt` function.
+>>>>>>> a82915575863d33db6b892087975f84dea6cb425
+=======
+    You can find it at <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference>.
+
+Although, it's often best to use an internet search instead. Just use "MDN [term]" in the query, e.g. <https://google.com/search?q=MDN+parseInt> to search for the `parseInt` function.
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
 ## Kompatibilitäts-Tabellen
 
 JavaScript ist eine Entwicklungssprache, neue Funktionen werden regelmäßig hinzugefügt.
 
 Um ihre Unterstützung unter den Browser-basierten und anderen Engines zu sehen, siehe:
 
+<<<<<<< HEAD
 - <http://caniuse.com> - pro Feature-Tabellen der Unterstützung, z.B. um zu sehen, welche Engines moderne Kryptographie-Funktionen unterstützen: <http://caniuse.com/#feat=cryptography>.
 - <https://kangax.github.io/compat-table> - eine Tabelle mit Sprachfunktionen und Engines, die diese unterstützen oder nicht unterstützen.
 
 All diese Ressourcen sind in der realen Entwicklung nützlich, da sie wertvolle Informationen über sprachliche Details, ihre Unterstützung usw. enthalten.
+=======
+- <https://caniuse.com> - per-feature tables of support, e.g. to see which engines support modern cryptography functions: <https://caniuse.com/#feat=cryptography>.
+- <https://kangax.github.io/compat-table> - a table with language features and engines that support those or don't support.
+
+All these resources are useful in real-life development, as they contain valuable information about language details, their support, etc.
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
 Bitte merke dir diese (oder diese Seite) für die Fälle, in denen du vertiefte Informationen über eine bestimmte Funktion benötigst.

1-js/01-getting-started/1-intro/limitations.svg

@@ -1,46 +1,66 @@
-# Code editors
+# Code-Editoren
 
-A code editor is the place where programmers spend most of their time.
+Der Code-Editor ist das Werkzeug, mit dem Programmierer die meiste Zeit verbringen. 
 
-There are two main types of code editors: IDEs and lightweight editors. Many people use one tool of each type.
+Es gibt zwei Arten von Code-Editoren: IDEs und Quelltext-Editoren. Viele Programmierer nutzen je ein Exemplar jedes Typs.
 
 ## IDE
 
-The term [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) refers to a powerful editor with many features that usually operates on a "whole project." As the name suggests, it's not just an editor, but a full-scale "development environment."
+Der Begriff [IDE](https://en.wikipedia.org/wiki/Integrated_development_environment) (Integrated Development Environment) bezieht sich auf einen mächtigen Editor mit vielen Nutzungsmöglichkeiten, der im Normalfall alle Arbeitsbereiche des Projekts abdeckt. Wie der Name schon andeutet, handelt es sich bei IDEs nicht nur um einen reinen Editor, sondern um eine komplette Entwicklungsumgebung-
 
-An IDE loads the project (which can be many files), allows navigation between files, provides autocompletion based on the whole project (not just the open file), and integrates with a version management system (like [git](https://git-scm.com/)), a testing environment, and other "project-level" stuff.
+Eine IDE lädt das Projekt (das aus vielen Dateien bestehen kann), erlaubt die Navigation zwischen Dateien, stellt eine Autovervollständigung für das gesamte Projekt (und nicht nur für die geöffnete Datei) bereit und ist mit einem Versionsverwaltungssystem (wie z.B.: [git](https://git-scm.com/)), einer Test-Umgebung und anderen Projektrelevanten Bereichen verknüpft.
 
-If you haven't selected an IDE yet, consider the following options:
+Falls du für dich noch keine IDE ausgesucht hast, sind die nachfolgenden Optionen empfehlenswert:
 
+<<<<<<< HEAD
+- [Visual Studio Code](https://code.visualstudio.com/) (Cross-Plattform, kostenlos).
+- [WebStorm](http://www.jetbrains.com/webstorm/) (Cross-Plattform, ksotenpflichtig).
+=======
 - [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
-- [WebStorm](http://www.jetbrains.com/webstorm/) (cross-platform, paid).
+- [WebStorm](https://www.jetbrains.com/webstorm/) (cross-platform, paid).
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
-For Windows, there's also "Visual Studio", not to be confused with "Visual Studio Code". "Visual Studio" is a paid and mighty Windows-only editor, well-suited for the .NET platform. It's also good at JavaScript. There's also a free version [Visual Studio Community](https://www.visualstudio.com/vs/community/).
+Für Windows steht außerdem "Visual Studio" zur Verfügung, diese IDE sollte nicht mit "Visual Studio Code" verwechselt werden. "Visual Studio" ist ein kostenpflichtiger und umfangreicher Editor, der insbesondere für die Arbeit mit der .Net-Plattform geeignet ist. "Visual Studio" ist außerdem gut für Javascript geeignet. Eine kostenlose Version ist unter folgender Adresse verfügbar: [Visual Studio Community](https://www.visualstudio.com/vs/community/).
 
-Many IDEs are paid, but have a trial period. Their cost is usually negligible compared to a qualified developer's salary, so just choose the best one for you.
+Viele IDEs sind kostenpflichtig, stellen aber kostenlose Test-Versionen zur Verfügung. Die Kosten sind im Verhältnis zum Gehalt eines qualifizierten Programmierers vernachlässigbar, also such einfach die Plattform aus, die dir am besten passt.
 
-## Lightweight editors
+## Quelltext-Editoren
 
-"Lightweight editors" are not as powerful as IDEs, but they're fast, elegant and simple.
+Quelltext-Editoren, im englischen auch "lightweight editors", also leichtgewichtige Editoren genannt, sind nicht so mächtig wie IDEs, aber dafür sind sie schnell, eleganz und einfach in der Nutzung.
 
-They are mainly used to open and edit a file instantly.
+Sie werden hauptsächlich dafür genutzt, Dateien schnell zu öffnen und zu bearbeiten.
 
-The main difference between a "lightweight editor" and an "IDE" is that an IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
+Der hauptsächliche Unterschied zwischen einem Quelltext-Editor und einer IDE liegt darin, dass die IDE auf der Projekt-Ebene arbeitet, sie lädt also viele relevante Dateien zu Programmstart, analysiert die Projektstruktur und so weiter. Ein Quelltext-Editor arbeitet weitaus schneller, wenn wir nur eine Datei brauchen.  
 
-In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
+In der Praxis verfügen auch viele Quelltext-Editoren über eine breite Auswahl an Plugins, darunter etwa Analyse-Werkzeuge für die Code-Syntax und Unterstützung zur Autovervollständigung, so dass sich eine klare Grenze zwischen IDEs und Quelltext-Editoren gar nicht ziehen lässt.    
 
-The following options deserve your attention:
+<<<<<<< HEAD
+Die nachfolgenden Optionen sind gute Beispiele für Quelltext-Editoren
+=======
+There are many options, for instance:
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
-- [Atom](https://atom.io/) (cross-platform, free).
-- [Visual Studio Code](https://code.visualstudio.com/) (cross-platform, free).
-- [Sublime Text](http://www.sublimetext.com) (cross-platform, shareware).
+- [Sublime Text](https://www.sublimetext.com/) (cross-platform, shareware).
 - [Notepad++](https://notepad-plus-plus.org/) (Windows, free).
-- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+<<<<<<< HEAD
+- [Vim](http://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) können ebenfalls sehr gut sein, wenn man damit umgehen kann.
+=======
+- [Vim](https://www.vim.org/) and [Emacs](https://www.gnu.org/software/emacs/) are also cool if you know how to use them.
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10
 
-## Let's not argue
+## ABER: Die Auswahl des Editors ist keinen Streit wert.
 
-The editors in the lists above are those that either I or my friends whom I consider good developers have been using for a long time and are happy with.
+Die Editoren in der Liste wurden entweder von mir oder von Freunden ausgewählt, die ich für gute Entwickler halte und die seit langer Zeit erfolgreich mit den aufgeführten Editoren gearbeitet haben. 
 
-There are other great editors in our big world. Please choose the one you like the most.
+Aber es gibt natürlich auch andere Editoren in der großen Welt des Internets. Such dir einfach den Editor aus, mit dem du arbeiten möchtest. 
 
+<<<<<<< HEAD
+Die Wahl des Editors ist, wie bei jedem anderen Werkzeug, eine persönliche Vorliebe und hängt von deinem Projekt, deinen Arbeitsgewohnheiten und persönlichen Vorlieben ab.
+=======
 The choice of an editor, like any other tool, is individual and depends on your projects, habits, and personal preferences.
+
+The author's personal opinion:
+
+- I'd use [Visual Studio Code](https://code.visualstudio.com/) if I develop mostly frontend.
+- Otherwise, if it's mostly another language/platform and partially frontend, then consider other editors, such as XCode (Mac), Visual Studio (Windows) or Jetbrains family (Webstorm, PHPStorm, RubyMine etc, depending on the language).
+>>>>>>> d694e895efe89922a109702085b6ca1efeffea10

1-js/01-getting-started/2-manuals-specifications/article.md

@@ -1,63 +1,63 @@
-# Developer console
+# Entwickler-Konsole
 
-Code is prone to errors. You will quite likely make errors... Oh, what am I talking about? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
+Code ist anfällig für Fehler. Du wirst sehr wahrscheinlich Fehler machen... Oh, was rede ich da? Du wirst *auf jeden Fall* Fehler machen, zumindest wenn du ein Mensch bist und kein [Roboter](https://en.wikipedia.org/wiki/Bender_(Futurama)).
 
-But in the browser, users don't see errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
+Aber im Browser sehen die Benutzer standardmäßig keine Fehler. Wenn also im Skript etwas schief geht, sehen wir nicht, was fehlerhaft ist und können es nicht beheben.
 
-To see errors and get a lot of other useful information about scripts, "developer tools" have been embedded in browsers.
+Um Fehler zu sehen und weitere nützliche Informationen über Skripte zu erhalten, wurden "Entwicklerwerkzeuge" in die Browser eingebettet.
 
-Most developers lean towards Chrome or Firefox for development because those browsers have the best developer tools. Other browsers also provide developer tools, sometimes with special features, but are usually playing "catch-up" to Chrome or Firefox. So most developers have a "favorite" browser and switch to others if a problem is browser-specific.
+Die meisten Entwickler tendieren bei der Entwicklung zu Chrome oder Firefox, da diese Browser über die besten Entwicklerwerkzeuge verfügen. Andere Browser bieten ebenfalls Entwicklerwerkzeuge an, manchmal mit speziellen Funktionen, aber in der Regel lassen Chrome oder Firefox diese hinter sich. So haben die meisten Entwickler einen "Lieblingsbrowser" und wechseln zu einen anderen, wenn es ein browserspezifisches Problem gibt.
 
-Developer tools are potent; they have many features. To start, we'll learn how to open them, look at errors, and run JavaScript commands.
+Entwicklerwerkzeuge sind leistungsstark; sie haben viele Funktionen. Zu Beginn werden wir lernen, wie man sie öffnet, Fehler betrachtet und JavaScript-Befehle ausführt.
 
 ## Google Chrome
 
-Open the page [bug.html](bug.html).
+Öffne die Seite [bug.html](bug.html).
 
-There's an error in the JavaScript code on it. It's hidden from a regular visitor's eyes, so let's open developer tools to see it.
+Dort ist ein Fehler im JavaScript-Code. Er ist aus Sicht eines normalen Besuchers nicht zu sehen, also öffnen wird die Entwicklerwerkzeuge um ihn zu sehen.
 
-Press `key:F12` or, if you're on Mac, then `key:Cmd+Opt+J`.
+Drücke `key:F12` oder wenn du auf einem Mac bist `key:Cmd+Opt+J`.
 
-The developer tools will open on the Console tab by default.
+Die Entwicklerwerkzeuge öffnen sich standardmäßig auf dem Konsolen-Reiter.
 
-It looks somewhat like this:
+Es sieht in etwa so aus:
 
 ![chrome](chrome.png)
 
-The exact look of developer tools depends on your version of Chrome. It changes from time to time but should be similar.
+Das genaue Aussehen der Entwicklerwerkzeuge hängt von deiner Chrome-Version ab. Es ändert sich von Zeit zu Zeit, sollte aber ähnlich aussehen.
 
-- Here we can see the red-colored error message. In this case, the script contains an unknown "lalala" command.
-- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occurred.
+- Hier sehen wir die rot eingefärbte Fehlermeldung. In diesem Fall enthält das Skript einen unbekannten "lalala"-Befehl.
+- Auf der rechten Seite ist ein anklickbarer Link zur Quelle `bug.html:12` mit der Zeilennummer, wo der Fehler aufgetreten ist.
 
-Below the error message, there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands. Press `key:Enter` to run them.
+Unter der Fehlermeldung befindet sich ein blaues `>` Symbol. Es markiert eine "Befehlszeile" wo wir JavaScript-Befehle eingeben können. Drücke `key:Enter` um sie auszuführen.
 
-Now we can see errors, and that's enough for a start. We'll come back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
+Jetzt können wir Fehler erkennen, und das reicht für den Anfang. Wir werden später noch einmal auf die Entwicklerwerkzeuge zurückkommen und das Debugging ausführlicher im Kapitel <info:debugging-chrome> behandeln.
 
 ```smart header="Multi-line input"
-Usually, when we put a line of code into the console, and then press `key:Enter`, it executes.
+Wenn wir eine Codezeile in die Konsole eingeben und dann `key:Enter` drücken, wird sie normalerweise ausgeführt.
 
-To insert multiple lines, press `key:Shift+Enter`. This way one can enter long fragments of JavaScript code.
+Um mehrere Zeilen einzufügen, drücke `key:Shift+Enter`. Auf diese Weise kann man lange Fragmente von JavaScript-Code eingeben.
 ```
 
-## Firefox, Edge, and others
+## Firefox, Edge, und andere
 
-Most other browsers use `key:F12` to open developer tools.
+Die meisten Browser benutzen `key:F12` um die Entwicklerwerkzeuge zu öffnen.
 
-The look & feel of them is quite similar. Once you know how to use one of these tools (you can start with Chrome), you can easily switch to another.
+Das Aussehen ist meist sehr ähnlich. Sobald du weißt wie man eins dieser Tools benutzt (du kannst mit Chrome anfangen), kannst du einfach zu einem anderen wechseln.
 
 ## Safari
 
-Safari (Mac browser, not supported by Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
+Safari (Mac Browser, nicht unterstützt werden Windows/Linux) ist etwas speziell. Wir müssen zuerst das "Entwickler-Menü" aktivieren.
 
-Open Preferences and go to the "Advanced" pane. There's a checkbox at the bottom:
+Öffne Einstellungen und wähle "Erweitert" aus. Dort ist unten ein Kontrollkästchen:
 
 ![safari](safari.png)
 
-Now `key:Cmd+Opt+C` can toggle the console. Also, note that the new top menu item named "Develop" has appeared. It has many commands and options.
+Nun kann `key:Cmd+Opt+C` die Konsole umschalten. Beachte ebenfalls den neuen Menüeintrag "Entwickler", der aufgetaucht ist. Dieser hat viele Befehle und Optionen.
 
-## Summary
+## Zusammenfassung
 
-- Developer tools allow us to see errors, run commands, examine variables, and much more.
-- They can be opened with `key:F12` for most browsers on Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
+- Entwicklertools ermöglichen uns Fehler zu sehen, Befehle auszuführen, Variablen zu untersuchen und vieles mehr
+- Sie können mit `key:F12` in den meisten Browsern auf Windows geöffnet werden. Chrome für den Mac benötigt `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (muss erst eingeschaltet werden).
 
-Now we have the environment ready. In the next section, we'll get down to JavaScript.
+Nun ist unsere Umgebung bereit. Im nächsten Abschnitt kommen wir zu JavaScript.

1-js/01-getting-started/3-code-editors/article.md

@@ -6,12 +6,11 @@
 </head>
 
 <body>
-
-  There is an error in the script on this page.
+  Da ist ein Fehler im Skript auf dieser Seite.
   <script>
     lalala
   </script>
 
 </body>
 
-</html>
+</html>

1-js/01-getting-started/4-devtools/article.md

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+
+  <script>
+    alert( "I'm JavaScript!" );
+  </script>
+
+</body>
+
+</html>

1-js/01-getting-started/4-devtools/bug.html

@@ -0,0 +1,2 @@
+
+[html src="index.html"]