From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../how_does_the_internet_work/index.html | 95 +++ .../wie_das_internet_funktioniert/index.html | 95 --- .../cascade_and_inheritance/index.html | 160 +++++ .../learn/css/building_blocks/selectors/index.html | 430 ++++++++++++++ .../building_blocks/values_and_units/index.html | 394 +++++++++++++ .../building_blocks/werten_einheiten/index.html | 394 ------------- .../first_steps/how_css_is_structured/index.html | 166 ++++++ .../learn/css/first_steps/how_css_works/index.html | 113 ++++ .../learn/css/styling_text/fundamentals/index.html | 152 +++++ files/de/learn/forms/index.html | 90 +++ .../dateien_nutzen/index.html | 106 ---- .../dealing_with_files/index.html | 106 ++++ .../how_the_web_works/index.html | 100 ++++ .../javascript_basics/index.html | 407 +++++++++++++ .../javascript_basis/index.html | 407 ------------- .../wie_das_internet_funktioniert/index.html | 100 ---- .../der_kopf_metadaten_in_html/index.html" | 268 --------- .../document_and_website_structure/index.html" | 292 ---------- .../einfache_textformatierung_in_html/index.html" | 643 --------------------- .../erstellen_von_hyperlinks/index.html" | 317 ---------- .../fehlersuche_in_html/index.html" | 197 ------- .../fortgeschrittene_textformatierung/index.html" | 466 --------------- .../html/einf\303\274hrung_in_html/index.html" | 65 --- .../lerne_html_kennen/index.html" | 571 ------------------ .../marking_up_a_letter/index.html" | 102 ---- .../structuring_a_page_of_content/index.html" | 99 ---- files/de/learn/html/forms/index.html | 90 --- .../advanced_text_formatting/index.html | 466 +++++++++++++++ .../creating_hyperlinks/index.html | 317 ++++++++++ .../introduction_to_html/debugging_html/index.html | 197 +++++++ .../document_and_website_structure/index.html | 292 ++++++++++ .../getting_started/index.html | 571 ++++++++++++++++++ .../html_text_fundamentals/index.html | 643 +++++++++++++++++++++ .../de/learn/html/introduction_to_html/index.html | 65 +++ .../marking_up_a_letter/index.html | 102 ++++ .../structuring_a_page_of_content/index.html | 99 ++++ .../the_head_metadata_in_html/index.html | 268 +++++++++ files/de/learn/html/tables/basics/index.html | 555 ++++++++++++++++++ .../html/tables/grund_tabelle_html/index.html | 555 ------------------ .../javascript/bausteine/ereignisse/index.html | 587 ------------------- files/de/learn/javascript/bausteine/index.html | 42 -- .../javascript/building_blocks/events/index.html | 587 +++++++++++++++++++ .../de/learn/javascript/building_blocks/index.html | 42 ++ .../first_steps/a_first_splash/index.html | 597 +++++++++++++++++++ .../javascript/first_steps/erster_blick/index.html | 597 ------------------- .../lustige_geschichten_generator/index.html | 139 ----- .../first_steps/silly_story_generator/index.html | 139 +++++ .../first_steps/was_ist_javascript/index.html | 339 ----------- .../first_steps/what_is_javascript/index.html | 339 +++++++++++ files/de/learn/mitarbeiten/index.html | 82 --- .../de/learn/server-side/erste_schritte/index.html | 49 -- .../erste_schritte/introduction/index.html | 230 -------- files/de/learn/server-side/first_steps/index.html | 49 ++ .../first_steps/introduction/index.html | 230 ++++++++ 54 files changed, 7771 insertions(+), 6832 deletions(-) create mode 100644 files/de/learn/common_questions/how_does_the_internet_work/index.html delete mode 100644 files/de/learn/common_questions/wie_das_internet_funktioniert/index.html create mode 100644 files/de/learn/css/building_blocks/cascade_and_inheritance/index.html create mode 100644 files/de/learn/css/building_blocks/selectors/index.html create mode 100644 files/de/learn/css/building_blocks/values_and_units/index.html delete mode 100644 files/de/learn/css/building_blocks/werten_einheiten/index.html create mode 100644 files/de/learn/css/first_steps/how_css_is_structured/index.html create mode 100644 files/de/learn/css/first_steps/how_css_works/index.html create mode 100644 files/de/learn/css/styling_text/fundamentals/index.html create mode 100644 files/de/learn/forms/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html create mode 100644 files/de/learn/getting_started_with_the_web/dealing_with_files/index.html create mode 100644 files/de/learn/getting_started_with_the_web/how_the_web_works/index.html create mode 100644 files/de/learn/getting_started_with_the_web/javascript_basics/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/javascript_basis/index.html delete mode 100644 files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" delete mode 100644 "files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" delete mode 100644 files/de/learn/html/forms/index.html create mode 100644 files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html create mode 100644 files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html create mode 100644 files/de/learn/html/introduction_to_html/debugging_html/index.html create mode 100644 files/de/learn/html/introduction_to_html/document_and_website_structure/index.html create mode 100644 files/de/learn/html/introduction_to_html/getting_started/index.html create mode 100644 files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html create mode 100644 files/de/learn/html/introduction_to_html/index.html create mode 100644 files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html create mode 100644 files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html create mode 100644 files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/de/learn/html/tables/basics/index.html delete mode 100644 files/de/learn/html/tables/grund_tabelle_html/index.html delete mode 100644 files/de/learn/javascript/bausteine/ereignisse/index.html delete mode 100644 files/de/learn/javascript/bausteine/index.html create mode 100644 files/de/learn/javascript/building_blocks/events/index.html create mode 100644 files/de/learn/javascript/building_blocks/index.html create mode 100644 files/de/learn/javascript/first_steps/a_first_splash/index.html delete mode 100644 files/de/learn/javascript/first_steps/erster_blick/index.html delete mode 100644 files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html create mode 100644 files/de/learn/javascript/first_steps/silly_story_generator/index.html delete mode 100644 files/de/learn/javascript/first_steps/was_ist_javascript/index.html create mode 100644 files/de/learn/javascript/first_steps/what_is_javascript/index.html delete mode 100644 files/de/learn/mitarbeiten/index.html delete mode 100644 files/de/learn/server-side/erste_schritte/index.html delete mode 100644 files/de/learn/server-side/erste_schritte/introduction/index.html create mode 100644 files/de/learn/server-side/first_steps/index.html create mode 100644 files/de/learn/server-side/first_steps/introduction/index.html (limited to 'files/de/learn') diff --git a/files/de/learn/common_questions/how_does_the_internet_work/index.html b/files/de/learn/common_questions/how_does_the_internet_work/index.html new file mode 100644 index 0000000000..f780dac8a7 --- /dev/null +++ b/files/de/learn/common_questions/how_does_the_internet_work/index.html @@ -0,0 +1,95 @@ +--- +title: Wie das Internet funktioniert +slug: Learn/Common_questions/Wie_das_Internet_funktioniert +translation_of: Learn/Common_questions/How_does_the_Internet_work +--- +
{{LearnSidebar}}
+ +
+

Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert

+
+ + + + + + + + + + + + +
Voraussetzungen:Keine, aber wir empfehlen dir den Artikel setting project goals zuerst zu lesen.
Ziel:You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.
+ +

Summary

+ +

Das Internet ist das Rückgrat des Webs, die technische Infrastruktur die das Web möglich macht. Grundlegend ist das Internet ein riesiges Netzwerk von Computern, welche untereinander kommunizieren.

+ +

The history of the Internet is somewhat obscure. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.

+ +

Active Learning

+ + + +

Deeper dive

+ +

A simple network

+ +

When two computers need to communicate, you have to link them, either physically (usually with an Ethernet cable) or wirelessly (for example with WiFi or Bluetooth systems). All modern computers can sustain any of those connections.

+ +
+

Note: For the rest of this article, we will only talk about physical cables, but wireless networks work the same.

+
+ +

Two computers linked together

+ +

Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!

+ +

Ten computers all together

+ +

To solve this problem, each computer on a network is connected to a special tiny computer called a router. This router has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.

+ +

Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.

+ +

Ten computers with a router

+ +

A network of networks

+ +

So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together? Nothing, so let's do that.

+ +

Two routers linked together

+ +

By connecting computers to routers, then routers to routers, we are able to scale infinitely.

+ +

Routers linked to routers

+ +

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

+ +

A router linked to a modem

+ +

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

+ +

Full Internet stack

+ +

Finding computers

+ +

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

+ +

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

+ +

Show how a domain name can alias an IP address

+ +

Internet and the web

+ +

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

+ +

Next steps

+ + diff --git a/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html b/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html deleted file mode 100644 index f780dac8a7..0000000000 --- a/files/de/learn/common_questions/wie_das_internet_funktioniert/index.html +++ /dev/null @@ -1,95 +0,0 @@ ---- -title: Wie das Internet funktioniert -slug: Learn/Common_questions/Wie_das_Internet_funktioniert -translation_of: Learn/Common_questions/How_does_the_Internet_work ---- -
{{LearnSidebar}}
- -
-

Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert

-
- - - - - - - - - - - - -
Voraussetzungen:Keine, aber wir empfehlen dir den Artikel setting project goals zuerst zu lesen.
Ziel:You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.
- -

Summary

- -

Das Internet ist das Rückgrat des Webs, die technische Infrastruktur die das Web möglich macht. Grundlegend ist das Internet ein riesiges Netzwerk von Computern, welche untereinander kommunizieren.

- -

The history of the Internet is somewhat obscure. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.

- -

Active Learning

- - - -

Deeper dive

- -

A simple network

- -

When two computers need to communicate, you have to link them, either physically (usually with an Ethernet cable) or wirelessly (for example with WiFi or Bluetooth systems). All modern computers can sustain any of those connections.

- -
-

Note: For the rest of this article, we will only talk about physical cables, but wireless networks work the same.

-
- -

Two computers linked together

- -

Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!

- -

Ten computers all together

- -

To solve this problem, each computer on a network is connected to a special tiny computer called a router. This router has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.

- -

Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.

- -

Ten computers with a router

- -

A network of networks

- -

So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single router can't scale that far, but, if you read carefully, we said that a router is a computer like any other, so what keeps us from connecting two routers together? Nothing, so let's do that.

- -

Two routers linked together

- -

By connecting computers to routers, then routers to routers, we are able to scale infinitely.

- -

Routers linked to routers

- -

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a modem. This modem turns the information from our network into information manageable by the telephone infrastructure and vice versa.

- -

A router linked to a modem

- -

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special routers that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

- -

Full Internet stack

- -

Finding computers

- -

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for Internet Protocol). It's an address made of a series of four numbers separated by dots, for example: 192.168.2.10.

- -

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human readable name called a domain name. For example, google.com is the domain name used on top of the IP address 173.194.121.32. So using the domain name is the easiest way for us to reach a computer over the Internet.

- -

Show how a domain name can alias an IP address

- -

Internet and the web

- -

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called Web servers) can send messages intelligible to web browsers. The Internet is an infrastructure, whereas the Web is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and {{Glossary("IRC")}}.

- -

Next steps

- - diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..79ce577e7f --- /dev/null +++ b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,160 @@ +--- +title: Kaskadierung und Vererbung +slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/How_CSS_works", "Wie CSS funktioniert.")}}Das ist der vierte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie Stylesheets in einer Kaskade interagieren und wie Element den Style von ihren Elternelmenten erben können. Sie werden Vererbung verwenden, um eine Menge von Teilen in Ihrem Beispieldokument in einem Schritt zu verändern.

+ +

Information: Kaskadierung und Vererbung

+ +

Der schlussendliche Style eines Elements kann an vielen verschiedenen Orten angegeben werden, die auf eine komplexe Art miteinander interagieren. Diese Komplexität macht CSS mächtig. Aber dadurch kann es auch verwirrend und schwer zu debuggen werden.

+ +

Drei Hauptquellen von Styleinformationen bilden eine Kaskade. Diese sind:

+ + + +

Der Style des Benutzers verändert den standardmäßigen Style des Webbrowsers. Der Style des Autors des Dokuments verändert dann den Style ein weiteres Mal. In diesem Tutorial sind Sie der Autor des Beispieldokuments und es wird nur mit Stylesheets vom Autor gearbeitet.

+ +
+
Beispiel
+ +

Wenn Sie dieses Dokument in einem Webbrowser lesen, kommen Teile des Styles, den Sie sehen, von dem standardmäßigen Style des Webbrowsers für HTML.

+ +

Teile vom Style können von angepassten Webbrowsereinstellungen oder von einer angepassten Styledefinitionsdatei stammen. In Firefox können die Einstellungen im Preferences Dialog vorgenommen werden, oder Sie geben Styles in der Datei userContent.css innerhalb Ihres Browserprofils an.

+ +

Andere Teile vom Style kommen aus Stylesheets, die vom Wiki-Server mit dem Dokument verlinkt werden.

+
+ +

Wenn Sie Ihr Beispieldokument in Ihrem Webbrowser öffnen, werden die {{ HTMLElement("strong") }} Elemente mit dickeren Buchstaben als der Rest des Textes dargestellt. Das kommt aus dem standardmäßigen Style des Webbbrowsers für HTML.

+ +

Die {{ HTMLElement("strong") }} Elemente sind rot. Das kommt aus Ihrem Beispielstylesheet.

+ +

Die {{ HTMLElement("strong") }} Elemente erben auch viele Eigenschaften vom Style des {{ HTMLElement("p") }} Elements, weil sie ein Kindelement davon sind. Auf dieselbe Art erbt das {{ HTMLElement("p") }} Element vom Style des {{ HTMLElement("body") }} Elements.

+ +

Für Styles in der Kaskade haben die Stylesheets vom Autor höchste Priorität. Danach folgen die Stylesheets des Benutzers und der standardmäßige Stylesheet vom Webbrowser.

+ +

Bei vererbten Styles haben die eigenen Styles von Kindelementen eine höhere Priorität als die von dessen Elternelementen.

+ +

Das sind nicht alle Prioritäten, die angwendet werden. Folgende Seiten in diesem Tutorial gehen noch detaillierter darauf ein.

+ +
+
Mehr Details
+ +

CSS ermöglicht es auch mit dem Schlüsselwort !important die Styles vom Autor zu überschreiben.

+ +

Das bedeutet, dass ein Autor nicht immer genau vorhersehen kann, was genau die Leser sehen werden.

+ +

Wenn Sie alle Details über Kaskadierung und Vererbung erfahren wollen, rufen Sie bitte die Seite Assigning property values, Cascading, and Inheritance in der CSS Spezifikation auf.

+
+ +

Aktion: Vererbung verwenden

+ +
    +
  1. Editieren Sie Ihre CSS Datei.
    2. +
  2. Kopieren Sie die folgende Zeile in Ihre CSS Datei. Es macht dabei keinen Unterschied, ob Sie die Zeile vor oder nach der bereits enthaltenen Zeile einfügen. Es ist aber verständlicher die Zeile oben einzufügen, da das {{ HTMLElement("p") }} Element in Ihrem Dokument das Elternelement vom {{ HTMLElement("strong") }} Element ist: + 
    p {
+  color: blue;
+  text-decoration: underline;
+}
+
    +
    3. +
  3. Laden Sie die Seite im Webbrowser erneut, damit die Änderung an Ihrem Beispieldokument sehen können. Die unterstreichende Line betrifft den gesamten Text im Absatz und somit auch alle Anfangsbuchstaben. Die {{ HTMLElement("strong") }} Elemente haben den Unterstrich von ihrem Elternknoten {{ HTMLElement("p") }} geerbt.
    + +

    Die {{ HTMLElement("strong") }} Elemente sind aber immer noch rot. Die rote Farbe gehört zu ihrem eigenen Style und hat somit Priorität gegenüber dem blau des {{ HTMLElement("p") }} Elternelements.

    +
    4. +
+ +

Davor

+ +

HTML Inhalt

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+
+ +

CSS Inhalt

+ +
strong {
+  color:red
+}
+
+ +

{{ EmbedLiveSample('Before') }}

+ +

Danach

+ +

HTML Inhalt

+ +
<p>
+  <strong>C</strong>ascading
+  <strong>S</strong>tyle
+  <strong>S</strong>heets
+</p>
+ +

CSS Inhalt

+ +
p {
+  color:blue;
+  text-decoration:underline;
+}
+
+strong {
+  color:red;
+}
+ +

{{ EmbedLiveSample('After') }}

+ +

 

+ +
+
Herausforderung
+Verändern Sie Ihren Stylesheet, damit nur die roten Buchstaben unterstrichen sind: + + + + + + + +
Cascading Style Sheets
+ +
+
Mögliche Lösung
+ +

Verschieben Sie die Deklaration für die untersteichende Linie aus der Regel für {{ HTMLElement("p") }} in die für {{ HTMLElement("strong") }}. Die resultierende Datei sieht folgendermaßen aus:

+ +
p {
+  color: blue;
+}
+
+strong {
+  color: red;
+  text-decoration: underline;
+}
+
+ +

 

+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

 

+ +

Was kommt als Nächstes?

+ +

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selektoren")}}Ihr Beispielstylesheet definiert Styles für die Tags <p> und <strong>, um den Style der entsprechenden Elemente im gesamten Dokument zu verändern. Der nächste Abschnitt beschreibt, wie Sie den Style auf eine noch selektivere Art angeben können.

diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..f61b8bb577 --- /dev/null +++ b/files/de/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,430 @@ +--- +title: Selektoren +slug: Web/Guide/CSS/Getting_started/Selektoren +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Kaskadierung_und_vererbung", "Kaskadierung & Vererbung")}}Das ist der fünfte Abschnitt des CSS Getting Started Tutorials. Er erklärt wie sie Styles selektiv anwenden können und wie verschiedene Arten von Selektoren verschiedene Prioritäten haben können. Sie fügen einige Attribute zu den Tags in Ihrem Beispiel-Dokument hinzu und Sie verwenden diese Attribute in Ihrem Beispielstylesheet.

+ +

Information: Selektoren

+ +

CSS hat eine eigene Terminologie, die die CSS Sprache beschreibt. Früher in diesem Tutorial haben Sie eine Zeile wie die folgende geschrieben:

+ +
strong {
+  color: red;
+}
+
+ +

In der CSS Terminologie ist die gesamte Zeile eine Regel. Diese Regel beginnt mit strong, welches ein Selektor ist. Sie wählt aus, auf welche Elemente im DOM die Regel angewandt wird.

+ +
+
Mehr Details
+ +

Der Teil innerhalb der geschwungenen Klammern ist die Deklaration.

+ +

Das Schlüsselwort color ist eine Eigenschaft (Property) und red is ein Wert (value).

+ +

Das Semicolon nach dem Property-Value Pair trennt es von anderen Property-Value Pairs in derselben Deklaration.

+ +

Dieser Tutorial bezeichnet einen Selektor wie strong als einen Tag-Selektor. Die CSS Spezifikation bezeichnet es als Type-Selector.

+
+ +

Diese Seite vom Tutorial geht detaillierter auf die Selektoren ein, die in CSS Regeln verwendet werden können.

+ +

Zusätzlich zu Tagnamen können Werte von Attributen in Selektoren verwendet werden. Damit können Regeln spezifischer gemacht werden.

+ +

Zwei Attribute haben einen speziellen Status in CSS. Diese sind class und id.

+ +

Class Selektoren

+ +

Verwenden Sie das class Attribut in einem Element, um das Element einer Klasse zuzuordnen. Der Name der Klasse ist frei wählbar. Mehrere Elemente in einem Dokument können denselben Wert für die Klasse haben.

+ +

Tippen Sie einen Punkt direkt vor dem Klassennamen im Stylesheet, um die Klasse im Selektor zu verwenden.

+ +

ID Selektoren

+ +

Verwenden Sie das id Attribut in einem Element, um dem Elemente eine ID zuzuweisen. Der Name der ID ist frei wählbar. Die ID muss innerhalb vom Dokument eindeutig sein.

+ +

Tippen Sie eine Raute (Hash) direkt vor der ID im Styleshet, um die ID im Selektor zu verwenden.

+ +
+
Beispiel
+Dieser HTML Tag hat ein class Attribut und ein id Attribute: + +
<p class="key" id="principal">
+
+ +

Der id Wert, principal, muss innerhalb vom Dokument eindeutig, aber andere Tags Dokument dürfen denselben Klassennamen, key, haben.

+ +

In einem CSS Stylesheet macht diese Regel alle Elemente mit der class key grün. (Sie müssen dazu kein {{ HTMLElement("p") }} sein.)

+ +
.key {
+  color: green;
+}
+
+ +

Diese Regel macht das eine Element mit der id principal fettgedruckt:

+ +
#principal {
+  font-weight: bolder;
+}
+
+
+ +

Wenn mehr als eine Regel auf ein Element zutreffen und dieselbe Eigenschaft spezifiziert wird, gibt CSS der Regel mit dem spezifischeren Selektor Priorität. Ein ID Selektor ist spezifischer als ein class Selektor, welcher wiederum spezifischer als ein tag Selektor ist.

+ +
+
Mehr Details
+ +

Sie können Selektoren kombinieren, um einen selektiveren Selektor zu erstellen.

+ +

Der Selektor .key zum Beispiel selektier alle Elements mit der Klasse key. Der Selektor p.key selektiert nur {{ HTMLElement("p") }} Elemente, die die Klasse key haben.

+ +

Sie sind nicht auf die zwei speziellen Attribute class und id eingeschränkt. Mit eckigen Klammern können Sie auch andere Attribute spezifizieren. Der Selektor [type='button'] zum Beispiel selektiert alle Elemente, die ein type Attribut mit dem Wert button haben.

+
+ +

Wenn ein Stylesheet Regeln mit einem Konflikt hat und und diese gleich spezifisch sind, dann gibt CSS der Regel, die später im Stylesheet ist, Priorität.

+ +

Wenn Sie Probleme mit konfliktierenden Regeln haben, versuchen Sie eine Regel spezifischer zu machen, damit sie Priorität hat. Wenn Sie das nicht können, verschieben Sie eine der Regeln ans Ende des Stylesheet, damit sie Priorität bekommt.

+ +

Pseudo-classes Selektoren

+ +

Eine CSS pseudo-class ist ein Schlüsselwort, welches einem Selektor hinzugefügt wird. Damit kann ein bestimmter Zustand des selektierten Elements spezifiziert werden. {{ Cssxref(":hover") }} zum Beispiel wenden seinen Style an, wenn der Benutzer mit dem Mauszeiger über das selektierte Element fährt.

+ +

Pseudo-classes zusammen mit pseudo-elements lassen Sie eine Style für ein Element nicht nur in Relation zum Inhalt vom Document Tree sondern auch in Relation zu externen Faktoren wie den Verlauf  der Navigation ({{ cssxref(":visited") }}, zum Beispiel), dem Zustand seines Inhalt (wie {{ cssxref(":checked") }} auf manchen form Elementen) oder der Position des Mauszeigers (wie {{ cssxref(":hover") }} das angibt, ob sich der Mauszeiger über dem Element befindet) anwenden. Eine vollständige Liste der Selektoren ist unter CSS3 Selectors working spec zu finden.

+ +
+
Syntax
+ +
selector:pseudo-class {
+  property: value;
+}
+
+
+ +

Liste von pseudo-classes

+ + + +

Information: Selektoren basieren auf Beziehungen

+ +

CSS hat einige Wege um Elemente basieren auf ihrer Bezieung zu anderen Eementen zu selektieren. Damit können Selektoren spezifischer gemacht werden.

+ + + + + + + + + + + + + + + + + + + + + + + + + +
Gängige Selektoren basierend auf Beziehungen
SelektorSelektiert
A EJedes E Element, das ein Nachfolger eines A Elements ist (das heißt: ein Kind oder ein Kind eines Kindes, etc.)
A > EJedes E Element, das ein Kind eines A Elements ist
E:first-childJedes E Element, das das erste Kind seines Parent ist
B + EJedes E Element, das das nächste Sibling eines B Elements ist (das heißt: das nächste Kind von demselben Parent)
+ +

Über eine Kombination der selektoren können komplexe Beziehungen ausgedrückt werden.

+ +

Sie können auch das Symbol * (asterisk) verwenden, welches "jedes Element" bedeutet.

+ +
+
Beispiel
+ +

Eine HTML Tabelle hat ein id Attribute aber die Zeilen und Zellen haben keinen eigenen Identifier:

+ +
<table id="data-table-1">
+...
+<tr>
+<td>Prefix</td>
+<td>0001</td>
+<td>default</td>
+</tr>
+...
+
+ +

Diese Regeln machen die erste Zelle jeder Zeile fettgedruckt und die zweite Zelle jeweils monospaced. Sie betreffen nur eine bestimmte Tabelle im Dokument:

+ +
#data-table-1 td:first-child {
+  font-weight: bolder;
+}
+
+#data-table-1 td:first-child + td {
+  font-family: monospace;
+}
+
+ +

Das Ergebnis sieht so aus:

+ + + + + + + +
+ + + + + + + + +
Prefix0001default
+
+
+ +
+
Mehr Details
+ +

Wenn Sie einen Selektor spezifischer machen, erhöhen Sie normalerweise seine Priorität.

+ +

Wenn Sie diese Technik anwenden, können Sie es vermeiden vielen Tags in ihrem Dokument ein class oder ein id Attribut zu geben. Stattdessen erledigt CSS die Arbeit.

+ +

In umfassenden Designs, bei denen Geschwindigkeit wichtig ist, können Sie ihre Stylesheets effizienter machen, indem Sie komplexe Regeln mit Beziehungen zu anderen Elementen vermeiden.

+ +

Mehr Beispiele zu Tabellen finden Sie auf der CSS Referenzseite.

+
+ +

Aktion: class und ID Selektoren verwenden

+ +
    +
  1. Bearbeiten Sie Ihre HTML Datei und duplizieren Sie den Absatz mit copy and paste.
    2. +
  2. Danach setzen Sie ein id und class Attribut auf den ersten Absatz und ein id Attribut auf dem zweiten wie unten dargestellt. Alternativ können Sie die gesamte Datei kopieren und einfügen: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p id="first">
+      <strong class="carrot">C</strong>ascading
+      <strong class="spinach">S</strong>tyle
+      <strong class="spinach">S</strong>heets
+    </p>
+    <p id="second">
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+
    +
    3. +
  3. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + 
    strong {
+  color: red;
+}
+
+.carrot {
+  color: orange;
+}
+
+.spinach {
+  color: green;
+}
+
+#first {
+  font-style: italic;
+}
+
    +
    4. +
  4. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    + +

    Sie können die Zeilen in Ihrer CSS Datei neu anordnen, um zu sehen, dass die Reihenfolge keine Auswirkungen hat.

    + +

    Die class Selektoren .carrot und .spinach haben Priorität gegenüber dem tag Selektor strong.

    + +

    Der ID Selektor #first hat Priorität gegenüber den class und den tag Selektoren.

    +
    5. +
+ +
+
Herausforderungen
+ +
    +
  1. Ohne die HTML Datei zu verändern, fügen sie eine einzige Regel in Ihrer CSS Datei hinzu, die die Farbe aller Anfangsbuchstaben wie jetzt beibehält aber alle anderen Buchstaben im zweiten Absatz blau macht: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    2. +
  2. Ändern sie jetzt die neue Regel (ohne etwas anderes zu ändern), um den ersten Absatz auch blau zu machen: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    3. +
+ +
+
Mögliche Lösung
+ +
    +
  1. Fügen Sie eine Regel mit dem ID Selektor #second und einer Deklaration color: blue; wie unten dargestellt hinzu: + + 
    #second {
+  color: blue;
+}
+
    + Ein noch spezifischerer Selektor p#second funktioniert auch.
    2. +
  2. Ändern Sie den Selektor der neuen Regel auf p, damit er ein Tag-Selektor ist: + 
    p {
+  color: blue;
+}
+
    +
    3. +
+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

Aktion: pseudo-classes Selektoren verwenden

+ +
    +
  1. Erstellen Sie eine HTML Datei wie folgt: + 
    <!doctype html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  <link rel="stylesheet" href="style1.css">
+  </head>
+  <body>
+    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
+  </body>
+</html>
+
    +
    2. +
  2. Bearbeiten Sie jetzt Ihre CSS Datei. Ersetzen Sie den gesamten Inhalt mit: + 
    a.homepage:link, a.homepage:visited {
+  padding: 1px 10px 1px 10px;
+  color: #fff;
+  background: #555;
+  border-radius: 3px;
+  border: 1px outset rgba(50,50,50,.5);
+  font-family: georgia, serif;
+  font-size: 14px;
+  font-style: italic;
+  text-decoration: none;
+}
+
+a.homepage:hover, a.homepage:focus, a.homepage:active {
+  background-color: #666;
+}
+
    +
    3. +
  3. Speichern Sie die Dateien und aktualisieren Sie den Webbrowser, um das Ergebnis zu sehen (fahren sie mit dem Mauszeiger über den folgenden Link, um den Effekt zu sehen): + + + + + + +
    Go to our Home page  
    +
    4. +
+ +

Aktion: Selektoren basierend auf Beziehungen und pseudo-classes verwenden

+ +

Mit Selektoren basierung auf Beziehungen und pseudo-classes können Sie komplexe Algorithmen mit Kaskadierung erstellen. Das ist eine gängige Technik, um zum Beispiel reine CSS Dropdown Menüs zu erstellen (die nur aus CSS ohne JavaScript bestehen). Die Essenz dieser Technik ist die Erstellung einer Regel wie die folgende:

+ +
div.menu-bar ul ul {
+  display: none;
+}
+
+div.menu-bar li:hover > ul {
+  display: block;
+}
+ +

Angewendet auf eine HTML Struktur wie die folgende:

+ +
<div class="menu-bar">
+  <ul>
+    <li>
+      <a href="example.html">Menu</a>
+      <ul>
+        <li>
+          <a href="example.html">Link</a>
+        </li>
+        <li>
+          <a class="menu-nav" href="example.html">Submenu</a>
+          <ul>
+            <li>
+              <a class="menu-nav" href="example.html">Submenu</a>
+              <ul>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+                <li><a href="example.html">Link</a></li>
+              </ul>
+            </li>
+            <li><a href="example.html">Link</a></li>
+          </ul>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+
+ +

Sehen sie in das komplette CSS-basierte Dropdown Menü Beispiel für mögliche Hinweise.

+ +

Was kommt als Nächstes?

+ +

Ihr Beispiel-Stylesheet sieht langsam kompakt und kompliziert aus. Der nächste Anschnit beschreibt die Wege, um CSS leichter lesbar zu machen.{{nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}

diff --git a/files/de/learn/css/building_blocks/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,394 @@ +--- +title: Werte und Einheiten in CSS +slug: Learn/CSS/Building_blocks/Werten_Einheiten +tags: + - CSS + - Einheiten + - Farbe + - Lernen + - Werte +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+ +

Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn about the different types of values and units used in CSS properties.
+ +

What is a CSS value?

+ +

In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

+ +
+

Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

+
+ +
+

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

+
+ +

In the following example we have set the color of our heading using a keyword, and the background using the rgb() function:

+ +
h1 {
+  color: black;
+  background-color: rgb(197,93,161);
+} 
+
+ +

A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. You can use any available <color> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.

+ +

Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.

+ +

Numbers, lengths, and percentages

+ +

There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
Data typeDescription
<integer>An <integer> is a whole number such as 1024 or -55.
<number>A <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2.
<dimension>A <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types.
<percentage>A <percentage> represents a fraction of some other value, for example 50%. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
+ +

Lengths

+ +

The numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

+ +

Absolute length units

+ +

The following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
+ +

Most of these values are more useful when used for print, rather than screen output. For example we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

+ +

Relative length units

+ +

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
UnitRelative to
emFont size of the element.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
+ +

Exploring an example

+ +

In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.

+ +

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

+ +

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

+ +

After following the instructions above, try playing with the values in other ways, to see what you get.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

+ +

ems and rems

+ +

Die relativen Maßeneinheiten, em und rem,die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

+ +

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

+ +

To start with, we set 16px as the font size on the <html> element.

+ +

To recap, the em unit means "my parent element's font-size". The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

+ +

To recap, the rem unit means "The root element's font-size". (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

+ +

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

+ +

Percentages

+ +

In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

+ +

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

+ +

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

+ +

Try changing the width of the wrapper or the percentage value to see how this works.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

+ +

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

+ +

Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

+ +

Numbers

+ +

Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

+ +

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

+ +
+

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

+
+ +

Color

+ +

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

+ +

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

+ +
+

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

+
+ +

Color keywords

+ +

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value.

+ +

Try playing with different color values in the live examples below, to get more of an idea how they work.

+ +

Hexadecimal RGB values

+ +

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

+ +

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

+ +

Again, try changing the values to see how the colors vary.

+ +

RGB and RGBA values

+ +

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

+ +

Let's rewrite our last example to use RGB colors:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

+ +

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

+ +
+

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

+
+ +

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

+ +

In this example, try changing the alpha channel values to see how it affects the color output.

+ +
+

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

+
+ +

HSL and HSLA values

+ +

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

+ + + +

We can update the RGB example to use HSL colors like this:

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

+ +

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

+ +

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

+ +

Images

+ +

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

+ +

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

+ +
+

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

+
+ +

Position

+ +

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

+ +

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

+ +

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

+ +

Play around with these values to see how you can push the image around.

+ +

Strings and identifiers

+ +

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

+ +

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

+ +

Functions

+ +

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

+ +

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

+ +

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

+ +

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

+ +

Summary

+ +

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

+ +

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

+ +

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

+ +

In this module

+ +
    +
  1. Cascade and inheritance
    2. +
  2. CSS selectors + +
    3. +
  3. The box model
    4. +
  4. Backgrounds and borders
    5. +
  5. Handling different text directions
    6. +
  6. Overflowing content
    7. +
  7. Values and units
    8. +
  8. Sizing items in CSS
    9. +
  9. Images, media, and form elements
    10. +
  10. Styling tables
    11. +
  11. Debugging CSS
    12. +
  12. Organizing your CSS
    13. +
diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html deleted file mode 100644 index 8c45b5ba69..0000000000 --- a/files/de/learn/css/building_blocks/werten_einheiten/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: Werte und Einheiten in CSS -slug: Learn/CSS/Building_blocks/Werten_Einheiten -tags: - - CSS - - Einheiten - - Farbe - - Lernen - - Werte -translation_of: Learn/CSS/Building_blocks/Values_and_units ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
- -

Every property used in CSS has a value or set of values that are allowed for that property, and taking a look at any property page on MDN will help you understand the values that are valid for any particular property. In this lesson we will take a look at some of the most common values and units in use.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:To learn about the different types of values and units used in CSS properties.
- -

What is a CSS value?

- -

In CSS specifications and on the property pages here on MDN you will be able to spot values as they will be surrounded by angle brackets, such as <color> or <length>. When you see the value <color> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <color> reference page.

- -
-

Note: You'll also see CSS values referred to as data types. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.

-
- -
-

Note: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <color> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.

-
- -

In the following example we have set the color of our heading using a keyword, and the background using the rgb() function:

- -
h1 {
-  color: black;
-  background-color: rgb(197,93,161);
-} 
-
- -

A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <color> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, rgb() functions, etc. You can use any available <color> values assuming they are supported by your browser. The page on MDN for each value will give you information about browser support. For example, if you look at the page for <color> you will see that the browser compatibility section lists different types of color value and support for them.

- -

Let's have a look at some of the types of value and unit you may frequently encounter, with examples so that you can try out different possible values.

- -

Numbers, lengths, and percentages

- -

There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:

- - - - - - - - - - - - - - - - - - - - - - - - - - -
Data typeDescription
<integer>An <integer> is a whole number such as 1024 or -55.
<number>A <number> represents a decimal number — it may or may not have a decimal point with a fractional component, for example 0.255, 128, or -1.2.
<dimension>A <dimension> is a <number> with a unit attached to it, for example 45deg, 5s, or 10px. <dimension> is an umbrella category that includes the <length>, <angle>, <time>, and <resolution> types.
<percentage>A <percentage> represents a fraction of some other value, for example 50%. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.
- -

Lengths

- -

The numeric type you will come across most frequently is <length>, for example 10px (pixels) or 30em. There are two types of lengths used in CSS — relative and absolute. It's important to know the difference in order to understand how big things will become.

- -

Absolute length units

- -

The following are all absolute length units — they are not relative to anything else and are generally considered to always be the same size.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitNameEquivalent to
cmCentimeters1cm = 96px/2.54
mmMillimeters1mm = 1/10th of 1cm
QQuarter-millimeters1Q = 1/40th of 1cm
inInches1in = 2.54cm = 96px
pcPicas1pc = 1/6th of 1in
ptPoints1pt = 1/72th of 1in
pxPixels1px = 1/96th of 1in
- -

Most of these values are more useful when used for print, rather than screen output. For example we don't typically use cm (centimeters) on screen. The only value that you will commonly use is px (pixels).

- -

Relative length units

- -

Relative length units are relative to something else, perhaps the size of the parent element's font, or the size of the viewport. The benefit of using relative units is that with some careful planning you can make it so the size of text or other elements scale relative to everything else on the page. Some of the most useful units for web development are listed in the table below.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
UnitRelative to
emFont size of the element.
exx-height of the element's font.
chThe advance measure (width) of the glyph "0" of the element's font.
remFont size of the root element.
lhLine height of the element.
vw1% of the viewport's width.
vh1% of the viewport's height.
vmin1% of the viewport's smaller dimension.
vmax1% of the viewport's larger dimension.
- -

Exploring an example

- -

In the example below you can see how some relative and absolute length units behave. The first box has a {{cssxref("width")}} set in pixels. As an absolute unit this width will remain the same no matter what else changes.

- -

The second box has a width set in vw (viewport width) units. This value is relative to the viewport width, and so 10vw is 10 percent of the width of the viewport. If you change the width of your browser window, the size of the box should change, however this example is embedded into the page using an <iframe>, so this won't work. To see this in action you'll have to try the example after opening it in its own browser tab.

- -

The third box uses em units. These are relative to the font size. I've set a font size of 1em on the containing {{htmlelement("div")}}, which has a class of .wrapper. Change this value to 1.5em and you will see that the font size of all the elements increases, but only the last item will get wider, as the width is relative to that font size.

- -

After following the instructions above, try playing with the values in other ways, to see what you get.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}

- -

ems and rems

- -

Die relativen Maßeneinheiten, em und rem,die oft ins Größe Veränderung sich handeln, so dass eine Anpassung in absolute Werten  when sizing anything from boxes to text. It's worth understanding how these work, and the differences between them, especially when you start getting on to more complex subjects like styling text or CSS layout. The below example provides a demonstration.

- -

The HTML is a set of nested lists — we have three lists in total and both examples have the same HTML. The only difference is that the first has a class of ems and the second a class of rems.

- -

To start with, we set 16px as the font size on the <html> element.

- -

To recap, the em unit means "my parent element's font-size". The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of ems take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to 1.3em — 1.3 times its parent's font size.

- -

To recap, the rem unit means "The root element's font-size". (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a class of rems take their sizing from the root element (<html>). This means that each successive level of nesting does not keep getting larger.

- -

However, if you change the <html> font-size in the CSS you will see that everything else changes relative to it — both rem- and em-sized text.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} 

- -

Percentages

- -

In a lot of cases a percentage is treated in the same way as a length. The thing with percentages is that they are always set relative to some other value. For example, if you set an element's font-size as a percentage it will be a percentage of the font-size of the element's parent. If you use a percentage for a width value, it will be a percentage of the width of the parent.

- -

In the below example the two percentage-sized boxes and the two pixel-sized boxes have the same class names. Both sets are 200px and 40% wide respectively.

- -

The difference is that the second set of two boxes is inside a wrapper that is 400 pixels wide. The second 200px wide box is the same width as the first one, but the second 40% box is now 40% of 400px — a lot narrower than the first one!

- -

Try changing the width of the wrapper or the percentage value to see how this works.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} 

- -

The next example has font sizes set in percentages. Each <li> has a font-size of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} 

- -

Note that, while many values accept a length or a percentage, there are some that only accept length. You can see which values are accepted on the MDN property reference pages. If the allowed value includes <length-percentage> then you can use a length or a percentage. If the allowed value only includes <length>, it is not possible to use a percentage.

- -

Numbers

- -

Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the opacity property, which controls the opacity of an element (how transparent it is). This property accepts a number between 0 (fully transparent) and 1 (fully opaque).

- -

In the below example, try changing the value of opacity to various decimal values between 0 and 1 and see how the box and its contents become more or less opaque.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} 

- -
-

Note: When you use a number in CSS as a value it should not be surrounded in quotes.

-
- -

Color

- -

There are many ways to specify color in CSS, some of which are more recently implemented than others. The same color values can be used everywhere in CSS, whether you are specifying text color, background color, or whatever else.

- -

The standard color system available in modern computers is 24 bit, which allows the display of about 16.7 million distinct colors via a combination of different red, green and blue channels with 256 different values per channel (256 x 256 x 256 = 16,777,216.) Let's have a look at some of the ways in which we can specify colors in CSS.

- -
-

Note: In this tutorial we will look at the common methods of specifying color that have good browser support; there are others but they don't have as good support and are less common.

-
- -

Color keywords

- -

Quite often in examples here in the learn section or elsewhere on MDN you will see the color keywords used, as they are a simple and understandable way of specifying color. There are a number of these keywords, some of which have fairly entertaining names! You can see a full list on the page for the <color> value.

- -

Try playing with different color values in the live examples below, to get more of an idea how they work.

- -

Hexadecimal RGB values

- -

The next type of color value you are likely to encounter is hexadecimal codes. Each hex value consists of a hash/pound symbol (#) followed by six hexadecimal numbers, each of which can take one of 16 values between 0 and f (which represents 15) — so 0123456789abcdef. Each pair of values represents one of the channels — red, green and blue — and allows us to specify any of the 256 available values for each (16 x 16 = 256.)

- -

These values are a bit more complex and less easy to understand, but they are a lot more versatile than keywords — you can use hex values to represent any color you want to use in your color scheme.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} 

- -

Again, try changing the values to see how the colors vary.

- -

RGB and RGBA values

- -

The third scheme we'll talk about here is RGB. An RGB value is a function — rgb() — which is given three parameters that represent the red, green, and blue channel values of the colors, in much the same way as hex values. The difference with RGB is that each channel is represented not by two hex digits, but by a decimal number between 0 and 255 — somewhat easier to understand.

- -

Let's rewrite our last example to use RGB colors:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} 

- -

You can also use RGBA colors — these work in exactly the same way as RGB colors, and so you can use any RGB values, however there is a fourth value that represents the alpha channel of the color, which controls opacity. If you set this value to 0 it will make the color fully transparent, whereas 1 will make it fully opaque. Values in between give you different levels of transparency.

- -
-

Note: Setting an alpha channel on a color has one key difference to using the {{cssxref("opacity")}} property we looked at earlier. When you use opacity you make the element and everything inside it opaque, whereas using RGBA colors only makes the color you are specifying opaque.

-
- -

In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}

- -

In this example, try changing the alpha channel values to see how it affects the color output.

- -
-

Note: At some point modern browsers were updated so that rgba() and rgb(), and hsl() and hsla() (see below), became pure aliases of each other and started to behave exactly the same. So for example both rgba() and rgb() accept colors with and without alpha channel values. Try changing the above example's rgba() functions to rgb() and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.

-
- -

HSL and HSLA values

- -

Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the hsl() function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:

- - - -

We can update the RGB example to use HSL colors like this:

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} 

- -

Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} 

- -

You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!

- -

Images

- -

The <image> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a url() function, or a gradient.

- -

In the example below we have demonstrated an image and a gradient in use as a value for the CSS background-image property.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} 

- -
-

Note: there are some other possible values for <image>, however these are newer and currently have poor browser support. Check out the page on MDN for the <image> data type if you want to read about them.

-
- -

Position

- -

The <position> data type represents a set of 2D coordinates, used to position an item such as a background image (via background-position). It can take keywords such as top, left, bottom, right, and center to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.

- -

A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to center.

- -

In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} 

- -

Play around with these values to see how you can push the image around.

- -

Strings and identifiers

- -

Throughout the examples above, we've seen places where keywords are used as a value (for example <color> keywords like red, black, rebeccapurple, and goldenrod). These keywords are more accurately described as identifiers, a special value that CSS understands. As such they are not quoted — they are not treated as strings.

- -

There are places where you use strings in CSS, for example when specifying generated content. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} 

- -

Functions

- -

The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — rgb(), hsl(), etc. The value used to return an image from a file — url() — is also a function.

- -

A value that behaves more like something you might find in a traditional programming language is the calc() CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.

- -

For example, below we are using calc() to make the box 20% + 100px wide. The 20% is calculated from the width of the parent container .wrapper and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use calc() to tell the browser to do it for us.

- -

{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}

- -

Summary

- -

This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the CSS Values and units reference page; you will encounter many of these in use as you work through these lessons.

- -

The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.

- -

For example, understanding that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}

- -

In this module

- -
    -
  1. Cascade and inheritance
    2. -
  2. CSS selectors - -
    3. -
  3. The box model
    4. -
  4. Backgrounds and borders
    5. -
  5. Handling different text directions
    6. -
  6. Overflowing content
    7. -
  7. Values and units
    8. -
  8. Sizing items in CSS
    9. -
  9. Images, media, and form elements
    10. -
  10. Styling tables
    11. -
  11. Debugging CSS
    12. -
  12. Organizing your CSS
    13. -
diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..4c16c3e18d --- /dev/null +++ b/files/de/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,166 @@ +--- +title: Lesbares CSS +slug: Web/Guide/CSS/Getting_started/Lesbares_CSS +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +

{{ CSSTutorialTOC() }}

+ +

{{ previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Selektoren", "Selektoren")}}Das ist der sechste Teil des CSS Getting Started Tutorials. Er erklärt den Stil und die Grammatik der CSS Sprache selbst. Sie ändern das Layout Ihrer CSS Datei, damit sie lesbarer wird.

+ +

Information: Lesbares CSS

+ +

Sie können Leerstellen und Kommentare in Ihren Stylesheets einfügen, um sie lesbarer zu machen. Wenn verschiedene Selektoren dasselbe Element nur auf verschiedene Arten auswählen und deren Regeln darauf angewendet werden, können Sie diese Selektoren im Stylesheet nacheinander gruppieren.

+ +

Leerstellen

+ +

Leerstellen können Leerzeichen, Tabs und Leerzeilen sein. Sie können Leerstellen in Ihren Stylesheets einfügen, um sie lesbarer zu machen.

+ +

Im Kontext eines Seitenlayouts und -zusammenstellung sind Leerstellen die Teile einer Seite, die frei bleiben: Seitenränder, Zwischenräume und Platz zwischen Spalten und beschriebene Zeilen.

+ +

Ihre CSS Datei aus den Beispielen hat momentan eine Regel pro Zeile und fast nur das Minimum von Leerstellen. In einem komplexen Stylesheet würde diese Layout schwer zu lesen und somit auch schwer zu warten sein.

+ +

Das gewählte Layout ist normalerweise eine persönliche Vorliebe. Doch wenn Ihre Stylesheets Teil eines gemeinsammen Projekts sind, könnten diese Projekte eigene Konventionen für das Layout haben.

+ +
+
Beispiele
+ +

Einige Personen mögen das kompakte Layout, das wir bis jetzt verwendet haben, in dem eine Zeile nur geteilt wird, wenn sie sonst sehr lange sein würde:

+ +
.carrot {color: orange; text-decoration: underline; font-style: italic;}
+
+ +

Einige Personen bevorzugen, wenn pro Zeile ein Property-Wert-Paar steht:

+ +
.carrot
+{
+color: orange;
+text-decoration: underline;
+font-style: italic;
+}
+
+ +

Einige Personen verwenden dann auch Einzüge — zwei oder vier Leerzeichen oder ein Tab sind gebräuchlich:

+ +
.carrot {
+  color: orange;
+  text-decoration: underline;
+  font-style: italic;
+}
+
+ +

Einige Personen richten alles vertikal an (aber solche Layouts sind schwer zu warten):

+ +
.carrot
+    {
+    color           : orange;
+    text-decoration : underline;
+    font-style      : italic;
+    }
+
+ +

Einige Personen verwenden verschieden viele Leerzeichen, um die Lesbarkeit zu verbessern.

+ +
.vegetable         { color: green; min-height:  5px; min-width:  5px }
+.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
+.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
+
+
+ +

Einige Personen verwenden Tabs für das Layout, während andere nur Leerzeichen verwenden.

+ +

Kommentare

+ +

Kommentare in CSS beginnen mit /* und enden mit */.

+ +

Sie können Kommentare in Stylesheets für Anmerkungen verwenden oder auch Teile vorübergehend für Testzwecke auskommentieren.

+ +

Um Teile eines Stylesheets auszukommentieren, platzieren Sie diesen Teil in einem Kommentar, damit der Webbrowser ihn nicht auswertet. Seien Sie mit dem Start und dem Ende eines Kommentars vorsichtig. Der Rest des Stylesheets muss weiterhin eine korrekte Syntax haben.

+ +
+
Beispiel
+ +
/* style for initial letter C in first paragraph */
+.carrot {
+  color:            orange;
+  text-decoration:  underline;
+  font-style:       italic;
+  }
+
+
+ +

Gruppierte Selektoren

+ +

Wenn mehrere Elemente denselben Style haben, können Sie eine Gruppe von Selektoren getrennt mit einem Komma spezifizieren. Die Deklaration wird dann auf alle selektierten Elemente angewendet.

+ +

An einer anderen Stelle in Ihrem Stylesheet können Sie einen einzelnen Selektor erneut spezifizieren, um zusätzlich individuelle Regeln dazu anzugeben.

+ +
+
Beispiel
+ +

Diese Regel macht {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }} und {{ HTMLElement("h3") }} Elemente in derselben Farbe.

+ +

Es ist angenehm die Farbe an nur einer Stelle zu spezifizieren, denn dann kann sie später einfacher verändert werden.

+ +
/* color for headings */
+h1, h2, h3 {color: navy;}
+
+
+ +

Aktion: Kommentare hinzufügen und das Layout verbessern

+ +
    +
  1. Bearbeiten Sie Ihre CSS Datei und schreiben Sie die folgenden Regeln hinein (in beliebiger Reihenfolge): + 
    strong {color: red;}
+.carrot {color: orange;}
+.spinach {color: green;}
+#first {font-style: italic;}
+p {color: blue;}
+
    +
    2. +
  2. Machen Sie den Stylesheet lesbaren, in dem sie die Regeln in eine für Sie logische Reihenfolge bringen und Sie Ihrer Meinung nach sinnvolle Leerstellen und Kommentare einfügen.
    3. +
  3. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser, um sicherzustellen, dass Ihre Änderungen keinen Einfluss auf die Anwendung des Stylesheets haben: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    4. +
+ +
+
Herausforderung
+ +

Kommentiere Sie nur Teile Ihres Stylesheets aus, damit nur der allererste Buchstabe in Ihrem Dokument rot ist:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +

(Es gibt mehrere Wege dies zu erreichen.)

+ +
+
Mögliche Lösung
+Eine mögliche Lösung wäre das Auskommentieren der Regel .carrot: + +
/*.carrot {
+  color: orange;
+}*/
+Lösung ausblenden
+Sehen Sie sich die Lösung an.
+ +

Was kommt als Nächstes?

+ +

{{ nextPage("/de/docs/Web/Guide/CSS/Getting_Started/Textstyles", "Textstyles") }}Ihr Beispiel-Stylesheet verwendet kursiven und unterstrichenen Text. Die nächste Seite beschreibt weitere Wege, um das Aussehen von Text in Ihrem Dokument zu spezifizieren.

diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..0641d048e4 --- /dev/null +++ b/files/de/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,113 @@ +--- +title: Was ist CSS +slug: Web/Guide/CSS/Getting_started/Was_ist_CSS +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +
{{CSSTutorialTOC}}
+ +

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Einführung")}} Das erste Kapitel von CSS für Einsteiger erklärt kurz CSS. Sie werden in den nächsten Kapiteln ein simples Dokument zum Üben erstellen.

+ +

Was ist CSS

+ +

Cascading Style Sheets (CSS für "gestufte Gestaltungsbögen") ist eine Sprache, die definiert wie Dokumente dem Benutzer präsentiert werden.

+ +

Ein Dokument ist eine Ansammlung von Informationen (Texte, Bilder, …), die mit einer Auszeichnungssprache (Markup Language) strukturiert werden. In der Auszeichnungssprache wird angegeben, dass ein Text beispielsweise als Überschrift oder als Link dargestellt werden soll. Es wird jedoch NICHT angegeben, WIE eine Überschrift oder ein Link dargestellt werden sollen. Das genau macht CSS.

+ +

Ein solches Dokument einem Benutzer zu präsentieren bedeutet, es in einer lesbaren Form darzustellen. Browser wie Firefox, Chrome oder Internet Explorer sind dafür entworfen, Dokumente visuell zu präsentieren. Beispielsweise auf einem Computer Monitor, Beamer oder Drucker.

+ +
+

Beispiele

+ + +
+ +

In dieser Anleitung gibt es Boxen mit der Beschriftung Weitere Details, wie sie unten zu sehen ist. Solche Boxen stellen weiterführende Informationen und Links zu einem Thema bereit. Lesen Sie sie, folgen Sie den Links oder überspringen Sie diese Boxen und lesen Sie sie später.

+ +
+
Weitere Details
+ +

Ein Dokument ist nicht dasselbe wie eine Datei. Sie können aber selbstverständlich ein Dokument als Datei abspeichern.

+ +

Das Dokument, das Sie gerade lesen, ist nicht als Datei gespeichert. Wenn Ihr Browser diese Seite anfragt, durchsucht der Server eine Datenbank und generiert dieses Dokument indem er Teile daraus aus mehreren, verschiedenen Dateien zusammensetzt.

+ +

Sie werden dennoch in diesem Tutorial mit Dokumenten arbeiten, die in Dateien gespeichert sind.

+ +

Weiterführende Infromationen über Dokumente und Auszeichnungssprachen finden Sie hier:

+ + + + + + + + + + + + + + + + + + + + +
HTMLfür Webseiten
XMLallgemein für strukturierte Dokumente
SVGfür Grafiken
XULfür Userinterfaces in Mozilla
+ +

Im Teil II dieses Tutorials werden Sie Beispiele für diese Auszeichnungssprachen sehen.

+
+ +
+
Weitere Details
+ +

In korrekter CSS-Terminologie wird das Programm, das ein Dokument darstellt user agent (UA) genannt. Ein Browser ist nur eine Art eines UA. CSS ist nicht nur für Browser oder Präsentationen interessant, aber im Teil I dieses Tutorials werden Sie nur mit CSS in einem Browser arbeiten.

+ +

Für korrekte Definitionen der CSS-Terminologie sehen Sie unter Definitions in der CSS Spezifikation des World Wide Web Consortium (W3C) nach. Das ist eine internationale Gemeinschaft, die offene Standards für das Web definiert.

+
+ +

Action: Ein Dokument erstellen

+ +
<!DOCTYPE html>
+<html>
+  <head>
+  <meta charset="UTF-8">
+  <title>Sample document</title>
+  </head>
+
+  <body>
+    <p>
+      <strong>C</strong>ascading
+      <strong>S</strong>tyle
+      <strong>S</strong>heets
+    </p>
+  </body>
+</html>
+ +

{{ LiveSampleLink('Action_Ein_Dokument_erstellen', 'Schauen Sie sich die Demo an') }}

+ +
    +
  1. Erstellen Sie einen neuen Ordner irgendwo auf Ihrem Computer, um die Übungen für dieses Tutorial abzuspeichern.
    2. +
  2. Öffnen Sie einen Texteditor und erstellen Sie eine neue Textdatei. Diese Datei wird das Dokument für die nächsten Übungen enthalten.
    3. +
  3. Kopieren Sie den folgenden HTML-Code in Ihre Datei, und speichern Sie diese unter dem Namen doc1.html
    4. +
  4. Öffnen Sie in Ihrem Browser ein neues Fenster oder einen neuen Tab und dann öffnen Sie darin die Datei, die Sie gerade gespeichert haben. Sie sollten dann folgenden Text mit fetten Anfangsbuchstaben sehen:
    5. +
+ + + + + + + +
Cascading Style Sheets
+ +

Möglicherweise sieht der Text in Ihrem Browser etwas anders aus als hier dargestellt. Das liegt daran, dass manche der Einstellungen in Ihrem Browser anders sein können, als wir sie hier verwendet haben. Das tut aber vorerst nichts zur Sache.

+ +

Was nun?

+ +

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Wofür CSS?")}}Ihr Dokument verwendet vorerst noch kein CSS. Im nächsten Abschnitt werden Sie CSS verwenden um die Darstellung Ihres Dokumentes zu verändern.

diff --git a/files/de/learn/css/styling_text/fundamentals/index.html b/files/de/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..7a3a40f6e0 --- /dev/null +++ b/files/de/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,152 @@ +--- +title: Textstyles +slug: Web/Guide/CSS/Getting_started/Textstyles +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

{{ CSSTutorialTOC() }}

+ +

{{previousPage("/de/docs/Web/Guide/CSS/Getting_Started/Lesbares_CSS", "Lesbares CSS")}}Das ist der siebte Teil des CSS Getting Started Tutorials. Er enthält weitere Beispiele für Textstyles. Sie verändern Ihren Stylesheet, um verschiedene Schriftarten zu verwenden.

+ +

Information: Textstyles

+ +

CSS besitzt verschiedene Eigenschaften, um Text zu gestalten.

+ +

Es gibt zur Gemütlichkeit eine Eigenschaft {{ cssxref("font") }}, mit der sich verschiedene Aspekte auf einmal definieren lassen, wie zum Beispiel:

+ + + +
+
Beispiel
+ +
p {
+  font: italic 75%/125% "Comic Sans MS", cursive;
+}
+
+ +

Diese Regel setzt verschiedene Eigenschaften der Schrift und macht alle Absätze kursiv.

+ +

Die Schriftgröße wird auf drei Viertel der Größe jedes Absatzelements gesetzt und die Zeilenhöhe wird auf 125% (ein wenig größer als normal) gesetzt.

+ +

Die Art der Schrift wird auf auf Comic Sans MS gesetzt. Wenn aber die Schriftart im Webbrowser nicht verfügbar ist, wird die standardmäßig kursiv (handgeschriebene) Art verwendet.

+ +

Diese Regel hat den Nebeneffekt, dass alle dicken und kleinen Anfangsbuchstaben auf normal zurückgesetzt werden.

+
+ +

Schriftarten

+ +

Sie können nicht vorhersagen welche Schriftarten der Leser Ihres Dokument installiert hat. Deshalb ist es eine gute Idee eine Liste von Alternativen in bevorzugter Reihenfolge anzugeben.

+ +

Beenden Sie die Liste mit einer eingebauten Standardschriftart: serif, sans-serif, cursive, fantasy oder monospace.

+ +

Wenn die Schriftart ein Feature des Dokuments nicht unterstützt, kann der Webbrowser eine andere Schriftart dafür auswählen. Das Dokument könnte zum Beispiel spezielle Zeichen enthalten, die von der Schriftart nicht unterstützt werden. Wenn der Webbrowser eine andere Schriftart finden kann, die diese Zeichen unterstützt, verwendet er diese.

+ +

Um nur Schriftart anzugeben, können Sie die {{ cssxref("font-family") }} Eigenschaft verwenden.

+ +

Schriftgrößen

+ +

Benutzer des Webbrowsers können die standardmäßige Schriftgröße überschreiben oder die Textgröße während dem Lesen ändern. Deshalb macht es überall wo es geht Sinn eine relative Größe zu verwenden.

+ +

Sie können die bereits vordefinierten Werte wie small, medium und large verwenden. Sie können aber auch relative Werte zur Schriftgröße des Elternelements wie smaller, larger, 150% oder 1.5em verwenden. Ein "em" ist äquivalent zu der Breite des Buchstabens "m" (für die Schriftgröße des Elternelements). Damit sind 1.5em eineinhalb Mal so groß als die Schrift im Elternelement.

+ +

Wenn nötig können Sie eine genaue Größe wie 14px (14 Pixel) für einen Bildschirm oder 14pt (14 Punkt) für einen Drucker angeben. Das ist aber für Benutzer mit einer Sehbehinderung nicht zugänglich, da sie damit die Schriftgröße nicht mehr ändern können. Eine zugänglichere Strategie wäre, eine bereits vordefinierten Wert wie medium auf dem höchsten Element im Dokument zu setzen und dann relative Größen auf allen Kindelementen zu verwenden.

+ +

Um nur die Schriftgröße anzugeben, können Sie die {{ cssxref("font-size") }} Eigenschaft verwenden.

+ +

Zeilenhöhe

+ +

Die Zeilenhöhe gibt den Abstand zwischen Zeilen an. Wenn Ihr Dokument lange Absätze über viele Zeilen hat, kann ein größerer Zeilenabstand als normal besonders bei einer kleinen Schriftgröße einfacher zum Lesen zu sein.

+ +

Um nur die Zeilenhöhe anzugeben, können Sie die {{ cssxref("line-height") }} Eigenschaft verwenden.

+ +

Textdekoration

+ +

Die separate {{ cssxref("text-decoration") }} Eigenschaft kann andere Styles wie underline oder line-through definieren. Sie können sie auf none setzen, um explizit jede Textdekoration zu entfernen.

+ +

Andere Eigenschaften

+ +

Um nur kursiv anzugeben, verwenden Sie  {{ cssxref("font-style") }}: italic;
+ Um nur fettgedruckt anzugeben, verwenden Sie {{ cssxref("font-weight") }}: bold;
+ Um nur kleine Großbuchstaben anzugeben, verwenden Sie  {{ cssxref("font-variant") }}: small-caps;

+ +

Um eine Eigenschaft einzeln abzuschalten, können Sie den Wert normal oder inherit angeben.

+ +
+
Mehr Details
+ +

Sie können Textstyles auf viele andere Wege angeben.

+ +

Einige der hier erwähnten Eigenschaften haben zum Beispiel andere Werte, die Sie auch verwenden können.

+ +

Vermeiden Sie in einem komplexen Stylesheet die abgekürzte font Eigenschaft, da sie Nebeneffekte hat (setzt andere individuelle Eigenschaften zurück).

+ +

Für alle Details von Eigenschaften, die mit Schriften zu tun haben, gehen Sie bitte auf Fonts in der CSS Spezifikation. Die kompletten Details zur Textdekoration finden Sie unter Text.

+ +

Wenn Sie nicht von den installierten Schriftarten auf dem System des Benutzers abhängig sein wollen, können Sie {{ cssxref("@font-face") }} verwenden, um einen Online Font anzugeben. Dazu muss der Webbrowser des Benutzers diese Regel aber auch unterstützen.

+
+ +

Aktion: Schriftart angeben

+ +

Für ein einfaches Dokument können sie eine Schrift auf dem {{ HTMLElement("body") }} Element angeben und der Rest des Dokuments erbt diese Regel.

+ +
    +
  1. Bearbeiten Sie Ihre CSS Datei.
    2. +
  2. Fügen sie die folgendene Regel hinzu, um die Schrift im gesamten Dokument zu bestimmen. Der Anfang der CSS Datei ist eine logische Stelle dafür, aber es hat auch an anderen Stellen in der Datei denselben Effekt: + 
    body {
+  font: 16px "Comic Sans MS", cursive;
+}
+
    +
    3. +
  3. Kommentieren sie Regel und fügen Sie nach Ihrem Geschmak Zeilenumbrüche und Leerzeichen hinzu.
    4. +
  4. Speichern Sie die Datei und aktualisieren Sie Ihren Webbrowser um die Änderung zu sehen. Wenn Sie die Schrift Comic Sans MS oder eine andere Schrift, welche kursiv nicht unterstützt, auf Ihren Computer haben, wählt Ihr Webbrowser eine andere Schriftart für den kursiven Text in der ersten Zeile aus: + + + + + + + + + +
    Cascading Style Sheets
    Cascading Style Sheets
    +
    5. +
  5. Wählen Sie Ansicht > Schirftgröße > Vergrößern (oder Ansicht > Zoom > Vergrößern) im Menü Ihres Webbrowsers aus. Obwohl Sie 16 Pixel im Sil angegeben haben, kann der Benutzer die Schriftgröße in der Ansicht ändern.
    6. +
+ +
+
Herausforderung
+ +

Machen Sie alle sechs Anfangsbuchstaben zweimal so groß in der serif Standardschrift vom Webbrowser ohne etwas anderes zu verändern:

+ + + + + + + + + + +
Cascading Style Sheets
Cascading Style Sheets
+ +
+
Mögliche Lösung
+ +

Fügen Sie die folgende Style Deklaration zur strong Regel hinzu:

+ +
  font: 200% serif;
+
+Wenn Sie getrennte Deklarationen für font-size und font-family verwenden, dann wird die font-style Einstellung auf dem ersten Absatz nicht überschrieben. + +

 

+Hide solution
+Sehen Sie sich die Lösung an.
+ +

Was kommt als Nächstes?

+ +

{{nextPage("/de/docs/Web/Guide/CSS/Getting_started/Farbe", "Farbe")}}Ihr Beispieldokument verwendet bereits verschiedene benannte Farben. Der nächste Teil listet die Namen der Standardfarben auf und erklärt wie Sie eigene Farben definieren können.

diff --git a/files/de/learn/forms/index.html b/files/de/learn/forms/index.html new file mode 100644 index 0000000000..b0d1e8eb58 --- /dev/null +++ b/files/de/learn/forms/index.html @@ -0,0 +1,90 @@ +--- +title: HTML forms +slug: Learn/HTML/Forms +tags: + - Anleitung + - Beginner + - Formular + - HTML + - Lernen + - Web +translation_of: Learn/Forms +--- +
{{LearnSidebar}}
+ +

Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit Nutzern zu interagieren — am häufigsten werden sie benutzt, um Daten von Nutzern zu erheben oder um ihnen zu erlauben, eine Benutzerschnittstelle zu bedienen. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken, einschließlich das Auszeichnen ihrer HTML-Struktur, das Styling von Formelementen, das Validieren von Formulardaten und das Senden von Daten an den Server.

+ +

Voraussetzungen

+ +

Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere Einführung in HTML durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer Nativen-Formular-Komponenten-Anleitung zu machen.

+ +

Das Meistern von Formularen benötigt allerdings mehr als nur HTML-Kenntnisse — Du wirst auch einige spezielle Techniken zum Stylen von Formular-Komponenten lernen müssen. Daneben ist ein wenig Scripting-Wissen erforderliche, um Dinge wie Validierung und das erstellen eigener Formular-Komponenten zu erledigen. Daher würden wir empfehlen, dass du diese Seite zunächst verlässt, um ein wenig CSS und JavaScript zu erlernen und danndie anderen Abschnitte durchliest.

+ +

Der obenstehende Text ist ein guter Indikator, warum wir Web-Formulare in ein eigenständiges Modul gepackt haben anstatt Teile davon in die HTML, CSS, und JavaScript Themengebiete zu legen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und benötigen dazu eine enge Verbindung von CSS- und JavaScript-Techniken, um das meiste aus ihnen herauszuholen.

+ +
+

Notiz: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie JSBin oder Glitch nutzen.

+
+ +

Grundlagen

+ +
+
Dein erstes HTML-Formular
+
+ +
+
Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Element, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.
+
Wie man ein HTML-Formular strukturiert
+
Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.
+
+ +

Die verschiedenen Formular-Komponeneten

+ +
+
Die nativen Formular-Komponenten
+
Wir gucken jetzt auf die Funktionalität der verschiedenen {{htmlelement("input")}} Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.
+
Die HTML5 Eingabetypen
+
Hier setzen wir unsere Vertiefung in das <input>-Element fort, schauen auf die verschiedenen zusätzlichen input-Typen, die mit der Veröffentlichung von HTML5 bereitgestellt wurden und die verschiedenen UI-Komponenten und die Verbesserung der Datenerhebung, welche sie ermöglichen. Zusätzlich schauen wir uns das {{htmlelement('output')}}-Element an.
+
Andere Formular-Komponentent
+
Next we take a look at all the non-<input> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.
+
+ +

Form styling guides

+ +
+
Stylen von Web-Formularen
+
Dieser Artikel stellt eine Einführung in das Stylen von Formularen mit CSS bereit. Er beinhaltet Grundlagen, die Du vielleicht für einfache Styling-Aufgaben benötigen wirst.
+
Fortgeschrittenes Stylen von Formularen
+
Hier schauen wir uns einige fortgeschrittene Techniken zum Stylen von Formularen an, die benötigt werden, sobald einige der schwieriger zu stylende Formular-Elemente gehandhabt werden sollen.
+
UI pseudo-Klassen
+
Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.
+
+ +

Prüfen und Abschicken von Daten

+ +
+
Clientseitige Formulardaten-Validation
+
Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft uns, diiese Ziele zu erreichen - Dieser Artikel erklärt Dir alles, was du wissen musst.
+
Das Senden von Daten
+
Dieser Artikel zeigt, was passiert, wenn ein Benutzer ein Formular abschickt — wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.
+
+ +

Weiterführende Anleitungen

+ +

Die nachfolgenden Artikel sind nicht zwingend notwendig für den Lernpfad, aber sie erweisen sich als interessant und nützlich, wenn Du die obenstehenden Techniken gemeistert hast und mehr lernen möchtest.

+ +
+
Wie man eigene Formular-Komponenten baut
+
Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was Du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst Du eventuell Deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie Du dies tun kannst und welchen Überlegungen Du Dir im Klaren sein musst - mit einem praktischen Fall-Beispiel.
+
Senden von Formularen mit JavaScript
+
Dieser Artikel betrachtet Möglichkeiten, wie ein Formular genutzt werden kann, um eine HTTP-Anfrage zu erstellen und diese mit JavaScript versandt werden kann statt dem üblichen Formularversand. Es schaut auch auf die Gründe, warum Du dies machen wolltest und die Folgen davon. (Siehe auch Using FormData objects.)
+
HTML-Formulare in veralteten Browsern
+
Dieser Artikel beinhaltet das Erkennen von Features usw. Er sollte zum Artikel über das Testen von plattformunabhängigen Features umleiten, da der selbe Inhalt dort besser erklärt wird.
+
+ +

Siehe auch

+ + diff --git a/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html b/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html deleted file mode 100644 index 2eaa20a9ea..0000000000 --- a/files/de/learn/getting_started_with_the_web/dateien_nutzen/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: Dateien nutzen -slug: Learn/Getting_started_with_the_web/dateien_nutzen -tags: - - Anfänger - - Datei - - Dateien - - HTML - - Pfad - - Webseite -translation_of: Learn/Getting_started_with_the_web/Dealing_with_files ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
- -
-

Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.

-
- -

Wo auf Ihrem Computer soll die Webseite liegen?

- -

Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie alle zusammengehörigen Dateien in einem Ordner haben. Dieser Ordner sollte die Struktur der Dateien auf dem Server (dem Computer, über den die Dateien im Internet zugänglich sind) wiederspiegeln. Der lokale Ordner kann überall liegen, aber Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.

- -
    -
  1. Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der »webprojekte« heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.
    2. -
  2. In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner »erste-webseite«.
    3. -
- -

Eine Bemerkung zu Großschreibung und Leerzeichen

- -

In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:

- -
    -
  1. Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens MeinBild.jpg abspeichern und dann darauf zugreifen möchten, funktoniert meinbild.jpg nicht. Für den Computer sind MeinBild.jpg und meinbild.jpg ganz unterschiedliche Dateien.
    2. -
  2. Browser, Webserver und Programmiersprachen gehen nicht immer gleich mit Leerzeichen um. Wenn z.B. ein Leerzeichen in einem Dateinamen vorkommt, könnte angenommen werden, es handle sich um zwei Dateien deren Namen durch das Leerzeichen getrennt sind: Mein Bild.jpg würde als eine Datei namens Mein und eine Datei namens Bild.jpg interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge "%20" (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: Mein Bild.jpg wird nämlich zu Mein%20Bild.jpg.
    3. -
- -

Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.

- -

In welcher Struktur sollten Sie Ihre Dateien ablegen?

- -

In dem Ordner Ihres Webseiten-Projektes (siehe oben) werden Sie meistens eine index.html-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:

- -
    -
  1. index.html: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei index.html. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen index.html in Ihrem Projektordner (der mit dem Namen »erste-website«) ab.
    2. -
  2. Bilder-Ordner: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen bilder in dem Projektordner (»erste-website«).
    3. -
  3. Styles-Ordner: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens styles in Ihrem Projektordner.
    4. -
  4. Scripts-Ordner: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namen scripts in Ihrem Projektordner.
    5. -
- -
-

Hinweis: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, Ordner-Optionen wählt und Erweiterungen bei bekannten Dateitypen ausblenden abwählt und dann OK drückt.

-
- -

Dateipfade

- -

Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad angeben. Das ist eine Art "Wegbeschreibung", anhand derer eine Datei eine andere Datei finden kann. Um zu zeigen, wie dies funktioniert, werden wir ein wenig HTML in unsere index.html-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel ("Wie soll Ihre Webseite aussehen?") ausgewählt haben, anzeigen.

- -
    -
  1. -

    Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner bilder.

    -
    2. -
  2. -

    Öffnen Sie die Datei index.html in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)

    - - 
    <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Mein Testseite</title>
-  </head>
-  <body>
-    <img src="" alt="Mein Testbild">
-  </body>
-</html>
    -
    3. -
  3. Die Zeile <img src="" alt="Mein Testbild"> ist der HTML-Code, welcher das Bild in die Seite einfügt. Jetzt müssen wir noch angeben, wo das Bild gespeichert ist. Das Bild ist im Ordner bilder, welcher in dem selben Ordner wie index.html ist. Um in diesen Unterordner zu gelangen, müssen wir bilder/DeinBildName eingeben. Wenn das Bild z.B. firefox-icon.png genannt ist, müssen wir bilder/firefox-icon.png eintippen.
    4. -
  4. Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei src="" ein.
    5. -
  5. Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.
    6. -
- -

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

- -

Ein paar Grundregeln für Dateipfade:

- - - -

Momentan ist das alles, was Sie wissen müssen.

- -
-

Achtung: Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. C:\windows. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.

-
- -

Was sollte sonst noch getan werden?

- -

Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:

- -

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

- -

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..2eaa20a9ea --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,106 @@ +--- +title: Dateien nutzen +slug: Learn/Getting_started_with_the_web/dateien_nutzen +tags: + - Anfänger + - Datei + - Dateien + - HTML + - Pfad + - Webseite +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
+ +
+

Eine Webseite besteht aus vielen Dateien: Texte, Code, Stylesheets, Multimedia-Inhalte etc. Wenn Sie eine Webseite erstellen, müssen Sie diese Dateien in einer sinnvollen Struktur speichern und sicherstellen, dass die Dateien miteinander kommunizieren können. Die Webseite sollte reibungslos funktionieren, bevor Sie alles auf einen Server hochladen. Dieser Artikel erklärt den Umgang mit Dateien, sodass Sie eine sinnvolle Dateistruktur für Ihre Website erstellen können.

+
+ +

Wo auf Ihrem Computer soll die Webseite liegen?

+ +

Wenn Sie an der Webseite »lokal« (auf dem eigenen Computer) arbeiten, sollten Sie alle zusammengehörigen Dateien in einem Ordner haben. Dieser Ordner sollte die Struktur der Dateien auf dem Server (dem Computer, über den die Dateien im Internet zugänglich sind) wiederspiegeln. Der lokale Ordner kann überall liegen, aber Sie sollten ihn dort speichern, wo Sie ihn wiederfinden können - vielleicht auf ihrem Desktop oder in einem Nutzerordner.

+ +
    +
  1. Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der »webprojekte« heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.
    2. +
  2. In diesem Ordner erstellen Sie einen weiteren Ordner, in dem Sie ein bestimmtes Projekt speichern, in diesem Fall Ihre erste Webseite. Nennen Sie den Ordner »erste-webseite«.
    3. +
+ +

Eine Bemerkung zu Großschreibung und Leerzeichen

+ +

In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:

+ +
    +
  1. Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens MeinBild.jpg abspeichern und dann darauf zugreifen möchten, funktoniert meinbild.jpg nicht. Für den Computer sind MeinBild.jpg und meinbild.jpg ganz unterschiedliche Dateien.
    2. +
  2. Browser, Webserver und Programmiersprachen gehen nicht immer gleich mit Leerzeichen um. Wenn z.B. ein Leerzeichen in einem Dateinamen vorkommt, könnte angenommen werden, es handle sich um zwei Dateien deren Namen durch das Leerzeichen getrennt sind: Mein Bild.jpg würde als eine Datei namens Mein und eine Datei namens Bild.jpg interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge "%20" (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: Mein Bild.jpg wird nämlich zu Mein%20Bild.jpg.
    3. +
+ +

Deshalb ist es am besten, sich anzugewöhnen Namen von Ordnern und Dateien ohne Leerzeichen und nur in Kleinbuchstaben zu vergeben. So vermeidet man Probleme.

+ +

In welcher Struktur sollten Sie Ihre Dateien ablegen?

+ +

In dem Ordner Ihres Webseiten-Projektes (siehe oben) werden Sie meistens eine index.html-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:

+ +
    +
  1. index.html: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei index.html. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen index.html in Ihrem Projektordner (der mit dem Namen »erste-website«) ab.
    2. +
  2. Bilder-Ordner: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen bilder in dem Projektordner (»erste-website«).
    3. +
  3. Styles-Ordner: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens styles in Ihrem Projektordner.
    4. +
  4. Scripts-Ordner: Dieser Ordner wird Dateien enthalten, die interaktive Funktionen beschreiben – wie z.B. eine Meldung anzeigen, wenn ein Knopf gedrückt wird. Erstellen Sie einen Ordner mit den Namen scripts in Ihrem Projektordner.
    5. +
+ +
+

Hinweis: Auf Windows-Computern kann es sein, dass die Dateinamen nicht ganz zu sehen sind. Es gibt eine Option mit dem Namen »Erweiterungen bei bekannten Dateitypen ausblenden«. Diese ist normalerweise eingeschaltet. Man kann die Funktion deaktivieren, wenn man in den Windows-Explorer geht, Ordner-Optionen wählt und Erweiterungen bei bekannten Dateitypen ausblenden abwählt und dann OK drückt.

+
+ +

Dateipfade

+ +

Damit Dateien untereinander kommunizieren können (wenn z.B. in der .html-Datei einer Seite ein Bild eingebunden ist), müssen Sie einen Dateipfad angeben. Das ist eine Art "Wegbeschreibung", anhand derer eine Datei eine andere Datei finden kann. Um zu zeigen, wie dies funktioniert, werden wir ein wenig HTML in unsere index.html-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel ("Wie soll Ihre Webseite aussehen?") ausgewählt haben, anzeigen.

+ +
    +
  1. +

    Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner bilder.

    +
    2. +
  2. +

    Öffnen Sie die Datei index.html in einem Texteditor und fügen den folgenden Code genau so ein. (Keine Angst, Sie werden die Bedeutung dieser Befehle später noch kennen lernen.)

    + + 
    <!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Mein Testseite</title>
+  </head>
+  <body>
+    <img src="" alt="Mein Testbild">
+  </body>
+</html>
    +
    3. +
  3. Die Zeile <img src="" alt="Mein Testbild"> ist der HTML-Code, welcher das Bild in die Seite einfügt. Jetzt müssen wir noch angeben, wo das Bild gespeichert ist. Das Bild ist im Ordner bilder, welcher in dem selben Ordner wie index.html ist. Um in diesen Unterordner zu gelangen, müssen wir bilder/DeinBildName eingeben. Wenn das Bild z.B. firefox-icon.png genannt ist, müssen wir bilder/firefox-icon.png eintippen.
    4. +
  4. Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei src="" ein.
    5. +
  5. Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.
    6. +
+ +

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

+ +

Ein paar Grundregeln für Dateipfade:

+ + + +

Momentan ist das alles, was Sie wissen müssen.

+ +
+

Achtung: Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. C:\windows. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.

+
+ +

Was sollte sonst noch getan werden?

+ +

Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:

+ +

A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file

+ +

{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}

diff --git a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html new file mode 100644 index 0000000000..7b5dfbc541 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -0,0 +1,100 @@ +--- +title: Wie das Internet funktioniert +slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert +tags: + - Anfänger + - Client + - DNS + - HTTP + - IP + - Infrastruktur + - Internet + - Lernen + - Server + - TCP + - Web +translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

Wie das Internet funktioniert gibt eine vereinfachte Übersicht darüber, was passiert, wenn Sie eine Webseite in einem Webbrowser auf Ihrem Computer oder auf Ihrem Smartphone aufrufen.

+
+ +

Dieser Artikel ist sehr theoretisch und ist für den Anfang nicht essentiell um Code für Webseiten zu schreiben, aber nach einiger Zeit werden Sie feststellen, das es von Vorteil ist zu wissen, was im Hintergrund geschieht.

+ +

Client und Server

+ +

Computer welche über das Internet verbunden sind werden als Client oder als Server bezeichnet. Dieses Diagramm veranschaulicht, vereinacht, wie diese beiden Computer miteinander interagieren:

+ +

+ + + +

Die anderen Teile der Werkzeugkiste

+ +

Der Client und der Server, wie wir sie oben beschrieben haben sind nicht alles. Es gibt weitere Dinge, die involviert sind, um eine Webseite anzuzeigen und wir werden diese hier erläutern.

+ +

Versuchen Sie sich vorzustellen, das Internet wäre eine Straße. An einem Ende der Straße ist der Client, was wie Ihr Haus sein könnte. An dem anderen Ende der Straße ist der Server, der wie ein Einkaufsladen ist, bei dem Sie etwas kaufen möchten.

+ +

+ +

Auf dem Weg von Ihrem Haus zum Shop müssen Sie an einigen anderen Stellen vorbei und "Hallo" sagen:

+ + + +

Was passiert jetzt also genau?

+ +

Wenn Sie eine Internetadresse in Ihren Browser eintippen (wie wenn Sie zu dem Laden gehen):

+ +
    +
  1. Der Browser kontaktiert den DNS Server und findet die echte Adresse von derm Server auf dem die Webseite liegt (Sie finden die Adresse des Ladens).
    2. +
  2. Der Browser sendet eine HTTP-Anfrage an den Server und fragt nach einer Kopie der Webseite für den Client (Sie gehen zu dem Laden und bestellen Ihre Waren). Diese Nachricht und alle anderen Daten, welche zwischen Client und Server gesendet werden, nutzen Ihre Internetverbindung und nutzen TCP/IP für die Übertragung.
    3. +
  3. Wenn der Server die Anfrage entgegennimmt, sendet dieser an den Client eine "200 OK" Nachricht, welche soviel bedeutet wie "Natürlich können Sie sich die Webseite anschauen! Hier ist sie." Danach sendet der Server die Dateien der Webseite, in kleinen Datenpaketen, an den Browser.  (Im Laden bekommen Sie Ihre Waren und bringen diese nach Hause)
    4. +
  4. Im Browser werden die kleinen Datenpakete zusammengesetzt und zeigt Ihnen die komplette Webseite. (die Waren kommen bei Ihnen daheim an)
    5. +
+ +

DNS erklärt

+ +

Echte Webadressen sind keine schönen, leicht zu merkenden Strings, welche Sie in die Adressleiste Ihres Browsers eingeben, um Ihre Lieblingswebseiten zu finden. Es sind spezielle Nummern, welche so aussehen: 63.245.215.20.

+ +

Dies ist eine {{Glossary("IP Address", "IP address")}} und repräsentiert eine einzigartige Adresse im Internet. Diese kann man sich aber nicht so leicht merken. Deswegen wurden Domain Name Server erfunden. Dies sind spezielle Server, welche zu der Adresse die Sie im Browser eintippen(z.B. "mozilla.org"), die richtige (IP) Adresse finden.

+ +

Webseiten können direkt über ihre IP Adresse erreicht werden. Versuchen Sie es: Gehen Sie zur Mozilla Webseite, indem sie die folgende IP Adresse in der Adresszeile Ihres Browsers in einem neuen Tab eingeben: 63.245.215.20

+ +

A domain name is just another form of an IP address

+ +

Datenpakete erklärt

+ +

Vorhin haben wir das Wort "Datenpakete" genutzt, um zu beschreiben in welcher Form die Daten vom Server zum Client gelangen. Was ist damit gemeint? Wenn Daten über das Internet gesendet werden, dann wird es in tausenden von kleinen Stückchen geschickt, damit verschiedene Benutzer einer Webseite, diese zur selbern Zeit herunterladen können. Wenn Webseiten in einem großen Paket gesendet werden würde, dann könnte nur ein Benutzer auf einmal diese herunterladen, was das Internet nicht sehr effizient machen würde.

+ +

Lesen Sie weiter (englisch)

+ + + +

Credit

+ +

Street photo: Street composing, by Kevin D.

+ +
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..65a31710d3 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,407 @@ +--- +title: JavaScript-Grundlagen +slug: Learn/Getting_started_with_the_web/JavaScript_basis +tags: + - Anfänger + - JavaScript + - Lernen + - Web + - Webdesign +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
+ +
+

JavaScript ist eine Programmiersprache, mit der man interaktive Inhalte zu einer Webseite hinzufügen kann (zum Beispiel: Spiele, Reaktionen durch das Drücken von Buttons oder Eingaben in Formulare, dynamisches Aussehen, Animationen, usw.). Dieser Artikel hilft Ihnen, erste Schritte mit dieser spannenden Sprache zu machen und eine Vorstellung zu verschaffen, was möglich ist.

+
+ +

Was ist JavaScript wirklich?

+ +

{{Glossary("JavaScript")}} (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem {{Glossary("HTML")}} Dokument hinzufügt, für Dynamik und Interaktion mit dem Nutzer sorgt. JS wurde von Brendan Eich erfunden, Mitbegründer des Mozilla Projektes, der Mozilla Foundation, und der Mozilla Corporation.

+ +

JavaScript ist unglaublich vielseitig. Man beginnt ganz einfach mit simplen Features, wie z.B. Karussels, (Bilder-)Galerien, variablen Layouts und Reaktionen auf Button-Klicks. Wenn Sie dann später erfahrener im Umgang mit der Sprache sind, können Sie damit ganze Spiele, animierte 2D- und 3D-Grafiken, auf Datenbanken basierende Apps und vieles mehr erstellen!

+ +

JavaScript an sich ist sehr kompakt und trotzdem flexibel. Viele Entwickler haben noch weitere Tools/Erweiterungen für die Arbeit mit JavaScript geschrieben, um noch mehr Effizienz mit wenig Aufwand aus JS herauszuholen. Diese Funktionen sind:

+ + + +

Da dieser Artikel dazu gedacht ist, Ihnen eine leichte Einführung in die Grundlagen von JavaScript zu geben, werden wir uns hier nicht über die Unterschiede zwischen der Basis der JavaScript-Sprache und den obengenannten Erweiterungen unterhalten. Sie können später im Detail lernen, was es damit auf sich hat in unserem JavaScript Lernbereich.

+ +

Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!

+ +

Ein "Hallo Welt!" Beispiel

+ +

Der vorhergehende Absatz klingt sehr aufregend und das zurecht. JavaScript ist eine der spannendsten Internet-Technologien und wenn Sie damit beginnen, wird Ihre Webseite sehr viel mächtiger.

+ +

Jedoch ist JavaScript etwas komplexer als HTML und CSS. Daher werden Sie klein anfangen, und in kurzen, regelmäßigen Schritten vorangehen müssen. Zum Start zeigen wir Ihnen, wie man JavaScript-Code zu einer Seite hinzu fügt, um ein "Hallo Welt!" Beispiel zu erstellen (der Standard in elementaren Programmierbeispielen).

+ +
+

WICHTIG: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, laden Sie dieses Codebeispiel herunter und benutzen es als Einstieg.

+
+ +
    +
  1. Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen main.js. Speichern Sie diese Datei in Ihrem skripts-Ordner.
    2. +
  2. Dann gehen Sie zur index.html Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden </body>-Tag ein: + 
    <script src="scripts/main.js"></script>
    +
    3. +
  3. Dies macht dasselbe, wie das {{htmlelement("link")}} Element für CSS — Es bindet die JavaScript-Datei auf der Seite ein, damit es einen Einfluss auf den HTML Code haben kann (und auch auf den CSS-Code und alles andere auf der Seite).
    4. +
  4. Fügen Sie nun den folgenden Code in die main.js-Datei ein: + 
    var myHeading = document.querySelector('h1');
+myHeading.textContent = 'Hallo Welt!';
    +
    5. +
  5. Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden index.html in einen Browser. Die Webseite sollte wie folgt aussehen:
    6. +
+ +
+

Hinweis: Das {{htmlelement("script")}}-Element haben wir am Ende des <body>-Elements geschrieben, da das HTML vom Browser in der Reihenfolge geladen wird, wie es in der Datei geschrieben wurde. Wenn der JavaScript-Code geladen wird, bevor die HTML-Seite aufgebaut wurde, hat es möglicherweise keinen Einfluss auf die HTML-Elemente, die später geladen werden. Also ist es meistens am besten, JavaScript-Code eher am Ende der HTML Seite einzubinden.

+
+ +

Was ist passiert?

+ +

Ihre Überschrift wurde durch die Benutzung von JavaScript zu "Hello world!" geändert. Wir haben dies dadurch ermöglicht, indem wir zuerst eine Funktion mit dem Namen {{domxref("Document.querySelector", "querySelector()")}} benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen myHeading gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den Selektoren gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.

+ +

Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen  myHeading (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!". 

+ +
+

Hinweis: Beide Funktionen die Sie genutzt haben sind Teile des Document Object Model (DOM) API

+
+ +

Programmier-Crash-Kurs

+ +

Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verständnis der Zusammenhänge zu vermitteln. Diese Eigenschaften sind anderen Programmiersprachen gemeinsam. Wenn Sie diese Grundlagen verstehen, sollte es Ihnen möglich sein, mit dem Programmieren zu beginnen.

+ +
+

Wichtig: Versuchen Sie, die Zeilen des Beispielcodes dieses Artikels, in die JavaScript-Konsole einzufügen, um zu sehen, was geschieht. Weitere Details zur JavaScript-Konsole entnehmen Sie aus Entdecke Browser Entwickler-Werkzeuge.

+
+ +

Variablen

+ +

{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort var deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:

+ +
var myVariable;
+ +
+

Anmerkung:  Jede Befehlszeile in JavaScript muss mit einem Semikolon abgeschlossen werden, um das Ende der Befehlszeile zu markieren. Tun Sie dies nicht, erwarten Sie unerwartete Ergebnisse.

+
+ +
+

Anmerkung:  Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe diesen Artikel über die Regeln von Benennung von Variablen.)  Wenn Sie unsicher sind, können Sie den Variablennamen prüfen, um die Gültigkeit zu prüfen.

+
+ +
+

Anmerkung: JavaScript beachtet Groß-/Kleinschrift  — myVariable ist unterschiedlich zur Variablen myvariable. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! 

+
+ +

Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:

+ +
myVariable = 'Bob';
+ +

Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden: 

+ +
var myVariable = 'Bob';
+ +

Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: 

+ +
myVariable;
+ +

Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:

+ +
var myVariable = 'Bob';
+myVariable = 'Steve';
+ +

Beachten Sie, dass Variablen unterschiedliche Datentypen aufweisen:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableErklärungBeispiel
{{Glossary("String")}}Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.var myVariable = 'Bob';
{{Glossary("Number")}}Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.var myVariable = 10;
{{Glossary("Boolean")}}Ein wahr/falsch (true/false) Wert. Die Worte true und false sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichenvar myVariable = true;
{{Glossary("Array")}} +

Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.

+ 		var myVariable = [1,'Bob','Steve',10];
+ Bezieht sich auf jedes Mitglied des arrays wie dieses:
+ myVariable[0], myVariable[1], etc.
{{Glossary("Object")}} +

Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Gedächtnis, während Sie lernen.

+ 		var myVariable = document.querySelector('h1');
+ Und ebenso alle der obigen Beispiele.
+ +

Warum werden Variablen benötigt? Nun, Variablen werden benötigt, um alles Interessante beim Programmieren abzudecken. Wenn sich Werte nicht ändern könnten, dann könnte nichts Dynamisches geschaffen werden, wie zum Beispiel eine Willkommensmeldung zu personalisieren oder ein Bild, das in einer Bildgallerie angezeigt wird.

+ +

Kommentare

+ +

Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:

+ +
/*
+Alles hier drin ist ein Kommentar.
+*/
+ +

Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:

+ +
// Dies ist ein Kommentar
+
+ +

Operatoren

+ +

Ein {{Glossary("operator")}} ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren, gefolgt von einigen Beispielen, die Sie in der JavaScript Konsole ausprobieren können. 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorErklärungSymbol(e)Beispiel
addieren/verbindenWird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.+6 + 9;
+ "Hello " + "world!";
subtrahieren, multiplizieren, teilen Verhalten sich so, wie aus der Mathematik bekannt.-, *, /9 - 3;
+ 8 * 2; // in JS ist der Multiplikationsoperator ein Stern
+ 9 / 3;
ZuweisungsoperatorSie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet=var myVariable = 'Bob';
Gleichheitsoperator +

Prüft zwei Werte auf Gleichheit und liefert true/false (Boolean) als Ergebnis

+ 		===var myVariable = 3;
+ myVariable === 4;
Verneinung, ungleich +

Liefert als Ergebnis das logische Gegenteil; dreht ein true in ein false, etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.

+ 		!, !== +

Der Basis-Ausdruck ist true, aber der Vergleich liefert false weil er negiert wurde:

+ +

var myVariable = 3;
+ !(myVariable === 3);

+ +

Hier wird geprüft, ob myVariable ungleich 3 ist. Der Rückgabewert ist false, weil myVariable den Wert 3 aufweist.

+ +

var myVariable = 3;
+ myVariable !== 3;

+
+ +

Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in Ausdrücke und Operatoren.

+ +
+

Anmerkung: Das Vermischen von Datentypen kann bei Berechnungen unerwartete Ergebnisse liefern. Achten Sie darauf, die Variablen korrekt zu verwenden und prüfen Sie, ob das erwartete Ergebnis zurückgegeben wird. Tippen Sie beispielsweise "35" + "25" in die Konsole ein und schauen sich das Ergebnis an. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt und somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.

+
+ +

Bedingungen

+ +

Bedingungen sind Code-Strukturen, die Ihnen erlauben, zu prüfen, ob ein Ausdruck wahr oder falsch ist und in Abhängigkeit des Ergebnisses unterschiedlichen Code auszuführen. Die gebräuchlichste Art von Bedingungen sind if ... else. Zum Beispiel:

+ +
var eis = 'Schokolade';
+if (eis === 'Schokolade') {
+  alert('Yuhu, ich liebe Schokoladeneis!');
+} else {
+  alert('Awwww, ich mag lieber ein Schokoladeneis...');
+}
+ +

Der Ausdruck innerhalb des if ( ... ) ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable eis mit dem String Schokolade zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich true, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem else Befehl ausgeführt.

+ +

Funktionen

+ +

{{Glossary("Function", "Functions")}} ist ein Weg, um Funktionalitäten zusammenzupacken, die wiederverwendet werden sollen. Immer wenn die Funktionalität benötigt wird, wird die Funktion unter ihrem Namen aufgerufen, statt denselben Code immer wieder erneut schreiben zu müssen. Sie haben bereits einige Verwendungen von Funktionen gesehen, zum Beispiel:

+ +
    +
  1. + 
    var myVariable = document.querySelector('h1');
    +
    2. +
  2. + 
    alert('Hallo!');
    +
    3. +
+ +

Die Funktionen document.querySelector and alert sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.

+ +

Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — () — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "arguments")}} auf, um die Funktionalität zu gewährleisten. Diese Argumente werden innerhalb der runden Klammern platziert und von Komma getrennt, wenn mehr als ein Argument übergeben wird.

+ +

Beispielsweise erzeugt die Funktion alert() eine Pop-Up-Box  innerhalb des Browser-Fensters. Dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.

+ +

Die guten Nachrichten sind, dass Sie Ihre eigenen Funktionen definieren können. Im nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente aufnimmt und diese multipliziert:

+ +
function multiply(num1,num2) {
+  var result = num1 * num2;
+  return result;
+}
+ +

Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:

+ +
multiply(4,7);
+multiply(20,20);
+multiply(0.5,3);
+ +
+

Anmerkung: Das return Kommando teilt dem Browser mit, die Variable result aus der Funktion zurückzuliefern. Somit ist es möglich, diese zu benutzen. Dies ist notwendig, weil Variablen, die innerhalb der Funktion verwendet werden, nur dort gültig sind. Diese Verhaltensweise wird {{Glossary("Scope", "scoping")}} genannt. (Lesen Sie mehr über den Gültigkeitsbereich von Variablen.)

+
+ +

Ereignisse (Events)

+ +

Um wirkliche Interaktivität auf einer Website herzustellen, werden Ereignisse (events) benötigt - dieses sind Code-Strukturen, die auf Ereignisse achten, die im Browser geschehen und Ihnen dann erlauben, Code auszuführen, um auf diese Ereignisse zu reagieren. Das offensichtlichste Beispiel ist das Klick-Ereignis, das vom Browser abgefeuert wird, wenn man mit dem Mauszeiger auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:

+ +
document.querySelector('html').onclick = function() {
+    alert('Hey! Nicht so viel klicken!');
+}
+ +

Es existieren viele Möglichkeiten, ein Ereignis mit einem Element zu verbinden. Hier wählen wir das Element HTML aus und setzen die Eigenschaft des onclick-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.

+ +

Beachten Sie, dass

+ +
document.querySelector('html').onclick = function() {};
+ +

gleichbedeutend ist mit

+ +
var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+ +

Es ist nur kürzer.

+ +

Dynamische Inhalte für unsere Beispielwebseite

+ +

Nun, da wir einige Grundlagen von JavaScript kennengelernt haben, lassen Sie uns einige dynamische Inhalte in Ihre erste Webseite einfügen, damit Sie sehen was mit JavaScript möglich ist.

+ +

Bilder wechseln

+ +

Wir werden der Webseite ein weiteres Bild hinzufügen. Mit etwas JavaScript-Code werden wir zwischen den beiden Bildern wechseln, wenn auf diese mit der Maus geklickt wird.

+ +
    +
  1. Suchen Sie sich zuerst ein zweites Bild für Ihre Webseite aus. Es sollte möglichst die selbe Größe haben, wie das Bild, das Sie schon auf der Webseite haben.
    2. +
  2. Speichern Sie dieses Bild in Ihrem bilder-Ordner.
    3. +
  3. Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es 'firefox2.png' genannt.
    4. +
  4. Gehen Sie in Ihre main.js Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben) + 
    var myImage = document.querySelector('img');
+
+myImage.onclick = function() {
+    var mySrc = myImage.getAttribute('src');
+    if(mySrc === 'bilder/firefox-icon.png') {
+      myImage.setAttribute ('src','bilder/firefox2.png');
+    } else {
+      myImage.setAttribute ('src','bilder/firefox-icon.png');
+    }
+}
    +
    5. +
  5. Speichern Sie alle Dateien und laden Sie index.html in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!
    6. +
+ +

Wir erstellen die Variable myImage und speichern in dieser eine Referenz zu unserem Bild-Element(img). Als nächstes setzen wir das onclick-Event dieser Variablen gleich mit einer Funktion ohne Namen (eineranonymen Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:

+ +
    +
  1. Wir holen uns den Wert des src Attributes von unserem Bild.
    2. +
  2. Wir benutzen eine if-Bedingung, um zu überprüfen ob der src-Wert derselbe ist, wie der Pfad unseres original Bildes: +
      +
    1. Wenn die Bedingung wahr ist, ändern wir den src-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.
      2. +
    2. Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den src-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.
      3. +
    +
    3. +
+ +

Ein persönlicher Willkommensgruß

+ +

Als nächstes fügen wir unserer Webseite einen persönlichen Willkommensgruß hinzu, welcher vom Benutzer beim ersten Besuch der Seite geändert werden kann. Die Änderung soll auch erhalten bleiben, wenn der Benutzer die Seite verlässt und später wieder zurück kommt. Wir werden auch eine Option haben, den Nutzer zu ändern, so das der Gruß dementsprechend geändert wird.

+ +
    +
  1. In der index.html-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein: + + 
    <button>Name ändern</button>
    +
    2. +
  2. In main.js fügen Sie den folgenden Code am Ende hinzu. Achten Sie darauf, das Ihr Code genauso aussieht wie hier gezeigt. Damit erstellen wir zwei neue Variablen und speichern in der Ersten eine Referenz zu unserem neu erstellten button und in der Zweiten zu unserer Hauptüberschrift auf der Webseite: + 
    var myButton = document.querySelector('button');
+var myHeading = document.querySelector('h1');
    +
    3. +
  3. Fügen Sie nun die folgende Funktion ein. Diese erstellt den personalisierten Willkommensgruß. Jetzt macht diese Funktion noch nichts, aber wir werden sie gleich benutzen: + 
    function setUserName() {
+  var myName = prompt('Bitte geben Sie Ihren Namen ein.');
+  localStorage.setItem('name', myName);
+  myHeading.textContent = 'Mozilla ist cool, ' + myName;
+}
    + Innerhalb der Funktion wird in der ersten Zeile die neue Variable myName erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der prompt()-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der alert()-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf OK bestätigen kann. Als nächstes Rufen wir eine API namens localStorage auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die setItem()-Funktion von localStorage, um ein Datenobjekt mit dem Namen 'name' zu erstellen und setzen für den Wert die Variable myName ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (textContent) von myHeading mit unserem Gruß welcher den Namen des Benutzers beinhaltet.
    4. +
  4. Fügen Sie als nächstes diesen if ... else Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird: + 
    if(!localStorage.getItem('name')) {
+  setUserName();
+} else {
+  var storedName = localStorage.getItem('name');
+  myHeading.textContent = 'Mozilla ist cool, ' + storedName;
+}
    + Dieser Code-Block benutzt eine logische Verneinung, um zu überprüfen ob es schon einen gespeicherten Namen gibt. Wenn der Name nicht existiert, dann wird die Funktion setUserName() aufgerufen, um einen Namen zu bekommen. Wenn der Name existiert, der Benutzer also diesen schon bei einem vorherigen Besuch der Webseite angegeben hat, dann wird der gespeicherte Name mit der getItem()-Funktion geladen, in der Variablen storedName gespeichert und dem String für den Willkommensgruß hinzugefügt.
    5. +
  5. Als letztes fügen wir unserem Button den unten stehenden onclick-Eventhandler hinzu, welcher die setUserName()-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt: + 
    myButton.onclick = function() {
+  setUserName();
+}
+
    +
    6. +
+ +

Wenn Sie Ihre Seite jetzt im Browser aufrufen, werden Sie beim ersten Besuch nach Ihrem Namen gefragt und der Willkommensgruß wird personalisiert. Sie können den Namen jederzeit ändern, indem Sie auf den Button drücken. Der personalisierte Willkommensgruß wird auch wieder angezeigt, wenn Sie die Seite verlassen und danach wieder aufrufen, da der Name in localStorage, im Browser, gespeichert wird!

+ +

Zusammenfassung

+ +

Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (sehen Sie sich unsere Version an):

+ +

+ +

Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich unseren Code auf Github anschauen.

+ +

Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem JavaScript Guide.

+ +
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basis/index.html b/files/de/learn/getting_started_with_the_web/javascript_basis/index.html deleted file mode 100644 index 65a31710d3..0000000000 --- a/files/de/learn/getting_started_with_the_web/javascript_basis/index.html +++ /dev/null @@ -1,407 +0,0 @@ ---- -title: JavaScript-Grundlagen -slug: Learn/Getting_started_with_the_web/JavaScript_basis -tags: - - Anfänger - - JavaScript - - Lernen - - Web - - Webdesign -translation_of: Learn/Getting_started_with_the_web/JavaScript_basics ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

JavaScript ist eine Programmiersprache, mit der man interaktive Inhalte zu einer Webseite hinzufügen kann (zum Beispiel: Spiele, Reaktionen durch das Drücken von Buttons oder Eingaben in Formulare, dynamisches Aussehen, Animationen, usw.). Dieser Artikel hilft Ihnen, erste Schritte mit dieser spannenden Sprache zu machen und eine Vorstellung zu verschaffen, was möglich ist.

-
- -

Was ist JavaScript wirklich?

- -

{{Glossary("JavaScript")}} (Kurz "JS") ist eine vollwertige und dynamische Programmiersprache, welche, wenn man sie zu einem {{Glossary("HTML")}} Dokument hinzufügt, für Dynamik und Interaktion mit dem Nutzer sorgt. JS wurde von Brendan Eich erfunden, Mitbegründer des Mozilla Projektes, der Mozilla Foundation, und der Mozilla Corporation.

- -

JavaScript ist unglaublich vielseitig. Man beginnt ganz einfach mit simplen Features, wie z.B. Karussels, (Bilder-)Galerien, variablen Layouts und Reaktionen auf Button-Klicks. Wenn Sie dann später erfahrener im Umgang mit der Sprache sind, können Sie damit ganze Spiele, animierte 2D- und 3D-Grafiken, auf Datenbanken basierende Apps und vieles mehr erstellen!

- -

JavaScript an sich ist sehr kompakt und trotzdem flexibel. Viele Entwickler haben noch weitere Tools/Erweiterungen für die Arbeit mit JavaScript geschrieben, um noch mehr Effizienz mit wenig Aufwand aus JS herauszuholen. Diese Funktionen sind:

- - - -

Da dieser Artikel dazu gedacht ist, Ihnen eine leichte Einführung in die Grundlagen von JavaScript zu geben, werden wir uns hier nicht über die Unterschiede zwischen der Basis der JavaScript-Sprache und den obengenannten Erweiterungen unterhalten. Sie können später im Detail lernen, was es damit auf sich hat in unserem JavaScript Lernbereich.

- -

Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!

- -

Ein "Hallo Welt!" Beispiel

- -

Der vorhergehende Absatz klingt sehr aufregend und das zurecht. JavaScript ist eine der spannendsten Internet-Technologien und wenn Sie damit beginnen, wird Ihre Webseite sehr viel mächtiger.

- -

Jedoch ist JavaScript etwas komplexer als HTML und CSS. Daher werden Sie klein anfangen, und in kurzen, regelmäßigen Schritten vorangehen müssen. Zum Start zeigen wir Ihnen, wie man JavaScript-Code zu einer Seite hinzu fügt, um ein "Hallo Welt!" Beispiel zu erstellen (der Standard in elementaren Programmierbeispielen).

- -
-

WICHTIG: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, laden Sie dieses Codebeispiel herunter und benutzen es als Einstieg.

-
- -
    -
  1. Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen main.js. Speichern Sie diese Datei in Ihrem skripts-Ordner.
    2. -
  2. Dann gehen Sie zur index.html Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden </body>-Tag ein: - 
    <script src="scripts/main.js"></script>
    -
    3. -
  3. Dies macht dasselbe, wie das {{htmlelement("link")}} Element für CSS — Es bindet die JavaScript-Datei auf der Seite ein, damit es einen Einfluss auf den HTML Code haben kann (und auch auf den CSS-Code und alles andere auf der Seite).
    4. -
  4. Fügen Sie nun den folgenden Code in die main.js-Datei ein: - 
    var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Hallo Welt!';
    -
    5. -
  5. Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden index.html in einen Browser. Die Webseite sollte wie folgt aussehen:
    6. -
- -
-

Hinweis: Das {{htmlelement("script")}}-Element haben wir am Ende des <body>-Elements geschrieben, da das HTML vom Browser in der Reihenfolge geladen wird, wie es in der Datei geschrieben wurde. Wenn der JavaScript-Code geladen wird, bevor die HTML-Seite aufgebaut wurde, hat es möglicherweise keinen Einfluss auf die HTML-Elemente, die später geladen werden. Also ist es meistens am besten, JavaScript-Code eher am Ende der HTML Seite einzubinden.

-
- -

Was ist passiert?

- -

Ihre Überschrift wurde durch die Benutzung von JavaScript zu "Hello world!" geändert. Wir haben dies dadurch ermöglicht, indem wir zuerst eine Funktion mit dem Namen {{domxref("Document.querySelector", "querySelector()")}} benutzt haben, um eine Referenz zu unserer Überschrift zu bekommen und sie in einer Variable mit dem Namen myHeading gespeichert. Es ist ähnlich zu dem, was wir in CSS mit den Selektoren gemacht haben. Wenn Sie irgendetwas mit einem Element machen möchten, müssen Sie es zuerst auswählen.

- -

Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen  myHeading (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!". 

- -
-

Hinweis: Beide Funktionen die Sie genutzt haben sind Teile des Document Object Model (DOM) API

-
- -

Programmier-Crash-Kurs

- -

Es folgt eine Beschreibung einiger Basis-Eigenschaften der Sprache JavaScript, um Ihnen etwas mehr Verständnis der Zusammenhänge zu vermitteln. Diese Eigenschaften sind anderen Programmiersprachen gemeinsam. Wenn Sie diese Grundlagen verstehen, sollte es Ihnen möglich sein, mit dem Programmieren zu beginnen.

- -
-

Wichtig: Versuchen Sie, die Zeilen des Beispielcodes dieses Artikels, in die JavaScript-Konsole einzufügen, um zu sehen, was geschieht. Weitere Details zur JavaScript-Konsole entnehmen Sie aus Entdecke Browser Entwickler-Werkzeuge.

-
- -

Variablen

- -

{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort var deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:

- -
var myVariable;
- -
-

Anmerkung:  Jede Befehlszeile in JavaScript muss mit einem Semikolon abgeschlossen werden, um das Ende der Befehlszeile zu markieren. Tun Sie dies nicht, erwarten Sie unerwartete Ergebnisse.

-
- -
-

Anmerkung:  Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe diesen Artikel über die Regeln von Benennung von Variablen.)  Wenn Sie unsicher sind, können Sie den Variablennamen prüfen, um die Gültigkeit zu prüfen.

-
- -
-

Anmerkung: JavaScript beachtet Groß-/Kleinschrift  — myVariable ist unterschiedlich zur Variablen myvariable. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! 

-
- -

Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:

- -
myVariable = 'Bob';
- -

Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden: 

- -
var myVariable = 'Bob';
- -

Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: 

- -
myVariable;
- -

Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:

- -
var myVariable = 'Bob';
-myVariable = 'Steve';
- -

Beachten Sie, dass Variablen unterschiedliche Datentypen aufweisen:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableErklärungBeispiel
{{Glossary("String")}}Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.var myVariable = 'Bob';
{{Glossary("Number")}}Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.var myVariable = 10;
{{Glossary("Boolean")}}Ein wahr/falsch (true/false) Wert. Die Worte true und false sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichenvar myVariable = true;
{{Glossary("Array")}} -

Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.

- 		var myVariable = [1,'Bob','Steve',10];
- Bezieht sich auf jedes Mitglied des arrays wie dieses:
- myVariable[0], myVariable[1], etc.
{{Glossary("Object")}} -

Grundsätzlich alles. Alles in JavaScript ist ein Objekt und kann in einer Variablen gespeichert werden. Behalten Sie dies im Gedächtnis, während Sie lernen.

- 		var myVariable = document.querySelector('h1');
- Und ebenso alle der obigen Beispiele.
- -

Warum werden Variablen benötigt? Nun, Variablen werden benötigt, um alles Interessante beim Programmieren abzudecken. Wenn sich Werte nicht ändern könnten, dann könnte nichts Dynamisches geschaffen werden, wie zum Beispiel eine Willkommensmeldung zu personalisieren oder ein Bild, das in einer Bildgallerie angezeigt wird.

- -

Kommentare

- -

Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:

- -
/*
-Alles hier drin ist ein Kommentar.
-*/
- -

Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:

- -
// Dies ist ein Kommentar
-
- -

Operatoren

- -

Ein {{Glossary("operator")}} ist ein mathematisches Symbol, das ein Ergebnis erzeugt, das auf zwei Werten (oder Variablen) basiert. In der folgenden Tabelle sehen Sie einige der einfachsten Operatoren, gefolgt von einigen Beispielen, die Sie in der JavaScript Konsole ausprobieren können. 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorErklärungSymbol(e)Beispiel
addieren/verbindenWird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.+6 + 9;
- "Hello " + "world!";
subtrahieren, multiplizieren, teilen Verhalten sich so, wie aus der Mathematik bekannt.-, *, /9 - 3;
- 8 * 2; // in JS ist der Multiplikationsoperator ein Stern
- 9 / 3;
ZuweisungsoperatorSie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet=var myVariable = 'Bob';
Gleichheitsoperator -

Prüft zwei Werte auf Gleichheit und liefert true/false (Boolean) als Ergebnis

- 		===var myVariable = 3;
- myVariable === 4;
Verneinung, ungleich -

Liefert als Ergebnis das logische Gegenteil; dreht ein true in ein false, etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.

- 		!, !== -

Der Basis-Ausdruck ist true, aber der Vergleich liefert false weil er negiert wurde:

- -

var myVariable = 3;
- !(myVariable === 3);

- -

Hier wird geprüft, ob myVariable ungleich 3 ist. Der Rückgabewert ist false, weil myVariable den Wert 3 aufweist.

- -

var myVariable = 3;
- myVariable !== 3;

-
- -

Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in Ausdrücke und Operatoren.

- -
-

Anmerkung: Das Vermischen von Datentypen kann bei Berechnungen unerwartete Ergebnisse liefern. Achten Sie darauf, die Variablen korrekt zu verwenden und prüfen Sie, ob das erwartete Ergebnis zurückgegeben wird. Tippen Sie beispielsweise "35" + "25" in die Konsole ein und schauen sich das Ergebnis an. Haben Sie dies erwartet? Aufgrund der Anführungszeichen werden die Werte als Strings behandelt und somit verbunden, statt addiert. Wenn Sie 35 + 25 eintippen, erhalten Sie das erwartete Ergebnis.

-
- -

Bedingungen

- -

Bedingungen sind Code-Strukturen, die Ihnen erlauben, zu prüfen, ob ein Ausdruck wahr oder falsch ist und in Abhängigkeit des Ergebnisses unterschiedlichen Code auszuführen. Die gebräuchlichste Art von Bedingungen sind if ... else. Zum Beispiel:

- -
var eis = 'Schokolade';
-if (eis === 'Schokolade') {
-  alert('Yuhu, ich liebe Schokoladeneis!');
-} else {
-  alert('Awwww, ich mag lieber ein Schokoladeneis...');
-}
- -

Der Ausdruck innerhalb des if ( ... ) ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable eis mit dem String Schokolade zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich true, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem else Befehl ausgeführt.

- -

Funktionen

- -

{{Glossary("Function", "Functions")}} ist ein Weg, um Funktionalitäten zusammenzupacken, die wiederverwendet werden sollen. Immer wenn die Funktionalität benötigt wird, wird die Funktion unter ihrem Namen aufgerufen, statt denselben Code immer wieder erneut schreiben zu müssen. Sie haben bereits einige Verwendungen von Funktionen gesehen, zum Beispiel:

- -
    -
  1. - 
    var myVariable = document.querySelector('h1');
    -
    2. -
  2. - 
    alert('Hallo!');
    -
    3. -
- -

Die Funktionen document.querySelector and alert sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.

- -

Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — () — abgeschlossen ist, ist es möglicherweise eine Funktion. Funktionen nehmen oft {{Glossary("Argument", "arguments")}} auf, um die Funktionalität zu gewährleisten. Diese Argumente werden innerhalb der runden Klammern platziert und von Komma getrennt, wenn mehr als ein Argument übergeben wird.

- -

Beispielsweise erzeugt die Funktion alert() eine Pop-Up-Box  innerhalb des Browser-Fensters. Dieser Funktion muss ein String als Argument übergeben werden, um der Funktion mitzuteilen, was in diese Pop-Up-Box geschrieben werden soll.

- -

Die guten Nachrichten sind, dass Sie Ihre eigenen Funktionen definieren können. Im nächsten Beispiel schreiben wir eine einfache Funktion, die zwei Zahlen als Argumente aufnimmt und diese multipliziert:

- -
function multiply(num1,num2) {
-  var result = num1 * num2;
-  return result;
-}
- -

Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:

- -
multiply(4,7);
-multiply(20,20);
-multiply(0.5,3);
- -
-

Anmerkung: Das return Kommando teilt dem Browser mit, die Variable result aus der Funktion zurückzuliefern. Somit ist es möglich, diese zu benutzen. Dies ist notwendig, weil Variablen, die innerhalb der Funktion verwendet werden, nur dort gültig sind. Diese Verhaltensweise wird {{Glossary("Scope", "scoping")}} genannt. (Lesen Sie mehr über den Gültigkeitsbereich von Variablen.)

-
- -

Ereignisse (Events)

- -

Um wirkliche Interaktivität auf einer Website herzustellen, werden Ereignisse (events) benötigt - dieses sind Code-Strukturen, die auf Ereignisse achten, die im Browser geschehen und Ihnen dann erlauben, Code auszuführen, um auf diese Ereignisse zu reagieren. Das offensichtlichste Beispiel ist das Klick-Ereignis, das vom Browser abgefeuert wird, wenn man mit dem Mauszeiger auf etwas klickt. Um dies zu zeigen, geben Sie den folgenden Code in die Konsole ein und klicken auf die aktuelle Webseite:

- -
document.querySelector('html').onclick = function() {
-    alert('Hey! Nicht so viel klicken!');
-}
- -

Es existieren viele Möglichkeiten, ein Ereignis mit einem Element zu verbinden. Hier wählen wir das Element HTML aus und setzen die Eigenschaft des onclick-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.

- -

Beachten Sie, dass

- -
document.querySelector('html').onclick = function() {};
- -

gleichbedeutend ist mit

- -
var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};
- -

Es ist nur kürzer.

- -

Dynamische Inhalte für unsere Beispielwebseite

- -

Nun, da wir einige Grundlagen von JavaScript kennengelernt haben, lassen Sie uns einige dynamische Inhalte in Ihre erste Webseite einfügen, damit Sie sehen was mit JavaScript möglich ist.

- -

Bilder wechseln

- -

Wir werden der Webseite ein weiteres Bild hinzufügen. Mit etwas JavaScript-Code werden wir zwischen den beiden Bildern wechseln, wenn auf diese mit der Maus geklickt wird.

- -
    -
  1. Suchen Sie sich zuerst ein zweites Bild für Ihre Webseite aus. Es sollte möglichst die selbe Größe haben, wie das Bild, das Sie schon auf der Webseite haben.
    2. -
  2. Speichern Sie dieses Bild in Ihrem bilder-Ordner.
    3. -
  3. Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es 'firefox2.png' genannt.
    4. -
  4. Gehen Sie in Ihre main.js Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben) - 
    var myImage = document.querySelector('img');
-
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'bilder/firefox-icon.png') {
-      myImage.setAttribute ('src','bilder/firefox2.png');
-    } else {
-      myImage.setAttribute ('src','bilder/firefox-icon.png');
-    }
-}
    -
    5. -
  5. Speichern Sie alle Dateien und laden Sie index.html in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!
    6. -
- -

Wir erstellen die Variable myImage und speichern in dieser eine Referenz zu unserem Bild-Element(img). Als nächstes setzen wir das onclick-Event dieser Variablen gleich mit einer Funktion ohne Namen (eineranonymen Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:

- -
    -
  1. Wir holen uns den Wert des src Attributes von unserem Bild.
    2. -
  2. Wir benutzen eine if-Bedingung, um zu überprüfen ob der src-Wert derselbe ist, wie der Pfad unseres original Bildes: -
      -
    1. Wenn die Bedingung wahr ist, ändern wir den src-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.
      2. -
    2. Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den src-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.
      3. -
    -
    3. -
- -

Ein persönlicher Willkommensgruß

- -

Als nächstes fügen wir unserer Webseite einen persönlichen Willkommensgruß hinzu, welcher vom Benutzer beim ersten Besuch der Seite geändert werden kann. Die Änderung soll auch erhalten bleiben, wenn der Benutzer die Seite verlässt und später wieder zurück kommt. Wir werden auch eine Option haben, den Nutzer zu ändern, so das der Gruß dementsprechend geändert wird.

- -
    -
  1. In der index.html-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein: - - 
    <button>Name ändern</button>
    -
    2. -
  2. In main.js fügen Sie den folgenden Code am Ende hinzu. Achten Sie darauf, das Ihr Code genauso aussieht wie hier gezeigt. Damit erstellen wir zwei neue Variablen und speichern in der Ersten eine Referenz zu unserem neu erstellten button und in der Zweiten zu unserer Hauptüberschrift auf der Webseite: - 
    var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');
    -
    3. -
  3. Fügen Sie nun die folgende Funktion ein. Diese erstellt den personalisierten Willkommensgruß. Jetzt macht diese Funktion noch nichts, aber wir werden sie gleich benutzen: - 
    function setUserName() {
-  var myName = prompt('Bitte geben Sie Ihren Namen ein.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla ist cool, ' + myName;
-}
    - Innerhalb der Funktion wird in der ersten Zeile die neue Variable myName erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der prompt()-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der alert()-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf OK bestätigen kann. Als nächstes Rufen wir eine API namens localStorage auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die setItem()-Funktion von localStorage, um ein Datenobjekt mit dem Namen 'name' zu erstellen und setzen für den Wert die Variable myName ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (textContent) von myHeading mit unserem Gruß welcher den Namen des Benutzers beinhaltet.
    4. -
  4. Fügen Sie als nächstes diesen if ... else Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird: - 
    if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla ist cool, ' + storedName;
-}
    - Dieser Code-Block benutzt eine logische Verneinung, um zu überprüfen ob es schon einen gespeicherten Namen gibt. Wenn der Name nicht existiert, dann wird die Funktion setUserName() aufgerufen, um einen Namen zu bekommen. Wenn der Name existiert, der Benutzer also diesen schon bei einem vorherigen Besuch der Webseite angegeben hat, dann wird der gespeicherte Name mit der getItem()-Funktion geladen, in der Variablen storedName gespeichert und dem String für den Willkommensgruß hinzugefügt.
    5. -
  5. Als letztes fügen wir unserem Button den unten stehenden onclick-Eventhandler hinzu, welcher die setUserName()-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt: - 
    myButton.onclick = function() {
-  setUserName();
-}
-
    -
    6. -
- -

Wenn Sie Ihre Seite jetzt im Browser aufrufen, werden Sie beim ersten Besuch nach Ihrem Namen gefragt und der Willkommensgruß wird personalisiert. Sie können den Namen jederzeit ändern, indem Sie auf den Button drücken. Der personalisierte Willkommensgruß wird auch wieder angezeigt, wenn Sie die Seite verlassen und danach wieder aufrufen, da der Name in localStorage, im Browser, gespeichert wird!

- -

Zusammenfassung

- -

Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (sehen Sie sich unsere Version an):

- -

- -

Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich unseren Code auf Github anschauen.

- -

Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem JavaScript Guide.

- -
{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git a/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html deleted file mode 100644 index 7b5dfbc541..0000000000 --- a/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: Wie das Internet funktioniert -slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert -tags: - - Anfänger - - Client - - DNS - - HTTP - - IP - - Infrastruktur - - Internet - - Lernen - - Server - - TCP - - Web -translation_of: Learn/Getting_started_with_the_web/How_the_Web_works ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
- -
-

Wie das Internet funktioniert gibt eine vereinfachte Übersicht darüber, was passiert, wenn Sie eine Webseite in einem Webbrowser auf Ihrem Computer oder auf Ihrem Smartphone aufrufen.

-
- -

Dieser Artikel ist sehr theoretisch und ist für den Anfang nicht essentiell um Code für Webseiten zu schreiben, aber nach einiger Zeit werden Sie feststellen, das es von Vorteil ist zu wissen, was im Hintergrund geschieht.

- -

Client und Server

- -

Computer welche über das Internet verbunden sind werden als Client oder als Server bezeichnet. Dieses Diagramm veranschaulicht, vereinacht, wie diese beiden Computer miteinander interagieren:

- -

- - - -

Die anderen Teile der Werkzeugkiste

- -

Der Client und der Server, wie wir sie oben beschrieben haben sind nicht alles. Es gibt weitere Dinge, die involviert sind, um eine Webseite anzuzeigen und wir werden diese hier erläutern.

- -

Versuchen Sie sich vorzustellen, das Internet wäre eine Straße. An einem Ende der Straße ist der Client, was wie Ihr Haus sein könnte. An dem anderen Ende der Straße ist der Server, der wie ein Einkaufsladen ist, bei dem Sie etwas kaufen möchten.

- -

- -

Auf dem Weg von Ihrem Haus zum Shop müssen Sie an einigen anderen Stellen vorbei und "Hallo" sagen:

- - - -

Was passiert jetzt also genau?

- -

Wenn Sie eine Internetadresse in Ihren Browser eintippen (wie wenn Sie zu dem Laden gehen):

- -
    -
  1. Der Browser kontaktiert den DNS Server und findet die echte Adresse von derm Server auf dem die Webseite liegt (Sie finden die Adresse des Ladens).
    2. -
  2. Der Browser sendet eine HTTP-Anfrage an den Server und fragt nach einer Kopie der Webseite für den Client (Sie gehen zu dem Laden und bestellen Ihre Waren). Diese Nachricht und alle anderen Daten, welche zwischen Client und Server gesendet werden, nutzen Ihre Internetverbindung und nutzen TCP/IP für die Übertragung.
    3. -
  3. Wenn der Server die Anfrage entgegennimmt, sendet dieser an den Client eine "200 OK" Nachricht, welche soviel bedeutet wie "Natürlich können Sie sich die Webseite anschauen! Hier ist sie." Danach sendet der Server die Dateien der Webseite, in kleinen Datenpaketen, an den Browser.  (Im Laden bekommen Sie Ihre Waren und bringen diese nach Hause)
    4. -
  4. Im Browser werden die kleinen Datenpakete zusammengesetzt und zeigt Ihnen die komplette Webseite. (die Waren kommen bei Ihnen daheim an)
    5. -
- -

DNS erklärt

- -

Echte Webadressen sind keine schönen, leicht zu merkenden Strings, welche Sie in die Adressleiste Ihres Browsers eingeben, um Ihre Lieblingswebseiten zu finden. Es sind spezielle Nummern, welche so aussehen: 63.245.215.20.

- -

Dies ist eine {{Glossary("IP Address", "IP address")}} und repräsentiert eine einzigartige Adresse im Internet. Diese kann man sich aber nicht so leicht merken. Deswegen wurden Domain Name Server erfunden. Dies sind spezielle Server, welche zu der Adresse die Sie im Browser eintippen(z.B. "mozilla.org"), die richtige (IP) Adresse finden.

- -

Webseiten können direkt über ihre IP Adresse erreicht werden. Versuchen Sie es: Gehen Sie zur Mozilla Webseite, indem sie die folgende IP Adresse in der Adresszeile Ihres Browsers in einem neuen Tab eingeben: 63.245.215.20

- -

A domain name is just another form of an IP address

- -

Datenpakete erklärt

- -

Vorhin haben wir das Wort "Datenpakete" genutzt, um zu beschreiben in welcher Form die Daten vom Server zum Client gelangen. Was ist damit gemeint? Wenn Daten über das Internet gesendet werden, dann wird es in tausenden von kleinen Stückchen geschickt, damit verschiedene Benutzer einer Webseite, diese zur selbern Zeit herunterladen können. Wenn Webseiten in einem großen Paket gesendet werden würde, dann könnte nur ein Benutzer auf einmal diese herunterladen, was das Internet nicht sehr effizient machen würde.

- -

Lesen Sie weiter (englisch)

- - - -

Credit

- -

Street photo: Street composing, by Kevin D.

- -
{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" deleted file mode 100644 index f775774535..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/der_kopf_metadaten_in_html/index.html" +++ /dev/null @@ -1,268 +0,0 @@ ---- -title: Was gehört in den Kopf der HTML-Datei? -slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML -tags: - - Anfänger - - Beginner - - HTML - - Kopf - - Meta - - Metadaten - - Sprache - - Umlaute - - favicon - - head - - lang -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
- -

Der Kopf (engl.: head) eines HTML Dokumentes, ist der obere Teil innerhalb des <head>-Elements, welcher nicht direkt im Webbrowser gezeigt wird, wenn die Seite gerendert wird. Er enthält Zusatzinformationen zur Webseite, wie den {{htmlelement("title")}}, Links zu CSS-Dateien und einem Favicon, andere Metadaten, wie den Autor der Webseite und eine kurze Beschreibung für Suchmaschinen. In diesem Artikel geht es um all diese Themen und noch mehr, um Ihnen beizubringen wie Sie den Kopf der HTML-Datei am sinnvollsten nutzen.

- - - - - - - - - - - - -
Vorwissen:HTML-Grundlagen, wie sie in Lerne HTML kennen abgedeckt werden.
Ziel:Lernen für was der Kopf des HTML-Dokuments da ist, die wichtigsten Dinge die dort hinein gehören und wie sie das HTML-Dokument beeinflussen
- -

Was ist der HTML-Kopf?

- -

Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen, mit welchem wir uns im vorherigen Artikel beschäftigt haben:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Meine Testseite</title>
-  </head>
-  <body>
-    <p>Dies ist meine Webseite.</p>
-  </body>
-</html>
- -

Der HTML-Kopf ist der Inhalt im {{htmlelement("head")}}-Element. Anders als der Inhalt des {{htmlelement("body")}}-Elements, welcher im Browserfenster angezeigt wird, bleibt der Kopf im Browser verborgen. Die Aufgabe des Kopfes ist es, {{glossary("Metadata", "metadata")}} über das Dokument zu beinhalten. In unserem Beispiel ist der Kopf nicht sehr groß:

- -
<head>
-  <meta charset="utf-8">
-  <title>Meine Testseite</title>
-</head>
- -

Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <head>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach view-source: vor der Webadresse in die Adresszeile schreiben (z.B. view-source:http://mozilla.org). Unser Ziel hier ist es nicht alle Möglichkeiten zu zeigen, was man in den Kopf schreiben kann, aber wir werden Ihnen die wichtigsten und nützlichsten Dinge vorstellen. Fangen wir an!

- -

Einen Titel hinzufügen

- -

Wir haben das {{htmlelement("title")}}-Element schon in Aktion gesehen - es kann genutzt werden, um der Webseite einen Titel hinzuzufügen. Dies kann mit dem {{htmlelement("h1")}}-Element verwechselt werden, welches benutzt wird, um innerhalb des <body>-Elements dem Inhalt der Webseite eine Hauptüberschrift zu geben. Manchmal wird diese Hauptüberschrift auch Titel genannt. Die beiden Elemente sind aber sehr unterschiedlich!

- - - -

Aktives Lernen: Beispiel anschauen

- -
    -
  1. Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von title-example.html page herunterladen. Um das zu tun, können Sie entweder - -
      -
    1. Den Code direkt von der Seite kopieren und diesen in eine neue Textdatei in Ihrem Code-Editor einfügen. Vergessen Sie nicht die Datei zu speichern.
      2. -
    2. Drücken Sie auf den "Raw" Button auf der Seite, welcher den Code in einem neuen Browserfenster anzeigen lässt. Wählen Sie nun in Ihrem Browsermenu Datei > Speichere Seite unter... und speichern die Datei auf Ihrem Computer.
      3. -
    -
    2. -
  2. Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen: -

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Es sollte hier klar werden, wo das <h1>-Element erscheint und wo das <html>-Element zu sehen ist!

    -
    3. -
  3. Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen. Ändern Sie den Inhalt der Elemente, speichern Sie die Datei und aktualisieren Sie die Seite im Browser. Probieren Sie ein bisschen herum.
    4. -
- -

Der Inhalt des <title>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (Lesezeichen > Lesezeichen hinzufügen oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <title>-Elements als Name für das Lesezeichen vorgeschlagen wird.

- -

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

- -

Der Inhalt des <title>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.

- -

Metadaten: das <meta>-Element

- -

Metadaten sind Daten, welche Daten beschreiben. HTML hat einen "offiziellen" Weg, Meatadaten zu einem Dokument hinzuzufügen, das {{htmlelement("meta")}}-Element. Natürlich könnten auch die anderen Dinge, die wir hier besprechen, als Metadaten bezeichnet werden. Es gibt eine Menge verschiedener <meta>-Elemente, welche in das <head>-Element plaziert werden können. Wir werden hier nicht alle erklären, da dies sehr verwirrend werden würde. Statt dessen erklären wir einige Dinge die sie häufig sehen werden, um Ihnen eine Idee zu geben, um was es hier geht.

- -

Zeichensatz einer Webseite festlegen

- -

In dem obigen Beispiel war diese Zeile enthalten:

- -
<meta charset="utf-8">
- -

Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. utf-8 ist ein universeller Zeichensatz in dem fast jeder Charakter enthalten ist, der in menschlicher Schrift benutzt wird. Das bedeutet, das ihre Webseite fast alle Sprachen anzeigen kann. Es ist also eine gute Idee, dies auf jeder Ihrer Webseiten zu setzen! Wenn Sie diesen nicht benutzen, werden Umlaute (Ä, ö) und ß nicht richtig angezeigt. Zum Beispiel kann Ihre Webseite damit gleichzeitig Englisch und Japanisch anzeigen:

- -

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Wenn Sie Ihren Zeichensatz zum Beispiel auf ISO-8859-1 setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:

- -

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

- -

Atkives lernen: Experimentieren mit Zeichensätzen

- -

Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <title>-Element benutzt haben (title-example.html page). Verändern Sie den Wert von meta-charset in ISO-8859-1 und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:

- -
<p>Japanese example: ご飯が熱い。</p>
- -

Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <meta charset>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche meta-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.

- -

 Autor und Beschreibung hinzufügen

- -

Viele <meta> -Elemente beinhalten name und content Attribute:

- - - -

Zwei dieser meta-Elemente, bei denen es sinnvoll ist, sie auf Ihrer Webseite zu nutzen, stellen wir hier vor. Sie definieren den Autor (engl.: author) und eine kurze Beschreibung (engl.: description) der Webseite. Schauen wir uns ein Beispiel an:

- -
<meta name="author" content="Chris Mills">
-<meta name="description" content="The MDN Learning Area aims to provide
-complete beginners to the Web with all they need to know to get
-started with developing web sites and applications.">
- -

Einen Autor anzugeben ist sinnvoll, um zu zeigen, wer die Webseite geschrieben hat. Vielleicht möchte jemand Kontakt mit dem Autor aufnehmen, da er Fragen zum Inhalt oder zum Code der Webseite hat. Es gibt Seiten, welche automatisch den Autor der Webseite auslesen, um eine Kontaktmöglichkeit zu diesem zu erstellen.

- -

Eine Beschreibung welche zum Inhalt der Seite passende Stichwörter enthält, ist ein sinnvoller Weg, die Webseite in Suchmaschinen zu relevanten Suchbegriffen weiter oben erscheinen zu lassen. (solche Methoden werden unter dem Begriff Suchmaschinenoptimierung (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)

- -

Aktives Lernen: Beschreibung für Suchmaschinen

- -

Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.

- -
    -
  1. Gehen Sie zu der Startseite von dem Mozilla Developer Network.
    2. -
  2. Schauen Sie sich den Quellcode der Webseite an (Rechts/Ctrl + klick auf die Seite, wählen Sie Quellcode anzeigen von dem Kontextmenü oder schreiben Sie view-source: vor die Webadresse in der Adresszeile).
    3. -
  3. Finden Sie das description <meta>-Tag. Es sollte so aussehen: - 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both
-Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    -
    4. -
  4. Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <meta>-Tag und vom <title> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! A Yahoo search result for "Mozilla Developer Network"
    5. -
- -
-

Hinweis: Wenn Sie mit Google suchen, werden Sie einige Unterseiten von MDN sehen, direkt unter dem Link zur Hauptseite von MDN. Dies sind sogenannte Sitelinks und Sie können mit den Google's webmaster tools bearbeitet werden.

-
- -
-

Hinweis: Viele  <meta>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <meta>-Element (<meta name="keywords" content="fill, in, your, keywords, here">).  Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <meta>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.

-
- -

Andere Typen von Metadaten

- -

Während Sie sich im Internet umschauen, werden Sie andere Typen von Metadaten entdecken. Einige Funktionen auf Webseiten sind proprietäre Kreationen (zum Beispiel Seiten von Sozialen Netzwerken), welche geschrieben wurden, um bestimmte Informationen zur Verfügung zu stellen.

- -

Zum Beispiel gibt es Open Graph Data, welches ein Metadatenprotokoll ist, welches von Facebook erfunden wurde, um reichhaltigere Metadaten zur Verfügung zu stellen. Im MDN Quellcode können Sie folgendes finden:

- -
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
-<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
-information about Open Web technologies including HTML, CSS, and APIs for both Web sites
-and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
-<meta property="og:title" content="Mozilla Developer Network">
- -

Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:

- -

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter nutzt ganz ähnliche Metadaten, welche einen ähnlichen Effekt haben. Ein spezifischer Titel, eine Kurzbeschreibung und ein Bild können bei Angabe eines Links angezeigt werden. Als Beispiel:

- -
<meta name="twitter:title" content="Mozilla Developer Network">
- -

Spezielle Icons der Webseite hinzufügen

- -

Um das Design Ihrer Webseite weiter zu verschönern, können Sie in den Metadaten eine Referenz zu einem speziellen Icon-Set hinzufügen. Diese werden dann in einem bestimmten Kontext angezeigt.

- -

Das Favicon, welches es schon seit vielen Jahren gibt, ist das erste Icon seiner Art. Es ist 16 x 16 Pixel groß und wird an verschiedenen Stellen genutzt. Sie können Favicons vor dem Titel einer Webseite in den meisten Browser-Tabs sehen. Auch wenn Sie eine Seite Ihren Lesezeichen hinzufügen, wird dort das Favicon verwendet.

- -

Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:

- -
    -
  1. Speichern Sie das Favicon mit der Endung .ico in dem selben Ordner, in dem auch Ihre index.html Datei ist. Die meisten Browser würden auch .gif und .png Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.
    2. -
  2. Fügen Sie die folgende Zeile in den <head>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen: - 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    -
    3. -
- -

Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:

- -

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

- -

Es gibt heutzutage viele andere Icon-Typen die man der Webseite hinzufügen kann. Zum Beispiel werden Sie folgendes im Quellcode der MDN Startseite finden:

- -
<!-- third-generation iPad with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
-<!-- iPhone with high-resolution Retina display: -->
-<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
-<!-- first- and second-generation iPad: -->
-<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
-<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
-<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
-<!-- basic favicon -->
-<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
- -

Die Kommentare erklären für was die verschiedenen Icons da sind. Zum Beispiel gibt es ein hochauflösendes Icon, welches angezeigt wird, wenn die Webseite auf dem Startbildschirm eines IPad's gespeichert wird.

- -

Machen Sie sich nicht zu viele Sorgen, all diese Icons müssen Sie nicht direkt in Ihrer Webseite haben. Sie sind eher ein Feature für fortgeschrittene Webentwickler und werden nicht zur Absolvierung dieses Kurses benötigt. Sie sollen hier nur erfahren für was diese Code-Zeilen stehen, wenn Sie diese im Quellcode anderer Webseiten sehen.

- -

CSS und JavaScript der HTML-Datei hinzufügen

- -

Fast alle modernen Webseiten benutzen {{glossary("CSS")}}, um diese gut aussehen zu lassen und {{glossary("JavaScript")}} um interaktive Elemente hinzuzufügen, wie Video-Spieler, Karten, Spiele und vieles mehr. Diese werden der HTML-Datei normalerweise wie folgt hinzugefügt:

- - - -

Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein

- -
    -
  1. Holen Sie sich jeweils eine Kopie von unseren meta-example.html, script.js und style.css-Dateien und speichern diese lokal auf ihrem Computer in demselben Ordner ab. Gehen Sie sicher das die Dateien mit den richtigen Namen und Dateiendungen gespeichert sind.
    2. -
  2. Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.
    3. -
  3. Fügen Sie nun ein {{htmlelement("link")}}-Element hinzu, welches auf die CSS-Datei verweist und ein {{htmlelement("script")}}-Element, welches die JavaScript-Datei einbindet, wie Sie es in diesem Artikel gelernt haben.
    4. -
- -

Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:

- -

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

- - - -
-

Hinweis: Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere css-and-js.html Beispiel Webseite an.

-
- -

Die genutzte Sprache der Webseite angeben

- -

Am Ende soll hier noch angemerkt werden, das Sie die genutzte Sprache auf der Webseite angeben können und sollten. Dies kann einfach gemacht werden indem Sie das lang-Attribut dem öffnenden HTML-Tag hinzufügen (wie auf meta-example.html gemacht und es unten gezeigt wird).

- -
<html lang="de">
- -

Dies ist in vielerlei Hinsicht eine hilfreiche Angabe. Ihr HTML-Dokument wird effizienter von Suchmaschinen aufgenommen, wenn die Sprache angegeben ist. Auch für Screenreader ist die Angabe der Sprache am Beginn des Dokumentes wichtig.

- -

Sie können auch für Bereiche Ihrer Webseite eine andere Sprache angeben. Zum Beispiel könnten Sie einen Bereich, in welchem japanischer Text steht, wie folgt angeben:

- -
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
- -

Die Ländercodes werden im ISO 639-1 Standard definiert. Sie können hier mehr darüber lesen: Language tags in HTML and XML (in Englisch)

- -

Zusammenfassung

- -

Dies ist das Ende unseres Exkurses über den Kopf der HTML-Datei. Es gäbe noch einiges mehr, was man dort tun könnte, aber es wäre für einen Anfänger nicht hilfreich. Die meistgenutzten Sachen haben wir hier erklärt. Weiter geht es mit Einfache Textformatierung in HTML.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" deleted file mode 100644 index 7b9ce1bae8..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/document_and_website_structure/index.html" +++ /dev/null @@ -1,292 +0,0 @@ ---- -title: Struktur in die Webseite bringen -slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure -tags: - - Beginner - - Guide - - HTML - - Layout - - Planung - - Sitemap - - Struktur -translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.

- - - - - - - - - - - - -
Vorwissen:HTML-Grundlagen, wie sie in Lernen Sie HTML kennen abgedeckt werden. HTML Textformatierung, wie in Einfache Textformatierung in HTML abgedeckt wird. Wie Links funktionieren, wie im Artikel Links erstellen beschrieben wird.
Ziel:Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.
- -

Bereiche einer Webseite

- -

Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:

- -
-
header - Kopfbereich
-
Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.
-
Navigation
-
In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.
-
Hauptinhalt
-
Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!
-
Sidebar
-
Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.
-
footer - Fußbereich
-
Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.
-
- -

Eine „typische Webseite“ könnte wie folgt strukturiert werden:

- -

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

- -

Inhalte strukturieren mit HTML

- -

Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen.

- -

Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?

- -
-

Hinweis: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa 285 Millionen Menschen, während die Gesamtpopulation bei 7 Billionen Menschen liegt.

-
- -

Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche Funktion sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden.

- -

Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:

- - - -

Aktives Lernen: Den Code aus dem Beispiel verstehen

- -

Das Beispiel oben basiert auf dem folgenden Code (Man kann dieses Beispiel auch auf GitHub finden). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-
-    <title>Titel der Webseite</title>
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
-    <link rel="stylesheet" href="style.css">
-
-    <!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren-->
-    <!--[if lt IE 9]>
-      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
-    <![endif]-->
-  </head>
-
-  <body>
-    <!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird -->
-
-    <header>
-      <h1>Header</h1>
-    </header>
-
-    <nav>
-      <ul>
-        <li><a href="#">Home</a></li>
-        <li><a href="#">Our team</a></li>
-        <li><a href="#">Projects</a></li>
-        <li><a href="#">Contact</a></li>
-      </ul>
-
-       <!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann -->
-
-       <form>
-         <input type="search" name="q" placeholder="Search query">
-         <input type="submit" value="Go!">
-       </form>
-     </nav>
-
-    <!-- Hier kommt der Hauptinhalt unserer Webseite -->
-    <main>
-
-      <!-- Es enthält einen Artikel -->
-      <article>
-        <h2>Article heading</h2>
-
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
-
-        <h3>subsection</h3>
-
-        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
-
-        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
-
-        <h3>Another subsection</h3>
-
-        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
-
-        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
-      </article>
-
-      <!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen-->
-      <aside>
-        <h2>Related</h2>
-
-        <ul>
-          <li><a href="#">Oh I do like to be beside the seaside</a></li>
-          <li><a href="#">Oh I do like to be beside the sea</a></li>
-          <li><a href="#">Although in the North of England</a></li>
-          <li><a href="#">It never stops raining</a></li>
-          <li><a href="#">Oh well...</a></li>
-        </ul>
-      </aside>
-
-    </main>
-
-    <!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. -->
-
-    <footer>
-      <p>©Copyright 2050 by nobody. All rights reversed.</p>
-    </footer>
-
-  </body>
-</html>
- -

Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.

- -

Die HTML-Layout-Elemente

- -

Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer HTML Elemente Referenz finden.

- - - -

Nicht-semantische Container

- -

Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.

- -

{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:

- -
<p>Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte <span class="editor-hinweis">[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]</span>.</p>
- -

In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.

- -

{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:

- -
<div class="einkaufswagen">
-  <h2>Einkaufswagen</h2>
-  <ul>
-    <li>
-      <p><a href=""><strong>Silber Ohrringe</strong></a>: $99.95.</p>
-      <img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe">
-    </li>
-    <li>
-      ...
-    </li>
-  </ul>
-  <p>Kosten gesamt: $237.89</p>
-</div>
- -

Dies ist nicht wirklich Inhalt für <aside>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <section> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <div> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.

- -
-

Warnung: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.

-
- -

Zeilenumbruch und Horizontale Linien

- -

Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:

- -

<br> stellt einen Zeilenumbruch innerhalb eines Absatzes(

- -

) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:

- -
<p>There once was a girl called Nell<br>
-Who loved to write HTML<br>
-But her structure was bad, her semantics were sad<br>
-and her markup didn't read very well.</p>
- -

Ohne die <br> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn HTML ignoriert Whitespace. Mit den
- Elementen im Code wird der Absatz wie folgt dargestellt:

- -

There once was a girl called Nell
- Who loved to write HTML
- But her structure was bad, her semantics were sad
- and her markup didn't read very well.

- -

<hr> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:

- -
<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p>
-<hr>
-<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>
- -

Würde wie folgt aussehen:

- -

Die Katze lief aus dem Haus, um die Sonne zu genießen.

- -
-

Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.

- -

Planung einer einfachen Webseite

- -

Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!

- -
    -
  1. Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. -
  2. Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. -
  3. Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. -
  4. Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. -
  5. Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. -
- -

Aktives Lernen: Erstellen Sie eine eigene Sitemap

- -

Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?

- -
-

Hinweis: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.

-
- -

Zusammenfassung

- -

Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.

- -

See also

- - - -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

- - - -

In diesem Modul

- - diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" deleted file mode 100644 index dad40a05a9..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/einfache_textformatierung_in_html/index.html" +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: Einfache Textformatierung in HTML -slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML -tags: - - Beginner - - Einführung in HTML - - HTML - - Lernen - - Listen - - Semantik - - Text - - Text formatieren - - Überschriften -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
- -

Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann.  In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.

- - - - - - - - - - - - -
Vorwissen:Grundlagen von HTML, wie sie im Artikel Lerne HTML kennen abgedeckt werden.
Ziel:Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.
- -

Überschriften und Absätze

- -

Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.

- -

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

- -

Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.

- -

In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:

- -
<p>Ich bin ein Absatz, ja das bin ich.</p>
- -

Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:

- -
<h1>Ich bin der Titel einer Geschichte.</h1>
- -

Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <h1> repräsentiert die Hauptüberschrift, <h2> repräsentiert Unterüberschriften, <h3> repräsentiert Unter-Überschriften und so weiter.

- -

Struktur schaffen

- -

Als Beispiel würden in einer Geschichte <h1> zum ausweisen des Titels genutzt, <h2> für die Kapitelüberschriften und <h3> um ein Kapitel in mehrere Sektionen zu unterteilen.

- -
<h1>Die erdrückende Langeweile</h1>
-
-<p>Von Chris Mills</p>
-
-<h2>Kapitel 1: Die dunkle Nacht</h2>
-
-<p>Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... </p>
-
-<h2>Kapitel 2: Die ewige Stille</h2>
-
-<p>Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...</p>
-
-<h3>Der Geist spricht</h3>
-
-<p>Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"</p>
- -

Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:

- - - -

Wieso brauchen wir Struktur?

- -

Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: text-start.html Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der body des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).

- -

Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.

- -

Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben.

- -

Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:

- - - -

Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.

- -

Aktives Lernen: Unserem Inhalt Struktur geben

- -

Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im Input-Feld mittels HTML-Auszeichnungen so, das im Output-Feld eine Überschrift mit zwei Absätzen darunter erscheint.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 500) }}

- -

Warum brauchen wir Semantik?

- -

Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).

- -

Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.

- -
<h1>Dies ist eine Hauptüberschrift.</h1>
- -

Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).

- -

Sie können jedes Element so aussehen lassen, wie eine Überschrift. Zum Beispiel wie folgt:

- -
<span style="font-size: 32px; margin: 21px 0;">Ist dies eine Top-Level-Überschrift?</span>
- -

Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.

- -

Listen

- -

Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.

- -

Ungeordnete Listen

- -

Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:

- -
Milch
-Eier
-Brot
-Hummus
- -

Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:

- -
<ul>
-Milch
-Eier
-Brot
-Hummus
-</ul>
- -

Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:

- -
<ul>
-  <li>Milch</li>
-  <li>Eier</li>
-  <li>Brot</li>
-  <li>Hummus</li>
-</ul>
- -

Aktives Lernen: Eine ungeordnete Liste auszeichnen

- -

Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

- -

Geordnete Listen

- -

Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:

- -
Fahre bis zum Ende der Straße
-Biege rechts ab
-Fahre geradeaus über die nächsten beiden Verkehrskreisel
-Biege nach dem dritten Kreisel links ab
-Nach 300 Metern ist die Schule auf der rechten Seite
-
- -

Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <ul>-Element:

- -
<ol>
-  <li>Fahre bis zum Ende der Straße</li>
-  <li>Biege rechts ab</li>
-  <li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li>
-  <li>Biege nach dem dritten Kreisel links ab</li>
-  <li>Nach 300 Metern ist die Schule auf der rechten Seite</li>
-</ol>
- -

Aktives Lernen: Eine geordnete Liste auszeichnen

- -

Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

- -

Aktives Lernen: Das Hummus-Rezept auszeichnen

- -

An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die hummus-rezept.html Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.

- - - -

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

- -

Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf Lösung anzeigen sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, text-complete.html, auf GitHub anschauen.

- -

Listen ineinander schachteln

- -

Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:

- -
<ol>
-  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
-  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
-  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
-  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
-  <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
-  <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
-</ol>
-
- -

Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:

- -
<ol>
-  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
-  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
-  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
-  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
-  <ul>
-    <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
-    <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
-  </ul>
-</ol>
-
- -

Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:

- -

Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben.

- -

Betonung und Wichtigkeit

- -

Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.

- -

Betonung

- -

Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort kursiv schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.

- -

Ich bin froh, dass du nicht zu spät bist.

- -

Ich bin froh, dass du nicht zu spät bist.

- -

Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.

- -

In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).

- -
<p>Ich bin <em>froh</em> dass du nicht <em>zu spät</em>bist.</p>
- -

Wichtige Wörter

- -

Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in Fettschrift in geschriebener Sprache. Zum Beispiel:

- -

Diese Flüssigkeit ist sehr giftig.

- -

Ich zähle auf dich. Sei nicht zu spät!

- -

In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: strong = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).

- -
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p>
-
-<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p>
- -

Sie können <strong>-Elemente und <em>-Elemente ineinander verschachteln:

- -
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong> —
-wenn Sie diese trinken, <strong>dann werden Sie <em>sterben</em></strong>.</p>
- -

Aktives Lernen: Lassen Sie uns wichtig sein!

- -

In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <strong>-Elemente und <em>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.

- - - -

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

- -

Kursiv, fett, unterstrichen...

- -

Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:bold), kursiv (engl.:italic) oder unterstrichen (engl.:underlined) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch präsentationsbezogenes Element. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.

- -

In HTML5 wurden <b>, <i> und <u> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.

- -

Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <b>, <i> oder <u> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.

- - - -
-

Hinweis:Eine Warnung zu unterstrichenem Text: Unterstrichener Text wird stark mit Hyperlinks assoziiert. Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <u>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.

-
- -
<!-- Wissenschaftliche Namen -->
-<p>
-  Der winzige Rubinkehlkolibri (<i>Archilochus colubris</i>) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist.
-</p>
-
-<!-- Fremdwörter -->
-<p>
-  Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel <i lang="uk-latn">vatrushka</i>,
-  <i lang="id">nasi goreng</i> und <i lang="fr">soupe à l'oignon</i>.
-</p>
-
-<!-- Ein bekannter Schreibfehler -->
-<p>
-  Eines Tages werde ich lernen, wie man <u>bessser</u> buchstabiert.
-</p>
-
-<!-- Stichpunkte in einer Anleitung hervorheben -->
-<ol>
-  <li>
-    <b>Schneiden</b> Sie zwei Scheiben Brot ab.
-  </li>
-  <li>
-    <b>Legen</b> Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben.
-  </li>
-</ol>
- -

Zusammenfassung

- -

Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man Hyperlinks erstellt, das wichtigste Element im Internet.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" deleted file mode 100644 index d27bf253a4..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/erstellen_von_hyperlinks/index.html" +++ /dev/null @@ -1,317 +0,0 @@ ---- -title: Erstellen von Hyperlinks -slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks -tags: - - Beginner - - Guide - - HTML - - Learn - - Links - - Title - - absolute - - hyperlinks - - relativ - - urls -translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
- -

Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.

- - - - - - - - - - - - -
Vorwissen:Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln Lerne HTML kennen und Einfache Textformattierung mit HTML abgedeckt werden.
Ziel:Lernen wie man sinnvoll Hyperlinks einsetzt.
- - - -

Hyperlinks sind eine der Erfindungen, welche das Internet zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "web") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.

- -
-

Hinweis: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.

-
- -

Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.

- -

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

- - - -

Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.

- -
<p>Ich erstelle einen Link zu der
-<a href="https://www.mozilla.org/en-US/"> Mozilla Webseite</a>.
-</p>
- -

Dies gibt das folgende Resultat:

- -

Ich erstelle einen Link zu der Mozilla Webseite.

- -

Das title-Attribut

- -

Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist title. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:

- -
<p>Ich erstelle einen Link zu der
-<a href="https://www.mozilla.org/en-US/"
-   title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.
-</p>
- -

Das gibt das folgende Resultat (der Text aus dem >title<-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):

- -

Ich erstelle einen Link zu der Mozilla Webseite.

- -
-

Hinweis: Der Text aus dem >title<-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.

-
- - - -

Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (das Dokument könnte so aussehen)

- - - - - -

Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch Blockelemente könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <a></a> Tags einbetten.

- -
<a href="https://www.mozilla.org/de/">
-  <img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"></a>
-
- -

Hinweis: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.

- -

Kurzer Exkurs zu URLs und Linkpfaden

- -

Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.

- -

Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter https://www.mozilla.org/de/ zu finden.

- -

URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von Erstellen von Hyperlinks an).

- -

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

- -

Das Stammverzeichnis, englisch root (=> Wurzel), dieses Verzeichnisses wurde creating-hyperlinks benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine index.html und eine contacts.html-Datei. Auf einer echten Webseite wäre index.html die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.

- -

Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens pdfs und projects. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (project-brief.pdf) und eine index.html-Datei. Sie sehen, man kann mehrere index.html-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite index.html-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.

- - - -
-

Hinweis: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel ../../../komplexer/pfad/zu/meiner/datei.html.

-
- -

Innerhalb eines Dokuments verlinken

- -

Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben. -Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen: -

- -
<h2 id="postanschrift">Postanschrift</h2>
- -

Um zu dieser bestimmten id zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:

- -
<p>Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere  <a href="contacts.html#postanschrift">Postanschrift</a>.</p>
- -

Sie können diese Art der Referenz auch benutzen, um innerhalb des selben Dokumentes zu verlinken:

- -
<p>Unsere <a href="#postanschrift">Postanschrift</a> kann am Ende der Webseite gefunden werden. </p>
- -

Absolute und relative URLs

- -

Zwei Begriffe denen Sie im Internet begegnen werden sind absolute URL und relative URL:

- -

Absolute URL: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei index.html in ein Verzeichnis namens projects hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite http://www.example.com ist, dann lautet die absolute Adresse der Webseite http://www.example.com/projects/index.html.

- -

Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.

- -

Relative URL: Zeigt zu einem Verzeichnis realtiv zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei http://www.example.com/projects/index.html zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: project-brief.pdf). Wenn diese PDF-Datei in dem Unterverzeichnis pdfs liegt, welches wiederum in dem Verzeichnis projects zu finden ist, dann würde die relative Adresse wie folgt aussehen: pdfs/project-brief.pdf. Die äquivalente absolute Adresse für die PDF-Datei wäre http://www.example.com/projects/pdfs/project-brief.pdf.

- -

Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere index.html-Datei aus dem projects Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL pdfs/project-brief.pdf darin auf http://www.example.com/pdfs/project-brief.pdf verweisen und nicht mehr auf http://www.example.com/projects/pdfs/project-brief.pdf -

- - - -

Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.

- - - - -

Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:

- - - -

Schauen wir uns ein Beispiel an:

- -

Guter Linktext: Firefox herunterladen

- -
<p><a href="https://firefox.com/">
-  Firefox herunterladen
-</a></p>
- -

Schlechter Linktext: Klicke hier um Firefox herunterzuladen

- -
<p><a href="https://firefox.com/">
-  Klicke hier
-</a>
-um Firefox herunterzuladen</p>
-
- -

Weitere Tipps:

- - - - - -

Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der selben Webseite verlinken. Um eine andere Webseite zu verlinken müssen Sie natürlich absolute Links benutzen.

- - - -

Klare Verlinkung zu Dateien die keine HTML-Dateien sind

- -

Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:

- - - -

Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:

- -
<p><a href="http://www.example.com/large-report.pdf">
-  Laden Sie den Verkaufsbericht herunter (PDF, 10MB)
-</a></p>
-
-<p><a href="http://www.example.com/video-stream/">
-  Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität)
-</a></p>
-
-<p><a href="http://www.example.com/car-game">
-  Spielen Sie das Autospiel (benötigt Flash)
-</a></p>
- -

Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken

- -

Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das download-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:

- -
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
-   download="firefox-39-installer.exe">
-  Firefox 39 für Windows herunterladen
-</a>
- -

Aktives Lernen: Erstellen Sie ein Navigationsmenu

- -

In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.

- -

Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter navigation-menu-start die Liste der benötigten Dateien im Verzeichnis):

- - - -

Aufgaben:

- -
    -
  1. Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.
    2. -
  2. Verändern Sie jeden Seitennamen in einen Link.
    3. -
  3. Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein.
    4. -
  4. Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.
    5. -
- -

Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:

- -

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

- -
-

Hinweis: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: navigation-menu-marked-up

-
- - - -

Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem mailto: URL Schema benutzt.

- -

In seiner einfachsten und am meisten genutzten Form, gibt ein mailto: Link einfach nur die E-Mail Adresse des Empfängers an. Beispiel:

- -
<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>
-
- -

Damit erstellen Sie einen Link der folgendermaßen aussieht: -Senden Sie eine E-Mail an Niemand.

- -

Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur mailto: schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um Teilen-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.

- -

Details angeben

- -

Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über mailto vorausgefüllt werden, dazu gehören subject (Betreff), cc und body (Um eine vorgegeben Nachricht anzuzeigen).

- -

Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:

- -
<a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=Der%20Betreff%20von%20der%20Email &amp;body=Die%20Nachricht%20in%20der%20Email">
-  Senden Sie eine E-Mail mit cc, bcc, subject and body
-</a>
- -
-

Hinweis: Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (?), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.

-
- -

Hier sind noch ein paar Beispiele für mailto URLs:

- - - -

Zusammenfassung

- -

Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" deleted file mode 100644 index 3e3223016e..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/fehlersuche_in_html/index.html" +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: Fehlersuche in HTML -slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML -tags: - - Anfänger - - Beginner - - Debugging - - Guide - - HTML - - Validation - - validator -translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.

- - - - - - - - - - - - -
Vorwissen: -

Grundkenntnisse in HTML, wie sie in den Artikeln Lernen Sie HTML kennen, Einfache Textformatierung mit HTML und Erstellen von Links abgedeckt werden.

-
Ziel: -

Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.

-
- -

Keine Angst vor der Fehlersuche

- -

Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache Rust, ausgegeben wurde.

- -

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string. "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich println!(Hello, world!"); anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.

- -

Begriffserklärungen Fehlerbehebung

- -

Im Computerbereich wurden viele Begriffe aus dem Englischen übernommen, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch Debugging genannt. Der Fehler im Code wird im Englischen als Bug bezeichnet, was soviel wie Ungeziefer bedeutet. Das Debugging ist dann das Entfernen des Ungeziefers Als Debugger wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.

- -

Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.

- -

HTML und Debugging

- -

Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr permissiv. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.

- -

Permissiver Code

- -

Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:

- - - -

HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.

- -
-

Hinweis: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.

-
- -

Aktives Lernen: Permissiven Code untersuchen

- -

Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.

- -
    -
  1. Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: debug-example demo In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.
    2. -
  2. Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. -
  3. Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an: - 
    <h1>HTML debugging examples</h1>
-
-<p>What causes errors in HTML?
-
-<ul>
-  <li>Unclosed elements: If an element is <strong>not closed properly,
-      then its effect can spread to areas you didn't intend
-
-  <li>Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
-      what is this?</em>
-
-  <li>Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
-      homepage</a>
-</ul>
    -
    4. -
  4. Lassen Sie uns die Probleme erläutern: -
      -
    • Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.
      • -
    • Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.
      • -
    • Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <strong>strong <em>strong emphasised?</strong> what is this?</em>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.
      • -
    • Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.
      • -
    -
    5. -
  5. Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: Entdecken Sie die Web Developer Tools
    6. -
  6. In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. -
  7. Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser sollten zu dem selben Resultat kommen.): -
      -
    • Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.
      • -
    • Es ist nicht klar, wo das erste <strong>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <strong>-Tag versehen, bis zum Ende des Dokumentes!
      • -
    • Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst: - 
      <strong>strong
-  <em>strong emphasised?</em>
-</strong>
-<em> what is this?</em>
      -
      • -
    • Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus: - 
      <li>
-  <strong>Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: </strong>
-</li>
      -
      • -
    -
    8. -
- -

HTML Validation

- -

Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?

- -

Die beste Strategie ist es, das HTML-Dokument von dem Markup Validation Service überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.

- -

The HTML validator homepage

- -

Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen

- -

Aktives lernen: Validieren eines HTML-Dokumentes

- -

Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem Beispieldokument hier.

- -
    -
  1. Öffnen Sie als Erstes den Markup Validation Service in einem anderen Browser-Tab.
    2. -
  2. Gehen Sie zu dem Validate by Direct Input Tab. Dort kann man direkt HTML-Code überprüfen.
    3. -
  3. Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.
    4. -
  4. Klicken Sie auf Check.
    5. -
- -

Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.

- -

A list of of HTML validation results from the W3C markup validation service

- -

Die Fehlermeldungen richtig interpretieren

- -

Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.

- - - -

Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein.

- -

Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner:

- -

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

- -

Zusammenfassung

- -

Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.

- -

Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: Aufgabe: Formatieren eines Briefes

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

 

- -

In this module

- - - -

 

diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" deleted file mode 100644 index 1075d63f66..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/fortgeschrittene_textformatierung/index.html" +++ /dev/null @@ -1,466 +0,0 @@ ---- -title: Fortgeschrittene Textformatierung -slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung -tags: - - Abkürzungen - - Beginner - - Beschreibungslisten - - Guide - - HTML - - Lernen - - Textformatierung - - Zitate -translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
- -

Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel Einfache Textformatierung mit HTML abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.

- - - - - - - - - - - - -
Vorwissen:Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln Lernen Sie HTML kennen und Einfache Textformatierung mit HTML abgedeckt werden.
Ziel:Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.
- -

<dl> - Beschreibungslisten

- -

In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um Beschreibungslisten (engl.: "description lists"). Mit dem dl-Element lässt sich eine Liste von Begriffen (list term) lt erstellen, welchen eine Beschreibung (engl. "description") dd hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:

- -
Innerer Monolog
-Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
-Monolog
-Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
-Beiseitesprechen
-Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
- -

Beschreibungslisten werden vom {{htmlelement("dl")}};-Element eingeschlossen. Jeder Begriff ist in ein {{htmlelement("dt")}}-Element eingebettet, während die dazugehörige Beschreibung danach in einem {{htmlelement("dd")}}-Element hinzugefügt wird. Das sieht dann wie folgt aus:

- -
<dl>
-  <dt>Innerer Monolog</dt>
-  <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd>
-  <dt>Monolog</dt>
-  <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd>
-  <dt>Beiseitesprechen</dt>
-  <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
-</dl>
- -

Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.

- -
-
Innerer Monolog
-
Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
-
Monolog
-
Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
-
Beiseitesprechen
-
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
-
- -

Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:

- -
-
Beiseitesprechen
-
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.
-
Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
-
- -

Aktives Lernen: Eine Beschreibungsliste erstellen

- -

Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im Input-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im Output-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code_1', 700, 500) }}

- -

Zitate

- -

Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.

- -
-

Hinweis: Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für blockquote und q und die Abkürzung für "citation" cite.

-
- -

<blockquote> - Blockzitate

- -

Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("blockquote")}}-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <blockquote>-Element:

- -
<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
- -

Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:

- -
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-  <p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
-</blockquote>
- -

Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:

- -
-

Das HTML <blockquote> Element (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.

-
- -

<q> - Inline Zitate

- -

Inline Zitate (Zitat = engl.: "quote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <q>-Seite:

- -
<p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p>
- -

Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:

- -

Das Zitat-Element — <q> — indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.

- -

<cite> - Quellenangabe

- -

Der Inhalt des {{htmlattrxref("cite","blockquote")}}-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des cite-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das {{htmlelement("cite")}}-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:

- -
<p>Auf der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
-<cite>MDN blockquote-Seite</cite></a> steht:
-</p>
-
-<blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
-  <p>Das <strong>HTML <code>&lt;blockquote&gt;</code>-Element</strong> (oder <em>HTML Block
-  Quotation Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.</p>
-</blockquote>
-
-<p>Das <code>&lt;q&gt;</code>-Element — ist <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.
-Das <code>&lt;q&gt;</code>-Element -- <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">
-<cite>MDN q Seite</cite></a>.</p>
- -

Die cite-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als quotations.html Beispiel anschauen.

- -

Aktives lernen: Wer hat das gesagt?

- -

Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:

- -
    -
  1. Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein cite-Attribut besitzt.
    2. -
  2. Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein cite-Attribut besitzt.
    3. -
  3. Fügen Sie jedem Link ein <cite>-Element hinzu.
    4. -
- -

Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

- -

<abbr> - Abkürzungen

- -

Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("abbr")}}. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:

- -
<p>Wir benutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p>
-
-<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p>
- -

Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):

- -

Wir nutzen HTML, um ein Webdokument zu strukturieren.

- -

Ich denke Dr. Green war in der Küche mit der Kettensäge.

- -
-

Hinweis: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <abbr>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <abbr> zu nutzen.

-
- -

Aktives lernen: Eine Abkürzung kennzeichnen

- -

In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.

- - - -

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

- -

Kontaktdaten markieren

- -

HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:

- -
<address>
-  <p>Chris Mills, Manchester, The Grim North, UK</p>
-</address>
- -

Eine Sache die man sich merken sollte ist, dass das <address>-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:

- -
<address>
-  <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p>
-</address>
- -

Hochstellen und tiefstellen von Text

- -

Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element {{htmlelement("sup")}}. Für tiefergestellten Text (engl.: subscript) gibt es das Element {{htmlelement("sub")}}. Beispiel:

- -
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
-<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
-<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p>
- -

Der Code wird wie folgt gerendert:

- -

My birthday is on the 25th of May 2001.

- -

Die chemische Formel von Koffein ist C8H10N4O2.

- -

Wenn x2 gleich 9 ist, dann muss x gleich 3 oder -3 sein.

- -

Computercode darstellen

- -

Es gibt ein paar Elemente mit denen man Computercode darstellen kann:

- - - -

Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen other-semantics.html):

- -
<pre><code>var para = document.querySelector('p');
-
-para.onclick = function() {
-  alert('Au, hör auf mich zu drücken!!');
-}</code></pre>
-
-<p>Sie sollten nicht zu repräsentative Elemente benutzen, wie <code>&lt;font&gt;</code> und <code>&lt;center&gt;</code>.</p>
-
-<p>In dem obigen JavaScript Beispiel, repräsentiert <var>para</var> ein p-Element.</p>
-
-
-<p>Markieren Sie den ganzen Text mit <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
-
-<pre>$ <kbd>ping mozilla.org</kbd>
-<samp>PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
- -

Der obige Code sollte im Browser folgendermaßen aussehen:

- -

{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}

- -

Zeit und Datum markieren

- -

HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:

- -
<time datetime="2016-01-20">20 Januar 2016</time>
- -

Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:

- - - -

Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.

- -

Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:

- -
<!-- Jahr-Monat-Tag -->
-<time datetime="2016-01-20">20 Januar 2016</time>
-<!-- Nur Jahr und Monat -->
-<time datetime="2016-01">January 2016</time>
-<!-- Nur Monat und Tag -->
-<time datetime="01-20">20 January</time>
-<!-- Nur die Zeit, Stunden:Minuten -->
-<time datetime="19:30">19:30</time>
-<!-- Man kann auch Sekunden und Millisekunden angeben! -->
-<time datetime="19:30:01.856">19:30:01.856</time>
-<!-- Datum und Uhrzeit -->
-<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
-<!-- Datum und Uhrzeit mit Zeitzone -->
-<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</time>
-<!-- Eine bestimmte Wochennummer angeben-->
-<time datetime="2016-W04">Die vierte Woche im Jahr 2016</time>
- -

Zusammenfassung

- -

Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer HTML-Element Referenz nach, denn dort sind alle HTML-Elemente aufgelistet.
- Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/index.html" deleted file mode 100644 index 73f46a2614..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/index.html" +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Einführung in HTML -slug: Learn/HTML/Einführung_in_HTML -tags: - - Einführung in HTML - - HTML - - Kopf - - LandingPage - - Lernen - - Links - - Struktur - - Textformatierung - - head -translation_of: Learn/HTML/Introduction_to_HTML ---- -
{{LearnSidebar}}
- -

{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus Elementen aufgebaut ist. Diese Elemente können auf verschiedene Textstücke angewandt werden, um ihnen verschiedene Bedeutungen zuzuschreiben (Ist es ein Absatz, eine Liste oder Teil einer Tabelle?), um ein Dokument sinnvoll zu strukturieren (Gibt es eine Kopfzeile? Ist der Inhalt in drei Spalten gegliedert? Gibt es ein Navigationsmenü?) und um Inhalte, wie Videos und Bilder einzubetten. Dieses Modul wird sich mit den ersten Beiden dieser Punkte beschäftigen und die fundamentalen Konzepte und Syntax einführen, die Sie zum Verständnis von HTML kennen müssen.

- -

Voraussetzungen

- -

Sie benötigen für dieses Modul keine HTML Kenntnisse, allerdings sollten Sie grundsätzlich mit Computern umgehen können und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren). Sie sollten sich bereits eine einfache Arbeitsumgebung eingerichtet haben, wie in Notwendige Software installieren beschrieben; und wissen wie Sie Ihre Dateien erstellen und  ordnen, wie in Dateien nutzen erklärt. Beide Artikel sind Teil unserer Artikelserie Lerne das Internet kennen, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.

- -
-

Hinweis: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

-
- -

Lerneinheiten

- -

Dieses Modul enthält die folgenden Lerneinheiten, die Ihnen HTML in Theorie und Praxis näher bringen. Es werden viele Möglichkeiten geboten, in denen Sie Ihre neu erworbenen Fähigkeiten ausprobieren können.

- -
-
Lernen Sie HTML kennen
-
Hier lernen Sie die absoluten Grundlagen von HTML. Für den Anfang werden wir Begriffe, wie "Elemente", "Attribute" und andere wichtige Begriffe definieren und deren Einordung in die Sprache vornehmen. Wir zeigen Ihnen, wie eine HTML-Webseite typischerweise aufgebaut ist, wie eine HTML-Elemente strukturiert sind und erklären weitere grundlegende Sprachfunktionen. Sie können zwischendurch immer wieder mit HTML-Code spielen, damit sie ein Gefühl für die Zusammenhänge bekommen.
-
Was gehört in den Kopf der HTML-Datei?
-
Der Kopf (Head) eines HTML Dokuments ist der Teil, der nicht im Browser angezeigt wird, wenn dieses geladen wird. Im Kopf sind Zusatzinformationen zur Webseite enthalten, zum Beispiel das {{htmlelement("title")}}-Element, das den Titel der Webseite enthält, Links zu {{glossary("CSS")}}-Dateien (mit welchen die Webseite gestaltet wird) und Metadaten (z. B. wer der Autor der Webseite ist und Schlagwörter, welche Suchmaschinen helfen Ihre Webseite einzuordnen).
-
Einfache Textformatierung in HTML
-
Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch Semantics genannt), damit der Browser weiß, wie der Textteil darzustellen ist. In diesem Artikel lernen Sie, wie man mit HTML einen Textblock in Überschriften und Absätze strukturiert, Hervorhebungen und Gewicht zu Wörtern hinzufügt, Listen erstellt und vieles mehr.
-
 Erstellen von Hyperlinks
-
Hyperlinks sind sehr wichtig, denn erst Sie machen das Internet zu einem Netzwerk. Dieser Artikel behandelt die Syntax eines Links und bespricht allgemeine Richtlinien zu Links.
-
Fortgeschrittene Textformatierung
-
Es gibt, neben den im Artikel Einfache Textformatierung in HTML erläuterten, viele weitere HTML-Elemente, mit denen man Texte formatieren kann. Diese HTML-Elemente sind nicht ganz so bekannt, aber es ist dennoch hilfreich, sie zu kennen. Hier lernen Sie, wie man Zitate einbindet, Description Lists (dt. etwa: beschreibende Listen) erstellt, Computer-Code und ähnlichen Text darstellt, Hoch- und Tiefstellung erreicht, Kontaktinformationen anordnet und einiges mehr.
-
Struktur in die Webseite bringen
-
Sie können mit HTML sowohl individuelle Teile der Webseite (wie "einen Absatz" oder "ein Bild"), aber auch ganze Abschnitte der Seite formatieren (wie "die Kopfzeile", "das Naviagtionsmenü" oder "die Hauptinhaltsspalte"). In diesem Artikel geht es um das planen einer grundlegenden Webseitenstruktur und die anschließende Umsetzung dieser Struktur in HTML.
-
Fehlersuche in HTML
-
HTML schreiben zu können ist gut, aber was können Sie tun, wenn etwas nicht funktioniert und Sie den Fehler im Code nicht finden? Dieser Artikel stellt ein paar Werkzeuge vor, die Ihnen bei der Fehlersuche helfen können.
-
- -

Aufgaben

- -

Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.

- -
-
Formatieren Sie einen Brief
-
Wir lernen früher oder später alle, einen formalen Brief zu schreiben. Darüber hinaus ist es auch ein schönes Beispiel um den Wissenstand im Bereich der Textformatierung unter Beweis zu stellen. In dieser Aufgabe sollen Sie einen vorgegebenen Brief mit HTML formatieren.
-
Strukturieren Sie eine Webseite
-
In dieser Übungsaufgabe wird Ihre Fähigkeit getestet, mit HTML eine einfache Webseite zu strukturieren. Diese enthält eine Kopfzeile, eine Fußzeile, ein Navigationsmenü, eine Hauptspalte und eine Randspalte.
-
- -

Siehe auch

- -
-
Webgrundlagen Basiskurs 1 (Englisch)
-
Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des Einführung in HTML Moduls, anwendet und festigt. Die Lernenden machen sich in diesem sechsteiligen Modul mit dem Lesen, Schreiben und Teilnehmen im Internet vertraut. Entdecken Sie die Fundamente des Internets durch Erschaffen und Zusammenarbeit.
-
diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" deleted file mode 100644 index 0f5354d5d2..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/lerne_html_kennen/index.html" +++ /dev/null @@ -1,571 +0,0 @@ ---- -title: Lerne HTML kennen -slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen -tags: - - Anfänger - - Attribut - - Beginner - - Charakter-Referenz - - Element - - Guide - - HTML - - Kommentar - - Leerraum - - Modul - - whitespace -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
- -

In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.

- - - - - - - - - - - - -
Vorbereitungen:grundlegende Computerkenntnisse, notwendige Software installiert und wissen wie man Dateien nutzt.
Ziel: -

Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.

-
- -

Was ist HTML?

- -

HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:

- -
Meine Katze ist sehr frech.
- -

Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt: 

- -
<p>Meine Katze ist sehr frech.</p>
- -

Aufbau eines HTML-Elements

- -

Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.

- -

- -

Die Hauptteile unseres Elements sind:

- -
    -
  1. Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
    2. -
  2. Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
    3. -
  3. Das schließende Tag: Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
    4. -
  4. Das Element: Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.
    5. -
- -

Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element

- -

Editieren Sie den Text unten im Input-Feld. Heben Sie den Text mit dem <em>-Element hervor. (schreiben sie ein <em>-Tag vor den Text, um das Element zu öffnen und fügen sie ein </em>-Tag am Ende des Textes an, um das Element zu schließen) Dies sollte den Text kursiv darstellen. Sie sollten die Änderungen live in dem Output-Feld sehen können.

- -

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code', 700, 300) }}

- -

Elemente verschachteln

- -

Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird Verschachteln genannt. Wenn wir hervorheben wollen, das unsere Katze sehr schlecht gelaunt ist, können wir das Wort "sehr" in ein <strong>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:

- -
<p>Meine Katze ist <strong>sehr</strong> frech.</p>
- -

Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <p>-Element geöffnet, dann das <strong>-Element geöffnet. Deswegen müssen wir zuerst wieder das <strong>-Element schließen, bevor wir das <p>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:

- -
<p>Meine Katze ist <strong>sehr frech.</p></strong>
- -

Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.

- -

Blockelemente und Inlineelemente

- -

Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.

- - - -

Schauen Sie sich folgendes Beispiel an:

- - - -

{{ EmbedLiveSample('Playable_code2', 700, 400) }}

- -

{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.

- -
-

Notiz: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in Element content categories, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.

-
- -
-

Notiz: Sie können auf MDN hilfreiche Referenzseiten finden - für alle Blockelemente und Inlineelemente.

-
- -

Leere Elemente

- -

Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:

- -
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
- -

Der Code würde folgende Webseite im Browser anzeigen:

- -

{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}

- -

Attribute

- -

Elemente können auch Attribute enthalten, dass sieht dann so aus:

- -

- -

Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.

- -

In unserem Beispiel ist der Name des Attributes class und editor-note ist der diesem Attribut zugeordnete Wert.

- -

Ein Attribut sollte immer haben:

- -
    -
  1. Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
    2. -
  2. Den Attributnamen, gefolgt von Gleichheitszeichen
    3. -
  3. Anführungs- und Schlusszeichen um den Wert. (bsp. "editor-note")
    4. -
- -

Aktives Lernen: Hinzufügen von Attributen zu einem Element

- -

Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:

- - - -

Editieren Sie unten im Input-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <a>-Element hinzu. Danach fügen sie das href-Attribut und das title-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem target-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im Output-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des title-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im href-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.

- -

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code3', 700, 300) }}

- -

Boolsche Attribute

- -

Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <input>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <input>-Feld wird ausgegraut und man kann keine Daten eingeben.

- -
<input type="text" disabled="disabled">
- -

Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)

- -
<input type="text" disabled>
-
-<input type="text">
-
- -

Beide werden Ihnen das folgende Resultat ausgeben:

- -

{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}

- -

Anfuehrungszeichen um Attributwerte weglassen

- -

Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das href-Attribut benutzen:

- -
<a href=https://www.mozilla.org/>Lieblingswebseite</a>
- -

Wenn wir aber das title-Attribut hinzufügen, dann funktioniert es so nicht mehr:

- -
<a href=https://www.mozilla.org/ title=Die Mozilla Webseite>Lieblingswebseite</a>
- -

An diesem Punkt wird der Browser diesen Code falsch lesen und in dem title-Attribut drei separate Attribute sehen: ein title-Attribut mit dem Wert "Die" und zwei Boolsche Attribute, Mozilla und Webseite. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.

- -

{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}

- -

Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.

- -

Einfache oder doppelte Anführungszeichen?

- -

In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:

- -
<a href="http://www.example.com">Ein Link als Beispiel.</a>
-
-<a href='http://www.example.com'>Ein Link als Beispiel.</a>
- -

Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!

- -
<a href="http://www.example.com'>Ein Link als Beispiel.</a>
- -

Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:

- -
<a href="http://www.example.com" title="Ist's nicht lustig?">Ein Link als Beispiel.</a>
- -

Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie HTML entities nutzen.

- -

Aufbau eines HTML-Dokumentes

- -

Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Meine Testseite</title>
-  </head>
-  <body>
-    <p>Dies ist meine Webseite.</p>
-  </body>
-</html>
- -

Hier haben wir:

- - - -

Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein

- -

Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:

- -
    -
  1. Kopieren Sie das obige HTML-Dokument.
    2. -
  2. Erstellen Sie eine neue leere Datei in Ihrem Texteditor.
    3. -
  3. Fügen Sie den Code in die leere Datei ein.
    4. -
  4. Speichern Sie die Datei unter dem Namen index.html.
    5. -
- -
-

Notiz: Sie können dieses HTML-Grundgerüst auch im MDN Learning Area Github repository finden.

-
- -

Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:

- -

A simple HTML page that says This is my pageDiese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:

- - - -

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

- - - -

{{ EmbedLiveSample('Playable_code4', 700, 600) }}

- -

Leerraum in HTML

- -

In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:

- -
<p>Hunde sind komisch.</p>
-
-<p>Hunde        sind
-         komisch.</p>
- -

Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist.  In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt.  Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.

- -

Zeichenreferenzen für Sonderzeichen

- -

In HTML sind die Zeichen <, >,",' und & spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?

- -

Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&) gestartet und mit einem Semikolon (;) beendet.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Ausgegebener CharacterZeichenreferenz
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
- -

In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:

- -
<p>In HTML definieren Sie einen Absatz mit dem <p>-Element.</p>
-
-<p>In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.</p>
- -

In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.

- -

{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}

- -
-

Notiz: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: List of XML and HTML character entity references.

-
- -

HTML Kommentare

- -

In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.

- -

Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <!-- und --> ein, zum Beispiel:

- -
<p>Ich bin nicht in einem Kommentar</p>
-
-<!-- <p>Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!</p> -->
- -

Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.

- -

{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}

- -

Zusammenfassung

- -

Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen!  An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!

- -
-

Notiz: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz CSS hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.

-
- -
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" deleted file mode 100644 index e2d3e9d636..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/marking_up_a_letter/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: Marking up a letter -slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter -tags: - - Anfänger - - Brief - - HTML - - Links - - Text - - head -translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
- -

Wir alle lernen früher oder später einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen! Sie erhalten einen Brief, mit dem Sie grundlegende und fortgeschrittene HTML-Formatierungsmöglichkeiten, einschließlich Hyperlinks, testen können und wir werden Ihre Vertrautheit mit einigen HTML <head> Inhalten testen.

- - - - - - - - - - - - -
Vorwissen:Bevor Sie diese Überprüfung durchführen, sollten Sie bereits Lernen Sie HTML kennen, Was gehört in den Kopf? Metadaten in HTML, Einfache Textformatierung mit HTML, Erstellen von Links, und Fortgeschrittene Textformatierung durchgearbeitet haben.
Ziel:Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML <head> gehört.
- -

Startpunkt

- -

Um diese Aufgaben zu starten, rufen Sie den Rohtext auf, den Sie strukturieren sollen, sowie die CSS, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die .html-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie JSBin oder Thimble, um die Aufgaben zu bearbeiten.)

- -

Projekt: Kurzbeschreibung

- -

In diesem Projekt ist Ihre Aufgabe, einen Brief zu gestalten, der in einem Universitäts-Intranet gehostet werden soll. Der Brief ist eine Antwort von einer Forschungskollegin an einen zukünftigen Doktoranden, der seine Arbeit an der Universität antritt.

- -

Block-/Struktursemantik:

- - - -

Semantik innerhalb des Textes:

- - - -

Der Kopf (head) des Dokumentes:

- - - -

Hinweise und Tipps

- - - -

Beispiel

- -

Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.

- -

Example

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

- -

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

- -

In diesem Modul

- - diff --git "a/files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" "b/files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" deleted file mode 100644 index fc439ad60b..0000000000 --- "a/files/de/learn/html/einf\303\274hrung_in_html/structuring_a_page_of_content/index.html" +++ /dev/null @@ -1,99 +0,0 @@ ---- -title: Structuring a page of content -slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content -translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
- -

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

- - - - - - - - - - - - -
Vorbereitungen:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Ziel: -

Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.

-
- -

Startpunkt

- -

Um diese Selbsteinschätzung zu starten, sollten Sie die ZIP-Datei mit allen Startinhalten herunterladen. Die ZIP-Datei enthält:

- - - -

Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wieJSBin oder Thimble , um den Test zu absolvieren.

- -

Projekt: Kurzbeschreibung

- -

Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:

- - - -

Sie müssen einen passenden Wrapper hinzufügen für:

- - - -

Sie sollten außerdem:

- - - -

Hinweise und Tipps

- - - -

Beispiel

- -

Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.

- -

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

- -

Einschätzung

- -

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

- -

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

- -

In this module

- - diff --git a/files/de/learn/html/forms/index.html b/files/de/learn/html/forms/index.html deleted file mode 100644 index b0d1e8eb58..0000000000 --- a/files/de/learn/html/forms/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: HTML forms -slug: Learn/HTML/Forms -tags: - - Anleitung - - Beginner - - Formular - - HTML - - Lernen - - Web -translation_of: Learn/Forms ---- -
{{LearnSidebar}}
- -

Dieser Abschnitt bietet eine Reihe von Artikeln, die Dir helfen werden, HTML-Formulare zu meistern. HTML-Formulare sind sehr mächtige Werkzeuge, um mit Nutzern zu interagieren — am häufigsten werden sie benutzt, um Daten von Nutzern zu erheben oder um ihnen zu erlauben, eine Benutzerschnittstelle zu bedienen. Auch ist klar, dass wegen historischen und technischen Gründen es nicht immer offensichtlich ist, wie man diese volkommen effektiv nutzt. In dieser Anleitung werden wir alle Aspekte der HTML-Formulare abdecken, einschließlich das Auszeichnen ihrer HTML-Struktur, das Styling von Formelementen, das Validieren von Formulardaten und das Senden von Daten an den Server.

- -

Voraussetzungen

- -

Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere Einführung in HTML durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer Nativen-Formular-Komponenten-Anleitung zu machen.

- -

Das Meistern von Formularen benötigt allerdings mehr als nur HTML-Kenntnisse — Du wirst auch einige spezielle Techniken zum Stylen von Formular-Komponenten lernen müssen. Daneben ist ein wenig Scripting-Wissen erforderliche, um Dinge wie Validierung und das erstellen eigener Formular-Komponenten zu erledigen. Daher würden wir empfehlen, dass du diese Seite zunächst verlässt, um ein wenig CSS und JavaScript zu erlernen und danndie anderen Abschnitte durchliest.

- -

Der obenstehende Text ist ein guter Indikator, warum wir Web-Formulare in ein eigenständiges Modul gepackt haben anstatt Teile davon in die HTML, CSS, und JavaScript Themengebiete zu legen — Formularelemente sind komplexer als die meisten anderen HTML-Elemente und benötigen dazu eine enge Verbindung von CSS- und JavaScript-Techniken, um das meiste aus ihnen herauszuholen.

- -
-

Notiz: Wenn du auf einem Computer/Tablet/anderem Gerät arbeitest, wo du nicht die Möglichkeit hast, eigene Dateien zu erstellen, kannst du (die meisten) Code-Beispiele in einem Online-Coding-Programm, wie JSBin oder Glitch nutzen.

-
- -

Grundlagen

- -
-
Dein erstes HTML-Formular
-
- -
-
Der erste Artikel in unserer Reihe bietet Dir deine erste Erfarung, ein HTML-Formular zu erstellen, was das einfache Designen eines Formulars, Einbinden mit den richtigen HTML-Element, dezentes Styling mit CSS und Weitergabe der Daten zu einem Server mit einschließt.
-
Wie man ein HTML-Formular strukturiert
-
Nach dem Abhandeln der Grundlagen, können wir jetzt mehr detalliert in die Elemente, die Struktur bieten, hereingucken und die Bedeutung verschiedener Teile des Formulars verstehen.
-
- -

Die verschiedenen Formular-Komponeneten

- -
-
Die nativen Formular-Komponenten
-
Wir gucken jetzt auf die Funktionalität der verschiedenen {{htmlelement("input")}} Formular-Komponenten im Detail - Welche Optionen verfügbar sind, um verschiedene Dateitypen zu sammeln.
-
Die HTML5 Eingabetypen
-
Hier setzen wir unsere Vertiefung in das <input>-Element fort, schauen auf die verschiedenen zusätzlichen input-Typen, die mit der Veröffentlichung von HTML5 bereitgestellt wurden und die verschiedenen UI-Komponenten und die Verbesserung der Datenerhebung, welche sie ermöglichen. Zusätzlich schauen wir uns das {{htmlelement('output')}}-Element an.
-
Andere Formular-Komponentent
-
Next we take a look at all the non-<input> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.
-
- -

Form styling guides

- -
-
Stylen von Web-Formularen
-
Dieser Artikel stellt eine Einführung in das Stylen von Formularen mit CSS bereit. Er beinhaltet Grundlagen, die Du vielleicht für einfache Styling-Aufgaben benötigen wirst.
-
Fortgeschrittenes Stylen von Formularen
-
Hier schauen wir uns einige fortgeschrittene Techniken zum Stylen von Formularen an, die benötigt werden, sobald einige der schwieriger zu stylende Formular-Elemente gehandhabt werden sollen.
-
UI pseudo-Klassen
-
Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.
-
- -

Prüfen und Abschicken von Daten

- -
-
Clientseitige Formulardaten-Validation
-
Das Senden von Daten ist noch nicht genug - wir müssen auch prüfen, ob die Daten, die der Nutzer eingegeben hat, im korrektem Format sind, um sie erfolgreich verarbeiten zu können und diese unserer Anwendung nicht zerstören. Wir möchten dem Nutzer beim Ausfüllen der Daten helfen, und ihn nicht frustrieren, wenn er versucht unsere Anwendung zu nutzen. Formular-Validation hilft uns, diiese Ziele zu erreichen - Dieser Artikel erklärt Dir alles, was du wissen musst.
-
Das Senden von Daten
-
Dieser Artikel zeigt, was passiert, wenn ein Benutzer ein Formular abschickt — wohin gehen die Daten und wie werden diese genutzt, wenn diese dort angekommen sind? Wir gucken ebenfalls auf ein paar Sicherheitsbedenken, die mit dem Senden von Daten verbunden sind.
-
- -

Weiterführende Anleitungen

- -

Die nachfolgenden Artikel sind nicht zwingend notwendig für den Lernpfad, aber sie erweisen sich als interessant und nützlich, wenn Du die obenstehenden Techniken gemeistert hast und mehr lernen möchtest.

- -
-
Wie man eigene Formular-Komponenten baut
-
Du wirst über ein paar Fälle stoßen, wo die nativen Formuar-Komponenten nicht das bieten, was Du brauchst, wie zum Beispiel aus Styling-Gründen oder Funktionalität. In diesen Fällen musst Du eventuell Deine eigenen Formular-Komponenten aus purem HTML bauen. Dieser Artikel erklärt, wie Du dies tun kannst und welchen Überlegungen Du Dir im Klaren sein musst - mit einem praktischen Fall-Beispiel.
-
Senden von Formularen mit JavaScript
-
Dieser Artikel betrachtet Möglichkeiten, wie ein Formular genutzt werden kann, um eine HTTP-Anfrage zu erstellen und diese mit JavaScript versandt werden kann statt dem üblichen Formularversand. Es schaut auch auf die Gründe, warum Du dies machen wolltest und die Folgen davon. (Siehe auch Using FormData objects.)
-
HTML-Formulare in veralteten Browsern
-
Dieser Artikel beinhaltet das Erkennen von Features usw. Er sollte zum Artikel über das Testen von plattformunabhängigen Features umleiten, da der selbe Inhalt dort besser erklärt wird.
-
- -

Siehe auch

- - diff --git a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..1075d63f66 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,466 @@ +--- +title: Fortgeschrittene Textformatierung +slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung +tags: + - Abkürzungen + - Beginner + - Beschreibungslisten + - Guide + - HTML + - Lernen + - Textformatierung + - Zitate +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
+ +

Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel Einfache Textformatierung mit HTML abgedeckt haben. Die HTML-Elemente welche in diesem Artikel vorgestellt werden, werden nicht so oft benötigt. Es ist aber hilfreich diese zu kennen. Sie werden hier lernen wie man Zitate, Beschreibende Listen, Code und ähnliche Texte, sowie tiefer oder höher gestellte Zeichen ausgibt und noch mehr.

+ + + + + + + + + + + + +
Vorwissen:Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln Lernen Sie HTML kennen und Einfache Textformatierung mit HTML abgedeckt werden.
Ziel:Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.
+ +

<dl> - Beschreibungslisten

+ +

In Einführung in Textformatierung mit HTML haben wir Ihnen gezeigt, wie man einfache geordnete und ungeordnete Listen erstellt. Es gibt aber noch einen dritten Typ Listen, der nicht so oft Verwendung findet. Es handelt sich um Beschreibungslisten (engl.: "description lists"). Mit dem dl-Element lässt sich eine Liste von Begriffen (list term) lt erstellen, welchen eine Beschreibung (engl. "description") dd hinzugefügt wird. Diese Art von Liste ist z.B. in Wörterbüchern zu finden, wo es zu einem bestimmten Begriff eine längere Beschreibung gibt. Lassen Sie uns in einem Beispiel anschauen, wie so eine beschreibende Liste genau aufgebaut ist. Hier haben wir eine noch unformatierte Liste, welche wir in eine Beschreibungsliste umwandeln wollen:

+ +
Innerer Monolog
+Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
+Monolog
+Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
+Beiseitesprechen
+Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
+ +

Beschreibungslisten werden vom {{htmlelement("dl")}};-Element eingeschlossen. Jeder Begriff ist in ein {{htmlelement("dt")}}-Element eingebettet, während die dazugehörige Beschreibung danach in einem {{htmlelement("dd")}}-Element hinzugefügt wird. Das sieht dann wie folgt aus:

+ +
<dl>
+  <dt>Innerer Monolog</dt>
+  <dd>Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.</dd>
+  <dt>Monolog</dt>
+  <dd>Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.</dd>
+  <dt>Beiseitesprechen</dt>
+  <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd>
+</dl>
+ +

Browser stellen die Beschreibungen zu den Begriffen in den Beschreibungslisten normalerweise eingerückt dar. Hier auf MDN werden die Begriffe zusätzlich noch fett hervorgehoben.

+ +
+
Innerer Monolog
+
Der innere Monolog ist eine Form des Erzählens und wird oft zur Vermittlung von Gedankenvorgängen gebraucht.
+
Monolog
+
Der Monolog (gr. μόνος mónos „allein“ und -log; lat. Soliloquium) ist im Gegensatz zum Dialog ein Selbstgespräch und findet vor allem im Drama Verwendung.
+
Beiseitesprechen
+
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters. Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
+
+ +

Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:

+ +
+
Beiseitesprechen
+
Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.
+
Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.
+
+ +

Aktives Lernen: Eine Beschreibungsliste erstellen

+ +

Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im Input-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im Output-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.

+ +

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code_1', 700, 500) }}

+ +

Zitate

+ +

Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.

+ +
+

Hinweis: Zitat kann ins Englische sowohl als "quote" als auch als "citation" übersetzt werden. Beide englischen Wörter werden in HTML parallel genutzt, als "quote" für blockquote und q und die Abkürzung für "citation" cite.

+
+ +

<blockquote> - Blockzitate

+ +

Um ein Blockzitat (engl.: "blockquote") zu erstellen benutzen Sie das {{htmlelement("blockquote")}}-Element. Damit können Sie auf Blockebene ein Zitat erstellen, welches z.B. einen ganzen Absatz, eine Liste oder ähnliches enthält. Sie können mit einer URL auf die Quelle des Zitates verlinken, nutzen Sie dafür das {{htmlattrxref("cite","blockquote")}}-Attribut. Als Beispiel zeigen wir ein Blockzitat von der MDN-Seite über das <blockquote>-Element:

+ +
<p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
+ +

Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:

+ +
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p>Das <strong>HTML <code><blockquote></code> Element</strong> (oder <em>HTML Block Quotation Element</em>) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.</p>
+</blockquote>
+ +

Browsers werden ein Blockzitat standardmäßig einrücken, um es als Zitat zu kennezichnen. Hier auf MDN macht es das auch, aber der Stil wurde noch etwas mehr verändert:

+ +
+

Das HTML <blockquote> Element (oder HTML Block Quotation Element) gibt an, dass der eingeschlossene Text ein erweiterndes Zitat ist.

+
+ +

<q> - Inline Zitate

+ +

Inline Zitate (Zitat = engl.: "quote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <q>-Seite:

+ +
<p>Das Zitat-Element — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q"> indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p>
+ +

Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:

+ +

Das Zitat-Element — <q> — indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.

+ +

<cite> - Quellenangabe

+ +

Der Inhalt des {{htmlattrxref("cite","blockquote")}}-Attributs scheint hilfreich zu sein, leider ist es aber so das Browser, Bildschirmlesegeräte und dergleichen nicht viel damit machen können. Es gibt keinen Weg den Inhalt des cite-Attributs anzuzeigen, ohne eine eigene Lösung mittels JavaScript oder CSS zu schreiben. Wenn Sie die Quelle für den Leser zugägnlich machen wollen, dann benutzen Sie besser das {{htmlelement("cite")}}-Element. Eigentlich sollte darin der Name der zitierten Quelle stehen - also der Name des Buches oder der Person - aber es gibt keinen Grund warum man nicht einen Link hier einfügen kann. Das sieht dann so aus:

+ +
<p>Auf der <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
+<cite>MDN blockquote-Seite</cite></a> steht:
+</p>
+
+<blockquote cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/blockquote">
+  <p>Das <strong>HTML <code>&lt;blockquote&gt;</code>-Element</strong> (oder <em>HTML Block
+  Quotation Element</em>) indiziert, dass es sich bei dem eingeschlossenen Text um ein erweitertes Blockzitat handelt.</p>
+</blockquote>
+
+<p>Das <code>&lt;q&gt;</code>-Element — ist <q cite="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.
+Das <code>&lt;q&gt;</code>-Element -- <a href="https://developer.mozilla.org/de/docs/Web/HTML/Element/q">
+<cite>MDN q Seite</cite></a>.</p>
+ +

Die cite-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als quotations.html Beispiel anschauen.

+ +

Aktives lernen: Wer hat das gesagt?

+ +

Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:

+ +
    +
  1. Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein cite-Attribut besitzt.
    2. +
  2. Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein cite-Attribut besitzt.
    3. +
  3. Fügen Sie jedem Link ein <cite>-Element hinzu.
    4. +
+ +

Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.

+ +

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 500) }}

+ +

<abbr> - Abkürzungen

+ +

Ein weiteres Element, welches man öfters auf Webseiten findet ist {{htmlelement("abbr")}}. Es wird genutzt, um Abkürzungen zu kennzeichnen und die volle Schreibweise der Abkürzung zur Verfügung zu stellen. Die volle Schreibweise wird in dem Element als {{htmlattrxref("title")}}-Attribut angegeben. Hier ein paar Beispiele:

+ +
<p>Wir benutzen <abbr title="Hypertext Markup Language">HTML</abbr>, um ein Webdokument zu strukturieren.</p>
+
+<p>Ich denke <abbr title="Doktor">Dr.</abbr> Green war in der Küche mit der Kettensäge.</p>
+ +

Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):

+ +

Wir nutzen HTML, um ein Webdokument zu strukturieren.

+ +

Ich denke Dr. Green war in der Küche mit der Kettensäge.

+ +
+

Hinweis: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <abbr>, nur das es Acronyme kennzeichnen sollte. Es wird aber kaum genutzt und von Browsern wird es nicht so gut unterstüzt. Es ist also besser nur noch <abbr> zu nutzen.

+
+ +

Aktives lernen: Eine Abkürzung kennzeichnen

+ +

In dieser kleinen Lernübung, möchten wir, das Sie eine Abkürzung als solche Kennzeichnen. Sie können das Beispiel unten benutzen oder es durch ein eigenes ersetzen.

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 350) }}

+ +

Kontaktdaten markieren

+ +

HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:

+ +
<address>
+  <p>Chris Mills, Manchester, The Grim North, UK</p>
+</address>
+ +

Eine Sache die man sich merken sollte ist, dass das <address>-Element dafür gedacht ist, die Kontaktdaten der Person zu markieren, welche den HTML-Code geschrieben hat, nicht irgendeine Adresse. Das obige Beispiel wäre nur ok, wenn Chris tatsächlich das Dokument geschrieben hat, in dem die Adresse zu finden ist. Das folgende wäre aber auch in Ordnung:

+ +
<address>
+  <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p>
+</address>
+ +

Hochstellen und tiefstellen von Text

+ +

Manchmal brauchen sie hochgestellten oder tiefgestellten Text. Für hochgestellten Text (engl.: superscript) gibt es das HTML-Element {{htmlelement("sup")}}. Für tiefergestellten Text (engl.: subscript) gibt es das Element {{htmlelement("sub")}}. Beispiel:

+ +
<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
+<p>Die chemische Formel von Koffein ist C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Wenn x<sup>2</sup> gleich 9 ist, dann muss x gleich 3 oder -3 sein.</p>
+ +

Der Code wird wie folgt gerendert:

+ +

My birthday is on the 25th of May 2001.

+ +

Die chemische Formel von Koffein ist C8H10N4O2.

+ +

Wenn x2 gleich 9 ist, dann muss x gleich 3 oder -3 sein.

+ +

Computercode darstellen

+ +

Es gibt ein paar Elemente mit denen man Computercode darstellen kann:

+ + + +

Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen other-semantics.html):

+ +
<pre><code>var para = document.querySelector('p');
+
+para.onclick = function() {
+  alert('Au, hör auf mich zu drücken!!');
+}</code></pre>
+
+<p>Sie sollten nicht zu repräsentative Elemente benutzen, wie <code>&lt;font&gt;</code> und <code>&lt;center&gt;</code>.</p>
+
+<p>In dem obigen JavaScript Beispiel, repräsentiert <var>para</var> ein p-Element.</p>
+
+
+<p>Markieren Sie den ganzen Text mit <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
+
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+ +

Der obige Code sollte im Browser folgendermaßen aussehen:

+ +

{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}

+ +

Zeit und Datum markieren

+ +

HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:

+ +
<time datetime="2016-01-20">20 Januar 2016</time>
+ +

Wieso ist das nützlich? Deswegen, weil Menschen auf viele verschiedene Weisen ein Datum wiedergeben. Das obige Datum könnte auch wie folgt geschrieben sein:

+ + + +

Ein Computer kann nicht so einfach erkennen, das immer das selber Datum gemeint ist. Wenn man also automatisch alle Datumsangaben von einer Webseite erfassen möchte, um diese zum Beispiel in einem Kalender zu nutzen, dann braucht man eine einheiltiche Schreibweise für den Computer. Mit dem {{htmlelement("time")}}-Element können Sie an eine beliebige Datumsschreibweise, eine einfache, für den Computer lesbare Form anhängen.

+ +

Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:

+ +
<!-- Jahr-Monat-Tag -->
+<time datetime="2016-01-20">20 Januar 2016</time>
+<!-- Nur Jahr und Monat -->
+<time datetime="2016-01">January 2016</time>
+<!-- Nur Monat und Tag -->
+<time datetime="01-20">20 January</time>
+<!-- Nur die Zeit, Stunden:Minuten -->
+<time datetime="19:30">19:30</time>
+<!-- Man kann auch Sekunden und Millisekunden angeben! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Datum und Uhrzeit -->
+<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
+<!-- Datum und Uhrzeit mit Zeitzone -->
+<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</time>
+<!-- Eine bestimmte Wochennummer angeben-->
+<time datetime="2016-W04">Die vierte Woche im Jahr 2016</time>
+ +

Zusammenfassung

+ +

Dies ist alles, was Sie über Textstrukturierung in HTML wissen müssen. Es gibt ntürlich noch mehr HTML-Elemente für die Darstellung und Strukturierung von Texten, aber die gebräuchlisten haben wir nun in diesem Kurs abgedeckt. Falls Sie dennoch daran interessiert sind wirklich alle Elemente zur Textgestlaltung kennen zu lernen, dann schauen Sie in unserer HTML-Element Referenz nach, denn dort sind alle HTML-Elemente aufgelistet.
+ Im nächsten Artikel geht es darum, Struktur in unser ganzes HTML-Dokument zu bringen, wie man verschiedene Bereiche einer Webseite bestimmt und diese ausrichtet. Lesen Sie weiter!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..d27bf253a4 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,317 @@ +--- +title: Erstellen von Hyperlinks +slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks +tags: + - Beginner + - Guide + - HTML + - Learn + - Links + - Title + - absolute + - hyperlinks + - relativ + - urls +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
+ +

Hyperlinks, kurz Links, sind ein wichtiger Teil des Internets, denn sie machen erst ein Netzwerk daraus. In diesem Artikel zeigen wir Ihnen wie man einen Link erstellt und stellen benutzerfreundliche Anwendungsbeispiele vor.

+ + + + + + + + + + + + +
Vorwissen:Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln Lerne HTML kennen und Einfache Textformattierung mit HTML abgedeckt werden.
Ziel:Lernen wie man sinnvoll Hyperlinks einsetzt.
+ + + +

Hyperlinks sind eine der Erfindungen, welche das Internet zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "web") und definieren dieses, indem sie uns erlauben von einem Dokument auf ein anderes Dokument (oder eine andere Quelle) zu verweisen. Auch auf bestimmte Inhalte einer Webseite kann direkt verlinkt werden, genauso wie auch auf Apps per Hyperlink verwiesen werden kann. Fast alles im Internet kann zu einem Link konvertiert werden und mit diesem kann die entsprechende Web-Adresse ({{glossary("URL")}}) im Internet von einem Browser gefunden werden.

+ +
+

Hinweis: Eine URL kann auf HTML-Dateien, Textdateien, Bilder, Dokumente, Video- oder Audiodateien verweisen und auf alles andere, was im Internet präsentiert werden kann. Wenn der Browser nicht weiß, wie er mit einer Datei umgehen soll, fragt er nach, ob die Datei geöffnet werden soll, wodurch das öffnen der Datei an ein anderes Programm auf dem Computer abgegeben wird, oder ob sie herunter geladen werden soll, damit man später diese Datei lokal nutzen kann.

+
+ +

Die Webseite von BBC enthält zum Beispiel eine große Anzahl an Links, welche auf verschiedene Nachrichtenartikel verweisen, aber auch zu verschiedenen Bereichen der Website (Navigation), Login/Registrations-Seiten (für Benutzeraccounts) und mehr.

+ +

frontpage of bbc.co.uk, showing many news items, and navigation menu functionality

+ + + +

Ein Link wird ganz einfach erstellt indem man Text, oder auch andere Inhalte, in ein {{htmlelement("a")}}-Element verschachtelt. Diesem Element muss auch noch das {{htmlattrxref("href", "a")}}-Attribut beigefügt werden, welches als Wert die Ziel-Webadresse enthält auf die man verweisen möchte.

+ +
<p>Ich erstelle einen Link zu der
+<a href="https://www.mozilla.org/en-US/"> Mozilla Webseite</a>.
+</p>
+ +

Dies gibt das folgende Resultat:

+ +

Ich erstelle einen Link zu der Mozilla Webseite.

+ +

Das title-Attribut

+ +

Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist title. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:

+ +
<p>Ich erstelle einen Link zu der
+<a href="https://www.mozilla.org/en-US/"
+   title="Der beste Ort um mehr über Mozilla zu lernen und wie jeder dazu beitragen kann">Mozilla Webseite</a>.
+</p>
+ +

Das gibt das folgende Resultat (der Text aus dem >title<-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):

+ +

Ich erstelle einen Link zu der Mozilla Webseite.

+ +
+

Hinweis: Der Text aus dem >title<-Attribut wird nur durch den Mauszeiger angezeigt, was bedeutet, das Leute die nur die Tastatur benutzen oder Tablet/Smartphone Benutzer, diese Information nicht angezeigt bekommen. Wenn es sich also um eine wichtige Information handelt, wäre es wohl besser diese im normalen Text unterzubringen.

+
+ + + +

Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (das Dokument könnte so aussehen)

+ + + + + +

Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch Blockelemente könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <a></a> Tags einbetten.

+ +
<a href="https://www.mozilla.org/de/">
+  <img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"></a>
+
+ +

Hinweis: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.

+ +

Kurzer Exkurs zu URLs und Linkpfaden

+ +

Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.

+ +

Eine URL (engl.: Uniform Resource Locator) ist einfach ein String aus Text der definiert wo etwas im Internet zu finden ist. Zum Beispiel ist Mozillas deutsche Webseite unter https://www.mozilla.org/de/ zu finden.

+ +

URLs benutzen Dateipfade um Dateien zu finden. Diese Pfade geben an, wo in einem Dateisystem eine bestimmte Datei abgelegt ist. Lassen Sie uns ein einfaches Beispiel einer Dateistruktur anschauen (schauen Sie die Struktur von Erstellen von Hyperlinks an).

+ +

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

+ +

Das Stammverzeichnis, englisch root (=> Wurzel), dieses Verzeichnisses wurde creating-hyperlinks benannt. Wenn Sie lokal an einer Webseite arbeiten, dann haben Sie ein Verzeichnis (einen Ordner), in dem die ganzen Dateien für diese Webseite abgelegt sind. In diesem Stammverzeichnis hier haben wir eine index.html und eine contacts.html-Datei. Auf einer echten Webseite wäre index.html die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.

+ +

Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens pdfs und projects. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (project-brief.pdf) und eine index.html-Datei. Sie sehen, man kann mehrere index.html-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite index.html-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.

+ + + +
+

Hinweis: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel ../../../komplexer/pfad/zu/meiner/datei.html.

+
+ +

Innerhalb eines Dokuments verlinken

+ +

Es ist möglich innerhalb eines HTML Dokumentes zu einem bestimmten Abschnitt einen Link zu setzen und nicht nur zu dem Dokument selbst. Um dies zu bewerkselligen, müssen Sie erst dem HTML-Element, welches Sie als Linkziel benutzen wollen, ein {{htmlattrxref("id")}}-Attribut geben. +Oft macht es Sinn zu einer bestimmten Überschrift im Dokument zu verlinken. In der Praxis würde das wie folgt aussehen: +

+ +
<h2 id="postanschrift">Postanschrift</h2>
+ +

Um zu dieser bestimmten id zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:

+ +
<p>Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere  <a href="contacts.html#postanschrift">Postanschrift</a>.</p>
+ +

Sie können diese Art der Referenz auch benutzen, um innerhalb des selben Dokumentes zu verlinken:

+ +
<p>Unsere <a href="#postanschrift">Postanschrift</a> kann am Ende der Webseite gefunden werden. </p>
+ +

Absolute und relative URLs

+ +

Zwei Begriffe denen Sie im Internet begegnen werden sind absolute URL und relative URL:

+ +

Absolute URL: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei index.html in ein Verzeichnis namens projects hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite http://www.example.com ist, dann lautet die absolute Adresse der Webseite http://www.example.com/projects/index.html.

+ +

Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.

+ +

Relative URL: Zeigt zu einem Verzeichnis realtiv zu der Datei, in welcher der Link steht, so wie wir es weiter oben im Artikel gemacht haben. Wenn wir zum Beispiel von der Datei http://www.example.com/projects/index.html zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: project-brief.pdf). Wenn diese PDF-Datei in dem Unterverzeichnis pdfs liegt, welches wiederum in dem Verzeichnis projects zu finden ist, dann würde die relative Adresse wie folgt aussehen: pdfs/project-brief.pdf. Die äquivalente absolute Adresse für die PDF-Datei wäre http://www.example.com/projects/pdfs/project-brief.pdf.

+ +

Eine relative URL zeigt auf unterschiedliche Orte, je nachdem wo sich die Datei befindet, in welcher der Link untergebracht ist. Wenn wir zum Beispiel unsere index.html-Datei aus dem projects Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL pdfs/project-brief.pdf darin auf http://www.example.com/pdfs/project-brief.pdf verweisen und nicht mehr auf http://www.example.com/projects/pdfs/project-brief.pdf +

+ + + +

Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.

+ + + + +

Es ist einfach ein paar Links auf eine Webseite zu setzen. Aber das ist nicht genug. Wir müssen dafür sorgen, das alle Benutzer der Webseite diese Links auch benutzen können, egal mit welchem Gerät sie auf die Seite zugreifen. Zum Nachdenken:

+ + + +

Schauen wir uns ein Beispiel an:

+ +

Guter Linktext: Firefox herunterladen

+ +
<p><a href="https://firefox.com/">
+  Firefox herunterladen
+</a></p>
+ +

Schlechter Linktext: Klicke hier um Firefox herunterzuladen

+ +
<p><a href="https://firefox.com/">
+  Klicke hier
+</a>
+um Firefox herunterzuladen</p>
+
+ +

Weitere Tipps:

+ + + + + +

Von einem vorangehenden Absatz bekommen Sie vielleich die Idee, dass es gut ist, nur absolute Links zu verwenden, da diese nicht zu toten Links werden können, wenn die Webseite verschoben wird, im Gegensatz zu relativen Links. Es ist aber besser relative Links zu benutzen, wenn Sie innerhalb der selben Webseite verlinken. Um eine andere Webseite zu verlinken müssen Sie natürlich absolute Links benutzen.

+ + + +

Klare Verlinkung zu Dateien die keine HTML-Dateien sind

+ +

Wenn Sie zu etwas anderem als einer anderen Webseite verlinken, zum Beispiel einer herunterladbaren Datei (ein PDF oder ein Word-Dokument) oder einem Stream (Video oder Audio) oder ähnlichem, welches unerwartete Effekte hat, wie PopUp-Fenster oder Flash-Animationen, dann sollten Sie das im Linktext deutlich kennzeichnen. Es kann nämlich sehr nervend sein, wenn folgendes passiert:

+ + + +

Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:

+ +
<p><a href="http://www.example.com/large-report.pdf">
+  Laden Sie den Verkaufsbericht herunter (PDF, 10MB)
+</a></p>
+
+<p><a href="http://www.example.com/video-stream/">
+  Schauen Sie sich das Video an (Stream öffnet in einem separaten Fenster, HD Qualität)
+</a></p>
+
+<p><a href="http://www.example.com/car-game">
+  Spielen Sie das Autospiel (benötigt Flash)
+</a></p>
+ +

Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken

+ +

Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das download-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:

+ +
<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
+  Firefox 39 für Windows herunterladen
+</a>
+ +

Aktives Lernen: Erstellen Sie ein Navigationsmenu

+ +

In dieser Übung sollen Sie einige Einzelseiten so verlinken, das Sie am Ende eine Webseite mit mehreren Seiten haben, die über ein Navigationsmenü erreicht werden können. Diese Art der Navigation finden Sie auf vielen Webseiten. Die selbe Webseitenstruktur wird auf allen Seiten genutzt, um ein einheitliches Bild einer Webpräsenz zu geben. Wenn Sie auf die Links in der Navigation klicken, scheint sich nur der Inhalt der Webseiten zu verändern, nicht die ganze Seite.

+ +

Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter navigation-menu-start die Liste der benötigten Dateien im Verzeichnis):

+ + + +

Aufgaben:

+ +
    +
  1. Fügen Sie eine ungeordnete Liste an dem angezeigten Platz in einer der Dateien ein. Diese Liste soll alle Namen der zu verlinkenden Seiten beinhalten. Ein Navigationsmenü ist tatsächlich nur eine Liste von Links, semantisch ist dies also der richtige Weg eine Navigation zu erstellen.
    2. +
  2. Verändern Sie jeden Seitennamen in einen Link.
    3. +
  3. Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein.
    4. +
  4. Auf jeder einzelnen Seite löschen Sie den Link zu der Seite selbst. Es ist sinnlos auf einer Seite einen Link zu sich selbst zu beinhalten. Dazu dient der visuelle Unterschied als Indikator, auf welcher Seite man sich gerade befindet.
    5. +
+ +

Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:

+ +

An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items

+ +
+

Hinweis: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: navigation-menu-marked-up

+
+ + + +

Es ist möglich Links oder Buttons zu erstellen, die wenn man Sie anklickt, eine neue ausgehende E-Mail Nachricht öffnen, anstatt zu einer Webseite oder einer anderen Datei zu verlinken. Das wirt bewerkstelligt indem man das {{HTMLElement("a")}}-Element zusammen mit dem mailto: URL Schema benutzt.

+ +

In seiner einfachsten und am meisten genutzten Form, gibt ein mailto: Link einfach nur die E-Mail Adresse des Empfängers an. Beispiel:

+ +
<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>
+
+ +

Damit erstellen Sie einen Link der folgendermaßen aussieht: +Senden Sie eine E-Mail an Niemand.

+ +

Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur mailto: schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um Teilen-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.

+ +

Details angeben

+ +

Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über mailto vorausgefüllt werden, dazu gehören subject (Betreff), cc und body (Um eine vorgegeben Nachricht anzuzeigen).

+ +

Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:

+ +
<a href="mailto:niemand@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=Der%20Betreff%20von%20der%20Email &amp;body=Die%20Nachricht%20in%20der%20Email">
+  Senden Sie eine E-Mail mit cc, bcc, subject and body
+</a>
+ +
+

Hinweis: Die Werte der Felder müssen URL gerecht geschrieben sein, dass heißt mit speziellen Charakteren anstatt Leerzeichen, Umlauten und Sonderzeichen. Bemerken Sie auch die Verwendung des Fragezeichens (?), um die eigentliche URL von den Feldwerten abzugrenzen und das Und-Zeichen (&), um die Feldwerte voneinander zu trennen. Dies ist Standard URL-Query Notation. Sie werden mehr darüber in einem fortgeschrittenen Modul lernen.

+
+ +

Hier sind noch ein paar Beispiele für mailto URLs:

+ + + +

Zusammenfassung

+ +

Jetzt haben Sie schon sehr viel über Hyperlinks gelernt! Wir werden uns später im Kurs noch einmal mit ihnen beschäftigen, wenn es darum geht, Links zu gestalten. Als nächstes schauen wir uns noch ein paar HTML-Elemente an, mit denen Text formatiert und semantisch dargestellt werden kann. Um Fortgeschrittene Textformatierung geht es im nächsten Artikel.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/debugging_html/index.html b/files/de/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..3e3223016e --- /dev/null +++ b/files/de/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,197 @@ +--- +title: Fehlersuche in HTML +slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML +tags: + - Anfänger + - Beginner + - Debugging + - Guide + - HTML + - Validation + - validator +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.

+ + + + + + + + + + + + +
Vorwissen: +

Grundkenntnisse in HTML, wie sie in den Artikeln Lernen Sie HTML kennen, Einfache Textformatierung mit HTML und Erstellen von Links abgedeckt werden.

+
Ziel: +

Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.

+
+ +

Keine Angst vor der Fehlersuche

+ +

Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache Rust, ausgegeben wurde.

+ +

A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string. "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich println!(Hello, world!"); anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.

+ +

Begriffserklärungen Fehlerbehebung

+ +

Im Computerbereich wurden viele Begriffe aus dem Englischen übernommen, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch Debugging genannt. Der Fehler im Code wird im Englischen als Bug bezeichnet, was soviel wie Ungeziefer bedeutet. Das Debugging ist dann das Entfernen des Ungeziefers Als Debugger wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.

+ +

Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.

+ +

HTML und Debugging

+ +

Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr permissiv. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.

+ +

Permissiver Code

+ +

Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:

+ + + +

HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.

+ +
+

Hinweis: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.

+
+ +

Aktives Lernen: Permissiven Code untersuchen

+ +

Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.

+ +
    +
  1. Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: debug-example demo In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.
    2. +
  2. Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes.
    3. +
  3. Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an: + 
    <h1>HTML debugging examples</h1>
+
+<p>What causes errors in HTML?
+
+<ul>
+  <li>Unclosed elements: If an element is <strong>not closed properly,
+      then its effect can spread to areas you didn't intend
+
+  <li>Badly nested elements: Nesting elements properly is also very important
+      for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+      what is this?</em>
+
+  <li>Unclosed attributes: Another common source of HTML problems. Let's
+      look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+      homepage</a>
+</ul>
    +
    4. +
  4. Lassen Sie uns die Probleme erläutern: +
      +
    • Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.
      • +
    • Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.
      • +
    • Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <strong>strong <em>strong emphasised?</strong> what is this?</em>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.
      • +
    • Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.
      • +
    +
    5. +
  5. Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: Entdecken Sie die Web Developer Tools
    6. +
  6. In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.
    7. +
  7. Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser sollten zu dem selben Resultat kommen.): +
      +
    • Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.
      • +
    • Es ist nicht klar, wo das erste <strong>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <strong>-Tag versehen, bis zum Ende des Dokumentes!
      • +
    • Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst: + 
      <strong>strong
+  <em>strong emphasised?</em>
+</strong>
+<em> what is this?</em>
      +
      • +
    • Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus: + 
      <li>
+  <strong>Unclosed attributes: Another common source of HTML problems.
+  Let's look at an example: </strong>
+</li>
      +
      • +
    +
    8. +
+ +

HTML Validation

+ +

Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?

+ +

Die beste Strategie ist es, das HTML-Dokument von dem Markup Validation Service überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.

+ +

The HTML validator homepage

+ +

Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen

+ +

Aktives lernen: Validieren eines HTML-Dokumentes

+ +

Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem Beispieldokument hier.

+ +
    +
  1. Öffnen Sie als Erstes den Markup Validation Service in einem anderen Browser-Tab.
    2. +
  2. Gehen Sie zu dem Validate by Direct Input Tab. Dort kann man direkt HTML-Code überprüfen.
    3. +
  3. Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.
    4. +
  4. Klicken Sie auf Check.
    5. +
+ +

Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.

+ +

A list of of HTML validation results from the W3C markup validation service

+ +

Die Fehlermeldungen richtig interpretieren

+ +

Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.

+ + + +

Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein.

+ +

Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner:

+ +

Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."

+ +

Zusammenfassung

+ +

Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.

+ +

Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: Aufgabe: Formatieren eines Briefes

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

 

+ +

In this module

+ + + +

 

diff --git a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..7b9ce1bae8 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,292 @@ +--- +title: Struktur in die Webseite bringen +slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure +tags: + - Beginner + - Guide + - HTML + - Layout + - Planung + - Sitemap + - Struktur +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

{{glossary("HTML")}} ist auch dafür da, größere Strukturen, wie einen Kopfbereich, ein Navigationsmenü oder den Bereich für den Hauptinhalt auf einer Webseite festzulegen. In diesem Artikel schauen wir uns an, wie man den Aufbau einer Webseite plant und mit Hilfe von HTML repräsentiert.

+ + + + + + + + + + + + +
Vorwissen:HTML-Grundlagen, wie sie in Lernen Sie HTML kennen abgedeckt werden. HTML Textformatierung, wie in Einfache Textformatierung in HTML abgedeckt wird. Wie Links funktionieren, wie im Artikel Links erstellen beschrieben wird.
Ziel:Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.
+ +

Bereiche einer Webseite

+ +

Webseiten können sehr unterschiedlich aussehen, doch die meisten haben ähnliche Komponenten, aus welchen sie aufgebaut sind. Diese Komponenten sieht man auf den meisten Webseiten, bei denen es sich nicht um Video-, Spielewebseiten oder Kunstprojekte handelt. Diese Komponenten bringen eine gute Struktur in jede Webseite:

+ +
+
header - Kopfbereich
+
Normalerweise ist dies ein breiter Streifen ganz oben auf der Website, in dem eine Überschrift zusammen mit einem Logo untergebracht sind. So sieht man jederzeit auf welcher Website man sich befindet, der header bleibt auf allen Unterseiten gleich.
+
Navigation
+
In der Navigation werden die Links zu den Unterseiten der Website bereitgestellt, meist in Form von Buttons, einfachen Links oder auch Tabs. Dieser Bereich bleibt genauso wie der header auf allen Seiten der Website gleich. Manchmal wird die Navigation direkt mit in den header eingebaut. Ob ein separates Navigationsmenü sinnvoller ist, ist Ansichtssache.
+
Hauptinhalt
+
Der größte Bereich im Zentrum der Webseite, welcher den meisten Inhalt einer Webseite enthält, zum Beispiel Videos, eine Geschichte, eine Karte oder ein Zeitungsartikel. Dieser Part der Website wird sich von Seite zu Seite unterscheiden!
+
Sidebar
+
Zusätzliche Informationen, Links, Zitate, Werbung, usw. Dies wird nicht im Hauptfenster dargestellt, aber meist rechts oder links davon. Der Inhalt bezieht sich oft auf den Hauptinhalt. Bei einem Zeitungsartikel könnte die Sidebar zum Beispiel Zusatzinformationen, Informationen zum Autor oder Links zu ähnlichen Artikeln enthalten. Manchmal wird in der Sidebar auch ein zweites Navigationsmenü untergebracht oder anderer Inhalt, der auf allen Seiten gleich ist.
+
footer - Fußbereich
+
Ein Streifen am Ende der Webseite, welcher oft in kleiner Schrift Informationen zum Impressum, Copyright und Kontaktinformationen bereit stellt. Es sind wichtige Informationen für Interessierte, aber für die meisten Webseitenbenutzer nicht relevant. Manchmal wird hier auch eine Sitemap zur Verfügung gestellt.
+
+ +

Eine „typische Webseite“ könnte wie folgt strukturiert werden:

+ +

a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer.

+ +

Inhalte strukturieren mit HTML

+ +

Das Beispiel oben ist vielleicht nicht besonders schön, aber sehr gut dafür geeignet, den typischen Aufbau einer Webseite zu erläutern. Es gibt Webseiten mit weiteren Spalten, manche sind um einiges komplexer, aber man kann den grundlegenden Aufbau gut erkennen. Mit dem richtigen CSS darauf angewendet, kann man alle Elemente dazu bringen, sich wie die verschiedenen Bereiche zu verhalten und so auszusehen. Aber wie schon vorher angesprochen, ist es wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen.

+ +

Dies liegt daran, dass Darstellungen nicht die ganze Geschichte, die dahinter steckt, erzählen. Wir verwenden Farbe und Schriftgröße um Benutzer auf die nützlichsten Teile des Inhalts aufmerksam zu machen, wie das Navigationsmenü und verwandte Links. Aber was ist mit sehbehinderten Menschen, die zum Beispiel keine Konzepte wie „pink“ und „große Schriftart“ sehr nützlich finden?

+ +
+

Hinweis: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa 285 Millionen Menschen, während die Gesamtpopulation bei 7 Billionen Menschen liegt.

+
+ +

Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche Funktion sie ausfüllen. Wenn die Elemente so genutzt werden, wie oben beschrieben, dann hilft es Assistenzsoftware, wie Screenreadern, diese Elemente richtig zu klassifizieren. Wie wir bereits früher in diesem Kurs besprochen haben, hätte es einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden.

+ +

Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:

+ + + +

Aktives Lernen: Den Code aus dem Beispiel verstehen

+ +

Das Beispiel oben basiert auf dem folgenden Code (Man kann dieses Beispiel auch auf GitHub finden). Schauen Sie sich das Beispiel oben an und dann den Code dazu unten. Versuchen Sie zu sehen, welche Zeilen des Codes zu welchen Sektionen der Webseite gehören.

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+
+    <title>Titel der Webseite</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
+
+    <!-- die nächsten drei Zeilen bewirken, dass die HTML5 Semantik Elemente auch in alten Internet Explorer Versionen funktionieren-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
+
+  <body>
+    <!-- Dies ist der Kopfbereich bzw. Header, welcher auf allen Seiten angezeigt wird -->
+
+    <header>
+      <h1>Header</h1>
+    </header>
+
+    <nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>
+
+       <!-- Ein Suchformular, mit dessen Hilfe man auch durch die Webseite navigieren kann -->
+
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
+
+    <!-- Hier kommt der Hauptinhalt unserer Webseite -->
+    <main>
+
+      <!-- Es enthält einen Artikel -->
+      <article>
+        <h2>Article heading</h2>
+
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
+
+        <h3>subsection</h3>
+
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
+
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
+
+        <h3>Another subsection</h3>
+
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
+
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
+
+      <!-- Der Inhalt für die Sidebar kann auch innerhalb des main-Elements stehen-->
+      <aside>
+        <h2>Related</h2>
+
+        <ul>
+          <li><a href="#">Oh I do like to be beside the seaside</a></li>
+          <li><a href="#">Oh I do like to be beside the sea</a></li>
+          <li><a href="#">Although in the North of England</a></li>
+          <li><a href="#">It never stops raining</a></li>
+          <li><a href="#">Oh well...</a></li>
+        </ul>
+      </aside>
+
+    </main>
+
+    <!-- Hier ist unser Footer bzw. die Fußzeile, welche auch wieder auf allen Unterseiten angezeigt wird. -->
+
+    <footer>
+      <p>©Copyright 2050 by nobody. All rights reversed.</p>
+    </footer>
+
+  </body>
+</html>
+ +

Nehmen Sie sich etwas Zeit sich den Code näher anzuschauen und versuchen Sie ihn zu verstehen - die Kommentare sollten Ihnen dabei behilflich sein. Wir haben nicht zu viele Aufgaben in diesem Artikel, denn der Schlüssel zum Verständnis des Layouts ist das Schreiben von einer soliden HTML-Struktur, um diese dann mit CSS zu beeinflussen. Damit warten wir aber, denn dies ist Teil des CSS Kurses, der sich an diesen HTML Kurs direkt anschließt.

+ +

Die HTML-Layout-Elemente

+ +

Es ist gut alle HTML-Elemente fürs Layout im Detail zu kennen. Das lernen Sie mit der Zeit. Viele Details können Sie in unserer HTML Elemente Referenz finden.

+ + + +

Nicht-semantische Container

+ +

Manchmal findet sich kein passendes semantisches Element, um eine Gruppe Elemente oder Inhalte damit einzuhüllen. Manchmal möchte man mit einem Container um bestimmte Elemente herum nur ein Ziel erstellen, das über {{glossary("CSS")}} oder {{glossary("JavaScript")}} angesprochen werden kann. Für solche Fälle gibt es das {{HTMLElement("div")}} und das {{HTMLElement("span")}} Element. Diese sollten möglichst immer ein passendes {{htmlattrxref('class')}} Attribut haben, über welches sie identifiziert und angesprochen werden können.

+ +

{{HTMLElement("span")}} ist ein Inline Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Inline-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel:

+ +
<p>Der König lief um 1 Uhr betrunken zurück zu seinem Zimmer. Das Bier half ihm nicht dabei, als er durch die Tür schwankte <span class="editor-hinweis">[Editor's Hinweis: An diesem Punkt im Stück sollten die Lichter heruntergedimmt werden]</span>.</p>
+ +

In diesem Fall soll der Hinweis für den Editor nur Extra-Informationen für den Direktor des Schauspiels bereit stellen, der Hinweis hat keine semantische Bedeutung. Visuell kann dies per CSS mit einem Unterschied in der Textdarstellung angezeigt werden.

+ +

{{HTMLElement("div")}} ist ein Blocklevel-Element ohne eine bestimmte Semantik. Man sollte es nur benutzen, wenn man kein besseres, semantisches Blocklevel-Element finden kann oder wenn man keine hervorgehobene Bedeutung hinzufügen möchte. Zum Beispiel ein Einkaufswagen-Widget, welches man jederzeit auf einer E-Commerce-Webseite anzeigen kann:

+ +
<div class="einkaufswagen">
+  <h2>Einkaufswagen</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silber Ohrringe</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Silber Ohrringe">
+    </li>
+    <li>
+      ...
+    </li>
+  </ul>
+  <p>Kosten gesamt: $237.89</p>
+</div>
+ +

Dies ist nicht wirklich Inhalt für <aside>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <section> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <div> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.

+ +
+

Warnung: Divs sind leicht zu benutzen, man sollte aber darauf achten, das man nicht zu viele davon einsetzt, da sie keinerleit semantischen Wert haben. Man sollte sie wirklich nur benutzen, wenn es keine anderen semantischen Elemente gibt. Wenn man zuviele divs benutzt, dann wird es schwierig den Code zu updaten und später damit wieder zu arbeiten.

+
+ +

Zeilenumbruch und Horizontale Linien

+ +

Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:

+ +

<br> stellt einen Zeilenumbruch innerhalb eines Absatzes(

+ +

) dar. Es ist die einzige Möglichkeit eine bestimmte Struktur in den Text zu bekommen, wie man es bei einer Adresse oder einem Gedicht benötigt. Zum Beispiel:

+ +
<p>There once was a girl called Nell<br>
+Who loved to write HTML<br>
+But her structure was bad, her semantics were sad<br>
+and her markup didn't read very well.</p>
+ +

Ohne die <br> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn HTML ignoriert Whitespace. Mit den
+ Elementen im Code wird der Absatz wie folgt dargestellt:

+ +

There once was a girl called Nell
+ Who loved to write HTML
+ But her structure was bad, her semantics were sad
+ and her markup didn't read very well.

+ +

<hr> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:

+ +
<p>Die Katze lief aus dem Haus, um die Sonne zu genießen.</p>
+<hr>
+<p>Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.</p>
+ +

Würde wie folgt aussehen:

+ +

Die Katze lief aus dem Haus, um die Sonne zu genießen.

+ +
+

Der Hund im Haus und holte sich das Futter aus dem Napf der Katze.

+ +

Planung einer einfachen Webseite

+ +

Wenn Sie einmal den Inhalt einer ganz einachen Webseite geplant haben, dann ist der nächste Schritt das ausarbeiten, welcher Inhalt auf einer ganzen Internetpräsenz, bestehend aus mehreren Unterseiten, dargestellt werden soll. Dazu gehört zu planen, wie die einzelnen Seiten untereinander verlinkt werden sollen, wie das Gesamtlayout aussehen soll, so das die Seite das beste Erlebnis für den Nutzer bietet. Dies wird die {{glossary("Information architecture")}} genannt. Bei einer sehr großen und komplexen Webseite, muss eine Menge Zeit für den Planungsprozess eingeplant werden. Für eine einfachere Webseite mit wenigen Webseiten ist es aber recht einfach und kann auch Spaß machen!

+ +
    +
  1. Denken Sie daran, welche Elemente auf allen Seiten gleich sein sollen, z.B. das Navigationsmenü und der Footerbereich. Wenn die Webseite für ein Buisness ist, dann ist es zum Beispiel sinnvoll, die Kontaktinformationen auf jeder Unterseite im Footer zu haben. Notieren Sie, was auf jeder Unterseite gleich sein soll. the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy
    2. +
  2. Als nächstes zeichnen Sie eine grobe Skizze, wie die Struktur der Webseite aussehen soll, auf ein Blatt Papier. Machen Sie das für jede Unterseite der Webpräsenz. Schreiben Sie dazu, für was jede der Sektionen ist. A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer
    3. +
  3. Jetzt überlegen Sie welche Inhalte auf der Website zu finden sein sollen, welche nicht auf allen Unterseiten gleich sind. Schreiben Sie ruhig eine große Liste. A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info
    4. +
  4. Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things
    5. +
  5. Als letztes Skizzieren Sie eine grobe Sitemap - zeichnen Sie einen Kreis für jede Unterseite und ziehen Sie linien, um die Verlinkungen zwischen den Seiten deutlich zu machen. Wahrscheinlich ist die Startseite in der Mitte und von ihr gehen fast alle Links zu den Unterseiten. Die meisten Unterseiten einer kleinen Website, sollten über das Navigationsmenü zugänglich sein. Notieren Sie zusätzlich wie die Seiten präsentiert werden sollen. A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page
    6. +
+ +

Aktives Lernen: Erstellen Sie eine eigene Sitemap

+ +

Probieren Sie die Schritte von oben selber aus, erstellen Sie eine Sitemap für eine eigene Webseite. Worüber würden Sie gerne eine Webseite machen?

+ +
+

Hinweis: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.

+
+ +

Zusammenfassung

+ +

Jetzt sollten Sie ein besseres Verständnis dafür haben, wie Webseiten strukturiert werden können und wie man eine Webpräsenz mit mehreren Unterseiten im Vorraus plant. Im letzten Artikel dieses Moduls geht es darum, Fehler im HTML Code zu finden und zu beheben.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}

+ + + +

In diesem Modul

+ + diff --git a/files/de/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..0f5354d5d2 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,571 @@ +--- +title: Lerne HTML kennen +slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen +tags: + - Anfänger + - Attribut + - Beginner + - Charakter-Referenz + - Element + - Guide + - HTML + - Kommentar + - Leerraum + - Modul + - whitespace +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
+ +

In diesem Artikel werden wir Ihnen die Grundlagen von HTML beibringen. Wir werden definieren was Elemente, Attribute und einige andere Begriffe, die sie im Zusammenhang mit dieser Sprache kennen lernen werden, sind. Wir zeigen auch wie ein HTML Element strukturiert ist, wie eine typische HTML Webseite aufgebaut ist und erklären weitere wichtige Grundlagen dieser Sprache. Währenddessen können Sie oft mit HTML-Code experimentieren.

+ + + + + + + + + + + + +
Vorbereitungen:grundlegende Computerkenntnisse, notwendige Software installiert und wissen wie man Dateien nutzt.
Ziel: +

Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.

+
+ +

Was ist HTML?

+ +

HTML ist nicht wirklich eine Programmiersprache, sondern eine Auszeichnungssprache; sie ist dazu gedacht, Ihre Webseite zu strukturieren. Die Sprache besteht aus einer Reihe von Elementen, Tags genannt, welche Sie um verschiedene Teile Ihres Inhalts herum platzieren können, um diesem eine spezielle Aufgabe zuzuweisen. Zum Beispiel können Sie damit einen Text oder ein Bild in einen Link verwandeln. Als Beispiel nehmen wir folgenden Inhalt:

+ +
Meine Katze ist sehr frech.
+ +

Wenn wir möchten das der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, das es sich um einen Absatz handelt: 

+ +
<p>Meine Katze ist sehr frech.</p>
+ +

Aufbau eines HTML-Elements

+ +

Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.

+ +

+ +

Die Hauptteile unseres Elements sind:

+ +
    +
  1. Das öffnende Tag: Diese besteht aus dem Namen des Elements (in diesem Fall ein p für paragraph (engl.:Absatz)), welcher zwischen zwei spitzen Klammern eingesetzt ist. Dies zeigt an, wo das Element beginnt — in diesem Fall am Anfang unseres Absatzes.
    2. +
  2. Der Inhalt: Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.
    3. +
  3. Das schließende Tag: Dieses sieht genauso aus wie das öffnende Tag bis auf den zusätzlichen Schrägstrich (slash) vor dem Namen des Elements. Dieser Tag kommt an das Ende des Elementes — in diesem Fall am Ende des Absatzes.
    4. +
  4. Das Element: Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.
    5. +
+ +

Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element

+ +

Editieren Sie den Text unten im Input-Feld. Heben Sie den Text mit dem <em>-Element hervor. (schreiben sie ein <em>-Tag vor den Text, um das Element zu öffnen und fügen sie ein </em>-Tag am Ende des Textes an, um das Element zu schließen) Dies sollte den Text kursiv darstellen. Sie sollten die Änderungen live in dem Output-Feld sehen können.

+ +

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 300) }}

+ +

Elemente verschachteln

+ +

Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird Verschachteln genannt. Wenn wir hervorheben wollen, das unsere Katze sehr schlecht gelaunt ist, können wir das Wort "sehr" in ein <strong>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:

+ +
<p>Meine Katze ist <strong>sehr</strong> frech.</p>
+ +

Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <p>-Element geöffnet, dann das <strong>-Element geöffnet. Deswegen müssen wir zuerst wieder das <strong>-Element schließen, bevor wir das <p>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:

+ +
<p>Meine Katze ist <strong>sehr frech.</p></strong>
+ +

Die Elemente müssen in der korrekten Reihenfolge geöffnet und geschlossen werden, so dass eines eindeutig innerhalb von dem anderen Element liegt. Wenn die Elemente überlappen, dann muss der Browser versuchen zu entscheiden, welches Element innerhalb sein soll und es können unerwartete Resultate herauskommen. Also passen Sie darauf auf.

+ +

Blockelemente und Inlineelemente

+ +

Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.

+ + + +

Schauen Sie sich folgendes Beispiel an:

+ + + +

{{ EmbedLiveSample('Playable_code2', 700, 400) }}

+ +

{{htmlelement("em")}} ist ein Inlineelement. Sie können oben sehen, das die ersten drei Elemente in einer Zeile sind, ohne Zwischenräume zwischen den Elementen. {{htmlelement("p")}} ist ein Blockelement, welches jeweils eine neue Zeile für sich alleine einnimmt, mit Platz darüber und darunter.

+ +
+

Notiz: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in Element content categories, (auf Englisch). Diese Definitionen sind akkurater als die beiden, welche wir hier vorgstellt haben, sie sind aber auch viel komplizierter. In diesem Modul bleiben wir bei unseren Block- und Inlineelementkategorien.

+
+ +
+

Notiz: Sie können auf MDN hilfreiche Referenzseiten finden - für alle Blockelemente und Inlineelemente.

+
+ +

Leere Elemente

+ +

Nicht alle Elemente folgen dem obigen Muster, mit einem öffnenden Tag, dem Inhalt und einem schließenden Tag. Manche Elemente brauchen nur einen einzigen Tag, welcher meist genutzt wird, um etwas in eine Seite einzubetten, an der Stelle wo das Tag steht. Zum Beispiel zeigen wir das {{htmlelement("img")}}-Element, welches genutzt wird um eine Bilddatei einzubinden:

+ +
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+ +

Der Code würde folgende Webseite im Browser anzeigen:

+ +

{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}

+ +

Attribute

+ +

Elemente können auch Attribute enthalten, dass sieht dann so aus:

+ +

+ +

Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt anzeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.

+ +

In unserem Beispiel ist der Name des Attributes class und editor-note ist der diesem Attribut zugeordnete Wert.

+ +

Ein Attribut sollte immer haben:

+ +
    +
  1. Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).
    2. +
  2. Den Attributnamen, gefolgt von Gleichheitszeichen
    3. +
  3. Anführungs- und Schlusszeichen um den Wert. (bsp. "editor-note")
    4. +
+ +

Aktives Lernen: Hinzufügen von Attributen zu einem Element

+ +

Ein weiteres Beispiel für ein Element ist {{htmlelement("a")}} — dies steht für Anker (engl.:anchor) und macht aus dem Text den es umschließt einen Hyperlink. Dieses Element kann einige Attribute annehmen, hier sind einige von ihnen:

+ + + +

Editieren Sie unten im Input-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <a>-Element hinzu. Danach fügen sie das href-Attribut und das title-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem target-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im Output-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des title-Attributes anzeigt, wenn man mit dem Mauszeiger darüberfährt und wenn mn daraufklickt sollte der Link zu der entsprechenen Webadresse führen, welche sie im href-Attribut angegeben haben. Denken Sie daran, dass Sie ein Leerzeichen zwischen dem Element und dem ersten Attribut haben müssen und jeweils zwischen den Attributen.

+ +

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code3', 700, 300) }}

+ +

Boolsche Attribute

+ +

Sie werden manchmal Attribute sehen, welche ohne Wert geschrieben sind und das ist so erlaubt. Es handelt sich um Boolsche Attribute und diese können nur einen Wert annehmen, welcher meist derselbe ist, wie der Name des Attributs. Als Beispiel zeigen wir das {{htmlattrxref("disabled", "input")}}-Attribut, welches Sie einem <input>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <input>-Feld wird ausgegraut und man kann keine Daten eingeben.

+ +
<input type="text" disabled="disabled">
+ +

Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)

+ +
<input type="text" disabled>
+
+<input type="text">
+
+ +

Beide werden Ihnen das folgende Resultat ausgeben:

+ +

{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}

+ +

Anfuehrungszeichen um Attributwerte weglassen

+ +

Wenn Sie sich etwas im Internet umschauen, werden Sie immer wieder auf merkwürdige Benutzung von HTML-Code stoßen. Dazu gehören auch Attributwerte ohne Anführungszeichen. Dies funktioniert an manchen Stellen, woanders kann es den ganzen Code kaputt machen. Wir schauen uns noch einmal unser Beispiel mit dem Link an. Wir könnten das auch wie folgt schreiben, wenn wir nur das href-Attribut benutzen:

+ +
<a href=https://www.mozilla.org/>Lieblingswebseite</a>
+ +

Wenn wir aber das title-Attribut hinzufügen, dann funktioniert es so nicht mehr:

+ +
<a href=https://www.mozilla.org/ title=Die Mozilla Webseite>Lieblingswebseite</a>
+ +

An diesem Punkt wird der Browser diesen Code falsch lesen und in dem title-Attribut drei separate Attribute sehen: ein title-Attribut mit dem Wert "Die" und zwei Boolsche Attribute, Mozilla und Webseite. Dies ist nicht was wir gewollt haben und der Fehler führt zu unerwünschtem Verhalten, siehe unten. Versuchen Sie mit dem Mauszeiger über dem Link zu fahren, um zu sehen was der Titeltext ist.

+ +

{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}

+ +

Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.

+ +

Einfache oder doppelte Anführungszeichen?

+ +

In diesem Artikel sind alle Attributwerte in doppelte Anführungszeichen eingepackt. Sie werden woanders aber eventuell sehen, das Leute anstattdessen einfache Anführungszeichen benutzen. Es ist egal welche Sorte Anführungszeichen genutzt wird, Sie können das machen wie Sie möchten. Beide der folgenden Zeilen sind äquivalent:

+ +
<a href="http://www.example.com">Ein Link als Beispiel.</a>
+
+<a href='http://www.example.com'>Ein Link als Beispiel.</a>
+ +

Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!

+ +
<a href="http://www.example.com'>Ein Link als Beispiel.</a>
+ +

Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:

+ +
<a href="http://www.example.com" title="Ist's nicht lustig?">Ein Link als Beispiel.</a>
+ +

Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie HTML entities nutzen.

+ +

Aufbau eines HTML-Dokumentes

+ +

Jetzt wissen Sie wie die einzelnen Elemente in einer HTML-Datei aufgebaut sind, aber ein Element für sich alleine tut nicht viel. Wir schauen uns jetzt an, wie die einzelnen Elemente kombiniert werden, um ein funktionierendes HTML-Dokument aufzubauen. Schauen Sie sich diesen Code an:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Meine Testseite</title>
+  </head>
+  <body>
+    <p>Dies ist meine Webseite.</p>
+  </body>
+</html>
+ +

Hier haben wir:

+ + + +

Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein

+ +

Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:

+ +
    +
  1. Kopieren Sie das obige HTML-Dokument.
    2. +
  2. Erstellen Sie eine neue leere Datei in Ihrem Texteditor.
    3. +
  3. Fügen Sie den Code in die leere Datei ein.
    4. +
  4. Speichern Sie die Datei unter dem Namen index.html.
    5. +
+ +
+

Notiz: Sie können dieses HTML-Grundgerüst auch im MDN Learning Area Github repository finden.

+
+ +

Sie können die Datei nun in einem Webbrowser öffnen, um zu sehen wie die Webseite aussieht. Dann können Sie den HTML-Code editieren und die Datei speichern. Wenn Sie dann die Datei im Browser neu laden, sehen Sie die Veränderungen. Am Anfang sieht die Webseite im Browser so aus:

+ +

A simple HTML page that says This is my pageDiese Übung können Sie also lokal auf Ihrem Computer durchführen, wie oben beschrieben, oder Sie können die Übung mit unserem editierbaren Beispiel unten machen (das editierbare Fenster repräsentiert nur den Inhalt des {{htmlelement("body")}}-Elements). In der Übung sollen Sie die folgenden Dinge auf Ihrer Webseite implementieren:

+ + + +

Wenn Sie einen Fehler machen können Sie das Input-Feld jederzeit mit dem Reset-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code4', 700, 600) }}

+ +

Leerraum in HTML

+ +

In dem obigen Beispiel werden Sie bemerkt haben, dass eine Menge Leerraum (engl.: Whitespace) dabei ist. Dies ist nicht notwendig. Die beiden folgenden Codestücke sind äquivalent:

+ +
<p>Hunde sind komisch.</p>
+
+<p>Hunde        sind
+         komisch.</p>
+ +

Egal wieviel Leerraum sie benutzen (Leerraum sind Leerzeichen, aber auch Zeilenumbrüche), der HTML Parser wird den Leerraum immer zu einem einzigen Leerzeichen zusammenlegen, wenn die Webseite im Browser geladen wird. Wieso sollte man also so viel Leerraum benutzen? Die Antwort ist Lesbarkeit - es ist viel einfacher zu verstehen, was in einem Stück Code vor sich geht, wenn dieser schön formattiert ist und nicht alles ein zusammenhängender Klumpen ist.  In unserem HTML-Code haben wir jedes Element das in einem anderen Element steht mit zwei Leerzeichen weiter eingerückt.  Sie können selbst entscheiden, wie genau Sie Ihren Code formattieren (z. B. wieviele Leerzeichen Sie zum Einrücken benutzen), aber Sie sollten den Code selber gut lesen können.

+ +

Zeichenreferenzen für Sonderzeichen

+ +

In HTML sind die Zeichen <, >,",' und & spezielle Zeichen, da sie Teil der HTML Syntax sind. Wie kann man diese also im ausgegebenen Text benutzen, ohne dass diese als Teil des Markups interpretiert werden?

+ +

Wir müssen hier Zeichenreferenzen benutzen — spezielle Codes, welche einzelne Zeichen repräsentieren und welche in diesen Fällen genutzt werden können. Jede Zeichenreferenz wird mit einem Und-Zeichen (&) gestartet und mit einem Semikolon (;) beendet.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ausgegebener CharacterZeichenreferenz
<&lt;
>&gt;
"&quot;
'&apos;
&&amp;
+ +

In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:

+ +
<p>In HTML definieren Sie einen Absatz mit dem <p>-Element.</p>
+
+<p>In HTML definieren Sie einen Absatz mit dem &lt;p&gt;-Element.</p>
+ +

In dem Live-Output sieht man, dass der erste Absatz falsch dargestellt wird, weil der Browser den Tag nicht wie gewünscht anzeigt, sondern als Beginn eines neuen Absatzes interpretiert. Der zweite Absatz wird durch die Zeichenreferenzen korrekt dargestellt.

+ +

{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}

+ +
+

Notiz: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: List of XML and HTML character entity references.

+
+ +

HTML Kommentare

+ +

In HTML, wie auch in den meisten anderen Programmiersprachen, kann man Kommentare schreiben. Kommentare schreibt man in den Code, diese werden aber vom Browser ignoriert und somit unsichtbar für Benutzer der Webseite. Mit Kommentaren kann man als Entwickler des Codes, diesen für sich selbst und andere leichter verständlich machen. Besonders am Anfang ist es sinnvoll sich mit Kommentaren Anmerkungen zu dem geschriebenen Code zu machen, um später nachvollziehen zu können, was ein bestimmtes Stück Code bewirkt. Sie möchen Ihren Code ja auch noch verstehen nachdem Sie mehrere Monate nichts daran gemacht haben, oder dass ein Mitarbeiter ihren Code verstehen kann.

+ +

Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <!-- und --> ein, zum Beispiel:

+ +
<p>Ich bin nicht in einem Kommentar</p>
+
+<!-- <p>Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!</p> -->
+ +

Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.

+ +

{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}

+ +

Zusammenfassung

+ +

Sie haben das Ende des Artikels erreicht und wir hoffen es hat Ihnen etwas Spaß gemacht bei uns die Grundlagen von HTML zu erlernen!  An diesem Punkt sollten Sie verstehen, wie diese Sprache aussieht, wie sie funktioniert und in der Lage sein einige Elemente und Attribute zu benutzen. In weiterfürhenden Artikeln aus diesem Modul werden wir einige der Dinge, die Sie hier gelernt haben wieder aufgreifen und uns im Detail anschauen, aber auch neue Möglichkeiten dieser Sprache entdecken. Bleiben Sie dabei!

+ +
+

Notiz: Nun, da Sie dabei sind mehr über HTML zu lernen, möchten Sie vielleicht auch schon einmal in die Grundlagen von Cascading Style Sheets, kurz CSS hineinstöbern. CSS ist die Sprache mit der wir unseren Webseiten einen bestimmten Stil geben. Zum Beispiel lassen sich mit CSS die Farben auf der Webseite ändern. HTML und CSS arbeiten Hand in Hand, wie Sie bald entdecken werden.

+
+ +
{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}
diff --git a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..dad40a05a9 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,643 @@ +--- +title: Einfache Textformatierung in HTML +slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML +tags: + - Beginner + - Einführung in HTML + - HTML + - Lernen + - Listen + - Semantik + - Text + - Text formatieren + - Überschriften +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+ +

Einer der Hauptaufgaben von HTML ist es, Text zu strukturieren und diesem eine bestimmte Bedeutung zu verleihen, damit der Browser den Text im richtigen Kontext darstellen kann.  In diesem Artikel wird erklärt, wie man mit {{glossary("HTML")}} Texte formattieren kann. Dazu gehört das hervorheben einzelner Textpassagen, als auch die Darstellung des Textblocks, zum Beispiel als Absatz, Liste oder als Überschrift.

+ + + + + + + + + + + + +
Vorwissen:Grundlagen von HTML, wie sie im Artikel Lerne HTML kennen abgedeckt werden.
Ziel:Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.
+ +

Überschriften und Absätze

+ +

Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.

+ +

An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.

+ +

Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.

+ +

In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:

+ +
<p>Ich bin ein Absatz, ja das bin ich.</p>
+ +

Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:

+ +
<h1>Ich bin der Titel einer Geschichte.</h1>
+ +

Es gibt sechs verschiedene Überschriften-Elemente — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} and {{htmlelement("h6")}}. Jedes dieser Elemente repräsentiert eine andere Gewichtung des Inhalts im Dokument. <h1> repräsentiert die Hauptüberschrift, <h2> repräsentiert Unterüberschriften, <h3> repräsentiert Unter-Überschriften und so weiter.

+ +

Struktur schaffen

+ +

Als Beispiel würden in einer Geschichte <h1> zum ausweisen des Titels genutzt, <h2> für die Kapitelüberschriften und <h3> um ein Kapitel in mehrere Sektionen zu unterteilen.

+ +
<h1>Die erdrückende Langeweile</h1>
+
+<p>Von Chris Mills</p>
+
+<h2>Kapitel 1: Die dunkle Nacht</h2>
+
+<p>Es war eine dunkle Nacht. Irgendwo hörte man eine Eule rufen. Der Regen strömte herab auf... </p>
+
+<h2>Kapitel 2: Die ewige Stille</h2>
+
+<p>Unser Protagonist kann gerade so aus dem Schatten heraus flüstern...</p>
+
+<h3>Der Geist spricht</h3>
+
+<p>Nachdem mehrere Stunden der Stille vorbei gegangen waren, setzte sich plötzlich der Geist aufrecht hin und rief "Bitte habt erbarmen mit meiner Seele!"</p>
+ +

Sie können selber entscheiden, wie Sie Struktur in Ihre Texte bringen wollen, so lange die Hierarchie Sinn ergibt. Hier geben wir Ihnen ein paar Ratschläge, um sinnvolle Strukturen zu erschaffen:

+ + + +

Wieso brauchen wir Struktur?

+ +

Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: text-start.html Dieses Dokument (ein leckeres Hummus-Rezept) wird uns den ganzen Artikel lang begleiten, also speichern Sie am besten jetzt gleich eine Kopie davon auf Ihrem Computer, um daran mitzuarbeiten. Der body des Dokuments enthält im Moment eine Reihe von Inhalten, welche nicht wirklich strukturiert sind. Einzig ein paar Zeilenumbrüche wurden in dem HTML-Dokument genutzt, um Inhalte voneinander zu trennen (es wurde Enter/Return gedrückt, um zur nächsten Zeile zu springen).

+ +

Wenn Sie dieses Dokument im Browser öffnen, werden Sie feststellen, das der Text in einem großen Block angezeigt wird! Die Zeilenumbrüche werden also komplett ignorert.

+ +

Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben.

+ +

Der Browser findet keine Elemente, die dem Dokument eine Struktur geben, er kann nicht von selbst erkennen was Überschriften, Zeilenumbrüche und Absätze sind. Nachteile einer strukturlosen Webseite:

+ + + +

Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.

+ +

Aktives Lernen: Unserem Inhalt Struktur geben

+ +

Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im Input-Feld mittels HTML-Auszeichnungen so, das im Output-Feld eine Überschrift mit zwei Absätzen darunter erscheint.

+ +

Wenn Sie einen Fehler machen, können sie mit dem Reset-Button ganz einfach den Ausgangszustand wieder herstellen. Wenn Sie wirklich nicht wissen wie es geht, können Sie die Lösung anzeigen lassen indem Sie auf Lösung anzeigen klicken.

+ + + +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

Warum brauchen wir Semantik?

+ +

Wir verlassen uns die ganze Zeit auf Semantik - wir beruhen uns auf Ereignisse, die wir erlebt haben, um die Funktion von Dingen um uns herum zu beurteilen. Wenn wir etwas sehen, dann wissen wir was für eine Funktion dieses haben wird. Zum Beispiel erwarten wir, dass eine rote Ampel "Stop" bedeutet, während ein grünes Ampellicht uns erlaubt weiterzufahren. Dinge können schnell aus dem Ruder laufen, wenn Semantik falsch genutzt wird. (Zum Beispiel wäre es in einem Land, in welchem das rote Ampellicht "Fahren" bedeutet, vielleicht nicht so sicher).

+ +

Genauso müssen wir bei unseren Elementen aufpassen, diesen die richtige Bedeutung, Funktion und das entsprechende Aussehen zukommen zu lassen. In diesem Kontext ist das {{htmlelement("h1")}}-Element auch ein sematisches Element, welches dem Text innerhalb der Tags die Rolle bzw. Bedeutung einer "Top-Level-Hauptüberschrift für die Webseite" gibt.

+ +
<h1>Dies ist eine Hauptüberschrift.</h1>
+ +

Automatisch gibt der Browser diesem Element eine große Schriftgröße, damit es aussieht, wie eine Überschrift (auch wenn Sie es mittels CSS so stylen können, wie sie möchten). Wichtiger noch, der semantische Wert des Elements wird auf verschiedene Weise genutzt. Zum Beispiel greifen Suchmaschinen und Bildschirmlesegeräte darauf zurück (wie oben erklärt).

+ +

Sie können jedes Element so aussehen lassen, wie eine Überschrift. Zum Beispiel wie folgt:

+ +
<span style="font-size: 32px; margin: 21px 0;">Ist dies eine Top-Level-Überschrift?</span>
+ +

Dies ist ein {{htmlelement("span")}}-Element. Es hat keinerlei semantischen Wert. Sie benutzen dieses Element, um Inhalt zu verpacken und als Ziel für CSS oder JavaScript zu nutzen, ohne ihm eine besondere Bedeutung zukommen zu lassen. (Sie werden später mehr darüber heraus finden.) Wir haben CSS benutzt, um dem Text das Aussehen einer Überschrift zu geben. Da es aber keinen sematischen Wert hat, bekommt dieser Text nicht die selbe Bedeutung wie ein echtes Überschriften-Element. Es ist also besser, das richtige HTML-Element für den richtigen Job zu benutzen, auch wenn es anders gehen mag.

+ +

Listen

+ +

Lassen Sie uns nun Listen anschauen. Listen gibt es überall - von Ihrem Einkaufszettel, über die Liste an Direktionen, welche Sie unbewusst befolgen, um jeden Tag Ihr Haus wiederzufinden, bis hin zu den Listen an Instruktionen, die sie in diesen Tutorials befolgen! Auch im Internet treffen Sie ständig auf Listen. Wir haben hier drei verschiedene Typen, welche Sie auf Ihren Webseiten benutzen können.

+ +

Ungeordnete Listen

+ +

Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:

+ +
Milch
+Eier
+Brot
+Hummus
+ +

Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:

+ +
<ul>
+Milch
+Eier
+Brot
+Hummus
+</ul>
+ +

Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:

+ +
<ul>
+  <li>Milch</li>
+  <li>Eier</li>
+  <li>Brot</li>
+  <li>Hummus</li>
+</ul>
+ +

Aktives Lernen: Eine ungeordnete Liste auszeichnen

+ +

Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.

+ + + +

{{ EmbedLiveSample('Playable_code_2', 700, 400) }}

+ +

Geordnete Listen

+ +

Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:

+ +
Fahre bis zum Ende der Straße
+Biege rechts ab
+Fahre geradeaus über die nächsten beiden Verkehrskreisel
+Biege nach dem dritten Kreisel links ab
+Nach 300 Metern ist die Schule auf der rechten Seite
+
+ +

Die Auszeichnungsstruktur is dieselbe wie für die ungeordnete Liste, außer das Sie die Listenpunke in ein {{htmlelement("ol")}}-Element einhüllen müssen, anstatt einem <ul>-Element:

+ +
<ol>
+  <li>Fahre bis zum Ende der Straße</li>
+  <li>Biege rechts ab</li>
+  <li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li>
+  <li>Biege nach dem dritten Kreisel links ab</li>
+  <li>Nach 300 Metern ist die Schule auf der rechten Seite</li>
+</ol>
+ +

Aktives Lernen: Eine geordnete Liste auszeichnen

+ +

Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:

+ + + +

{{ EmbedLiveSample('Playable_code_3', 700, 500) }}

+ +

Aktives Lernen: Das Hummus-Rezept auszeichnen

+ +

An diesem Punkt sollten Sie alle Informationen haben, die Sie brauchen, um unser Hummus-Rezept auf einer Seite mit HTML zu strukturieren. Sie können entweder die hummus-rezept.html Datei herunterladen und lokal auf Ihrem Computer bearbeiten oder die editierbare Codebox unten benutzen. Nur wenn Sie die Aufgabe lokal bearbeiten, können Sie diese auch speichern, um Sie sich später noch einmal anzuschauen. Was Sie im Browser bearbeiten ist beim nächsten Besuch verloren. Also überlegen Sie es, wie Sie es machen möchten.

+ + + +

{{ EmbedLiveSample('Playable_code_4', 700, 500) }}

+ +

Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf Lösung anzeigen sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, text-complete.html, auf GitHub anschauen.

+ +

Listen ineinander schachteln

+ +

Listen können ineinander verschachtelt werden. Vielleicht möchten Sie Unterpunke unter einem Listenpunkt haben. Lassen Sie uns das anhand der zweiten Liste in unserem Rezept anschauen:

+ +
<ol>
+  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
+  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
+  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
+  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
+  <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
+  <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
+</ol>
+
+ +

Da die letzten beiden Listenpunkte sich auf den Punkt davor beziehen, könnte man diese zusammen unter dem vierten Listenpunkt einordnen, in einer ungeordneten Liste. Das würde so aussehen:

+ +
<ol>
+  <li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>
+  <li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>
+  <li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>
+  <li>Pürieren Sie die Zutaten zu einer Paste.</li>
+  <ul>
+    <li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>
+    <li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>
+  </ul>
+</ol>
+
+ +

Gehen Sie zurück zur obigen Aufgabe und fügen Sie eine Liste einer der vorhandenen beiden Listen hinzu. Wenn Sie damit fertig sind, sollte das Rezept so ähnlich aussehen:

+ +

Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben.

+ +

Betonung und Wichtigkeit

+ +

Während wir sprechen, betonen wir oft bestimmte Wörter, um Ihre Bedeutung im Satz zu ändern. Solche Wörter möchten wir in einem Text hervorheben. HTML stellt verschiedene sematnische Elemente zur Verfügung, um dies zu bewerkstelligen. In dieser Sektion schaune wir uns einige der geläufigsten Formen davon an.

+ +

Betonung

+ +

Wenn wir eine bestimmte Betonung in der gesprochenen Sprache erreichen wollen, dann heben wir bestimmte Wörter hervor, um ihre Bedeutung leicht zu verändern. Ähnlich heben wir solche Wörter in geschriebener Sprache hervor, indem wir ein Wort kursiv schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.

+ +

Ich bin froh, dass du nicht zu spät bist.

+ +

Ich bin froh, dass du nicht zu spät bist.

+ +

Der erste Satz klingt danach, das jemand wirklich erleichtert ist, das die Person nicht zu spät ist, der zweite Satz klingt hingegen eher sarkastisch, mit einem Klang von Vorwurf, da die Person sich etwas verspätet hatte.

+ +

In HTML benutzen wir das {{htmlelement("em")}}-Element (von engl.:emphasis = Betonung), um solche Wörter hervorzuheben. Es macht ein Dokument etwas interessanter zu lesen. Auch Bildschrimlesegeräte können so eine besondere Betonung erkennen und nutzen. Browser zeigen den Text im Element normalerweise kursiv an, doch Sie sollten das Tag nicht einizig dazu benutzen, Text kursiv anzuzeigen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("i")}}-Element (siehe weiter unten).

+ +
<p>Ich bin <em>froh</em> dass du nicht <em>zu spät</em>bist.</p>
+ +

Wichtige Wörter

+ +

Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in Fettschrift in geschriebener Sprache. Zum Beispiel:

+ +

Diese Flüssigkeit ist sehr giftig.

+ +

Ich zähle auf dich. Sei nicht zu spät!

+ +

In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: strong = stark/fett) um solche Wörter hervorzuheben. Es macht das Dokument lesbarer und auch hier können Screenreader erkennen, dass Wörter besonders betont ausgelesen werden sollten. Browser zeigen den Inhalt dieses Elements in Fettschrift an, aber Sie sollten diesen Tag nicht alleine dafür verwenden, Schrift fett erscheinen zu lassen. Um das zu erreichen können Sie entweder das {{htmlelement("span")}}-Element und CSS nutzen oder auch das {{htmlelement("b")}}-Element (siehe weiter unten).

+ +
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p>
+
+<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p>
+ +

Sie können <strong>-Elemente und <em>-Elemente ineinander verschachteln:

+ +
<p>Diese Flüssigkeit ist <strong>sehr giftig</strong> —
+wenn Sie diese trinken, <strong>dann werden Sie <em>sterben</em></strong>.</p>
+ +

Aktives Lernen: Lassen Sie uns wichtig sein!

+ +

In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <strong>-Elemente und <em>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.

+ + + +

{{ EmbedLiveSample('Playable_code_5', 700, 500) }}

+ +

Kursiv, fett, unterstrichen...

+ +

Die beiden Elemente, die wir oben besprochen haben, haben eine eindeutige semantische Bedeutung. Die Situation ist etwas anders mit den {{htmlelement("b")}}, {{htmlelement("i")}} und {{htmlelement("u")}}-Elementen. Sie wurden erschaffen, um Leuten die Möglichkeit zu geben Text in fett (engl.:bold), kursiv (engl.:italic) oder unterstrichen (engl.:underlined) anzuzeigen, in einer Zeit in welcher CSS noch nicht von allen Browsern unterstützt wurde. Solche Elemente, welche nur das Aussehen, aber nicht die Bedeutung, verändern, nennt man auch präsentationsbezogenes Element. Sie sollten nach Möglichkeit nicht mehr benutzt werden, denn wie wir gesehen haben, ist eine gute Semantik sehr wichtig für Suchmaschinen und Barrierefreiheit.

+ +

In HTML5 wurden <b>, <i> und <u> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.

+ +

Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <b>, <i> oder <u> zu benutzen, um die Bedeutung der traditionellen Nutzung von fettem, kursivem oder unterstrichenem Text zu geben, wenn es kein passenderes Element gibt. Denken Sie aber immer auch an die Barrierefreiheit Ihrer Webseite. Leute, welche Screenreader benutzen, können mit kursivem Text, ohne Bedeutung, nichts anfangen. Auch funktioniert es möglicherweise nicht mit einem anderen, als dem Lateinischen Buchstabensystem.

+ + + +
+

Hinweis:Eine Warnung zu unterstrichenem Text: Unterstrichener Text wird stark mit Hyperlinks assoziiert. Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <u>-Element, wo es passt, aber passen Sie möglicherweise mit CSS an, damit der Text anders aussieht, als die Links auf Ihrer Webseite. Unten können Sie sehen, wie das gemacht werden kann.

+
+ +
<!-- Wissenschaftliche Namen -->
+<p>
+  Der winzige Rubinkehlkolibri (<i>Archilochus colubris</i>) ist ein auffallend farbenprächtiger Vogel, der in den östlichen Teilen der USA und Kanadas anzutreffen ist.
+</p>
+
+<!-- Fremdwörter -->
+<p>
+  Das Menü bestand aus einer Fülle an extosichen Wörtern, zum Beispiel <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> und <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- Ein bekannter Schreibfehler -->
+<p>
+  Eines Tages werde ich lernen, wie man <u>bessser</u> buchstabiert.
+</p>
+
+<!-- Stichpunkte in einer Anleitung hervorheben -->
+<ol>
+  <li>
+    <b>Schneiden</b> Sie zwei Scheiben Brot ab.
+  </li>
+  <li>
+    <b>Legen</b> Sie eine Tomate und ein Salatblatt zwischen die Brotscheiben.
+  </li>
+</ol>
+ +

Zusammenfassung

+ +

Sie haben es geschafft! Dieser Artikel sollte Ihnen beigebracht haben wie Sie Text mit HTML-Elementen strukturieren können. Es wurden die wichtigsten Eltemente dafür vorgeführt. Es gibt weitere Möglichkeiten, Texten eine bestimmte semanitsche Bedeutungen zukommen zu lassen. Wir werden uns diese im Artikel "Fortgeschrittene Textformatierung" anschauen. Im nächsten Artikel geht es erst einmal darum, wie man Hyperlinks erstellt, das wichtigste Element im Internet.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/introduction_to_html/index.html b/files/de/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..73f46a2614 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/index.html @@ -0,0 +1,65 @@ +--- +title: Einführung in HTML +slug: Learn/HTML/Einführung_in_HTML +tags: + - Einführung in HTML + - HTML + - Kopf + - LandingPage + - Lernen + - Links + - Struktur + - Textformatierung + - head +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus Elementen aufgebaut ist. Diese Elemente können auf verschiedene Textstücke angewandt werden, um ihnen verschiedene Bedeutungen zuzuschreiben (Ist es ein Absatz, eine Liste oder Teil einer Tabelle?), um ein Dokument sinnvoll zu strukturieren (Gibt es eine Kopfzeile? Ist der Inhalt in drei Spalten gegliedert? Gibt es ein Navigationsmenü?) und um Inhalte, wie Videos und Bilder einzubetten. Dieses Modul wird sich mit den ersten Beiden dieser Punkte beschäftigen und die fundamentalen Konzepte und Syntax einführen, die Sie zum Verständnis von HTML kennen müssen.

+ +

Voraussetzungen

+ +

Sie benötigen für dieses Modul keine HTML Kenntnisse, allerdings sollten Sie grundsätzlich mit Computern umgehen können und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren). Sie sollten sich bereits eine einfache Arbeitsumgebung eingerichtet haben, wie in Notwendige Software installieren beschrieben; und wissen wie Sie Ihre Dateien erstellen und  ordnen, wie in Dateien nutzen erklärt. Beide Artikel sind Teil unserer Artikelserie Lerne das Internet kennen, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.

+ +
+

Hinweis: Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie JSBin oder Thimble ausprobieren.

+
+ +

Lerneinheiten

+ +

Dieses Modul enthält die folgenden Lerneinheiten, die Ihnen HTML in Theorie und Praxis näher bringen. Es werden viele Möglichkeiten geboten, in denen Sie Ihre neu erworbenen Fähigkeiten ausprobieren können.

+ +
+
Lernen Sie HTML kennen
+
Hier lernen Sie die absoluten Grundlagen von HTML. Für den Anfang werden wir Begriffe, wie "Elemente", "Attribute" und andere wichtige Begriffe definieren und deren Einordung in die Sprache vornehmen. Wir zeigen Ihnen, wie eine HTML-Webseite typischerweise aufgebaut ist, wie eine HTML-Elemente strukturiert sind und erklären weitere grundlegende Sprachfunktionen. Sie können zwischendurch immer wieder mit HTML-Code spielen, damit sie ein Gefühl für die Zusammenhänge bekommen.
+
Was gehört in den Kopf der HTML-Datei?
+
Der Kopf (Head) eines HTML Dokuments ist der Teil, der nicht im Browser angezeigt wird, wenn dieses geladen wird. Im Kopf sind Zusatzinformationen zur Webseite enthalten, zum Beispiel das {{htmlelement("title")}}-Element, das den Titel der Webseite enthält, Links zu {{glossary("CSS")}}-Dateien (mit welchen die Webseite gestaltet wird) und Metadaten (z. B. wer der Autor der Webseite ist und Schlagwörter, welche Suchmaschinen helfen Ihre Webseite einzuordnen).
+
Einfache Textformatierung in HTML
+
Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch Semantics genannt), damit der Browser weiß, wie der Textteil darzustellen ist. In diesem Artikel lernen Sie, wie man mit HTML einen Textblock in Überschriften und Absätze strukturiert, Hervorhebungen und Gewicht zu Wörtern hinzufügt, Listen erstellt und vieles mehr.
+
 Erstellen von Hyperlinks
+
Hyperlinks sind sehr wichtig, denn erst Sie machen das Internet zu einem Netzwerk. Dieser Artikel behandelt die Syntax eines Links und bespricht allgemeine Richtlinien zu Links.
+
Fortgeschrittene Textformatierung
+
Es gibt, neben den im Artikel Einfache Textformatierung in HTML erläuterten, viele weitere HTML-Elemente, mit denen man Texte formatieren kann. Diese HTML-Elemente sind nicht ganz so bekannt, aber es ist dennoch hilfreich, sie zu kennen. Hier lernen Sie, wie man Zitate einbindet, Description Lists (dt. etwa: beschreibende Listen) erstellt, Computer-Code und ähnlichen Text darstellt, Hoch- und Tiefstellung erreicht, Kontaktinformationen anordnet und einiges mehr.
+
Struktur in die Webseite bringen
+
Sie können mit HTML sowohl individuelle Teile der Webseite (wie "einen Absatz" oder "ein Bild"), aber auch ganze Abschnitte der Seite formatieren (wie "die Kopfzeile", "das Naviagtionsmenü" oder "die Hauptinhaltsspalte"). In diesem Artikel geht es um das planen einer grundlegenden Webseitenstruktur und die anschließende Umsetzung dieser Struktur in HTML.
+
Fehlersuche in HTML
+
HTML schreiben zu können ist gut, aber was können Sie tun, wenn etwas nicht funktioniert und Sie den Fehler im Code nicht finden? Dieser Artikel stellt ein paar Werkzeuge vor, die Ihnen bei der Fehlersuche helfen können.
+
+ +

Aufgaben

+ +

Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.

+ +
+
Formatieren Sie einen Brief
+
Wir lernen früher oder später alle, einen formalen Brief zu schreiben. Darüber hinaus ist es auch ein schönes Beispiel um den Wissenstand im Bereich der Textformatierung unter Beweis zu stellen. In dieser Aufgabe sollen Sie einen vorgegebenen Brief mit HTML formatieren.
+
Strukturieren Sie eine Webseite
+
In dieser Übungsaufgabe wird Ihre Fähigkeit getestet, mit HTML eine einfache Webseite zu strukturieren. Diese enthält eine Kopfzeile, eine Fußzeile, ein Navigationsmenü, eine Hauptspalte und eine Randspalte.
+
+ +

Siehe auch

+ +
+
Webgrundlagen Basiskurs 1 (Englisch)
+
Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des Einführung in HTML Moduls, anwendet und festigt. Die Lernenden machen sich in diesem sechsteiligen Modul mit dem Lesen, Schreiben und Teilnehmen im Internet vertraut. Entdecken Sie die Fundamente des Internets durch Erschaffen und Zusammenarbeit.
+
diff --git a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..e2d3e9d636 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -0,0 +1,102 @@ +--- +title: Marking up a letter +slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter +tags: + - Anfänger + - Brief + - HTML + - Links + - Text + - head +translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
+ +

Wir alle lernen früher oder später einen Brief zu schreiben; es ist auch ein nützliches Beispiel, um unsere Textformatierungsfähigkeiten zu testen! Sie erhalten einen Brief, mit dem Sie grundlegende und fortgeschrittene HTML-Formatierungsmöglichkeiten, einschließlich Hyperlinks, testen können und wir werden Ihre Vertrautheit mit einigen HTML <head> Inhalten testen.

+ + + + + + + + + + + + +
Vorwissen:Bevor Sie diese Überprüfung durchführen, sollten Sie bereits Lernen Sie HTML kennen, Was gehört in den Kopf? Metadaten in HTML, Einfache Textformatierung mit HTML, Erstellen von Links, und Fortgeschrittene Textformatierung durchgearbeitet haben.
Ziel:Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML <head> gehört.
+ +

Startpunkt

+ +

Um diese Aufgaben zu starten, rufen Sie den Rohtext auf, den Sie strukturieren sollen, sowie die CSS, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die .html-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie JSBin oder Thimble, um die Aufgaben zu bearbeiten.)

+ +

Projekt: Kurzbeschreibung

+ +

In diesem Projekt ist Ihre Aufgabe, einen Brief zu gestalten, der in einem Universitäts-Intranet gehostet werden soll. Der Brief ist eine Antwort von einer Forschungskollegin an einen zukünftigen Doktoranden, der seine Arbeit an der Universität antritt.

+ +

Block-/Struktursemantik:

+ + + +

Semantik innerhalb des Textes:

+ + + +

Der Kopf (head) des Dokumentes:

+ + + +

Hinweise und Tipps

+ + + +

Beispiel

+ +

Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.

+ +

Example

+ +

Einschätzung

+ +

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}

+ +

In diesem Modul

+ + diff --git a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..fc439ad60b --- /dev/null +++ b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -0,0 +1,99 @@ +--- +title: Structuring a page of content +slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content +translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+ +

Structuring a page of content ready for laying it out using CSS is a very important skill to master, so in this assessment you'll be tested on your ability to think about how a page might end up looking, and choose appropriate structural semantics to build a layout on top of.

+ + + + + + + + + + + + +
Vorbereitungen:Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on Document and website structure.
Ziel: +

Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.

+
+ +

Startpunkt

+ +

Um diese Selbsteinschätzung zu starten, sollten Sie die ZIP-Datei mit allen Startinhalten herunterladen. Die ZIP-Datei enthält:

+ + + +

Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wieJSBin oder Thimble , um den Test zu absolvieren.

+ +

Projekt: Kurzbeschreibung

+ +

Ihre Aufgabe in diesem Projekt ist es, den Inhalt einer Bird Watching-Homepage als Grundlage zu verwenden und ihm Struktur zu geben, sodass ein Page Layout darauf angewendet werden kann. Dazu werden benötigt:

+ + + +

Sie müssen einen passenden Wrapper hinzufügen für:

+ + + +

Sie sollten außerdem:

+ + + +

Hinweise und Tipps

+ + + +

Beispiel

+ +

Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.

+ +

The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message

+ +

Einschätzung

+ +

Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können. Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im Disskussionsthread zu dieser Übung nachfragen oder im #mdn IRC Channel auf Mozilla IRC. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!

+ +

{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}

+ +

In this module

+ + diff --git a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..f775774535 --- /dev/null +++ b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,268 @@ +--- +title: Was gehört in den Kopf der HTML-Datei? +slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML +tags: + - Anfänger + - Beginner + - HTML + - Kopf + - Meta + - Metadaten + - Sprache + - Umlaute + - favicon + - head + - lang +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
+ +

Der Kopf (engl.: head) eines HTML Dokumentes, ist der obere Teil innerhalb des <head>-Elements, welcher nicht direkt im Webbrowser gezeigt wird, wenn die Seite gerendert wird. Er enthält Zusatzinformationen zur Webseite, wie den {{htmlelement("title")}}, Links zu CSS-Dateien und einem Favicon, andere Metadaten, wie den Autor der Webseite und eine kurze Beschreibung für Suchmaschinen. In diesem Artikel geht es um all diese Themen und noch mehr, um Ihnen beizubringen wie Sie den Kopf der HTML-Datei am sinnvollsten nutzen.

+ + + + + + + + + + + + +
Vorwissen:HTML-Grundlagen, wie sie in Lerne HTML kennen abgedeckt werden.
Ziel:Lernen für was der Kopf des HTML-Dokuments da ist, die wichtigsten Dinge die dort hinein gehören und wie sie das HTML-Dokument beeinflussen
+ +

Was ist der HTML-Kopf?

+ +

Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen, mit welchem wir uns im vorherigen Artikel beschäftigt haben:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Meine Testseite</title>
+  </head>
+  <body>
+    <p>Dies ist meine Webseite.</p>
+  </body>
+</html>
+ +

Der HTML-Kopf ist der Inhalt im {{htmlelement("head")}}-Element. Anders als der Inhalt des {{htmlelement("body")}}-Elements, welcher im Browserfenster angezeigt wird, bleibt der Kopf im Browser verborgen. Die Aufgabe des Kopfes ist es, {{glossary("Metadata", "metadata")}} über das Dokument zu beinhalten. In unserem Beispiel ist der Kopf nicht sehr groß:

+ +
<head>
+  <meta charset="utf-8">
+  <title>Meine Testseite</title>
+</head>
+ +

Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <head>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach view-source: vor der Webadresse in die Adresszeile schreiben (z.B. view-source:http://mozilla.org). Unser Ziel hier ist es nicht alle Möglichkeiten zu zeigen, was man in den Kopf schreiben kann, aber wir werden Ihnen die wichtigsten und nützlichsten Dinge vorstellen. Fangen wir an!

+ +

Einen Titel hinzufügen

+ +

Wir haben das {{htmlelement("title")}}-Element schon in Aktion gesehen - es kann genutzt werden, um der Webseite einen Titel hinzuzufügen. Dies kann mit dem {{htmlelement("h1")}}-Element verwechselt werden, welches benutzt wird, um innerhalb des <body>-Elements dem Inhalt der Webseite eine Hauptüberschrift zu geben. Manchmal wird diese Hauptüberschrift auch Titel genannt. Die beiden Elemente sind aber sehr unterschiedlich!

+ + + +

Aktives Lernen: Beispiel anschauen

+ +
    +
  1. Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von title-example.html page herunterladen. Um das zu tun, können Sie entweder + +
      +
    1. Den Code direkt von der Seite kopieren und diesen in eine neue Textdatei in Ihrem Code-Editor einfügen. Vergessen Sie nicht die Datei zu speichern.
      2. +
    2. Drücken Sie auf den "Raw" Button auf der Seite, welcher den Code in einem neuen Browserfenster anzeigen lässt. Wählen Sie nun in Ihrem Browsermenu Datei > Speichere Seite unter... und speichern die Datei auf Ihrem Computer.
      3. +
    +
    2. +
  2. Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen: +

    A simple web page with the title set to <title> element, and the <h1> set to <h1> element.Es sollte hier klar werden, wo das <h1>-Element erscheint und wo das <html>-Element zu sehen ist!

    +
    3. +
  3. Sie sollten auch versuchen, den Code in Ihrem Code-Editor zu öffnen. Ändern Sie den Inhalt der Elemente, speichern Sie die Datei und aktualisieren Sie die Seite im Browser. Probieren Sie ein bisschen herum.
    4. +
+ +

Der Inhalt des <title>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (Lesezeichen > Lesezeichen hinzufügen oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <title>-Elements als Name für das Lesezeichen vorgeschlagen wird.

+ +

A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element

+ +

Der Inhalt des <title>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.

+ +

Metadaten: das <meta>-Element

+ +

Metadaten sind Daten, welche Daten beschreiben. HTML hat einen "offiziellen" Weg, Meatadaten zu einem Dokument hinzuzufügen, das {{htmlelement("meta")}}-Element. Natürlich könnten auch die anderen Dinge, die wir hier besprechen, als Metadaten bezeichnet werden. Es gibt eine Menge verschiedener <meta>-Elemente, welche in das <head>-Element plaziert werden können. Wir werden hier nicht alle erklären, da dies sehr verwirrend werden würde. Statt dessen erklären wir einige Dinge die sie häufig sehen werden, um Ihnen eine Idee zu geben, um was es hier geht.

+ +

Zeichensatz einer Webseite festlegen

+ +

In dem obigen Beispiel war diese Zeile enthalten:

+ +
<meta charset="utf-8">
+ +

Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. utf-8 ist ein universeller Zeichensatz in dem fast jeder Charakter enthalten ist, der in menschlicher Schrift benutzt wird. Das bedeutet, das ihre Webseite fast alle Sprachen anzeigen kann. Es ist also eine gute Idee, dies auf jeder Ihrer Webseiten zu setzen! Wenn Sie diesen nicht benutzen, werden Umlaute (Ä, ö) und ß nicht richtig angezeigt. Zum Beispiel kann Ihre Webseite damit gleichzeitig Englisch und Japanisch anzeigen:

+ +

a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,Wenn Sie Ihren Zeichensatz zum Beispiel auf ISO-8859-1 setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:

+ +

a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly

+ +

Atkives lernen: Experimentieren mit Zeichensätzen

+ +

Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <title>-Element benutzt haben (title-example.html page). Verändern Sie den Wert von meta-charset in ISO-8859-1 und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:

+ +
<p>Japanese example: ご飯が熱い。</p>
+ +

Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <meta charset>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche meta-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.

+ +

 Autor und Beschreibung hinzufügen

+ +

Viele <meta> -Elemente beinhalten name und content Attribute:

+ + + +

Zwei dieser meta-Elemente, bei denen es sinnvoll ist, sie auf Ihrer Webseite zu nutzen, stellen wir hier vor. Sie definieren den Autor (engl.: author) und eine kurze Beschreibung (engl.: description) der Webseite. Schauen wir uns ein Beispiel an:

+ +
<meta name="author" content="Chris Mills">
+<meta name="description" content="The MDN Learning Area aims to provide
+complete beginners to the Web with all they need to know to get
+started with developing web sites and applications.">
+ +

Einen Autor anzugeben ist sinnvoll, um zu zeigen, wer die Webseite geschrieben hat. Vielleicht möchte jemand Kontakt mit dem Autor aufnehmen, da er Fragen zum Inhalt oder zum Code der Webseite hat. Es gibt Seiten, welche automatisch den Autor der Webseite auslesen, um eine Kontaktmöglichkeit zu diesem zu erstellen.

+ +

Eine Beschreibung welche zum Inhalt der Seite passende Stichwörter enthält, ist ein sinnvoller Weg, die Webseite in Suchmaschinen zu relevanten Suchbegriffen weiter oben erscheinen zu lassen. (solche Methoden werden unter dem Begriff Suchmaschinenoptimierung (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)

+ +

Aktives Lernen: Beschreibung für Suchmaschinen

+ +

Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.

+ +
    +
  1. Gehen Sie zu der Startseite von dem Mozilla Developer Network.
    2. +
  2. Schauen Sie sich den Quellcode der Webseite an (Rechts/Ctrl + klick auf die Seite, wählen Sie Quellcode anzeigen von dem Kontextmenü oder schreiben Sie view-source: vor die Webadresse in der Adresszeile).
    3. +
  3. Finden Sie das description <meta>-Tag. Es sollte so aussehen: + 
    <meta name="description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both
+Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
    +
    4. +
  4. Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <meta>-Tag und vom <title> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! A Yahoo search result for "Mozilla Developer Network"
    5. +
+ +
+

Hinweis: Wenn Sie mit Google suchen, werden Sie einige Unterseiten von MDN sehen, direkt unter dem Link zur Hauptseite von MDN. Dies sind sogenannte Sitelinks und Sie können mit den Google's webmaster tools bearbeitet werden.

+
+ +
+

Hinweis: Viele  <meta>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <meta>-Element (<meta name="keywords" content="fill, in, your, keywords, here">).  Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <meta>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.

+
+ +

Andere Typen von Metadaten

+ +

Während Sie sich im Internet umschauen, werden Sie andere Typen von Metadaten entdecken. Einige Funktionen auf Webseiten sind proprietäre Kreationen (zum Beispiel Seiten von Sozialen Netzwerken), welche geschrieben wurden, um bestimmte Informationen zur Verfügung zu stellen.

+ +

Zum Beispiel gibt es Open Graph Data, welches ein Metadatenprotokoll ist, welches von Facebook erfunden wurde, um reichhaltigere Metadaten zur Verfügung zu stellen. Im MDN Quellcode können Sie folgendes finden:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:

+ +

Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.Twitter nutzt ganz ähnliche Metadaten, welche einen ähnlichen Effekt haben. Ein spezifischer Titel, eine Kurzbeschreibung und ein Bild können bei Angabe eines Links angezeigt werden. Als Beispiel:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

Spezielle Icons der Webseite hinzufügen

+ +

Um das Design Ihrer Webseite weiter zu verschönern, können Sie in den Metadaten eine Referenz zu einem speziellen Icon-Set hinzufügen. Diese werden dann in einem bestimmten Kontext angezeigt.

+ +

Das Favicon, welches es schon seit vielen Jahren gibt, ist das erste Icon seiner Art. Es ist 16 x 16 Pixel groß und wird an verschiedenen Stellen genutzt. Sie können Favicons vor dem Titel einer Webseite in den meisten Browser-Tabs sehen. Auch wenn Sie eine Seite Ihren Lesezeichen hinzufügen, wird dort das Favicon verwendet.

+ +

Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:

+ +
    +
  1. Speichern Sie das Favicon mit der Endung .ico in dem selben Ordner, in dem auch Ihre index.html Datei ist. Die meisten Browser würden auch .gif und .png Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.
    2. +
  2. Fügen Sie die folgende Zeile in den <head>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:

+ +

The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.

+ +

Es gibt heutzutage viele andere Icon-Typen die man der Webseite hinzufügen kann. Zum Beispiel werden Sie folgendes im Quellcode der MDN Startseite finden:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

Die Kommentare erklären für was die verschiedenen Icons da sind. Zum Beispiel gibt es ein hochauflösendes Icon, welches angezeigt wird, wenn die Webseite auf dem Startbildschirm eines IPad's gespeichert wird.

+ +

Machen Sie sich nicht zu viele Sorgen, all diese Icons müssen Sie nicht direkt in Ihrer Webseite haben. Sie sind eher ein Feature für fortgeschrittene Webentwickler und werden nicht zur Absolvierung dieses Kurses benötigt. Sie sollen hier nur erfahren für was diese Code-Zeilen stehen, wenn Sie diese im Quellcode anderer Webseiten sehen.

+ +

CSS und JavaScript der HTML-Datei hinzufügen

+ +

Fast alle modernen Webseiten benutzen {{glossary("CSS")}}, um diese gut aussehen zu lassen und {{glossary("JavaScript")}} um interaktive Elemente hinzuzufügen, wie Video-Spieler, Karten, Spiele und vieles mehr. Diese werden der HTML-Datei normalerweise wie folgt hinzugefügt:

+ + + +

Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein

+ +
    +
  1. Holen Sie sich jeweils eine Kopie von unseren meta-example.html, script.js und style.css-Dateien und speichern diese lokal auf ihrem Computer in demselben Ordner ab. Gehen Sie sicher das die Dateien mit den richtigen Namen und Dateiendungen gespeichert sind.
    2. +
  2. Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.
    3. +
  3. Fügen Sie nun ein {{htmlelement("link")}}-Element hinzu, welches auf die CSS-Datei verweist und ein {{htmlelement("script")}}-Element, welches die JavaScript-Datei einbindet, wie Sie es in diesem Artikel gelernt haben.
    4. +
+ +

Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:

+ +

Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.

+ + + +
+

Hinweis: Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere css-and-js.html Beispiel Webseite an.

+
+ +

Die genutzte Sprache der Webseite angeben

+ +

Am Ende soll hier noch angemerkt werden, das Sie die genutzte Sprache auf der Webseite angeben können und sollten. Dies kann einfach gemacht werden indem Sie das lang-Attribut dem öffnenden HTML-Tag hinzufügen (wie auf meta-example.html gemacht und es unten gezeigt wird).

+ +
<html lang="de">
+ +

Dies ist in vielerlei Hinsicht eine hilfreiche Angabe. Ihr HTML-Dokument wird effizienter von Suchmaschinen aufgenommen, wenn die Sprache angegeben ist. Auch für Screenreader ist die Angabe der Sprache am Beginn des Dokumentes wichtig.

+ +

Sie können auch für Bereiche Ihrer Webseite eine andere Sprache angeben. Zum Beispiel könnten Sie einen Bereich, in welchem japanischer Text steht, wie folgt angeben:

+ +
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>
+ +

Die Ländercodes werden im ISO 639-1 Standard definiert. Sie können hier mehr darüber lesen: Language tags in HTML and XML (in Englisch)

+ +

Zusammenfassung

+ +

Dies ist das Ende unseres Exkurses über den Kopf der HTML-Datei. Es gäbe noch einiges mehr, was man dort tun könnte, aber es wäre für einen Anfänger nicht hilfreich. Die meistgenutzten Sachen haben wir hier erklärt. Weiter geht es mit Einfache Textformatierung in HTML.

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

diff --git a/files/de/learn/html/tables/basics/index.html b/files/de/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..a10e286570 --- /dev/null +++ b/files/de/learn/html/tables/basics/index.html @@ -0,0 +1,555 @@ +--- +title: Grundtabellen in HTML +slug: Learn/HTML/Tables/Grund_tabelle_HTML +translation_of: Learn/HTML/Tables/Basics +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +

Wir beginnen hier mit Grundlagen von Tabellen durch HTML Markierungen. Die Topiken in diesem Artikel steigen Zellen, Zeilen, Spalten, Überschriften, Gliederung, Unterteilungen und auch Stile ein.

+ + + + + + + + + + + + +
Vorwissen:HTML Grundlagen (siehe Einführung in HTML).
Ziel:To gain basic familiarity with HTML tables.
+ +

What is a table ?

+ +

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

+ +

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

+ +

A swimming timetable showing a sample data table

+ +

Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:

+ +

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

+ +

It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.

+ +

How does a table work?

+ +

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
NameMass (1024kg)Diameter (km)Density (kg/m3)Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
Terrestial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
Venus4.8712,10452438.92802.0108.24640
Earth5.9712,75655149.824.0149.6151Our world
Mars0.6426,79239333.724.7227.9-652The red planet
Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
Saturn568120,5366879.010.71433.5-14062
Ice giantsUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255Declassified as a planet in 2006, but this remains controversial.
+ +

When done correctly, even blind people can interpret tabular data in an HTML table — a successful HTML table should enhance the experience of sighted and visually impaired users alike.

+ +

Table styling

+ +

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

+ +

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

+ +

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

+ +

When should you NOT use HTML tables?

+ +

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

+ +

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

+ +
    +
  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
    2. +
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
    3. +
  3. Tables are not automatically responsive: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
    4. +
+ +

Active learning: Creating your first table

+ +

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

+ +
    +
  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
    2. +
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
    3. +
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags: + 
    <td>Hi, I'm your first cell.</td>
    +
    4. +
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: + 
    <td>Hi, I'm your first cell.</td>
+<td>I'm your second cell.</td>
+<td>I'm your third cell.</td>
+<td>I'm your fourth cell.</td>
    +
    5. +
+ +

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

+ +

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

+ +
    +
  1. Place the four cells you've already created inside <tr> tags, like so: + + 
    <tr>
+  <td>Hi, I'm your first cell.</td>
+  <td>I'm your second cell.</td>
+  <td>I'm your third cell.</td>
+  <td>I'm your fourth cell.</td>
+</tr>
    +
    2. +
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.
    3. +
+ +

This should result in a table that looks something like the following:

+ + + + + + + + + + + + + + + + +
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
+ +
+

Note: You can also find this on GitHub as simple-table.html (see it live also).

+
+ +

Adding headers with <th> elements

+ +

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

+ +
<table>
+  <tr>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
+  </tr>
+  <tr>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
+  </tr>
+  <tr>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
+  </tr>
+  <tr>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
+  </tr>
+  <tr>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
+  </tr>
+</table>
+ +

Now the actual rendered table:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
+ +

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

+ +

Active learning: table headers

+ +

Let's have a go at improving this table.

+ +
    +
  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
    2. +
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
    3. +
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.
    4. +
+ +
+

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

+
+ +

Why are headers useful?

+ +

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

+ +
+

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

+
+ +

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

+ +

Allowing cells to span multiple rows and columns

+ +

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

+ +

The initial markup looks like this:

+ +
<table>
+  <tr>
+    <th>Animals</th>
+  </tr>
+  <tr>
+    <th>Hippopotamus</th>
+  </tr>
+  <tr>
+    <th>Horse</th>
+    <td>Mare</td>
+  </tr>
+  <tr>
+    <td>Stallion</td>
+  </tr>
+  <tr>
+    <th>Crocodile</th>
+  </tr>
+  <tr>
+    <th>Chicken</th>
+    <td>Hen</td>
+  </tr>
+  <tr>
+    <td>Rooster</td>
+  </tr>
+</table>
+ +

But the output doesn't give us quite what we want:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
+ +

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

+ +

Let's use colspan and rowspan to improve this table.

+ +
    +
  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
    2. +
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
    3. +
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
    4. +
  4. Save and open your code in a browser to see the improvement.
    5. +
+ +
+

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

+
+ + +
+ +

Providing common styling to columns

+ +

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

+ +

Take the following simple example:

+ +
<table>
+  <tr>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
+  </tr>
+</table>
+ +

Which gives us the following result:

+ + + + + + + + + + + + + + + + +
Data 1Data 2
CalcuttaOrange
RobotsJazz
+ +

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

+ +
<table>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
+  <tr>
+    <th>Data 1</th>
+    <th>Data 2</th>
+  </tr>
+  <tr>
+    <td>Calcutta</td>
+    <td>Pizza</td>
+  </tr>
+  <tr>
+    <td>Robots</td>
+    <td>Jazz</td>
+  </tr>
+</table>
+ +

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column also.

+ +

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

+ +
<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+ +

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

+ +

Active learning: colgroup and col

+ +

Now it's time to have a go yourself.

+ +

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

+ +

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

+ +

Recreate the table by following the steps below.

+ +
    +
  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
    2. +
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
    3. +
  3. The first two columns need to be left unstyled.
    4. +
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
    5. +
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
    6. +
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
    7. +
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
    8. +
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;
    9. +
+ +

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).

+ +

Summary

+ +

That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.

+ +
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
+ +
+

In this module

+ + +
diff --git a/files/de/learn/html/tables/grund_tabelle_html/index.html b/files/de/learn/html/tables/grund_tabelle_html/index.html deleted file mode 100644 index a10e286570..0000000000 --- a/files/de/learn/html/tables/grund_tabelle_html/index.html +++ /dev/null @@ -1,555 +0,0 @@ ---- -title: Grundtabellen in HTML -slug: Learn/HTML/Tables/Grund_tabelle_HTML -translation_of: Learn/HTML/Tables/Basics ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -

Wir beginnen hier mit Grundlagen von Tabellen durch HTML Markierungen. Die Topiken in diesem Artikel steigen Zellen, Zeilen, Spalten, Überschriften, Gliederung, Unterteilungen und auch Stile ein.

- - - - - - - - - - - - -
Vorwissen:HTML Grundlagen (siehe Einführung in HTML).
Ziel:To gain basic familiarity with HTML tables.
- -

What is a table ?

- -

A table is a structured set of data made up of rows and columns (tabular data). A table allows you to quickly and easily look up values that indicate some kind of connection between different types of data, for example a person and their age, or a day of the week, or the timetable for a local swimming pool.

- -

A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.

- -

A swimming timetable showing a sample data table

- -

Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:

- -

A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.

- -

It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.

- -

How does a table work?

- -

The point of a table is that it is rigid. Information is easily interpreted by making visual associations between row and column headers. Look at the table below for example and find a Jovian gas giant with 62 moons. You can find the answer by associating the relevant row and column headers.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Data about the planets of our solar system (Planetary facts taken from Nasa's Planetary Fact Sheet - Metric.
NameMass (1024kg)Diameter (km)Density (kg/m3)Gravity (m/s2)Length of day (hours)Distance from Sun (106km)Mean temperature (°C)Number of moonsNotes
Terrestial planetsMercury0.3304,87954273.74222.657.91670Closest to the Sun
Venus4.8712,10452438.92802.0108.24640
Earth5.9712,75655149.824.0149.6151Our world
Mars0.6426,79239333.724.7227.9-652The red planet
Jovian planetsGas giantsJupiter1898142,984132623.19.9778.6-11067The largest planet
Saturn568120,5366879.010.71433.5-14062
Ice giantsUranus86.851,11812718.717.22872.5-19527
Neptune10249,528163811.016.14495.1-20014
Dwarf planetsPluto0.01462,37020950.7153.35906.4-2255Declassified as a planet in 2006, but this remains controversial.
- -

When done correctly, even blind people can interpret tabular data in an HTML table — a successful HTML table should enhance the experience of sighted and visually impaired users alike.

- -

Table styling

- -

You can also have a look at the live example on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.

- -

Be under no illusion; for tables to be effective on the web, you need to provide some styling information with CSS, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our Styling tables article after you've finished here.

- -

We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the stylesheet here, and you can also find an HTML template that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.

- -

When should you NOT use HTML tables?

- -

HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at Page Layouts in our Accessibility Learning Module. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.

- -

In short, using tables for layout rather than CSS layout techniques is a bad idea. The main reasons are as follows:

- -
    -
  1. Layout tables reduce accessibility for visually impaired users: Screenreaders, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.
    2. -
  2. Tables produce tag soup: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.
    3. -
  3. Tables are not automatically responsive: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.
    4. -
- -

Active learning: Creating your first table

- -

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

- -
    -
  1. First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
    2. -
  2. The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
    3. -
  3. The smallest container inside a table is a table cell, which is created by a <td> element ('td' stands for 'table data'). Add the following inside your table tags: - 
    <td>Hi, I'm your first cell.</td>
    -
    4. -
  4. If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: - 
    <td>Hi, I'm your first cell.</td>
-<td>I'm your second cell.</td>
-<td>I'm your third cell.</td>
-<td>I'm your fourth cell.</td>
    -
    5. -
- -

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

- -

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

- -
    -
  1. Place the four cells you've already created inside <tr> tags, like so: - - 
    <tr>
-  <td>Hi, I'm your first cell.</td>
-  <td>I'm your second cell.</td>
-  <td>I'm your third cell.</td>
-  <td>I'm your fourth cell.</td>
-</tr>
    -
    2. -
  2. Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <tr> element, with each cell contained in a <td>.
    3. -
- -

This should result in a table that looks something like the following:

- - - - - - - - - - - - - - - - -
Hi, I'm your first cell.I'm your second cell.I'm your third cell.I'm your fourth cell.
Second row, first cell.Cell 2.Cell 3.Cell 4.
- -
-

Note: You can also find this on GitHub as simple-table.html (see it live also).

-
- -

Adding headers with <th> elements

- -

Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:

- -
<table>
-  <tr>
-    <td>&nbsp;</td>
-    <td>Knocky</td>
-    <td>Flor</td>
-    <td>Ella</td>
-    <td>Juan</td>
-  </tr>
-  <tr>
-    <td>Breed</td>
-    <td>Jack Russell</td>
-    <td>Poodle</td>
-    <td>Streetdog</td>
-    <td>Cocker Spaniel</td>
-  </tr>
-  <tr>
-    <td>Age</td>
-    <td>16</td>
-    <td>9</td>
-    <td>10</td>
-    <td>5</td>
-  </tr>
-  <tr>
-    <td>Owner</td>
-    <td>Mother-in-law</td>
-    <td>Me</td>
-    <td>Me</td>
-    <td>Sister-in-law</td>
-  </tr>
-  <tr>
-    <td>Eating Habits</td>
-    <td>Eats everyone's leftovers</td>
-    <td>Nibbles at food</td>
-    <td>Hearty eater</td>
-    <td>Will eat till he explodes</td>
-  </tr>
-</table>
- -

Now the actual rendered table:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
KnockyFlorEllaJuan
BreedJack RussellPoodleStreetdogCocker Spaniel
Age169105
OwnerMother-in-lawMeMeSister-in-law
Eating HabitsEats everyone's leftoversNibbles at foodHearty eaterWill eat till he explodes
- -

The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.

- -

Active learning: table headers

- -

Let's have a go at improving this table.

- -
    -
  1. First, make a local copy of our dogs-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.
    2. -
  2. To recognize the table headers as headers, both visually and semantically, you can use the <th> element ('th' stands for 'table header'). This works in exactly the same way as a <td>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <td> elements surrounding the table headers into <th> elements.
    3. -
  3. Save your HTML and load it in a browser, and you should see that the headers now look like headers.
    4. -
- -
-

Note: You can find our finished example at dogs-table-fixed.html on GitHub (see it live also).

-
- -

Why are headers useful?

- -

We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.

- -
-

Note: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.

-
- -

Tables headers also have an added benefit — along with the scope attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.

- -

Allowing cells to span multiple rows and columns

- -

Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.

- -

The initial markup looks like this:

- -
<table>
-  <tr>
-    <th>Animals</th>
-  </tr>
-  <tr>
-    <th>Hippopotamus</th>
-  </tr>
-  <tr>
-    <th>Horse</th>
-    <td>Mare</td>
-  </tr>
-  <tr>
-    <td>Stallion</td>
-  </tr>
-  <tr>
-    <th>Crocodile</th>
-  </tr>
-  <tr>
-    <th>Chicken</th>
-    <td>Hen</td>
-  </tr>
-  <tr>
-    <td>Rooster</td>
-  </tr>
-</table>
- -

But the output doesn't give us quite what we want:

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
Animals
Hippopotamus
HorseMare
Stallion
Crocodile
ChickenHen
Rooster
- -

We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the colspan and rowspan attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, colspan="2" makes a cell span two columns.

- -

Let's use colspan and rowspan to improve this table.

- -
    -
  1. First, make a local copy of our animals-table.html and minimal-table.css files in a new directory on your local machine. The HTML contains the same animals example as you saw above.
    2. -
  2. Next, use colspan to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.
    3. -
  3. Finally, use rowspan to make "Horse" and "Chicken" span across two rows.
    4. -
  4. Save and open your code in a browser to see the improvement.
    5. -
- -
-

Note: You can find our finished example at animals-table-fixed.html on GitHub (see it live also).

-
- - -
- -

Providing common styling to columns

- -

There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <col> and <colgroup> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on every <td> or <th> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.

- -

Take the following simple example:

- -
<table>
-  <tr>
-    <th>Data 1</th>
-    <th style="background-color: yellow">Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td style="background-color: yellow">Pizza</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td style="background-color: yellow">Jazz</td>
-  </tr>
-</table>
- -

Which gives us the following result:

- - - - - - - - - - - - - - - - -
Data 1Data 2
CalcuttaOrange
RobotsJazz
- -

This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <col> element. <col> elements are  specified inside a <colgroup> container just below the opening <table> tag. We could create the same effect as we see above by specifying our table as follows:

- -
<table>
-  <colgroup>
-    <col>
-    <col style="background-color: yellow">
-  </colgroup>
-  <tr>
-    <th>Data 1</th>
-    <th>Data 2</th>
-  </tr>
-  <tr>
-    <td>Calcutta</td>
-    <td>Pizza</td>
-  </tr>
-  <tr>
-    <td>Robots</td>
-    <td>Jazz</td>
-  </tr>
-</table>
- -

Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <col> element — if we didn't, the styling would just be applied to the first column also.

- -

If we wanted to apply the styling information to both columns, we could just include one <col> element with a span attribute on it, like this:

- -
<colgroup>
-  <col style="background-color: yellow" span="2">
-</colgroup>
- -

Just like colspan and rowspan, span takes a unitless number value that specifies the number of columns you want the styling to apply to.

- -

Active learning: colgroup and col

- -

Now it's time to have a go yourself.

- -

Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.

- -

{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}

- -

Recreate the table by following the steps below.

- -
    -
  1. First, make a local copy of our timetable.html file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.
    2. -
  2. Add a <colgroup> element at the top of the table, just underneath the <table> tag, in which you can add your <col> elements (see the remaining steps below).
    3. -
  3. The first two columns need to be left unstyled.
    4. -
  4. Add a background color to the third column. The value for your style attribute is background-color:#97DB9A;
    5. -
  5. Set a separate width on the fourth column. The value for your style attribute is width: 42px;
    6. -
  6. Add a background color to the fifth column. The value for your style attribute is background-color: #97DB9A;
    7. -
  7. Add a different background color plus a border to the sixth column, to signify that this is a special day and she's teaching a new class. The values for your style attribute are background-color:#DCC48E; border:4px solid #C1437A;
    8. -
  8. The last two days are free days, so just set them to no background color but a set width; the value for the style attribute is width: 42px;
    9. -
- -

See how you get on with the example. If you get stuck, or want to check your work, you can find our version on GitHub as timetable-fixed.html (see it live also).

- -

Summary

- -

That just about wraps up the basics of HTML Tables. In the next article we will look at some slightly more advanced table features, and start to think how accessible they are for visually impaired people.

- -
{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
- -
-

In this module

- - -
diff --git a/files/de/learn/javascript/bausteine/ereignisse/index.html b/files/de/learn/javascript/bausteine/ereignisse/index.html deleted file mode 100644 index c07922c124..0000000000 --- a/files/de/learn/javascript/bausteine/ereignisse/index.html +++ /dev/null @@ -1,587 +0,0 @@ ---- -title: Einleitung der Ereignissen -slug: Learn/JavaScript/Bausteine/Ereignisse -translation_of: Learn/JavaScript/Building_blocks/Events ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
- -

Events oder auch Ereignisse sind Vorfälle die im System ausgelöst werden können. Auf diese Events wird vom System aufmerksam gemacht und es ust  möglich, in irgendeiner Art und Weise darauf zu reagieren.
- Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.
- In diesem Artikel besprechen wir einige wichtige Konzepte rund um  die Events und deren Funktionsweise im Browser. Wir werden hierbei nicht auf jedes Detail eingehen und nur das bis zum jetzigen Wissensstandpunkt nötigste abdecken.

- - - - - - - - - - - - -
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps.
Objective:To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.
- -

A series of fortunate events

- -

As mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and also provides a mechanism by which some kind of action can be automatically taken (that is, some code running) when the event occurs. For example in an airport when the runway is clear for a plane to take off, a signal is communicated to the pilot, and as a result, they commence piloting the plane.

- -

- -

In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are a lot of different types of events that can occur, for example:

- - - -

You can gather from this (and from glancing at the MDN Event reference) that there are a lot of events that can be responded to.

- -

Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are registering an event handler. Note that event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

- -
-

Note: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.

-
- -

A simple example

- -

Let's look at a simple example to explain what we mean here. You've already seen events and event handlers used in many of the examples in this course already, but let's recap just to cement our knowledge. In the following example, we have a single {{htmlelement("button")}}, which when pressed, makes the background change to a random color:

- -
<button>Change color</button>
- - - -

The JavaScript looks like so:

- -
const btn = document.querySelector('button');
-
-function random(number) {
-  return Math.floor(Math.random() * (number+1));
-}
-
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

In this code, we store a reference to the button inside a constant called btn, using the {{domxref("Document.querySelector()")}} function. We also define a function that returns a random number. The third part of the code is the event handler. The btn constant points to a <button> element, and this type of object has a number of events that can fire on it, and therefore, event handlers available. We are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <body> background-color equal to it.

- -

This code is run whenever the click event fires on the <button> element, that is, whenever a user clicks on it.

- -

The example output is as follows:

- -

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

- -

It's not just web pages

- -

Another thing worth mentioning at this point is that events are not unique to JavaScript — most programming languages have some kind of event model, and the way the model works often differs from JavaScript's way. In fact, the event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments.

- -

For example, Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The Node.js event model relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once. The HTTP connect event docs provide a good example of use.

- -

As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

- -

You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.

- -

Ways of using web events

- -

There are a number of ways in which you can add event listener code to web pages so that it will be run when the associated event fires. In this section, we review the various mechanisms and discuss which ones you should use.

- -

Event handler properties

- -

These are the properties that exist to contain event handler code that we have seen most frequently during the course. Returning to the above example:

- -
const btn = document.querySelector('button');
-
-btn.onclick = function() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -

The onclick property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. btn.textContent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button.

- -

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

- -
const btn = document.querySelector('button');
-
-function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.onclick = bgChange;
- -

There are many different event handler properties available. Let's do an experiment.

- -

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

- - - -

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

- -

Inline event handlers — don't use these

- -

You might also see a pattern like this in your code:

- -
<button onclick="bgChange()">Press me</button>
-
- -
function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (or inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

- -
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
- -

You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

- -

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

- -

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

- -
const buttons = document.querySelectorAll('button');
-
-for (let i = 0; i < buttons.length; i++) {
-  buttons[i].onclick = bgChange;
-}
- -

Note that another option here would be to use the forEach() built-in method available on NodeList objects:

- -
buttons.forEach(function(button) {
-  button.onclick = bgChange;
-});
- -
-

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

-
- -

addEventListener() and removeEventListener()

- -

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

- -
const btn = document.querySelector('button');
-
-function bgChange() {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

- -
btn.addEventListener('click', function() {
-  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  document.body.style.backgroundColor = rndCol;
-});
- -

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

- -
btn.removeEventListener('click', bgChange);
- -

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate.

- -

Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:

- -
myElement.onclick = functionA;
-myElement.onclick = functionB;
- -

The second line overwrites the value of onclick set by the first line. This would work, however:

- -
myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);
- -

Both functions would now run when the element is clicked.

- -

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

- -

What mechanism should I use?

- -

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

- -

The other two are relatively interchangeable, at least for simple uses:

- - - -

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

- -
element.onclick = function1;
-element.onclick = function2;
-etc.
- -
-

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

-
- -

Other event concepts

- -

In this section, we briefly cover some advanced concepts that are relevant to events. It is not important to understand these concepts fully at this point, but they might serve to explain some code patterns you'll likely come across from time to time.

- -

Event objects

- -

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

- -
function bgChange(e) {
-  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
-  e.target.style.backgroundColor = rndCol;
-  console.log(e);
-}
-
-btn.addEventListener('click', bgChange);
- -
-

Note: You can find the full source code for this example on GitHub (also see it running live).

-
- -

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

- -
-

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to be consistent — with yourself, and with others if possible.

-
- -

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

- -
const divs = document.querySelectorAll('div');
-
-for (let i = 0; i < divs.length; i++) {
-  divs[i].onclick = function(e) {
-    e.target.style.backgroundColor = bgChange();
-  }
-}
- -

The output is as follows (try clicking around on it — have fun):

- - - -

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

- -

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object; see the {{domxref("Event")}} object reference for a full list. Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

- -

Preventing default behavior

- -

Sometimes, you'll come across a situation where you want to prevent an event from doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

- -

The trouble comes when the user has not submitted the data correctly — as a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

- -

First, a simple HTML form that requires you to enter your first and last name:

- -
<form>
-  <div>
-    <label for="fname">First name: </label>
-    <input id="fname" type="text">
-  </div>
-  <div>
-    <label for="lname">Last name: </label>
-    <input id="lname" type="text">
-  </div>
-  <div>
-     <input id="submit" type="submit">
-  </div>
-</form>
-<p></p>
- - - -

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

- -
const form = document.querySelector('form');
-const fname = document.getElementById('fname');
-const lname = document.getElementById('lname');
-const para = document.querySelector('p');
-
-form.onsubmit = function(e) {
-  if (fname.value === '' || lname.value === '') {
-    e.preventDefault();
-    para.textContent = 'You need to fill in both names!';
-  }
-}
- -

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is OK for example purposes. The output is as follows:

- -

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

- -
-

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

-
- -

Event bubbling and capture

- -

The final subject to cover here is something that you won't come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

- - - -

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

- -

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

- -
<button>Display video</button>
-
-<div class="hidden">
-  <video>
-    <source src="rabbit320.mp4" type="video/mp4">
-    <source src="rabbit320.webm" type="video/webm">
-    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
-  </video>
-</div>
- -

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

- -
btn.onclick = function() {
-  videoBox.setAttribute('class', 'showing');
-}
- -

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

- -
videoBox.onclick = function() {
-  videoBox.setAttribute('class', 'hidden');
-};
-
-video.onclick = function() {
-  video.play();
-};
- -

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

- -

Bubbling and capturing explained

- -

When an event is fired on an element that has parent elements (in this case, the {{htmlelement("video")}} has the {{htmlelement("div")}} as a parent), modern browsers run two different phases — the capturing phase and the bubbling phase.

- -

In the capturing phase:

- - - -

In the bubbling phase, the exact opposite occurs:

- - - -

- -

(Click on image for bigger diagram)

- -

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

- - - -
-

Note: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.

-
- -

Fixing the problem with stopPropagation()

- -

This is annoying behavior, but there is a way to fix it! The standard Event object has a function available on it called stopPropagation() which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run.

- -

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

- -
video.onclick = function(e) {
-  e.stopPropagation();
-  video.play();
-};
- -

You can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

- -
-

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

-
- -
-

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

-
- -

Event delegation

- -

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

- -

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

- -

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

- -

Test your skills!

- -

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Events.

- -

Conclusion

- -

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

- -

Also, it is important to understand that the different contexts in which JavaScript is used have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

- -

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

- -

See also

- - - -

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

- -

In this module

- - diff --git a/files/de/learn/javascript/bausteine/index.html b/files/de/learn/javascript/bausteine/index.html deleted file mode 100644 index 1c6fb8fc46..0000000000 --- a/files/de/learn/javascript/bausteine/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: JavaScript Bausteine -slug: Learn/JavaScript/Bausteine -translation_of: Learn/JavaScript/Building_blocks ---- -
{{LearnSidebar}}
- -

In diesem Modul betrachten wir weiterhin JavaScripts Kernfunktionen. Wir betrachten verschiedene, häufig vorkommende Arten von Code Blöcken, wie zum Beispiel Fallunterscheidungen, Schleifen, Funktionen und Events. Diese hast du bereits im Laufe des Kurses gesehen, allerdings nur "nebenbei" -  jetzt behandeln wir sie explizit.

- -

Vorraussetzungen

- -

Bevor du mit diesem Modul anfängst, solltest du mit den Grundlagen von HTML und CSS vertraut sein und das vorherige Modul, Erste Schritte mit JavaScript, abgeschlossen haben.

- -
-

Hinweis: Falls du auf einem Computer/Tablet/anderem Gerät arbeitest, auf dem du keine Dateien erstellen kannst, kannst du die (meisten) Code Beispiele online, zum Beispiel mit JSBin oder Thimble, ausprobieren.

-
- -

Anleitungen

- -
-
Entscheidungen treffen --- Fallunterscheidungen
-
In allen Programmiersprachen muss Code Entscheidungen treffen und bei unterschiedlichen Eingaben entsprechend handeln. Falls zum Beispiel in einem Spiel der Spieler keine Leben mehr übrig hat, so hat er das Spiel verloren. In einer Wetter-App soll beispielsweise morgens ein Sonnenaufgang als Hintergrund gezeigt werden, nachts jedoch Mond und Sterne. In diesem Artikel betrachten wir Fallunterscheidungen und wie diese in JavaScript funktionieren.
-
Code wiederholen
-
Manchmal soll eine Aufgabe mehr als einmal ausgeführt werden, zum Beispiel wenn eine Liste an Namen durchsucht wird. Um solche Aufgaben zu erledigen, sind Schleifen eine gute Lösung. Im folgenden Artikel werden wir Schleifen in JavaScript genauer betrachten.
-
Funktionen -- Wiederverwendbare Codeblöcke
-
Ein essentielles Konzept in der Programmierung sind Funktionen. Funktionen erlauben es, Code, der eine bestimmte Aufgabe erfüllt, in einem eigenen Block zu definieren. Anschließend kann dieser Code über ein einzelnes, kurzes Kommando aufgerufen werden, anstatt den ganzen Code mehrere Male tippen zu müssen. In diesem Artikel erkunden wir die Konzepte hinter Funktionen wie die grundlegende Syntax oder wie diese aufgerufen werden und definieren die Begriffe Funktion, Sichtbereich (Scope) und Parameter.
-
Baue deine eigene Funktion
-
Nach dem der Großteil der grundlegenden Theorie im vorherigen Artikel thematisiert wurde, bietet dieser Artikel eine praktische Erfahrung. Hier bekommst du etwas Übung im Erstellen deiner eigenen Funktion. Außerdem werden wir einige weitere nützliche Details für das Arbeiten mit Funktionen behandeln. 
-
Rückgabewerte von Funktionen
-
Es gibt ein weiteres essentielles Konzept, dass wir in diesem Kurs behandeln werden, um unsere Betrachtung von Funktionne abzuschließen --- Rückgabewerte. Manche Funktionen geben keinen "sinnvollen" Wert zurück, andere schon. Es ist wichtig zu verstehen, was diese Werte sind, wie sie benutzt werden und wie du Funktionen schreibst, die sinnvolle Werte zurückgeben.
-
Einführung in Events
-
Events sind Aktionen oder Ereignisse die in dem System, in dem du programmierts, passieren. Das System weist dich auf diese hin, so dass du gegebenenfalls entsprechend reagieren kannst. Klickt ein Nutzer beispielsweise auf einen Button auf einer Webseite, so möchtest du vermutlich darauf reagieren, in dem du eine Aktion ausführst. In diesem Artikel behandeln wir einige wichtige Konzepte bezüglich Events und betrachten deren Funktionsweise in Browsern.
-
- -

Prüfungen

- -

Die folgenden Aufgaben werden dein Verständnis der in diesen Artikeln behandelten JavaScript Grundlagen prüfen. 

- -
-
Bildergalerie
-
Jetzt wo wir die grundlegenden Bausteine JavaScripts betrachtet haben, werden wir dein Wissen über Schleifen, Funktionen, Fallunterscheidungen und Events testen, indem wir eine JavaScript-basierte Bildergalerie entwickeln.
-
diff --git a/files/de/learn/javascript/building_blocks/events/index.html b/files/de/learn/javascript/building_blocks/events/index.html new file mode 100644 index 0000000000..c07922c124 --- /dev/null +++ b/files/de/learn/javascript/building_blocks/events/index.html @@ -0,0 +1,587 @@ +--- +title: Einleitung der Ereignissen +slug: Learn/JavaScript/Bausteine/Ereignisse +translation_of: Learn/JavaScript/Building_blocks/Events +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
+ +

Events oder auch Ereignisse sind Vorfälle die im System ausgelöst werden können. Auf diese Events wird vom System aufmerksam gemacht und es ust  möglich, in irgendeiner Art und Weise darauf zu reagieren.
+ Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.
+ In diesem Artikel besprechen wir einige wichtige Konzepte rund um  die Events und deren Funktionsweise im Browser. Wir werden hierbei nicht auf jedes Detail eingehen und nur das bis zum jetzigen Wissensstandpunkt nötigste abdecken.

+ + + + + + + + + + + + +
Prerequisites:Basic computer literacy, a basic understanding of HTML and CSS, JavaScript first steps.
Objective:To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.
+ +

A series of fortunate events

+ +

As mentioned above, events are actions or occurrences that happen in the system you are programming — the system produces (or "fires") a signal of some kind when an event occurs, and also provides a mechanism by which some kind of action can be automatically taken (that is, some code running) when the event occurs. For example in an airport when the runway is clear for a plane to take off, a signal is communicated to the pilot, and as a result, they commence piloting the plane.

+ +

+ +

In the case of the Web, events are fired inside the browser window, and tend to be attached to a specific item that resides in it — this might be a single element, set of elements, the HTML document loaded in the current tab, or the entire browser window. There are a lot of different types of events that can occur, for example:

+ + + +

You can gather from this (and from glancing at the MDN Event reference) that there are a lot of events that can be responded to.

+ +

Each available event has an event handler, which is a block of code (usually a JavaScript function that you as a programmer create) that will be run when the event fires. When such a block of code is defined to be run in response to an event firing, we say we are registering an event handler. Note that event handlers are sometimes called event listeners — they are pretty much interchangeable for our purposes, although strictly speaking, they work together. The listener listens out for the event happening, and the handler is the code that is run in response to it happening.

+ +
+

Note: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.

+
+ +

A simple example

+ +

Let's look at a simple example to explain what we mean here. You've already seen events and event handlers used in many of the examples in this course already, but let's recap just to cement our knowledge. In the following example, we have a single {{htmlelement("button")}}, which when pressed, makes the background change to a random color:

+ +
<button>Change color</button>
+ + + +

The JavaScript looks like so:

+ +
const btn = document.querySelector('button');
+
+function random(number) {
+  return Math.floor(Math.random() * (number+1));
+}
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

In this code, we store a reference to the button inside a constant called btn, using the {{domxref("Document.querySelector()")}} function. We also define a function that returns a random number. The third part of the code is the event handler. The btn constant points to a <button> element, and this type of object has a number of events that can fire on it, and therefore, event handlers available. We are listening for the click event firing, by setting the onclick event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <body> background-color equal to it.

+ +

This code is run whenever the click event fires on the <button> element, that is, whenever a user clicks on it.

+ +

The example output is as follows:

+ +

{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}

+ +

It's not just web pages

+ +

Another thing worth mentioning at this point is that events are not unique to JavaScript — most programming languages have some kind of event model, and the way the model works often differs from JavaScript's way. In fact, the event model in JavaScript for web pages differs from the event model for JavaScript as it is used in other environments.

+ +

For example, Node.js is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The Node.js event model relies on listeners to listen for events and emitters to emit events periodically — it doesn't sound that different, but the code is quite different, making use of functions like on() to register an event listener, and once() to register an event listener that unregisters after it has run once. The HTTP connect event docs provide a good example of use.

+ +

As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called WebExtensions. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as onMessage rather than onmessage), and need to be combined with the addListener function. See the runtime.onMessage page for an example.

+ +

You don't need to understand anything about other such environments at this stage in your learning; we just wanted to make it clear that events can differ in different programming environments.

+ +

Ways of using web events

+ +

There are a number of ways in which you can add event listener code to web pages so that it will be run when the associated event fires. In this section, we review the various mechanisms and discuss which ones you should use.

+ +

Event handler properties

+ +

These are the properties that exist to contain event handler code that we have seen most frequently during the course. Returning to the above example:

+ +
const btn = document.querySelector('button');
+
+btn.onclick = function() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +

The onclick property is the event handler property being used in this situation. It is essentially a property like any other available on the button (e.g. btn.textContent, or btn.style), but it is a special type — when you set it to be equal to some code, that code is run when the event fires on the button.

+ +

You could also set the handler property to be equal to a named function name (like we saw in Build your own function). The following would work just the same:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.onclick = bgChange;
+ +

There are many different event handler properties available. Let's do an experiment.

+ +

First of all, make a local copy of random-color-eventhandlerproperty.html, and open it in your browser. It's just a copy of the simple random color example we've been playing with already in this article. Now try changing btn.onclick to the following different values in turn, and observing the results in the example:

+ + + +

Some events are very general and available nearly anywhere (for example an onclick handler can be registered on nearly any element), whereas some are more specific and only useful in certain situations (for example it makes sense to use onplay only on specific elements, such as {{htmlelement("video")}}).

+ +

Inline event handlers — don't use these

+ +

You might also see a pattern like this in your code:

+ +
<button onclick="bgChange()">Press me</button>
+
+ +
function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

The earliest method of registering event handlers found on the Web involved event handler HTML attributes (or inline event handlers) like the one shown above — the attribute value is literally the JavaScript code you want to run when the event occurs. The above example invokes a function defined inside a {{htmlelement("script")}} element on the same page, but you could also insert JavaScript directly inside the attribute, for example:

+ +
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+ +

You can find HTML attribute equivalents for many of the event handler properties; however, you shouldn't use these — they are considered bad practice. It might seem easy to use an event handler attribute if you are just doing something really quick, but they very quickly become unmanageable and inefficient.

+ +

For a start, it is not a good idea to mix up your HTML and your JavaScript, as it becomes hard to parse — keeping your JavaScript all in one place is better; if it is in a separate file you can apply it to multiple HTML documents.

+ +

Even in a single file, inline event handlers are not a good idea. One button is OK, but what if you had 100 buttons? You'd have to add 100 attributes to the file; it would very quickly turn into a maintenance nightmare. With JavaScript, you could easily add an event handler function to all the buttons on the page no matter how many there were, using something like this:

+ +
const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length; i++) {
+  buttons[i].onclick = bgChange;
+}
+ +

Note that another option here would be to use the forEach() built-in method available on NodeList objects:

+ +
buttons.forEach(function(button) {
+  button.onclick = bgChange;
+});
+ +
+

Note: Separating your programming logic from your content also makes your site more friendly to search engines.

+
+ +

addEventListener() and removeEventListener()

+ +

The newest type of event mechanism is defined in the Document Object Model (DOM) Level 2 Events Specification, which provides browsers with a new function — addEventListener(). This functions in a similar way to the event handler properties, but the syntax is obviously different. We could rewrite our random color example to look like this:

+ +
const btn = document.querySelector('button');
+
+function bgChange() {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Inside the addEventListener() function, we specify two parameters — the name of the event we want to register this handler for, and the code that comprises the handler function we want to run in response to it. Note that it is perfectly appropriate to put all the code inside the addEventListener() function, in an anonymous function, like this:

+ +
btn.addEventListener('click', function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  document.body.style.backgroundColor = rndCol;
+});
+ +

This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, removeEventListener(), which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:

+ +
btn.removeEventListener('click', bgChange);
+ +

This isn't significant for simple, small programs, but for larger, more complex programs it can improve efficiency to clean up old unused event handlers. Plus, for example, this allows you to have the same button performing different actions in different circumstances — all you have to do is add or remove event handlers as appropriate.

+ +

Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:

+ +
myElement.onclick = functionA;
+myElement.onclick = functionB;
+ +

The second line overwrites the value of onclick set by the first line. This would work, however:

+ +
myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+ +

Both functions would now run when the element is clicked.

+ +

In addition, there are a number of other powerful features and options available with this event mechanism. These are a little out of scope for this article, but if you want to read up on them, have a look at the addEventListener() and removeEventListener() reference pages.

+ +

What mechanism should I use?

+ +

Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.

+ +

The other two are relatively interchangeable, at least for simple uses:

+ + + +

The main advantages of the third mechanism are that you can remove event handler code if needed, using removeEventListener(), and you can add multiple listeners of the same type to elements if required. For example, you can call addEventListener('click', function() { ... }) on an element multiple times, with different functions specified in the second argument. This is impossible with event handler properties because any subsequent attempts to set a property will overwrite earlier ones, e.g.:

+ +
element.onclick = function1;
+element.onclick = function2;
+etc.
+ +
+

Note: If you are called upon to support browsers older than Internet Explorer 8 in your work, you may run into difficulties, as such ancient browsers use different event models from newer browsers. But never fear, most JavaScript libraries (for example jQuery) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.

+
+ +

Other event concepts

+ +

In this section, we briefly cover some advanced concepts that are relevant to events. It is not important to understand these concepts fully at this point, but they might serve to explain some code patterns you'll likely come across from time to time.

+ +

Event objects

+ +

Sometimes inside an event handler function, you might see a parameter specified with a name such as event, evt, or simply e. This is called the event object, and it is automatically passed to event handlers to provide extra features and information. For example, let's rewrite our random color example again slightly:

+ +
function bgChange(e) {
+  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  e.target.style.backgroundColor = rndCol;
+  console.log(e);
+}
+
+btn.addEventListener('click', bgChange);
+ +
+

Note: You can find the full source code for this example on GitHub (also see it running live).

+
+ +

Here you can see that we are including an event object, e, in the function, and in the function setting a background color style on e.target — which is the button itself. The target property of the event object is always a reference to the element that the event has just occurred upon. So in this example, we are setting a random background color on the button, not the page.

+ +
+

Note: You can use any name you like for the event object — you just need to choose a name that you can then use to reference it inside the event handler function. e/evt/event are most commonly used by developers because they are short and easy to remember. It's always good to be consistent — with yourself, and with others if possible.

+
+ +

e.target is incredibly useful when you want to set the same event handler on multiple elements and do something to all of them when an event occurs on them. You might, for example, have a set of 16 tiles that disappear when they are clicked on. It is useful to always be able to just set the thing to disappear as e.target, rather than having to select it in some more difficult way. In the following example (see useful-eventtarget.html for the full source code; also see it running live here), we create 16 {{htmlelement("div")}} elements using JavaScript. We then select all of them using {{domxref("document.querySelectorAll()")}}, then loop through each one, adding an onclick handler to each that makes it so that a random color is applied to each one when clicked:

+ +
const divs = document.querySelectorAll('div');
+
+for (let i = 0; i < divs.length; i++) {
+  divs[i].onclick = function(e) {
+    e.target.style.backgroundColor = bgChange();
+  }
+}
+ +

The output is as follows (try clicking around on it — have fun):

+ + + +

{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}

+ +

Most event handlers you'll encounter just have a standard set of properties and functions (methods) available on the event object; see the {{domxref("Event")}} object reference for a full list. Some more advanced handlers, however, add specialist properties containing extra data that they need to function. The Media Recorder API, for example, has a dataavailable event, which fires when some audio or video has been recorded and is available for doing something with (for example saving it, or playing it back). The corresponding ondataavailable handler's event object has a data property available containing the recorded audio or video data to allow you to access it and do something with it.

+ +

Preventing default behavior

+ +

Sometimes, you'll come across a situation where you want to prevent an event from doing what it does by default. The most common example is that of a web form, for example, a custom registration form. When you fill in the details and press the submit button, the natural behavior is for the data to be submitted to a specified page on the server for processing, and the browser to be redirected to a "success message" page of some kind (or the same page, if another is not specified.)

+ +

The trouble comes when the user has not submitted the data correctly — as a developer, you want to prevent the submission to the server and give an error message saying what's wrong and what needs to be done to put things right. Some browsers support automatic form data validation features, but since many don't, you are advised to not rely on those and implement your own validation checks. Let's look at a simple example.

+ +

First, a simple HTML form that requires you to enter your first and last name:

+ +
<form>
+  <div>
+    <label for="fname">First name: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Last name: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+ + + +

Now some JavaScript — here we implement a very simple check inside an onsubmit event handler (the submit event is fired on a form when it is submitted) that tests whether the text fields are empty. If they are, we call the preventDefault() function on the event object — which stops the form submission — and then display an error message in the paragraph below our form to tell the user what's wrong:

+ +
const form = document.querySelector('form');
+const fname = document.getElementById('fname');
+const lname = document.getElementById('lname');
+const para = document.querySelector('p');
+
+form.onsubmit = function(e) {
+  if (fname.value === '' || lname.value === '') {
+    e.preventDefault();
+    para.textContent = 'You need to fill in both names!';
+  }
+}
+ +

Obviously, this is pretty weak form validation — it wouldn't stop the user validating the form with spaces or numbers entered into the fields, for example — but it is OK for example purposes. The output is as follows:

+ +

{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}

+ +
+

Note: for the full source code, see preventdefault-validation.html (also see it running live here.)

+
+ +

Event bubbling and capture

+ +

The final subject to cover here is something that you won't come across often, but it can be a real pain if you don't understand it. Event bubbling and capture are two mechanisms that describe what happens when two handlers of the same event type are activated on one element. Let's look at an example to make this easier — open up the show-video-box.html example in a new tab (and the source code in another tab.) It is also available live below:

+ + + +

{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}

+ +

This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:

+ +
<button>Display video</button>
+
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+ +

When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <div> from hidden to showing (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):

+ +
btn.onclick = function() {
+  videoBox.setAttribute('class', 'showing');
+}
+ +

We then add a couple more onclick event handlers — the first one to the <div> and the second one to the <video>. The idea is that when the area of the <div> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.

+ +
videoBox.onclick = function() {
+  videoBox.setAttribute('class', 'hidden');
+};
+
+video.onclick = function() {
+  video.play();
+};
+ +

But there's a problem — currently, when you click the video it starts to play, but it causes the <div> to also be hidden at the same time. This is because the video is inside the <div> — it is part of it — so clicking on the video actually runs both the above event handlers.

+ +

Bubbling and capturing explained

+ +

When an event is fired on an element that has parent elements (in this case, the {{htmlelement("video")}} has the {{htmlelement("div")}} as a parent), modern browsers run two different phases — the capturing phase and the bubbling phase.

+ +

In the capturing phase:

+ + + +

In the bubbling phase, the exact opposite occurs:

+ + + +

+ +

(Click on image for bigger diagram)

+ +

In modern browsers, by default, all event handlers are registered for the bubbling phase. So in our current example, when you click the video, the click event bubbles from the <video> element outwards to the <html> element. Along the way:

+ + + +
+

Note: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.

+
+ +

Fixing the problem with stopPropagation()

+ +

This is annoying behavior, but there is a way to fix it! The standard Event object has a function available on it called stopPropagation() which, when invoked on a handler's event object, makes it so that first handler is run but the event doesn't bubble any further up the chain, so no more handlers will be run.

+ +

We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:

+ +
video.onclick = function(e) {
+  e.stopPropagation();
+  video.play();
+};
+ +

You can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed result in show-video-box-fixed.html (also see the source code here).

+ +
+

Note: Why bother with both capturing and bubbling? Well, in the bad old days when browsers were much less cross-compatible than they are now, Netscape only used event capturing, and Internet Explorer used only event bubbling. When the W3C decided to try to standardize the behavior and reach a consensus, they ended up with this system that included both, which is the one modern browsers implemented.

+
+ +
+

Note: As mentioned above, by default all event handlers are registered in the bubbling phase, and this makes more sense most of the time. If you really want to register an event in the capturing phase instead, you can do so by registering your handler using addEventListener(), and setting the optional third property to true.

+
+ +

Event delegation

+ +

Bubbling also allows us to take advantage of event delegation — this concept relies on the fact that if you want some code to run when you click on any one of a large number of child elements, you can set the event listener on their parent and have events that happen on them bubble up to their parent rather than having to set the event listener on every child individually. Remember earlier that we said bubbling involves checking the element the event is fired on for an event handler first, then moving up to the element's parent, etc.?

+ +

A good example is a series of list items — if you want each one of them to pop up a message when clicked, you can set the click event listener on the parent <ul>, and events will bubble from the list items to the <ul>.

+ +

This concept is explained further on David Walsh's blog, with multiple examples — see How JavaScript Event Delegation Works.

+ +

Test your skills!

+ +

You've reached the end of this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see Test your skills: Events.

+ +

Conclusion

+ +

You should now know all you need to know about web events at this early stage. As mentioned above, events are not really part of the core JavaScript — they are defined in browser Web APIs.

+ +

Also, it is important to understand that the different contexts in which JavaScript is used have different event models — from Web APIs to other areas such as browser WebExtensions and Node.js (server-side JavaScript). We are not expecting you to understand all these areas now, but it certainly helps to understand the basics of events as you forge ahead with learning web development.

+ +

If there is anything you didn't understand, feel free to read through the article again, or contact us to ask for help.

+ +

See also

+ + + +

{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/building_blocks/index.html b/files/de/learn/javascript/building_blocks/index.html new file mode 100644 index 0000000000..1c6fb8fc46 --- /dev/null +++ b/files/de/learn/javascript/building_blocks/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript Bausteine +slug: Learn/JavaScript/Bausteine +translation_of: Learn/JavaScript/Building_blocks +--- +
{{LearnSidebar}}
+ +

In diesem Modul betrachten wir weiterhin JavaScripts Kernfunktionen. Wir betrachten verschiedene, häufig vorkommende Arten von Code Blöcken, wie zum Beispiel Fallunterscheidungen, Schleifen, Funktionen und Events. Diese hast du bereits im Laufe des Kurses gesehen, allerdings nur "nebenbei" -  jetzt behandeln wir sie explizit.

+ +

Vorraussetzungen

+ +

Bevor du mit diesem Modul anfängst, solltest du mit den Grundlagen von HTML und CSS vertraut sein und das vorherige Modul, Erste Schritte mit JavaScript, abgeschlossen haben.

+ +
+

Hinweis: Falls du auf einem Computer/Tablet/anderem Gerät arbeitest, auf dem du keine Dateien erstellen kannst, kannst du die (meisten) Code Beispiele online, zum Beispiel mit JSBin oder Thimble, ausprobieren.

+
+ +

Anleitungen

+ +
+
Entscheidungen treffen --- Fallunterscheidungen
+
In allen Programmiersprachen muss Code Entscheidungen treffen und bei unterschiedlichen Eingaben entsprechend handeln. Falls zum Beispiel in einem Spiel der Spieler keine Leben mehr übrig hat, so hat er das Spiel verloren. In einer Wetter-App soll beispielsweise morgens ein Sonnenaufgang als Hintergrund gezeigt werden, nachts jedoch Mond und Sterne. In diesem Artikel betrachten wir Fallunterscheidungen und wie diese in JavaScript funktionieren.
+
Code wiederholen
+
Manchmal soll eine Aufgabe mehr als einmal ausgeführt werden, zum Beispiel wenn eine Liste an Namen durchsucht wird. Um solche Aufgaben zu erledigen, sind Schleifen eine gute Lösung. Im folgenden Artikel werden wir Schleifen in JavaScript genauer betrachten.
+
Funktionen -- Wiederverwendbare Codeblöcke
+
Ein essentielles Konzept in der Programmierung sind Funktionen. Funktionen erlauben es, Code, der eine bestimmte Aufgabe erfüllt, in einem eigenen Block zu definieren. Anschließend kann dieser Code über ein einzelnes, kurzes Kommando aufgerufen werden, anstatt den ganzen Code mehrere Male tippen zu müssen. In diesem Artikel erkunden wir die Konzepte hinter Funktionen wie die grundlegende Syntax oder wie diese aufgerufen werden und definieren die Begriffe Funktion, Sichtbereich (Scope) und Parameter.
+
Baue deine eigene Funktion
+
Nach dem der Großteil der grundlegenden Theorie im vorherigen Artikel thematisiert wurde, bietet dieser Artikel eine praktische Erfahrung. Hier bekommst du etwas Übung im Erstellen deiner eigenen Funktion. Außerdem werden wir einige weitere nützliche Details für das Arbeiten mit Funktionen behandeln. 
+
Rückgabewerte von Funktionen
+
Es gibt ein weiteres essentielles Konzept, dass wir in diesem Kurs behandeln werden, um unsere Betrachtung von Funktionne abzuschließen --- Rückgabewerte. Manche Funktionen geben keinen "sinnvollen" Wert zurück, andere schon. Es ist wichtig zu verstehen, was diese Werte sind, wie sie benutzt werden und wie du Funktionen schreibst, die sinnvolle Werte zurückgeben.
+
Einführung in Events
+
Events sind Aktionen oder Ereignisse die in dem System, in dem du programmierts, passieren. Das System weist dich auf diese hin, so dass du gegebenenfalls entsprechend reagieren kannst. Klickt ein Nutzer beispielsweise auf einen Button auf einer Webseite, so möchtest du vermutlich darauf reagieren, in dem du eine Aktion ausführst. In diesem Artikel behandeln wir einige wichtige Konzepte bezüglich Events und betrachten deren Funktionsweise in Browsern.
+
+ +

Prüfungen

+ +

Die folgenden Aufgaben werden dein Verständnis der in diesen Artikeln behandelten JavaScript Grundlagen prüfen. 

+ +
+
Bildergalerie
+
Jetzt wo wir die grundlegenden Bausteine JavaScripts betrachtet haben, werden wir dein Wissen über Schleifen, Funktionen, Fallunterscheidungen und Events testen, indem wir eine JavaScript-basierte Bildergalerie entwickeln.
+
diff --git a/files/de/learn/javascript/first_steps/a_first_splash/index.html b/files/de/learn/javascript/first_steps/a_first_splash/index.html new file mode 100644 index 0000000000..e772147cae --- /dev/null +++ b/files/de/learn/javascript/first_steps/a_first_splash/index.html @@ -0,0 +1,597 @@ +--- +title: Ein erster Eindruck von JavaScript +slug: Learn/JavaScript/First_steps/Erster_Blick +translation_of: Learn/JavaScript/First_steps/A_first_splash +--- +
{{LearnSidebar}}
+ +
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
+ +

Nachdem Sie etwas über die Theorie von JavaScript gelernt haben und was Sie damit machen können, werden wir Ihnen in einem komplett praktischen Tutorial einen Crashkurs in den Grundfunktionen von JavaScript anbieten. Wir werden hier Schritt für Schritt ein einfaches Zahlenraten Spiel programmieren.

+ + + + + + + + + + + + +
Voraussetzungen:Grundlegende Computerkenntnisse, einfache Grundkentnisse von HTML und CSS, sowie eine Vorstellung, was JavaScript ist.
Ziel:Erste Erfahrung beim Schreiben von JavaScript zu bekommen und zumindest ein grundlegendes Verständnis dafür zu erlangen, was das Schreiben eines JavaScript-Programms beinhaltet.
+ +

Es ist nicht nötig, dass Sie den gesamten Code sofort im Detail verstehen - wir wollen Ihnen nur grob die Konzepte vorab vorstellen und Ihnen eine Vorstellung davon vermitteln, wie JavaScript (und andere Programmiersprachen) funktionieren. In den folgenden Artikeln werden wir alle diese Funktionen noch einmal im Detail besprechen!

+ +
+

Hinweis: Viele der Befehle und Konstrukte, die Sie in JavaScript sehen werden, sind die gleichen wie in anderen Programmiersprachen - Funktionen, Schleifen, etc. Die Syntax sieht anders aus, aber die Konzepte sind immer noch weitgehend die gleichen.

+
+ +

Denken wie ein Programmierer

+ +

Eines der schwierigsten Dinge, die man bei der Programmierung lernen muss, sind nicht die Befehle, sondern wie man sie zur Lösung der Aufgabe anwendet. Sie müssen anfangen, wie ein Programmierer zu denken - Sie müssen sich im klaren sein was  Ihr Programm tun soll, um dann herauszuarbeiten welche Funktionen und Befehle Sie dafür benötigen.

+ +

Dies erfordert eine Mischung aus harter Arbeit, Erfahrung mit der Programmiersprache und Praxis - und ein wenig Kreativität. Je mehr Sie kodieren, desto besser werden Sie werden. Wir können nicht versprechen, dass Sie in fünf Minuten ein "Programmierer-Gehirn" entwickeln werden, aber wir werden Ihnen viel Gelegenheit geben, während des gesamten Kurses das Denken wie ein Programmierer zu üben.

+ +

In diesem Sinne betrachten Sie das Beispiel, das wir in diesem Artikel erstellen werden und üben damit den Prozess der Zerlegung in konkrete Einzelschritte.

+ +

Beispiel — Rate die Zahl

+ +

In diesem Artikel zeigen wir Ihnen, wie Sie das Ratespiel aufbauen können, das Sie hier sehen können.:

+ + + +

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

+ +

Machen Sie sich mit der Funktionsweise des Spiels vertraut, bevor Sie weitermachen.

+ +

Stellen wir uns vor, Ihr Chef hat Ihnen den folgenden Auftrag für die Erstellung dieses Spiels gegeben:

+ +
+

Schreiben Sie ein Programm das ein Zahlenratespiel implementiert. Es sollte eine Zufallszahl zwischen 1 und 100 wählen und den Spieler auffordern, die Zahl nach spätestens 10 Runden zu erraten. Nach jedem Zug sollte dem Spieler mitgeteilt werden, ob er richtig geraten hat oder nicht - und, wenn er Unrecht hat, ob die Zahl zu niedrig oder zu hoch war. Außerdem sollen dem Spieler alle vorher geratenen Zahlen angezeigt werden. Das Spiel endet, wenn der Spieler richtig rät oder wenn er 10-mal falsch geraten hat. Wenn das Spiel endet, sollte dem Spieler die Möglichkeit gegeben werden, erneut zu spielen.

+
+ +

Wenn wir uns diesen Anweisungen ansehen, können wir zunächst damit beginnen, ihn in einfache, umsetzbare Aufgaben aufzuteilen, und zwar aus der Sicht eines Programmierers:

+ +
    +
  1. Generiere eine zufällige Zahl zwischen 1 und 100.
    2. +
  2. Speichere die Anzahl der getätigten Rateversuche, setze den Wert anfangs auf 1.
    3. +
  3. Ermögliche dem Spieler, einen Tipp abzugeben.
    4. +
  4. Sobald ein Tip abgegeben wurde, speichere sie damit der Spieler seine vorherigen Eingaben sehen kann.
    5. +
  5. Als Nächstes überprüfe, ob es sich um die richtige Zahl handelt.
    6. +
  6. Wenn sie richtig ist: +
      +
    1. Zeige Glückwunsch Nachricht.
      2. +
    2. Verhindere weiter Eingaben, da das Spiel zu Ende ist.
      3. +
    3. Biete eine Möglichkeit, das Spiel neu zu starten.
      4. +
    +
    7. +
  7. Wenn sie falsch ist und noch Versuche übrig sind: +
      +
    1. Dem Spieler mitteilen, dass die Zahl noch nicht erraten ist.
      2. +
    2. Die Eingabe einer weiteren Zahl ermöglichen.
      3. +
    3. Die Anzahl der Rateversuche um 1 erhöhen.
      4. +
    +
    8. +
  8. Wenn die Zahl falsch ist und keine Versuche mehr übrig sind: +
      +
    1. Dem Spieler mitteilen, dass das Spiel zu Ende ist.
      2. +
    2. Keine weiteren Eingaben mehr zulassen.
      3. +
    3. Ein Steuerelement zum Neustart des Spiels anzeigen.
      4. +
    +
    9. +
  9. Wenn das Spiel neu startet, sicherstellen dass Logik und Benutzeroberfläche zurückgesetzt werden. Danach zurück zum 1. Schritt.
    10. +
+ +

Lassen Sie uns nun fortfahren und schauen, wie wir diese Punkte in Code umwandeln können, das Beispiel aufbauen und die JavaScript-Funktionen während der Arbeit erforschen.

+ +

Vorbereitungen

+ +

Um dieses Tutorial zu beginnen, möchten wir Sie bitten, eine lokale Kopie der Datei number-guessing-game-start.html (see it live here) zu erstellen. Öffnen Sie es sowohl in Ihrem Texteditor als auch in Ihrem Webbrowser. Im Moment sehen Sie eine einfache Überschrift, einen Absatz mit Anweisungen und ein Formular zur Eingabe einer Schätzung, aber das Formular wird derzeit nichts tun.

+ +

Unseren gesamten Code werden wir innerhalb des {{htmlelement("script")}} Elements am Ende der HTML-Datei einfügen:

+ +
<script>
+
+  // Ihr Programm steht hier
+
+</script>
+
+ +

Variablen hinzufügen um Daten zu speichern

+ +

Lassen Sie uns anfangen. Fügen Sie zunächst die folgenden Zeilen nach dem {{htmlelement("script")}} Element ein:

+ +
let randomNumber = Math.floor(Math.random() * 100) + 1;
+
+const guesses = document.querySelector('.guesses');
+const lastResult = document.querySelector('.lastResult');
+const lowOrHi = document.querySelector('.lowOrHi');
+
+const guessSubmit = document.querySelector('.guessSubmit');
+const guessField = document.querySelector('.guessField');
+
+let guessCount = 1;
+let resetButton;
+ +

Obiger Code richtet die Variablen und Konstanten ein, die wir benötigen, um die Daten zu speichern, die unser Programm verwenden wird. Variablen sind im Grunde genommen Container für Werte (z.B. Zahlen oder Text). Sie erstellen eine Variable mit dem Schlüsselwort let (oder var) gefolgt von einem Namen für Ihre Variable (Sie werden mehr über den Unterschied zwischen den beiden Schlüsselwörtern in einem zukünftigen Artikel lesen). Konstanten werden verwendet, um Werte zu speichern, die Sie nicht ändern möchten, und werden mit dem Schlüsselwort const erstellt. In diesem Fall verwenden wir Konstanten, um Referenzen auf Teile unserer Benutzeroberfläche zu speichern; der Text in einigen von ihnen kann sich ändern, aber die referenzierten HTML-Elemente bleiben unverändert.

+ +

Sie können Ihrer Variablen oder Konstanten einen Wert mit einem Gleichheitszeichen (=) zuweisen, gefolgt von dem Wert, den Sie ihr geben möchten.

+ +

In unser Beispiel:

+ + + +
+

Note: You'll learn a lot more about variables/constants later on in the course, starting with the next article.

+
+ +

Functions

+ +

Next, add the following below your previous JavaScript:

+ +
function checkGuess() {
+  alert('I am a placeholder');
+}
+ +

Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.

+ +

When we want to run the code, we type the name of the function followed by the parentheses.

+ +

Let's try that now. Save your code and refresh the page in your browser. Then go into the developer tools JavaScript console, and enter the following line:

+ +
checkGuess();
+ +

After pressing Return/Enter, you should see an alert come up that says "I am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.

+ +
+

Note: You'll learn a lot more about functions later in the course.

+
+ +

Operators

+ +

JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.

+ +

If you haven't already done so, save your code, refresh the page in your browser, and open the developer tools JavaScript console. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing Return/Enter after each one, and see what results they return.

+ +

First let's look at arithmetic operators, for example:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
+Addition6 + 9
-Subtraction20 - 15
*Multiplication3 * 7
/Division10 / 5
+ +

You can also use the + operator to join text strings together (in programming, this is called concatenation). Try entering the following lines, one at a time:

+ +
let name = 'Bingo';
+name;
+let hello = ' says hello!';
+hello;
+let greeting = name + hello;
+greeting;
+ +

There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:

+ +
name += ' says hello!';
+ +

This is equivalent to

+ +
name = name + ' says hello!';
+ +

When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use comparison operators. For example:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
OperatorNameExample
===Strict equality (is it exactly the same?) + 
+5 === 2 + 4 // false
+'Chris' === 'Bob' // false
+5 === 2 + 3 // true
+2 === '2' // false; number versus string
+
+
!==Non-equality (is it not the same?) + 
+5 !== 2 + 4 // true
+'Chris' !== 'Bob' // true
+5 !== 2 + 3 // false
+2 !== '2' // true; number versus string
+
+
<Less than + 
+6 < 10 // true
+20 < 10 // false
+
>Greater than + 
+6 > 10 // false
+20 > 10  // true
+
+ +

Conditionals

+ +

Returning to our checkGuess() function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.

+ +

At this point, replace your current checkGuess() function with this version instead:

+ +
function checkGuess() {
+  let userGuess = Number(guessField.value);
+  if (guessCount === 1) {
+    guesses.textContent = 'Previous guesses: ';
+  }
+  guesses.textContent += userGuess + ' ';
+
+  if (userGuess === randomNumber) {
+    lastResult.textContent = 'Congratulations! You got it right!';
+    lastResult.style.backgroundColor = 'green';
+    lowOrHi.textContent = '';
+    setGameOver();
+  } else if (guessCount === 10) {
+    lastResult.textContent = '!!!GAME OVER!!!';
+    setGameOver();
+  } else {
+    lastResult.textContent = 'Wrong!';
+    lastResult.style.backgroundColor = 'red';
+    if(userGuess < randomNumber) {
+      lowOrHi.textContent = 'Last guess was too low!';
+    } else if(userGuess > randomNumber) {
+      lowOrHi.textContent = 'Last guess was too high!';
+    }
+  }
+
+  guessCount++;
+  guessField.value = '';
+  guessField.focus();
+}
+ +

This is a lot of code — phew! Let's go through each section and explain what it does.

+ + + +

Events

+ +

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.

+ +

Add the following line below your checkGuess() function:

+ +
guessSubmit.addEventListener('click', checkGuess);
+ +

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

+ +

Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

+ +

Finishing the game functionality

+ +

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

+ +
function setGameOver() {
+  guessField.disabled = true;
+  guessSubmit.disabled = true;
+  resetButton = document.createElement('button');
+  resetButton.textContent = 'Start new game';
+  document.body.appendChild(resetButton);
+  resetButton.addEventListener('click', resetGame);
+}
+ + + +

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

+ +
function resetGame() {
+  guessCount = 1;
+
+  const resetParas = document.querySelectorAll('.resultParas p');
+  for (let i = 0 ; i < resetParas.length ; i++) {
+    resetParas[i].textContent = '';
+  }
+
+  resetButton.parentNode.removeChild(resetButton);
+
+  guessField.disabled = false;
+  guessSubmit.disabled = false;
+  guessField.value = '';
+  guessField.focus();
+
+  lastResult.style.backgroundColor = 'white';
+
+  randomNumber = Math.floor(Math.random() * 100) + 1;
+}
+ +

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

+ + + +

At this point you should have a fully working (simple) game — congratulations!

+ +

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

+ +

Loops

+ +

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

+ +

To start with, go to your browser developer tools JavaScript console again, and enter the following:

+ +
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
+ +

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

+ +
    +
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. +
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. +
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. +
+ +

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

+ +
let resetParas = document.querySelectorAll('.resultParas p');
+for (let i = 0 ; i < resetParas.length ; i++) {
+  resetParas[i].textContent = '';
+}
+ +

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

+ +

A small discussion on objects

+ +

Let's add one more final improvement before we get to this discussion. Add the following line just below the let resetButton; line near the top of your JavaScript, then save your file:

+ +
guessField.focus();
+ +

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

+ +

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

+ +

In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:

+ +
const guessField = document.querySelector('.guessField');
+ +

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

+ +

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

+ +
guessField.focus();
+ +

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses constant contains a reference to a {{htmlelement("p")}} element, and the guessCount variable contains a number.

+ +

Playing with browser objects

+ +

Let's play with some browser objects a bit.

+ +
    +
  1. First of all, open up your program in a browser.
    2. +
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. +
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. +
  4. Now type in the following: + 
    guessField.value = 'Hello';
    + The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. +
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. +
  6. Now try entering the following line: + 
    guesses.value
    + The browser will return undefined, because paragraphs don't have the value property.
    7. +
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + 
    guesses.textContent = 'Where is my paragraph?';
    +
    8. +
  8. Now for some fun stuff. Try entering the below lines, one by one: + 
    guesses.style.backgroundColor = 'yellow';
+guesses.style.fontSize = '200%';
+guesses.style.padding = '10px';
+guesses.style.boxShadow = '3px 3px 6px black';
    + Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. +
+ +

Finished for now...

+ +

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

+ +

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/first_steps/erster_blick/index.html b/files/de/learn/javascript/first_steps/erster_blick/index.html deleted file mode 100644 index e772147cae..0000000000 --- a/files/de/learn/javascript/first_steps/erster_blick/index.html +++ /dev/null @@ -1,597 +0,0 @@ ---- -title: Ein erster Eindruck von JavaScript -slug: Learn/JavaScript/First_steps/Erster_Blick -translation_of: Learn/JavaScript/First_steps/A_first_splash ---- -
{{LearnSidebar}}
- -
{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}
- -

Nachdem Sie etwas über die Theorie von JavaScript gelernt haben und was Sie damit machen können, werden wir Ihnen in einem komplett praktischen Tutorial einen Crashkurs in den Grundfunktionen von JavaScript anbieten. Wir werden hier Schritt für Schritt ein einfaches Zahlenraten Spiel programmieren.

- - - - - - - - - - - - -
Voraussetzungen:Grundlegende Computerkenntnisse, einfache Grundkentnisse von HTML und CSS, sowie eine Vorstellung, was JavaScript ist.
Ziel:Erste Erfahrung beim Schreiben von JavaScript zu bekommen und zumindest ein grundlegendes Verständnis dafür zu erlangen, was das Schreiben eines JavaScript-Programms beinhaltet.
- -

Es ist nicht nötig, dass Sie den gesamten Code sofort im Detail verstehen - wir wollen Ihnen nur grob die Konzepte vorab vorstellen und Ihnen eine Vorstellung davon vermitteln, wie JavaScript (und andere Programmiersprachen) funktionieren. In den folgenden Artikeln werden wir alle diese Funktionen noch einmal im Detail besprechen!

- -
-

Hinweis: Viele der Befehle und Konstrukte, die Sie in JavaScript sehen werden, sind die gleichen wie in anderen Programmiersprachen - Funktionen, Schleifen, etc. Die Syntax sieht anders aus, aber die Konzepte sind immer noch weitgehend die gleichen.

-
- -

Denken wie ein Programmierer

- -

Eines der schwierigsten Dinge, die man bei der Programmierung lernen muss, sind nicht die Befehle, sondern wie man sie zur Lösung der Aufgabe anwendet. Sie müssen anfangen, wie ein Programmierer zu denken - Sie müssen sich im klaren sein was  Ihr Programm tun soll, um dann herauszuarbeiten welche Funktionen und Befehle Sie dafür benötigen.

- -

Dies erfordert eine Mischung aus harter Arbeit, Erfahrung mit der Programmiersprache und Praxis - und ein wenig Kreativität. Je mehr Sie kodieren, desto besser werden Sie werden. Wir können nicht versprechen, dass Sie in fünf Minuten ein "Programmierer-Gehirn" entwickeln werden, aber wir werden Ihnen viel Gelegenheit geben, während des gesamten Kurses das Denken wie ein Programmierer zu üben.

- -

In diesem Sinne betrachten Sie das Beispiel, das wir in diesem Artikel erstellen werden und üben damit den Prozess der Zerlegung in konkrete Einzelschritte.

- -

Beispiel — Rate die Zahl

- -

In diesem Artikel zeigen wir Ihnen, wie Sie das Ratespiel aufbauen können, das Sie hier sehen können.:

- - - -

{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}

- -

Machen Sie sich mit der Funktionsweise des Spiels vertraut, bevor Sie weitermachen.

- -

Stellen wir uns vor, Ihr Chef hat Ihnen den folgenden Auftrag für die Erstellung dieses Spiels gegeben:

- -
-

Schreiben Sie ein Programm das ein Zahlenratespiel implementiert. Es sollte eine Zufallszahl zwischen 1 und 100 wählen und den Spieler auffordern, die Zahl nach spätestens 10 Runden zu erraten. Nach jedem Zug sollte dem Spieler mitgeteilt werden, ob er richtig geraten hat oder nicht - und, wenn er Unrecht hat, ob die Zahl zu niedrig oder zu hoch war. Außerdem sollen dem Spieler alle vorher geratenen Zahlen angezeigt werden. Das Spiel endet, wenn der Spieler richtig rät oder wenn er 10-mal falsch geraten hat. Wenn das Spiel endet, sollte dem Spieler die Möglichkeit gegeben werden, erneut zu spielen.

-
- -

Wenn wir uns diesen Anweisungen ansehen, können wir zunächst damit beginnen, ihn in einfache, umsetzbare Aufgaben aufzuteilen, und zwar aus der Sicht eines Programmierers:

- -
    -
  1. Generiere eine zufällige Zahl zwischen 1 und 100.
    2. -
  2. Speichere die Anzahl der getätigten Rateversuche, setze den Wert anfangs auf 1.
    3. -
  3. Ermögliche dem Spieler, einen Tipp abzugeben.
    4. -
  4. Sobald ein Tip abgegeben wurde, speichere sie damit der Spieler seine vorherigen Eingaben sehen kann.
    5. -
  5. Als Nächstes überprüfe, ob es sich um die richtige Zahl handelt.
    6. -
  6. Wenn sie richtig ist: -
      -
    1. Zeige Glückwunsch Nachricht.
      2. -
    2. Verhindere weiter Eingaben, da das Spiel zu Ende ist.
      3. -
    3. Biete eine Möglichkeit, das Spiel neu zu starten.
      4. -
    -
    7. -
  7. Wenn sie falsch ist und noch Versuche übrig sind: -
      -
    1. Dem Spieler mitteilen, dass die Zahl noch nicht erraten ist.
      2. -
    2. Die Eingabe einer weiteren Zahl ermöglichen.
      3. -
    3. Die Anzahl der Rateversuche um 1 erhöhen.
      4. -
    -
    8. -
  8. Wenn die Zahl falsch ist und keine Versuche mehr übrig sind: -
      -
    1. Dem Spieler mitteilen, dass das Spiel zu Ende ist.
      2. -
    2. Keine weiteren Eingaben mehr zulassen.
      3. -
    3. Ein Steuerelement zum Neustart des Spiels anzeigen.
      4. -
    -
    9. -
  9. Wenn das Spiel neu startet, sicherstellen dass Logik und Benutzeroberfläche zurückgesetzt werden. Danach zurück zum 1. Schritt.
    10. -
- -

Lassen Sie uns nun fortfahren und schauen, wie wir diese Punkte in Code umwandeln können, das Beispiel aufbauen und die JavaScript-Funktionen während der Arbeit erforschen.

- -

Vorbereitungen

- -

Um dieses Tutorial zu beginnen, möchten wir Sie bitten, eine lokale Kopie der Datei number-guessing-game-start.html (see it live here) zu erstellen. Öffnen Sie es sowohl in Ihrem Texteditor als auch in Ihrem Webbrowser. Im Moment sehen Sie eine einfache Überschrift, einen Absatz mit Anweisungen und ein Formular zur Eingabe einer Schätzung, aber das Formular wird derzeit nichts tun.

- -

Unseren gesamten Code werden wir innerhalb des {{htmlelement("script")}} Elements am Ende der HTML-Datei einfügen:

- -
<script>
-
-  // Ihr Programm steht hier
-
-</script>
-
- -

Variablen hinzufügen um Daten zu speichern

- -

Lassen Sie uns anfangen. Fügen Sie zunächst die folgenden Zeilen nach dem {{htmlelement("script")}} Element ein:

- -
let randomNumber = Math.floor(Math.random() * 100) + 1;
-
-const guesses = document.querySelector('.guesses');
-const lastResult = document.querySelector('.lastResult');
-const lowOrHi = document.querySelector('.lowOrHi');
-
-const guessSubmit = document.querySelector('.guessSubmit');
-const guessField = document.querySelector('.guessField');
-
-let guessCount = 1;
-let resetButton;
- -

Obiger Code richtet die Variablen und Konstanten ein, die wir benötigen, um die Daten zu speichern, die unser Programm verwenden wird. Variablen sind im Grunde genommen Container für Werte (z.B. Zahlen oder Text). Sie erstellen eine Variable mit dem Schlüsselwort let (oder var) gefolgt von einem Namen für Ihre Variable (Sie werden mehr über den Unterschied zwischen den beiden Schlüsselwörtern in einem zukünftigen Artikel lesen). Konstanten werden verwendet, um Werte zu speichern, die Sie nicht ändern möchten, und werden mit dem Schlüsselwort const erstellt. In diesem Fall verwenden wir Konstanten, um Referenzen auf Teile unserer Benutzeroberfläche zu speichern; der Text in einigen von ihnen kann sich ändern, aber die referenzierten HTML-Elemente bleiben unverändert.

- -

Sie können Ihrer Variablen oder Konstanten einen Wert mit einem Gleichheitszeichen (=) zuweisen, gefolgt von dem Wert, den Sie ihr geben möchten.

- -

In unser Beispiel:

- - - -
-

Note: You'll learn a lot more about variables/constants later on in the course, starting with the next article.

-
- -

Functions

- -

Next, add the following below your previous JavaScript:

- -
function checkGuess() {
-  alert('I am a placeholder');
-}
- -

Functions are reusable blocks of code that you can write once and run again and again, saving the need to keep repeating code all the time. This is really useful. There are a number of ways to define functions, but for now we'll concentrate on one simple type. Here we have defined a function by using the keyword function, followed by a name, with parentheses put after it. After that we put two curly braces ({ }). Inside the curly braces goes all the code that we want to run whenever we call the function.

- -

When we want to run the code, we type the name of the function followed by the parentheses.

- -

Let's try that now. Save your code and refresh the page in your browser. Then go into the developer tools JavaScript console, and enter the following line:

- -
checkGuess();
- -

After pressing Return/Enter, you should see an alert come up that says "I am a placeholder"; we have defined a function in our code that creates an alert whenever we call it.

- -
-

Note: You'll learn a lot more about functions later in the course.

-
- -

Operators

- -

JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.

- -

If you haven't already done so, save your code, refresh the page in your browser, and open the developer tools JavaScript console. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing Return/Enter after each one, and see what results they return.

- -

First let's look at arithmetic operators, for example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
+Addition6 + 9
-Subtraction20 - 15
*Multiplication3 * 7
/Division10 / 5
- -

You can also use the + operator to join text strings together (in programming, this is called concatenation). Try entering the following lines, one at a time:

- -
let name = 'Bingo';
-name;
-let hello = ' says hello!';
-hello;
-let greeting = name + hello;
-greeting;
- -

There are also some shortcut operators available, called augmented assignment operators. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:

- -
name += ' says hello!';
- -

This is equivalent to

- -
name = name + ' says hello!';
- -

When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use comparison operators. For example:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
OperatorNameExample
===Strict equality (is it exactly the same?) - 
-5 === 2 + 4 // false
-'Chris' === 'Bob' // false
-5 === 2 + 3 // true
-2 === '2' // false; number versus string
-
-
!==Non-equality (is it not the same?) - 
-5 !== 2 + 4 // true
-'Chris' !== 'Bob' // true
-5 !== 2 + 3 // false
-2 !== '2' // true; number versus string
-
-
<Less than - 
-6 < 10 // true
-20 < 10 // false
-
>Greater than - 
-6 > 10 // false
-20 > 10  // true
-
- -

Conditionals

- -

Returning to our checkGuess() function, I think it's safe to say that we don't want it to just spit out a placeholder message. We want it to check whether a player's guess is correct or not, and respond appropriately.

- -

At this point, replace your current checkGuess() function with this version instead:

- -
function checkGuess() {
-  let userGuess = Number(guessField.value);
-  if (guessCount === 1) {
-    guesses.textContent = 'Previous guesses: ';
-  }
-  guesses.textContent += userGuess + ' ';
-
-  if (userGuess === randomNumber) {
-    lastResult.textContent = 'Congratulations! You got it right!';
-    lastResult.style.backgroundColor = 'green';
-    lowOrHi.textContent = '';
-    setGameOver();
-  } else if (guessCount === 10) {
-    lastResult.textContent = '!!!GAME OVER!!!';
-    setGameOver();
-  } else {
-    lastResult.textContent = 'Wrong!';
-    lastResult.style.backgroundColor = 'red';
-    if(userGuess < randomNumber) {
-      lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess > randomNumber) {
-      lowOrHi.textContent = 'Last guess was too high!';
-    }
-  }
-
-  guessCount++;
-  guessField.value = '';
-  guessField.focus();
-}
- -

This is a lot of code — phew! Let's go through each section and explain what it does.

- - - -

Events

- -

At this point we have a nicely implemented checkGuess() function, but it won't do anything because we haven't called it yet. Ideally we want to call it when the "Submit guess" button is pressed, and to do this we need to use an event. Events are things that happen in the browser — a button being clicked, a page loading, a video playing, etc. — in response to which we can run blocks of code. The constructs that listen out for the event happening are called event listeners, and the blocks of code that run in response to the event firing are called event handlers.

- -

Add the following line below your checkGuess() function:

- -
guessSubmit.addEventListener('click', checkGuess);
- -

Here we are adding an event listener to the guessSubmit button. This is a method that takes two input values (called arguments) — the type of event we are listening out for (in this case click) as a string, and the code we want to run when the event occurs (in this case the checkGuess() function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.

- -

Try saving and refreshing your code now, and your example should work — to a point. The only problem now is that if you guess the correct answer or run out of guesses, the game will break because we've not yet defined the setGameOver() function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.

- -

Finishing the game functionality

- -

Let's add that setGameOver() function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:

- -
function setGameOver() {
-  guessField.disabled = true;
-  guessSubmit.disabled = true;
-  resetButton = document.createElement('button');
-  resetButton.textContent = 'Start new game';
-  document.body.appendChild(resetButton);
-  resetButton.addEventListener('click', resetGame);
-}
- - - -

Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:

- -
function resetGame() {
-  guessCount = 1;
-
-  const resetParas = document.querySelectorAll('.resultParas p');
-  for (let i = 0 ; i < resetParas.length ; i++) {
-    resetParas[i].textContent = '';
-  }
-
-  resetButton.parentNode.removeChild(resetButton);
-
-  guessField.disabled = false;
-  guessSubmit.disabled = false;
-  guessField.value = '';
-  guessField.focus();
-
-  lastResult.style.backgroundColor = 'white';
-
-  randomNumber = Math.floor(Math.random() * 100) + 1;
-}
- -

This rather long block of code completely resets everything to how it was at the start of the game, so the player can have another go. It:

- - - -

At this point you should have a fully working (simple) game — congratulations!

- -

All we have left to do now in this article is talk about a few other important code features that you've already seen, although you may have not realized it.

- -

Loops

- -

One part of the above code that we need to take a more detailed look at is the for loop. Loops are a very important concept in programming, which allow you to keep running a piece of code over and over again, until a certain condition is met.

- -

To start with, go to your browser developer tools JavaScript console again, and enter the following:

- -
for (let i = 1 ; i < 21 ; i++) { console.log(i) }
- -

What happened? The numbers 1 to 20 were printed out in your console. This is because of the loop. A for loop takes three input values (arguments):

- -
    -
  1. A starting value: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter i with any name you like too, but i is used as a convention because it's short and easy to remember.
    2. -
  2. An exit condition: Here we have specified i < 21 — the loop will keep going until i is no longer less than 21. When i reaches 21, the loop will no longer run.
    3. -
  3. An incrementor: We have specified i++, which means "add 1 to i". The loop will run once for every value of i, until i reaches a value of 21 (as discussed above). In this case, we are simply printing the value of i out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.
    4. -
- -

Now let's look at the loop in our number guessing game — the following can be found inside the resetGame() function:

- -
let resetParas = document.querySelectorAll('.resultParas p');
-for (let i = 0 ; i < resetParas.length ; i++) {
-  resetParas[i].textContent = '';
-}
- -

This code creates a variable containing a list of all the paragraphs inside <div class="resultParas"> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.

- -

A small discussion on objects

- -

Let's add one more final improvement before we get to this discussion. Add the following line just below the let resetButton; line near the top of your JavaScript, then save your file:

- -
guessField.focus();
- -

This line uses the {{domxref("HTMLElement.focus", "focus()")}} method to automatically put the text cursor into the {{htmlelement("input")}} text field as soon as the page loads, meaning that the user can start typing their first guess right away, without having to click the form field first. It's only a small addition, but it improves usability — giving the user a good visual clue as to what they've got to do to play the game.

- -

Let's analyze what's going on here in a bit more detail. In JavaScript, everything is an object. An object is a collection of related functionality stored in a single grouping. You can create your own objects, but that is quite advanced and we won't be covering it until much later in the course. For now, we'll just briefly discuss the built-in objects that your browser contains, which allow you to do lots of useful things.

- -

In this particular case, we first created a guessField constant that stores a reference to the text input form field in our HTML — the following line can be found amongst our declarations near the top of the code:

- -
const guessField = document.querySelector('.guessField');
- -

To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. querySelector() takes one piece of information — a CSS selector that selects the element you want a reference to.

- -

Because guessField now contains a reference to an {{htmlelement("input")}} element, it will now have access to a number of properties (basically variables stored inside objects, some of which can't have their values changed) and methods (basically functions stored inside objects). One method available to input elements is focus(), so we can now use this line to focus the text input:

- -
guessField.focus();
- -

Variables that don't contain references to form elements won't have focus() available to them. For example, the guesses constant contains a reference to a {{htmlelement("p")}} element, and the guessCount variable contains a number.

- -

Playing with browser objects

- -

Let's play with some browser objects a bit.

- -
    -
  1. First of all, open up your program in a browser.
    2. -
  2. Next, open your browser developer tools, and make sure the JavaScript console tab is open.
    3. -
  3. Type in guessField and the console will show you that the variable contains an {{htmlelement("input")}} element. You'll also notice that the console autocompletes the names of objects that exist inside the execution environment, including your variables!
    4. -
  4. Now type in the following: - 
    guessField.value = 'Hello';
    - The value property represents the current value entered into the text field. You'll see that by entering this command, we've changed the text in the text field!
    5. -
  5. Now try typing in guesses and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.
    6. -
  6. Now try entering the following line: - 
    guesses.value
    - The browser will return undefined, because paragraphs don't have the value property.
    7. -
  7. To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: - 
    guesses.textContent = 'Where is my paragraph?';
    -
    8. -
  8. Now for some fun stuff. Try entering the below lines, one by one: - 
    guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';
    - Every element on a page has a style property, which itself contains an object whose properties contain all the inline CSS styles applied to that element. This allows us to dynamically set new CSS styles on elements using JavaScript.
    9. -
- -

Finished for now...

- -

So that's it for building the example. You got to the end — well done! Try your final code out, or play with our finished version here. If you can't get the example to work, check it against the source code.

- -

{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html b/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html deleted file mode 100644 index 1703f9b6a7..0000000000 --- a/files/de/learn/javascript/first_steps/lustige_geschichten_generator/index.html +++ /dev/null @@ -1,139 +0,0 @@ ---- -title: Der Lustige Geschichten Generator -slug: Learn/JavaScript/First_steps/lustige_geschichten_generator -translation_of: Learn/JavaScript/First_steps/Silly_story_generator ---- -
{{LearnSidebar}}
- -
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
- -

In dieser Prüfung ist es deine Aufgabe das von dir in den vorherigen Artikeln gesammelten Wissen anzuwenden, indem due eine lustige Applikation schreibst, mit der man lustige Geschichten erzeugen kann. Viel Spass mit dem Lustige Geschichten Generator !

- - - - - - - - - - - - -
Vorraussetzungen:Bevor du dich an dieser Aufgabe versuchst, solltest du alle anderen Artikel dieses Moduls gelesen und bearbeitet haben.
Ziel:Verständnis von fundamentalen JavaScript Kenntnissen, wie Variablen, Operatoren und einfachen Datentypen (Zahlen, Zeichenketten, Arrays)
- -

Start

- -

Um mit deiner Aufgabe zu beginnen, solltest du::

- - - -
-

Notiz: Alternativ kannst du auch eine Seite wie JSBin oder Glitch benutzen, um die Aufgabe zu bearbeiten. Kopiere dazu einfach den Quelltext von HTML, CSS und JavaScript in einen dieser Online-Editoren. Wenn einer dieser Editoren kein extra JavaScript Panel haben sollte, kopiere das JavaScript einfach zwischen <script>-Tags in deinem HTML-Code.

-
- -

Projektbeschreibung

- -

Für diese Aufgabe geben wir dir einige HTML/CSS Codestücke, einige Textbausteine und ein paar JavaScript Funktionen in die Hand; du musst die fehlenden JavaScript-Teile ergänzen, um alles zu einem lauffähigen Programm zu kombinieren, was Folgendes tun kann:

- - - -

Der folgende Screenshot zeigt dir ein Beispiel, wie die Ausgabe deines geschriebenen Programmes aussehen wird:

- -

- -

Um dich noch mehr mit deiner Arbeit vertraut zu machen, schau dir die fertige Lösung an (ohne im Quellcode zu spicken! )

- -

Schritt-für-Schritt Anleitung

- -

In den folgenden Abschnitten wird dir erklärt, was du tun musst.

- -

Grundaufbau:

- -
    -
  1. Erzeuge eine Datei mit dem Namen main.js, und zwar im selben Verzeichnis, wie deine index.html Datei.
    2. -
  2. Verbinde deine externe JavaScript Datei main.js mit deiner HTML Datei, indem du es mithilfe des Script-tags {{htmlelement("script")}} in deinem HTML aufrufst. Füge die Zeile kurz vor dem schließenden </body> tag ein.
    3. -
- -

 Vorgegebene Variablen und Functions:

- -
    -
  1. Kopiere alle Code-Zeilen aus der Roh-Text-Datei, die unter der Überschrift "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" stehen und füge Sie an den Anfang deiner main.js Datei. Im Code wirst du 3 Variablen entdecken, die sich auf verschiedene Teile der Ausgabe beziehen: (customName) bezieht sich auf das "Enter custom name" Text Feld , the "Generate random story" button (randomize), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (story), respectively. In addition you've got a function called randomValueFromArray() that takes an array, and returns one of the items stored inside the array at random.
    2. -
  2. Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside main.js: -
      -
    1. Store the first, big long, string of text inside a variable called storyText.
      2. -
    2. Store the first set of three strings inside an array called insertX.
      3. -
    3. Store the second set of three strings inside an array called insertY.
      4. -
    4. Store the third set of three strings inside an array called insertZ.
      5. -
    -
    3. -
- -

Placing the event handler and incomplete function:

- -
    -
  1. Now return to the raw text file.
    2. -
  2. Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your main.js file. This: -
      -
    • Adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
      • -
    • Adds a partially-completed result() function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.
      • -
    -
    3. -
- -

Completing the result() function:

- -
    -
  1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
    2. -
  2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
    3. -
  3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
    4. -
  4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
    5. -
  5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows: -
      -
    1. Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.
      2. -
    2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
      3. -
    3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
      4. -
    4. Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
      5. -
    -
    6. -
  6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.
    7. -
- -

Hints and tips

- - - -

Assessment

- -

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

- -

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

- -

In this module

- - diff --git a/files/de/learn/javascript/first_steps/silly_story_generator/index.html b/files/de/learn/javascript/first_steps/silly_story_generator/index.html new file mode 100644 index 0000000000..1703f9b6a7 --- /dev/null +++ b/files/de/learn/javascript/first_steps/silly_story_generator/index.html @@ -0,0 +1,139 @@ +--- +title: Der Lustige Geschichten Generator +slug: Learn/JavaScript/First_steps/lustige_geschichten_generator +translation_of: Learn/JavaScript/First_steps/Silly_story_generator +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+ +

In dieser Prüfung ist es deine Aufgabe das von dir in den vorherigen Artikeln gesammelten Wissen anzuwenden, indem due eine lustige Applikation schreibst, mit der man lustige Geschichten erzeugen kann. Viel Spass mit dem Lustige Geschichten Generator !

+ + + + + + + + + + + + +
Vorraussetzungen:Bevor du dich an dieser Aufgabe versuchst, solltest du alle anderen Artikel dieses Moduls gelesen und bearbeitet haben.
Ziel:Verständnis von fundamentalen JavaScript Kenntnissen, wie Variablen, Operatoren und einfachen Datentypen (Zahlen, Zeichenketten, Arrays)
+ +

Start

+ +

Um mit deiner Aufgabe zu beginnen, solltest du::

+ + + +
+

Notiz: Alternativ kannst du auch eine Seite wie JSBin oder Glitch benutzen, um die Aufgabe zu bearbeiten. Kopiere dazu einfach den Quelltext von HTML, CSS und JavaScript in einen dieser Online-Editoren. Wenn einer dieser Editoren kein extra JavaScript Panel haben sollte, kopiere das JavaScript einfach zwischen <script>-Tags in deinem HTML-Code.

+
+ +

Projektbeschreibung

+ +

Für diese Aufgabe geben wir dir einige HTML/CSS Codestücke, einige Textbausteine und ein paar JavaScript Funktionen in die Hand; du musst die fehlenden JavaScript-Teile ergänzen, um alles zu einem lauffähigen Programm zu kombinieren, was Folgendes tun kann:

+ + + +

Der folgende Screenshot zeigt dir ein Beispiel, wie die Ausgabe deines geschriebenen Programmes aussehen wird:

+ +

+ +

Um dich noch mehr mit deiner Arbeit vertraut zu machen, schau dir die fertige Lösung an (ohne im Quellcode zu spicken! )

+ +

Schritt-für-Schritt Anleitung

+ +

In den folgenden Abschnitten wird dir erklärt, was du tun musst.

+ +

Grundaufbau:

+ +
    +
  1. Erzeuge eine Datei mit dem Namen main.js, und zwar im selben Verzeichnis, wie deine index.html Datei.
    2. +
  2. Verbinde deine externe JavaScript Datei main.js mit deiner HTML Datei, indem du es mithilfe des Script-tags {{htmlelement("script")}} in deinem HTML aufrufst. Füge die Zeile kurz vor dem schließenden </body> tag ein.
    3. +
+ +

 Vorgegebene Variablen und Functions:

+ +
    +
  1. Kopiere alle Code-Zeilen aus der Roh-Text-Datei, die unter der Überschrift "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" stehen und füge Sie an den Anfang deiner main.js Datei. Im Code wirst du 3 Variablen entdecken, die sich auf verschiedene Teile der Ausgabe beziehen: (customName) bezieht sich auf das "Enter custom name" Text Feld , the "Generate random story" button (randomize), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (story), respectively. In addition you've got a function called randomValueFromArray() that takes an array, and returns one of the items stored inside the array at random.
    2. +
  2. Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside main.js: +
      +
    1. Store the first, big long, string of text inside a variable called storyText.
      2. +
    2. Store the first set of three strings inside an array called insertX.
      3. +
    3. Store the second set of three strings inside an array called insertY.
      4. +
    4. Store the third set of three strings inside an array called insertZ.
      5. +
    +
    3. +
+ +

Placing the event handler and incomplete function:

+ +
    +
  1. Now return to the raw text file.
    2. +
  2. Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your main.js file. This: +
      +
    • Adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
      • +
    • Adds a partially-completed result() function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.
      • +
    +
    3. +
+ +

Completing the result() function:

+ +
    +
  1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
    2. +
  2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
    3. +
  3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
    4. +
  4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
    5. +
  5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and Fahrenheit into stones and centigrade. What you need to do is as follows: +
      +
    1. Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.
      2. +
    2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
      3. +
    3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
      4. +
    4. Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
      5. +
    +
    6. +
  6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.
    7. +
+ +

Hints and tips

+ + + +

Assessment

+ +

If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the discussion thread for this exercise, or in the #mdn IRC channel on Mozilla IRC. Try the exercise first — there is nothing to be gained by cheating!

+ +

{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/de/learn/javascript/first_steps/was_ist_javascript/index.html b/files/de/learn/javascript/first_steps/was_ist_javascript/index.html deleted file mode 100644 index 247b4744c5..0000000000 --- a/files/de/learn/javascript/first_steps/was_ist_javascript/index.html +++ /dev/null @@ -1,339 +0,0 @@ ---- -title: Was ist JavaScript? -slug: Learn/JavaScript/First_steps/Was_ist_JavaScript -translation_of: Learn/JavaScript/First_steps/What_is_JavaScript ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
- -

Willkommen zum MDN-Einsteigerkurs für JavaScript! Im ersten Artikel werden wir uns JavaScript von aussen anschauen und Fragen beantworten wie "Was ist das?" oder  "Was macht das?", und wir stellen sicher, das du weißt was JavaScript ist.

- - - - - - - - - - - - -
Voraussetzungen:Umgang mit einem Computer und ein Grundverständniss von HTML und CSS
Thema:JavaScript kennenlernen, was JavaScript tun kann und wie es in einer Webseite arbeitet.
- -

Eine Experten Definition

- -

JavaScript ist eine Programmiersprache mit der sich komplexe Programme in eine Webseite realisieren lassen. Immer wenn eine Webseite mehr macht als nur statische Informationen anzuzeigen, (zum Beispiel:

- - - -

kannst du dir sicher sein das JavaScript benutzt wurde. Es ist die Dritte der Drei Standard-Technologien im Web, die anderen beiden ( HTML und CSS ) werden in anderen Bereichen des MDN eingeführt und referenziert.

- -

- - - -

Die drei Teile bauen gut auf einander auf. Hier mal ein einfaches Beispiel: Wir können zunächst HTML benutzten, um eine Struktur zu bauen.

- -
<p>Player 1: Chris</p>
- -

- -

Anschließend können wir mit einigen CSS-Regeln denn Satz schön aussehen lassen:

- -
p {
-  font-family: 'helvetica neue', helvetica, sans-serif;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  text-align: center;
-  border: 2px solid rgba(0,0,200,0.6);
-  background: rgba(0,0,200,0.3);
-  color: rgba(0,0,200,0.6);
-  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
-  border-radius: 10px;
-  padding: 3px 10px;
-  display: inline-block;
-  cursor:pointer;
-}
- -

- -

Und zum Schluss können wir mit etwas JavaScript eine Reaktion auf das Klicken des Benutzers implementieren:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
-
- -

{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}

- -

Klick auf das Label und sieh, was passiert (den Code findest du auf GitHub und hier kannst du es in Aktion sehen).

- -

So und was kann ich jetzt damit machen?

- -

Der Kern von JavaScript ähnelt dem anderer Programmiersprachen. In JavaScript kannst du:

- - - -

Aber es gibt noch andere Funktionen die auf dem Kern von JavaScript aufbauen. Die sogenannten Application Programming Interfaces (APIs) geben dir noch mehr Funktionen mit denen du deine Projekte aufbessern kann.

- -

APIs sind von anderen Programmieren geschriebener Code die dir mehr Möglichkeiten geben für dein Programm. Die für dich schwer oder unmöglich wären selber zu programmieren. Sie sind das gleiche was Werkzeuge und Material für Handwerker sind. Es wäre deutlich schwerer alleine erst alle Werkzeuge und dann alle Materiallien herzustellen.

- -

Die APIs kann man generell in zwei Kategorien einteilen:

- -

- -

Browser APIs sind vom Webbrowser des Benutzers. Und sie können auf Ressourcen des computers zugreifen, oder erledigen Dinge die sehr komlpex sind. Ein paar Beispiele:

- - - -
-

Notiz: Viele der oben genannten Beispiele funktionieren in älteren Browsern nicht — wenn du dein Code ausprobieren willst, dann ist es eine gute Idee einen Modernen Browser wie Firefox, Chrome, Edge oder Opera zu benutzen. Es wird trotzdem nötig sein, sich mit Cross Browser Testing auseinander zu setzen, wenn es näher an eine Produktionssystem gehen soll(z.B. Echter Code die echte Kunden benutzen sollen).

-
- -

Drittanbieter-APIssind nicht standardmäßig im Browser integriert, und du wirst großenteils deren Code und Informationen von wo anders finden müssen. Zum Beispiel

- - - -
-

Notiz: Diese APIs sind sehr fortschrittlich und werden in diesem Modul nicht weiter behandelt.Du findest weitere Informationen bei unseren ModulClientbasierte Web APIs Modul.

-
- -

Es sind noch viele weitere APIs Verfügbar! Trotzdem werde jetzt nicht zu aufgeregt, denn du wirst es nicht schaffen, das nächste Facebook, Google Maps, oder Instagram zu entwickeln, nach gerade mal 24 Stunden JavaScript lernen — es gibt nämlich noch viele Sachen die Behandelt werden müssen. Und deswegen bist du hier — also lass uns weiter machen!

- -

Was genau macht JavaScript auf deiner Webseite?

- -

Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

- -

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

- -

- -

The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

- -

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.

- -

Browser Sicherheit

- -

Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

- -
-

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

-
- -

JavaScript running order

- -

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

- -
var para = document.querySelector('p');
-
-para.addEventListener('click', updateName);
-
-function updateName() {
-  var name = prompt('Enter a new name');
-  para.textContent = 'Player 1: ' + name;
-}
- -

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code block are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

- -

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

- -
-

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

-
- -

Interpreted versus compiled code

- -

You might hear the terms interpreted and compiled in the context of programming. JavaScript is an interpreted language — the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.

- -

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.

- -

Both approaches have different advantages, which we won't discuss at this point.

- -

Server-side versus client-side code

- -

You might also hear the terms server-side and client-side code, specially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

- -

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find more out about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

- -

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

- -

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

- -

How do you add JavaScript to your page?

- -

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

- -

Internal JavaScript

- -
    -
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. -
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. -
  3. Next, go to your text editor and add the following just before your closing </body> tag: - 
    <script>
-
-  // JavaScript goes here
-
-</script>
    -
    4. -
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: - 
    function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
    -
    5. -
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. -
- -
-

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </body> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

-
- -
-

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

-
- -

External JavaScript

- -

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

- -
    -
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. -
  2. Next, copy all of the script out of your current {{htmlelement("script")}} element and paste it into the .js file. Save that file.
    3. -
  3. Now replace your current {{htmlelement("script")}} element with the following: - 
    <script src="script.js"></script>
    -
    4. -
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got the JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.
    5. -
- -

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

- -

Inline JavaScript handlers

- -

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

- -
function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
- -
<button onclick="createParagraph()">Click me!</button>
- -

You can try this version of our demo below.

- -

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

- -

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

- -

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

- -

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

- -
var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

This might look a bit longer than the onclick attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.

- -
-

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

-
- -

Comments

- -

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

- - - -

So for example, we could annotate our last demo's JavaScript with comments like so:

- -
// Function: creates a new paragraph and append it to the bottom of the HTML body.
-
-function createParagraph() {
-  var para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
-
-/*
-  1. Get references to all the buttons on the page and sort them in an array.
-  2. Loop through all the buttons and add a click event listener to each one.
-
-  When any button is pressed, the createParagraph() function will be run.
-*/
-
-var buttons = document.querySelectorAll('button');
-
-for (var i = 0; i < buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}
- -

Summary

- -

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

- -

JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

- -

In this module

- - - -

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

diff --git a/files/de/learn/javascript/first_steps/what_is_javascript/index.html b/files/de/learn/javascript/first_steps/what_is_javascript/index.html new file mode 100644 index 0000000000..247b4744c5 --- /dev/null +++ b/files/de/learn/javascript/first_steps/what_is_javascript/index.html @@ -0,0 +1,339 @@ +--- +title: Was ist JavaScript? +slug: Learn/JavaScript/First_steps/Was_ist_JavaScript +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

Willkommen zum MDN-Einsteigerkurs für JavaScript! Im ersten Artikel werden wir uns JavaScript von aussen anschauen und Fragen beantworten wie "Was ist das?" oder  "Was macht das?", und wir stellen sicher, das du weißt was JavaScript ist.

+ + + + + + + + + + + + +
Voraussetzungen:Umgang mit einem Computer und ein Grundverständniss von HTML und CSS
Thema:JavaScript kennenlernen, was JavaScript tun kann und wie es in einer Webseite arbeitet.
+ +

Eine Experten Definition

+ +

JavaScript ist eine Programmiersprache mit der sich komplexe Programme in eine Webseite realisieren lassen. Immer wenn eine Webseite mehr macht als nur statische Informationen anzuzeigen, (zum Beispiel:

+ + + +

kannst du dir sicher sein das JavaScript benutzt wurde. Es ist die Dritte der Drei Standard-Technologien im Web, die anderen beiden ( HTML und CSS ) werden in anderen Bereichen des MDN eingeführt und referenziert.

+ +

+ + + +

Die drei Teile bauen gut auf einander auf. Hier mal ein einfaches Beispiel: Wir können zunächst HTML benutzten, um eine Struktur zu bauen.

+ +
<p>Player 1: Chris</p>
+ +

+ +

Anschließend können wir mit einigen CSS-Regeln denn Satz schön aussehen lassen:

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor:pointer;
+}
+ +

+ +

Und zum Schluss können wir mit etwas JavaScript eine Reaktion auf das Klicken des Benutzers implementieren:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}

+ +

Klick auf das Label und sieh, was passiert (den Code findest du auf GitHub und hier kannst du es in Aktion sehen).

+ +

So und was kann ich jetzt damit machen?

+ +

Der Kern von JavaScript ähnelt dem anderer Programmiersprachen. In JavaScript kannst du:

+ + + +

Aber es gibt noch andere Funktionen die auf dem Kern von JavaScript aufbauen. Die sogenannten Application Programming Interfaces (APIs) geben dir noch mehr Funktionen mit denen du deine Projekte aufbessern kann.

+ +

APIs sind von anderen Programmieren geschriebener Code die dir mehr Möglichkeiten geben für dein Programm. Die für dich schwer oder unmöglich wären selber zu programmieren. Sie sind das gleiche was Werkzeuge und Material für Handwerker sind. Es wäre deutlich schwerer alleine erst alle Werkzeuge und dann alle Materiallien herzustellen.

+ +

Die APIs kann man generell in zwei Kategorien einteilen:

+ +

+ +

Browser APIs sind vom Webbrowser des Benutzers. Und sie können auf Ressourcen des computers zugreifen, oder erledigen Dinge die sehr komlpex sind. Ein paar Beispiele:

+ + + +
+

Notiz: Viele der oben genannten Beispiele funktionieren in älteren Browsern nicht — wenn du dein Code ausprobieren willst, dann ist es eine gute Idee einen Modernen Browser wie Firefox, Chrome, Edge oder Opera zu benutzen. Es wird trotzdem nötig sein, sich mit Cross Browser Testing auseinander zu setzen, wenn es näher an eine Produktionssystem gehen soll(z.B. Echter Code die echte Kunden benutzen sollen).

+
+ +

Drittanbieter-APIssind nicht standardmäßig im Browser integriert, und du wirst großenteils deren Code und Informationen von wo anders finden müssen. Zum Beispiel

+ + + +
+

Notiz: Diese APIs sind sehr fortschrittlich und werden in diesem Modul nicht weiter behandelt.Du findest weitere Informationen bei unseren ModulClientbasierte Web APIs Modul.

+
+ +

Es sind noch viele weitere APIs Verfügbar! Trotzdem werde jetzt nicht zu aufgeregt, denn du wirst es nicht schaffen, das nächste Facebook, Google Maps, oder Instagram zu entwickeln, nach gerade mal 24 Stunden JavaScript lernen — es gibt nämlich noch viele Sachen die Behandelt werden müssen. Und deswegen bist du hier — also lass uns weiter machen!

+ +

Was genau macht JavaScript auf deiner Webseite?

+ +

Here we'll start actually looking at some code, and while doing so explore what actually happens when you run some JavaScript in your page.

+ +

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

+ +

+ +

The JavaScript is executed by the browser's JavaScript engine, after the HTML and CSS have been assembled and put together into a web page. This ensures that the structure and style of the page are already in place by the time the JavaScript starts to run.

+ +

This is a good thing, as a very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). If the JavaScript loaded and tried to run before the HTML and CSS was there to affect, then errors would occur.

+ +

Browser Sicherheit

+ +

Each browser tab is its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

+ +
+

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

+
+ +

JavaScript running order

+ +

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

+ +
var para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  var name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code block are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

+ +

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

+ +
+

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

+
+ +

Interpreted versus compiled code

+ +

You might hear the terms interpreted and compiled in the context of programming. JavaScript is an interpreted language — the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it.

+ +

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example C/C++ are compiled into assembly language that is then run by the computer.

+ +

Both approaches have different advantages, which we won't discuss at this point.

+ +

Server-side versus client-side code

+ +

You might also hear the terms server-side and client-side code, specially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this JavaScript module we are explicitly talking about client-side JavaScript.

+ +

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, and ASP.NET. And JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find more out about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

+ +

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, inserting data requested from the server into it, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

+ +

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

+ +

How do you add JavaScript to your page?

+ +

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

+ +

Internal JavaScript

+ +
    +
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. +
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. +
  3. Next, go to your text editor and add the following just before your closing </body> tag: + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + 
    function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    5. +
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. +
+ +
+

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </body> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

+
+ +
+

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

+
+ +

External JavaScript

+ +

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

+ +
    +
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. +
  2. Next, copy all of the script out of your current {{htmlelement("script")}} element and paste it into the .js file. Save that file.
    3. +
  3. Now replace your current {{htmlelement("script")}} element with the following: + 
    <script src="script.js"></script>
    +
    4. +
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got the JavaScript in an external file. This is generally a good thing in terms of organizing your code, and making it reusable across multiple HTML files. Plus the HTML is easier to read without huge chunks of script dumped in it.
    5. +
+ +

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

+ +

Inline JavaScript handlers

+ +

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

+ +
function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+ +

You can try this version of our demo below.

+ +

{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}

+ +

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

+ +

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you wanted the JavaScript to apply to.

+ +

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

+ +
var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

This might look a bit longer than the onclick attribute, but this will work for all buttons no matter how many are on the page, and how many are added or removed. The JavaScript does not need to be changed.

+ +
+

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

+
+ +

Comments

+ +

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after 6 months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

+ + + +

So for example, we could annotate our last demo's JavaScript with comments like so:

+ +
// Function: creates a new paragraph and append it to the bottom of the HTML body.
+
+function createParagraph() {
+  var para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page and sort them in an array.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+var buttons = document.querySelectorAll('button');
+
+for (var i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

Summary

+ +

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript, and what kind of things you can do with it. Along the way you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

+ +

JavaScript may seem a bit daunting right now, but don't worry — in this course we will take you through it in simple steps that will make sense going forward. In the next article we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

+ +

In this module

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

diff --git a/files/de/learn/mitarbeiten/index.html b/files/de/learn/mitarbeiten/index.html deleted file mode 100644 index 02405b9280..0000000000 --- a/files/de/learn/mitarbeiten/index.html +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Zum MDN Lern-Bereich beitragen -slug: Learn/Mitarbeiten -tags: - - Anfänger - - Anleitung - - Dokumentation - - Lernen - - MDN Meta - - Mitmachen -translation_of: Learn/How_to_contribute ---- -

{{LearnSidebar}}

- -

Falls Du zum ersten Mal oder nach langer Suche hier gelandet bist liegt das vermutlich daran, dass Du etwas zum MDN Lern-Bereich beitragen möchtest. Herzlich Willkommen!

- -

Auf dieser Seite findest Du alles was Du benötigst um den Lern-Bereich im MDN zu verbessern. Du hast zahlreiche Möglichkeiten hier mitzuwirken: Als Anfänger, Webentwickler oder Lehrer - je nachdem, wie viel Zeit und Erfahrung Du hast.

- -
-

Hinweis: Falls Du bereits im MDN mitwirkst prüfe am besten noch einmal die documentation status page. Dort kannst Du sehen was bereits gemacht wurde und was als nächstes in Angriff genommen werden sollte.

-
- -
-

Hinweis: Mitwirkende verwenden ein Trello board um ihre Aufgaben zu organisieren. Falls Du das auch tun willst erstelle einen Trello account und schreibe Jeremie an, damit er Dir Schreibrechte für das Board gewährt.

-
- -

Ich bin Anfänger

- -

Grossartig! Anfänger sind sehr wichtig für das Erstellen und das Bewerten der Lernmaterialien. Für sie sind die Artikel geschrieben und ihre einzigartige Sicht auf die Artikel kann sie zu wertvollen Mitarbeitern unseres Teams machen. Falls Du einen unserer Artikel zum Lernen verwendest und nicht weiter kommst oder ihn verwirrend findest kannst Du ihn entweder selbst verbessern oder uns Dein Problem melden. Wir kümmern uns darum.

- -

Diese Form der Mitarbeit während des Lernens kann auch Spass machen. Falls Du Dich irgendwo nicht zurechtfindest oder Fragen hast kannst Du uns über unsere Mailingliste oder in unserem IRC channel (mehr Informationen am Ende dieser Seite) erreichen.

- -

Hier ein paar Vorschläge wie Du mithelfen kannst:

- -
-
Füge Tags zu unseren Artikeln hinzu (5 min)
-
Eine einfache Möglichkeit unser Projekt zu unterstützten ist das Taggen von MDN-Inhalten. Da viele unserer Artikel Tags verwenden um Informationen im Kontext aufzubereiten, ist das Taggen eine große Hilfe für uns. Um loszulegen schau Dir die Listen von glossary entries und learning articles ohne Tags an.
-
Lese und bewerte einen Glossar-Eintrag (15 min)
-
Als Anfänger schaut man unvoreingenommen auf Inhalte. Wenn Du der Meinung bist, dass ein Glossar-Eintrag schwer zu verstehen ist, dann bedeutet das, dass er verbessert werden muss. Du kannst gleich loslegen und das ändern, was Deiner Meinung nach geändert werden muss. Falls Du es nicht selbst machen willst gib uns über unsere mailing list Bescheid.
-
Schreibe einen neuen Glossar-Eintrag (1 Stunde)
-
Einen eigenen Glossar-Eintrag zu schreiben ist die effektivste Methode, um etwas Neues zu lernen. Such Dir einfach irgendetwas aus, das Du verstehen möchtest. Während Du Dich damit beschäftigst kannst Du dazu einen Glossar-Eintrag verfassen. Anderen Menschen etwas zu erklären hilft Dir dabei das Wissen darüber zu festigen.
-
Lese und bewerte einen Lern-Artikel (2 Stunden)
-
Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe oben); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.
-
- -

Ich bin Webentwickler

- -

Fantastisch! Deine technischen Fähigkeiten sind genau das, was wir brauchen, um technisch verständliche und korrekte Inhalte für Anfänger bereitzustellen. Da dieser Bereich von MDN dazu da ist, das Web zu verstehen, gilt es, deine Erklärungen so einfach wie möglich zu halten. Sie sollten aber auch nicht so einfach sein, dass sie den Benutzern nicht weiterhelfen. Schreibe lieber verständlich als übergenau.

- -
-
Lies und bewerte einen Glossar-Eintrag (15 min)
-
Wir müssen darauf achten, dass unsere Inhalte technisch korrekt und dabei nicht übergenau sind. Du kannst gleich loslegen und das ändern, was deiner Meinung nach geändert werden muss. Falls du davor mit uns deine Änderungen besprechen möchtest, erreichst du uns über die Mailing Liste oder den IRC channel.
-
Schreibe einen neuen Glossar-Eintrag (1 Stunde)
-
Technischen Jargon zu entfernen ist eine gute Möglichkeit zu lernen. Außerdem hilft es dabei, sowohl technisch genau als auch einfach zu schreiben. Anfänger werden es dir danken. Wir haben many undefined terms, die der Klärung bedürfen. Wähle einen davon aus und fang einfach an.
-
Lies und bewerte einen Lern-Artikel (2 Stunden)
-
Das Lesen und Bewerten eines Lern-Artikels ist ziemlich genau dasselbe wie das Bewerten eines Glossar-Eintrags (siehe obene); es dauert allerdings deutlich länger, da diese Artikel in der Regel einen größeren Umfang haben.
-
Schreibe einen neuen Lern-Artikel (4 Stunden)
-
MDN möchte nicht einfach nur neue Artikel über Web-Technologien (HTML, CSS, JavaScript, etc) veröffentlichen. Wir haben auch eine Menge Artikel im MDN, die geprüft und überarbeitet werden müssen. Gib alles, was Du kannst um Web-Technolgien auch für Anfänger zugänglich zu machen.
-
Füge Übungen, Code-Beispiele oder interaktive Lernmittel hinzu (? hours)
-
Alle unsere Lern-Artikel sollten "aktive Lernmittel" (wir wir es nennen) unterstüzen, denn Menschen lernen am besten durch praktisches Ausprobieren. Solche Lernmittel sind z.B. Übungen oder interaktiver Content, den die Lernenden ausführen und dessen Konzepte sie im Detail ändern können. Es gibt mehrere Wege zum Erzeugen von interaktivem Content, vom Anlegen von Code-Beispielen mit JSFiddle oder ähnlichen Tools bis hin zum Aufbau komplett änderbaren interaktiven Contents mit Thimble. Entfessele Deine Kreativität!
-
- -

Ich bin Lehrer

- -

MDN hat eine lange Geschichte technischer Exzellenz, aber wir haben ein paar Defizite in der Art und Weise wie wir Konzepte an Neu-Einsteiger vermitteln. Hier brauchen wir Dich als Lehrer und Pädagoge. Du kannst uns helfen sicherzustellen, dass unsere Lehrmaterialien einen hohen praktischen Nutzen für unsere Leser haben.

- -
-
Lese und überprüfe einen Glossar-Eintrag (15 min)
-
Prüfe einen Glossar-Eintrag und scheue Dich nicht, aus Deiner Sicht notwendige Änderungen durchzuführen. Wenn Du den Inhalt vor dem Ändern diskutieren möchtest, dann informiere uns über unsere Mailing-Liste oder unseren IRC channel.
-
Schreibe einen neuen Glossar-Eintrag (1 hour)
-
Klare, einfache Begriffs-Definitonen und Übersichtsbilder von Konzepten im Glossar sind kritisch im Hinblick auf die Bedürfnisse von Anfängern. Deine Erfahrung als Pädagoge kann uns helfen, exzellente Glossar-Einträge zu pflegen; wir haben viele undefinierte Begriffe, die Deine Aufmerksamkeit benötigen. Such Dir einen heraus und los geht's.
-
Füge Illustrationen und/oder Schemata zu Artikel hinzu (1 hour)
-
Wie Du vielleicht weißt sind Illustrationen von unschätzbarem Wert für jedes Lehrmittel. Hier haben wir im MDN oftmals Defizite und Deine Fähigkeiten können in diesem Bereich den Unterschied machen. Prüfe die Artikel mit zu wenig Illustrationen und suche Dir einen heraus, für den Du eine Illustration anlegen möchtest.
-
Lese und überprüfe einen Lern-Artikel (2 hours)
-
Das ist so ähnlich wie das Überprüfen von Glossar-Einträgen (siehe oben). Aber es erfordert mehr Zeit, da die Artikel in der Regel umfangreicher sind.
-
Schreibe einen neuen Lern-Artikel (4 hours)
-
Wir brauchen einfache, zielführende Artikel über das Web im allgemeinen und die im Web verwendeten Technologien und Funktionen. Da diese Artikel etwas vermitteln und nicht alles Mögliche literarisch aufbereiten sollen ist Deine Erfahrung gefragt, um die relevanten Themen zu finden und diese zielgruppengerecht aufzubereiten.
-
Füge Übungen, Ratespiele oder interaktive Lernmittel hinzu (? hours)
-
Alle unsere Lern-Artikel benötigen "aktive Lernmittel". Solche Lernmittel sind z.B. Übungen oder interaktiver Content, mit dessen Hilfe die Lernenden den vermittelten Lernstoff anwenden und weiterentwickeln können. Es gibt eine Menge Dinge die Du hier tun kannst, von Ratespielen bis hin zum Aufbau komplett änderbaren interaktiven Contents mit Thimble. Entfessele Deine Kreativität!
-
Füge Lern-Pfade hinzu (? hours)
-
Um fortschrittliche und nachvollziehbare Tutorials anzubieten müssen wir unsere Inhalte wie Lern-Pfade gestalten. Ein möglicher Weg ist, bestehende Artikel darauf zu prüfen was diesen Artikeln zu einem Lern-Artikel fehlt.
-
diff --git a/files/de/learn/server-side/erste_schritte/index.html b/files/de/learn/server-side/erste_schritte/index.html deleted file mode 100644 index d2a3cc75ca..0000000000 --- a/files/de/learn/server-side/erste_schritte/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Erste Schritte in serverseitiger Webseiten-Programmierung -slug: Learn/Server-side/Erste_Schritte -tags: - - Anfänger - - Einführung - - Lernen - - Serverseitige Programmierung -translation_of: Learn/Server-side/First_steps ---- -

{{LearnSidebar}}
- In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.

- -

 

- -

Vorraussetzungen

- -

Wenn Sie mit diesem Modul starten, müssen Sie keine Kenntnisse in der serverseitigen Website-Programmierung oder in irgendeiner anderen Art von Programmierung haben. 

- -

Allerdings müssen Sie verstehen, "Wie das Web funktioniert". Wir empfehlen Ihnen, zuerst die folgenden Themen zu lesen:

- - - -

Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die einzelnen Module in diesem Abschnitt zu arbeiten. 

- -

Anleitungen

- -
-
Einführung auf der Serverseite
-
-

Willkommen zum MDN Einsteigerkurs Server-seitige Programmierung! In diesem ersten Artikel betrachten wir die grundlegende serverseitige Programmierung und beantworten Fragen wie "Was ist das?", "Worin unterscheidet es sich von der clientseitigen Programmierung?" und "Warum ist es so nützlich?". Nachdem Sie diesen Artikel gelesen haben, werden Sie den Einfluss verstehen, den Websites durch serverseitige Programmierung erhalten.

-
-
Überblick über den Client-Server
-
-

Nachdem Sie nun den Zweck und die möglichen Vorteile der serverseitigen Programmierung kennen, werden wir jetzt im Detail untersuchen was passiert, wenn ein Server eine "dynamische Anforderung" von einem Browser erhält. Da die meisten serverseitigen Codes auf der Website Anfragen und Antworten auf ähnliche Weise behandeln, hilft Ihnen dies zu verstehen, was Sie beim Schreiben Ihres eigenen Codes tun müssen.

-
-
Serverseitige Webframeworks
-
Der letzte Artikel zeigte Ihnen was eine serverseitige Webanwendung tun muss, um auf Anfragen von einem Webbrowser zu reagieren. Nun zeigen wir Ihnen, wie Web-Frameworks diese Aufgaben vereinfachen können und helfen Ihnen, das richtige Framework für Ihre erste serverseitige Webanwendung auszuwählen.
-
Webseitensicherheit
-
Die Sicherheit der Website erfordert ständige Aufmerksamkeit in allen Aspekten des Designs und der Nutzung der Website. Dieser einleitende Artikel wird Sie nicht zu einem Guru für Websitensicherheit machen, aber er wird Ihnen helfen, die ersten wichtigen Schritte zu verstehen die Sie unternehmen können, um Ihre Webanwendung gegen die häufigsten Bedrohungen zu schützen.
-
- -

Aufgaben

- -

Dieses Modul "Übersicht" hat keine Aufgaben, da wir Ihnen noch keinen Code angezeigt haben. Wir hoffen, dass Sie an dieser Stelle ein gutes Verständnis dafür haben, welche Art von Funktionalität Sie mit serverseitiger Programmierung liefern können und Sie haben eine Entscheidung darüber getroffen, mit welchem serverseitigen Web-Framework Sie Ihre erste Website erstellen werden.

diff --git a/files/de/learn/server-side/erste_schritte/introduction/index.html b/files/de/learn/server-side/erste_schritte/introduction/index.html deleted file mode 100644 index 2924655941..0000000000 --- a/files/de/learn/server-side/erste_schritte/introduction/index.html +++ /dev/null @@ -1,230 +0,0 @@ ---- -title: Einführung auf der Serverseite -slug: Learn/Server-side/Erste_Schritte/Introduction -tags: - - Anfänger - - Einführung -translation_of: Learn/Server-side/First_steps/Introduction ---- -
{{LearnSidebar}}
- -
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
- -

Willkommen zum Einsteigerkurs für serverseitige Programmierung! In diesem ersten Artikel schauen wir uns die serverseitige Programmierung im Überblick an, antworten auf Fragen wie "Was ist das?", "Wie unterscheidet es sich von der Client-Seitigen Programmierung?" und "Warum ist es so nützlich?" Nachdem Du diesen Artikel gelesen hast wirst Du den Einfluss verstehen, den Websites durch die serverseitige Programmierung erhalten.

- - - - - - - - - - - - -
Vorraussetzungen:Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.
Ziel:Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.
- -

Die meisten großen Websites verwenden serverseitigen Code, um bei Bedarf verschiedene Daten dynamisch anzuzeigen, die im Allgemeinen aus einer auf einem Server gespeicherten Datenbank gezogen und an den Client gesendet werden, um über einen bestimmten Code (z.B. HTML und JavaScript) angezeigt zu werden.

- -

Der wahrscheinlich größte Vorteil von serverseitigem Code liegt darin, dass man den Inhalt individuell für jeden Benutzer anpassen kann. Dadurch können zum Beispiel bestimmte Details oder Angebote einer Website für bestimmte User hervorgehoben werden. Des weiteren kann serverseitiger Code die Website benutzerfreundlicher machen, indem zum Beispiel Kreditkarteninformationen oder die Versandadresse für weitere Bestellungen gespeichert werden.

- -

Serverseitiger Code wird auch benötigt, um Interaktionen des Benutzers zu ermöglichen. Hierdurch können z.B. Benachrichtigungen oder Updates per E-Mail oder andere Kanäle versendet werden. All diese Vorteile bringen eine bessere Verknüpfung zwischen Benutzer und Website.

- -

In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.

- -

What is server-side website programming?

- -

Web browsers communicate with web servers using the HyperText Transfer Protocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.

- -

The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated {{glossary("Cookie", "cookies")}}.

- -

Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). 

- -

The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser.

- -

Static sites

- -

The diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL.

- -

The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see client error responses and server error responses).

- -

A simplified diagram of a static web server.

- -

Dynamic sites

- -

A dynamic website is one where some of the response content is generated dynamically only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). 

- -

A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications).

- -

Most of the code to support a dynamic website must run on the server. Creating this code is known as "server-side programming" (or sometimes "back-end scripting").

- -

The diagram below shows a simple architecture for a dynamic website. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.

- -

Requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: CSS, JavaScript, Images, pre-created PDF files etc). 

- -

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

- -

Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a Web Application). For "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with HTML templates (4), and sends back a response containing the generated HTML (5,6). 

- -
-

Are server-side and client-side programming the same?

-
- -

Let's now turn our attention to the code involved in server-side and client-side programming. In each case, the code is significantly different:

- - - -

Code running in the browser is known as client-side code and is primarily concerned with improving the appearance and behavior of a rendered web page. This includes selecting and styling UI components, creating layouts, navigation, form validation, etc. By contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required.

- -

Client-side code is written using HTML, CSS, and JavaScript — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system).

- -

Web developers can't control what browser every user might be using to view a website  — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully.

- -

Server-side code can be written in any number of programming languages — examples of popular server-side web languages include PHP, Python, Ruby, C#, and NodeJS(JavaScript). The server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use.

- -

Developers typically write their code using web frameworks. Web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular domain.

- -

Again, while both client and server-side code use frameworks, the domains are very different, and hence so are the frameworks. Client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g. support for sessions, support for users and authentication, easy database access, templating libraries, etc.).

- -
-

Note: Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.

- -

In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.

-
- -
-

What can you do on the server-side?

- -

Server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience.

-
- -

Companies like Amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc.

- -

Banks use server-side programming to store account information and allow only authorized users to view and make transactions. Other services like Facebook, Twitter, Instagram, and Wikipedia use server-side programming to highlight, share, and control access to interesting content.

- -

Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!

- -

Efficient storage and delivery of information

- -

Imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Creating a separate static page for each product or post would be completely impractical.

- -

Server-side programming allows us to instead store the information in a database and dynamically construct and return HTML and other types of files (e.g. PDFs, images, etc.). It is also possible to simply return data ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).

- -

The server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. The content can even be targeted for the type of client device that is receiving it.

- -

Because the information is in a database, it can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory).

- -
-

Note: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:

- -
    -
  1. Go to Amazon or some other e-commerce site.
    2. -
  2. Search for a number of keywords and note how the page structure doesn't change, even though the results do. 
    3. -
  3. Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.
    4. -
- -

For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.

-
- -

Customised user experience

- -

Servers can store and use information about clients to provide a convenient and tailored user experience. For example, many sites store credit cards so that details don't have to be entered again. Sites like Google Maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results.

- -

A deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map.

- -
-

Note: Google Maps saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.

- -

Google search results are optimized based on previous searches.

- -
    -
  1.  Go to Google search.
    2. -
  2.  Search for "football".
    3. -
  3.  Now try typing "favourite" in the search box and observe the autocomplete search predictions.
    4. -
- -

Coincidence? Nada!

-
- -

Controlled access to content

- -

Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.

- -

Real world examples include:

- - - -
-

Note: Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?

-
- -

Store session/state information

- -

Server-side programming allows developers to make use of sessions — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.

- -

This allows, for example, a site to know that a user has previously logged in and display links to their emails or order history, or perhaps save the state of a simple game so that the user can go to a site again and carry on where they left it.

- -
-

Note: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. The Age). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.

-
- -

Notifications and communication

- -

Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.

- -

A few examples include:

- - - -
-

Note: The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.

-
- -

Data analysis

- -

A website may collect a lot of data about users: what they search for, what they buy, what they recommend, how long they stay on each page. Server-side programming can be used to refine responses based on analysis of this data.

- -

For example, Amazon and Google both advertise products based on previous searches (and purchases).

- -
-

Note: If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.

- -

Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!

-
- -

Summary

- -

Congratulations, you've reached the end of the first article about server-side programming. 

- -

You've now learned that server-side code is run on a web server and that its main role is to control what information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).

- -

You should also understand that it is useful because it allows us to create websites that efficiently deliver information tailored for individual users and have a good idea of some of the things you might be able to do when you're a server-side programmer.

- -

Lastly, you should understand that server-side code can be written in a number of programming languages and that you should use a web framework to make the whole process easier. 

- -

In a future article we'll help you choose the best web framework for your first site; Next, though we'll take you through the main client-server interactions in just a little more detail.

- -

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

- -

In this module

- - diff --git a/files/de/learn/server-side/first_steps/index.html b/files/de/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..d2a3cc75ca --- /dev/null +++ b/files/de/learn/server-side/first_steps/index.html @@ -0,0 +1,49 @@ +--- +title: Erste Schritte in serverseitiger Webseiten-Programmierung +slug: Learn/Server-side/Erste_Schritte +tags: + - Anfänger + - Einführung + - Lernen + - Serverseitige Programmierung +translation_of: Learn/Server-side/First_steps +--- +

{{LearnSidebar}}
+ In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.

+ +

 

+ +

Vorraussetzungen

+ +

Wenn Sie mit diesem Modul starten, müssen Sie keine Kenntnisse in der serverseitigen Website-Programmierung oder in irgendeiner anderen Art von Programmierung haben. 

+ +

Allerdings müssen Sie verstehen, "Wie das Web funktioniert". Wir empfehlen Ihnen, zuerst die folgenden Themen zu lesen:

+ + + +

Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die einzelnen Module in diesem Abschnitt zu arbeiten. 

+ +

Anleitungen

+ +
+
Einführung auf der Serverseite
+
+

Willkommen zum MDN Einsteigerkurs Server-seitige Programmierung! In diesem ersten Artikel betrachten wir die grundlegende serverseitige Programmierung und beantworten Fragen wie "Was ist das?", "Worin unterscheidet es sich von der clientseitigen Programmierung?" und "Warum ist es so nützlich?". Nachdem Sie diesen Artikel gelesen haben, werden Sie den Einfluss verstehen, den Websites durch serverseitige Programmierung erhalten.

+
+
Überblick über den Client-Server
+
+

Nachdem Sie nun den Zweck und die möglichen Vorteile der serverseitigen Programmierung kennen, werden wir jetzt im Detail untersuchen was passiert, wenn ein Server eine "dynamische Anforderung" von einem Browser erhält. Da die meisten serverseitigen Codes auf der Website Anfragen und Antworten auf ähnliche Weise behandeln, hilft Ihnen dies zu verstehen, was Sie beim Schreiben Ihres eigenen Codes tun müssen.

+
+
Serverseitige Webframeworks
+
Der letzte Artikel zeigte Ihnen was eine serverseitige Webanwendung tun muss, um auf Anfragen von einem Webbrowser zu reagieren. Nun zeigen wir Ihnen, wie Web-Frameworks diese Aufgaben vereinfachen können und helfen Ihnen, das richtige Framework für Ihre erste serverseitige Webanwendung auszuwählen.
+
Webseitensicherheit
+
Die Sicherheit der Website erfordert ständige Aufmerksamkeit in allen Aspekten des Designs und der Nutzung der Website. Dieser einleitende Artikel wird Sie nicht zu einem Guru für Websitensicherheit machen, aber er wird Ihnen helfen, die ersten wichtigen Schritte zu verstehen die Sie unternehmen können, um Ihre Webanwendung gegen die häufigsten Bedrohungen zu schützen.
+
+ +

Aufgaben

+ +

Dieses Modul "Übersicht" hat keine Aufgaben, da wir Ihnen noch keinen Code angezeigt haben. Wir hoffen, dass Sie an dieser Stelle ein gutes Verständnis dafür haben, welche Art von Funktionalität Sie mit serverseitiger Programmierung liefern können und Sie haben eine Entscheidung darüber getroffen, mit welchem serverseitigen Web-Framework Sie Ihre erste Website erstellen werden.

diff --git a/files/de/learn/server-side/first_steps/introduction/index.html b/files/de/learn/server-side/first_steps/introduction/index.html new file mode 100644 index 0000000000..2924655941 --- /dev/null +++ b/files/de/learn/server-side/first_steps/introduction/index.html @@ -0,0 +1,230 @@ +--- +title: Einführung auf der Serverseite +slug: Learn/Server-side/Erste_Schritte/Introduction +tags: + - Anfänger + - Einführung +translation_of: Learn/Server-side/First_steps/Introduction +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+ +

Willkommen zum Einsteigerkurs für serverseitige Programmierung! In diesem ersten Artikel schauen wir uns die serverseitige Programmierung im Überblick an, antworten auf Fragen wie "Was ist das?", "Wie unterscheidet es sich von der Client-Seitigen Programmierung?" und "Warum ist es so nützlich?" Nachdem Du diesen Artikel gelesen hast wirst Du den Einfluss verstehen, den Websites durch die serverseitige Programmierung erhalten.

+ + + + + + + + + + + + +
Vorraussetzungen:Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.
Ziel:Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.
+ +

Die meisten großen Websites verwenden serverseitigen Code, um bei Bedarf verschiedene Daten dynamisch anzuzeigen, die im Allgemeinen aus einer auf einem Server gespeicherten Datenbank gezogen und an den Client gesendet werden, um über einen bestimmten Code (z.B. HTML und JavaScript) angezeigt zu werden.

+ +

Der wahrscheinlich größte Vorteil von serverseitigem Code liegt darin, dass man den Inhalt individuell für jeden Benutzer anpassen kann. Dadurch können zum Beispiel bestimmte Details oder Angebote einer Website für bestimmte User hervorgehoben werden. Des weiteren kann serverseitiger Code die Website benutzerfreundlicher machen, indem zum Beispiel Kreditkarteninformationen oder die Versandadresse für weitere Bestellungen gespeichert werden.

+ +

Serverseitiger Code wird auch benötigt, um Interaktionen des Benutzers zu ermöglichen. Hierdurch können z.B. Benachrichtigungen oder Updates per E-Mail oder andere Kanäle versendet werden. All diese Vorteile bringen eine bessere Verknüpfung zwischen Benutzer und Website.

+ +

In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.

+ +

What is server-side website programming?

+ +

Web browsers communicate with web servers using the HyperText Transfer Protocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an HTTP request is sent from your browser to the target server.

+ +

The request includes a URL identifying the affected resource, a method that defines the required action (for example to get, delete, or post the resource), and may include additional information encoded in URL parameters (the field-value pairs sent via a query string), as POST data (data sent by the HTTP POST method), or in associated {{glossary("Cookie", "cookies")}}.

+ +

Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). 

+ +

The body of a successful response to a request would contain the requested resource (e.g. a new HTML page, or an image, etc...), which could then be displayed by the web browser.

+ +

Static sites

+ +

The diagram below shows a basic web server architecture for a static site (a static site is one that returns the same hard-coded content from the server whenever a particular resource is requested). When a user wants to navigate to a page, the browser sends an HTTP "GET" request specifying its URL.

+ +

The server retrieves the requested document from its file system and returns an HTTP response containing the document and a success status (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see client error responses and server error responses).

+ +

A simplified diagram of a static web server.

+ +

Dynamic sites

+ +

A dynamic website is one where some of the response content is generated dynamically only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). 

+ +

A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications).

+ +

Most of the code to support a dynamic website must run on the server. Creating this code is known as "server-side programming" (or sometimes "back-end scripting").

+ +

The diagram below shows a simple architecture for a dynamic website. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.

+ +

Requests for static resources are handled in the same way as for static sites (static resources are any files that don't change —typically: CSS, JavaScript, Images, pre-created PDF files etc). 

+ +

A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.

+ +

Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a Web Application). For "dynamic requests" the server interprets the request, reads required information from the database (3), combines the retrieved data with HTML templates (4), and sends back a response containing the generated HTML (5,6). 

+ +
+

Are server-side and client-side programming the same?

+
+ +

Let's now turn our attention to the code involved in server-side and client-side programming. In each case, the code is significantly different:

+ + + +

Code running in the browser is known as client-side code and is primarily concerned with improving the appearance and behavior of a rendered web page. This includes selecting and styling UI components, creating layouts, navigation, form validation, etc. By contrast, server-side website programming mostly involves choosing which content is returned to the browser in response to requests. The server-side code handles tasks like validating submitted data and requests, using databases to store and retrieve data and sending the correct data to the client as required.

+ +

Client-side code is written using HTML, CSS, and JavaScript — it is run inside a web browser and has little or no access to the underlying operating system (including limited access to the file system).

+ +

Web developers can't control what browser every user might be using to view a website  — browsers provide inconsistent levels of compatibility with client-side code features, and part of the challenge of client-side programming is handling differences in browser support gracefully.

+ +

Server-side code can be written in any number of programming languages — examples of popular server-side web languages include PHP, Python, Ruby, C#, and NodeJS(JavaScript). The server-side code has full access to the server operating system and the developer can choose what programming language (and specific version) they wish to use.

+ +

Developers typically write their code using web frameworks. Web frameworks are collections of functions, objects, rules and other code constructs designed to solve common problems, speed up development, and simplify the different types of tasks faced in a particular domain.

+ +

Again, while both client and server-side code use frameworks, the domains are very different, and hence so are the frameworks. Client-side web frameworks simplify layout and presentation tasks while server-side web frameworks provide a lot of “common” web server functionality that you might otherwise have to implement yourself (e.g. support for sessions, support for users and authentication, easy database access, templating libraries, etc.).

+ +
+

Note: Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.

+ +

In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.

+
+ +
+

What can you do on the server-side?

+ +

Server-side programming is very useful because it allows us to efficiently deliver information tailored for individual users and thereby create a much better user experience.

+
+ +

Companies like Amazon use server-side programming to construct search results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc.

+ +

Banks use server-side programming to store account information and allow only authorized users to view and make transactions. Other services like Facebook, Twitter, Instagram, and Wikipedia use server-side programming to highlight, share, and control access to interesting content.

+ +

Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!

+ +

Efficient storage and delivery of information

+ +

Imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook? Creating a separate static page for each product or post would be completely impractical.

+ +

Server-side programming allows us to instead store the information in a database and dynamically construct and return HTML and other types of files (e.g. PDFs, images, etc.). It is also possible to simply return data ({{glossary("JSON")}}, {{glossary("XML")}}, etc.) for rendering by appropriate client-side web frameworks (this reduces the processing burden on the server and the amount of data that needs to be sent).

+ +

The server is not limited to sending information from databases, and might alternatively return the result of software tools, or data from communications services. The content can even be targeted for the type of client device that is receiving it.

+ +

Because the information is in a database, it can also more easily be shared and updated with other business systems (for example, when products are sold either online or in a shop, the shop might update its database of inventory).

+ +
+

Note: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:

+ +
    +
  1. Go to Amazon or some other e-commerce site.
    2. +
  2. Search for a number of keywords and note how the page structure doesn't change, even though the results do. 
    3. +
  3. Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.
    4. +
+ +

For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.

+
+ +

Customised user experience

+ +

Servers can store and use information about clients to provide a convenient and tailored user experience. For example, many sites store credit cards so that details don't have to be entered again. Sites like Google Maps can use saved or current locations for providing routing information, and search or travel history to highlight local businesses in search results.

+ +

A deeper analysis of user habits can be used to anticipate their interests and further customize responses and notifications, for example providing a list of previously visited or popular locations you may want to look at on a map.

+ +
+

Note: Google Maps saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.

+ +

Google search results are optimized based on previous searches.

+ +
    +
  1.  Go to Google search.
    2. +
  2.  Search for "football".
    3. +
  3.  Now try typing "favourite" in the search box and observe the autocomplete search predictions.
    4. +
+ +

Coincidence? Nada!

+
+ +

Controlled access to content

+ +

Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.

+ +

Real world examples include:

+ + + +
+

Note: Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?

+
+ +

Store session/state information

+ +

Server-side programming allows developers to make use of sessions — basically, a mechanism that allows a server to store information on the current user of a site and send different responses based on that information.

+ +

This allows, for example, a site to know that a user has previously logged in and display links to their emails or order history, or perhaps save the state of a simple game so that the user can go to a site again and carry on where they left it.

+ +
+

Note: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. The Age). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.

+
+ +

Notifications and communication

+ +

Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.

+ +

A few examples include:

+ + + +
+

Note: The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.

+
+ +

Data analysis

+ +

A website may collect a lot of data about users: what they search for, what they buy, what they recommend, how long they stay on each page. Server-side programming can be used to refine responses based on analysis of this data.

+ +

For example, Amazon and Google both advertise products based on previous searches (and purchases).

+ +
+

Note: If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.

+ +

Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!

+
+ +

Summary

+ +

Congratulations, you've reached the end of the first article about server-side programming. 

+ +

You've now learned that server-side code is run on a web server and that its main role is to control what information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).

+ +

You should also understand that it is useful because it allows us to create websites that efficiently deliver information tailored for individual users and have a good idea of some of the things you might be able to do when you're a server-side programmer.

+ +

Lastly, you should understand that server-side code can be written in a number of programming languages and that you should use a web framework to make the whole process easier. 

+ +

In a future article we'll help you choose the best web framework for your first site; Next, though we'll take you through the main client-server interactions in just a little more detail.

+ +

{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + -- cgit v1.2.3-54-g00ecf From 12b585b8e60a2877ff64dc6dc5ab058c43652f47 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: modify --- files/de/_redirects.txt | 715 +- files/de/_wikihistory.json | 9740 ++++++++++---------- files/de/conflicting/glossary/doctype/index.html | 3 +- .../building_blocks/values_and_units/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../index.html | 4 +- .../conflicting/learn/css/first_steps/index.html | 5 +- .../learn/javascript/objects/index.html | 3 +- .../mdn/contribute/getting_started/index.html | 3 +- files/de/conflicting/mdn/contribute/index.html | 3 +- files/de/conflicting/mozilla/add-ons/index.html | 3 +- files/de/conflicting/web/accessibility/index.html | 3 +- .../web/api/document_object_model/index.html | 3 +- .../index.html | 3 +- files/de/conflicting/web/api/index.html | 3 +- .../web/api/windoworworkerglobalscope/index.html | 3 +- .../web/css/_doublecolon_placeholder/index.html | 7 +- .../web/css/css_basic_user_interface/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- files/de/conflicting/web/css/cursor/index.html | 3 +- .../index.html | 3 +- files/de/conflicting/web/css/float/index.html | 3 +- .../de/conflicting/web/css/font-variant/index.html | 3 +- files/de/conflicting/web/css/width/index.html | 3 +- files/de/conflicting/web/guide/index.html | 3 +- files/de/conflicting/web/html/element/index.html | 3 +- .../global_objects/arraybuffer/index.html | 3 +- .../reference/global_objects/boolean/index.html | 3 +- .../reference/global_objects/dataview/index.html | 3 +- .../reference/global_objects/date/index.html | 3 +- .../reference/global_objects/error/index.html | 3 +- .../reference/global_objects/evalerror/index.html | 3 +- .../reference/global_objects/function/index.html | 3 +- .../global_objects/generatorfunction/index.html | 3 +- .../global_objects/internalerror/index.html | 3 +- .../global_objects/intl/collator/index.html | 3 +- .../global_objects/intl/datetimeformat/index.html | 3 +- .../global_objects/intl/numberformat/index.html | 3 +- .../reference/global_objects/map/index.html | 3 +- .../reference/global_objects/number/index.html | 3 +- .../reference/global_objects/object/index.html | 3 +- .../reference/global_objects/rangeerror/index.html | 3 +- .../reference/global_objects/string/index.html | 3 +- .../global_objects/syntaxerror/index.html | 3 +- .../reference/global_objects/typeerror/index.html | 3 +- .../web/javascript/reference/operators/index.html | 3 +- .../reference/operators/spread_syntax/index.html | 3 +- .../index.html | 4 +- .../index.html | 4 +- .../index.html | 4 +- .../reference/statements/switch/index.html | 3 +- .../web/progressive_web_apps/index.html | 3 +- .../using_custom_elements/index.html | 3 +- files/de/glossary/abstraction/index.html | 3 +- files/de/glossary/algorithm/index.html | 3 +- files/de/glossary/asynchronous/index.html | 3 +- files/de/glossary/bandwidth/index.html | 3 +- files/de/glossary/class/index.html | 3 +- files/de/glossary/constructor/index.html | 3 +- .../cors-safelisted_request_header/index.html | 3 +- files/de/glossary/css_preprocessor/index.html | 3 +- files/de/glossary/empty_element/index.html | 3 +- files/de/glossary/encapsulation/index.html | 3 +- files/de/glossary/first-class_function/index.html | 3 +- files/de/glossary/forbidden_header_name/index.html | 3 +- .../glossary/information_architecture/index.html | 3 +- files/de/glossary/localization/index.html | 3 +- files/de/glossary/object/index.html | 3 +- files/de/glossary/primitive/index.html | 3 +- files/de/glossary/protocol/index.html | 3 +- files/de/glossary/statement/index.html | 3 +- files/de/glossary/type/index.html | 3 +- files/de/glossary/vendor_prefix/index.html | 3 +- .../how_does_the_internet_work/index.html | 3 +- .../cascade_and_inheritance/index.html | 3 +- .../learn/css/building_blocks/selectors/index.html | 3 +- .../building_blocks/values_and_units/index.html | 3 +- .../first_steps/how_css_is_structured/index.html | 3 +- .../learn/css/first_steps/how_css_works/index.html | 3 +- .../learn/css/styling_text/fundamentals/index.html | 3 +- files/de/learn/forms/index.html | 3 +- .../dealing_with_files/index.html | 3 +- .../how_the_web_works/index.html | 3 +- .../javascript_basics/index.html | 3 +- .../advanced_text_formatting/index.html | 3 +- .../creating_hyperlinks/index.html | 3 +- .../introduction_to_html/debugging_html/index.html | 3 +- .../document_and_website_structure/index.html | 3 +- .../getting_started/index.html | 3 +- .../html_text_fundamentals/index.html | 3 +- .../de/learn/html/introduction_to_html/index.html | 3 +- .../marking_up_a_letter/index.html | 3 +- .../structuring_a_page_of_content/index.html | 3 +- .../the_head_metadata_in_html/index.html | 3 +- files/de/learn/html/tables/basics/index.html | 3 +- .../javascript/building_blocks/events/index.html | 3 +- .../de/learn/javascript/building_blocks/index.html | 3 +- .../first_steps/a_first_splash/index.html | 3 +- .../first_steps/silly_story_generator/index.html | 3 +- .../first_steps/what_is_javascript/index.html | 3 +- files/de/learn/server-side/first_steps/index.html | 3 +- .../first_steps/introduction/index.html | 3 +- files/de/mdn/about/index.html | 3 +- files/de/mdn/at_ten/history_of_mdn/index.html | 3 +- files/de/mdn/at_ten/index.html | 3 +- .../mdn/guidelines/writing_style_guide/index.html | 3 +- .../mdn/structures/compatibility_tables/index.html | 3 +- files/de/mdn/tools/index.html | 3 +- .../tools/kumascript/troubleshooting/index.html | 3 +- files/de/mdn/yari/index.html | 3 +- .../add-ons/webextensions/api/bookmarks/index.html | 3 +- .../add-ons/webextensions/examples/index.html | 3 +- .../working_with_the_tabs_api/index.html | 3 +- .../your_first_webextension/index.html | 3 +- .../your_second_webextension/index.html | 3 +- .../so_you_just_built_firefox/index.html | 5 +- .../mozilla/developer_guide/source_code/index.html | 3 +- .../index.html | 3 +- files/de/mozilla/firefox/releases/1.5/index.html | 3 +- .../1.5/using_firefox_1.5_caching/index.html | 3 +- files/de/mozilla/firefox/releases/3.5/index.html | 3 +- files/de/mozilla/firefox/releases/3/index.html | 3 +- .../releases/3/updating_extensions/index.html | 3 +- .../3/updating_web_applications/index.html | 3 +- .../de/orphaned/learn/how_to_contribute/index.html | 3 +- .../orphaned/mdn/about/linking_to_mdn/index.html | 3 +- files/de/orphaned/mdn/community/index.html | 3 +- .../mdn/community/whats_happening/index.html | 3 +- .../howto/create_an_mdn_account/index.html | 3 +- .../howto/do_a_technical_review/index.html | 3 +- .../howto/do_an_editorial_review/index.html | 3 +- .../property_template/index.html | 3 +- .../howto/set_the_summary_for_a_page/index.html | 3 +- .../howto/tag_javascript_pages/index.html | 3 +- .../index.html | 5 +- .../tools/add-ons/dom_inspector/index.html | 3 +- files/de/orphaned/tools/add-ons/index.html | 5 +- files/de/orphaned/tools/webide_clone/index.html | 3 +- files/de/orphaned/web/css/index/index.html | 3 +- .../web/html/global_attributes/dropzone/index.html | 3 +- .../global_objects/array/prototype/index.html | 3 +- .../asyncfunction/prototype/index.html | 3 +- files/de/tools/3d_view/index.html | 3 +- files/de/tools/accessibility_inspector/index.html | 3 +- files/de/tools/browser_toolbox/index.html | 3 +- files/de/tools/network_monitor/index.html | 3 +- .../page_inspector/how_to/edit_fonts/index.html | 3 +- .../how_to/examine_event_listeners/index.html | 3 +- .../how_to/examine_grid_layouts/index.html | 3 +- files/de/tools/page_inspector/index.html | 3 +- .../page_inspector/keyboard_shortcuts/index.html | 3 +- files/de/tools/responsive_design_mode/index.html | 3 +- files/de/tools/shader_editor/index.html | 3 +- files/de/tools/web_console/helpers/index.html | 3 +- files/de/tools/web_console/index.html | 3 +- .../index.html | 3 +- .../aria/aria_live_regions/index.html | 3 +- .../accessibility/aria/aria_techniques/index.html | 3 +- files/de/web/accessibility/aria/index.html | 3 +- files/de/web/accessibility/index.html | 3 +- .../index.html | 3 +- .../baseaudiocontext/decodeaudiodata/index.html | 3 +- files/de/web/api/canvas_api/index.html | 3 +- .../tutorial/advanced_animations/index.html | 3 +- .../tutorial/applying_styles_and_colors/index.html | 3 +- .../tutorial/basic_animations/index.html | 3 +- .../api/canvas_api/tutorial/basic_usage/index.html | 3 +- .../canvas_api/tutorial/drawing_shapes/index.html | 3 +- .../canvas_api/tutorial/drawing_text/index.html | 3 +- files/de/web/api/canvas_api/tutorial/index.html | 3 +- .../tutorial/optimizing_canvas/index.html | 3 +- .../canvas_api/tutorial/using_images/index.html | 3 +- .../api/document/readystatechange_event/index.html | 3 +- files/de/web/api/document_object_model/index.html | 3 +- files/de/web/api/file/type/index.html | 3 +- .../using_files_from_web_applications/index.html | 3 +- files/de/web/api/fullscreen_api/index.html | 3 +- files/de/web/api/geolocation_api/index.html | 3 +- files/de/web/api/history_api/index.html | 3 +- files/de/web/api/html_drag_and_drop_api/index.html | 3 +- .../de/web/api/htmlelement/change_event/index.html | 3 +- files/de/web/api/htmlelement/innertext/index.html | 3 +- files/de/web/api/htmlheadelement/index.html | 3 +- .../basic_concepts_behind_indexeddb/index.html | 3 +- .../api/indexeddb_api/using_indexeddb/index.html | 3 +- .../web-based_protocol_handlers/index.html | 3 +- .../index.html | 3 +- .../animating_objects_with_webgl/index.html | 3 +- .../animating_textures_in_webgl/index.html | 3 +- .../creating_3d_objects_using_webgl/index.html | 3 +- .../tutorial/getting_started_with_webgl/index.html | 3 +- .../tutorial/lighting_in_webgl/index.html | 3 +- .../index.html | 5 +- .../tutorial/using_textures_in_webgl/index.html | 3 +- files/de/web/api/websockets_api/index.html | 3 +- .../writing_websocket_servers/index.html | 3 +- .../api/window/domcontentloaded_event/index.html | 3 +- files/de/web/api/window/load_event/index.html | 3 +- .../api/windoworworkerglobalscope/btoa/index.html | 3 +- .../web/api/windoworworkerglobalscope/index.html | 3 +- .../settimeout/index.html | 3 +- files/de/web/css/@media/aural/index.html | 3 +- files/de/web/css/_colon_autofill/index.html | 5 +- .../de/web/css/_colon_placeholder-shown/index.html | 7 +- files/de/web/css/_colon_user-invalid/index.html | 5 +- files/de/web/css/actual_value/index.html | 3 +- .../web/css/adjacent_sibling_combinator/index.html | 3 +- files/de/web/css/attribute_selectors/index.html | 3 +- files/de/web/css/box-flex/index.html | 3 +- files/de/web/css/box-ordinal-group/index.html | 5 +- files/de/web/css/box-pack/index.html | 3 +- files/de/web/css/child_combinator/index.html | 3 +- files/de/web/css/class_selectors/index.html | 3 +- files/de/web/css/color_value/index.html | 3 +- .../de/web/css/compositing_and_blending/index.html | 3 +- files/de/web/css/computed_value/index.html | 3 +- .../css_animations/using_css_animations/index.html | 3 +- .../box-shadow_generator/index.html | 3 +- .../web/css/css_backgrounds_and_borders/index.html | 3 +- .../resizing_background_images/index.html | 3 +- .../using_multiple_backgrounds/index.html | 3 +- files/de/web/css/css_box_model/index.html | 3 +- .../introduction_to_the_css_box_model/index.html | 3 +- .../mastering_margin_collapsing/index.html | 3 +- files/de/web/css/css_color/index.html | 3 +- .../css/css_colors/color_picker_tool/index.html | 3 +- .../using_multi-column_layouts/index.html | 3 +- .../basic_concepts_of_flexbox/index.html | 3 +- .../ordering_flex_items/index.html | 3 +- .../css/css_images/using_css_gradients/index.html | 3 +- .../consistent_list_indentation/index.html | 3 +- .../using_css_counters/index.html | 3 +- files/de/web/css/css_masking/index.html | 3 +- files/de/web/css/css_motion_path/index.html | 3 +- files/de/web/css/css_namespaces/index.html | 3 +- files/de/web/css/css_text_decoration/index.html | 3 +- .../css_transforms/using_css_transforms/index.html | 3 +- files/de/web/css/css_types/index.html | 3 +- files/de/web/css/gap/index.html | 3 +- files/de/web/css/id_selectors/index.html | 3 +- files/de/web/css/inheritance/index.html | 3 +- files/de/web/css/initial_value/index.html | 3 +- files/de/web/css/mask-origin/index.html | 3 +- files/de/web/css/mask-repeat/index.html | 3 +- files/de/web/css/overflow-wrap/index.html | 3 +- files/de/web/css/reference/index.html | 3 +- files/de/web/css/replaced_element/index.html | 3 +- files/de/web/css/shorthand_properties/index.html | 3 +- files/de/web/css/specificity/index.html | 3 +- files/de/web/css/url()/index.html | 3 +- files/de/web/css/user-modify/index.html | 3 +- files/de/web/css/user-select/index.html | 5 +- .../de/web/css/value_definition_syntax/index.html | 3 +- files/de/web/guide/ajax/getting_started/index.html | 3 +- .../web/guide/html/content_categories/index.html | 3 +- .../de/web/guide/html/editable_content/index.html | 3 +- files/de/web/guide/html/html5/index.html | 3 +- .../using_html_sections_and_outlines/index.html | 3 +- files/de/web/guide/mobile/index.html | 3 +- files/de/web/html/block-level_elements/index.html | 3 +- .../web/html/element/heading_elements/index.html | 3 +- .../html/global_attributes/accesskey/index.html | 3 +- .../global_attributes/autocapitalize/index.html | 3 +- .../de/web/html/global_attributes/class/index.html | 3 +- .../global_attributes/contenteditable/index.html | 3 +- .../html/global_attributes/contextmenu/index.html | 3 +- files/de/web/html/global_attributes/dir/index.html | 3 +- .../html/global_attributes/draggable/index.html | 3 +- .../web/html/global_attributes/hidden/index.html | 3 +- files/de/web/html/global_attributes/id/index.html | 3 +- files/de/web/html/global_attributes/index.html | 3 +- .../html/global_attributes/inputmode/index.html | 3 +- files/de/web/html/global_attributes/is/index.html | 3 +- .../de/web/html/global_attributes/lang/index.html | 3 +- .../de/web/html/global_attributes/style/index.html | 3 +- .../web/html/global_attributes/tabindex/index.html | 3 +- .../de/web/html/global_attributes/title/index.html | 3 +- .../html/global_attributes/translate/index.html | 3 +- files/de/web/html/inline_elements/index.html | 3 +- files/de/web/html/reference/index.html | 3 +- files/de/web/http/caching/index.html | 3 +- .../corsmissingallowheaderfrompreflight/index.html | 3 +- .../cors/errors/corsmissingalloworigin/index.html | 3 +- files/de/web/http/public_key_pinning/index.html | 3 +- .../a_re-introduction_to_javascript/index.html | 3 +- files/de/web/javascript/data_structures/index.html | 3 +- .../index.html | 3 +- .../equality_comparisons_and_sameness/index.html | 3 +- .../control_flow_and_error_handling/index.html | 5 +- .../guide/details_of_the_object_model/index.html | 5 +- .../guide/expressions_and_operators/index.html | 5 +- files/de/web/javascript/guide/functions/index.html | 5 +- .../javascript/guide/grammar_and_types/index.html | 5 +- .../web/javascript/guide/introduction/index.html | 5 +- .../guide/loops_and_iteration/index.html | 5 +- .../javascript/guide/text_formatting/index.html | 5 +- .../guide/working_with_objects/index.html | 5 +- .../javascript_technologies_overview/index.html | 3 +- .../de/web/javascript/memory_management/index.html | 3 +- .../reference/classes/constructor/index.html | 3 +- .../reference/classes/extends/index.html | 3 +- .../de/web/javascript/reference/classes/index.html | 3 +- .../javascript/reference/classes/static/index.html | 3 +- .../deprecated_and_obsolete_features/index.html | 3 +- .../the_legacy_iterator_protocol/index.html | 4 +- .../reference/errors/already_has_pragma/index.html | 3 +- .../errors/array_sort_argument/index.html | 3 +- .../reference/errors/bad_octal/index.html | 3 +- .../reference/errors/bad_radix/index.html | 3 +- .../reference/errors/bad_regexp_flag/index.html | 3 +- .../errors/bad_return_or_yield/index.html | 3 +- .../errors/called_on_incompatible_type/index.html | 3 +- .../index.html | 3 +- .../errors/cant_access_property/index.html | 3 +- .../index.html | 3 +- .../reference/errors/cant_delete/index.html | 3 +- .../errors/cant_redefine_property/index.html | 3 +- .../errors/cyclic_object_value/index.html | 3 +- .../reference/errors/dead_object/index.html | 3 +- .../errors/delete_in_strict_mode/index.html | 3 +- .../index.html | 3 +- .../deprecated_expression_closures/index.html | 3 +- .../reference/errors/deprecated_octal/index.html | 3 +- .../errors/deprecated_source_map_pragma/index.html | 3 +- .../errors/deprecated_string_generics/index.html | 3 +- .../errors/deprecated_tolocaleformat/index.html | 3 +- .../reference/errors/equal_as_assign/index.html | 3 +- .../for-each-in_loops_are_deprecated/index.html | 3 +- .../reference/errors/getter_only/index.html | 3 +- .../errors/identifier_after_number/index.html | 3 +- .../reference/errors/illegal_character/index.html | 3 +- .../errors/in_operator_no_object/index.html | 3 +- .../de/web/javascript/reference/errors/index.html | 3 +- .../errors/invalid_array_length/index.html | 3 +- .../invalid_assignment_left-hand_side/index.html | 3 +- .../errors/invalid_const_assignment/index.html | 3 +- .../reference/errors/invalid_date/index.html | 3 +- .../errors/invalid_for-in_initializer/index.html | 3 +- .../errors/invalid_for-of_initializer/index.html | 3 +- .../index.html | 3 +- .../reference/errors/is_not_iterable/index.html | 3 +- .../reference/errors/json_bad_parse/index.html | 3 +- .../errors/malformed_formal_parameter/index.html | 3 +- .../reference/errors/malformed_uri/index.html | 3 +- .../errors/missing_bracket_after_list/index.html | 3 +- .../missing_colon_after_property_id/index.html | 3 +- .../missing_curly_after_function_body/index.html | 3 +- .../missing_curly_after_property_list/index.html | 3 +- .../errors/missing_formal_parameter/index.html | 3 +- .../errors/missing_initializer_in_const/index.html | 3 +- .../missing_name_after_dot_operator/index.html | 3 +- .../index.html | 3 +- .../missing_parenthesis_after_condition/index.html | 3 +- .../missing_semicolon_before_statement/index.html | 3 +- .../errors/more_arguments_needed/index.html | 3 +- .../errors/negative_repetition_count/index.html | 3 +- .../reference/errors/no_non-null_object/index.html | 3 +- .../reference/errors/no_properties/index.html | 3 +- .../reference/errors/no_variable_name/index.html | 3 +- .../non_configurable_array_element/index.html | 3 +- .../reference/errors/not_a_codepoint/index.html | 3 +- .../reference/errors/not_a_constructor/index.html | 3 +- .../reference/errors/not_a_function/index.html | 3 +- .../reference/errors/not_defined/index.html | 3 +- .../reference/errors/precision_range/index.html | 3 +- .../errors/property_access_denied/index.html | 3 +- .../reference/errors/read-only/index.html | 3 +- .../errors/redeclared_parameter/index.html | 3 +- .../index.html | 3 +- .../errors/reserved_identifier/index.html | 3 +- .../errors/resulting_string_too_large/index.html | 3 +- .../reference/errors/stmt_after_return/index.html | 3 +- .../errors/strict_non_simple_params/index.html | 3 +- .../reference/errors/too_much_recursion/index.html | 3 +- .../typed_array_invalid_arguments/index.html | 3 +- .../reference/errors/undeclared_var/index.html | 3 +- .../reference/errors/undefined_prop/index.html | 3 +- .../reference/errors/unexpected_token/index.html | 3 +- .../reference/errors/unexpected_type/index.html | 3 +- .../errors/unnamed_function_statement/index.html | 3 +- .../errors/unterminated_string_literal/index.html | 3 +- .../reference/errors/var_hides_argument/index.html | 3 +- .../reference/functions/arrow_functions/index.html | 3 +- .../functions/method_definitions/index.html | 3 +- .../reference/functions/rest_parameters/index.html | 3 +- .../global_objects/atomics/notify/index.html | 3 +- .../global_objects/math/random/index.html | 3 +- .../global_objects/string/search/index.html | 3 +- .../global_objects/string/trimend/index.html | 3 +- .../global_objects/string/trimstart/index.html | 3 +- .../reference/operators/decrement/index.html | 3 +- .../operators/destructuring_assignment/index.html | 3 +- .../reference/operators/increment/index.html | 3 +- .../operators/object_initializer/index.html | 3 +- .../operators/optional_chaining/index.html | 3 +- .../reference/operators/remainder/index.html | 3 +- .../reference/statements/function/index.html | 3 +- .../reference/template_literals/index.html | 3 +- files/de/web/mathml/attribute/values/index.html | 3 +- .../deriving_the_quadratic_formula/index.html | 3 +- files/de/web/mathml/examples/index.html | 3 +- .../examples/mathml_pythagorean_theorem/index.html | 3 +- files/de/web/opensearch/index.html | 3 +- files/de/web/svg/tutorial/introduction/index.html | 5 +- files/de/web/svg/tutorial/paths/index.html | 5 +- files/de/web/svg/tutorial/svg_fonts/index.html | 3 +- files/de/web/xml/xml_introduction/index.html | 3 +- .../index.html | 3 +- 408 files changed, 6270 insertions(+), 5456 deletions(-) (limited to 'files/de/learn') diff --git a/files/de/_redirects.txt b/files/de/_redirects.txt index f9d8a02fda..edfd74c3af 100644 --- a/files/de/_redirects.txt +++ b/files/de/_redirects.txt @@ -1,13 +1,14 @@ # FROM-URL TO-URL /de/docs/AJAX /de/docs/Web/Guide/AJAX /de/docs/Apps/Progressiv /de/docs/Web/Progressive_web_apps -/de/docs/Barrierefreiheit /de/docs/Web/Barrierefreiheit -/de/docs/Barrierefreiheit/ARIA /de/docs/Web/Barrierefreiheit/ARIA -/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen -/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets -/de/docs/Barrierefreiheit/Webentwicklung /de/docs/Web/Barrierefreiheit/Webentwicklung +/de/docs/Barrierefreiheit /de/docs/Web/Accessibility +/de/docs/Barrierefreiheit/ARIA /de/docs/Web/Accessibility/ARIA +/de/docs/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions +/de/docs/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +/de/docs/Barrierefreiheit/Webentwicklung /de/docs/conflicting/Web/Accessibility +/de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) /de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching /de/docs/Bug-Entdecken_Leitfaden /de/docs/Richtlinien_zum_Schreiben_eines_Bugreports -/de/docs/Building_an_Extension /de/docs/Erweiterung_erstellen +/de/docs/Building_an_Extension /de/docs/conflicting/Mozilla/Add-ons /de/docs/CSS /de/docs/Web/CSS /de/docs/CSS/-moz-border-radius /de/docs/Web/CSS/border-radius /de/docs/CSS/-moz-border-radius-bottomleft /de/docs/Web/CSS/border-bottom-left-radius @@ -17,35 +18,35 @@ /de/docs/CSS/-moz-box-shadow /de/docs/Web/CSS/box-shadow /de/docs/CSS/-moz-image-region /de/docs/Web/CSS/-moz-image-region /de/docs/CSS/-moz-user-input /de/docs/Web/CSS/-moz-user-input -/de/docs/CSS/-moz-user-modify /de/docs/Web/CSS/-moz-user-modify -/de/docs/CSS/-moz-user-select /de/docs/Web/CSS/-moz-user-select +/de/docs/CSS/-moz-user-modify /de/docs/Web/CSS/user-modify +/de/docs/CSS/-moz-user-select /de/docs/Web/CSS/user-select /de/docs/CSS/:empty /de/docs/Web/CSS/:empty /de/docs/CSS/:lang /de/docs/Web/CSS/:lang /de/docs/CSS/@import /de/docs/Web/CSS/@import -/de/docs/CSS/Attributselektoren /de/docs/Web/CSS/Attributselektoren +/de/docs/CSS/Attributselektoren /de/docs/Web/CSS/Attribute_selectors /de/docs/CSS/Border-bottom-width /de/docs/Web/CSS/Border-bottom-width /de/docs/CSS/Border-left-width /de/docs/Web/CSS/Border-left-width /de/docs/CSS/Border-right-width /de/docs/Web/CSS/Border-right-width /de/docs/CSS/Border-top-width /de/docs/Web/CSS/Border-top-width /de/docs/CSS/Bottom /de/docs/Web/CSS/Bottom -/de/docs/CSS/Boxmodell /de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell -/de/docs/CSS/CSS_Reference/Property_Template /de/docs/Web/CSS/Property_Template +/de/docs/CSS/Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +/de/docs/CSS/CSS_Reference/Property_Template /de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /de/docs/CSS/CSS_Werte_Geltung /de/docs/Web/CSS /de/docs/CSS/CSS_animated_properties /de/docs/Web/CSS /de/docs/CSS/CSS_animierbare_Eigenschaften /de/docs/Web/CSS /de/docs/CSS/CSS_prozentuale_werte /de/docs/Web/CSS /de/docs/CSS/CSS_werte_syntax /de/docs/Web/CSS -/de/docs/CSS/Einführung /de/docs/Web/Guide/CSS/Getting_started -/de/docs/CSS/Farben /de/docs/Web/CSS/Farben -/de/docs/CSS/Getting_Started /de/docs/Web/Guide/CSS/Getting_started -/de/docs/CSS/Getting_Started-weiterleitung-1 /de/docs/Web/Guide/CSS/Getting_started -/de/docs/CSS/Initialwert /de/docs/Web/CSS/Initialwert +/de/docs/CSS/Einführung /de/docs/conflicting/Learn/CSS/First_steps +/de/docs/CSS/Farben /de/docs/Web/CSS/color_value +/de/docs/CSS/Getting_Started /de/docs/conflicting/Learn/CSS/First_steps +/de/docs/CSS/Getting_Started-weiterleitung-1 /de/docs/conflicting/Learn/CSS/First_steps +/de/docs/CSS/Initialwert /de/docs/Web/CSS/initial_value /de/docs/CSS/Left /de/docs/Web/CSS/Left /de/docs/CSS/Right /de/docs/Web/CSS/Right /de/docs/CSS/Top /de/docs/Web/CSS/Top -/de/docs/CSS/Vererbung /de/docs/Web/CSS/Vererbung -/de/docs/CSS/Vorlage /de/docs/Web/CSS/Property_Template -/de/docs/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Wertdefinitionssyntax +/de/docs/CSS/Vererbung /de/docs/Web/CSS/inheritance +/de/docs/CSS/Vorlage /de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template +/de/docs/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Value_definition_syntax /de/docs/CSS/background /de/docs/Web/CSS/background /de/docs/CSS/background-attachment /de/docs/Web/CSS/background-attachment /de/docs/CSS/background-clip /de/docs/Web/CSS/background-clip @@ -55,7 +56,7 @@ /de/docs/CSS/background-position /de/docs/Web/CSS/background-position /de/docs/CSS/background-repeat /de/docs/Web/CSS/background-repeat /de/docs/CSS/background-size /de/docs/Web/CSS/background-size -/de/docs/CSS/berechneter_Wert /de/docs/Web/CSS/berechneter_Wert +/de/docs/CSS/berechneter_Wert /de/docs/Web/CSS/computed_value /de/docs/CSS/border /de/docs/Web/CSS/border /de/docs/CSS/border-bottom /de/docs/Web/CSS/border-bottom /de/docs/CSS/border-bottom-color /de/docs/Web/CSS/border-bottom-color @@ -121,20 +122,21 @@ /de/docs/CSS/vertical-align /de/docs/Web/CSS/vertical-align /de/docs/CSS/visibility /de/docs/Web/CSS/visibility /de/docs/CSS/width /de/docs/Web/CSS/width +/de/docs/CSS3_Columns /de/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /de/docs/CSS:-moz-border-radius /de/docs/Web/CSS/border-radius /de/docs/CSS:-moz-border-radius-bottomleft /de/docs/Web/CSS/border-bottom-left-radius /de/docs/CSS:-moz-border-radius-bottomright /de/docs/Web/CSS/border-bottom-right-radius /de/docs/CSS:-moz-border-radius-topleft /de/docs/Web/CSS/border-top-left-radius /de/docs/CSS:-moz-border-radius-topright /de/docs/Web/CSS/border-top-right-radius /de/docs/CSS:-moz-user-input /de/docs/Web/CSS/-moz-user-input -/de/docs/CSS:-moz-user-modify /de/docs/Web/CSS/-moz-user-modify -/de/docs/CSS:-moz-user-select /de/docs/Web/CSS/-moz-user-select +/de/docs/CSS:-moz-user-modify /de/docs/Web/CSS/user-modify +/de/docs/CSS:-moz-user-select /de/docs/Web/CSS/user-select /de/docs/CSS::empty /de/docs/Web/CSS/:empty /de/docs/CSS::lang /de/docs/Web/CSS/:lang /de/docs/CSS:@import /de/docs/Web/CSS/@import -/de/docs/CSS:Boxmodell /de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell -/de/docs/CSS:Farben /de/docs/Web/CSS/Farben -/de/docs/CSS:Vorlage /de/docs/Web/CSS/Property_Template +/de/docs/CSS:Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +/de/docs/CSS:Farben /de/docs/Web/CSS/color_value +/de/docs/CSS:Vorlage /de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /de/docs/CSS:background /de/docs/Web/CSS/background /de/docs/CSS:background-attachment /de/docs/Web/CSS/background-attachment /de/docs/CSS:background-color /de/docs/Web/CSS/background-color @@ -193,7 +195,7 @@ /de/docs/CSS:vertical-align /de/docs/Web/CSS/vertical-align /de/docs/CSS:visibility /de/docs/Web/CSS/visibility /de/docs/CSS:width /de/docs/Web/CSS/width -/de/docs/CSS_Referenz /de/docs/Web/CSS/CSS_Referenz +/de/docs/CSS_Referenz /de/docs/Web/CSS/Reference /de/docs/CSS_Referenz/Mozilla_CSS_Erweiterungen /de/docs/Web/CSS/Mozilla_Extensions /de/docs/CSS_in_HTML_einbinden /de/docs/Web/CSS/@import /de/docs/Code_snippets /de/docs/Codeschnipsel @@ -204,6 +206,7 @@ /de/docs/Creating_a_Skin_for_Firefox/install.rdf /de/docs/Theme_erstellen/install.rdf /de/docs/Creating_a_Skin_for_Firefox:contents.rdf /de/docs/Theme_erstellen/contents.rdf /de/docs/Creating_a_Skin_for_Firefox:install.rdf /de/docs/Theme_erstellen/install.rdf +/de/docs/DOM /de/docs/Web/API/Document_Object_Model /de/docs/DOM/File.fileName /de/docs/Web/API/File/fileName /de/docs/DOM/File.fileSize /de/docs/Web/API/File/fileSize /de/docs/DOM/File.getAsText /de/docs/Web/API/File/getAsText @@ -217,6 +220,7 @@ /de/docs/DOM/Node.previousSibling /de/docs/Web/API/Node/previousSibling /de/docs/DOM/Node.replaceChild /de/docs/Web/API/Node/replaceChild /de/docs/DOM/Node.textContent /de/docs/Web/API/Node/textContent +/de/docs/DOM/Ueber_das_Document_Object_Model /de/docs/conflicting/Web/API/Document_Object_Model /de/docs/DOM/XMLHttpRequest /de/docs/Web/API/XMLHttpRequest /de/docs/DOM/document /de/docs/Web/API/Document /de/docs/DOM/document.createElement /de/docs/Web/API/Document/createElement @@ -224,30 +228,59 @@ /de/docs/DOM/window /de/docs/Web/API/Window /de/docs/DOM/window.dump /de/docs/Web/API/Window/dump /de/docs/DOM/window.openDialog /de/docs/Web/API/Window/openDialog -/de/docs/DOM/window.setTimeout /de/docs/Web/API/WindowTimers/setTimeout +/de/docs/DOM/window.setTimeout /de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/de/docs/DOM_Inspector /de/docs/orphaned/Tools/Add-ons/DOM_Inspector /de/docs/Developer_Guide /de/docs/Mozilla/Developer_guide -/de/docs/Developer_Guide/firefox_erfolgreich_erstellt /de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt -/de/docs/Eine_erste_Erweiterung_erstellen /de/docs/Erweiterung_erstellen -/de/docs/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript +/de/docs/Developer_Guide/firefox_erfolgreich_erstellt /de/docs/Mozilla/Developer_guide/So_you_just_built_Firefox +/de/docs/DragDrop /de/docs/Web/API/HTML_Drag_and_Drop_API +/de/docs/Eine_erste_Erweiterung_erstellen /de/docs/conflicting/Mozilla/Add-ons +/de/docs/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript /de/docs/Entwicklerhandbuch /de/docs/Mozilla/Developer_guide -/de/docs/Entwicklerhandbuch/Quelltexte /de/docs/Mozilla/Developer_guide/Quelltexte -/de/docs/Firefox_1.5_Beta /de/docs/Firefox_1.5_für_Entwickler +/de/docs/Entwicklerhandbuch/Quelltexte /de/docs/Mozilla/Developer_guide/Source_Code +/de/docs/Erweiterung_erstellen /de/docs/conflicting/Mozilla/Add-ons +/de/docs/Erweiterungen_für_Firefox_3_aktualisieren /de/docs/Mozilla/Firefox/Releases/3/Updating_extensions +/de/docs/Farbverläufe_in_CSS /de/docs/Web/CSS/CSS_Images/Using_CSS_gradients +/de/docs/Firefox_1.5_Beta /de/docs/Mozilla/Firefox/Releases/1.5 +/de/docs/Firefox_1.5_für_Entwickler /de/docs/Mozilla/Firefox/Releases/1.5 +/de/docs/Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests /de/docs/Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests +/de/docs/Firefox_3.5_für_Entwickler /de/docs/Mozilla/Firefox/Releases/3.5 +/de/docs/Firefox_3_für_Entwickler /de/docs/Mozilla/Firefox/Releases/3 +/de/docs/Glossary/Abstraktion /de/docs/Glossary/Abstraction +/de/docs/Glossary/Algorithmus /de/docs/Glossary/Algorithm +/de/docs/Glossary/Anweisung /de/docs/Glossary/Statement +/de/docs/Glossary/Asynchron /de/docs/Glossary/Asynchronous +/de/docs/Glossary/Bandbreite /de/docs/Glossary/Bandwidth +/de/docs/Glossary/CORS-zugelassener-anfrage-header /de/docs/Glossary/CORS-safelisted_request_header +/de/docs/Glossary/CSS_Praeprozessor /de/docs/Glossary/CSS_preprocessor +/de/docs/Glossary/DTD /de/docs/conflicting/Glossary/Doctype +/de/docs/Glossary/Datenkapselung /de/docs/Glossary/Encapsulation +/de/docs/Glossary/Funktion_erster-Klasse /de/docs/Glossary/First-class_Function +/de/docs/Glossary/Herstellerpräfix /de/docs/Glossary/Vendor_Prefix +/de/docs/Glossary/Informationsarchitektur /de/docs/Glossary/Information_architecture +/de/docs/Glossary/Klasse /de/docs/Glossary/Class +/de/docs/Glossary/Konstruktor /de/docs/Glossary/Constructor +/de/docs/Glossary/Leeres_Element /de/docs/Glossary/Empty_element +/de/docs/Glossary/Objekt /de/docs/Glossary/Object +/de/docs/Glossary/Protokoll /de/docs/Glossary/Protocol +/de/docs/Glossary/Typ /de/docs/Glossary/Type +/de/docs/Glossary/einfache_datenelemente /de/docs/Glossary/Primitive +/de/docs/Glossary/verbotener_header_name /de/docs/Glossary/Forbidden_header_name /de/docs/HTML /de/docs/Web/HTML -/de/docs/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elemente +/de/docs/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements /de/docs/HTML/Element /de/docs/Web/HTML/Element /de/docs/HTML/Element/Input /de/docs/Web/HTML/Element/Input /de/docs/HTML/Element/b /de/docs/Web/HTML/Element/b /de/docs/HTML/Element/br /de/docs/Web/HTML/Element/br /de/docs/HTML/Element/canvas /de/docs/Web/HTML/Element/canvas /de/docs/HTML/Element/datalist /de/docs/Web/HTML/Element/datalist -/de/docs/HTML/Element/h1 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h2 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h3 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h4 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h5 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/h6 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML/Element/head /de/docs/Web/HTML/Element/head +/de/docs/HTML/Element/h1 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h2 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h3 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h4 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h5 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/h6 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML/Element/head /de/docs/Web/API/HTMLHeadElement /de/docs/HTML/Element/hr /de/docs/Web/HTML/Element/hr /de/docs/HTML/Element/html /de/docs/Web/HTML/Element/html /de/docs/HTML/Element/iframe /de/docs/Web/HTML/Element/iframe @@ -260,20 +293,20 @@ /de/docs/HTML/Element/time /de/docs/Web/HTML/Element/time /de/docs/HTML/Element/ul /de/docs/Web/HTML/Element/ul /de/docs/HTML/Element/var /de/docs/Web/HTML/Element/var -/de/docs/HTML/HTML5 /de/docs/Web/HTML/HTML5 -/de/docs/HTML/HTML5/HTML5_element_list /de/docs/Web/HTML/HTML5/HTML5_element_list -/de/docs/HTML/HTML5/liste_der_HTML5_elemente /de/docs/Web/HTML/HTML5/HTML5_element_list -/de/docs/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elemente +/de/docs/HTML/HTML5 /de/docs/Web/Guide/HTML/HTML5 +/de/docs/HTML/HTML5/HTML5_element_list /de/docs/conflicting/Web/HTML/Element +/de/docs/HTML/HTML5/liste_der_HTML5_elemente /de/docs/conflicting/Web/HTML/Element +/de/docs/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements /de/docs/HTML/Using_the_application_cache /de/docs/Web/HTML/Using_the_application_cache /de/docs/HTML:Element /de/docs/Web/HTML/Element /de/docs/HTML:Element:b /de/docs/Web/HTML/Element/b -/de/docs/HTML:Element:h1 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:h2 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:h3 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:h4 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:h5 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:h6 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/HTML:Element:head /de/docs/Web/HTML/Element/head +/de/docs/HTML:Element:h1 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:h2 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:h3 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:h4 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:h5 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:h6 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/HTML:Element:head /de/docs/Web/API/HTMLHeadElement /de/docs/HTML:Element:hr /de/docs/Web/HTML/Element/hr /de/docs/HTML:Element:html /de/docs/Web/HTML/Element/html /de/docs/HTML:Element:iframe /de/docs/Web/HTML/Element/iframe @@ -287,25 +320,25 @@ /de/docs/Hauptseite /de/docs/Web /de/docs/IndexedDB /de/docs/Web/API/IndexedDB_API /de/docs/IndexedDB/Browser_storage_limits_and_eviction_criteria /de/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria -/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB /de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB -/de/docs/IndexedDB/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden +/de/docs/IndexedDB/Grundkonzepte_hinter_IndexedDB /de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +/de/docs/IndexedDB/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/Using_IndexedDB /de/docs/JavaScript /de/docs/Web/JavaScript -/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript +/de/docs/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/A_re-introduction_to_JavaScript /de/docs/JavaScript/Guide /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren +/de/docs/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators /de/docs/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures -/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells /de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells -/de/docs/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Funktionen -/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten +/de/docs/JavaScript/Guide/Feinheiten_des_Objektmodells /de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/de/docs/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions +/de/docs/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects /de/docs/JavaScript/Guide/Regular_Expressions /de/docs/Web/JavaScript/Guide/Regular_Expressions -/de/docs/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung -/de/docs/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/de/docs/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Introduction /de/docs/JavaScript/Guide/Vererbung_ueberdacht /de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain /de/docs/JavaScript/Guide/Vordefinierte_Kernobjekte /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction /de/docs/JavaScript/Javascript_lernen_für_Anfänger /de/docs/Web/JavaScript/Guide /de/docs/JavaScript/Language_Resources /de/docs/Web/JavaScript/Language_Resources /de/docs/JavaScript/Reference /de/docs/Web/JavaScript/Reference @@ -327,24 +360,25 @@ /de/docs/JavaScript/Reference/Global_Objects/RegExp /de/docs/Web/JavaScript/Reference/Global_Objects/RegExp /de/docs/JavaScript/Reference/Global_Objects/String /de/docs/Web/JavaScript/Reference/Global_Objects/String /de/docs/JavaScript/Reference/Global_Objects/String/replace /de/docs/Web/JavaScript/Reference/Global_Objects/String/replace -/de/docs/JavaScript/Speicherverwaltung /de/docs/Web/JavaScript/Speicherverwaltung +/de/docs/JavaScript/Speicherverwaltung /de/docs/Web/JavaScript/Memory_Management /de/docs/JavaScript/java_guide /de/docs/Web/JavaScript/Guide /de/docs/JavaScript/javascript_guide /de/docs/Web/JavaScript/Guide -/de/docs/JavaScript/javascript_guide/Anweisungen /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung -/de/docs/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren -/de/docs/JavaScript/javascript_guide/Funktionen /de/docs/Web/JavaScript/Guide/Funktionen -/de/docs/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten +/de/docs/JavaScript/javascript_guide/Anweisungen /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/de/docs/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators +/de/docs/JavaScript/javascript_guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions +/de/docs/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/javascript_guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects /de/docs/JavaScript/javascript_guide/Reguläre_Ausdrücke /de/docs/Web/JavaScript/Guide/Regular_Expressions -/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Learn/CSS/Building_blocks/Werten_Einheiten /de/docs/Learn/CSS/Building_blocks/Values_and_units /de/docs/Learn/CSS/Introduction_to_CSS /en-US/docs/Learn/CSS/First_steps /de/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors /en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors /de/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance /en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance @@ -355,16 +389,68 @@ /de/docs/Learn/CSS/Introduction_to_CSS/Syntax /en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured /de/docs/Learn/CSS/Introduction_to_CSS/Values_and_units /en-US/docs/Learn/CSS/Building_blocks/Values_and_units /de/docs/Learn/CSS/Styling_boxes /en-US/docs/Learn/CSS/Building_blocks +/de/docs/Learn/Common_questions/Wie_das_Internet_funktioniert /de/docs/Learn/Common_questions/How_does_the_Internet_work +/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis /de/docs/Learn/Getting_started_with_the_web/JavaScript_basics +/de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert /de/docs/Learn/Getting_started_with_the_web/How_the_Web_works +/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen /de/docs/Learn/Getting_started_with_the_web/Dealing_with_files +/de/docs/Learn/HTML/Einführung_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML +/de/docs/Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +/de/docs/Learn/HTML/Einführung_in_HTML/Document_and_website_structure /de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure +/de/docs/Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +/de/docs/Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks /de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +/de/docs/Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML /de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML +/de/docs/Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung /de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +/de/docs/Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen /de/docs/Learn/HTML/Introduction_to_HTML/Getting_started +/de/docs/Learn/HTML/Einführung_in_HTML/Marking_up_a_letter /de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +/de/docs/Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content /de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +/de/docs/Learn/HTML/Forms /de/docs/Learn/Forms +/de/docs/Learn/HTML/Tables/Grund_tabelle_HTML /de/docs/Learn/HTML/Tables/Basics +/de/docs/Learn/JavaScript/Bausteine /de/docs/Learn/JavaScript/Building_blocks +/de/docs/Learn/JavaScript/Bausteine/Ereignisse /de/docs/Learn/JavaScript/Building_blocks/Events +/de/docs/Learn/JavaScript/First_steps/Erster_Blick /de/docs/Learn/JavaScript/First_steps/A_first_splash +/de/docs/Learn/JavaScript/First_steps/Was_ist_JavaScript /de/docs/Learn/JavaScript/First_steps/What_is_JavaScript +/de/docs/Learn/JavaScript/First_steps/lustige_geschichten_generator /de/docs/Learn/JavaScript/First_steps/Silly_story_generator +/de/docs/Learn/Mitarbeiten /de/docs/orphaned/Learn/How_to_contribute +/de/docs/Learn/Server-side/Erste_Schritte /de/docs/Learn/Server-side/First_steps +/de/docs/Learn/Server-side/Erste_Schritte/Introduction /de/docs/Learn/Server-side/First_steps/Introduction +/de/docs/Lokalisierung /de/docs/Glossary/Localization +/de/docs/MDN/Community /de/docs/orphaned/MDN/Community +/de/docs/MDN/Community/Bleibe_auf_dem_Laufenden /de/docs/orphaned/MDN/Community/Whats_happening /de/docs/MDN/Contribute/Content /de/docs/MDN/Guidelines -/de/docs/MDN/Contribute/Content/Style_guide /de/docs/MDN/Guidelines/Style_guide +/de/docs/MDN/Contribute/Content/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide /de/docs/MDN/Contribute/Guidelines /de/docs/MDN/Guidelines -/de/docs/MDN/Contribute/Guidelines/Style_guide /de/docs/MDN/Guidelines/Style_guide +/de/docs/MDN/Contribute/Guidelines/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide +/de/docs/MDN/Contribute/Howto/Do_a_technical_review /de/docs/orphaned/MDN/Contribute/Howto/Do_a_technical_review +/de/docs/MDN/Contribute/Howto/Do_an_editorial_review /de/docs/orphaned/MDN/Contribute/Howto/Do_an_editorial_review +/de/docs/MDN/Contribute/Howto/ERstellung_eines_MDN_Profils /de/docs/orphaned/MDN/Contribute/Howto/Create_an_MDN_account +/de/docs/MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten /de/docs/orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages +/de/docs/MDN/Contribute/Howto/Set_the_summary_for_a_page /de/docs/orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page /de/docs/MDN/Contribute/Structures /de/docs/MDN/Structures -/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Kompatibilitaets_Tabellen +/de/docs/MDN/Contribute/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables +/de/docs/MDN/Contribute/zu_tun_im_MDN /de/docs/conflicting/MDN/Contribute/Getting_started /de/docs/MDN/Erste_Schritte /de/docs/MDN/Contribute/Getting_started /de/docs/MDN/Feedback /de/docs/MDN/Contribute/Feedback +/de/docs/MDN/Guidelines/Style_guide /de/docs/MDN/Guidelines/Writing_style_guide +/de/docs/MDN/Kuma /de/docs/MDN/Yari +/de/docs/MDN/Kuma/Beheben_von_KumaScript_Fehlern /de/docs/MDN/Tools/KumaScript/Troubleshooting +/de/docs/MDN/Structures/Kompatibilitaets_Tabellen /de/docs/MDN/Structures/Compatibility_tables +/de/docs/MDN/nutzer_leitfaden /de/docs/MDN/Tools +/de/docs/MDN/Über /de/docs/MDN/About +/de/docs/MDN/Über/Link_zu_MDN /de/docs/orphaned/MDN/About/Linking_to_MDN +/de/docs/MDN_at_ten /de/docs/MDN/At_ten +/de/docs/MDN_at_ten/History_of_MDN /de/docs/MDN/At_ten/History_of_MDN +/de/docs/MDN_at_ten/Zum_MDN_beitragen /de/docs/conflicting/MDN/Contribute +/de/docs/Mozilla/Add-ons/WebExtensions/API/Lesezeich. /de/docs/Mozilla/Add-ons/WebExtensions/API/bookmarks +/de/docs/Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API /de/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +/de/docs/Mozilla/Add-ons/WebExtensions/Beispiele /de/docs/Mozilla/Add-ons/WebExtensions/Examples +/de/docs/Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung /de/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +/de/docs/Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung /de/docs/Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +/de/docs/Mozilla/Developer_guide/Quelltexte /de/docs/Mozilla/Developer_guide/Source_Code +/de/docs/Mozilla/Developer_guide/firefox_erfolgreich_erstellt /de/docs/Mozilla/Developer_guide/So_you_just_built_Firefox /de/docs/Mozilla_entwickeln /de/docs/Mozilla/Developer_guide /de/docs/Online_and_offline_events /de/docs/Web/API/NavigatorOnLine/Online_and_offline_events +/de/docs/OpenSearch_Plugin_für_Firefox_erstellen /de/docs/Web/OpenSearch +/de/docs/Plugins/Flash-Aktivierung:_Browser-Vergleich /de/docs/orphaned/Plugins/Flash_Activation:_Browser_Comparison /de/docs/Profilmanager /de/docs/Profile_Manager /de/docs/QA/Stress_Testing /de/docs/Qualitätssicherung/Stress_Testing /de/docs/QA:Stress_Testing /de/docs/Qualitätssicherung/Stress_Testing @@ -373,30 +459,73 @@ /de/docs/SVG/Element/animate /de/docs/Web/SVG/Element/animate /de/docs/SVG/Element/foreignObject /de/docs/Web/SVG/Element/foreignObject /de/docs/SVG/Tutorial /de/docs/Web/SVG/Tutorial -/de/docs/SVG/Tutorial/Einführung /de/docs/Web/SVG/Tutorial/Einführung -/de/docs/Suche_Plugins /de/docs/OpenSearch_Plugin_für_Firefox_erstellen +/de/docs/SVG/Tutorial/Einführung /de/docs/Web/SVG/Tutorial/Introduction +/de/docs/Suche_Plugins /de/docs/Web/OpenSearch /de/docs/Theme_erstellen:Einführung /de/docs/Theme_erstellen/Einführung /de/docs/Theme_erstellen:UUID /de/docs/Theme_erstellen/UUID /de/docs/Theme_erstellen:contents.rdf /de/docs/Theme_erstellen/contents.rdf /de/docs/Theme_erstellen:install.rdf /de/docs/Theme_erstellen/install.rdf /de/docs/Themen /de/docs/Themes -/de/docs/Tools/Seiten_Inspektor/Style_panel /de/docs/Tools/Seiten_Inspektor -/de/docs/Verwenden_des_Cache_beim_Firefox_1.5 /de/docs/Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) +/de/docs/Tools/3D_untersuchung /de/docs/Tools/3D_View +/de/docs/Tools/Add-ons /de/docs/orphaned/Tools/Add-ons +/de/docs/Tools/Barrierefreiheits_inspektor /de/docs/Tools/Accessibility_inspector +/de/docs/Tools/Browser_Werkzeuge /de/docs/Tools/Browser_Toolbox +/de/docs/Tools/Page_Inspector/How_to/Event_Listener_untersuchen /de/docs/Tools/Page_Inspector/How_to/Examine_event_listeners +/de/docs/Tools/Page_Inspector/How_to/Raster_Layout_untersuchen /de/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts +/de/docs/Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung /de/docs/Tools/Page_Inspector/How_to/Edit_fonts +/de/docs/Tools/Seiten_Inspektor /de/docs/Tools/Page_Inspector +/de/docs/Tools/Seiten_Inspektor/Style_panel /de/docs/Tools/Page_Inspector +/de/docs/Tools/Seiten_Inspektor/Tastenkombinationen /de/docs/Tools/Page_Inspector/Keyboard_shortcuts +/de/docs/Tools/Shader-Editor /de/docs/Tools/Shader_Editor +/de/docs/Tools/WebIDE_clone /de/docs/orphaned/Tools/WebIDE_clone +/de/docs/Tools/Web_Konsole /de/docs/Tools/Web_Console +/de/docs/Tools/Web_Konsole/Hilfe /de/docs/Tools/Web_Console/Helpers +/de/docs/Tools/bildschirmgroessen-testen /de/docs/Tools/Responsive_Design_Mode +/de/docs/Tools/netzwerkanalyse /de/docs/Tools/Network_Monitor +/de/docs/Updating_web_applications_for_Firefox_3 /de/docs/Mozilla/Firefox/Releases/3/Updating_web_applications +/de/docs/Verwenden_des_Cache_beim_Firefox_1.5 /de/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +/de/docs/Web/API/AudioContext/decodeAudioData /de/docs/Web/API/BaseAudioContext/decodeAudioData /de/docs/Web/API/CSSRule.cssText /de/docs/Web/API/CSSRule/cssText /de/docs/Web/API/Element.querySelector /de/docs/Web/API/Element/querySelector +/de/docs/Web/API/File/Typ /de/docs/Web/API/File/type +/de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File/Using_files_from_web_applications +/de/docs/Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB /de/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB +/de/docs/Web/API/IndexedDB_API/IndexedDB_verwenden /de/docs/Web/API/IndexedDB_API/Using_IndexedDB /de/docs/Web/API/MozMobileConnection.selectNetworkAutomatically /de/docs/Web/API/MozMobileConnection/selectNetworkAutomatically +/de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers /de/docs/Web/API/Node.cloneNode /de/docs/Web/API/Node/cloneNode -/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen -/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL -/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL -/de/docs/Web/API/WebGL_API/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL -/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen -/de/docs/Web/API/WebGL_API/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext -/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren -/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +/de/docs/Web/API/Node/innerText /de/docs/Web/API/HTMLElement/innerText +/de/docs/Web/API/Vollbild_API /de/docs/Web/API/Fullscreen_API +/de/docs/Web/API/WebGL_API/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/de/docs/Web/API/WebGL_API/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +/de/docs/Web/API/WebGL_API/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +/de/docs/Web/API/WebGL_API/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/de/docs/Web/API/WebGL_API/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +/de/docs/Web/API/WebGL_API/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +/de/docs/Web/API/WebGL_API/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/de/docs/Web/API/WebGL_API/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +/de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL /de/docs/Web/API/Window.alert /de/docs/Web/API/Window/alert -/de/docs/Web/API/Window/setTimeout /de/docs/Web/API/WindowTimers/setTimeout +/de/docs/Web/API/Window/setTimeout /de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/de/docs/Web/API/WindowBase64 /de/docs/Web/API/WindowOrWorkerGlobalScope +/de/docs/Web/API/WindowBase64/btoa /de/docs/Web/API/WindowOrWorkerGlobalScope/btoa +/de/docs/Web/API/WindowTimers /de/docs/conflicting/Web/API/WindowOrWorkerGlobalScope +/de/docs/Web/API/WindowTimers/setTimeout /de/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /de/docs/Web/API/document.documentElement /de/docs/Web/API/Document/documentElement +/de/docs/Web/Barrierefreiheit /de/docs/Web/Accessibility +/de/docs/Web/Barrierefreiheit/ARIA /de/docs/Web/Accessibility/ARIA +/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen /de/docs/Web/Accessibility/ARIA/ARIA_Live_Regions +/de/docs/Web/Barrierefreiheit/ARIA/ARIA_Techniken /de/docs/Web/Accessibility/ARIA/ARIA_Techniques +/de/docs/Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets /de/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets +/de/docs/Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten /de/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets +/de/docs/Web/Barrierefreiheit/Webentwicklung /de/docs/conflicting/Web/Accessibility /de/docs/Web/CSS/-moz-alias /de/docs/Web/CSS/cursor /de/docs/Web/CSS/-moz-appearance /de/docs/Web/CSS/appearance /de/docs/Web/CSS/-moz-background-inline-policy /de/docs/Web/CSS/box-decoration-break @@ -405,15 +534,47 @@ /de/docs/Web/CSS/-moz-border-radius-bottomright /de/docs/Web/CSS/border-bottom-right-radius /de/docs/Web/CSS/-moz-border-radius-topleft /de/docs/Web/CSS/border-top-left-radius /de/docs/Web/CSS/-moz-border-radius-topright /de/docs/Web/CSS/border-top-right-radius +/de/docs/Web/CSS/-moz-box-flex /de/docs/Web/CSS/box-flex +/de/docs/Web/CSS/-moz-box-ordinal-group /de/docs/Web/CSS/box-ordinal-group +/de/docs/Web/CSS/-moz-box-pack /de/docs/Web/CSS/box-pack /de/docs/Web/CSS/-moz-box-shadow /de/docs/Web/CSS/box-shadow +/de/docs/Web/CSS/-moz-cell /de/docs/conflicting/Web/CSS/cursor /de/docs/Web/CSS/-moz-context-menu /de/docs/Web/CSS/cursor /de/docs/Web/CSS/-moz-copy /de/docs/Web/CSS/cursor /de/docs/Web/CSS/-moz-spinning /de/docs/Web/CSS/cursor -/de/docs/Web/CSS/Adjacent_sibling_combinator /de/docs/Web/CSS/Angrenzende_Geschwisterselektoren -/de/docs/Web/CSS/Adjacent_sibling_selectors /de/docs/Web/CSS/Angrenzende_Geschwisterselektoren -/de/docs/Web/CSS/Boxmodell /de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell -/de/docs/Web/CSS/CSS_Box_Model /de/docs/Web/CSS/CSS_Boxmodell -/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator +/de/docs/Web/CSS/-moz-user-modify /de/docs/Web/CSS/user-modify +/de/docs/Web/CSS/-moz-user-select /de/docs/Web/CSS/user-select +/de/docs/Web/CSS/-webkit-mask-origin /de/docs/Web/CSS/mask-origin +/de/docs/Web/CSS/-webkit-mask-repeat /de/docs/Web/CSS/mask-repeat +/de/docs/Web/CSS/:-moz-placeholder /de/docs/Web/CSS/:placeholder-shown +/de/docs/Web/CSS/:-moz-ui-invalid /de/docs/Web/CSS/:user-invalid +/de/docs/Web/CSS/:-webkit-autofill /de/docs/Web/CSS/:autofill +/de/docs/Web/CSS/::-moz-placeholder /de/docs/conflicting/Web/CSS/::placeholder +/de/docs/Web/CSS/Adjacent_sibling_selectors /de/docs/Web/CSS/Adjacent_sibling_combinator +/de/docs/Web/CSS/Alias /de/docs/conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743 +/de/docs/Web/CSS/Angrenzende_Geschwisterselektoren /de/docs/Web/CSS/Adjacent_sibling_combinator +/de/docs/Web/CSS/Attributselektoren /de/docs/Web/CSS/Attribute_selectors +/de/docs/Web/CSS/Aural /de/docs/Web/CSS/@media/aural +/de/docs/Web/CSS/Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +/de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/de/docs/Web/CSS/CSS_Background_and_Borders /de/docs/Web/CSS/CSS_Backgrounds_and_Borders +/de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/de/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/de/docs/Web/CSS/CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model +/de/docs/Web/CSS/CSS_Boxmodell/Box-shadow_generator /de/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/de/docs/Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell /de/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model +/de/docs/Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern /de/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing +/de/docs/Web/CSS/CSS_Colors /de/docs/Web/CSS/CSS_Color +/de/docs/Web/CSS/CSS_Colors/farbauswahl_werkzeug /de/docs/Web/CSS/CSS_Colors/Color_picker_tool +/de/docs/Web/CSS/CSS_Compositing_and_Blending /de/docs/Web/CSS/Compositing_and_Blending +/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items +/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes /de/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/de/docs/Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden /de/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters +/de/docs/Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung /de/docs/Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation +/de/docs/Web/CSS/CSS_Masken /de/docs/Web/CSS/CSS_Masking +/de/docs/Web/CSS/CSS_Namensräume /de/docs/Web/CSS/CSS_Namespaces +/de/docs/Web/CSS/CSS_Referenz /de/docs/Web/CSS/Reference /de/docs/Web/CSS/CSS_Referenz/::backdrop /de/docs/Web/CSS/::backdrop /de/docs/Web/CSS/CSS_Referenz/ /de/docs/Web/CSS/basic-shape /de/docs/Web/CSS/CSS_Referenz/@viewport /de/docs/Web/CSS/@viewport @@ -421,113 +582,355 @@ /de/docs/Web/CSS/CSS_Referenz/Webkit_Extensions /de/docs/Web/CSS/WebKit_Extensions /de/docs/Web/CSS/CSS_Referenz/line-break /de/docs/Web/CSS/line-break /de/docs/Web/CSS/CSS_Referenz/mix-blend-mode /de/docs/Web/CSS/mix-blend-mode +/de/docs/Web/CSS/CSS_Textdekoration /de/docs/Web/CSS/CSS_Text_Decoration +/de/docs/Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden /de/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms +/de/docs/Web/CSS/CSS_Typen /de/docs/Web/CSS/CSS_Types +/de/docs/Web/CSS/CSS_User_Interface /de/docs/conflicting/Web/CSS/CSS_Basic_User_Interface /de/docs/Web/CSS/CSS_Werte_Geltung /de/docs/Web/CSS /de/docs/Web/CSS/CSS_animierbare_Eigenschaften /de/docs/Web/CSS /de/docs/Web/CSS/CSS_prozentuale_werte /de/docs/Web/CSS /de/docs/Web/CSS/CSS_werte_syntax /de/docs/Web/CSS -/de/docs/Web/CSS/Child_selectors /de/docs/Web/CSS/Kindselektoren -/de/docs/Web/CSS/Getting_Started /de/docs/Web/Guide/CSS/Getting_started +/de/docs/Web/CSS/Child_selectors /de/docs/Web/CSS/Child_combinator +/de/docs/Web/CSS/Farben /de/docs/Web/CSS/color_value +/de/docs/Web/CSS/Getting_Started /de/docs/conflicting/Learn/CSS/First_steps +/de/docs/Web/CSS/ID-Selektoren /de/docs/Web/CSS/ID_selectors +/de/docs/Web/CSS/Index /de/docs/orphaned/Web/CSS/Index +/de/docs/Web/CSS/Initialwert /de/docs/Web/CSS/initial_value +/de/docs/Web/CSS/Kindselektoren /de/docs/Web/CSS/Child_combinator +/de/docs/Web/CSS/Klassenselektoren /de/docs/Web/CSS/Class_selectors +/de/docs/Web/CSS/Kurzformat_Eigenschaft /de/docs/Web/CSS/Shorthand_properties +/de/docs/Web/CSS/Motion_Path /de/docs/Web/CSS/CSS_Motion_Path +/de/docs/Web/CSS/Property_Template /de/docs/orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template /de/docs/Web/CSS/Pseudoklasse /de/docs/Web/CSS/Pseudo-classes -/de/docs/Web/CSS/Referenz /de/docs/Web/CSS/CSS_Referenz -/de/docs/Web/CSS/Replaced_element /de/docs/Web/CSS/ersetztes_Element +/de/docs/Web/CSS/Referenz /de/docs/Web/CSS/Reference +/de/docs/Web/CSS/Spezifität /de/docs/Web/CSS/Specificity +/de/docs/Web/CSS/Vererbung /de/docs/Web/CSS/inheritance +/de/docs/Web/CSS/Wertdefinitionssyntax /de/docs/Web/CSS/Value_definition_syntax /de/docs/Web/CSS/attr /de/docs/Web/CSS/attr() +/de/docs/Web/CSS/auto /de/docs/conflicting/Web/CSS/width +/de/docs/Web/CSS/berechneter_Wert /de/docs/Web/CSS/computed_value /de/docs/Web/CSS/calc /de/docs/Web/CSS/calc() +/de/docs/Web/CSS/ersetztes_Element /de/docs/Web/CSS/Replaced_element +/de/docs/Web/CSS/grid-gap /de/docs/Web/CSS/gap /de/docs/Web/CSS/hidden /de/docs/Web/CSS/visibility /de/docs/Web/CSS/linear-gradient /de/docs/Web/CSS/linear-gradient() /de/docs/Web/CSS/marks /de/docs/Web/CSS/@page/marks /de/docs/Web/CSS/mq-boolean /de/docs/Web/CSS/Media_Queries/Using_media_queries +/de/docs/Web/CSS/none /de/docs/conflicting/Web/CSS/float +/de/docs/Web/CSS/normal /de/docs/conflicting/Web/CSS/font-variant +/de/docs/Web/CSS/tatsächlicher_Wert /de/docs/Web/CSS/actual_value +/de/docs/Web/CSS/url /de/docs/Web/CSS/url() /de/docs/Web/CSS/visible /de/docs/Web/CSS/visibility +/de/docs/Web/CSS/word-wrap /de/docs/Web/CSS/overflow-wrap +/de/docs/Web/Events/DOMContentLoaded /de/docs/Web/API/Window/DOMContentLoaded_event +/de/docs/Web/Events/change /de/docs/Web/API/HTMLElement/change_event /de/docs/Web/Events/fullscreenchange /de/docs/Web/API/Document/fullscreenchange_event +/de/docs/Web/Events/load /de/docs/Web/API/Window/load_event +/de/docs/Web/Events/readystatechange /de/docs/Web/API/Document/readystatechange_event /de/docs/Web/Events/submit /de/docs/Web/API/HTMLFormElement/submit_event /de/docs/Web/Events/webglcontextcreationerror /de/docs/Web/API/HTMLCanvasElement/webglcontextcreationerror_event /de/docs/Web/Events/webglcontextlost /de/docs/Web/API/HTMLCanvasElement/webglcontextlost_event /de/docs/Web/Events/webglcontextrestored /de/docs/Web/API/HTMLCanvasElement/webglcontextrestored_event +/de/docs/Web/Guide/AJAX/Erste_Schritte /de/docs/Web/Guide/AJAX/Getting_Started /de/docs/Web/Guide/CSS /de/docs/Learn/CSS -/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/CSS_Animationen_nutzen -/de/docs/Web/Guide/CSS/Flexible_boxes /de/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes -/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden /de/docs/Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden +/de/docs/Web/Guide/CSS/CSS_Animationen_nutzen /de/docs/Web/CSS/CSS_Animations/Using_CSS_animations +/de/docs/Web/Guide/CSS/Flexible_boxes /de/docs/conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox +/de/docs/Web/Guide/CSS/Getting_started /de/docs/conflicting/Learn/CSS/First_steps +/de/docs/Web/Guide/CSS/Getting_started/Farbe /de/docs/conflicting/Learn/CSS/Building_blocks/Values_and_units +/de/docs/Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung /de/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +/de/docs/Web/Guide/CSS/Getting_started/Lesbares_CSS /de/docs/Learn/CSS/First_steps/How_CSS_is_structured +/de/docs/Web/Guide/CSS/Getting_started/Selektoren /de/docs/Learn/CSS/Building_blocks/Selectors +/de/docs/Web/Guide/CSS/Getting_started/Textstyles /de/docs/Learn/CSS/Styling_text/Fundamentals +/de/docs/Web/Guide/CSS/Getting_started/Was_ist_CSS /de/docs/Learn/CSS/First_steps/How_CSS_works +/de/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /de/docs/conflicting/Learn/CSS/First_steps/How_CSS_works +/de/docs/Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert /de/docs/conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400 +/de/docs/Web/Guide/CSS/Scaling_background_images /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden /de/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +/de/docs/Web/Guide/DOM /de/docs/conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 +/de/docs/Web/Guide/DOM/Manipulating_the_browser_history /de/docs/Web/API/History_API /de/docs/Web/Guide/HTML /de/docs/Learn/HTML -/de/docs/Web/Guide/HTML/Einführung /de/docs/Learn/HTML/Einführung_in_HTML -/de/docs/Web/HTML/Element/h1 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/HTML/Element/h2 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/HTML/Element/h3 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/HTML/Element/h4 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/HTML/Element/h5 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/HTML/Element/h6 /de/docs/Web/HTML/Element/h1-h6 -/de/docs/Web/JavaScript/Datenstruktures /de/docs/Web/JavaScript/Datenstrukturen +/de/docs/Web/Guide/HTML/Canvas_Tutorial /de/docs/Web/API/Canvas_API/Tutorial +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Advanced_animations /de/docs/Web/API/Canvas_API/Tutorial/Advanced_animations +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors /de/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Basic_animations /de/docs/Web/API/Canvas_API/Tutorial/Basic_animations +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Bilder /de/docs/Web/API/Canvas_API/Tutorial/Using_images +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren /de/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Drawing_text /de/docs/Web/API/Canvas_API/Tutorial/Drawing_text +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen /de/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes +/de/docs/Web/Guide/HTML/Canvas_Tutorial/Grundlagen /de/docs/Web/API/Canvas_API/Tutorial/Basic_usage +/de/docs/Web/Guide/HTML/Content_Editable /de/docs/Web/Guide/HTML/Editable_content +/de/docs/Web/Guide/HTML/Einführung /de/docs/Learn/HTML/Introduction_to_HTML +/de/docs/Web/Guide/HTML/Inhaltskategorien /de/docs/Web/Guide/HTML/Content_categories +/de/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document /de/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines +/de/docs/Web/HTML/Block-level_elemente /de/docs/Web/HTML/Block-level_elements +/de/docs/Web/HTML/Canvas /de/docs/Web/API/Canvas_API +/de/docs/Web/HTML/Element/h1 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h1-h6 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h2 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h3 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h4 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h5 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/h6 /de/docs/Web/HTML/Element/Heading_Elements +/de/docs/Web/HTML/Element/head /de/docs/Web/API/HTMLHeadElement +/de/docs/Web/HTML/Globale_Attribute /de/docs/Web/HTML/Global_attributes +/de/docs/Web/HTML/Globale_Attribute/accesskey /de/docs/Web/HTML/Global_attributes/accesskey +/de/docs/Web/HTML/Globale_Attribute/autocapitalize /de/docs/Web/HTML/Global_attributes/autocapitalize +/de/docs/Web/HTML/Globale_Attribute/class /de/docs/Web/HTML/Global_attributes/class +/de/docs/Web/HTML/Globale_Attribute/contenteditable /de/docs/Web/HTML/Global_attributes/contenteditable +/de/docs/Web/HTML/Globale_Attribute/dir /de/docs/Web/HTML/Global_attributes/dir +/de/docs/Web/HTML/Globale_Attribute/draggable /de/docs/Web/HTML/Global_attributes/draggable +/de/docs/Web/HTML/Globale_Attribute/dropzone /de/docs/orphaned/Web/HTML/Global_attributes/dropzone +/de/docs/Web/HTML/Globale_Attribute/hidden /de/docs/Web/HTML/Global_attributes/hidden +/de/docs/Web/HTML/Globale_Attribute/id /de/docs/Web/HTML/Global_attributes/id +/de/docs/Web/HTML/Globale_Attribute/inputmode /de/docs/Web/HTML/Global_attributes/inputmode +/de/docs/Web/HTML/Globale_Attribute/is /de/docs/Web/HTML/Global_attributes/is +/de/docs/Web/HTML/Globale_Attribute/kontextmenu /de/docs/Web/HTML/Global_attributes/contextmenu +/de/docs/Web/HTML/Globale_Attribute/lang /de/docs/Web/HTML/Global_attributes/lang +/de/docs/Web/HTML/Globale_Attribute/style /de/docs/Web/HTML/Global_attributes/style +/de/docs/Web/HTML/Globale_Attribute/tabindex /de/docs/Web/HTML/Global_attributes/tabindex +/de/docs/Web/HTML/Globale_Attribute/title /de/docs/Web/HTML/Global_attributes/title +/de/docs/Web/HTML/Globale_Attribute/translate /de/docs/Web/HTML/Global_attributes/translate +/de/docs/Web/HTML/HTML5 /de/docs/Web/Guide/HTML/HTML5 +/de/docs/Web/HTML/HTML5/HTML5_element_list /de/docs/conflicting/Web/HTML/Element +/de/docs/Web/HTML/Inline_elemente /de/docs/Web/HTML/Inline_elements +/de/docs/Web/HTML/Referenz /de/docs/Web/HTML/Reference +/de/docs/Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight /de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight +/de/docs/Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben /de/docs/Web/HTTP/CORS/Errors/CORSMissingAllowOrigin +/de/docs/Web/HTTP/Caching_FAQ /de/docs/Web/HTTP/Caching +/de/docs/Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften /de/docs/Web/JavaScript/Enumerability_and_ownership_of_properties +/de/docs/Web/JavaScript/Datenstrukturen /de/docs/Web/JavaScript/Data_structures +/de/docs/Web/JavaScript/Datenstruktures /de/docs/Web/JavaScript/Data_structures +/de/docs/Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript /de/docs/Web/JavaScript/A_re-introduction_to_JavaScript +/de/docs/Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript /de/docs/Web/XPath/Introduction_to_using_XPath_in_JavaScript +/de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators /de/docs/Web/JavaScript/Guide/Closures /de/docs/Web/JavaScript/Closures -/de/docs/Web/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung -/de/docs/Web/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Guide/Einführung /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/Guide/Feinheiten_des_Objektmodells /de/docs/Web/JavaScript/Guide/Details_of_the_Object_Model +/de/docs/Web/JavaScript/Guide/Funktionen /de/docs/Web/JavaScript/Guide/Functions +/de/docs/Web/JavaScript/Guide/Grammatik_und_Typen /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/de/docs/Web/JavaScript/Guide/Mit_Objekten_arbeiten /de/docs/Web/JavaScript/Guide/Working_with_Objects +/de/docs/Web/JavaScript/Guide/Statements /de/docs/Web/JavaScript/Guide/Control_flow_and_error_handling +/de/docs/Web/JavaScript/Guide/Textformatierung /de/docs/Web/JavaScript/Guide/Text_formatting +/de/docs/Web/JavaScript/Guide/Ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/Guide/Ueber_diese_Einfuehrung /de/docs/Web/JavaScript/Guide/Introduction /de/docs/Web/JavaScript/Guide/Vererbung_ueberdacht /de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain -/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung /de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung +/de/docs/Web/JavaScript/Guide/Vergleiche_auf_Gleichheit_und_deren_Verwendung /de/docs/Web/JavaScript/Equality_comparisons_and_sameness /de/docs/Web/JavaScript/Guide/Vordefinierte_Kernobjekte /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/Web/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/Guide/Werte_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/Web/JavaScript/Guide/schleifen_und_iterationen /de/docs/Web/JavaScript/Guide/Loops_and_iteration +/de/docs/Web/JavaScript/Guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/Guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript /de/docs/conflicting/Learn/JavaScript/Objects +/de/docs/Web/JavaScript/JavaScript_technologieuebersicht /de/docs/Web/JavaScript/JavaScript_technologies_overview /de/docs/Web/JavaScript/Javascript_lernen_für_Anfänger /de/docs/Web/JavaScript/Guide /de/docs/Web/JavaScript/Reference/Anweisungen /de/docs/Web/JavaScript/Reference/Statements /de/docs/Web/JavaScript/Reference/Anweisungen/const /de/docs/Web/JavaScript/Reference/Statements/const /de/docs/Web/JavaScript/Reference/Anweisungen/for...in /de/docs/Web/JavaScript/Reference/Statements/for...in /de/docs/Web/JavaScript/Reference/Anweisungen/let /de/docs/Web/JavaScript/Reference/Statements/let /de/docs/Web/JavaScript/Reference/Anweisungen/var /de/docs/Web/JavaScript/Reference/Statements/var +/de/docs/Web/JavaScript/Reference/Fehler /de/docs/Web/JavaScript/Reference/Errors +/de/docs/Web/JavaScript/Reference/Fehler/Already_has_pragma /de/docs/Web/JavaScript/Reference/Errors/Already_has_pragma +/de/docs/Web/JavaScript/Reference/Fehler/Array_sort_argument /de/docs/Web/JavaScript/Reference/Errors/Array_sort_argument +/de/docs/Web/JavaScript/Reference/Fehler/Bad_octal /de/docs/Web/JavaScript/Reference/Errors/Bad_octal +/de/docs/Web/JavaScript/Reference/Fehler/Bad_radix /de/docs/Web/JavaScript/Reference/Errors/Bad_radix +/de/docs/Web/JavaScript/Reference/Fehler/Bad_regexp_flag /de/docs/Web/JavaScript/Reference/Errors/Bad_regexp_flag +/de/docs/Web/JavaScript/Reference/Fehler/Bad_return_or_yield /de/docs/Web/JavaScript/Reference/Errors/Bad_return_or_yield +/de/docs/Web/JavaScript/Reference/Fehler/Called_on_incompatible_type /de/docs/Web/JavaScript/Reference/Errors/Called_on_incompatible_type +/de/docs/Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init /de/docs/Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init +/de/docs/Web/JavaScript/Reference/Fehler/Cant_access_property /de/docs/Web/JavaScript/Reference/Errors/Cant_access_property +/de/docs/Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible /de/docs/Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible +/de/docs/Web/JavaScript/Reference/Fehler/Cant_delete /de/docs/Web/JavaScript/Reference/Errors/Cant_delete +/de/docs/Web/JavaScript/Reference/Fehler/Cant_redefine_property /de/docs/Web/JavaScript/Reference/Errors/Cant_redefine_property +/de/docs/Web/JavaScript/Reference/Fehler/Cyclic_object_value /de/docs/Web/JavaScript/Reference/Errors/Cyclic_object_value +/de/docs/Web/JavaScript/Reference/Fehler/Dead_object /de/docs/Web/JavaScript/Reference/Errors/Dead_object +/de/docs/Web/JavaScript/Reference/Fehler/Delete_in_strict_mode /de/docs/Web/JavaScript/Reference/Errors/Delete_in_strict_mode +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_String_generics /de/docs/Web/JavaScript/Reference/Errors/Deprecated_String_generics +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage /de/docs/Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_expression_closures /de/docs/Web/JavaScript/Reference/Errors/Deprecated_expression_closures +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_octal /de/docs/Web/JavaScript/Reference/Errors/Deprecated_octal +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma /de/docs/Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma +/de/docs/Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat /de/docs/Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat +/de/docs/Web/JavaScript/Reference/Fehler/Equal_as_assign /de/docs/Web/JavaScript/Reference/Errors/Equal_as_assign +/de/docs/Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated /de/docs/Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated +/de/docs/Web/JavaScript/Reference/Fehler/Getter_only /de/docs/Web/JavaScript/Reference/Errors/Getter_only +/de/docs/Web/JavaScript/Reference/Fehler/Identifier_after_number /de/docs/Web/JavaScript/Reference/Errors/Identifier_after_number +/de/docs/Web/JavaScript/Reference/Fehler/Illegal_character /de/docs/Web/JavaScript/Reference/Errors/Illegal_character +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_array_length /de/docs/Web/JavaScript/Reference/Errors/Invalid_array_length +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side /de/docs/Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_const_assignment /de/docs/Web/JavaScript/Reference/Errors/Invalid_const_assignment +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_date /de/docs/Web/JavaScript/Reference/Errors/Invalid_date +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer /de/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer +/de/docs/Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer /de/docs/Web/JavaScript/Reference/Errors/Invalid_for-of_initializer +/de/docs/Web/JavaScript/Reference/Fehler/JSON_bad_parse /de/docs/Web/JavaScript/Reference/Errors/JSON_bad_parse +/de/docs/Web/JavaScript/Reference/Fehler/Malformed_URI /de/docs/Web/JavaScript/Reference/Errors/Malformed_URI +/de/docs/Web/JavaScript/Reference/Fehler/Malformed_formal_parameter /de/docs/Web/JavaScript/Reference/Errors/Malformed_formal_parameter +/de/docs/Web/JavaScript/Reference/Fehler/Missing_bracket_after_list /de/docs/Web/JavaScript/Reference/Errors/Missing_bracket_after_list +/de/docs/Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id /de/docs/Web/JavaScript/Reference/Errors/Missing_colon_after_property_id +/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body /de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_function_body +/de/docs/Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list /de/docs/Web/JavaScript/Reference/Errors/Missing_curly_after_property_list +/de/docs/Web/JavaScript/Reference/Fehler/Missing_formal_parameter /de/docs/Web/JavaScript/Reference/Errors/Missing_formal_parameter +/de/docs/Web/JavaScript/Reference/Fehler/Missing_initializer_in_const /de/docs/Web/JavaScript/Reference/Errors/Missing_initializer_in_const +/de/docs/Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator /de/docs/Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator +/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list /de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list +/de/docs/Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition /de/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition +/de/docs/Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement /de/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement +/de/docs/Web/JavaScript/Reference/Fehler/More_arguments_needed /de/docs/Web/JavaScript/Reference/Errors/More_arguments_needed +/de/docs/Web/JavaScript/Reference/Fehler/Negative_repetition_count /de/docs/Web/JavaScript/Reference/Errors/Negative_repetition_count +/de/docs/Web/JavaScript/Reference/Fehler/No_non-null_object /de/docs/Web/JavaScript/Reference/Errors/No_non-null_object +/de/docs/Web/JavaScript/Reference/Fehler/No_properties /de/docs/Web/JavaScript/Reference/Errors/No_properties +/de/docs/Web/JavaScript/Reference/Fehler/No_variable_name /de/docs/Web/JavaScript/Reference/Errors/No_variable_name +/de/docs/Web/JavaScript/Reference/Fehler/Non_configurable_array_element /de/docs/Web/JavaScript/Reference/Errors/Non_configurable_array_element +/de/docs/Web/JavaScript/Reference/Fehler/Not_a_codepoint /de/docs/Web/JavaScript/Reference/Errors/Not_a_codepoint +/de/docs/Web/JavaScript/Reference/Fehler/Not_a_constructor /de/docs/Web/JavaScript/Reference/Errors/Not_a_constructor +/de/docs/Web/JavaScript/Reference/Fehler/Not_a_function /de/docs/Web/JavaScript/Reference/Errors/Not_a_function +/de/docs/Web/JavaScript/Reference/Fehler/Not_defined /de/docs/Web/JavaScript/Reference/Errors/Not_defined +/de/docs/Web/JavaScript/Reference/Fehler/Precision_range /de/docs/Web/JavaScript/Reference/Errors/Precision_range +/de/docs/Web/JavaScript/Reference/Fehler/Property_access_denied /de/docs/Web/JavaScript/Reference/Errors/Property_access_denied +/de/docs/Web/JavaScript/Reference/Fehler/Read-only /de/docs/Web/JavaScript/Reference/Errors/Read-only +/de/docs/Web/JavaScript/Reference/Fehler/Redeclared_parameter /de/docs/Web/JavaScript/Reference/Errors/Redeclared_parameter +/de/docs/Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value /de/docs/Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value +/de/docs/Web/JavaScript/Reference/Fehler/Reserved_identifier /de/docs/Web/JavaScript/Reference/Errors/Reserved_identifier +/de/docs/Web/JavaScript/Reference/Fehler/Resulting_string_too_large /de/docs/Web/JavaScript/Reference/Errors/Resulting_string_too_large +/de/docs/Web/JavaScript/Reference/Fehler/Stmt_after_return /de/docs/Web/JavaScript/Reference/Errors/Stmt_after_return +/de/docs/Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params /de/docs/Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params +/de/docs/Web/JavaScript/Reference/Fehler/Too_much_recursion /de/docs/Web/JavaScript/Reference/Errors/Too_much_recursion +/de/docs/Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments /de/docs/Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments +/de/docs/Web/JavaScript/Reference/Fehler/Undeclared_var /de/docs/Web/JavaScript/Reference/Errors/Undeclared_var +/de/docs/Web/JavaScript/Reference/Fehler/Undefined_prop /de/docs/Web/JavaScript/Reference/Errors/Undefined_prop +/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_token /de/docs/Web/JavaScript/Reference/Errors/Unexpected_token +/de/docs/Web/JavaScript/Reference/Fehler/Unexpected_type /de/docs/Web/JavaScript/Reference/Errors/Unexpected_type +/de/docs/Web/JavaScript/Reference/Fehler/Unnamed_function_statement /de/docs/Web/JavaScript/Reference/Errors/Unnamed_function_statement +/de/docs/Web/JavaScript/Reference/Fehler/Unterminated_string_literal /de/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal +/de/docs/Web/JavaScript/Reference/Fehler/Var_hides_argument /de/docs/Web/JavaScript/Reference/Errors/Var_hides_argument +/de/docs/Web/JavaScript/Reference/Fehler/in_operator_no_object /de/docs/Web/JavaScript/Reference/Errors/in_operator_no_object +/de/docs/Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand /de/docs/Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand +/de/docs/Web/JavaScript/Reference/Fehler/is_not_iterable /de/docs/Web/JavaScript/Reference/Errors/is_not_iterable +/de/docs/Web/JavaScript/Reference/Functions/Methoden_Definitionen /de/docs/Web/JavaScript/Reference/Functions/Method_definitions +/de/docs/Web/JavaScript/Reference/Functions/Pfeilfunktionen /de/docs/Web/JavaScript/Reference/Functions/Arrow_functions +/de/docs/Web/JavaScript/Reference/Functions/rest_parameter /de/docs/Web/JavaScript/Reference/Functions/rest_parameters +/de/docs/Web/JavaScript/Reference/Global_Objects/Array/Prototypen /de/docs/orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten /de/docs/Web/JavaScript/Reference/Global_Objects/Array/flat +/de/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer +/de/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype /de/docs/orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype +/de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/wake /de/docs/Web/JavaScript/Reference/Global_Objects/Atomics/notify +/de/docs/Web/JavaScript/Reference/Global_Objects/Boolean/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Boolean /de/docs/Web/JavaScript/Reference/Global_Objects/Collator /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/compare /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare -/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +/de/docs/Web/JavaScript/Reference/Global_Objects/Collator/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/Collator/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf +/de/docs/Web/JavaScript/Reference/Global_Objects/DataView/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/DataView +/de/docs/Web/JavaScript/Reference/Global_Objects/Date/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Date /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/format /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/formatToParts /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts -/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +/de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions /de/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf +/de/docs/Web/JavaScript/Reference/Global_Objects/Error/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Error +/de/docs/Web/JavaScript/Reference/Global_Objects/EvalError/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/EvalError +/de/docs/Web/JavaScript/Reference/Global_Objects/Function/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Function +/de/docs/Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction +/de/docs/Web/JavaScript/Reference/Global_Objects/InternalError/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/InternalError +/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator +/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +/de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +/de/docs/Web/JavaScript/Reference/Global_Objects/Map/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Map +/de/docs/Web/JavaScript/Reference/Global_Objects/Math/math.random /de/docs/Web/JavaScript/Reference/Global_Objects/Math/random +/de/docs/Web/JavaScript/Reference/Global_Objects/Number/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Number /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/format /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format -/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +/de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat /de/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf +/de/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/Object /de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules /de/docs/Web/JavaScript/Reference/Global_Objects/PluralRules/supportedLocalesOf /de/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf +/de/docs/Web/JavaScript/Reference/Global_Objects/RangeError/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/RangeError +/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimLeft /de/docs/Web/JavaScript/Reference/Global_Objects/String/trimStart +/de/docs/Web/JavaScript/Reference/Global_Objects/String/TrimRight /de/docs/Web/JavaScript/Reference/Global_Objects/String/trimEnd +/de/docs/Web/JavaScript/Reference/Global_Objects/String/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/String +/de/docs/Web/JavaScript/Reference/Global_Objects/String/suchen /de/docs/Web/JavaScript/Reference/Global_Objects/String/search +/de/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError +/de/docs/Web/JavaScript/Reference/Global_Objects/TypeError/prototype /de/docs/conflicting/Web/JavaScript/Reference/Global_Objects/TypeError +/de/docs/Web/JavaScript/Reference/Klassen /de/docs/Web/JavaScript/Reference/Classes +/de/docs/Web/JavaScript/Reference/Klassen/constructor /de/docs/Web/JavaScript/Reference/Classes/constructor +/de/docs/Web/JavaScript/Reference/Klassen/extends /de/docs/Web/JavaScript/Reference/Classes/extends +/de/docs/Web/JavaScript/Reference/Klassen/static /de/docs/Web/JavaScript/Reference/Classes/static /de/docs/Web/JavaScript/Reference/Methods_Index /de/docs/Web/JavaScript/Reference /de/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators /de/docs/Web/JavaScript/Reference/Operators +/de/docs/Web/JavaScript/Reference/Operators/Bitwise_Operatoren /de/docs/conflicting/Web/JavaScript/Reference/Operators +/de/docs/Web/JavaScript/Reference/Operators/Dekrement /de/docs/Web/JavaScript/Reference/Operators/Decrement +/de/docs/Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung /de/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment +/de/docs/Web/JavaScript/Reference/Operators/Inkrement /de/docs/Web/JavaScript/Reference/Operators/Increment +/de/docs/Web/JavaScript/Reference/Operators/Logische_Operatoren /de/docs/conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163 +/de/docs/Web/JavaScript/Reference/Operators/Modulo /de/docs/Web/JavaScript/Reference/Operators/Remainder +/de/docs/Web/JavaScript/Reference/Operators/Objekt_Initialisierer /de/docs/Web/JavaScript/Reference/Operators/Object_initializer +/de/docs/Web/JavaScript/Reference/Operators/Optionale_Verkettung /de/docs/Web/JavaScript/Reference/Operators/Optional_chaining +/de/docs/Web/JavaScript/Reference/Operators/Spread_operator /de/docs/conflicting/Web/JavaScript/Reference/Operators/Spread_syntax +/de/docs/Web/JavaScript/Reference/Operators/Vergleichsoperatoren /de/docs/conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039 +/de/docs/Web/JavaScript/Reference/Operators/Zuweisungsoperator /de/docs/conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076 /de/docs/Web/JavaScript/Reference/Properties_Index /de/docs/Web/JavaScript/Reference +/de/docs/Web/JavaScript/Reference/Statements/default /de/docs/conflicting/Web/JavaScript/Reference/Statements/switch +/de/docs/Web/JavaScript/Reference/Statements/funktion /de/docs/Web/JavaScript/Reference/Statements/function +/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features /de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features +/de/docs/Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol /de/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol +/de/docs/Web/JavaScript/Reference/template_strings /de/docs/Web/JavaScript/Reference/Template_literals +/de/docs/Web/JavaScript/Speicherverwaltung /de/docs/Web/JavaScript/Memory_Management /de/docs/Web/JavaScript/Tutorials /de/docs/Web/JavaScript +/de/docs/Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung /de/docs/Web/JavaScript/Equality_comparisons_and_sameness /de/docs/Web/JavaScript/java_guide /de/docs/Web/JavaScript/Guide /de/docs/Web/JavaScript/javascript_guide /de/docs/Web/JavaScript/Guide -/de/docs/Web/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Ausdruecke_und_Operatoren -/de/docs/Web/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammatik_und_Typen -/de/docs/Web/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung -/de/docs/Web/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Einführung +/de/docs/Web/JavaScript/javascript_guide/Ausdrücke_und_Operatoren /de/docs/Web/JavaScript/Guide/Expressions_and_Operators +/de/docs/Web/JavaScript/javascript_guide/Javascript_Übersicht /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/javascript_guide/Werte,_Variable_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/Web/JavaScript/javascript_guide/Werte,_Variablen_und_Literale /de/docs/Web/JavaScript/Guide/Grammar_and_types +/de/docs/Web/JavaScript/javascript_guide/ueber_javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/javascript_guide/ueber_javascript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/javascript_guide/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/javascript_guide/Über_diese_Einführung /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/ueber_JavaScript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/ueber_JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/JavaScript/Über_Javascript /de/docs/Web/JavaScript/Guide/Introduction +/de/docs/Web/MathML/Attribute/Werte /de/docs/Web/MathML/Attribute/Values +/de/docs/Web/MathML/Beispiele /de/docs/Web/MathML/Examples +/de/docs/Web/MathML/Beispiele/MathML_Satz_des_Pythagoras /de/docs/Web/MathML/Examples/MathML_Pythagorean_Theorem +/de/docs/Web/MathML/Beispiele/Quadratische_Gleichung /de/docs/Web/MathML/Examples/Deriving_the_Quadratic_Formula +/de/docs/Web/SVG/Tutorial/Einführung /de/docs/Web/SVG/Tutorial/Introduction +/de/docs/Web/SVG/Tutorial/Pfade /de/docs/Web/SVG/Tutorial/Paths +/de/docs/Web/SVG/Tutorial/SVG_Schriftarten /de/docs/Web/SVG/Tutorial/SVG_fonts +/de/docs/Web/Security/Public_Key_Pinning /de/docs/Web/HTTP/Public_Key_Pinning +/de/docs/Web/WebAPI /de/docs/conflicting/Web/API +/de/docs/Web/WebAPI/verwenden_von_geolocation /de/docs/Web/API/Geolocation_API /de/docs/Web/WebGL /de/docs/Web/API/WebGL_API -/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen -/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL -/de/docs/Web/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL -/de/docs/Web/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL -/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen -/de/docs/Web/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext -/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren -/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden +/de/docs/Web/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/de/docs/Web/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +/de/docs/Web/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +/de/docs/Web/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/de/docs/Web/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +/de/docs/Web/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +/de/docs/Web/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/de/docs/Web/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/de/docs/Web/Web_Components/Custom_Elements /de/docs/conflicting/Web/Web_Components/Using_custom_elements +/de/docs/Web/XML/XML_Einführung /de/docs/Web/XML/XML_introduction /de/docs/WebGL /de/docs/Web/API/WebGL_API -/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen -/de/docs/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL -/de/docs/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL -/de/docs/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Einführung_in_WebGL -/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen -/de/docs/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext -/de/docs/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren -/de/docs/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden -/de/docs/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler +/de/docs/WebGL/3D-Objekte_mit_WebGL_erstellen /de/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL +/de/docs/WebGL/Animierte_Texturen_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL +/de/docs/WebGL/Beleuchtung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL +/de/docs/WebGL/Einführung_in_WebGL /de/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL +/de/docs/WebGL/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen /de/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL +/de/docs/WebGL/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext /de/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context +/de/docs/WebGL/Objekte_mit_WebGL_animieren /de/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL +/de/docs/WebGL/Texturen_in_WebGL_verwenden /de/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL +/de/docs/WebSockets /de/docs/Web/API/WebSockets_API +/de/docs/WebSockets/Writing_WebSocket_servers /de/docs/Web/API/WebSockets_API/Writing_WebSocket_servers +/de/docs/Web_Development/Mobile /de/docs/Web/Guide/Mobile +/de/docs/Web_Development/Mobile/Responsive_design /de/docs/conflicting/Web/Progressive_web_apps +/de/docs/Webbasierte_protokoll-handler /de/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers +/de/docs/Webentwicklung /de/docs/conflicting/Web/Guide /de/docs/Werkzeuge /de/docs/Tools -/de/docs/XML_Einführung /de/docs/Web/XML/XML_Einführung +/de/docs/XML_Einführung /de/docs/Web/XML/XML_introduction /de/docs/XSLT /de/docs/Web/XSLT -/de/docs/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen +/de/docs/Zugriff_auf_Dateien_von_Webapplikationen /de/docs/Web/API/File/Using_files_from_web_applications /de/docs/en /en-US/ /de/docs/install.rdf /de/docs/Installationsmanifest diff --git a/files/de/_wikihistory.json b/files/de/_wikihistory.json index 66f75b8ac8..4da1fe1867 100644 --- a/files/de/_wikihistory.json +++ b/files/de/_wikihistory.json @@ -1,136 +1,4 @@ { - "Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching)": { - "modified": "2019-03-24T00:04:22.542Z", - "contributors": [ - "wbamberg", - "fscholz", - "-=Renegade=-", - "Doozer" - ] - }, - "CSS3_Columns": { - "modified": "2019-03-24T00:05:49.925Z", - "contributors": [ - "SJW", - "fscholz", - "Mapag" - ] - }, - "DOM": { - "modified": "2019-03-24T00:03:18.662Z", - "contributors": [ - "TheNT87", - "Barfooz", - "ethertank", - "fscholz", - "Crash", - "Takenbot", - "M@d Man" - ] - }, - "DOM/Ueber_das_Document_Object_Model": { - "modified": "2019-12-23T07:48:22.460Z", - "contributors": [ - "Cerberooo", - "StevenS77", - "Barfooz" - ] - }, - "DOM_Inspector": { - "modified": "2020-07-16T22:36:24.131Z", - "contributors": [ - "wbamberg", - "nw520" - ] - }, - "DragDrop": { - "modified": "2019-03-23T23:26:04.264Z", - "contributors": [ - "drewp" - ] - }, - "Erweiterung_erstellen": { - "modified": "2019-03-24T00:04:52.753Z", - "contributors": [ - "tregagnon", - "fscholz", - "SeSchneider", - "Yozh88", - "Jules Papillon", - "Alopix", - "Pl4yer", - "Masterdschecker", - "Michael2402", - "Undertaker", - "Thomas147", - "Felix.Schwarz", - "Verruckt", - "Slosd", - "Philipp", - "Indigo", - "Jonny", - "Takenbot", - "Manuel Strehl", - "Ar-sch.de", - "DDSD", - "Dria" - ] - }, - "Erweiterungen_für_Firefox_3_aktualisieren": { - "modified": "2019-12-13T20:33:28.025Z", - "contributors": [ - "wbamberg", - "fscholz", - "Sheppy", - "Editmonkey", - "Jules Papillon" - ] - }, - "Farbverläufe_in_CSS": { - "modified": "2019-03-23T23:13:15.166Z", - "contributors": [ - "Bennyville", - "wizAmit", - "slayslot", - "Sebastianz", - "floEdelmann" - ] - }, - "Firefox_1.5_für_Entwickler": { - "modified": "2019-03-24T00:04:17.420Z", - "contributors": [ - "wbamberg", - "fscholz", - "Jules Papillon", - "Agoist", - "Umifa", - "Crash" - ] - }, - "Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests": { - "modified": "2019-10-30T20:00:38.264Z", - "contributors": [ - "sklicek" - ] - }, - "Firefox_3.5_für_Entwickler": { - "modified": "2019-03-24T00:04:29.361Z", - "contributors": [ - "wbamberg", - "Timmi", - "fscholz", - "niels" - ] - }, - "Firefox_3_für_Entwickler": { - "modified": "2019-03-24T00:04:33.617Z", - "contributors": [ - "wbamberg", - "fscholz", - "niels", - "Lukas Skywalker" - ] - }, "Games": { "modified": "2019-09-09T15:31:03.156Z", "contributors": [ @@ -219,14 +87,6 @@ "Tyrandus" ] }, - "Glossary/Abstraktion": { - "modified": "2019-03-23T22:15:58.737Z", - "contributors": [ - "Sebastianz", - "ursingold", - "t1m0fej" - ] - }, "Glossary/Accessibility": { "modified": "2019-03-18T21:41:37.798Z", "contributors": [ @@ -239,20 +99,6 @@ "duckymirror" ] }, - "Glossary/Algorithmus": { - "modified": "2019-03-23T22:10:22.994Z", - "contributors": [ - "herbmaier", - "Tyrandus" - ] - }, - "Glossary/Anweisung": { - "modified": "2019-04-20T19:38:11.191Z", - "contributors": [ - "GreenPepper", - "Tyrandus" - ] - }, "Glossary/Apple_Safari": { "modified": "2019-03-23T22:12:52.875Z", "contributors": [ @@ -266,12 +112,6 @@ "Siphalor" ] }, - "Glossary/Asynchron": { - "modified": "2019-06-18T06:50:55.111Z", - "contributors": [ - "dbraun" - ] - }, "Glossary/Attribute": { "modified": "2019-03-23T22:12:44.567Z", "contributors": [ @@ -279,13 +119,6 @@ "Siphalor" ] }, - "Glossary/Bandbreite": { - "modified": "2019-03-23T22:08:37.747Z", - "contributors": [ - "sigoa", - "Rebecca70" - ] - }, "Glossary/Block": { "modified": "2019-03-23T22:10:15.560Z", "contributors": [ @@ -343,12 +176,6 @@ "timvancleef" ] }, - "Glossary/CORS-zugelassener-anfrage-header": { - "modified": "2020-01-30T18:28:06.437Z", - "contributors": [ - "TorbenKoehn" - ] - }, "Glossary/CRLF": { "modified": "2019-07-03T15:43:20.749Z", "contributors": [ @@ -364,12 +191,6 @@ "Siphalor" ] }, - "Glossary/CSS_Praeprozessor": { - "modified": "2019-03-18T21:36:27.239Z", - "contributors": [ - "Sixl-Daniel" - ] - }, "Glossary/Cache": { "modified": "2019-03-18T21:14:43.666Z", "contributors": [ @@ -455,24 +276,12 @@ "PercyGitarrist" ] }, - "Glossary/DTD": { - "modified": "2019-07-04T23:44:01.071Z", - "contributors": [ - "PercyGitarrist" - ] - }, "Glossary/Data_structure": { "modified": "2019-07-16T20:37:24.466Z", "contributors": [ "christianheinrichs" ] }, - "Glossary/Datenkapselung": { - "modified": "2020-09-30T06:05:42.392Z", - "contributors": [ - "Klingohle" - ] - }, "Glossary/Denial_of_Service": { "modified": "2019-01-17T02:56:58.052Z", "contributors": [ @@ -544,12 +353,6 @@ "Klingohle" ] }, - "Glossary/Funktion_erster-Klasse": { - "modified": "2019-03-18T21:30:30.219Z", - "contributors": [ - "king-tom" - ] - }, "Glossary/GPU": { "modified": "2019-01-17T02:50:36.393Z", "contributors": [ @@ -608,13 +411,6 @@ "cob" ] }, - "Glossary/Herstellerpräfix": { - "modified": "2019-03-23T22:29:22.756Z", - "contributors": [ - "Tyrandus", - "1903Daniel" - ] - }, "Glossary/Hoisting": { "modified": "2019-03-18T20:48:10.960Z", "contributors": [ @@ -670,12 +466,6 @@ "PercyGitarrist" ] }, - "Glossary/Informationsarchitektur": { - "modified": "2019-03-18T21:18:25.933Z", - "contributors": [ - "tschach" - ] - }, "Glossary/Internet": { "modified": "2019-03-23T22:09:31.438Z", "contributors": [ @@ -705,24 +495,6 @@ "Siphalor" ] }, - "Glossary/Klasse": { - "modified": "2019-03-18T21:37:57.063Z", - "contributors": [ - "duckymirror" - ] - }, - "Glossary/Konstruktor": { - "modified": "2019-03-23T22:04:35.334Z", - "contributors": [ - "klug_mario" - ] - }, - "Glossary/Leeres_Element": { - "modified": "2019-03-18T21:32:36.396Z", - "contributors": [ - "axelrindle" - ] - }, "Glossary/Local_scope": { "modified": "2020-04-28T14:50:32.479Z", "contributors": [ @@ -792,12 +564,6 @@ "CloudMaker97" ] }, - "Glossary/Objekt": { - "modified": "2019-03-23T22:08:37.828Z", - "contributors": [ - "LazerPhil" - ] - }, "Glossary/Operand": { "modified": "2020-04-28T14:20:36.934Z", "contributors": [ @@ -835,12 +601,6 @@ "tschach" ] }, - "Glossary/Protokoll": { - "modified": "2019-03-23T22:09:31.349Z", - "contributors": [ - "Anonymous" - ] - }, "Glossary/Prototype": { "modified": "2020-07-08T01:49:32.204Z", "contributors": [ @@ -981,12 +741,6 @@ "Shiryk" ] }, - "Glossary/Typ": { - "modified": "2020-04-04T13:54:03.839Z", - "contributors": [ - "axelrindle" - ] - }, "Glossary/Type_Conversion": { "modified": "2020-04-04T13:56:57.290Z", "contributors": [ @@ -1124,13 +878,6 @@ "CloudMaker97" ] }, - "Glossary/einfache_datenelemente": { - "modified": "2019-03-23T22:46:44.221Z", - "contributors": [ - "Siphalor", - "andreas_inkoeln" - ] - }, "Glossary/firewall": { "modified": "2019-07-16T21:05:22.003Z", "contributors": [ @@ -1162,12 +909,6 @@ "Siphalor" ] }, - "Glossary/verbotener_header_name": { - "modified": "2019-03-23T22:03:16.612Z", - "contributors": [ - "timmyRS" - ] - }, "Glossary/webm": { "modified": "2019-03-18T21:18:37.955Z", "contributors": [ @@ -1230,12 +971,6 @@ "hellschu" ] }, - "Learn/CSS/Building_blocks/Werten_Einheiten": { - "modified": "2020-07-16T22:28:56.210Z", - "contributors": [ - "GiovanniHD201E" - ] - }, "Learn/CSS/CSS_layout": { "modified": "2020-08-05T14:18:54.916Z", "contributors": [ @@ -1270,13 +1005,6 @@ "LH-10" ] }, - "Learn/Common_questions/Wie_das_Internet_funktioniert": { - "modified": "2020-07-16T22:35:36.371Z", - "contributors": [ - "frankwinter", - "NetiHeft" - ] - }, "Learn/Getting_started_with_the_web": { "modified": "2020-11-24T12:50:40.168Z", "contributors": [ @@ -1334,24 +1062,6 @@ "d_jan" ] }, - "Learn/Getting_started_with_the_web/JavaScript_basis": { - "modified": "2020-07-16T22:35:08.850Z", - "contributors": [ - "jorgemontoyab", - "urewig", - "loicyondjeu", - "ilonaherr", - "SaschaHeyer", - "fxmt", - "Shidigital", - "hapeit", - "danielsimon1", - "nuracubeTranslations", - "QuaGS", - "monja-schreppel", - "Purple-Vampire" - ] - }, "Learn/Getting_started_with_the_web/Publishing_your_website": { "modified": "2020-07-16T22:34:23.783Z", "contributors": [ @@ -1372,24 +1082,6 @@ "d_jan" ] }, - "Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert": { - "modified": "2020-07-16T22:33:59.338Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/Getting_started_with_the_web/dateien_nutzen": { - "modified": "2020-07-16T22:34:32.214Z", - "contributors": [ - "michaelhochleitner", - "Aryx", - "vosspl", - "Shidigital", - "Bissmarc", - "janjo", - "d_jan" - ] - }, "Learn/HTML": { "modified": "2020-07-16T22:22:15.700Z", "contributors": [ @@ -1401,88 +1093,6 @@ "Trollderim" ] }, - "Learn/HTML/Einführung_in_HTML": { - "modified": "2020-07-16T22:22:45.948Z", - "contributors": [ - "PercyGitarrist", - "mprofitl", - "LeifMensing", - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML": { - "modified": "2020-07-16T22:23:17.212Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Document_and_website_structure": { - "modified": "2020-07-16T22:24:03.053Z", - "contributors": [ - "DiscW0rld", - "fdeberle", - "Shidigital", - "Woehe2010", - "fataly01" - ] - }, - "Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML": { - "modified": "2020-07-16T22:23:30.695Z", - "contributors": [ - "Hofei", - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks": { - "modified": "2020-07-16T22:23:43.017Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML": { - "modified": "2020-07-16T22:24:11.946Z", - "contributors": [ - "LeniTastic", - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung": { - "modified": "2020-07-16T22:23:51.933Z", - "contributors": [ - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen": { - "modified": "2020-11-19T12:58:27.172Z", - "contributors": [ - "fiji-flo", - "Kometheus", - "nitramrelpmur", - "Shidigital" - ] - }, - "Learn/HTML/Einführung_in_HTML/Marking_up_a_letter": { - "modified": "2020-07-16T22:23:11.514Z", - "contributors": [ - "DiscW0rld", - "LeniTastic", - "msifrt" - ] - }, - "Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content": { - "modified": "2020-07-16T22:24:17.990Z", - "contributors": [ - "DiscW0rld" - ] - }, - "Learn/HTML/Forms": { - "modified": "2020-07-16T22:20:54.604Z", - "contributors": [ - "Ryuno-Ki", - "PercyGitarrist", - "F.nn" - ] - }, "Learn/HTML/Multimedia_and_embedding": { "modified": "2020-10-08T13:45:43.288Z", "contributors": [ @@ -1502,12 +1112,6 @@ "PercyGitarrist" ] }, - "Learn/HTML/Tables/Grund_tabelle_HTML": { - "modified": "2020-07-16T22:25:19.143Z", - "contributors": [ - "GiovanniHD201E" - ] - }, "Learn/JavaScript": { "modified": "2020-07-16T22:29:37.369Z", "contributors": [ @@ -1515,19 +1119,6 @@ "DrunkenTaunt" ] }, - "Learn/JavaScript/Bausteine": { - "modified": "2020-07-16T22:31:06.733Z", - "contributors": [ - "Osslack" - ] - }, - "Learn/JavaScript/Bausteine/Ereignisse": { - "modified": "2020-07-16T22:31:36.524Z", - "contributors": [ - "kaip-e", - "GiovanniHD201E" - ] - }, "Learn/JavaScript/First_steps": { "modified": "2020-07-16T22:29:48.847Z", "contributors": [ @@ -1535,13 +1126,6 @@ "Elllenn" ] }, - "Learn/JavaScript/First_steps/Erster_Blick": { - "modified": "2020-07-16T22:30:16.778Z", - "contributors": [ - "GiovanniHD201E", - "Thomas-Zenkel" - ] - }, "Learn/JavaScript/First_steps/Useful_string_methods": { "modified": "2020-07-16T22:30:45.510Z", "contributors": [ @@ -1555,24 +1139,6 @@ "mermolaev" ] }, - "Learn/JavaScript/First_steps/Was_ist_JavaScript": { - "modified": "2020-09-29T09:38:57.543Z", - "contributors": [ - "Devoryo", - "mchoeti", - "GreenPepper", - "hpawe01", - "Bissmarc", - "woiddale", - "JorisGutjahr" - ] - }, - "Learn/JavaScript/First_steps/lustige_geschichten_generator": { - "modified": "2020-07-16T22:31:00.101Z", - "contributors": [ - "Strubinator" - ] - }, "Learn/JavaScript/Objects": { "modified": "2020-07-16T22:31:47.973Z", "contributors": [ @@ -1614,14 +1180,6 @@ "Timbuktu1982" ] }, - "Learn/Mitarbeiten": { - "modified": "2020-07-16T22:33:42.823Z", - "contributors": [ - "SphinxKnight", - "1000eyes", - "der_rofler" - ] - }, "Learn/Server-side": { "modified": "2020-07-16T22:35:55.694Z", "contributors": [ @@ -1629,20 +1187,6 @@ "PercyGitarrist" ] }, - "Learn/Server-side/Erste_Schritte": { - "modified": "2020-07-16T22:36:07.662Z", - "contributors": [ - "LeifMensing", - "Dschubba" - ] - }, - "Learn/Server-side/Erste_Schritte/Introduction": { - "modified": "2020-07-16T22:36:12.624Z", - "contributors": [ - "NetiHeft", - "Dschubba" - ] - }, "Learn/Server-side/Express_Nodejs": { "modified": "2020-07-16T22:37:51.185Z", "contributors": [ @@ -1669,18 +1213,6 @@ "wbamberg" ] }, - "Lokalisierung": { - "modified": "2019-03-24T00:15:25.257Z", - "contributors": [ - "taralushi", - "fscholz", - "WayneSchlegel", - "DirkS", - "maik666", - "René Schwarz", - "Ak120" - ] - }, "MDN": { "modified": "2019-09-10T15:39:15.802Z", "contributors": [ @@ -1694,27 +1226,6 @@ "Sheppy" ] }, - "MDN/Community": { - "modified": "2019-06-15T16:58:37.273Z", - "contributors": [ - "sklicek", - "rs-github", - "wbamberg", - "BavarianMax", - "Jeremie", - "SvenSaarland", - "msebastian100", - "Stefan_hr4u" - ] - }, - "MDN/Community/Bleibe_auf_dem_Laufenden": { - "modified": "2019-03-23T23:27:28.266Z", - "contributors": [ - "wbamberg", - "Sebastianz", - "UweDirk" - ] - }, "MDN/Contribute": { "modified": "2019-03-23T23:20:05.396Z", "contributors": [ @@ -1761,22 +1272,6 @@ "Tutz" ] }, - "MDN/Contribute/Howto/Do_a_technical_review": { - "modified": "2019-01-16T19:26:44.220Z", - "contributors": [ - "wbamberg", - "jordylol2006", - "Sebastianz" - ] - }, - "MDN/Contribute/Howto/Do_an_editorial_review": { - "modified": "2019-01-16T19:26:12.299Z", - "contributors": [ - "wbamberg", - "sigoa", - "Sebastianz" - ] - }, "MDN/Contribute/Howto/Document_a_CSS_property": { "modified": "2020-02-19T18:56:54.852Z", "contributors": [ @@ -1786,34 +1281,6 @@ "teoli" ] }, - "MDN/Contribute/Howto/ERstellung_eines_MDN_Profils": { - "modified": "2019-07-28T03:19:41.741Z", - "contributors": [ - "wbamberg", - "darkfeile", - "lutzip0", - "Dev201", - "jumpball", - "jogi23", - "Clonkh" - ] - }, - "MDN/Contribute/Howto/Schlagwörter_für_JavaScript_Seiten": { - "modified": "2019-01-16T21:20:05.744Z", - "contributors": [ - "wbamberg", - "hictox" - ] - }, - "MDN/Contribute/Howto/Set_the_summary_for_a_page": { - "modified": "2019-01-16T19:16:53.470Z", - "contributors": [ - "wbamberg", - "githubsvc", - "4680", - "maxsu" - ] - }, "MDN/Contribute/Howto/Tag": { "modified": "2019-07-04T23:25:18.289Z", "contributors": [ @@ -1827,13 +1294,6 @@ "clone" ] }, - "MDN/Contribute/zu_tun_im_MDN": { - "modified": "2019-01-16T20:30:11.342Z", - "contributors": [ - "wbamberg", - "dario.bloch" - ] - }, "MDN/Guidelines": { "modified": "2020-09-30T15:28:44.297Z", "contributors": [ @@ -1843,37 +1303,6 @@ "Sheppy" ] }, - "MDN/Guidelines/Style_guide": { - "modified": "2020-09-30T15:28:44.875Z", - "contributors": [ - "chrisdavidmills", - "stephanduesterhoeft", - "jswisher", - "Dschubba", - "wbamberg", - "Jeremie", - "PaddyKfg", - "Montana7755" - ] - }, - "MDN/Kuma": { - "modified": "2020-04-22T10:45:47.041Z", - "contributors": [ - "clemens.klapp", - "SphinxKnight", - "wbamberg", - "JorisGutjahr", - "Jeremie", - "Sheppy" - ] - }, - "MDN/Kuma/Beheben_von_KumaScript_Fehlern": { - "modified": "2019-01-16T21:24:01.701Z", - "contributors": [ - "wbamberg", - "rolandm" - ] - }, "MDN/Structures": { "modified": "2020-09-30T09:04:48.225Z", "contributors": [ @@ -1883,68 +1312,12 @@ "hartmann2012" ] }, - "MDN/Structures/Kompatibilitaets_Tabellen": { - "modified": "2020-10-15T22:06:38.248Z", + "Mozilla": { + "modified": "2019-03-23T23:36:50.960Z", "contributors": [ - "chrisdavidmills", - "thunderhook", - "wbamberg", - "jogemu" - ] - }, - "MDN/nutzer_leitfaden": { - "modified": "2019-03-23T22:50:19.741Z", - "contributors": [ - "wbamberg", - "jezdez", - "LeindK" - ] - }, - "MDN/Über": { - "modified": "2019-09-10T08:51:50.833Z", - "contributors": [ - "SphinxKnight", - "Streamities", - "wbamberg", - "rs-github" - ] - }, - "MDN/Über/Link_zu_MDN": { - "modified": "2019-01-17T03:01:28.772Z", - "contributors": [ - "wbamberg", - "sklicek" - ] - }, - "MDN_at_ten": { - "modified": "2019-03-23T22:49:50.216Z", - "contributors": [ - "1000eyes", - "stephaniehobson", - "Evotopid", - "Sheppy" - ] - }, - "MDN_at_ten/History_of_MDN": { - "modified": "2019-03-23T22:49:53.083Z", - "contributors": [ - "stephaniehobson", - "Sebastianz" - ] - }, - "MDN_at_ten/Zum_MDN_beitragen": { - "modified": "2020-02-19T18:50:24.408Z", - "contributors": [ - "jswisher", - "1000eyes" - ] - }, - "Mozilla": { - "modified": "2019-03-23T23:36:50.960Z", - "contributors": [ - "lucago", - "ethertank", - "ziyunfei" + "lucago", + "ethertank", + "ziyunfei" ] }, "Mozilla/Add-ons": { @@ -1992,14 +1365,6 @@ "andrewtruongmoz" ] }, - "Mozilla/Add-ons/WebExtensions/API/Lesezeich.": { - "modified": "2020-10-15T21:55:55.060Z", - "contributors": [ - "wbamberg", - "nw520", - "matschibatschi" - ] - }, "Mozilla/Add-ons/WebExtensions/API/browserAction": { "modified": "2020-10-15T22:26:32.419Z" }, @@ -2028,44 +1393,12 @@ "Asozialist" ] }, - "Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API": { - "modified": "2019-06-11T16:28:12.442Z", - "contributors": [ - "Patrick5555" - ] - }, - "Mozilla/Add-ons/WebExtensions/Beispiele": { - "modified": "2019-03-18T21:04:08.698Z", - "contributors": [ - "StefanM" - ] - }, "Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs": { "modified": "2020-10-15T20:55:14.782Z", "contributors": [ "frido1973" ] }, - "Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung": { - "modified": "2019-07-04T07:03:49.181Z", - "contributors": [ - "trych", - "SyntaxCacao", - "HillOTech", - "Asozialist", - "twizzz", - "serv-inc", - "Draphar", - "flosommerfeld" - ] - }, - "Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung": { - "modified": "2019-07-04T06:11:16.199Z", - "contributors": [ - "trych", - "Draphar" - ] - }, "Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools": { "modified": "2019-10-28T22:25:20.040Z", "contributors": [ @@ -2130,22 +1463,6 @@ "PowerToaster" ] }, - "Mozilla/Developer_guide/Quelltexte": { - "modified": "2019-03-24T00:04:33.890Z", - "contributors": [ - "chrisdavidmills", - "fscholz", - "Anonymous", - "gamemaster7riesen" - ] - }, - "Mozilla/Developer_guide/firefox_erfolgreich_erstellt": { - "modified": "2019-03-23T22:13:23.971Z", - "contributors": [ - "chrisdavidmills", - "friedger" - ] - }, "Mozilla/Firefox": { "modified": "2020-01-18T12:42:37.514Z", "contributors": [ @@ -2255,21 +1572,6 @@ "Conzz" ] }, - "OpenSearch_Plugin_für_Firefox_erstellen": { - "modified": "2019-03-24T00:04:54.552Z", - "contributors": [ - "fscholz", - "Lexhawkins" - ] - }, - "Plugins/Flash-Aktivierung:_Browser-Vergleich": { - "modified": "2019-03-23T22:03:23.868Z", - "contributors": [ - "Artist-sumo", - "Sheppy", - "HoLuLuLu" - ] - }, "Tools": { "modified": "2020-07-16T22:44:14.027Z", "contributors": [ @@ -2296,28 +1598,6 @@ "AlexPl" ] }, - "Tools/3D_untersuchung": { - "modified": "2020-07-16T22:34:25.058Z", - "contributors": [ - "wbamberg", - "pollti", - "SJW" - ] - }, - "Tools/Add-ons": { - "modified": "2020-07-16T22:36:23.223Z", - "contributors": [ - "wbamberg", - "mfluehr" - ] - }, - "Tools/Barrierefreiheits_inspektor": { - "modified": "2020-07-16T22:36:39.466Z", - "contributors": [ - "hrfischer1983", - "hellschu" - ] - }, "Tools/Browser_Console": { "modified": "2020-07-16T22:35:42.070Z", "contributors": [ @@ -2325,15 +1605,6 @@ "atze79" ] }, - "Tools/Browser_Werkzeuge": { - "modified": "2020-07-16T22:35:55.309Z", - "contributors": [ - "wbamberg", - "res60", - "Dev_Falko", - "Microgamer" - ] - }, "Tools/Debugger": { "modified": "2020-07-16T22:35:04.001Z", "contributors": [ @@ -2416,28 +1687,6 @@ "sidgan" ] }, - "Tools/Page_Inspector/How_to/Event_Listener_untersuchen": { - "modified": "2020-07-16T22:34:35.556Z", - "contributors": [ - "wbamberg", - "Sebastianz" - ] - }, - "Tools/Page_Inspector/How_to/Raster_Layout_untersuchen": { - "modified": "2020-07-16T22:34:46.944Z", - "contributors": [ - "oolong32", - "wbamberg", - "Micky261" - ] - }, - "Tools/Page_Inspector/How_to/Schriftarten_Bearbeitung": { - "modified": "2020-08-13T20:23:50.743Z", - "contributors": [ - "cama240601", - "GiovanniHD201E" - ] - }, "Tools/Paint_Flashing_Tool": { "modified": "2020-07-16T22:35:43.400Z", "contributors": [ @@ -2484,31 +1733,6 @@ "popeye007" ] }, - "Tools/Seiten_Inspektor": { - "modified": "2020-07-16T22:34:26.882Z", - "contributors": [ - "wbamberg", - "maybe", - "mozjan", - "One", - "MikeWalde", - "libelle17" - ] - }, - "Tools/Seiten_Inspektor/Tastenkombinationen": { - "modified": "2020-07-16T22:34:50.445Z", - "contributors": [ - "GiovanniHD201E" - ] - }, - "Tools/Shader-Editor": { - "modified": "2020-07-16T22:35:54.224Z", - "contributors": [ - "wbamberg", - "olhaar", - "cgtom" - ] - }, "Tools/Storage_Inspector": { "modified": "2020-07-16T22:36:09.538Z", "contributors": [ @@ -2554,66 +1778,12 @@ "Helmcke42" ] }, - "Tools/WebIDE_clone": { - "modified": "2019-03-23T23:03:21.499Z", - "contributors": [ - "wbamberg", - "VJSchneid", - "maybe", - "AARADEANCA" - ] - }, - "Tools/Web_Konsole": { - "modified": "2020-07-16T22:34:04.628Z", - "contributors": [ - "Loilo", - "SphinxKnight", - "talikanews", - "wbamberg", - "realsplatscream", - "kleinegnomfee", - "maybe", - "PsychoMg", - "mozjan" - ] - }, - "Tools/Web_Konsole/Hilfe": { - "modified": "2020-07-16T22:34:11.469Z", - "contributors": [ - "wbamberg", - "AlexFunk", - "mherczegh" - ] - }, "Tools/about:debugging": { "modified": "2020-08-16T17:45:15.524Z", "contributors": [ "papacemal" ] }, - "Tools/bildschirmgroessen-testen": { - "modified": "2020-07-16T22:35:21.080Z", - "contributors": [ - "wbamberg", - "mozjan" - ] - }, - "Tools/netzwerkanalyse": { - "modified": "2020-07-16T22:35:29.556Z", - "contributors": [ - "wbamberg", - "ThomasLendo" - ] - }, - "Updating_web_applications_for_Firefox_3": { - "modified": "2019-03-24T00:04:30.175Z", - "contributors": [ - "wbamberg", - "Sheppy", - "fscholz", - "niels" - ] - }, "Web": { "modified": "2019-09-19T09:01:12.041Z", "contributors": [ @@ -2665,12 +1835,6 @@ "mwalter" ] }, - "Web/API/AudioContext/decodeAudioData": { - "modified": "2019-03-23T22:38:20.001Z", - "contributors": [ - "Thalhammer" - ] - }, "Web/API/AudioDestinationNode": { "modified": "2019-03-23T22:30:19.717Z", "contributors": [ @@ -3419,23 +2583,6 @@ "fscholz" ] }, - "Web/API/File/Typ": { - "modified": "2020-10-15T22:20:09.678Z", - "contributors": [ - "sklicek" - ] - }, - "Web/API/File/Zugriff_auf_Dateien_von_Webapplikationen": { - "modified": "2019-03-18T20:49:17.436Z", - "contributors": [ - "Holger.Persch", - "MatthiasApsel", - "gunnarbittersmann", - "chrisdavidmills", - "icy", - "matschu" - ] - }, "Web/API/File/fileName": { "modified": "2019-03-23T23:33:53.570Z", "contributors": [ @@ -3701,32 +2848,12 @@ "grubec" ] }, - "Web/API/IndexedDB_API/Grundkonzepte_hinter_IndexedDB": { - "modified": "2020-01-13T04:47:55.526Z", + "Web/API/KeyboardEvent": { + "modified": "2019-03-18T21:09:07.273Z", "contributors": [ - "chrisdavidmills", - "gmagholder", - "Julini" - ] - }, - "Web/API/IndexedDB_API/IndexedDB_verwenden": { - "modified": "2020-01-13T04:47:56.201Z", - "contributors": [ - "chrisdavidmills", - "p.root", - "mdieblich", - "floheller", - "HendrikRunte", - "Nys", - "Julini" - ] - }, - "Web/API/KeyboardEvent": { - "modified": "2019-03-18T21:09:07.273Z", - "contributors": [ - "fscholz", - "wbamberg", - "th1nk3th" + "fscholz", + "wbamberg", + "th1nk3th" ] }, "Web/API/KeyboardEvent/altKey": { @@ -3787,13 +2914,6 @@ "chrisdavidmills" ] }, - "Web/API/Navigator/registerProtocolHandler/Webbasierte_protokoll-handler": { - "modified": "2019-03-23T22:33:54.067Z", - "contributors": [ - "chrisdavidmills", - "Faibk" - ] - }, "Web/API/Navigator/sendBeacon": { "modified": "2019-03-23T22:27:50.837Z", "contributors": [ @@ -3878,12 +2998,6 @@ "dekatko" ] }, - "Web/API/Node/innerText": { - "modified": "2019-03-23T22:05:48.154Z", - "contributors": [ - "dekatko" - ] - }, "Web/API/Node/lastChild": { "modified": "2019-03-23T23:38:33.584Z", "contributors": [ @@ -4203,15 +3317,6 @@ "Keviddle" ] }, - "Web/API/Vollbild_API": { - "modified": "2019-07-07T13:00:37.918Z", - "contributors": [ - "wbamberg", - "lazercaveman", - "Johann150", - "axelrindle" - ] - }, "Web/API/WebGLActiveInfo": { "modified": "2019-03-23T22:35:02.340Z", "contributors": [ @@ -4263,72 +3368,6 @@ "fscholz" ] }, - "Web/API/WebGL_API/Tutorial/3D-Objekte_mit_WebGL_erstellen": { - "modified": "2019-03-24T00:04:47.020Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Animierte_Texturen_in_WebGL": { - "modified": "2019-03-24T00:04:47.741Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Beleuchtung_in_WebGL": { - "modified": "2019-03-24T00:04:49.766Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Einführung_in_WebGL": { - "modified": "2019-03-24T00:05:30.371Z", - "contributors": [ - "noxafy", - "Oliver_Schafeld", - "H3ndr1k", - "xhallix", - "manni66", - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Farben_mittels_Shader_in_einen_WebGL-Kontext_hinzufügen": { - "modified": "2019-03-24T00:09:11.465Z", - "contributors": [ - "fscholz", - "teoli", - "WNC7" - ] - }, - "Web/API/WebGL_API/Tutorial/Hinzufügen_von_2D_Inhalten_in_einen_WebGL-Kontext": { - "modified": "2019-03-18T20:49:18.784Z", - "contributors": [ - "jsinge", - "noxafy", - "fscholz", - "teoli", - "TimN", - "WNC7" - ] - }, - "Web/API/WebGL_API/Tutorial/Objekte_mit_WebGL_animieren": { - "modified": "2019-03-18T21:15:16.400Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, - "Web/API/WebGL_API/Tutorial/Texturen_in_WebGL_verwenden": { - "modified": "2019-03-24T00:04:48.015Z", - "contributors": [ - "fscholz", - "teoli" - ] - }, "Web/API/WebSocket": { "modified": "2019-10-02T19:29:23.339Z", "contributors": [ @@ -4580,18 +3619,6 @@ "Dargmuesli" ] }, - "Web/API/WindowBase64": { - "modified": "2019-03-23T22:50:32.909Z", - "contributors": [ - "teoli" - ] - }, - "Web/API/WindowBase64/btoa": { - "modified": "2019-03-23T22:50:32.544Z", - "contributors": [ - "cami" - ] - }, "Web/API/WindowEventHandlers": { "modified": "2019-03-23T22:50:03.877Z", "contributors": [ @@ -4618,22 +3645,6 @@ "Oliver_Schafeld" ] }, - "Web/API/WindowTimers": { - "modified": "2019-03-23T23:01:42.969Z", - "contributors": [ - "teoli" - ] - }, - "Web/API/WindowTimers/setTimeout": { - "modified": "2019-03-23T23:36:28.621Z", - "contributors": [ - "mdnde", - "Eschon", - "fscholz", - "c0ffm3k4r", - "wartab" - ] - }, "Web/API/Worker": { "modified": "2019-03-18T21:45:39.485Z", "contributors": [ @@ -4682,62 +3693,6 @@ "chrisdavidmills" ] }, - "Web/Barrierefreiheit": { - "modified": "2019-09-09T14:09:32.470Z", - "contributors": [ - "SphinxKnight", - "alippold", - "teoli", - "fscholz", - "Mgalpha" - ] - }, - "Web/Barrierefreiheit/ARIA": { - "modified": "2019-03-23T23:21:04.985Z", - "contributors": [ - "a.lippold", - "marc-se", - "iMeta", - "eminor", - "teoli" - ] - }, - "Web/Barrierefreiheit/ARIA/ARIA_Live_Regionen": { - "modified": "2019-03-23T23:15:24.210Z", - "contributors": [ - "teoli", - "eminor" - ] - }, - "Web/Barrierefreiheit/ARIA/ARIA_Techniken": { - "modified": "2019-03-18T21:43:56.504Z", - "contributors": [ - "juliankern" - ] - }, - "Web/Barrierefreiheit/An_overview_of_accessible_web_applications_and_widgets": { - "modified": "2019-03-23T23:17:39.742Z", - "contributors": [ - "juliankern", - "christophfink", - "teoli", - "eminor" - ] - }, - "Web/Barrierefreiheit/Tastaturgesteuerte_JavaScript_Komponenten": { - "modified": "2019-03-23T23:11:54.393Z", - "contributors": [ - "eminor" - ] - }, - "Web/Barrierefreiheit/Webentwicklung": { - "modified": "2019-03-18T20:35:27.144Z", - "contributors": [ - "chrisdavidmills", - "teoli", - "eminor" - ] - }, "Web/CSS": { "modified": "2020-12-03T15:50:42.872Z", "contributors": [ @@ -4756,37 +3711,6 @@ "Yor.feix" ] }, - "Web/CSS/-moz-box-flex": { - "modified": "2020-10-15T21:40:01.205Z", - "contributors": [ - "chrisdavidmills", - "SJW", - "teoli", - "crasher666", - "Sebastianz" - ] - }, - "Web/CSS/-moz-box-ordinal-group": { - "modified": "2019-03-23T22:45:29.807Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/-moz-box-pack": { - "modified": "2020-10-15T21:39:56.493Z", - "contributors": [ - "SJW", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/-moz-cell": { - "modified": "2019-03-23T23:11:42.748Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, "Web/CSS/-moz-float-edge": { "modified": "2019-03-23T22:44:51.739Z", "contributors": [ @@ -4875,24 +3799,6 @@ "Michael2402" ] }, - "Web/CSS/-moz-user-modify": { - "modified": "2019-03-24T00:04:27.330Z", - "contributors": [ - "teoli", - "Sebastianz", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/-moz-user-select": { - "modified": "2019-03-24T00:03:51.678Z", - "contributors": [ - "fscholz", - "SJW", - "Michael2402" - ] - }, "Web/CSS/-webkit-box-reflect": { "modified": "2019-03-23T22:45:19.920Z", "contributors": [ @@ -4900,12 +3806,6 @@ "Sebastianz" ] }, - "Web/CSS/-webkit-mask-origin": { - "modified": "2019-03-23T22:44:52.161Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/-webkit-mask-position-x": { "modified": "2019-03-18T21:41:43.515Z", "contributors": [ @@ -4920,12 +3820,6 @@ "felixhaeberle" ] }, - "Web/CSS/-webkit-mask-repeat": { - "modified": "2019-03-23T22:45:10.485Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/-webkit-mask-repeat-x": { "modified": "2019-03-18T21:41:42.607Z", "contributors": [ @@ -5080,13 +3974,6 @@ "Sebastianz" ] }, - "Web/CSS/:-moz-placeholder": { - "modified": "2019-03-23T23:11:34.619Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, "Web/CSS/:-moz-submit-invalid": { "modified": "2020-10-15T21:39:39.769Z", "contributors": [ @@ -5100,13 +3987,6 @@ "Sebastianz" ] }, - "Web/CSS/:-moz-ui-invalid": { - "modified": "2019-03-23T22:42:35.620Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, "Web/CSS/:-moz-ui-valid": { "modified": "2019-03-23T22:42:34.212Z", "contributors": [ @@ -5128,13 +4008,6 @@ "Sebastianz" ] }, - "Web/CSS/:-webkit-autofill": { - "modified": "2019-03-23T22:43:43.075Z", - "contributors": [ - "teoli", - "Sebastianz" - ] - }, "Web/CSS/::-moz-page": { "modified": "2019-03-23T22:44:43.530Z", "contributors": [ @@ -5149,14 +4022,6 @@ "Sebastianz" ] }, - "Web/CSS/::-moz-placeholder": { - "modified": "2019-03-23T23:08:23.797Z", - "contributors": [ - "teoli", - "Sebastianz", - "icy" - ] - }, "Web/CSS/::-moz-progress-bar": { "modified": "2019-03-23T22:44:41.295Z", "contributors": [ @@ -5544,46 +4409,16 @@ "holgerjakobs" ] }, - "Web/CSS/Alias": { - "modified": "2019-03-23T22:43:38.581Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/Alternative_style_sheets": { "modified": "2019-03-23T22:43:32.591Z", "contributors": [ "Sebastianz" ] }, - "Web/CSS/Angrenzende_Geschwisterselektoren": { - "modified": "2020-10-15T21:39:56.944Z", - "contributors": [ - "ExE-Boss", - "Sebastianz" - ] - }, - "Web/CSS/At-rule": { - "modified": "2019-03-23T22:44:51.883Z", - "contributors": [ - "Claas", - "Sebastianz" - ] - }, - "Web/CSS/Attributselektoren": { - "modified": "2020-10-15T21:25:18.388Z", - "contributors": [ - "SJW", - "Sebastianz", - "hansspiess", - "fscholz", - "iGadget", - "J5lx" - ] - }, - "Web/CSS/Aural": { - "modified": "2019-03-23T22:45:45.488Z", + "Web/CSS/At-rule": { + "modified": "2019-03-23T22:44:51.883Z", "contributors": [ + "Claas", "Sebastianz" ] }, @@ -5643,27 +4478,6 @@ "teoli" ] }, - "Web/CSS/CSS_Animations/CSS_Animationen_nutzen": { - "modified": "2020-04-22T06:24:42.427Z", - "contributors": [ - "Ryuno-Ki", - "hamvocke", - "hudri", - "JorisGutjahr", - "awaigand", - "Honig", - "connexo", - "SphinxKnight", - "teoli", - "Simu" - ] - }, - "Web/CSS/CSS_Background_and_Borders": { - "modified": "2019-03-23T22:44:11.176Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { "modified": "2019-03-18T21:15:52.768Z", "contributors": [ @@ -5676,51 +4490,12 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Background_and_Borders/Mehrere_Hintergründe_in_CSS_verwenden": { - "modified": "2019-03-23T23:02:41.693Z", - "contributors": [ - "terwortH", - "benmann", - "teoli", - "Sebastianz", - "srhjg" - ] - }, "Web/CSS/CSS_Basic_User_Interface": { "modified": "2019-03-18T21:18:47.038Z", "contributors": [ "SphinxKnight" ] }, - "Web/CSS/CSS_Boxmodell": { - "modified": "2019-03-23T22:43:35.662Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Boxmodell/Box-shadow_generator": { - "modified": "2019-03-18T20:43:44.623Z", - "contributors": [ - "BychekRU", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Boxmodell/Einführung_in_das_CSS_Boxmodell": { - "modified": "2019-03-24T00:03:52.006Z", - "contributors": [ - "Sebastianz", - "fscholz", - "SJW", - "Michael2402" - ] - }, - "Web/CSS/CSS_Boxmodell/Zusammenfallen_von_Außenabständen_meistern": { - "modified": "2019-03-23T22:41:18.965Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/CSS_Charsets": { "modified": "2020-10-15T21:40:18.836Z", "contributors": [ @@ -5728,19 +4503,6 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Colors": { - "modified": "2019-03-23T22:45:11.820Z", - "contributors": [ - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Colors/farbauswahl_werkzeug": { - "modified": "2019-03-23T22:45:05.902Z", - "contributors": [ - "22samuelk" - ] - }, "Web/CSS/CSS_Columns": { "modified": "2019-07-23T07:54:16.299Z", "contributors": [ @@ -5748,12 +4510,6 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Compositing_and_Blending": { - "modified": "2019-03-23T22:41:20.151Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/CSS_Conditional_Rules": { "modified": "2019-03-23T22:41:19.119Z", "contributors": [ @@ -5778,33 +4534,6 @@ "Gerak842" ] }, - "Web/CSS/CSS_Flexible_Box_Layout/Flex_Elemente_Sortieren": { - "modified": "2020-10-26T12:12:41.192Z", - "contributors": [ - "Raqhael" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Grundlegende_Konzepte_der_Flexbox": { - "modified": "2019-03-18T21:33:01.162Z", - "contributors": [ - "prproksch", - "td8" - ] - }, - "Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes": { - "modified": "2019-03-18T20:58:13.468Z", - "contributors": [ - "KadirTopal", - "wiegels", - "AccNeeder", - "rroehrig", - "thorsten.rinne", - "fscholz", - "elker", - "thandwerker", - "Honig" - ] - }, "Web/CSS/CSS_Fonts": { "modified": "2019-03-23T22:42:29.712Z", "contributors": [ @@ -5852,38 +4581,12 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Lists_and_Counters/CSS_Zähler_verwenden": { - "modified": "2019-03-23T22:41:18.157Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/CSS_Lists_and_Counters/Konsistente_Listeneinrückung": { - "modified": "2019-03-23T22:42:20.521Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/CSS_Logical_Properties": { "modified": "2019-03-23T22:42:21.102Z", "contributors": [ "Sebastianz" ] }, - "Web/CSS/CSS_Masken": { - "modified": "2020-10-15T21:41:26.449Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Namensräume": { - "modified": "2020-10-15T21:41:25.833Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, "Web/CSS/CSS_Positioning": { "modified": "2020-11-24T17:04:06.334Z", "contributors": [ @@ -5939,23 +4642,6 @@ "Johuspect" ] }, - "Web/CSS/CSS_Referenz": { - "modified": "2019-03-24T00:14:12.141Z", - "contributors": [ - "SJW", - "plathub", - "Claas", - "condottiero1985", - "Sebastianz", - "fscholz", - "tregagnon", - "Jürgen Jeka", - "The Witcher", - "Michael2402", - "Jech", - "Nathymig" - ] - }, "Web/CSS/CSS_Ruby": { "modified": "2019-03-23T22:43:34.576Z", "contributors": [ @@ -5988,13 +4674,6 @@ "Sebastianz" ] }, - "Web/CSS/CSS_Textdekoration": { - "modified": "2019-07-23T07:57:58.435Z", - "contributors": [ - "SphinxKnight", - "Sebastianz" - ] - }, "Web/CSS/CSS_Transforms": { "modified": "2019-03-23T22:43:34.303Z", "contributors": [ @@ -6003,34 +4682,12 @@ "teoli" ] }, - "Web/CSS/CSS_Transforms/CSS_Transformationen_verwenden": { - "modified": "2020-12-14T10:35:58.609Z", - "contributors": [ - "Johuspect", - "Sebastianz" - ] - }, "Web/CSS/CSS_Transitions": { "modified": "2019-03-23T22:43:32.259Z", "contributors": [ "Sebastianz" ] }, - "Web/CSS/CSS_Typen": { - "modified": "2020-04-21T12:32:32.615Z", - "contributors": [ - "kleinesfilmroellchen", - "Claas" - ] - }, - "Web/CSS/CSS_User_Interface": { - "modified": "2019-03-23T22:43:34.455Z", - "contributors": [ - "SphinxKnight", - "ExE-Boss", - "Sebastianz" - ] - }, "Web/CSS/CSS_Values_and_Units": { "modified": "2020-12-11T17:02:10.559Z", "contributors": [ @@ -6049,58 +4706,6 @@ "Johuspect" ] }, - "Web/CSS/Farben": { - "modified": "2020-10-15T21:14:08.521Z", - "contributors": [ - "Borgitowner", - "SJW", - "Sebastianz", - "Simplexible", - "fscholz", - "Jürgen Jeka", - "Michael2402" - ] - }, - "Web/CSS/ID-Selektoren": { - "modified": "2020-10-15T21:41:21.317Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Index": { - "modified": "2019-01-16T19:56:04.663Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Initialwert": { - "modified": "2019-03-23T22:18:48.927Z", - "contributors": [ - "Sebastianz" - ] - }, - "Web/CSS/Kindselektoren": { - "modified": "2020-10-15T21:41:20.031Z", - "contributors": [ - "SJW", - "iCON", - "Sebastianz" - ] - }, - "Web/CSS/Klassenselektoren": { - "modified": "2020-10-15T21:41:19.898Z", - "contributors": [ - "SJW", - "Sebastianz" - ] - }, - "Web/CSS/Kurzformat_Eigenschaft": { - "modified": "2020-11-22T12:51:55.372Z", - "contributors": [ - "Johuspect" - ] - }, "Web/CSS/Layout_mode": { "modified": "2019-03-23T22:43:30.465Z", "contributors": [ @@ -6148,12 +4753,6 @@ "teoli" ] }, - "Web/CSS/Motion_Path": { - "modified": "2019-03-23T22:43:35.895Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/Mozilla_Extensions": { "modified": "2019-03-24T00:14:14.332Z", "contributors": [ @@ -6174,18 +4773,6 @@ "Sebastianz" ] }, - "Web/CSS/Property_Template": { - "modified": "2019-01-16T14:33:16.131Z", - "contributors": [ - "wbamberg", - "SphinxKnight", - "Sebastianz", - "fscholz", - "ethertank", - "The Witcher", - "Michael2402" - ] - }, "Web/CSS/Pseudo-classes": { "modified": "2019-03-23T23:23:46.291Z", "contributors": [ @@ -6212,12 +4799,6 @@ "The Witcher" ] }, - "Web/CSS/Spezifität": { - "modified": "2019-03-23T23:11:49.533Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/Tools": { "modified": "2019-03-23T22:43:38.676Z", "contributors": [ @@ -6266,12 +4847,6 @@ "Sebastianz" ] }, - "Web/CSS/Vererbung": { - "modified": "2019-03-23T23:13:09.412Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/Visual_formatting_model": { "modified": "2020-12-14T11:39:39.796Z", "contributors": [ @@ -6286,17 +4861,8 @@ "SJW" ] }, - "Web/CSS/Wertdefinitionssyntax": { - "modified": "2019-03-23T23:11:56.504Z", - "contributors": [ - "Sebastianz", - "Prinz_Rana", - "Krenair", - "prayash" - ] - }, - "Web/CSS/align-content": { - "modified": "2020-10-15T21:29:16.776Z", + "Web/CSS/align-content": { + "modified": "2020-10-15T21:29:16.776Z", "contributors": [ "SJW", "fscholz", @@ -6442,12 +5008,6 @@ "screeny05" ] }, - "Web/CSS/auto": { - "modified": "2019-03-23T23:23:49.598Z", - "contributors": [ - "SJW" - ] - }, "Web/CSS/backdrop-filter": { "modified": "2020-10-15T21:39:39.277Z", "contributors": [ @@ -6574,12 +5134,6 @@ "Sebastianz" ] }, - "Web/CSS/berechneter_Wert": { - "modified": "2019-03-23T23:13:10.466Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/border": { "modified": "2020-10-15T21:12:38.393Z", "contributors": [ @@ -7145,12 +5699,6 @@ "Michael2402" ] }, - "Web/CSS/ersetztes_Element": { - "modified": "2019-03-23T22:00:32.824Z", - "contributors": [ - "Sebastianz" - ] - }, "Web/CSS/filter": { "modified": "2020-10-15T21:28:35.076Z", "contributors": [ @@ -7294,13 +5842,6 @@ "ksm2" ] }, - "Web/CSS/grid-gap": { - "modified": "2020-10-15T22:00:43.740Z", - "contributors": [ - "AlexWayhill", - "Craeckerffm" - ] - }, "Web/CSS/grid-template-areas": { "modified": "2020-10-15T22:02:47.559Z", "contributors": [ @@ -7581,19 +6122,6 @@ "MaxKoehler" ] }, - "Web/CSS/none": { - "modified": "2019-03-23T23:23:49.504Z", - "contributors": [ - "SJW" - ] - }, - "Web/CSS/normal": { - "modified": "2019-03-23T23:23:47.885Z", - "contributors": [ - "dio", - "SJW" - ] - }, "Web/CSS/number": { "modified": "2020-10-15T21:25:33.936Z", "contributors": [ @@ -7886,13 +6414,6 @@ "Johuspect" ] }, - "Web/CSS/tatsächlicher_Wert": { - "modified": "2019-03-23T22:43:32.481Z", - "contributors": [ - "schlagi123", - "Sebastianz" - ] - }, "Web/CSS/text-align": { "modified": "2020-12-04T16:04:32.676Z", "contributors": [ @@ -8110,12 +6631,6 @@ "Sebastianz" ] }, - "Web/CSS/url": { - "modified": "2020-10-15T22:01:29.787Z", - "contributors": [ - "valentinprotiuc" - ] - }, "Web/CSS/vertical-align": { "modified": "2020-12-14T03:38:21.570Z", "contributors": [ @@ -8191,18 +6706,6 @@ "Sebastianz" ] }, - "Web/CSS/word-wrap": { - "modified": "2020-10-15T21:38:14.535Z", - "contributors": [ - "SJW", - "ksuess", - "screeny05", - "Clubfan22", - "fscholz", - "Sebastianz", - "spiegelp" - ] - }, "Web/CSS/z-index": { "modified": "2020-12-11T11:04:07.765Z", "contributors": [ @@ -8233,41 +6736,6 @@ "teoli" ] }, - "Web/Events/DOMContentLoaded": { - "modified": "2019-04-30T14:16:07.184Z", - "contributors": [ - "wbamberg", - "timvancleef", - "forrestkirby", - "fscholz", - "Sewi", - "horlabs" - ] - }, - "Web/Events/change": { - "modified": "2019-03-23T23:08:15.170Z", - "contributors": [ - "fscholz", - "spiegelp" - ] - }, - "Web/Events/load": { - "modified": "2019-09-11T09:06:16.530Z", - "contributors": [ - "wbamberg", - "fscholz", - "LeoDecking" - ] - }, - "Web/Events/readystatechange": { - "modified": "2019-03-23T22:13:59.735Z", - "contributors": [ - "fscholz", - "mdnde", - "cussack", - "Lepstr" - ] - }, "Web/Guide": { "modified": "2019-03-23T23:28:10.493Z", "contributors": [ @@ -8288,380 +6756,157 @@ "M@d Man" ] }, - "Web/Guide/AJAX/Erste_Schritte": { - "modified": "2020-08-11T10:37:53.338Z", + "Web/Guide/Events": { + "modified": "2019-03-18T21:10:49.464Z", "contributors": [ - "merlincom" + "stef4412", + "gportioli" ] }, - "Web/Guide/CSS/Getting_started": { - "modified": "2019-03-24T00:05:49.642Z", + "Web/Guide/Events/Creating_and_triggering_events": { + "modified": "2019-03-18T20:36:47.550Z", "contributors": [ - "teoli", - "fscholz", - "DavidWalsh" + "td8" ] }, - "Web/Guide/CSS/Getting_started/Farbe": { - "modified": "2019-03-23T23:08:03.393Z", + "Web/Guide/Graphics": { + "modified": "2019-03-23T23:05:58.536Z", "contributors": [ - "spiegelp", - "thkoch" + "mdschweda", + "Aloso", + "Cginybetty" ] }, - "Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung": { - "modified": "2019-03-23T22:49:16.030Z", + "Web/HTML": { + "modified": "2019-09-10T15:19:11.194Z", "contributors": [ - "spiegelp" + "SphinxKnight", + "NoldoArnion", + "Darkterror45", + "sigoa", + "lumberplumber", + "Draussenduscher", + "VJSchneid", + "skl", + "alippold", + "fscholz", + "kklein", + "LexAndreessen", + "Henry-usa", + "Timmi" ] }, - "Web/Guide/CSS/Getting_started/Lesbares_CSS": { - "modified": "2019-03-23T22:41:33.439Z", + "Web/HTML/Applying_color": { + "modified": "2019-03-18T21:41:16.488Z", "contributors": [ - "spiegelp" + "DasRudelndeRudel", + "fhwfzfge" ] }, - "Web/Guide/CSS/Getting_started/Selektoren": { - "modified": "2019-03-23T23:11:23.467Z", + "Web/HTML/Attributes": { + "modified": "2020-08-17T16:24:34.561Z", "contributors": [ - "woiddale", - "spiegelp", - "hpkainz" + "Gitti039", + "steemit-halloworld", + "lkreimann", + "schlagi123", + "LazerPhil", + "Anonymous", + "StevenS77" ] }, - "Web/Guide/CSS/Getting_started/Textstyles": { - "modified": "2019-03-23T22:49:16.242Z", + "Web/HTML/Element": { + "modified": "2020-01-27T05:32:14.694Z", "contributors": [ - "spiegelp" + "lucas-walter", + "PascalKlassen", + "SJW", + "schlagi123", + "denis.zygann@gmail.com", + "teoli", + "ethertank", + "adrianfischer", + "fscholz", + "Crash" ] }, - "Web/Guide/CSS/Getting_started/Was_ist_CSS": { - "modified": "2020-05-05T12:04:06.710Z", + "Web/HTML/Element/Frame": { + "modified": "2020-10-15T22:10:35.778Z", "contributors": [ - "Helge-HH", - "fhwfzfge", - "msc1979", - "fscholz", - "Palmstroem", - "barning" + "thunderhook" ] }, - "Web/Guide/CSS/Getting_started/Why_use_CSS": { - "modified": "2019-03-23T22:57:29.159Z", + "Web/HTML/Element/Input": { + "modified": "2020-03-21T07:28:26.249Z", "contributors": [ - "fhwfzfge", - "Palmstroem" + "Ryuno-Ki", + "evayde", + "accessabilly", + "Skasi", + "JorisGutjahr", + "chrillek", + "yannick_versley", + "Sebastianz", + "dio", + "teoli", + "thaddeus" ] }, - "Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert": { - "modified": "2019-03-23T22:57:04.436Z", + "Web/HTML/Element/Input/button": { + "modified": "2020-01-04T13:22:17.254Z", "contributors": [ - "Palmstroem" + "use-x", + "Breaker222", + "Sebastianz", + "Sweapz" ] }, - "Web/Guide/CSS/Scaling_background_images": { - "modified": "2019-03-23T23:06:19.663Z", + "Web/HTML/Element/Input/checkbox": { + "modified": "2020-10-15T22:29:32.835Z", "contributors": [ - "sos4nt", - "mrstork", - "webwirbel" + "clemens.klapp" ] }, - "Web/Guide/DOM": { - "modified": "2019-03-23T23:28:11.671Z", + "Web/HTML/Element/Shadow": { + "modified": "2019-04-09T10:21:03.813Z", "contributors": [ - "Sheppy" + "nnscr", + "AndreasSchantl" ] }, - "Web/Guide/DOM/Manipulating_the_browser_history": { - "modified": "2019-03-23T23:28:10.854Z", + "Web/HTML/Element/a": { + "modified": "2019-03-23T23:13:37.609Z", "contributors": [ - "wanst", - "NiklasMerz", - "daniel-evers", - "Adowrath", - "serv-inc", - "Oliver_Schafeld", - "BugHunter2k", - "christian314159", - "darksider3" + "dio", + "dhcgn", + "Abro", + "omicron81", + "Type-Style", + "Sebastianz", + "skl", + "Lucky42" ] }, - "Web/Guide/Events": { - "modified": "2019-03-18T21:10:49.464Z", + "Web/HTML/Element/abbr": { + "modified": "2020-10-15T21:28:46.526Z", "contributors": [ - "stef4412", - "gportioli" + "SebinNyshkim", + "Sebastianz", + "fscholz" ] }, - "Web/Guide/Events/Creating_and_triggering_events": { - "modified": "2019-03-18T20:36:47.550Z", + "Web/HTML/Element/acronym": { + "modified": "2020-10-15T21:28:43.905Z", "contributors": [ - "td8" + "SebinNyshkim", + "kklein" ] }, - "Web/Guide/Graphics": { - "modified": "2019-03-23T23:05:58.536Z", + "Web/HTML/Element/address": { + "modified": "2019-03-23T23:13:25.598Z", "contributors": [ - "mdschweda", - "Aloso", - "Cginybetty" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial": { - "modified": "2020-07-31T10:20:16.447Z", - "contributors": [ - "mgrubinger", - "sigoa", - "surferboy250", - "GeorgKern", - "Leun4m", - "medium-endian", - "manni66", - "pixunil" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Advanced_animations": { - "modified": "2019-03-23T22:48:52.383Z", - "contributors": [ - "teoli", - "jumpball" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors": { - "modified": "2019-10-10T16:33:46.525Z", - "contributors": [ - "Sebastianz", - "GeorgKern" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Basic_animations": { - "modified": "2019-03-18T21:45:29.279Z", - "contributors": [ - "RmnWtnkmp" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Bilder": { - "modified": "2019-03-23T23:12:04.746Z", - "contributors": [ - "sombrastudios", - "teoli", - "Leun4m", - "thedaft", - "pixunil" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren": { - "modified": "2019-03-18T21:47:09.896Z", - "contributors": [ - "SimonBuxx" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Drawing_text": { - "modified": "2019-03-18T21:38:17.565Z", - "contributors": [ - "Johann150" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen": { - "modified": "2019-10-06T12:20:20.273Z", - "contributors": [ - "I_I", - "oezpeda", - "Siphalor", - "teoli", - "Leun4m", - "thedaft", - "pixunil" - ] - }, - "Web/Guide/HTML/Canvas_Tutorial/Grundlagen": { - "modified": "2019-10-06T12:11:53.548Z", - "contributors": [ - "I_I", - "fheckl", - "FelixLehmann", - "P5ych0", - "teoli", - "Leun4m", - "medium-endian", - "pixunil" - ] - }, - "Web/Guide/HTML/Content_Editable": { - "modified": "2020-02-12T02:09:56.043Z", - "contributors": [ - "blackjack4494", - "lxdiamond" - ] - }, - "Web/Guide/HTML/Inhaltskategorien": { - "modified": "2020-07-16T11:12:55.534Z", - "contributors": [ - "matthiasulrich", - "Sebastianz", - "jumpball" - ] - }, - "Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document": { - "modified": "2019-03-18T20:37:20.242Z", - "contributors": [ - "SebinNyshkim", - "BlackRebell89" - ] - }, - "Web/HTML": { - "modified": "2019-09-10T15:19:11.194Z", - "contributors": [ - "SphinxKnight", - "NoldoArnion", - "Darkterror45", - "sigoa", - "lumberplumber", - "Draussenduscher", - "VJSchneid", - "skl", - "alippold", - "fscholz", - "kklein", - "LexAndreessen", - "Henry-usa", - "Timmi" - ] - }, - "Web/HTML/Applying_color": { - "modified": "2019-03-18T21:41:16.488Z", - "contributors": [ - "DasRudelndeRudel", - "fhwfzfge" - ] - }, - "Web/HTML/Attributes": { - "modified": "2020-08-17T16:24:34.561Z", - "contributors": [ - "Gitti039", - "steemit-halloworld", - "lkreimann", - "schlagi123", - "LazerPhil", - "Anonymous", - "StevenS77" - ] - }, - "Web/HTML/Block-level_elemente": { - "modified": "2020-05-07T06:16:30.382Z", - "contributors": [ - "zuzuzu", - "Loilo", - "mdschweda", - "drgn", - "VJSchneid", - "teoli", - "lukas.oppermann" - ] - }, - "Web/HTML/Canvas": { - "modified": "2019-03-23T23:16:11.989Z", - "contributors": [ - "sigoa", - "petacat", - "Aloso", - "barning", - "andreas.remdt" - ] - }, - "Web/HTML/Element": { - "modified": "2020-01-27T05:32:14.694Z", - "contributors": [ - "lucas-walter", - "PascalKlassen", - "SJW", - "schlagi123", - "denis.zygann@gmail.com", - "teoli", - "ethertank", - "adrianfischer", - "fscholz", - "Crash" - ] - }, - "Web/HTML/Element/Frame": { - "modified": "2020-10-15T22:10:35.778Z", - "contributors": [ - "thunderhook" - ] - }, - "Web/HTML/Element/Input": { - "modified": "2020-03-21T07:28:26.249Z", - "contributors": [ - "Ryuno-Ki", - "evayde", - "accessabilly", - "Skasi", - "JorisGutjahr", - "chrillek", - "yannick_versley", - "Sebastianz", - "dio", - "teoli", - "thaddeus" - ] - }, - "Web/HTML/Element/Input/button": { - "modified": "2020-01-04T13:22:17.254Z", - "contributors": [ - "use-x", - "Breaker222", - "Sebastianz", - "Sweapz" - ] - }, - "Web/HTML/Element/Input/checkbox": { - "modified": "2020-10-15T22:29:32.835Z", - "contributors": [ - "clemens.klapp" - ] - }, - "Web/HTML/Element/Shadow": { - "modified": "2019-04-09T10:21:03.813Z", - "contributors": [ - "nnscr", - "AndreasSchantl" - ] - }, - "Web/HTML/Element/a": { - "modified": "2019-03-23T23:13:37.609Z", - "contributors": [ - "dio", - "dhcgn", - "Abro", - "omicron81", - "Type-Style", - "Sebastianz", - "skl", - "Lucky42" - ] - }, - "Web/HTML/Element/abbr": { - "modified": "2020-10-15T21:28:46.526Z", - "contributors": [ - "SebinNyshkim", - "Sebastianz", - "fscholz" - ] - }, - "Web/HTML/Element/acronym": { - "modified": "2020-10-15T21:28:43.905Z", - "contributors": [ - "SebinNyshkim", - "kklein" - ] - }, - "Web/HTML/Element/address": { - "modified": "2019-03-23T23:13:25.598Z", - "contributors": [ - "Sebastianz", - "kklein" + "Sebastianz", + "kklein" ] }, "Web/HTML/Element/applet": { @@ -8941,23 +7186,6 @@ "kklein" ] }, - "Web/HTML/Element/h1-h6": { - "modified": "2019-03-24T00:04:35.426Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz" - ] - }, - "Web/HTML/Element/head": { - "modified": "2019-03-24T00:04:41.043Z", - "contributors": [ - "schlagi123", - "teoli", - "fscholz", - "Crash" - ] - }, "Web/HTML/Element/header": { "modified": "2019-03-23T23:12:58.526Z", "contributors": [ @@ -9317,172 +7545,6 @@ "spiegelp" ] }, - "Web/HTML/Globale_Attribute": { - "modified": "2020-10-15T21:26:14.135Z", - "contributors": [ - "LoVo666", - "qjubic", - "pixunil" - ] - }, - "Web/HTML/Globale_Attribute/accesskey": { - "modified": "2020-10-15T22:03:59.818Z", - "contributors": [ - "Claas" - ] - }, - "Web/HTML/Globale_Attribute/autocapitalize": { - "modified": "2020-10-15T22:05:02.265Z", - "contributors": [ - "alaskaa" - ] - }, - "Web/HTML/Globale_Attribute/class": { - "modified": "2019-03-23T22:53:31.655Z", - "contributors": [ - "sigoa", - "lxdiamond" - ] - }, - "Web/HTML/Globale_Attribute/contenteditable": { - "modified": "2019-03-18T21:36:35.603Z", - "contributors": [ - "4223", - "Claas" - ] - }, - "Web/HTML/Globale_Attribute/dir": { - "modified": "2020-10-15T22:05:39.463Z", - "contributors": [ - "RewoSiedge" - ] - }, - "Web/HTML/Globale_Attribute/draggable": { - "modified": "2019-03-23T22:47:23.466Z", - "contributors": [ - "schlagi123", - "RmnWtnkmp", - "rstarke-dd" - ] - }, - "Web/HTML/Globale_Attribute/dropzone": { - "modified": "2020-10-15T21:40:11.332Z", - "contributors": [ - "kaljak", - "RmnWtnkmp" - ] - }, - "Web/HTML/Globale_Attribute/hidden": { - "modified": "2020-10-15T21:38:08.779Z", - "contributors": [ - "fscholz", - "Oliver_Schafeld", - "RmnWtnkmp", - "skl" - ] - }, - "Web/HTML/Globale_Attribute/id": { - "modified": "2019-03-18T21:47:05.388Z", - "contributors": [ - "BlaM", - "skl" - ] - }, - "Web/HTML/Globale_Attribute/inputmode": { - "modified": "2020-10-15T22:14:49.189Z", - "contributors": [ - "sklicek" - ] - }, - "Web/HTML/Globale_Attribute/is": { - "modified": "2020-10-15T22:23:53.794Z", - "contributors": [ - "LoVo666" - ] - }, - "Web/HTML/Globale_Attribute/kontextmenu": { - "modified": "2020-03-26T16:11:41.701Z", - "contributors": [ - "MarcusRiemer", - "SphinxKnight", - "ctexxx" - ] - }, - "Web/HTML/Globale_Attribute/lang": { - "modified": "2020-10-15T21:51:21.501Z", - "contributors": [ - "kaljak", - "RmnWtnkmp" - ] - }, - "Web/HTML/Globale_Attribute/style": { - "modified": "2020-08-18T11:36:01.283Z", - "contributors": [ - "FelixSchwarz", - "tairt", - "RmnWtnkmp" - ] - }, - "Web/HTML/Globale_Attribute/tabindex": { - "modified": "2020-10-15T22:17:29.883Z", - "contributors": [ - "Michael-1", - "vssn" - ] - }, - "Web/HTML/Globale_Attribute/title": { - "modified": "2019-03-23T22:32:47.288Z", - "contributors": [ - "alaskaa", - "klausinger", - "eluchsinger" - ] - }, - "Web/HTML/Globale_Attribute/translate": { - "modified": "2019-10-21T21:28:23.890Z", - "contributors": [ - "LoVo666" - ] - }, - "Web/HTML/HTML5": { - "modified": "2019-03-23T23:33:45.828Z", - "contributors": [ - "suriyaa", - "teoli", - "timausk", - "thorsten.rinne", - "matze", - "nothine" - ] - }, - "Web/HTML/HTML5/HTML5_element_list": { - "modified": "2019-03-23T23:37:56.525Z", - "contributors": [ - "gk-freiheit", - "rawcat", - "teoli", - "AickeSchulz", - "jwl" - ] - }, - "Web/HTML/Inline_elemente": { - "modified": "2019-03-23T23:18:01.940Z", - "contributors": [ - "Aryx", - "petergloor", - "teoli", - "lukas.oppermann" - ] - }, - "Web/HTML/Referenz": { - "modified": "2019-09-09T07:16:32.387Z", - "contributors": [ - "SphinxKnight", - "mprofitl", - "wbamberg", - "legalbit" - ] - }, "Web/HTML/Using_the_application_cache": { "modified": "2019-03-23T23:31:27.651Z", "contributors": [ @@ -9539,33 +7601,12 @@ "quicksanddiver" ] }, - "Web/HTTP/CORS/Errors/CORSFehlenderAllowHeaderAusPreflight": { - "modified": "2020-03-31T09:46:01.871Z", - "contributors": [ - "cradloff" - ] - }, - "Web/HTTP/CORS/Errors/CORSFehltQuelleErlauben": { - "modified": "2019-07-24T08:48:05.259Z", - "contributors": [ - "kai-oswald", - "SAvB" - ] - }, "Web/HTTP/CORS/Errors/CORSRequestNotHttp": { "modified": "2019-05-21T09:09:00.472Z", "contributors": [ "EastFreezian" ] }, - "Web/HTTP/Caching_FAQ": { - "modified": "2019-03-23T23:05:15.113Z", - "contributors": [ - "jugmac00", - "Johann150", - "VoodooDS" - ] - }, "Web/HTTP/Headers": { "modified": "2019-05-30T17:47:25.618Z", "contributors": [ @@ -9873,12 +7914,6 @@ "loki" ] }, - "Web/JavaScript/Aufzählbarkeit_und_Zugehörigkeit_von_Eigenschaften": { - "modified": "2020-05-27T07:04:55.127Z", - "contributors": [ - "zuzuzu" - ] - }, "Web/JavaScript/Closures": { "modified": "2020-08-14T08:33:52.378Z", "contributors": [ @@ -9899,54 +7934,6 @@ "eminor" ] }, - "Web/JavaScript/Datenstrukturen": { - "modified": "2020-03-12T19:40:01.103Z", - "contributors": [ - "BenjHawk", - "GR_Fuchs", - "fL03", - "schlagi123", - "twarncke", - "yampus", - "ChristianLuxem", - "nodexo", - "fscholz", - "siggi-heltau", - "FabianBeiner", - "spiegelp" - ] - }, - "Web/JavaScript/Eine_Wiedereinfuehrung_in_JavaScript": { - "modified": "2020-05-19T18:28:46.915Z", - "contributors": [ - "AlexanderLaska", - "Timbuktu1982", - "Dusty4848", - "Meiqian", - "Nikolai_Kucksdorf", - "kisjoke91", - "Space42", - "Univream", - "tomscholz", - "schlagi123", - "PinheadLarry", - "sigoa", - "acetous", - "martinhoffmann", - "Coke_and_Pepsi", - "ibafluss", - "creitiv", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/Einführung_in_den_Gebrauch_von_XPath_in_JavaScript": { - "modified": "2019-03-23T22:12:16.123Z", - "contributors": [ - "chrisdavidmills", - "QClonesClan" - ] - }, "Web/JavaScript/EventLoop": { "modified": "2020-03-12T19:41:21.053Z", "contributors": [ @@ -9971,142 +7958,27 @@ "marc971" ] }, - "Web/JavaScript/Guide/Ausdruecke_und_Operatoren": { - "modified": "2020-03-12T19:38:40.241Z", + "Web/JavaScript/Guide/Indexed_collections": { + "modified": "2020-03-12T19:46:38.832Z", "contributors": [ - "occcy", - "stefboll", - "HaayeHenricus", - "schlagi123", - "MelanieVeigl", - "Kevinci", - "fscholz", - "DavidWalsh", - "eminor" + "G_hi3" ] }, - "Web/JavaScript/Guide/Einführung": { - "modified": "2020-03-12T19:40:52.952Z", + "Web/JavaScript/Guide/Keyed_collections": { + "modified": "2020-07-15T01:51:42.838Z", "contributors": [ - "woiddale", - "schlagi123", - "aldec-dv", - "NedNisW", - "janjo", - "Chtheile", - "miniemuff", - "fscholz", - "Sir.Codewright" + "kre", + "Cerberooo", + "cami", + "Julian-B90", + "schlagi123" ] }, - "Web/JavaScript/Guide/Feinheiten_des_Objektmodells": { - "modified": "2020-10-03T02:52:53.149Z", + "Web/JavaScript/Guide/Meta_programming": { + "modified": "2020-03-12T19:47:40.641Z", "contributors": [ - "c0dewalker", - "wbamberg", - "schlagi123", - "sigoa", - "DoctypeRosenthal", - "Venhaus", - "crasher666", - "IngoB", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/Guide/Funktionen": { - "modified": "2020-03-12T19:38:37.078Z", - "contributors": [ - "dmho", - "cami", - "loicyondjeu", - "stefboll", - "woiddale", - "schlagi123", - "b-lack", - "vetoCode", - "fscholz", - "eminor" - ] - }, - "Web/JavaScript/Guide/Grammatik_und_Typen": { - "modified": "2020-09-16T18:03:08.891Z", - "contributors": [ - "FFFutureflo", - "Tionran", - "schlagi123", - "TomasRiker", - "aldec-dv", - "SaschaHeyer", - "yampus", - "FocusCookie", - "Randomfinger", - "NedNisW", - "vetoCode", - "didierCH", - "baxstar", - "fscholz", - "siggi-heltau", - "eminor", - "NickRussler", - "Hans_Mueller" - ] - }, - "Web/JavaScript/Guide/Indexed_collections": { - "modified": "2020-03-12T19:46:38.832Z", - "contributors": [ - "G_hi3" - ] - }, - "Web/JavaScript/Guide/Keyed_collections": { - "modified": "2020-07-15T01:51:42.838Z", - "contributors": [ - "kre", - "Cerberooo", - "cami", - "Julian-B90", - "schlagi123" - ] - }, - "Web/JavaScript/Guide/Kontrollfluss_und_Fehlerbehandlung": { - "modified": "2020-03-12T19:37:55.717Z", - "contributors": [ - "cami", - "deklesen", - "woiddale", - "schlagi123", - "SaschaHeyer", - "PreCodeEU", - "StevenS77", - "jwhitlock", - "KarolineCat", - "fscholz", - "vsenol", - "eminor" - ] - }, - "Web/JavaScript/Guide/Meta_programming": { - "modified": "2020-03-12T19:47:40.641Z", - "contributors": [ - "mschleeweiss", - "schlagi123" - ] - }, - "Web/JavaScript/Guide/Mit_Objekten_arbeiten": { - "modified": "2020-03-12T19:38:32.446Z", - "contributors": [ - "schlagi123", - "Dr-Oetker", - "SphinxKnight", - "papper371", - "timosperisen", - "serv-inc", - "fw-zirkusdigitalo", - "fscholz", - "DavidWalsh", - "stephaniehobson", - "cyclodev", - "eminor" + "mschleeweiss", + "schlagi123" ] }, "Web/JavaScript/Guide/Modules": { @@ -10138,14 +8010,6 @@ "eminor" ] }, - "Web/JavaScript/Guide/Textformatierung": { - "modified": "2020-03-12T19:46:53.213Z", - "contributors": [ - "schlagi123", - "patpir", - "SEBv15" - ] - }, "Web/JavaScript/Guide/Using_promises": { "modified": "2020-07-30T16:41:03.762Z", "contributors": [ @@ -10154,14 +8018,6 @@ "matze19831211" ] }, - "Web/JavaScript/Guide/schleifen_und_iterationen": { - "modified": "2020-03-12T19:43:05.832Z", - "contributors": [ - "schlagi123", - "j0ck", - "moreadrenalin" - ] - }, "Web/JavaScript/Inheritance_and_the_prototype_chain": { "modified": "2020-03-12T19:41:37.015Z", "contributors": [ @@ -10176,31 +8032,6 @@ "antonharald" ] }, - "Web/JavaScript/Introduction_to_Object-Oriented_JavaScript": { - "modified": "2020-03-12T19:39:48.552Z", - "contributors": [ - "ant1d0t", - "nemo182", - "christianhegedues", - "BurnerPat", - "schlagi123", - "neverendingo", - "creitiv", - "DunklesBlut88", - "paesku", - "bricks", - "fabiankreutz", - "spiegelp" - ] - }, - "Web/JavaScript/JavaScript_technologieuebersicht": { - "modified": "2020-03-12T19:39:42.418Z", - "contributors": [ - "lesch", - "fl1p", - "spiegelp" - ] - }, "Web/JavaScript/Language_Resources": { "modified": "2020-03-12T19:38:27.478Z", "contributors": [ @@ -10231,4008 +8062,6105 @@ "timbernasley" ] }, - "Web/JavaScript/Reference/Fehler": { - "modified": "2020-03-12T19:43:41.868Z", + "Web/JavaScript/Reference/Functions": { + "modified": "2020-10-15T21:32:23.734Z", "contributors": [ + "steevn", + "ibiBgOR", + "julianpollmann", "schlagi123", - "akumagamo" + "P0lip" ] }, - "Web/JavaScript/Reference/Fehler/Already_has_pragma": { - "modified": "2020-03-12T19:47:20.172Z", + "Web/JavaScript/Reference/Functions/Default_parameters": { + "modified": "2020-10-15T21:51:29.730Z", "contributors": [ - "schlagi123" + "schlagi123", + "Eiknheimer", + "serv-inc", + "StevenS77", + "kdex", + "leonschwanitz" ] }, - "Web/JavaScript/Reference/Fehler/Array_sort_argument": { - "modified": "2020-03-12T19:47:33.148Z", + "Web/JavaScript/Reference/Functions/arguments": { + "modified": "2020-10-15T21:32:34.952Z", "contributors": [ - "schlagi123" + "tonitone", + "StefKrie", + "haveyaseen", + "schlagi123", + "niorad", + "a-ctor", + "fscholz" ] }, - "Web/JavaScript/Reference/Fehler/Bad_octal": { - "modified": "2020-03-12T19:47:25.600Z", + "Web/JavaScript/Reference/Functions/arguments/@@iterator": { + "modified": "2020-10-15T22:04:50.730Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Bad_radix": { - "modified": "2020-03-12T19:47:40.678Z", + "Web/JavaScript/Reference/Functions/arguments/callee": { + "modified": "2020-10-15T21:32:40.831Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Fehler/Bad_regexp_flag": { - "modified": "2020-03-12T19:47:43.378Z", + "Web/JavaScript/Reference/Functions/arguments/length": { + "modified": "2020-10-15T21:32:35.168Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Fehler/Bad_return_or_yield": { - "modified": "2020-03-12T19:47:36.755Z", + "Web/JavaScript/Reference/Functions/get": { + "modified": "2020-10-15T22:04:49.671Z", "contributors": [ - "schlagi123" + "schlagi123", + "JPeer264" ] }, - "Web/JavaScript/Reference/Fehler/Called_on_incompatible_type": { - "modified": "2020-03-12T19:47:23.087Z", + "Web/JavaScript/Reference/Functions/set": { + "modified": "2020-10-15T22:04:49.802Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Cant_access_lexical_declaration_before_init": { - "modified": "2020-03-12T19:47:39.951Z", + "Web/JavaScript/Reference/Global_Objects": { + "modified": "2020-03-12T19:38:16.835Z", "contributors": [ - "schlagi123" + "jazevo", + "schlagi123", + "Deppenapostroph", + "SphinxKnight", + "timbernasley", + "fscholz", + "ziyunfei" ] }, - "Web/JavaScript/Reference/Fehler/Cant_access_property": { - "modified": "2020-03-12T19:48:57.195Z", + "Web/JavaScript/Reference/Global_Objects/Array": { + "modified": "2020-10-15T21:25:30.625Z", "contributors": [ - "micschwarz" + "grumpy-cat", + "SebinNyshkim", + "schlagi123", + "henje", + "JayEn84", + "Eiknheimer", + "StevenS77", + "kdex", + "antonharald", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Fehler/Cant_define_property_object_not_extensible": { - "modified": "2020-03-12T19:47:37.913Z", + "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { + "modified": "2020-10-15T22:01:02.252Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Cant_delete": { - "modified": "2020-03-12T19:47:33.700Z", + "Web/JavaScript/Reference/Global_Objects/Array/@@species": { + "modified": "2020-10-15T22:01:02.767Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Cant_redefine_property": { - "modified": "2020-03-12T19:47:33.994Z", + "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { + "modified": "2020-10-15T22:01:03.125Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Cyclic_object_value": { - "modified": "2020-03-12T19:47:32.067Z", + "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { + "modified": "2020-10-15T21:52:43.889Z", "contributors": [ - "martinr1604", - "schlagi123" + "duckymirror", + "isnot2bad", + "NiklasMerz", + "schlagi123", + "molerat619", + "LeisureLarry", + "sol-idsnake", + "istvank", + "StevenS77" ] }, - "Web/JavaScript/Reference/Fehler/Dead_object": { - "modified": "2020-03-12T19:47:34.842Z", + "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { + "modified": "2020-10-15T21:52:47.826Z", "contributors": [ - "schlagi123" + "schlagi123", + "StevenS77" ] }, - "Web/JavaScript/Reference/Fehler/Delete_in_strict_mode": { - "modified": "2020-03-12T19:47:47.727Z", + "Web/JavaScript/Reference/Global_Objects/Array/concat": { + "modified": "2020-10-15T21:34:08.129Z", "contributors": [ - "schlagi123" + "schlagi123", + "ghost23", + "pecoes", + "oliver-j", + "FelixSebastianLange" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_String_generics": { - "modified": "2020-03-12T19:47:17.153Z", + "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { + "modified": "2020-10-15T21:38:19.886Z", "contributors": [ - "schlagi123" + "schlagi123", + "GR_Fuchs", + "Flummi", + "oliver-j" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_caller_or_arguments_usage": { - "modified": "2020-03-12T19:47:44.593Z", + "Web/JavaScript/Reference/Global_Objects/Array/entries": { + "modified": "2020-10-15T21:38:18.243Z", "contributors": [ - "schlagi123" + "Tharkun86", + "schlagi123", + "oliver-j", + "AndyTheDandy" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_expression_closures": { - "modified": "2020-03-12T19:47:23.525Z", + "Web/JavaScript/Reference/Global_Objects/Array/every": { + "modified": "2020-10-15T21:47:07.289Z", "contributors": [ - "schlagi123" + "schlagi123", + "orion-z", + "longstone" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_octal": { - "modified": "2020-03-12T19:47:46.456Z", + "Web/JavaScript/Reference/Global_Objects/Array/fill": { + "modified": "2020-10-15T21:38:18.545Z", "contributors": [ - "schlagi123" + "schlagi123", + "Andreas_Dyballa", + "oliver-j", + "AndyTheDandy" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_source_map_pragma": { - "modified": "2020-03-12T19:47:46.265Z", + "Web/JavaScript/Reference/Global_Objects/Array/filter": { + "modified": "2020-12-01T06:41:38.166Z", "contributors": [ - "schlagi123" + "Gismo1337", + "caca123-nz", + "SebinNyshkim", + "michelgotta", + "schlagi123", + "xdevs23", + "midnightmare", + "oliver-j", + "occcy" ] }, - "Web/JavaScript/Reference/Fehler/Deprecated_toLocaleFormat": { - "modified": "2020-03-12T19:47:24.103Z", + "Web/JavaScript/Reference/Global_Objects/Array/find": { + "modified": "2020-10-15T21:34:07.173Z", "contributors": [ - "schlagi123" + "SebinNyshkim", + "schlagi123", + "mrkosim", + "psychotammi", + "mreu", + "db6edr", + "oliver-j", + "MelanieVeigl" ] }, - "Web/JavaScript/Reference/Fehler/Equal_as_assign": { - "modified": "2020-03-12T19:47:33.976Z", + "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { + "modified": "2020-10-15T21:50:45.238Z", "contributors": [ - "schlagi123" + "SebinNyshkim", + "schlagi123", + "psychotammi", + "sosnet", + "labcode-de" ] }, - "Web/JavaScript/Reference/Fehler/For-each-in_loops_are_deprecated": { - "modified": "2020-03-12T19:47:22.797Z", + "Web/JavaScript/Reference/Global_Objects/Array/flat": { + "modified": "2020-10-15T22:01:54.920Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Getter_only": { - "modified": "2020-03-12T19:47:33.589Z", + "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { + "modified": "2020-10-15T22:02:19.086Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Identifier_after_number": { - "modified": "2020-03-12T19:47:39.577Z", + "Web/JavaScript/Reference/Global_Objects/Array/forEach": { + "modified": "2020-10-15T21:31:37.392Z", "contributors": [ - "schlagi123" + "SebinNyshkim", + "schlagi123", + "Martin.Kraft", + "Anonymous", + "StevenS77", + "L15t3", + "langco", + "sudave", + "olastor" ] }, - "Web/JavaScript/Reference/Fehler/Illegal_character": { - "modified": "2020-03-12T19:47:40.583Z", + "Web/JavaScript/Reference/Global_Objects/Array/from": { + "modified": "2020-10-15T21:38:18.396Z", "contributors": [ - "schlagi123" + "manfredkogler", + "schlagi123", + "Maugo", + "odysseuscm", + "kdex", + "oliver-j", + "stehefan" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_array_length": { - "modified": "2020-03-12T19:43:36.993Z", + "Web/JavaScript/Reference/Global_Objects/Array/includes": { + "modified": "2020-10-15T21:39:40.373Z", "contributors": [ + "oliver-gramberg", + "MichelBahl", + "mikakruschel", "schlagi123", - "yampus", - "akumagamo" + "adabru" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_assignment_left-hand_side": { - "modified": "2020-03-12T19:46:39.233Z", + "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { + "modified": "2020-10-15T21:39:59.907Z", "contributors": [ + "SebinNyshkim", "schlagi123", - "Cripi" + "Athyrion" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_const_assignment": { - "modified": "2020-03-12T19:47:33.651Z", + "Web/JavaScript/Reference/Global_Objects/Array/isArray": { + "modified": "2020-10-15T21:26:02.361Z", "contributors": [ - "schlagi123" + "schlagi123", + "oliver-j", + "fscholz", + "yacchatta" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_date": { - "modified": "2020-03-12T19:47:16.548Z", + "Web/JavaScript/Reference/Global_Objects/Array/join": { + "modified": "2020-10-15T21:32:45.888Z", "contributors": [ + "SebinNyshkim", + "timlg07", "schlagi123", - "fire-stone" + "wattafot", + "Saschlong", + "mieth" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_for-in_initializer": { - "modified": "2020-03-12T19:47:50.395Z", + "Web/JavaScript/Reference/Global_Objects/Array/keys": { + "modified": "2020-10-15T21:55:10.261Z", "contributors": [ - "schlagi123" + "jfi", + "schlagi123", + "Arlind" ] }, - "Web/JavaScript/Reference/Fehler/Invalid_for-of_initializer": { - "modified": "2020-03-12T19:47:46.412Z", + "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { + "modified": "2020-10-15T21:55:15.610Z", "contributors": [ - "schlagi123" + "schlagi123", + "Arlind" ] }, - "Web/JavaScript/Reference/Fehler/JSON_bad_parse": { - "modified": "2020-03-12T19:47:34.652Z", + "Web/JavaScript/Reference/Global_Objects/Array/length": { + "modified": "2020-10-15T21:38:16.165Z", "contributors": [ + "jfi", "schlagi123", - "Jannik99" + "AndyTheDandy" ] }, - "Web/JavaScript/Reference/Fehler/Malformed_URI": { - "modified": "2020-05-11T08:04:02.475Z", + "Web/JavaScript/Reference/Global_Objects/Array/map": { + "modified": "2020-10-15T21:32:29.489Z", "contributors": [ - "Skasi", - "schlagi123" + "mwiehl", + "felix_geenen", + "SebinNyshkim", + "MerlindlH", + "schlagi123", + "kdex", + "FNGR2911", + "annnoo", + "StevenS77", + "schellmax", + "justb81", + "mexn", + "leMaik", + "derhagen", + "Arminmsg" ] }, - "Web/JavaScript/Reference/Fehler/Malformed_formal_parameter": { - "modified": "2020-03-12T19:43:43.986Z", + "Web/JavaScript/Reference/Global_Objects/Array/of": { + "modified": "2020-10-15T21:38:18.269Z", "contributors": [ - "schlagi123" + "schlagi123", + "dennissterzenbach", + "almai", + "mormahr", + "oliver-j" ] }, - "Web/JavaScript/Reference/Fehler/Missing_bracket_after_list": { - "modified": "2020-03-12T19:46:42.895Z", + "Web/JavaScript/Reference/Global_Objects/Array/pop": { + "modified": "2020-10-15T21:25:28.942Z", "contributors": [ "schlagi123", - "Stolzenhain" + "maoberlehner", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Fehler/Missing_colon_after_property_id": { - "modified": "2020-03-12T19:47:39.916Z", + "Web/JavaScript/Reference/Global_Objects/Array/push": { + "modified": "2020-10-15T21:25:28.923Z", "contributors": [ - "schlagi123" + "SebinNyshkim", + "schlagi123", + "k7sleeper", + "marzepani", + "yacchatta", + "Arminmsg", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Fehler/Missing_curly_after_function_body": { - "modified": "2020-03-12T19:47:34.109Z", + "Web/JavaScript/Reference/Global_Objects/Array/reverse": { + "modified": "2020-10-15T21:25:28.957Z", "contributors": [ - "schlagi123" + "schlagi123", + "cepharum", + "vog", + "mieth", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Fehler/Missing_curly_after_property_list": { - "modified": "2020-03-12T19:45:33.319Z", + "Web/JavaScript/Reference/Global_Objects/Array/shift": { + "modified": "2020-10-15T21:25:29.071Z", "contributors": [ "schlagi123", - "fire-stone" + "OlegBr", + "HendrikRunte", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Fehler/Missing_formal_parameter": { - "modified": "2020-03-12T19:47:38.482Z", + "Web/JavaScript/Reference/Global_Objects/Array/slice": { + "modified": "2020-10-15T21:38:17.986Z", "contributors": [ - "schlagi123" + "DATADEER", + "schlagi123", + "wiegels", + "OlegBr", + "oliver-j" ] }, - "Web/JavaScript/Reference/Fehler/Missing_initializer_in_const": { - "modified": "2020-03-12T19:47:35.587Z", + "Web/JavaScript/Reference/Global_Objects/Array/some": { + "modified": "2020-10-15T21:51:10.415Z", "contributors": [ - "schlagi123" + "schlagi123", + "Jumace", + "ddBenny", + "MaxKr", + "StevenS77", + "ThorstenHans" ] }, - "Web/JavaScript/Reference/Fehler/Missing_name_after_dot_operator": { - "modified": "2020-03-12T19:47:35.523Z", + "Web/JavaScript/Reference/Global_Objects/Array/sort": { + "modified": "2020-10-15T21:50:45.209Z", "contributors": [ - "sicLotus", - "schlagi123" + "SebinNyshkim", + "schlagi123", + "xerox", + "Huargh" ] }, - "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_argument_list": { - "modified": "2020-03-12T19:44:04.052Z", + "Web/JavaScript/Reference/Global_Objects/Array/splice": { + "modified": "2020-10-15T21:30:49.791Z", "contributors": [ + "montapro", + "Huegelkoenig", + "SebinNyshkim", + "leon-jasper", + "GateKeeper", + "Horitsu", + "Breaker222", "schlagi123", - "iimog", - "rolandbgd", - "akumagamo" + "ndresx", + "n4nos", + "valentinmanthei", + "Andorxor", + "rillke", + "cepharum", + "TMR", + "BlaM", + "shentschel", + "casarock", + "depoulo", + "rhulha" ] }, - "Web/JavaScript/Reference/Fehler/Missing_parenthesis_after_condition": { - "modified": "2020-03-12T19:47:39.363Z", + "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { + "modified": "2020-10-15T21:59:23.526Z", "contributors": [ - "schlagi123" + "schlagi123", + "SphinxKnight", + "vssn" ] }, - "Web/JavaScript/Reference/Fehler/Missing_semicolon_before_statement": { - "modified": "2020-03-12T19:44:24.631Z", + "Web/JavaScript/Reference/Global_Objects/Array/toSource": { + "modified": "2020-10-15T22:01:02.840Z", "contributors": [ - "flufflepuff91", "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/More_arguments_needed": { - "modified": "2020-03-12T19:47:35.019Z", + "Web/JavaScript/Reference/Global_Objects/Array/toString": { + "modified": "2020-10-15T21:55:07.803Z", "contributors": [ - "schlagi123" + "schlagi123", + "Arlind" ] }, - "Web/JavaScript/Reference/Fehler/Negative_repetition_count": { - "modified": "2020-03-12T19:47:46.475Z", + "Web/JavaScript/Reference/Global_Objects/Array/unshift": { + "modified": "2020-10-15T21:47:41.247Z", "contributors": [ - "schlagi123" + "schlagi123", + "stefanwimmer128" ] }, - "Web/JavaScript/Reference/Fehler/No_non-null_object": { - "modified": "2020-03-12T19:47:33.684Z", + "Web/JavaScript/Reference/Global_Objects/Array/values": { + "modified": "2020-10-15T21:47:50.418Z", "contributors": [ - "schlagi123" + "schlagi123", + "Semnodime" ] }, - "Web/JavaScript/Reference/Fehler/No_properties": { - "modified": "2020-03-12T19:46:21.338Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T21:54:09.221Z", "contributors": [ "schlagi123", - "timosperisen" + "bpaetzold", + "Steinweber", + "ionree" ] }, - "Web/JavaScript/Reference/Fehler/No_variable_name": { - "modified": "2020-03-12T19:47:35.139Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { + "modified": "2020-10-15T22:01:09.595Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Non_configurable_array_element": { - "modified": "2020-03-12T19:47:37.860Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { + "modified": "2020-10-15T22:01:09.711Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Not_a_codepoint": { - "modified": "2020-03-12T19:44:01.592Z", - "contributors": [ - "schlagi123", - "akumagamo" - ] - }, - "Web/JavaScript/Reference/Fehler/Not_a_constructor": { - "modified": "2020-03-12T19:46:54.349Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { + "modified": "2020-10-15T22:01:15.297Z", "contributors": [ - "NiklasMerz", - "schlagi123", - "klug_mario" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Not_a_function": { - "modified": "2020-03-12T19:45:23.396Z", + "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { + "modified": "2020-10-15T22:01:09.307Z", "contributors": [ - "flufflepuff91", - "schlagi123", - "fire-stone" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Not_defined": { - "modified": "2020-03-12T19:44:11.129Z", + "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { + "modified": "2020-10-15T22:01:12.299Z", "contributors": [ - "flufflepuff91", "schlagi123", - "BennoKieselstein", - "Bernd_L", - "akumagamo" + "fscholz" ] }, - "Web/JavaScript/Reference/Fehler/Precision_range": { - "modified": "2020-03-12T19:44:05.096Z", + "Web/JavaScript/Reference/Global_Objects/Atomics": { + "modified": "2020-10-15T22:01:14.609Z", "contributors": [ - "schlagi123", - "akumagamo" + "Cortys", + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Property_access_denied": { - "modified": "2020-03-12T19:44:01.071Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/add": { + "modified": "2020-10-15T22:01:23.490Z", "contributors": [ - "schlagi123", - "akumagamo" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Read-only": { - "modified": "2020-03-12T19:47:33.685Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/and": { + "modified": "2020-10-15T22:01:14.178Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Redeclared_parameter": { - "modified": "2020-03-12T19:47:37.067Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": { + "modified": "2020-10-15T22:01:23.524Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Reduce_of_empty_array_with_no_initial_value": { - "modified": "2020-03-12T19:47:39.369Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": { + "modified": "2020-10-15T22:01:23.804Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Reserved_identifier": { - "modified": "2020-03-12T19:47:46.391Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": { + "modified": "2020-10-15T22:01:23.367Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Resulting_string_too_large": { - "modified": "2020-03-12T19:47:46.172Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/load": { + "modified": "2020-10-15T22:01:23.437Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Stmt_after_return": { - "modified": "2020-03-12T19:43:39.489Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/or": { + "modified": "2020-10-15T22:01:12.332Z", "contributors": [ - "schlagi123", - "akumagamo" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Strict_Non_Simple_Params": { - "modified": "2020-03-12T19:47:45.620Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/store": { + "modified": "2020-10-15T22:01:23.350Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Too_much_recursion": { - "modified": "2020-03-12T19:43:58.453Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/sub": { + "modified": "2020-10-15T22:01:23.514Z", "contributors": [ - "schlagi123", - "olhaar", - "yampus", - "julmot", - "akumagamo" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Typed_array_invalid_arguments": { - "modified": "2020-03-12T19:47:33.971Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/wait": { + "modified": "2020-10-15T22:01:24.450Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Undeclared_var": { - "modified": "2020-03-12T19:47:43.541Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/xor": { + "modified": "2020-10-15T22:01:13.324Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Undefined_prop": { - "modified": "2020-03-12T19:44:10.591Z", + "Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:34:05.047Z", "contributors": [ "schlagi123", - "ThomasFe", - "akumagamo" + "FatihSyrox", + "rbarisic" ] }, - "Web/JavaScript/Reference/Fehler/Unexpected_token": { - "modified": "2020-03-12T19:45:02.701Z", + "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { + "modified": "2020-10-15T21:45:27.090Z", "contributors": [ - "schlagi123", - "albasiba" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Unexpected_type": { - "modified": "2020-03-12T19:45:54.249Z", + "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { + "modified": "2020-10-15T21:45:27.278Z", "contributors": [ - "schlagi123", - "thegeg", - "SusiHutzler", - "fire-stone", - "netalp" + "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Unnamed_function_statement": { - "modified": "2020-03-12T19:47:45.907Z", + "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { + "modified": "2020-10-15T21:45:25.930Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/Unterminated_string_literal": { - "modified": "2020-03-12T19:47:34.534Z", + "Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:46:54.170Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Fehler/Var_hides_argument": { - "modified": "2020-03-12T19:47:33.618Z", + "Web/JavaScript/Reference/Global_Objects/DataView/buffer": { + "modified": "2020-10-15T21:46:47.193Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/in_operator_no_object": { - "modified": "2020-03-12T19:47:34.037Z", + "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": { + "modified": "2020-10-15T21:47:07.178Z", "contributors": [ - "matthias85", "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/invalid_right_hand_side_instanceof_operand": { - "modified": "2020-03-12T19:47:33.003Z", + "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": { + "modified": "2020-10-15T21:47:08.642Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Fehler/is_not_iterable": { - "modified": "2020-03-12T19:48:02.116Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": { + "modified": "2020-10-15T21:47:06.658Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Functions": { - "modified": "2020-10-15T21:32:23.734Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": { + "modified": "2020-10-15T21:47:05.154Z", "contributors": [ - "steevn", - "ibiBgOR", - "julianpollmann", - "schlagi123", - "P0lip" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/Default_parameters": { - "modified": "2020-10-15T21:51:29.730Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": { + "modified": "2020-10-15T21:47:04.973Z", "contributors": [ - "schlagi123", - "Eiknheimer", - "serv-inc", - "StevenS77", - "kdex", - "leonschwanitz" + "Univream", + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/Methoden_Definitionen": { - "modified": "2020-03-12T19:40:25.737Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": { + "modified": "2020-10-15T21:47:05.070Z", "contributors": [ - "kdex", - "schlagi123", - "siggi-heltau" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/Pfeilfunktionen": { - "modified": "2020-10-15T21:50:51.602Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": { + "modified": "2020-10-15T21:47:04.948Z", "contributors": [ - "schlagi123", - "Sixl-Daniel", - "kdex", - "sja", - "Eiknheimer", - "GuidoSchweizer", - "mhash17" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/arguments": { - "modified": "2020-10-15T21:32:34.952Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": { + "modified": "2020-10-15T21:47:05.220Z", "contributors": [ - "tonitone", - "StefKrie", - "haveyaseen", - "schlagi123", - "niorad", - "a-ctor", - "fscholz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/arguments/@@iterator": { - "modified": "2020-10-15T22:04:50.730Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": { + "modified": "2020-10-15T21:47:05.094Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/arguments/callee": { - "modified": "2020-10-15T21:32:40.831Z", + "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": { + "modified": "2020-10-15T21:47:05.304Z", "contributors": [ - "schlagi123", - "fscholz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/arguments/length": { - "modified": "2020-10-15T21:32:35.168Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": { + "modified": "2020-10-15T21:47:06.918Z", "contributors": [ - "schlagi123", - "fscholz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/get": { - "modified": "2020-10-15T22:04:49.671Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": { + "modified": "2020-10-15T21:47:05.889Z", "contributors": [ - "schlagi123", - "JPeer264" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/rest_parameter": { - "modified": "2020-10-15T21:56:07.951Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": { + "modified": "2020-10-15T21:47:06.130Z", "contributors": [ - "sonicdoe", - "schlagi123", - "Simmarith" + "schlagi123" ] }, - "Web/JavaScript/Reference/Functions/set": { - "modified": "2020-10-15T22:04:49.802Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": { + "modified": "2020-10-15T21:47:06.080Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects": { - "modified": "2020-03-12T19:38:16.835Z", - "contributors": [ - "jazevo", - "schlagi123", - "Deppenapostroph", - "SphinxKnight", - "timbernasley", - "fscholz", - "ziyunfei" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array": { - "modified": "2020-10-15T21:25:30.625Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": { + "modified": "2020-10-15T21:47:06.022Z", "contributors": [ - "grumpy-cat", - "SebinNyshkim", - "schlagi123", - "henje", - "JayEn84", - "Eiknheimer", - "StevenS77", - "kdex", - "antonharald", - "fscholz", - "Airblader" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@iterator": { - "modified": "2020-10-15T22:01:02.252Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": { + "modified": "2020-10-15T21:47:06.573Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@species": { - "modified": "2020-10-15T22:01:02.767Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": { + "modified": "2020-10-15T21:47:07.408Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/@@unscopables": { - "modified": "2020-10-15T22:01:03.125Z", + "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": { + "modified": "2020-10-15T21:47:06.396Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Prototypen": { - "modified": "2020-10-15T21:52:42.525Z", + "Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:26:50.406Z", "contributors": [ - "Stoeoeoe", + "Coding-Boss", + "pop1989bb", + "1siegi", + "Streamities", + "herbmaier", "schlagi123", - "StevenS77" + "tweini", + "mreu", + "JohannesStadler", + "cedisupersoccer", + "xhronos", + "decatur", + "fscholz", + "teoli", + "IchMoritz" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/Reduce": { - "modified": "2020-10-15T21:52:43.889Z", + "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { + "modified": "2020-10-15T21:45:49.430Z", "contributors": [ - "duckymirror", - "isnot2bad", - "NiklasMerz", - "schlagi123", - "molerat619", - "LeisureLarry", - "sol-idsnake", - "istvank", - "StevenS77" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/ReduceRight": { - "modified": "2020-10-15T21:52:47.826Z", + "Web/JavaScript/Reference/Global_Objects/Date/UTC": { + "modified": "2020-10-15T21:46:03.247Z", "contributors": [ + "herbmaier", "schlagi123", - "StevenS77" + "jaller94" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/concat": { - "modified": "2020-10-15T21:34:08.129Z", + "Web/JavaScript/Reference/Global_Objects/Date/getDay": { + "modified": "2020-10-15T21:45:27.743Z", "contributors": [ - "schlagi123", - "ghost23", - "pecoes", - "oliver-j", - "FelixSebastianLange" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/copyWithin": { - "modified": "2020-10-15T21:38:19.886Z", + "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { + "modified": "2020-10-15T21:45:26.276Z", "contributors": [ - "schlagi123", - "GR_Fuchs", - "Flummi", - "oliver-j" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/entries": { - "modified": "2020-10-15T21:38:18.243Z", + "Web/JavaScript/Reference/Global_Objects/Date/getHours": { + "modified": "2020-10-15T21:45:25.193Z", "contributors": [ - "Tharkun86", - "schlagi123", - "oliver-j", - "AndyTheDandy" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/every": { - "modified": "2020-10-15T21:47:07.289Z", + "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { + "modified": "2020-10-15T21:45:26.861Z", "contributors": [ - "schlagi123", - "orion-z", - "longstone" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/fill": { - "modified": "2020-10-15T21:38:18.545Z", + "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { + "modified": "2020-10-15T21:45:26.279Z", "contributors": [ - "schlagi123", - "Andreas_Dyballa", - "oliver-j", - "AndyTheDandy" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/filter": { - "modified": "2020-12-01T06:41:38.166Z", + "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { + "modified": "2020-10-15T21:45:28.693Z", "contributors": [ - "Gismo1337", - "caca123-nz", - "SebinNyshkim", - "michelgotta", - "schlagi123", - "xdevs23", - "midnightmare", - "oliver-j", - "occcy" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/find": { - "modified": "2020-10-15T21:34:07.173Z", + "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { + "modified": "2020-10-15T21:45:29.298Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Date/getTime": { + "modified": "2020-10-15T21:45:29.479Z", "contributors": [ - "SebinNyshkim", "schlagi123", - "mrkosim", - "psychotammi", - "mreu", - "db6edr", - "oliver-j", - "MelanieVeigl" + "davidwittenbrink" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/findIndex": { - "modified": "2020-10-15T21:50:45.238Z", + "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { + "modified": "2020-10-15T21:45:28.937Z", "contributors": [ - "SebinNyshkim", "schlagi123", - "psychotammi", - "sosnet", - "labcode-de" + "douira", + "ozcelebi" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flat": { - "modified": "2020-10-15T22:01:54.920Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { + "modified": "2020-10-15T21:45:20.226Z", "contributors": [ - "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/flatMap": { - "modified": "2020-10-15T22:02:19.086Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { + "modified": "2020-10-15T21:45:21.504Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/forEach": { - "modified": "2020-10-15T21:31:37.392Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { + "modified": "2020-10-15T21:45:23.446Z", "contributors": [ - "SebinNyshkim", - "schlagi123", - "Martin.Kraft", - "Anonymous", - "StevenS77", - "L15t3", - "langco", - "sudave", - "olastor" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/from": { - "modified": "2020-10-15T21:38:18.396Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { + "modified": "2020-10-15T21:45:19.205Z", "contributors": [ - "manfredkogler", - "schlagi123", - "Maugo", - "odysseuscm", - "kdex", - "oliver-j", - "stehefan" + "dotperinch", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/includes": { - "modified": "2020-10-15T21:39:40.373Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { + "modified": "2020-10-15T21:45:30.061Z", "contributors": [ - "oliver-gramberg", - "MichelBahl", - "mikakruschel", - "schlagi123", - "adabru" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/indexOf": { - "modified": "2020-10-15T21:39:59.907Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { + "modified": "2020-10-15T21:45:24.536Z", "contributors": [ - "SebinNyshkim", - "schlagi123", - "Athyrion" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/isArray": { - "modified": "2020-10-15T21:26:02.361Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { + "modified": "2020-10-15T21:45:18.574Z", "contributors": [ "schlagi123", - "oliver-j", - "fscholz", - "yacchatta" + "Artenuvielle" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/join": { - "modified": "2020-10-15T21:32:45.888Z", + "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { + "modified": "2020-10-15T21:45:22.596Z", "contributors": [ - "SebinNyshkim", - "timlg07", "schlagi123", - "wattafot", - "Saschlong", - "mieth" + "HendrikRunte" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/keys": { - "modified": "2020-10-15T21:55:10.261Z", + "Web/JavaScript/Reference/Global_Objects/Date/getYear": { + "modified": "2020-10-15T21:45:31.158Z", "contributors": [ - "jfi", - "schlagi123", - "Arlind" + "danieldiekmeier", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf": { - "modified": "2020-10-15T21:55:15.610Z", + "Web/JavaScript/Reference/Global_Objects/Date/now": { + "modified": "2020-10-15T21:29:19.444Z", "contributors": [ + "Khazl", "schlagi123", - "Arlind" + "J000S", + "gurix", + "fscholz", + "LOK" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/length": { - "modified": "2020-10-15T21:38:16.165Z", - "contributors": [ - "jfi", - "schlagi123", - "AndyTheDandy" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/map": { - "modified": "2020-10-15T21:32:29.489Z", - "contributors": [ - "mwiehl", - "felix_geenen", - "SebinNyshkim", - "MerlindlH", - "schlagi123", - "kdex", - "FNGR2911", - "annnoo", - "StevenS77", - "schellmax", - "justb81", - "mexn", - "leMaik", - "derhagen", - "Arminmsg" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/of": { - "modified": "2020-10-15T21:38:18.269Z", - "contributors": [ - "schlagi123", - "dennissterzenbach", - "almai", - "mormahr", - "oliver-j" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Array/pop": { - "modified": "2020-10-15T21:25:28.942Z", + "Web/JavaScript/Reference/Global_Objects/Date/parse": { + "modified": "2020-10-15T21:30:28.964Z", "contributors": [ + "BuZZ-T", "schlagi123", - "maoberlehner", - "fscholz", - "Airblader" + "PapaBravo", + "GottZ", + "TheSuspiciousWombat", + "MrMartiniMo", + "danieldiekmeier", + "Drasive" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/push": { - "modified": "2020-10-15T21:25:28.923Z", + "Web/JavaScript/Reference/Global_Objects/Date/setDate": { + "modified": "2020-10-15T21:45:35.204Z", "contributors": [ - "SebinNyshkim", - "schlagi123", - "k7sleeper", - "marzepani", - "yacchatta", - "Arminmsg", - "fscholz", - "Airblader" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/reverse": { - "modified": "2020-10-15T21:25:28.957Z", + "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { + "modified": "2020-10-15T21:45:37.723Z", "contributors": [ + "dritter", "schlagi123", - "cepharum", - "vog", - "mieth", - "fscholz", - "Airblader" + "derhofbauer" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/shift": { - "modified": "2020-10-15T21:25:29.071Z", + "Web/JavaScript/Reference/Global_Objects/Date/setHours": { + "modified": "2020-10-15T21:45:35.032Z", "contributors": [ - "schlagi123", - "OlegBr", - "HendrikRunte", - "fscholz", - "Airblader" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/slice": { - "modified": "2020-10-15T21:38:17.986Z", + "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { + "modified": "2020-10-15T21:45:36.061Z", "contributors": [ - "DATADEER", - "schlagi123", - "wiegels", - "OlegBr", - "oliver-j" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/some": { - "modified": "2020-10-15T21:51:10.415Z", + "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { + "modified": "2020-10-15T21:45:36.748Z", "contributors": [ - "schlagi123", - "Jumace", - "ddBenny", - "MaxKr", - "StevenS77", - "ThorstenHans" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/sort": { - "modified": "2020-10-15T21:50:45.209Z", + "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { + "modified": "2020-10-15T21:45:38.160Z", "contributors": [ - "SebinNyshkim", - "schlagi123", - "xerox", - "Huargh" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/splice": { - "modified": "2020-10-15T21:30:49.791Z", + "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { + "modified": "2020-10-15T21:45:36.906Z", "contributors": [ - "montapro", - "Huegelkoenig", - "SebinNyshkim", - "leon-jasper", - "GateKeeper", - "Horitsu", - "Breaker222", - "schlagi123", - "ndresx", - "n4nos", - "valentinmanthei", - "Andorxor", - "rillke", - "cepharum", - "TMR", - "BlaM", - "shentschel", - "casarock", - "depoulo", - "rhulha" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toLocaleString": { - "modified": "2020-10-15T21:59:23.526Z", + "Web/JavaScript/Reference/Global_Objects/Date/setTime": { + "modified": "2020-10-15T21:33:01.056Z", "contributors": [ "schlagi123", - "SphinxKnight", - "vssn" + "jhnnslschnr" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toSource": { - "modified": "2020-10-15T22:01:02.840Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { + "modified": "2020-10-15T21:45:41.852Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/toString": { - "modified": "2020-10-15T21:55:07.803Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { + "modified": "2020-10-15T21:45:48.630Z", "contributors": [ - "schlagi123", - "Arlind" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/unshift": { - "modified": "2020-10-15T21:47:41.247Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { + "modified": "2020-10-15T21:45:48.619Z", "contributors": [ "schlagi123", - "stefanwimmer128" + "stephtr" ] }, - "Web/JavaScript/Reference/Global_Objects/Array/values": { - "modified": "2020-10-15T21:47:50.418Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { + "modified": "2020-10-15T21:45:41.573Z", "contributors": [ - "schlagi123", - "Semnodime" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { - "modified": "2020-10-15T21:54:09.221Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { + "modified": "2020-10-15T21:45:41.649Z", "contributors": [ - "schlagi123", - "bpaetzold", - "Steinweber", - "ionree" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/@@species": { - "modified": "2020-10-15T22:01:09.595Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { + "modified": "2020-10-15T21:45:41.116Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/byteLength": { - "modified": "2020-10-15T22:01:09.711Z", + "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { + "modified": "2020-10-15T21:45:41.484Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView": { - "modified": "2020-10-15T22:01:15.297Z", + "Web/JavaScript/Reference/Global_Objects/Date/setYear": { + "modified": "2020-10-15T21:45:41.405Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype": { - "modified": "2020-10-15T22:01:15.339Z", + "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { + "modified": "2020-10-15T21:45:49.664Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice": { - "modified": "2020-10-15T22:01:09.307Z", + "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { + "modified": "2020-10-15T21:45:51.459Z", "contributors": [ - "schlagi123" + "schlagi123", + "bentzibentz" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction": { - "modified": "2020-10-15T22:01:12.299Z", + "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { + "modified": "2020-10-15T21:45:50.222Z", "contributors": [ + "NiklasMerz", + "schnellboot", + "botic", "schlagi123", - "fscholz" + "WikiMarc" ] }, - "Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { - "modified": "2020-10-15T22:01:09.829Z", + "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { + "modified": "2020-10-15T21:42:32.875Z", "contributors": [ - "schlagi123" + "schlagi123", + "Chips100" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics": { - "modified": "2020-10-15T22:01:14.609Z", + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { + "modified": "2020-10-15T21:45:58.511Z", "contributors": [ - "Cortys", - "schlagi123" + "schlagi123", + "gunnarbittersmann" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/add": { - "modified": "2020-10-15T22:01:23.490Z", + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { + "modified": "2020-10-15T21:45:59.947Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/and": { - "modified": "2020-10-15T22:01:14.178Z", + "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { + "modified": "2020-10-15T21:46:02.185Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/compareExchange": { - "modified": "2020-10-15T22:01:23.524Z", + "Web/JavaScript/Reference/Global_Objects/Date/toSource": { + "modified": "2020-10-15T21:45:56.411Z", "contributors": [ + "teoli", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/exchange": { - "modified": "2020-10-15T22:01:23.804Z", + "Web/JavaScript/Reference/Global_Objects/Date/toString": { + "modified": "2020-10-15T21:45:57.842Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/isLockFree": { - "modified": "2020-10-15T22:01:23.367Z", + "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { + "modified": "2020-10-15T21:45:50.302Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/load": { - "modified": "2020-10-15T22:01:23.437Z", + "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { + "modified": "2020-10-15T21:45:55.020Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/or": { - "modified": "2020-10-15T22:01:12.332Z", + "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { + "modified": "2020-10-15T21:45:55.002Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/store": { - "modified": "2020-10-15T22:01:23.350Z", + "Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:46:20.812Z", "contributors": [ - "schlagi123" + "Flur3x", + "nnals", + "schlagi123", + "jens1o", + "shaedrich", + "andreasf", + "AlexanderFradiani" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/sub": { - "modified": "2020-10-15T22:01:23.514Z", + "Web/JavaScript/Reference/Global_Objects/Error/Stack": { + "modified": "2020-10-15T21:48:37.021Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/wait": { - "modified": "2020-10-15T22:01:24.450Z", + "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { + "modified": "2020-10-15T21:46:22.573Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/wake": { - "modified": "2020-10-15T22:01:24.441Z", + "Web/JavaScript/Reference/Global_Objects/Error/fileName": { + "modified": "2020-10-15T21:46:29.467Z", "contributors": [ - "Cortys", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Atomics/xor": { - "modified": "2020-10-15T22:01:13.324Z", + "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { + "modified": "2020-10-15T21:46:24.762Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean": { - "modified": "2020-10-15T21:34:05.047Z", - "contributors": [ - "schlagi123", - "FatihSyrox", - "rbarisic" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Boolean/prototype": { - "modified": "2020-10-15T21:45:26.885Z", + "Web/JavaScript/Reference/Global_Objects/Error/message": { + "modified": "2020-10-15T21:46:22.605Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toSource": { - "modified": "2020-10-15T21:45:27.090Z", + "Web/JavaScript/Reference/Global_Objects/Error/name": { + "modified": "2020-10-15T21:46:26.394Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/toString": { - "modified": "2020-10-15T21:45:27.278Z", + "Web/JavaScript/Reference/Global_Objects/Error/toSource": { + "modified": "2020-10-15T21:46:53.703Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Boolean/valueOf": { - "modified": "2020-10-15T21:45:25.930Z", + "Web/JavaScript/Reference/Global_Objects/Error/toString": { + "modified": "2020-10-15T21:46:20.003Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView": { - "modified": "2020-10-15T21:46:54.170Z", + "Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T22:01:27.828Z", "contributors": [ "schlagi123", "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/buffer": { - "modified": "2020-10-15T21:46:47.193Z", + "Web/JavaScript/Reference/Global_Objects/Float32Array": { + "modified": "2020-10-15T22:01:33.350Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteLength": { - "modified": "2020-10-15T21:47:07.178Z", + "Web/JavaScript/Reference/Global_Objects/Float64Array": { + "modified": "2020-10-15T22:01:34.687Z", "contributors": [ + "pastparty", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/byteOffset": { - "modified": "2020-10-15T21:47:08.642Z", + "Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T21:30:33.103Z", "contributors": [ - "schlagi123" + "woiddale", + "schlagi123", + "TDesjardins", + "StevenS77", + "Mingun" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat32": { - "modified": "2020-10-15T21:47:06.658Z", + "Web/JavaScript/Reference/Global_Objects/Function/apply": { + "modified": "2020-10-15T21:47:39.222Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getFloat64": { - "modified": "2020-10-15T21:47:05.154Z", + "Web/JavaScript/Reference/Global_Objects/Function/arguments": { + "modified": "2020-10-15T22:01:34.868Z", "contributors": [ + "rossler123", + "trollkotze", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt16": { - "modified": "2020-10-15T21:47:04.973Z", + "Web/JavaScript/Reference/Global_Objects/Function/bind": { + "modified": "2020-10-15T21:37:23.019Z", "contributors": [ - "Univream", - "schlagi123" + "axelrindle", + "chikovanreuden", + "rendner", + "matz3", + "schlagi123", + "Leitschiff", + "roman.seidelsohn", + "sepastian" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt32": { - "modified": "2020-10-15T21:47:05.070Z", + "Web/JavaScript/Reference/Global_Objects/Function/call": { + "modified": "2020-10-15T21:30:32.549Z", "contributors": [ - "schlagi123" + "ffriedl89", + "alexander-heimbuch", + "schlagi123", + "Oekel", + "Abro", + "haryl", + "loki", + "nelf" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getInt8": { - "modified": "2020-10-15T21:47:04.948Z", + "Web/JavaScript/Reference/Global_Objects/Function/caller": { + "modified": "2020-10-15T22:01:48.453Z", "contributors": [ + "buschco", + "Obiwahn", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint16": { - "modified": "2020-10-15T21:47:05.220Z", + "Web/JavaScript/Reference/Global_Objects/Function/displayName": { + "modified": "2020-10-15T22:01:52.215Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint32": { - "modified": "2020-10-15T21:47:05.094Z", + "Web/JavaScript/Reference/Global_Objects/Function/length": { + "modified": "2020-10-15T21:34:09.689Z", "contributors": [ - "schlagi123" + "schlagi123", + "Eiknheimer", + "timoweiss" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/getUint8": { - "modified": "2020-10-15T21:47:05.304Z", + "Web/JavaScript/Reference/Global_Objects/Function/name": { + "modified": "2020-10-15T21:37:34.115Z", "contributors": [ - "schlagi123" + "BoyTheBoy", + "schlagi123", + "Eiknheimer", + "MoritzKn", + "DavidVollmers" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/prototype": { - "modified": "2020-10-15T21:46:53.689Z", + "Web/JavaScript/Reference/Global_Objects/Function/toSource": { + "modified": "2020-10-15T22:01:47.277Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat32": { - "modified": "2020-10-15T21:47:06.918Z", + "Web/JavaScript/Reference/Global_Objects/Function/toString": { + "modified": "2020-10-15T22:01:46.451Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setFloat64": { - "modified": "2020-10-15T21:47:05.889Z", + "Web/JavaScript/Reference/Global_Objects/Generator": { + "modified": "2020-10-15T22:01:57.503Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt16": { - "modified": "2020-10-15T21:47:06.130Z", + "Web/JavaScript/Reference/Global_Objects/Generator/next": { + "modified": "2020-10-15T22:01:55.076Z", "contributors": [ + "GarfieldKlon", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt32": { - "modified": "2020-10-15T21:47:06.080Z", + "Web/JavaScript/Reference/Global_Objects/Generator/return": { + "modified": "2020-10-15T22:01:56.757Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setInt8": { - "modified": "2020-10-15T21:47:06.022Z", + "Web/JavaScript/Reference/Global_Objects/Generator/throw": { + "modified": "2020-10-15T22:01:58.175Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint16": { - "modified": "2020-10-15T21:47:06.573Z", + "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T22:02:04.667Z", "contributors": [ - "schlagi123" + "schlagi123", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint32": { - "modified": "2020-10-15T21:47:07.408Z", + "Web/JavaScript/Reference/Global_Objects/Infinity": { + "modified": "2020-10-15T21:32:07.008Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/DataView/setUint8": { - "modified": "2020-10-15T21:47:06.396Z", + "Web/JavaScript/Reference/Global_Objects/Int16Array": { + "modified": "2020-10-15T22:01:32.923Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date": { - "modified": "2020-10-15T21:26:50.406Z", + "Web/JavaScript/Reference/Global_Objects/Int32Array": { + "modified": "2020-10-15T22:01:33.440Z", "contributors": [ - "Coding-Boss", - "pop1989bb", - "1siegi", - "Streamities", - "herbmaier", - "schlagi123", - "tweini", - "mreu", - "JohannesStadler", - "cedisupersoccer", - "xhronos", - "decatur", - "fscholz", - "teoli", - "IchMoritz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/@@toPrimitive": { - "modified": "2020-10-15T21:45:49.430Z", + "Web/JavaScript/Reference/Global_Objects/Int8Array": { + "modified": "2020-10-15T22:01:34.152Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/UTC": { - "modified": "2020-10-15T21:46:03.247Z", + "Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2020-10-15T22:02:06.176Z", "contributors": [ - "herbmaier", "schlagi123", - "jaller94" + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getDay": { - "modified": "2020-10-15T21:45:27.743Z", + "Web/JavaScript/Reference/Global_Objects/Intl": { + "modified": "2020-10-15T22:02:07.140Z", "contributors": [ + "TorstenDittmann", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getFullYear": { - "modified": "2020-10-15T21:45:26.276Z", + "Web/JavaScript/Reference/Global_Objects/Intl/Collator": { + "modified": "2020-10-15T22:02:08.820Z", "contributors": [ - "schlagi123" + "fscholz", + "schlagi123", + "wbamberg" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getHours": { - "modified": "2020-10-15T21:45:25.193Z", + "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": { + "modified": "2020-10-15T22:02:10.077Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMilliseconds": { - "modified": "2020-10-15T21:45:26.861Z", + "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": { + "modified": "2020-10-15T22:02:19.729Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMinutes": { - "modified": "2020-10-15T21:45:26.279Z", + "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": { + "modified": "2020-10-15T22:02:18.509Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getMonth": { - "modified": "2020-10-15T21:45:28.693Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T21:45:59.649Z", "contributors": [ + "fscholz", + "gunnarbittersmann", + "BuZZ-T", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getSeconds": { - "modified": "2020-10-15T21:45:29.298Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": { + "modified": "2020-10-15T22:02:19.143Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getTime": { - "modified": "2020-10-15T21:45:29.479Z", - "contributors": [ - "schlagi123", - "davidwittenbrink" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getTimezoneOffset": { - "modified": "2020-10-15T21:45:28.937Z", - "contributors": [ - "schlagi123", - "douira", - "ozcelebi" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDate": { - "modified": "2020-10-15T21:45:20.226Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": { + "modified": "2020-10-15T22:02:19.130Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCDay": { - "modified": "2020-10-15T21:45:21.504Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": { + "modified": "2020-10-15T22:03:23.205Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCFullYear": { - "modified": "2020-10-15T21:45:23.446Z", + "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": { + "modified": "2020-10-15T22:02:43.009Z", "contributors": [ + "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCHours": { - "modified": "2020-10-15T21:45:19.205Z", + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T21:45:21.440Z", "contributors": [ - "dotperinch", - "schlagi123" + "fscholz", + "nw520", + "schlagi123", + "sdeitmer" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMilliseconds": { - "modified": "2020-10-15T21:45:30.061Z", + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { + "modified": "2020-10-15T22:03:25.553Z", "contributors": [ + "fscholz", + "apfelbox", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMinutes": { - "modified": "2020-10-15T21:45:24.536Z", + "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": { + "modified": "2020-10-15T22:02:57.962Z", "contributors": [ + "fscholz", + "SebastianSpeitel", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCMonth": { - "modified": "2020-10-15T21:45:18.574Z", + "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": { + "modified": "2020-10-15T22:02:58.225Z", "contributors": [ - "schlagi123", - "Artenuvielle" + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getUTCSeconds": { - "modified": "2020-10-15T21:45:22.596Z", + "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": { + "modified": "2020-10-15T22:02:59.909Z", "contributors": [ - "schlagi123", - "HendrikRunte" + "fscholz", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/getYear": { - "modified": "2020-10-15T21:45:31.158Z", + "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": { + "modified": "2020-10-15T22:02:08.681Z", "contributors": [ - "danieldiekmeier", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/now": { - "modified": "2020-10-15T21:29:19.444Z", + "Web/JavaScript/Reference/Global_Objects/JSON": { + "modified": "2020-10-15T21:34:42.140Z", "contributors": [ - "Khazl", "schlagi123", - "J000S", - "gurix", - "fscholz", - "LOK" + "RewoSiedge", + "Abro", + "markokr" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/parse": { - "modified": "2020-10-15T21:30:28.964Z", + "Web/JavaScript/Reference/Global_Objects/JSON/parse": { + "modified": "2020-10-15T21:34:37.174Z", "contributors": [ - "BuZZ-T", "schlagi123", - "PapaBravo", - "GottZ", - "TheSuspiciousWombat", - "MrMartiniMo", - "danieldiekmeier", - "Drasive" + "mdnde", + "fscholz", + "ccoenen", + "maxkl", + "dguhl" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/prototype": { - "modified": "2020-10-15T21:45:25.297Z", + "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { + "modified": "2020-10-15T21:38:21.975Z", "contributors": [ + "duckymirror", + "powerpaul17", "schlagi123", - "Schollator" + "einfallstoll", + "sahin", + "DoctypeRosenthal", + "HighTower79", + "m3t4lukas", + "blub0hr" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setDate": { - "modified": "2020-10-15T21:45:35.204Z", + "Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T21:39:41.133Z", "contributors": [ - "schlagi123" + "verij51", + "Streamities", + "kdex", + "Flonk", + "schlagi123", + "the-bluesnik", + "GinoHereIam", + "Chris-CR", + "Fearodin" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setFullYear": { - "modified": "2020-10-15T21:45:37.723Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { + "modified": "2020-10-15T22:01:27.148Z", "contributors": [ - "dritter", - "schlagi123", - "derhofbauer" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setHours": { - "modified": "2020-10-15T21:45:35.032Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@species": { + "modified": "2020-10-15T22:01:26.820Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMilliseconds": { - "modified": "2020-10-15T21:45:36.061Z", + "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { + "modified": "2020-10-15T22:01:26.636Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMinutes": { - "modified": "2020-10-15T21:45:36.748Z", + "Web/JavaScript/Reference/Global_Objects/Map/clear": { + "modified": "2020-10-15T22:01:24.339Z", "contributors": [ + "shaedrich", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setMonth": { - "modified": "2020-10-15T21:45:38.160Z", + "Web/JavaScript/Reference/Global_Objects/Map/delete": { + "modified": "2020-10-15T22:01:25.242Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setSeconds": { - "modified": "2020-10-15T21:45:36.906Z", + "Web/JavaScript/Reference/Global_Objects/Map/entries": { + "modified": "2020-10-15T22:01:26.606Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setTime": { - "modified": "2020-10-15T21:33:01.056Z", + "Web/JavaScript/Reference/Global_Objects/Map/forEach": { + "modified": "2020-10-15T21:53:59.055Z", "contributors": [ "schlagi123", - "jhnnslschnr" + "Techworker" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCDate": { - "modified": "2020-10-15T21:45:41.852Z", + "Web/JavaScript/Reference/Global_Objects/Map/get": { + "modified": "2020-10-15T22:01:25.184Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCFullYear": { - "modified": "2020-10-15T21:45:48.630Z", + "Web/JavaScript/Reference/Global_Objects/Map/has": { + "modified": "2020-10-15T22:01:25.655Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCHours": { - "modified": "2020-10-15T21:45:48.619Z", + "Web/JavaScript/Reference/Global_Objects/Map/keys": { + "modified": "2020-10-15T21:57:34.550Z", "contributors": [ "schlagi123", - "stephtr" + "patpir" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMilliseconds": { - "modified": "2020-10-15T21:45:41.573Z", + "Web/JavaScript/Reference/Global_Objects/Map/set": { + "modified": "2020-10-15T22:01:24.339Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMinutes": { - "modified": "2020-10-15T21:45:41.649Z", + "Web/JavaScript/Reference/Global_Objects/Map/size": { + "modified": "2020-10-15T22:01:24.292Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCMonth": { - "modified": "2020-10-15T21:45:41.116Z", + "Web/JavaScript/Reference/Global_Objects/Map/values": { + "modified": "2020-10-15T22:01:25.714Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setUTCSeconds": { - "modified": "2020-10-15T21:45:41.484Z", + "Web/JavaScript/Reference/Global_Objects/Math": { + "modified": "2020-10-15T21:32:16.402Z", "contributors": [ - "schlagi123" + "schlagi123", + "Artist-sumo" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/setYear": { - "modified": "2020-10-15T21:45:41.405Z", + "Web/JavaScript/Reference/Global_Objects/Math/E": { + "modified": "2020-10-15T21:32:14.403Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toDateString": { - "modified": "2020-10-15T21:45:49.664Z", + "Web/JavaScript/Reference/Global_Objects/Math/LN10": { + "modified": "2020-10-15T21:32:13.398Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toGMTString": { - "modified": "2020-10-15T21:45:51.459Z", + "Web/JavaScript/Reference/Global_Objects/Math/LN2": { + "modified": "2020-10-15T21:32:14.601Z", "contributors": [ - "schlagi123", - "bentzibentz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toISOString": { - "modified": "2020-10-15T21:45:50.222Z", + "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { + "modified": "2020-10-15T21:32:15.382Z", "contributors": [ - "NiklasMerz", - "schnellboot", - "botic", - "schlagi123", - "WikiMarc" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toJSON": { - "modified": "2020-10-15T21:42:32.875Z", + "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { + "modified": "2020-10-15T21:32:15.299Z", "contributors": [ - "schlagi123", - "Chips100" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString": { - "modified": "2020-10-15T21:45:58.511Z", + "Web/JavaScript/Reference/Global_Objects/Math/PI": { + "modified": "2020-10-15T21:32:12.966Z", "contributors": [ + "intxcc", "schlagi123", - "gunnarbittersmann" + "JulianBuerger", + "KillerCodeMonkey" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleString": { - "modified": "2020-10-15T21:45:59.947Z", + "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { + "modified": "2020-10-15T21:32:13.657Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString": { - "modified": "2020-10-15T21:46:02.185Z", + "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { + "modified": "2020-10-15T21:32:13.993Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toSource": { - "modified": "2020-10-15T21:45:56.411Z", + "Web/JavaScript/Reference/Global_Objects/Math/acos": { + "modified": "2020-10-15T21:32:14.868Z", "contributors": [ - "teoli", - "schlagi123" + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toString": { - "modified": "2020-10-15T21:45:57.842Z", + "Web/JavaScript/Reference/Global_Objects/Math/acosh": { + "modified": "2020-10-15T21:38:20.524Z", "contributors": [ - "schlagi123" + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toTimeString": { - "modified": "2020-10-15T21:45:50.302Z", + "Web/JavaScript/Reference/Global_Objects/Math/asin": { + "modified": "2020-10-15T21:38:20.385Z", "contributors": [ - "schlagi123" + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/toUTCString": { - "modified": "2020-10-15T21:45:55.020Z", + "Web/JavaScript/Reference/Global_Objects/Math/asinh": { + "modified": "2020-10-15T21:38:17.929Z", "contributors": [ - "schlagi123" + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Date/valueOf": { - "modified": "2020-10-15T21:45:55.002Z", + "Web/JavaScript/Reference/Global_Objects/Math/atan": { + "modified": "2020-10-15T21:38:19.032Z", "contributors": [ - "schlagi123" + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Error": { - "modified": "2020-10-15T21:46:20.812Z", + "Web/JavaScript/Reference/Global_Objects/Math/atan2": { + "modified": "2020-10-15T21:38:18.649Z", "contributors": [ - "Flur3x", - "nnals", "schlagi123", - "jens1o", - "shaedrich", - "andreasf", - "AlexanderFradiani" + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/Stack": { - "modified": "2020-10-15T21:48:37.021Z", + "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { + "modified": "2020-10-15T21:38:16.861Z", "contributors": [ - "schlagi123" + "itsdevdom", + "schlagi123", + "hictox" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/columnNumber": { - "modified": "2020-10-15T21:46:22.573Z", + "Web/JavaScript/Reference/Global_Objects/Math/ceil": { + "modified": "2020-10-15T21:32:47.773Z", "contributors": [ - "schlagi123" + "scor-ch", + "schlagi123", + "LuiSlacker", + "hictox", + "hanswer01" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/fileName": { - "modified": "2020-10-15T21:46:29.467Z", + "Web/JavaScript/Reference/Global_Objects/Math/clz32": { + "modified": "2020-10-15T21:45:08.913Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/lineNumber": { - "modified": "2020-10-15T21:46:24.762Z", + "Web/JavaScript/Reference/Global_Objects/Math/cos": { + "modified": "2020-10-15T21:45:11.097Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/message": { - "modified": "2020-10-15T21:46:22.605Z", + "Web/JavaScript/Reference/Global_Objects/Math/cosh": { + "modified": "2020-10-15T21:45:13.156Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/name": { - "modified": "2020-10-15T21:46:26.394Z", + "Web/JavaScript/Reference/Global_Objects/Math/exp": { + "modified": "2020-10-15T21:45:11.971Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/prototype": { - "modified": "2020-10-15T21:46:17.159Z", + "Web/JavaScript/Reference/Global_Objects/Math/expm1": { + "modified": "2020-10-15T21:45:13.158Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/toSource": { - "modified": "2020-10-15T21:46:53.703Z", + "Web/JavaScript/Reference/Global_Objects/Math/floor": { + "modified": "2020-10-15T21:40:05.734Z", + "contributors": [ + "schlagi123", + "mcmunder", + "flottokarotto" + ] + }, + "Web/JavaScript/Reference/Global_Objects/Math/fround": { + "modified": "2020-10-15T21:45:14.992Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Error/toString": { - "modified": "2020-10-15T21:46:20.003Z", + "Web/JavaScript/Reference/Global_Objects/Math/hypot": { + "modified": "2020-10-15T21:45:16.601Z", "contributors": [ + "gunnarbittersmann", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError": { - "modified": "2020-10-15T22:01:27.828Z", + "Web/JavaScript/Reference/Global_Objects/Math/imul": { + "modified": "2020-10-15T21:45:04.964Z", "contributors": [ - "schlagi123", - "fscholz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/EvalError/prototype": { - "modified": "2020-10-15T22:01:29.746Z", + "Web/JavaScript/Reference/Global_Objects/Math/log": { + "modified": "2020-10-23T10:19:29.166Z", "contributors": [ + "sttzr", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Float32Array": { - "modified": "2020-10-15T22:01:33.350Z", + "Web/JavaScript/Reference/Global_Objects/Math/log10": { + "modified": "2020-10-15T21:45:15.451Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Float64Array": { - "modified": "2020-10-15T22:01:34.687Z", + "Web/JavaScript/Reference/Global_Objects/Math/log1p": { + "modified": "2020-10-15T21:45:15.457Z", "contributors": [ - "pastparty", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function": { - "modified": "2020-10-15T21:30:33.103Z", + "Web/JavaScript/Reference/Global_Objects/Math/log2": { + "modified": "2020-10-15T21:45:15.290Z", "contributors": [ - "woiddale", - "schlagi123", - "TDesjardins", - "StevenS77", - "Mingun" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/apply": { - "modified": "2020-10-15T21:47:39.222Z", + "Web/JavaScript/Reference/Global_Objects/Math/max": { + "modified": "2020-10-15T21:37:55.703Z", "contributors": [ + "tzimmermann", "schlagi123", - "fscholz" + "screeny05", + "Elytherion", + "ptitmouton" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/arguments": { - "modified": "2020-10-15T22:01:34.868Z", + "Web/JavaScript/Reference/Global_Objects/Math/min": { + "modified": "2020-10-15T21:33:32.757Z", "contributors": [ - "rossler123", - "trollkotze", - "schlagi123" + "Stnieder", + "schlagi123", + "cedrichaase", + "SSchnitzler" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/bind": { - "modified": "2020-10-15T21:37:23.019Z", + "Web/JavaScript/Reference/Global_Objects/Math/pow": { + "modified": "2020-10-15T21:39:55.052Z", "contributors": [ - "axelrindle", - "chikovanreuden", - "rendner", - "matz3", "schlagi123", - "Leitschiff", - "roman.seidelsohn", - "sepastian" + "alice-wl" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/call": { - "modified": "2020-10-15T21:30:32.549Z", + "Web/JavaScript/Reference/Global_Objects/Math/round": { + "modified": "2020-10-15T21:34:19.737Z", "contributors": [ - "ffriedl89", - "alexander-heimbuch", + "aserraric", "schlagi123", - "Oekel", - "Abro", - "haryl", - "loki", - "nelf" + "RefToDev", + "Krayzeee92", + "DanMyshkin", + "michaelkoehne" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/caller": { - "modified": "2020-10-15T22:01:48.453Z", + "Web/JavaScript/Reference/Global_Objects/Math/sign": { + "modified": "2020-10-15T21:45:13.058Z", "contributors": [ - "buschco", - "Obiwahn", - "schlagi123" + "schlagi123", + "cedrichaase" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/displayName": { - "modified": "2020-10-15T22:01:52.215Z", + "Web/JavaScript/Reference/Global_Objects/Math/sin": { + "modified": "2020-10-15T21:45:12.206Z", "contributors": [ + "ModellbahnFreak", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/length": { - "modified": "2020-10-15T21:34:09.689Z", + "Web/JavaScript/Reference/Global_Objects/Math/sinh": { + "modified": "2020-10-15T21:45:14.822Z", "contributors": [ - "schlagi123", - "Eiknheimer", - "timoweiss" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/name": { - "modified": "2020-10-15T21:37:34.115Z", + "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { + "modified": "2020-10-15T21:45:14.468Z", "contributors": [ - "BoyTheBoy", - "schlagi123", - "Eiknheimer", - "MoritzKn", - "DavidVollmers" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/prototype": { - "modified": "2020-10-15T22:01:36.587Z", + "Web/JavaScript/Reference/Global_Objects/Math/tan": { + "modified": "2020-10-15T21:45:14.142Z", "contributors": [ - "xdevs23", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toSource": { - "modified": "2020-10-15T22:01:47.277Z", + "Web/JavaScript/Reference/Global_Objects/Math/tanh": { + "modified": "2020-10-15T21:45:13.983Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Function/toString": { - "modified": "2020-10-15T22:01:46.451Z", + "Web/JavaScript/Reference/Global_Objects/Math/trunc": { + "modified": "2020-10-15T21:45:15.988Z", "contributors": [ - "schlagi123" + "4typen", + "schlagi123", + "giffeler" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator": { - "modified": "2020-10-15T22:01:57.503Z", + "Web/JavaScript/Reference/Global_Objects/NaN": { + "modified": "2020-10-15T21:24:05.253Z", "contributors": [ "schlagi123", - "fscholz" + "boppy", + "SphinxKnight", + "fscholz", + "Jens_Verneuer" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/next": { - "modified": "2020-10-15T22:01:55.076Z", + "Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T21:26:52.848Z", "contributors": [ - "GarfieldKlon", - "schlagi123" + "schlagi123", + "mreu", + "StevenS77", + "mrcktz", + "fscholz", + "AngelSankturio" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/return": { - "modified": "2020-10-15T22:01:56.757Z", + "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { + "modified": "2020-10-15T21:26:52.886Z", "contributors": [ - "schlagi123" + "mitch3ls", + "schlagi123", + "Steditor", + "Tilli81", + "fscholz", + "AngelSankturio" ] }, - "Web/JavaScript/Reference/Global_Objects/Generator/throw": { - "modified": "2020-10-15T22:01:58.175Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { + "modified": "2020-10-15T21:45:17.017Z", "contributors": [ + "EpsilonBoo", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { - "modified": "2020-10-15T22:02:04.667Z", + "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { + "modified": "2020-10-15T21:45:17.604Z", "contributors": [ "schlagi123", - "fscholz" + "Fuzzyma" ] }, - "Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype": { - "modified": "2020-10-15T22:02:06.474Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { + "modified": "2020-10-15T21:45:17.586Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Infinity": { - "modified": "2020-10-15T21:32:07.008Z", + "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { + "modified": "2020-10-30T06:50:59.921Z", "contributors": [ + "thefabicraft-github", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Int16Array": { - "modified": "2020-10-15T22:01:32.923Z", + "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { + "modified": "2020-10-15T21:32:05.912Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Int32Array": { - "modified": "2020-10-15T22:01:33.440Z", + "Web/JavaScript/Reference/Global_Objects/Number/NaN": { + "modified": "2020-10-15T21:31:59.627Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Int8Array": { - "modified": "2020-10-15T22:01:34.152Z", + "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { + "modified": "2020-10-15T21:32:00.956Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/InternalError": { - "modified": "2020-10-15T22:02:06.176Z", - "contributors": [ - "schlagi123", - "fscholz" - ] - }, - "Web/JavaScript/Reference/Global_Objects/InternalError/prototype": { - "modified": "2020-10-15T22:02:05.813Z", + "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { + "modified": "2020-10-15T21:32:05.695Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl": { - "modified": "2020-10-15T22:02:07.140Z", + "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { + "modified": "2020-10-15T21:45:17.315Z", "contributors": [ - "TorstenDittmann", - "schlagi123" + "schlagi123", + "MauriceAyasse" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator": { - "modified": "2020-10-15T22:02:08.820Z", + "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { + "modified": "2020-10-15T21:32:02.637Z", "contributors": [ - "fscholz", "schlagi123", - "wbamberg" + "mazilema", + "renemaas" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/compare": { - "modified": "2020-10-15T22:02:10.077Z", + "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { + "modified": "2020-10-15T21:45:20.941Z", "contributors": [ - "fscholz", + "Frdnspnzr", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype": { - "modified": "2020-10-15T22:02:09.634Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { + "modified": "2020-10-15T21:45:17.199Z", "contributors": [ - "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/resolvedOptions": { - "modified": "2020-10-15T22:02:19.729Z", + "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { + "modified": "2020-10-15T21:45:18.357Z", "contributors": [ - "fscholz", - "schlagi123" + "schlagi123", + "daugsbi", + "DennisAhaus" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/Collator/supportedLocalesOf": { - "modified": "2020-10-15T22:02:18.509Z", + "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { + "modified": "2020-10-15T21:45:19.048Z", "contributors": [ - "fscholz", + "joebau0815", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { - "modified": "2020-10-15T21:45:59.649Z", + "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { + "modified": "2020-10-15T21:45:19.906Z", "contributors": [ - "fscholz", "gunnarbittersmann", - "BuZZ-T", - "schlagi123" + "schlagi123", + "mack3457", + "mzur", + "phax" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/format": { - "modified": "2020-10-15T22:02:19.143Z", + "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { + "modified": "2020-10-15T21:45:20.416Z", "contributors": [ - "fscholz", - "schlagi123" + "Hanmac", + "schlagi123", + "mreu", + "sdeitmer", + "PierreCorell" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/formatToParts": { - "modified": "2020-10-15T22:02:19.130Z", + "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { + "modified": "2020-10-15T21:45:20.364Z", "contributors": [ - "fscholz", - "schlagi123" + "schlagi123", + "phax" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype": { - "modified": "2020-10-15T21:46:02.893Z", + "Web/JavaScript/Reference/Global_Objects/Number/toSource": { + "modified": "2020-10-15T21:45:18.319Z", "contributors": [ - "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/resolvedOptions": { - "modified": "2020-10-15T22:03:23.205Z", + "Web/JavaScript/Reference/Global_Objects/Number/toString": { + "modified": "2020-10-15T21:45:18.952Z", "contributors": [ - "fscholz", - "schlagi123" + "schlagi123", + "giffeler" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/supportedLocalesOf": { - "modified": "2020-10-15T22:02:43.009Z", + "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { + "modified": "2020-10-15T21:45:19.158Z", "contributors": [ - "fscholz", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { - "modified": "2020-10-15T21:45:21.440Z", + "Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2020-10-15T21:21:51.304Z", "contributors": [ + "bobbor", + "wbamberg", "fscholz", - "nw520", - "schlagi123", - "sdeitmer" + "mholland1337" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/format": { - "modified": "2020-10-15T22:03:25.553Z", + "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { + "modified": "2019-03-23T22:08:08.241Z", "contributors": [ - "fscholz", - "apfelbox", - "schlagi123" + "Christian2507" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype": { - "modified": "2020-10-15T22:03:24.903Z", + "Web/JavaScript/Reference/Global_Objects/Object/assign": { + "modified": "2020-10-15T21:46:53.703Z", "contributors": [ - "fscholz", - "schlagi123" + "Stefie", + "schlagi123", + "Yogu", + "henrymoews", + "KuhnEDV" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/supportedLocalesOf": { - "modified": "2020-10-15T22:02:57.962Z", + "Web/JavaScript/Reference/Global_Objects/Object/constructor": { + "modified": "2019-03-23T23:24:06.881Z", "contributors": [ + "Olli64", "fscholz", - "SebastianSpeitel", - "schlagi123" + "Airblader" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules": { - "modified": "2020-10-15T22:02:58.225Z", + "Web/JavaScript/Reference/Global_Objects/Object/create": { + "modified": "2019-03-23T23:03:06.202Z", "contributors": [ - "fscholz" + "arothweiler", + "peter30mar2017", + "fmsy", + "BurnerPat", + "Hendrikto" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/supportedLocalesOf": { - "modified": "2020-10-15T22:02:59.909Z", + "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { + "modified": "2019-07-01T07:52:37.430Z", "contributors": [ - "fscholz", - "schlagi123" + "JanSchuermannPH", + "Univream", + "tvormweg" ] }, - "Web/JavaScript/Reference/Global_Objects/Intl/getCanonicalLocales": { - "modified": "2020-10-15T22:02:08.681Z", + "Web/JavaScript/Reference/Global_Objects/Object/entries": { + "modified": "2020-10-15T22:19:15.987Z", "contributors": [ - "schlagi123" + "franca" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON": { - "modified": "2020-10-15T21:34:42.140Z", + "Web/JavaScript/Reference/Global_Objects/Object/freeze": { + "modified": "2020-10-15T21:33:52.609Z", "contributors": [ + "SebinNyshkim", + "christophfriedrich", + "asilberschneider", + "clemenshelm", "schlagi123", - "RewoSiedge", - "Abro", - "markokr" + "sbusch", + "in0x" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/parse": { - "modified": "2020-10-15T21:34:37.174Z", + "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { + "modified": "2019-03-23T22:20:00.098Z", "contributors": [ - "schlagi123", - "mdnde", - "fscholz", - "ccoenen", - "maxkl", - "dguhl" + "janbiasi" ] }, - "Web/JavaScript/Reference/Global_Objects/JSON/stringify": { - "modified": "2020-10-15T21:38:21.975Z", + "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { + "modified": "2019-03-23T22:16:28.123Z", "contributors": [ - "duckymirror", - "powerpaul17", - "schlagi123", - "einfallstoll", - "sahin", - "DoctypeRosenthal", - "HighTower79", - "m3t4lukas", - "blub0hr" + "StevenS77", + "klausbx" ] }, - "Web/JavaScript/Reference/Global_Objects/Map": { - "modified": "2020-10-15T21:39:41.133Z", + "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { + "modified": "2019-03-23T22:50:54.746Z", "contributors": [ - "verij51", - "Streamities", - "kdex", - "Flonk", + "bambebituna", + "ilkercat", "schlagi123", - "the-bluesnik", - "GinoHereIam", - "Chris-CR", - "Fearodin" + "juicyarts" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@iterator": { - "modified": "2020-10-15T22:01:27.148Z", + "Web/JavaScript/Reference/Global_Objects/Object/is": { + "modified": "2020-10-15T21:25:28.677Z", "contributors": [ - "schlagi123" + "rioderelfte", + "SphinxKnight", + "kdex", + "level420", + "giffeler", + "StevenS77", + "fscholz", + "Airblader" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@species": { - "modified": "2020-10-15T22:01:26.820Z", + "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { + "modified": "2019-03-23T22:15:34.012Z", "contributors": [ - "schlagi123" + "dthdyver" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/@@toStringTag": { - "modified": "2020-10-15T22:01:26.636Z", + "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { + "modified": "2020-10-15T22:20:16.815Z", "contributors": [ - "schlagi123" + "bobbor" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/clear": { - "modified": "2020-10-15T22:01:24.339Z", - "contributors": [ - "shaedrich", - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Map/delete": { - "modified": "2020-10-15T22:01:25.242Z", + "Web/JavaScript/Reference/Global_Objects/Object/keys": { + "modified": "2019-03-23T23:05:44.528Z", "contributors": [ - "schlagi123" + "p2k", + "kdex", + "schlagi123", + "cepharum", + "Bavragor" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/entries": { - "modified": "2020-10-15T22:01:26.606Z", + "Web/JavaScript/Reference/Global_Objects/Object/proto": { + "modified": "2019-04-16T09:05:23.152Z", "contributors": [ - "schlagi123" + "barcmoehm", + "StevenS77" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/forEach": { - "modified": "2020-10-15T21:53:59.055Z", + "Web/JavaScript/Reference/Global_Objects/Object/toSource": { + "modified": "2019-03-23T22:08:15.191Z", "contributors": [ - "schlagi123", - "Techworker" + "teoli", + "Christian2507" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/get": { - "modified": "2020-10-15T22:01:25.184Z", + "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { + "modified": "2020-10-15T22:05:39.564Z", "contributors": [ - "schlagi123" + "paulkoegel", + "dennissterzenbach" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/has": { - "modified": "2020-10-15T22:01:25.655Z", + "Web/JavaScript/Reference/Global_Objects/Object/values": { + "modified": "2019-03-18T20:58:26.548Z", "contributors": [ - "schlagi123" + "filmor", + "rhoio", + "andresattler" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/keys": { - "modified": "2020-10-15T21:57:34.550Z", + "Web/JavaScript/Reference/Global_Objects/Promise": { + "modified": "2020-09-11T07:37:54.436Z", "contributors": [ - "schlagi123", - "patpir" + "sebenns", + "semmelbroesl", + "Dschubba", + "mrmoree", + "CorvusRohan", + "jnnkm", + "SphinxKnight", + "0xflotus", + "HendrikRunte", + "1blankz7" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/prototype": { - "modified": "2020-10-15T22:01:26.449Z", + "Web/JavaScript/Reference/Global_Objects/Promise/all": { + "modified": "2020-10-15T21:33:48.453Z", "contributors": [ - "Morphbreed", - "schlagi123" + "Dschubba", + "anniekao", + "SphinxKnight", + "kdex", + "davidrockt", + "Sharian" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/set": { - "modified": "2020-10-15T22:01:24.339Z", + "Web/JavaScript/Reference/Global_Objects/Promise/finally": { + "modified": "2020-10-15T22:05:15.072Z", "contributors": [ - "schlagi123" + "tminich", + "wasabiNorman" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/size": { - "modified": "2020-10-15T22:01:24.292Z", + "Web/JavaScript/Reference/Global_Objects/Promise/race": { + "modified": "2020-10-15T22:04:13.810Z", "contributors": [ - "schlagi123" + "pkimmlinger", + "cepharum", + "DaAitch" ] }, - "Web/JavaScript/Reference/Global_Objects/Map/values": { - "modified": "2020-10-15T22:01:25.714Z", + "Web/JavaScript/Reference/Global_Objects/Promise/reject": { + "modified": "2020-10-15T21:53:18.040Z", "contributors": [ - "schlagi123" + "ManuelKiessling", + "marco-a", + "modev" ] }, - "Web/JavaScript/Reference/Global_Objects/Math": { - "modified": "2020-10-15T21:32:16.402Z", + "Web/JavaScript/Reference/Global_Objects/Promise/then": { + "modified": "2019-03-23T22:48:57.241Z", "contributors": [ - "schlagi123", - "Artist-sumo" + "dbraun", + "SphinxKnight", + "kdex", + "DanielMSchmidt", + "florianb" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/E": { - "modified": "2020-10-15T21:32:14.403Z", + "Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:12:22.680Z", "contributors": [ - "schlagi123" + "jameshkramer" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN10": { - "modified": "2020-10-15T21:32:13.398Z", + "Web/JavaScript/Reference/Global_Objects/Reflect": { + "modified": "2020-10-15T22:13:20.309Z", "contributors": [ - "schlagi123" + "Tjerk-Haaye-Henricus" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LN2": { - "modified": "2020-10-15T21:32:14.601Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { + "modified": "2020-10-15T22:13:35.547Z", "contributors": [ - "schlagi123" + "Tjerk-Haaye-Henricus" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG10E": { - "modified": "2020-10-15T21:32:15.382Z", + "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { + "modified": "2020-10-15T22:13:50.733Z", "contributors": [ - "schlagi123" + "Tjerk-Haaye-Henricus" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/LOG2E": { - "modified": "2020-10-15T21:32:15.299Z", + "Web/JavaScript/Reference/Global_Objects/RegExp": { + "modified": "2020-08-17T16:16:42.469Z", "contributors": [ - "schlagi123" + "MoPaMo", + "ModProg", + "D3rT1m", + "wbamberg", + "rmcproductions", + "Wiimm", + "doeck", + "StevenS77", + "Abro", + "Simmarith", + "fscholz", + "powerswitch", + "def00111", + "clone", + "lightspirit" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/PI": { - "modified": "2020-10-15T21:32:12.966Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/flags": { + "modified": "2020-10-15T22:08:09.837Z", "contributors": [ - "intxcc", - "schlagi123", - "JulianBuerger", - "KillerCodeMonkey" + "vortami" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT1_2": { - "modified": "2020-10-15T21:32:13.657Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/input": { + "modified": "2019-03-23T22:37:59.302Z", "contributors": [ - "schlagi123" + "teoli", + "RewoSiedge", + "jumpball" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/SQRT2": { - "modified": "2020-10-15T21:32:13.993Z", + "Web/JavaScript/Reference/Global_Objects/RegExp/test": { + "modified": "2020-10-15T22:29:51.696Z", "contributors": [ - "schlagi123" + "MrFootwork", + "jan.kaiser1952" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/acos": { - "modified": "2020-10-15T21:32:14.868Z", + "Web/JavaScript/Reference/Global_Objects/Set": { + "modified": "2020-11-14T21:15:03.891Z", "contributors": [ + "ottahe", + "MichaelGellings", + "cami", + "AndyLnd", + "mdnde2", + "Flonk", "schlagi123", - "hictox" + "sspringer82" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/acosh": { - "modified": "2020-10-15T21:38:20.524Z", + "Web/JavaScript/Reference/Global_Objects/Set/add": { + "modified": "2020-11-14T20:25:16.685Z", "contributors": [ - "schlagi123", - "hictox" + "ottahe" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/asin": { - "modified": "2020-10-15T21:38:20.385Z", + "Web/JavaScript/Reference/Global_Objects/Set/delete": { + "modified": "2020-11-14T20:17:34.638Z", "contributors": [ - "schlagi123", - "hictox" + "ottahe" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/asinh": { - "modified": "2020-10-15T21:38:17.929Z", + "Web/JavaScript/Reference/Global_Objects/Set/has": { + "modified": "2019-03-23T22:10:20.086Z", "contributors": [ - "schlagi123", - "hictox" + "mdnde2", + "psychotammi" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/atan": { - "modified": "2020-10-15T21:38:19.032Z", + "Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T21:30:10.579Z", "contributors": [ + "kdex", + "Anonymous", "schlagi123", - "hictox" + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/atan2": { - "modified": "2020-10-15T21:38:18.649Z", + "Web/JavaScript/Reference/Global_Objects/String/Trim": { + "modified": "2020-10-15T21:34:43.401Z", "contributors": [ "schlagi123", - "hictox" + "janpawellek", + "Codebryo" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cbrt": { - "modified": "2020-10-15T21:38:16.861Z", + "Web/JavaScript/Reference/Global_Objects/String/charAt": { + "modified": "2019-05-13T20:26:27.144Z", "contributors": [ - "itsdevdom", - "schlagi123", - "hictox" + "Huegelkoenig", + "PascalAOMS" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/ceil": { - "modified": "2020-10-15T21:32:47.773Z", + "Web/JavaScript/Reference/Global_Objects/String/concat": { + "modified": "2019-03-23T22:36:31.275Z", "contributors": [ - "scor-ch", "schlagi123", - "LuiSlacker", - "hictox", - "hanswer01" + "Saschlong" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/clz32": { - "modified": "2020-10-15T21:45:08.913Z", + "Web/JavaScript/Reference/Global_Objects/String/endsWith": { + "modified": "2019-03-23T22:28:08.246Z", "contributors": [ - "schlagi123" + "THX138" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cos": { - "modified": "2020-10-15T21:45:11.097Z", + "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { + "modified": "2019-03-23T22:22:43.486Z", "contributors": [ - "schlagi123" + "NielsNet", + "Huargh" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/cosh": { - "modified": "2020-10-15T21:45:13.156Z", + "Web/JavaScript/Reference/Global_Objects/String/includes": { + "modified": "2020-10-15T21:49:46.614Z", "contributors": [ - "schlagi123" + "vssn", + "kdex", + "PascalAOMS" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/exp": { - "modified": "2020-10-15T21:45:11.971Z", + "Web/JavaScript/Reference/Global_Objects/String/indexOf": { + "modified": "2019-03-23T23:04:28.715Z", "contributors": [ - "schlagi123" + "JohannesKuehnel", + "schlagi123", + "sroe", + "pascalhofmann", + "c4re" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/expm1": { - "modified": "2020-10-15T21:45:13.158Z", + "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { + "modified": "2019-03-23T22:56:44.027Z", "contributors": [ - "schlagi123" + "BenB", + "Chips100", + "flottokarotto" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/floor": { - "modified": "2020-10-15T21:40:05.734Z", + "Web/JavaScript/Reference/Global_Objects/String/length": { + "modified": "2020-10-15T21:34:41.966Z", "contributors": [ + "Stuhl", "schlagi123", - "mcmunder", + "labcode-de", "flottokarotto" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/fround": { - "modified": "2020-10-15T21:45:14.992Z", - "contributors": [ - "schlagi123" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Math/hypot": { - "modified": "2020-10-15T21:45:16.601Z", + "Web/JavaScript/Reference/Global_Objects/String/match": { + "modified": "2020-10-15T21:54:33.157Z", "contributors": [ - "gunnarbittersmann", - "schlagi123" + "alberts+", + "d4rkne55", + "Tosch110", + "afoeder", + "tobiasherber" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/imul": { - "modified": "2020-10-15T21:45:04.964Z", + "Web/JavaScript/Reference/Global_Objects/String/raw": { + "modified": "2019-03-23T22:34:12.947Z", "contributors": [ - "schlagi123" + "kdex", + "bfncs", + "schlagi123", + "cnu301" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log": { - "modified": "2020-10-23T10:19:29.166Z", + "Web/JavaScript/Reference/Global_Objects/String/repeat": { + "modified": "2020-10-15T22:06:26.477Z", "contributors": [ - "sttzr", - "schlagi123" + "AlexWayhill" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log10": { - "modified": "2020-10-15T21:45:15.451Z", + "Web/JavaScript/Reference/Global_Objects/String/replace": { + "modified": "2019-11-20T12:28:26.785Z", "contributors": [ - "schlagi123" + "fools-mate", + "danieldiekmeier", + "kkoop", + "HdHeiniDev", + "giffeler", + "TobiGe", + "fancyFranci", + "schlagi123", + "Saschlong", + "mower", + "tspaeth", + "fscholz", + "powerswitch" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log1p": { - "modified": "2020-10-15T21:45:15.457Z", + "Web/JavaScript/Reference/Global_Objects/String/slice": { + "modified": "2019-03-23T22:18:04.121Z", "contributors": [ - "schlagi123" + "napengam", + "didierCH", + "jay-bricksoft" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/log2": { - "modified": "2020-10-15T21:45:15.290Z", + "Web/JavaScript/Reference/Global_Objects/String/split": { + "modified": "2020-10-15T21:34:44.394Z", "contributors": [ - "schlagi123" + "SebinNyshkim", + "Ruupatt", + "shaedrich", + "virtusmaior", + "josephinepanda" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/math.random": { - "modified": "2020-10-15T21:36:41.048Z", + "Web/JavaScript/Reference/Global_Objects/String/startsWith": { + "modified": "2019-09-27T21:50:55.652Z", "contributors": [ - "grumpy-cat", + "daluege", + "MWojt", + "kdex", + "Aaric", "schlagi123", - "cami", - "serv-inc", - "Dargmuesli" + "christ2go" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/max": { - "modified": "2020-10-15T21:37:55.703Z", + "Web/JavaScript/Reference/Global_Objects/String/substr": { + "modified": "2019-03-26T09:57:55.345Z", "contributors": [ - "tzimmermann", + "F4k3rzZ", "schlagi123", - "screeny05", - "Elytherion", - "ptitmouton" + "jazzpi" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/min": { - "modified": "2020-10-15T21:33:32.757Z", + "Web/JavaScript/Reference/Global_Objects/String/substring": { + "modified": "2019-05-22T10:50:37.923Z", "contributors": [ - "Stnieder", - "schlagi123", - "cedrichaase", - "SSchnitzler" + "DragonPerl", + "thebigbla", + "KillerCodeMonkey" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/pow": { - "modified": "2020-10-15T21:39:55.052Z", + "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { + "modified": "2020-10-15T21:37:54.853Z", "contributors": [ "schlagi123", - "alice-wl" + "Chips100" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/round": { - "modified": "2020-10-15T21:34:19.737Z", + "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { + "modified": "2019-03-23T22:31:03.601Z", "contributors": [ - "aserraric", - "schlagi123", - "RefToDev", - "Krayzeee92", - "DanMyshkin", - "michaelkoehne" + "nextlevelshit", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sign": { - "modified": "2020-10-15T21:45:13.058Z", + "Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2020-10-15T21:46:23.938Z", "contributors": [ "schlagi123", - "cedrichaase" + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sin": { - "modified": "2020-10-15T21:45:12.206Z", + "Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:51:09.089Z", "contributors": [ - "ModellbahnFreak", - "schlagi123" + "schlagi123", + "Sheggy" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sinh": { - "modified": "2020-10-15T21:45:14.822Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly": { + "modified": "2020-10-15T22:14:29.365Z", "contributors": [ - "schlagi123" + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/sqrt": { - "modified": "2020-10-15T21:45:14.468Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { + "modified": "2020-10-15T22:14:53.372Z", "contributors": [ - "schlagi123" + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tan": { - "modified": "2020-10-15T21:45:14.142Z", + "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { + "modified": "2020-10-15T22:15:11.252Z", "contributors": [ - "schlagi123" + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/tanh": { - "modified": "2020-10-15T21:45:13.983Z", + "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { + "modified": "2020-03-12T19:44:41.805Z", "contributors": [ - "schlagi123" + "Saerdn" ] }, - "Web/JavaScript/Reference/Global_Objects/Math/trunc": { - "modified": "2020-10-15T21:45:15.988Z", + "Web/JavaScript/Reference/Global_Objects/encodeURI": { + "modified": "2020-03-12T19:46:14.428Z", "contributors": [ - "4typen", - "schlagi123", - "giffeler" + "eras0r", + "knurzl" ] }, - "Web/JavaScript/Reference/Global_Objects/NaN": { - "modified": "2020-10-15T21:24:05.253Z", + "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { + "modified": "2020-03-12T19:42:09.480Z", "contributors": [ - "schlagi123", - "boppy", - "SphinxKnight", - "fscholz", - "Jens_Verneuer" + "giffeler", + "kaenganxt", + "dbohn", + "ViciousPecan" ] }, - "Web/JavaScript/Reference/Global_Objects/Number": { - "modified": "2020-10-15T21:26:52.848Z", + "Web/JavaScript/Reference/Global_Objects/escape": { + "modified": "2020-03-12T19:44:36.899Z", "contributors": [ - "schlagi123", - "mreu", - "StevenS77", - "mrcktz", - "fscholz", - "AngelSankturio" + "gappeh" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/EPSILON": { - "modified": "2020-10-15T21:26:52.886Z", + "Web/JavaScript/Reference/Global_Objects/globalThis": { + "modified": "2020-10-15T22:34:14.804Z", "contributors": [ - "mitch3ls", - "schlagi123", - "Steditor", - "Tilli81", - "fscholz", - "AngelSankturio" + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER": { - "modified": "2020-10-15T21:45:17.017Z", + "Web/JavaScript/Reference/Global_Objects/isFinite": { + "modified": "2020-10-15T21:32:05.093Z", "contributors": [ - "EpsilonBoo", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MAX_VALUE": { - "modified": "2020-10-15T21:45:17.604Z", + "Web/JavaScript/Reference/Global_Objects/isNaN": { + "modified": "2020-10-15T21:32:07.461Z", "contributors": [ + "Steditor", "schlagi123", - "Fuzzyma" + "SerkanSipahi", + "mazilema", + "zf2timo" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER": { - "modified": "2020-10-15T21:45:17.586Z", + "Web/JavaScript/Reference/Global_Objects/null": { + "modified": "2020-10-15T21:32:16.691Z", "contributors": [ - "schlagi123" + "schlagi123", + "HolgerJeromin", + "cuatro" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/MIN_VALUE": { - "modified": "2020-10-30T06:50:59.921Z", + "Web/JavaScript/Reference/Global_Objects/parseFloat": { + "modified": "2020-10-15T21:34:09.121Z", "contributors": [ - "thefabicraft-github", - "schlagi123" + "hellerim", + "schlagi123", + "bsotodo", + "crood" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NEGATIVE_INFINITY": { - "modified": "2020-10-15T21:32:05.912Z", + "Web/JavaScript/Reference/Global_Objects/parseInt": { + "modified": "2020-10-15T21:45:22.117Z", "contributors": [ - "schlagi123" + "schlagi123", + "giffeler", + "macahi", + "mazilema" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/NaN": { - "modified": "2020-10-15T21:31:59.627Z", + "Web/JavaScript/Reference/Global_Objects/undefined": { + "modified": "2020-10-15T21:32:16.777Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/POSITIVE_INFINITY": { - "modified": "2020-10-15T21:32:00.956Z", + "Web/JavaScript/Reference/Global_Objects/unescape": { + "modified": "2020-03-12T19:41:42.907Z", "contributors": [ - "schlagi123" + "thusslack" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isFinite": { - "modified": "2020-10-15T21:32:05.695Z", + "Web/JavaScript/Reference/Global_Objects/uneval": { + "modified": "2020-03-12T19:44:53.530Z", "contributors": [ - "schlagi123" + "teoli", + "SamBrishes" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isInteger": { - "modified": "2020-10-15T21:45:17.315Z", + "Web/JavaScript/Reference/Iteration_protocols": { + "modified": "2020-03-12T19:47:50.502Z", "contributors": [ - "schlagi123", - "MauriceAyasse" + "P215W", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isNaN": { - "modified": "2020-10-15T21:32:02.637Z", + "Web/JavaScript/Reference/Lexical_grammar": { + "modified": "2020-10-15T22:03:30.555Z", "contributors": [ - "schlagi123", - "mazilema", - "renemaas" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger": { - "modified": "2020-10-15T21:45:20.941Z", + "Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:31:28.975Z", "contributors": [ - "Frdnspnzr", - "schlagi123" + "schlagi123", + "fscholz", + "loki" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseFloat": { - "modified": "2020-10-15T21:45:17.199Z", + "Web/JavaScript/Reference/Operators/Addition": { + "modified": "2020-10-15T22:34:37.156Z", "contributors": [ - "schlagi123" + "cs.schueler" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/parseInt": { - "modified": "2020-10-15T21:45:18.357Z", + "Web/JavaScript/Reference/Operators/Comma_Operator": { + "modified": "2020-10-15T21:59:30.294Z", "contributors": [ "schlagi123", - "daugsbi", - "DennisAhaus" + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/prototype": { - "modified": "2020-10-15T21:45:14.479Z", + "Web/JavaScript/Reference/Operators/Conditional_Operator": { + "modified": "2020-10-15T21:41:29.204Z", "contributors": [ + "Coding-Boss", + "nopeJS", + "Binnox", "schlagi123", - "doeck" + "JWPapi", + "chauthai", + "terrluhr" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toExponential": { - "modified": "2020-10-15T21:45:19.048Z", + "Web/JavaScript/Reference/Operators/Grouping": { + "modified": "2020-10-15T22:05:46.615Z", "contributors": [ - "joebau0815", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toFixed": { - "modified": "2020-10-15T21:45:19.906Z", + "Web/JavaScript/Reference/Operators/Operator_Precedence": { + "modified": "2020-03-12T19:43:04.570Z", "contributors": [ - "gunnarbittersmann", + "oliver-gramberg", + "Heronils", "schlagi123", - "mack3457", - "mzur", - "phax" + "Karpfador", + "dcodeIO", + "LK-Reichl-F", + "wLikeFish" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toLocaleString": { - "modified": "2020-10-15T21:45:20.416Z", + "Web/JavaScript/Reference/Operators/Pipeline_operator": { + "modified": "2020-10-15T22:05:45.089Z", "contributors": [ - "Hanmac", - "schlagi123", - "mreu", - "sdeitmer", - "PierreCorell" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toPrecision": { - "modified": "2020-10-15T21:45:20.364Z", + "Web/JavaScript/Reference/Operators/Property_Accessors": { + "modified": "2020-10-15T21:55:35.876Z", "contributors": [ "schlagi123", - "phax" - ] - }, - "Web/JavaScript/Reference/Global_Objects/Number/toSource": { - "modified": "2020-10-15T21:45:18.319Z", - "contributors": [ - "schlagi123" + "timosperisen" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/toString": { - "modified": "2020-10-15T21:45:18.952Z", + "Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-10-15T22:05:09.977Z", "contributors": [ + "mischah", + "shaedrich", "schlagi123", - "giffeler" + "mschleeweiss" ] }, - "Web/JavaScript/Reference/Global_Objects/Number/valueOf": { - "modified": "2020-10-15T21:45:19.158Z", + "Web/JavaScript/Reference/Operators/async_function": { + "modified": "2020-10-15T22:05:47.683Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Object": { - "modified": "2020-10-15T21:21:51.304Z", + "Web/JavaScript/Reference/Operators/await": { + "modified": "2020-10-15T22:05:59.887Z", "contributors": [ - "bobbor", - "wbamberg", - "fscholz", - "mholland1337" + "joebau0815", + "saschbro", + "chrkhl", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__": { - "modified": "2019-03-23T22:08:08.241Z", + "Web/JavaScript/Reference/Operators/class": { + "modified": "2020-03-12T19:42:53.976Z", "contributors": [ - "Christian2507" + "kdex", + "Eiknheimer", + "schlagi123", + "terrluhr" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/assign": { - "modified": "2020-10-15T21:46:53.703Z", + "Web/JavaScript/Reference/Operators/delete": { + "modified": "2020-10-15T21:38:04.252Z", "contributors": [ - "Stefie", + "kowarschick", "schlagi123", - "Yogu", - "henrymoews", - "KuhnEDV" + "pascaliske", + "enexusde", + "CaptainStone", + "olhaar" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/constructor": { - "modified": "2019-03-23T23:24:06.881Z", + "Web/JavaScript/Reference/Operators/function": { + "modified": "2020-10-15T21:56:30.909Z", "contributors": [ - "Olli64", - "fscholz", - "Airblader" + "m5yu", + "jakobpack", + "schlagi123", + "christianrhansen", + "vssn", + "amelzer" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/create": { - "modified": "2019-03-23T23:03:06.202Z", + "Web/JavaScript/Reference/Operators/function*": { + "modified": "2020-10-15T22:05:42.272Z", "contributors": [ - "arothweiler", - "peter30mar2017", - "fmsy", - "BurnerPat", - "Hendrikto" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/defineProperty": { - "modified": "2019-07-01T07:52:37.430Z", + "Web/JavaScript/Reference/Operators/in": { + "modified": "2020-10-15T21:39:06.431Z", "contributors": [ - "JanSchuermannPH", - "Univream", - "tvormweg" + "mfranzke", + "schlagi123", + "kdex", + "xergon" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/entries": { - "modified": "2020-10-15T22:19:15.987Z", + "Web/JavaScript/Reference/Operators/instanceof": { + "modified": "2020-10-15T21:39:26.955Z", "contributors": [ - "franca" + "schlagi123", + "HolgerJeromin", + "flipace", + "weedukind" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/freeze": { - "modified": "2020-10-15T21:33:52.609Z", + "Web/JavaScript/Reference/Operators/new": { + "modified": "2020-10-15T21:38:03.135Z", "contributors": [ - "SebinNyshkim", - "christophfriedrich", - "asilberschneider", - "clemenshelm", + "FelixSab", "schlagi123", - "sbusch", - "in0x" + "Maugo", + "michiruckstuhl", + "danbru1211" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyNames": { - "modified": "2019-03-23T22:20:00.098Z", + "Web/JavaScript/Reference/Operators/new.target": { + "modified": "2020-10-15T22:05:44.821Z", "contributors": [ - "janbiasi" + "hporten", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf": { - "modified": "2019-03-23T22:16:28.123Z", + "Web/JavaScript/Reference/Operators/super": { + "modified": "2020-10-15T21:47:20.372Z", "contributors": [ - "StevenS77", - "klausbx" + "schlagi123", + "kdex", + "Skycro" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty": { - "modified": "2019-03-23T22:50:54.746Z", + "Web/JavaScript/Reference/Operators/this": { + "modified": "2020-10-15T21:46:51.232Z", "contributors": [ - "bambebituna", - "ilkercat", + "KratosAurion", "schlagi123", - "juicyarts" + "kelthuzad", + "eluchsinger" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/is": { - "modified": "2020-10-15T21:25:28.677Z", + "Web/JavaScript/Reference/Operators/typeof": { + "modified": "2020-11-06T10:38:36.219Z", "contributors": [ - "rioderelfte", + "mschleeweiss", + "schlagi123", + "dmarku" + ] + }, + "Web/JavaScript/Reference/Operators/void": { + "modified": "2020-10-15T21:34:41.746Z", + "contributors": [ + "schlagi123", + "amelzer", + "JohannesDienst" + ] + }, + "Web/JavaScript/Reference/Operators/yield": { + "modified": "2020-10-15T22:05:44.303Z", + "contributors": [ + "kevinfoerster", + "ionxenia", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Operators/yield*": { + "modified": "2020-10-15T22:05:43.798Z", + "contributors": [ + "jborsch", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Statements": { + "modified": "2020-10-15T21:30:44.678Z", + "contributors": [ + "Galajda", + "schlagi123", + "JorisGutjahr", + "fscholz", + "SphinxKnight", + "timbernasley" + ] + }, + "Web/JavaScript/Reference/Statements/Empty": { + "modified": "2020-03-12T19:43:34.145Z", + "contributors": [ + "KuhnEDV" + ] + }, + "Web/JavaScript/Reference/Statements/async_function": { + "modified": "2020-10-15T22:13:51.356Z", + "contributors": [ + "Dodo-the-Coder", + "vssn", + "Galajda" + ] + }, + "Web/JavaScript/Reference/Statements/block": { + "modified": "2020-10-15T21:32:12.580Z", + "contributors": [ + "zuzuzu", + "yampus", + "mdschweda", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Statements/break": { + "modified": "2020-03-12T19:40:27.998Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Statements/class": { + "modified": "2020-03-12T19:43:47.910Z", + "contributors": [ + "kdex", + "Idrinth", + "schlagi123", + "eluchsinger" + ] + }, + "Web/JavaScript/Reference/Statements/const": { + "modified": "2020-10-15T21:32:07.805Z", + "contributors": [ + "zuzuzu", + "evayde", + "timlg07", "SphinxKnight", "kdex", - "level420", - "giffeler", - "StevenS77", + "marcelglaeser", + "andreashofer123", "fscholz", - "Airblader" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isExtensible": { - "modified": "2019-03-23T22:15:34.012Z", + "Web/JavaScript/Reference/Statements/continue": { + "modified": "2020-10-15T21:45:50.193Z", "contributors": [ - "dthdyver" + "schlagi123", + "KuhnEDV" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/isFrozen": { - "modified": "2020-10-15T22:20:16.815Z", + "Web/JavaScript/Reference/Statements/debugger": { + "modified": "2020-10-15T22:30:09.075Z", "contributors": [ - "bobbor" + "zuzuzu" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/keys": { - "modified": "2019-03-23T23:05:44.528Z", + "Web/JavaScript/Reference/Statements/do...while": { + "modified": "2020-03-12T19:42:19.798Z", "contributors": [ - "p2k", + "schlagi123", + "jumpball" + ] + }, + "Web/JavaScript/Reference/Statements/export": { + "modified": "2020-10-15T21:41:31.690Z", + "contributors": [ + "hoelzlmanuel", + "wheelmaker24", + "xchange11", + "schlagi123", + "Snapstromegon", + "thomaskempel", + "yampus", + "rroehrig", + "tuffi111", + "sbusch" + ] + }, + "Web/JavaScript/Reference/Statements/for": { + "modified": "2020-03-12T19:42:06.001Z", + "contributors": [ + "schlagi123", + "Elyasin" + ] + }, + "Web/JavaScript/Reference/Statements/for...in": { + "modified": "2020-05-27T10:00:58.351Z", + "contributors": [ + "zuzuzu", + "baasti", + "koedev", + "Vitroxyn", + "schlagi123", + "KuhnEDV", + "JohannesDienst", + "fscholz", + "lupo72" + ] + }, + "Web/JavaScript/Reference/Statements/for...of": { + "modified": "2020-03-12T19:41:38.990Z", + "contributors": [ + "pastparty", + "Xan2063", + "SphinxKnight", "kdex", + "Narigo" + ] + }, + "Web/JavaScript/Reference/Statements/function*": { + "modified": "2020-10-15T21:45:47.005Z", + "contributors": [ + "oliver-gramberg", + "arothweiler", "schlagi123", - "cepharum", - "Bavragor" + "xstable", + "yampus", + "kdex", + "KuhnEDV" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/proto": { - "modified": "2019-04-16T09:05:23.152Z", + "Web/JavaScript/Reference/Statements/if...else": { + "modified": "2020-10-15T21:32:18.484Z", "contributors": [ - "barcmoehm", - "StevenS77" + "schlagi123", + "yampus" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/prototype": { - "modified": "2019-03-23T22:30:41.741Z", + "Web/JavaScript/Reference/Statements/import": { + "modified": "2020-10-15T21:39:21.688Z", "contributors": [ - "peter30mar2017", - "fl1p" + "fmeyertoens", + "kdex", + "Snapstromegon", + "Kani1013", + "michaelze", + "yampus", + "yannick_versley", + "BennyAlex", + "Marzelpan", + "schlagi123", + "Breaker222", + "Simmarith", + "matbad" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/toSource": { - "modified": "2019-03-23T22:08:15.191Z", + "Web/JavaScript/Reference/Statements/label": { + "modified": "2020-03-12T19:43:50.191Z", "contributors": [ - "teoli", - "Christian2507" + "schlagi123", + "eluchsinger" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/valueOf": { - "modified": "2020-10-15T22:05:39.564Z", + "Web/JavaScript/Reference/Statements/let": { + "modified": "2020-03-12T19:40:29.227Z", "contributors": [ - "paulkoegel", - "dennissterzenbach" + "evayde", + "rs-github", + "cami", + "Flonk", + "kdex", + "sigoa", + "TheFaithfulCritic", + "FliegenKLATSCH", + "gtmn", + "rimace", + "schlagi123", + "AndreeWille", + "th-we", + "chk1", + "fscholz" ] }, - "Web/JavaScript/Reference/Global_Objects/Object/values": { - "modified": "2019-03-18T20:58:26.548Z", + "Web/JavaScript/Reference/Statements/return": { + "modified": "2020-03-12T19:44:07.700Z", "contributors": [ - "filmor", - "rhoio", - "andresattler" + "christophfriedrich", + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-03-12T19:41:30.012Z", + "contributors": [ + "schlagi123", + "Elyasin" + ] + }, + "Web/JavaScript/Reference/Statements/throw": { + "modified": "2020-03-12T19:43:13.297Z", + "contributors": [ + "StanE" + ] + }, + "Web/JavaScript/Reference/Statements/try...catch": { + "modified": "2020-03-12T19:45:01.106Z", + "contributors": [ + "SpikePy", + "timomeh", + "stepdate" + ] + }, + "Web/JavaScript/Reference/Statements/var": { + "modified": "2020-03-12T19:40:22.049Z", + "contributors": [ + "rs-github", + "trillerpfeife", + "Epiglottis", + "schlagi123", + "rkoch", + "th-we", + "fscholz" + ] + }, + "Web/JavaScript/Reference/Statements/while": { + "modified": "2020-10-15T21:37:40.413Z", + "contributors": [ + "dmho", + "schlagi123", + "Jintzo", + "Elyasin" + ] + }, + "Web/JavaScript/Reference/Strict_mode": { + "modified": "2020-05-27T12:41:43.793Z", + "contributors": [ + "zuzuzu", + "SebinNyshkim", + "fscholz" + ] + }, + "Web/JavaScript/Typed_arrays": { + "modified": "2020-03-12T19:40:57.461Z", + "contributors": [ + "flying-sheep", + "ksm2", + "Adowrath", + "schlagi123", + "sspringer82", + "fscholz", + "rogerraetzel" + ] + }, + "Web/Manifest": { + "modified": "2020-08-31T08:04:51.977Z", + "contributors": [ + "Zyndoras", + "gpion", + "SphinxKnight", + "tomknig", + "Lanseuo", + "lionralfs", + "hrjhn", + "McSodbrenner", + "fscholz", + "mojoaxel", + "tempelgogo", + "yzanomi" + ] + }, + "Web/Manifest/short_name": { + "modified": "2020-10-15T22:31:31.945Z", + "contributors": [ + "kevin98" + ] + }, + "Web/MathML": { + "modified": "2019-03-23T22:48:05.789Z", + "contributors": [ + "Draussenduscher", + "jumpball" + ] + }, + "Web/MathML/Attribute": { + "modified": "2020-12-10T08:16:36.851Z", + "contributors": [ + "Borgitowner", + "Draussenduscher" + ] + }, + "Web/MathML/Element": { + "modified": "2019-03-23T22:41:28.276Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/maction": { + "modified": "2019-03-23T22:35:35.054Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/math": { + "modified": "2019-03-18T21:15:50.121Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/menclose": { + "modified": "2019-03-23T22:35:37.131Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/merror": { + "modified": "2019-03-23T22:35:42.535Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mfenced": { + "modified": "2019-03-23T22:35:44.635Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mfrac": { + "modified": "2019-03-23T22:39:13.573Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mi": { + "modified": "2019-03-23T22:39:56.494Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mn": { + "modified": "2019-03-23T22:40:17.694Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mo": { + "modified": "2019-03-23T22:40:19.804Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mover": { + "modified": "2019-03-23T22:35:41.970Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mpadded": { + "modified": "2019-03-23T22:35:41.097Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mphantom": { + "modified": "2019-03-23T22:35:42.968Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mroot": { + "modified": "2019-03-23T22:40:25.676Z", + "contributors": [ + "Draussenduscher", + "jumpball" + ] + }, + "Web/MathML/Element/mrow": { + "modified": "2019-03-23T22:40:55.520Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/ms": { + "modified": "2019-03-23T22:35:40.687Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mspace": { + "modified": "2019-03-23T22:35:41.572Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/msqrt": { + "modified": "2019-03-23T22:40:04.280Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mstyle": { + "modified": "2020-10-15T21:41:26.425Z", + "contributors": [ + "bershanskiy", + "Draussenduscher" + ] + }, + "Web/MathML/Element/msub": { + "modified": "2019-03-18T21:15:46.910Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/msubsup": { + "modified": "2019-03-23T22:35:33.789Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/msup": { + "modified": "2019-03-23T22:35:34.021Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mtable": { + "modified": "2019-03-23T22:35:58.744Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mtd": { + "modified": "2019-03-23T22:36:01.471Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mtext": { + "modified": "2019-03-23T22:35:39.496Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/mtr": { + "modified": "2019-03-23T22:36:03.515Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/munder": { + "modified": "2019-03-23T22:35:33.540Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/MathML/Element/munderover": { + "modified": "2019-03-23T22:35:34.263Z", + "contributors": [ + "Draussenduscher" + ] + }, + "Web/Performance": { + "modified": "2020-05-22T10:23:33.706Z", + "contributors": [ + "chrisdavidmills" + ] + }, + "Web/Performance/dns-prefetch": { + "modified": "2020-05-22T10:23:34.773Z", + "contributors": [ + "chryxf" + ] + }, + "Web/Progressive_web_apps": { + "modified": "2019-08-19T03:49:08.791Z", + "contributors": [ + "fschaupp", + "chrisdavidmills", + "friedger" + ] + }, + "Web/Reference": { + "modified": "2020-07-03T18:35:25.162Z", + "contributors": [ + "duckymirror", + "fhwfzfge", + "Patrick_St.", + "Nickolay" + ] + }, + "Web/Reference/API": { + "modified": "2019-03-23T23:18:19.126Z", + "contributors": [ + "goligo", + "Hanibal1963", + "AngelSankturio" + ] + }, + "Web/SVG": { + "modified": "2019-03-24T00:13:09.048Z", + "contributors": [ + "teoli", + "ethertank", + "DavidWalsh", + "nicolasmn", + "fscholz", + "Mickiboy", + "-=Renegade=-", + "Ak120" + ] + }, + "Web/SVG/Attribute": { + "modified": "2019-03-23T22:14:31.297Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/SVG/Attribute/class": { + "modified": "2019-03-23T22:11:26.719Z", + "contributors": [ + "grobmeier" + ] + }, + "Web/SVG/Attribute/preserveAspectRatio": { + "modified": "2019-09-30T23:24:10.073Z", + "contributors": [ + "JackLeEmmerdeur", + "jbvsusj" + ] + }, + "Web/SVG/Element": { + "modified": "2019-03-23T23:33:28.131Z", + "contributors": [ + "Sebastianz", + "teoli", + "ethertank" + ] + }, + "Web/SVG/Element/animate": { + "modified": "2020-10-15T21:26:19.629Z", + "contributors": [ + "Dschubba", + "Sebastianz", + "fscholz", + "teoli", + "martin_ti" + ] + }, + "Web/SVG/Element/circle": { + "modified": "2019-03-23T23:02:17.743Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "Oliver_Schafeld", + "ppk42" + ] + }, + "Web/SVG/Element/foreignObject": { + "modified": "2019-03-23T23:21:17.052Z", + "contributors": [ + "Sebastianz", + "gluecksmelodie", + "teoli", + "powerswitch" + ] + }, + "Web/SVG/Element/path": { + "modified": "2020-10-15T22:17:06.133Z", + "contributors": [ + "MyLittlePenguin" + ] + }, + "Web/SVG/Element/polygon": { + "modified": "2019-03-23T22:09:13.846Z", + "contributors": [ + "Peremptor" + ] + }, + "Web/SVG/Element/rect": { + "modified": "2019-03-18T21:41:17.238Z", + "contributors": [ + "philSixZero" + ] + }, + "Web/SVG/Element/svg": { + "modified": "2020-10-15T21:43:06.785Z", + "contributors": [ + "Volker-E", + "Dschubba", + "mattenmad" + ] + }, + "Web/SVG/Element/textPath": { + "modified": "2019-03-23T22:46:20.244Z", + "contributors": [ + "Sebastianz", + "modellking" + ] + }, + "Web/SVG/Element/view": { + "modified": "2019-03-18T21:15:30.402Z", + "contributors": [ + "Crucion" + ] + }, + "Web/SVG/Namespaces_Crash_Course": { + "modified": "2019-03-23T22:26:27.398Z", + "contributors": [ + "bgueth", + "Oliver_Schafeld" + ] + }, + "Web/SVG/Tutorial": { + "modified": "2019-01-16T14:32:30.945Z", + "contributors": [ + "teoli", + "fscholz", + "Mickiboy" + ] + }, + "Web/SVG/Tutorial/Fills_and_Strokes": { + "modified": "2019-03-23T22:15:38.417Z", + "contributors": [ + "kevinfoerster", + "sebastianbarfurth" + ] + }, + "Web/SVG/Tutorial/SVG_Image_Tag": { + "modified": "2019-04-14T13:23:03.557Z", + "contributors": [ + "Heupferdchenritter", + "RmnWtnkmp" + ] + }, + "Web/SVG/Tutorial/Tools_for_SVG": { + "modified": "2019-04-14T13:43:24.617Z", + "contributors": [ + "Heupferdchenritter" + ] + }, + "Web/Security": { + "modified": "2019-09-10T16:31:42.422Z", + "contributors": [ + "SphinxKnight", + "Dschubba", + "marumari" + ] + }, + "Web/Security/Certificate_Transparency": { + "modified": "2020-05-12T09:08:53.446Z", + "contributors": [ + "dennissterzenbach" + ] + }, + "Web/Web_Components": { + "modified": "2019-03-18T20:58:34.307Z", + "contributors": [ + "SetTrend", + "vssn", + "pkos98", + "dreitzner", + "DomenicDenicola" + ] + }, + "Web/Web_Components/Using_custom_elements": { + "modified": "2020-03-12T05:58:55.117Z", + "contributors": [ + "napengam", + "stekoe", + "hermann77", + "Maik", + "td8" + ] + }, + "Web/XML": { + "modified": "2019-03-24T00:03:04.279Z", + "contributors": [ + "ExE-Boss" + ] + }, + "Web/XSLT": { + "modified": "2019-03-24T00:03:43.722Z", + "contributors": [ + "ExE-Boss", + "ysi", + "fscholz", + "Joda" + ] + }, + "Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching": { + "modified": "2019-03-24T00:04:22.542Z", + "contributors": [ + "wbamberg", + "fscholz", + "-=Renegade=-", + "Doozer" + ] + }, + "Web/CSS/CSS_Columns/Using_multi-column_layouts": { + "modified": "2019-03-24T00:05:49.925Z", + "contributors": [ + "SJW", + "fscholz", + "Mapag" + ] + }, + "orphaned/Tools/Add-ons/DOM_Inspector": { + "modified": "2020-07-16T22:36:24.131Z", + "contributors": [ + "wbamberg", + "nw520" + ] + }, + "Mozilla/Firefox/Releases/3/Updating_extensions": { + "modified": "2019-12-13T20:33:28.025Z", + "contributors": [ + "wbamberg", + "fscholz", + "Sheppy", + "Editmonkey", + "Jules Papillon" + ] + }, + "Web/CSS/CSS_Images/Using_CSS_gradients": { + "modified": "2019-03-23T23:13:15.166Z", + "contributors": [ + "Bennyville", + "wizAmit", + "slayslot", + "Sebastianz", + "floEdelmann" + ] + }, + "Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests": { + "modified": "2019-10-30T20:00:38.264Z", + "contributors": [ + "sklicek" + ] + }, + "Mozilla/Firefox/Releases/1.5": { + "modified": "2019-03-24T00:04:17.420Z", + "contributors": [ + "wbamberg", + "fscholz", + "Jules Papillon", + "Agoist", + "Umifa", + "Crash" + ] + }, + "Mozilla/Firefox/Releases/3": { + "modified": "2019-03-24T00:04:33.617Z", + "contributors": [ + "wbamberg", + "fscholz", + "niels", + "Lukas Skywalker" + ] + }, + "Mozilla/Firefox/Releases/3.5": { + "modified": "2019-03-24T00:04:29.361Z", + "contributors": [ + "wbamberg", + "Timmi", + "fscholz", + "niels" + ] + }, + "Glossary/Abstraction": { + "modified": "2019-03-23T22:15:58.737Z", + "contributors": [ + "Sebastianz", + "ursingold", + "t1m0fej" + ] + }, + "Glossary/Algorithm": { + "modified": "2019-03-23T22:10:22.994Z", + "contributors": [ + "herbmaier", + "Tyrandus" + ] + }, + "Glossary/Statement": { + "modified": "2019-04-20T19:38:11.191Z", + "contributors": [ + "GreenPepper", + "Tyrandus" + ] + }, + "Glossary/Asynchronous": { + "modified": "2019-06-18T06:50:55.111Z", + "contributors": [ + "dbraun" + ] + }, + "Glossary/Bandwidth": { + "modified": "2019-03-23T22:08:37.747Z", + "contributors": [ + "sigoa", + "Rebecca70" + ] + }, + "Glossary/CORS-safelisted_request_header": { + "modified": "2020-01-30T18:28:06.437Z", + "contributors": [ + "TorbenKoehn" + ] + }, + "Glossary/CSS_preprocessor": { + "modified": "2019-03-18T21:36:27.239Z", + "contributors": [ + "Sixl-Daniel" + ] + }, + "Glossary/Encapsulation": { + "modified": "2020-09-30T06:05:42.392Z", + "contributors": [ + "Klingohle" + ] + }, + "Glossary/Primitive": { + "modified": "2019-03-23T22:46:44.221Z", + "contributors": [ + "Siphalor", + "andreas_inkoeln" + ] + }, + "Glossary/First-class_Function": { + "modified": "2019-03-18T21:30:30.219Z", + "contributors": [ + "king-tom" + ] + }, + "Glossary/Vendor_Prefix": { + "modified": "2019-03-23T22:29:22.756Z", + "contributors": [ + "Tyrandus", + "1903Daniel" + ] + }, + "Glossary/Information_architecture": { + "modified": "2019-03-18T21:18:25.933Z", + "contributors": [ + "tschach" + ] + }, + "Glossary/Class": { + "modified": "2019-03-18T21:37:57.063Z", + "contributors": [ + "duckymirror" + ] + }, + "Glossary/Constructor": { + "modified": "2019-03-23T22:04:35.334Z", + "contributors": [ + "klug_mario" + ] + }, + "Glossary/Empty_element": { + "modified": "2019-03-18T21:32:36.396Z", + "contributors": [ + "axelrindle" + ] + }, + "Glossary/Object": { + "modified": "2019-03-23T22:08:37.828Z", + "contributors": [ + "LazerPhil" + ] + }, + "Glossary/Protocol": { + "modified": "2019-03-23T22:09:31.349Z", + "contributors": [ + "Anonymous" + ] + }, + "Glossary/Type": { + "modified": "2020-04-04T13:54:03.839Z", + "contributors": [ + "axelrindle" + ] + }, + "Glossary/Forbidden_header_name": { + "modified": "2019-03-23T22:03:16.612Z", + "contributors": [ + "timmyRS" + ] + }, + "Learn/Common_questions/How_does_the_Internet_work": { + "modified": "2020-07-16T22:35:36.371Z", + "contributors": [ + "frankwinter", + "NetiHeft" + ] + }, + "Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2020-07-16T22:28:56.210Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "Learn/Getting_started_with_the_web/Dealing_with_files": { + "modified": "2020-07-16T22:34:32.214Z", + "contributors": [ + "michaelhochleitner", + "Aryx", + "vosspl", + "Shidigital", + "Bissmarc", + "janjo", + "d_jan" + ] + }, + "Learn/Getting_started_with_the_web/JavaScript_basics": { + "modified": "2020-07-16T22:35:08.850Z", + "contributors": [ + "jorgemontoyab", + "urewig", + "loicyondjeu", + "ilonaherr", + "SaschaHeyer", + "fxmt", + "Shidigital", + "hapeit", + "danielsimon1", + "nuracubeTranslations", + "QuaGS", + "monja-schreppel", + "Purple-Vampire" + ] + }, + "Learn/Getting_started_with_the_web/How_the_Web_works": { + "modified": "2020-07-16T22:33:59.338Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML": { + "modified": "2020-07-16T22:23:17.212Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Document_and_website_structure": { + "modified": "2020-07-16T22:24:03.053Z", + "contributors": [ + "DiscW0rld", + "fdeberle", + "Shidigital", + "Woehe2010", + "fataly01" + ] + }, + "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals": { + "modified": "2020-07-16T22:23:30.695Z", + "contributors": [ + "Hofei", + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks": { + "modified": "2020-07-16T22:23:43.017Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Debugging_HTML": { + "modified": "2020-07-16T22:24:11.946Z", + "contributors": [ + "LeniTastic", + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting": { + "modified": "2020-07-16T22:23:51.933Z", + "contributors": [ + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML": { + "modified": "2020-07-16T22:22:45.948Z", + "contributors": [ + "PercyGitarrist", + "mprofitl", + "LeifMensing", + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Getting_started": { + "modified": "2020-11-19T12:58:27.172Z", + "contributors": [ + "fiji-flo", + "Kometheus", + "nitramrelpmur", + "Shidigital" + ] + }, + "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter": { + "modified": "2020-07-16T22:23:11.514Z", + "contributors": [ + "DiscW0rld", + "LeniTastic", + "msifrt" + ] + }, + "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content": { + "modified": "2020-07-16T22:24:17.990Z", + "contributors": [ + "DiscW0rld" + ] + }, + "Learn/Forms": { + "modified": "2020-07-16T22:20:54.604Z", + "contributors": [ + "Ryuno-Ki", + "PercyGitarrist", + "F.nn" + ] + }, + "Learn/HTML/Tables/Basics": { + "modified": "2020-07-16T22:25:19.143Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "Learn/JavaScript/Building_blocks/Events": { + "modified": "2020-07-16T22:31:36.524Z", + "contributors": [ + "kaip-e", + "GiovanniHD201E" + ] + }, + "Learn/JavaScript/Building_blocks": { + "modified": "2020-07-16T22:31:06.733Z", + "contributors": [ + "Osslack" + ] + }, + "Learn/JavaScript/First_steps/A_first_splash": { + "modified": "2020-07-16T22:30:16.778Z", + "contributors": [ + "GiovanniHD201E", + "Thomas-Zenkel" + ] + }, + "Learn/JavaScript/First_steps/Silly_story_generator": { + "modified": "2020-07-16T22:31:00.101Z", + "contributors": [ + "Strubinator" + ] + }, + "Learn/JavaScript/First_steps/What_is_JavaScript": { + "modified": "2020-09-29T09:38:57.543Z", + "contributors": [ + "Devoryo", + "mchoeti", + "GreenPepper", + "hpawe01", + "Bissmarc", + "woiddale", + "JorisGutjahr" + ] + }, + "orphaned/Learn/How_to_contribute": { + "modified": "2020-07-16T22:33:42.823Z", + "contributors": [ + "SphinxKnight", + "1000eyes", + "der_rofler" + ] + }, + "Learn/Server-side/First_steps": { + "modified": "2020-07-16T22:36:07.662Z", + "contributors": [ + "LeifMensing", + "Dschubba" + ] + }, + "Learn/Server-side/First_steps/Introduction": { + "modified": "2020-07-16T22:36:12.624Z", + "contributors": [ + "NetiHeft", + "Dschubba" + ] + }, + "Glossary/Localization": { + "modified": "2019-03-24T00:15:25.257Z", + "contributors": [ + "taralushi", + "fscholz", + "WayneSchlegel", + "DirkS", + "maik666", + "René Schwarz", + "Ak120" + ] + }, + "MDN/At_ten/History_of_MDN": { + "modified": "2019-03-23T22:49:53.083Z", + "contributors": [ + "stephaniehobson", + "Sebastianz" + ] + }, + "MDN/At_ten": { + "modified": "2019-03-23T22:49:50.216Z", + "contributors": [ + "1000eyes", + "stephaniehobson", + "Evotopid", + "Sheppy" + ] + }, + "conflicting/MDN/Contribute": { + "modified": "2020-02-19T18:50:24.408Z", + "contributors": [ + "jswisher", + "1000eyes" + ] + }, + "orphaned/MDN/Community/Whats_happening": { + "modified": "2019-03-23T23:27:28.266Z", + "contributors": [ + "wbamberg", + "Sebastianz", + "UweDirk" + ] + }, + "orphaned/MDN/Community": { + "modified": "2019-06-15T16:58:37.273Z", + "contributors": [ + "sklicek", + "rs-github", + "wbamberg", + "BavarianMax", + "Jeremie", + "SvenSaarland", + "msebastian100", + "Stefan_hr4u" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_a_technical_review": { + "modified": "2019-01-16T19:26:44.220Z", + "contributors": [ + "wbamberg", + "jordylol2006", + "Sebastianz" + ] + }, + "orphaned/MDN/Contribute/Howto/Do_an_editorial_review": { + "modified": "2019-01-16T19:26:12.299Z", + "contributors": [ + "wbamberg", + "sigoa", + "Sebastianz" + ] + }, + "orphaned/MDN/Contribute/Howto/Create_an_MDN_account": { + "modified": "2019-07-28T03:19:41.741Z", + "contributors": [ + "wbamberg", + "darkfeile", + "lutzip0", + "Dev201", + "jumpball", + "jogi23", + "Clonkh" + ] + }, + "orphaned/MDN/Contribute/Howto/Tag_JavaScript_pages": { + "modified": "2019-01-16T21:20:05.744Z", + "contributors": [ + "wbamberg", + "hictox" + ] + }, + "orphaned/MDN/Contribute/Howto/Set_the_summary_for_a_page": { + "modified": "2019-01-16T19:16:53.470Z", + "contributors": [ + "wbamberg", + "githubsvc", + "4680", + "maxsu" + ] + }, + "MDN/Guidelines/Writing_style_guide": { + "modified": "2020-09-30T15:28:44.875Z", + "contributors": [ + "chrisdavidmills", + "stephanduesterhoeft", + "jswisher", + "Dschubba", + "wbamberg", + "Jeremie", + "PaddyKfg", + "Montana7755" + ] + }, + "MDN/Tools/KumaScript/Troubleshooting": { + "modified": "2019-01-16T21:24:01.701Z", + "contributors": [ + "wbamberg", + "rolandm" + ] + }, + "MDN/Yari": { + "modified": "2020-04-22T10:45:47.041Z", + "contributors": [ + "clemens.klapp", + "SphinxKnight", + "wbamberg", + "JorisGutjahr", + "Jeremie", + "Sheppy" + ] + }, + "MDN/Structures/Compatibility_tables": { + "modified": "2020-10-15T22:06:38.248Z", + "contributors": [ + "chrisdavidmills", + "thunderhook", + "wbamberg", + "jogemu" + ] + }, + "MDN/About": { + "modified": "2019-09-10T08:51:50.833Z", + "contributors": [ + "SphinxKnight", + "Streamities", + "wbamberg", + "rs-github" + ] + }, + "orphaned/MDN/About/Linking_to_MDN": { + "modified": "2019-01-17T03:01:28.772Z", + "contributors": [ + "wbamberg", + "sklicek" + ] + }, + "Mozilla/Add-ons/WebExtensions/API/bookmarks": { + "modified": "2020-10-15T21:55:55.060Z", + "contributors": [ + "wbamberg", + "nw520", + "matschibatschi" + ] + }, + "Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API": { + "modified": "2019-06-11T16:28:12.442Z", + "contributors": [ + "Patrick5555" + ] + }, + "Mozilla/Add-ons/WebExtensions/Examples": { + "modified": "2019-03-18T21:04:08.698Z", + "contributors": [ + "StefanM" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_first_WebExtension": { + "modified": "2019-07-04T07:03:49.181Z", + "contributors": [ + "trych", + "SyntaxCacao", + "HillOTech", + "Asozialist", + "twizzz", + "serv-inc", + "Draphar", + "flosommerfeld" + ] + }, + "Mozilla/Add-ons/WebExtensions/Your_second_WebExtension": { + "modified": "2019-07-04T06:11:16.199Z", + "contributors": [ + "trych", + "Draphar" + ] + }, + "Mozilla/Developer_guide/So_you_just_built_Firefox": { + "modified": "2019-03-23T22:13:23.971Z", + "contributors": [ + "chrisdavidmills", + "friedger" + ] + }, + "Mozilla/Developer_guide/Source_Code": { + "modified": "2019-03-24T00:04:33.890Z", + "contributors": [ + "chrisdavidmills", + "fscholz", + "Anonymous", + "gamemaster7riesen" + ] + }, + "Web/OpenSearch": { + "modified": "2019-03-24T00:04:54.552Z", + "contributors": [ + "fscholz", + "Lexhawkins" + ] + }, + "orphaned/Plugins/Flash_Activation:_Browser_Comparison": { + "modified": "2019-03-23T22:03:23.868Z", + "contributors": [ + "Artist-sumo", + "Sheppy", + "HoLuLuLu" + ] + }, + "Tools/3D_View": { + "modified": "2020-07-16T22:34:25.058Z", + "contributors": [ + "wbamberg", + "pollti", + "SJW" + ] + }, + "orphaned/Tools/Add-ons": { + "modified": "2020-07-16T22:36:23.223Z", + "contributors": [ + "wbamberg", + "mfluehr" + ] + }, + "Tools/Accessibility_inspector": { + "modified": "2020-07-16T22:36:39.466Z", + "contributors": [ + "hrfischer1983", + "hellschu" + ] + }, + "Tools/Responsive_Design_Mode": { + "modified": "2020-07-16T22:35:21.080Z", + "contributors": [ + "wbamberg", + "mozjan" + ] + }, + "Tools/Browser_Toolbox": { + "modified": "2020-07-16T22:35:55.309Z", + "contributors": [ + "wbamberg", + "res60", + "Dev_Falko", + "Microgamer" + ] + }, + "Tools/Network_Monitor": { + "modified": "2020-07-16T22:35:29.556Z", + "contributors": [ + "wbamberg", + "ThomasLendo" + ] + }, + "Tools/Page_Inspector/How_to/Examine_event_listeners": { + "modified": "2020-07-16T22:34:35.556Z", + "contributors": [ + "wbamberg", + "Sebastianz" + ] + }, + "Tools/Page_Inspector/How_to/Examine_grid_layouts": { + "modified": "2020-07-16T22:34:46.944Z", + "contributors": [ + "oolong32", + "wbamberg", + "Micky261" + ] + }, + "Tools/Page_Inspector/How_to/Edit_fonts": { + "modified": "2020-08-13T20:23:50.743Z", + "contributors": [ + "cama240601", + "GiovanniHD201E" + ] + }, + "Tools/Page_Inspector": { + "modified": "2020-07-16T22:34:26.882Z", + "contributors": [ + "wbamberg", + "maybe", + "mozjan", + "One", + "MikeWalde", + "libelle17" + ] + }, + "Tools/Page_Inspector/Keyboard_shortcuts": { + "modified": "2020-07-16T22:34:50.445Z", + "contributors": [ + "GiovanniHD201E" + ] + }, + "Tools/Shader_Editor": { + "modified": "2020-07-16T22:35:54.224Z", + "contributors": [ + "wbamberg", + "olhaar", + "cgtom" + ] + }, + "Tools/Web_Console/Helpers": { + "modified": "2020-07-16T22:34:11.469Z", + "contributors": [ + "wbamberg", + "AlexFunk", + "mherczegh" + ] + }, + "Tools/Web_Console": { + "modified": "2020-07-16T22:34:04.628Z", + "contributors": [ + "Loilo", + "SphinxKnight", + "talikanews", + "wbamberg", + "realsplatscream", + "kleinegnomfee", + "maybe", + "PsychoMg", + "mozjan" + ] + }, + "orphaned/Tools/WebIDE_clone": { + "modified": "2019-03-23T23:03:21.499Z", + "contributors": [ + "wbamberg", + "VJSchneid", + "maybe", + "AARADEANCA" + ] + }, + "Mozilla/Firefox/Releases/3/Updating_web_applications": { + "modified": "2019-03-24T00:04:30.175Z", + "contributors": [ + "wbamberg", + "Sheppy", + "fscholz", + "niels" + ] + }, + "Web/API/BaseAudioContext/decodeAudioData": { + "modified": "2019-03-23T22:38:20.001Z", + "contributors": [ + "Thalhammer" + ] + }, + "Web/API/File/type": { + "modified": "2020-10-15T22:20:09.678Z", + "contributors": [ + "sklicek" + ] + }, + "Web/API/File/Using_files_from_web_applications": { + "modified": "2019-03-18T20:49:17.436Z", + "contributors": [ + "Holger.Persch", + "MatthiasApsel", + "gunnarbittersmann", + "chrisdavidmills", + "icy", + "matschu" + ] + }, + "Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB": { + "modified": "2020-01-13T04:47:55.526Z", + "contributors": [ + "chrisdavidmills", + "gmagholder", + "Julini" + ] + }, + "Web/API/IndexedDB_API/Using_IndexedDB": { + "modified": "2020-01-13T04:47:56.201Z", + "contributors": [ + "chrisdavidmills", + "p.root", + "mdieblich", + "floheller", + "HendrikRunte", + "Nys", + "Julini" + ] + }, + "Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers": { + "modified": "2019-03-23T22:33:54.067Z", + "contributors": [ + "chrisdavidmills", + "Faibk" + ] + }, + "Web/API/HTMLElement/innerText": { + "modified": "2019-03-23T22:05:48.154Z", + "contributors": [ + "dekatko" + ] + }, + "Web/API/Fullscreen_API": { + "modified": "2019-07-07T13:00:37.918Z", + "contributors": [ + "wbamberg", + "lazercaveman", + "Johann150", + "axelrindle" + ] + }, + "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL": { + "modified": "2019-03-24T00:04:47.020Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL": { + "modified": "2019-03-24T00:04:47.741Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL": { + "modified": "2019-03-24T00:04:49.766Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL": { + "modified": "2019-03-24T00:05:30.371Z", + "contributors": [ + "noxafy", + "Oliver_Schafeld", + "H3ndr1k", + "xhallix", + "manni66", + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL": { + "modified": "2019-03-24T00:09:11.465Z", + "contributors": [ + "fscholz", + "teoli", + "WNC7" + ] + }, + "Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context": { + "modified": "2019-03-18T20:49:18.784Z", + "contributors": [ + "jsinge", + "noxafy", + "fscholz", + "teoli", + "TimN", + "WNC7" + ] + }, + "Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL": { + "modified": "2019-03-18T21:15:16.400Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL": { + "modified": "2019-03-24T00:04:48.015Z", + "contributors": [ + "fscholz", + "teoli" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/btoa": { + "modified": "2019-03-23T22:50:32.544Z", + "contributors": [ + "cami" + ] + }, + "Web/API/WindowOrWorkerGlobalScope/setTimeout": { + "modified": "2019-03-23T23:36:28.621Z", + "contributors": [ + "mdnde", + "Eschon", + "fscholz", + "c0ffm3k4r", + "wartab" + ] + }, + "Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets": { + "modified": "2019-03-23T23:17:39.742Z", + "contributors": [ + "juliankern", + "christophfink", + "teoli", + "eminor" + ] + }, + "Web/Accessibility/ARIA/ARIA_Live_Regions": { + "modified": "2019-03-23T23:15:24.210Z", + "contributors": [ + "teoli", + "eminor" + ] + }, + "Web/Accessibility/ARIA/ARIA_Techniques": { + "modified": "2019-03-18T21:43:56.504Z", + "contributors": [ + "juliankern" + ] + }, + "Web/Accessibility/ARIA": { + "modified": "2019-03-23T23:21:04.985Z", + "contributors": [ + "a.lippold", + "marc-se", + "iMeta", + "eminor", + "teoli" + ] + }, + "Web/Accessibility": { + "modified": "2019-09-09T14:09:32.470Z", + "contributors": [ + "SphinxKnight", + "alippold", + "teoli", + "fscholz", + "Mgalpha" + ] + }, + "Web/Accessibility/Keyboard-navigable_JavaScript_widgets": { + "modified": "2019-03-23T23:11:54.393Z", + "contributors": [ + "eminor" + ] + }, + "Web/CSS/:user-invalid": { + "modified": "2019-03-23T22:42:35.620Z", + "contributors": [ + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/:autofill": { + "modified": "2019-03-23T22:43:43.075Z", + "contributors": [ + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/box-flex": { + "modified": "2020-10-15T21:40:01.205Z", + "contributors": [ + "chrisdavidmills", + "SJW", + "teoli", + "crasher666", + "Sebastianz" + ] + }, + "Web/CSS/box-pack": { + "modified": "2020-10-15T21:39:56.493Z", + "contributors": [ + "SJW", + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/user-modify": { + "modified": "2019-03-24T00:04:27.330Z", + "contributors": [ + "teoli", + "Sebastianz", + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/user-select": { + "modified": "2019-03-24T00:03:51.678Z", + "contributors": [ + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/Adjacent_sibling_combinator": { + "modified": "2020-10-15T21:39:56.944Z", + "contributors": [ + "ExE-Boss", + "Sebastianz" + ] + }, + "Web/CSS/Attribute_selectors": { + "modified": "2020-10-15T21:25:18.388Z", + "contributors": [ + "SJW", + "Sebastianz", + "hansspiess", + "fscholz", + "iGadget", + "J5lx" + ] + }, + "Web/CSS/@media/aural": { + "modified": "2019-03-23T22:45:45.488Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/computed_value": { + "modified": "2019-03-23T23:13:10.466Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Animations/Using_CSS_animations": { + "modified": "2020-04-22T06:24:42.427Z", + "contributors": [ + "Ryuno-Ki", + "hamvocke", + "hudri", + "JorisGutjahr", + "awaigand", + "Honig", + "connexo", + "SphinxKnight", + "teoli", + "Simu" + ] + }, + "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "modified": "2019-03-18T20:43:44.623Z", + "contributors": [ + "BychekRU", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model": { + "modified": "2019-03-24T00:03:52.006Z", + "contributors": [ + "Sebastianz", + "fscholz", + "SJW", + "Michael2402" + ] + }, + "Web/CSS/CSS_Box_Model": { + "modified": "2019-03-23T22:43:35.662Z", + "contributors": [ + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_Box_Model/Mastering_margin_collapsing": { + "modified": "2019-03-23T22:41:18.965Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Colors/Color_picker_tool": { + "modified": "2019-03-23T22:45:05.902Z", + "contributors": [ + "22samuelk" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items": { + "modified": "2020-10-26T12:12:41.192Z", + "contributors": [ + "Raqhael" + ] + }, + "Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T21:33:01.162Z", + "contributors": [ + "prproksch", + "td8" + ] + }, + "Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters": { + "modified": "2019-03-23T22:41:18.157Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Lists_and_Counters/Consistent_list_indentation": { + "modified": "2019-03-23T22:42:20.521Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/CSS_Masking": { + "modified": "2020-10-15T21:41:26.449Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Namespaces": { + "modified": "2020-10-15T21:41:25.833Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/Reference": { + "modified": "2019-03-24T00:14:12.141Z", + "contributors": [ + "SJW", + "plathub", + "Claas", + "condottiero1985", + "Sebastianz", + "fscholz", + "tregagnon", + "Jürgen Jeka", + "The Witcher", + "Michael2402", + "Jech", + "Nathymig" + ] + }, + "Web/CSS/CSS_Text_Decoration": { + "modified": "2019-07-23T07:57:58.435Z", + "contributors": [ + "SphinxKnight", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Transforms/Using_CSS_transforms": { + "modified": "2020-12-14T10:35:58.609Z", + "contributors": [ + "Johuspect", + "Sebastianz" + ] + }, + "Web/CSS/CSS_Types": { + "modified": "2020-04-21T12:32:32.615Z", + "contributors": [ + "kleinesfilmroellchen", + "Claas" + ] + }, + "Web/CSS/Replaced_element": { + "modified": "2019-03-23T22:00:32.824Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/color_value": { + "modified": "2020-10-15T21:14:08.521Z", + "contributors": [ + "Borgitowner", + "SJW", + "Sebastianz", + "Simplexible", + "fscholz", + "Jürgen Jeka", + "Michael2402" + ] + }, + "Web/CSS/ID_selectors": { + "modified": "2020-10-15T21:41:21.317Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "orphaned/Web/CSS/Index": { + "modified": "2019-01-16T19:56:04.663Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/initial_value": { + "modified": "2019-03-23T22:18:48.927Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Child_combinator": { + "modified": "2020-10-15T21:41:20.031Z", + "contributors": [ + "SJW", + "iCON", + "Sebastianz" + ] + }, + "Web/CSS/Class_selectors": { + "modified": "2020-10-15T21:41:19.898Z", + "contributors": [ + "SJW", + "Sebastianz" + ] + }, + "Web/CSS/Shorthand_properties": { + "modified": "2020-11-22T12:51:55.372Z", + "contributors": [ + "Johuspect" + ] + }, + "Web/CSS/CSS_Motion_Path": { + "modified": "2019-03-23T22:43:35.895Z", + "contributors": [ + "Sebastianz" + ] + }, + "orphaned/MDN/Contribute/Howto/Document_a_CSS_property/Property_template": { + "modified": "2019-01-16T14:33:16.131Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Sebastianz", + "fscholz", + "ethertank", + "The Witcher", + "Michael2402" + ] + }, + "Web/CSS/Specificity": { + "modified": "2019-03-23T23:11:49.533Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/actual_value": { + "modified": "2019-03-23T22:43:32.481Z", + "contributors": [ + "schlagi123", + "Sebastianz" + ] + }, + "Web/CSS/inheritance": { + "modified": "2019-03-23T23:13:09.412Z", + "contributors": [ + "Sebastianz" + ] + }, + "Web/CSS/Value_definition_syntax": { + "modified": "2019-03-23T23:11:56.504Z", + "contributors": [ + "Sebastianz", + "Prinz_Rana", + "Krenair", + "prayash" + ] + }, + "Web/CSS/overflow-wrap": { + "modified": "2020-10-15T21:38:14.535Z", + "contributors": [ + "SJW", + "ksuess", + "screeny05", + "Clubfan22", + "fscholz", + "Sebastianz", + "spiegelp" + ] + }, + "Web/API/HTMLElement/change_event": { + "modified": "2019-03-23T23:08:15.170Z", + "contributors": [ + "fscholz", + "spiegelp" + ] + }, + "Web/API/Window/DOMContentLoaded_event": { + "modified": "2019-04-30T14:16:07.184Z", + "contributors": [ + "wbamberg", + "timvancleef", + "forrestkirby", + "fscholz", + "Sewi", + "horlabs" + ] + }, + "Web/API/Window/load_event": { + "modified": "2019-09-11T09:06:16.530Z", + "contributors": [ + "wbamberg", + "fscholz", + "LeoDecking" + ] + }, + "Web/API/Document/readystatechange_event": { + "modified": "2019-03-23T22:13:59.735Z", + "contributors": [ + "fscholz", + "mdnde", + "cussack", + "Lepstr" + ] + }, + "Web/Guide/AJAX/Getting_Started": { + "modified": "2020-08-11T10:37:53.338Z", + "contributors": [ + "merlincom" + ] + }, + "Web/API/History_API": { + "modified": "2019-03-23T23:28:10.854Z", + "contributors": [ + "wanst", + "NiklasMerz", + "daniel-evers", + "Adowrath", + "serv-inc", + "Oliver_Schafeld", + "BugHunter2k", + "christian314159", + "darksider3" + ] + }, + "Web/API/Canvas_API/Tutorial/Advanced_animations": { + "modified": "2019-03-23T22:48:52.383Z", + "contributors": [ + "teoli", + "jumpball" + ] + }, + "Web/API/Canvas_API/Tutorial/Applying_styles_and_colors": { + "modified": "2019-10-10T16:33:46.525Z", + "contributors": [ + "Sebastianz", + "GeorgKern" + ] + }, + "Web/API/Canvas_API/Tutorial/Basic_animations": { + "modified": "2019-03-18T21:45:29.279Z", + "contributors": [ + "RmnWtnkmp" + ] + }, + "Web/API/Canvas_API/Tutorial/Using_images": { + "modified": "2019-03-23T23:12:04.746Z", + "contributors": [ + "sombrastudios", + "teoli", + "Leun4m", + "thedaft", + "pixunil" + ] + }, + "Web/API/Canvas_API/Tutorial/Optimizing_canvas": { + "modified": "2019-03-18T21:47:09.896Z", + "contributors": [ + "SimonBuxx" + ] + }, + "Web/API/Canvas_API/Tutorial/Drawing_text": { + "modified": "2019-03-18T21:38:17.565Z", + "contributors": [ + "Johann150" + ] + }, + "Web/API/Canvas_API/Tutorial/Drawing_shapes": { + "modified": "2019-10-06T12:20:20.273Z", + "contributors": [ + "I_I", + "oezpeda", + "Siphalor", + "teoli", + "Leun4m", + "thedaft", + "pixunil" + ] + }, + "Web/API/Canvas_API/Tutorial/Basic_usage": { + "modified": "2019-10-06T12:11:53.548Z", + "contributors": [ + "I_I", + "fheckl", + "FelixLehmann", + "P5ych0", + "teoli", + "Leun4m", + "medium-endian", + "pixunil" + ] + }, + "Web/API/Canvas_API/Tutorial": { + "modified": "2020-07-31T10:20:16.447Z", + "contributors": [ + "mgrubinger", + "sigoa", + "surferboy250", + "GeorgKern", + "Leun4m", + "medium-endian", + "manni66", + "pixunil" + ] + }, + "Web/Guide/HTML/Editable_content": { + "modified": "2020-02-12T02:09:56.043Z", + "contributors": [ + "blackjack4494", + "lxdiamond" + ] + }, + "Web/Guide/HTML/Content_categories": { + "modified": "2020-07-16T11:12:55.534Z", + "contributors": [ + "matthiasulrich", + "Sebastianz", + "jumpball" + ] + }, + "Web/Guide/HTML/Using_HTML_sections_and_outlines": { + "modified": "2019-03-18T20:37:20.242Z", + "contributors": [ + "SebinNyshkim", + "BlackRebell89" + ] + }, + "Web/HTML/Block-level_elements": { + "modified": "2020-05-07T06:16:30.382Z", + "contributors": [ + "zuzuzu", + "Loilo", + "mdschweda", + "drgn", + "VJSchneid", + "teoli", + "lukas.oppermann" + ] + }, + "Web/API/Canvas_API": { + "modified": "2019-03-23T23:16:11.989Z", + "contributors": [ + "sigoa", + "petacat", + "Aloso", + "barning", + "andreas.remdt" + ] + }, + "Web/HTML/Element/Heading_Elements": { + "modified": "2019-03-24T00:04:35.426Z", + "contributors": [ + "schlagi123", + "teoli", + "fscholz" + ] + }, + "Web/API/HTMLHeadElement": { + "modified": "2019-03-24T00:04:41.043Z", + "contributors": [ + "schlagi123", + "teoli", + "fscholz", + "Crash" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise": { - "modified": "2020-09-11T07:37:54.436Z", + "Web/HTML/Global_attributes/accesskey": { + "modified": "2020-10-15T22:03:59.818Z", "contributors": [ - "sebenns", - "semmelbroesl", - "Dschubba", - "mrmoree", - "CorvusRohan", - "jnnkm", - "SphinxKnight", - "0xflotus", - "HendrikRunte", - "1blankz7" + "Claas" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/all": { - "modified": "2020-10-15T21:33:48.453Z", + "Web/HTML/Global_attributes/autocapitalize": { + "modified": "2020-10-15T22:05:02.265Z", "contributors": [ - "Dschubba", - "anniekao", - "SphinxKnight", - "kdex", - "davidrockt", - "Sharian" + "alaskaa" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/finally": { - "modified": "2020-10-15T22:05:15.072Z", + "Web/HTML/Global_attributes/class": { + "modified": "2019-03-23T22:53:31.655Z", "contributors": [ - "tminich", - "wasabiNorman" + "sigoa", + "lxdiamond" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/race": { - "modified": "2020-10-15T22:04:13.810Z", + "Web/HTML/Global_attributes/contenteditable": { + "modified": "2019-03-18T21:36:35.603Z", "contributors": [ - "pkimmlinger", - "cepharum", - "DaAitch" + "4223", + "Claas" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/reject": { - "modified": "2020-10-15T21:53:18.040Z", + "Web/HTML/Global_attributes/dir": { + "modified": "2020-10-15T22:05:39.463Z", "contributors": [ - "ManuelKiessling", - "marco-a", - "modev" + "RewoSiedge" ] }, - "Web/JavaScript/Reference/Global_Objects/Promise/then": { - "modified": "2019-03-23T22:48:57.241Z", + "Web/HTML/Global_attributes/draggable": { + "modified": "2019-03-23T22:47:23.466Z", "contributors": [ - "dbraun", - "SphinxKnight", - "kdex", - "DanielMSchmidt", - "florianb" + "schlagi123", + "RmnWtnkmp", + "rstarke-dd" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError": { - "modified": "2019-03-23T22:12:22.680Z", + "orphaned/Web/HTML/Global_attributes/dropzone": { + "modified": "2020-10-15T21:40:11.332Z", "contributors": [ - "jameshkramer" + "kaljak", + "RmnWtnkmp" ] }, - "Web/JavaScript/Reference/Global_Objects/RangeError/prototype": { - "modified": "2019-03-23T22:12:08.670Z", + "Web/HTML/Global_attributes/hidden": { + "modified": "2020-10-15T21:38:08.779Z", "contributors": [ - "ThomasFe" + "fscholz", + "Oliver_Schafeld", + "RmnWtnkmp", + "skl" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect": { - "modified": "2020-10-15T22:13:20.309Z", + "Web/HTML/Global_attributes/id": { + "modified": "2019-03-18T21:47:05.388Z", "contributors": [ - "Tjerk-Haaye-Henricus" + "BlaM", + "skl" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/apply": { - "modified": "2020-10-15T22:13:35.547Z", + "Web/HTML/Global_attributes": { + "modified": "2020-10-15T21:26:14.135Z", "contributors": [ - "Tjerk-Haaye-Henricus" + "LoVo666", + "qjubic", + "pixunil" ] }, - "Web/JavaScript/Reference/Global_Objects/Reflect/construct": { - "modified": "2020-10-15T22:13:50.733Z", + "Web/HTML/Global_attributes/inputmode": { + "modified": "2020-10-15T22:14:49.189Z", "contributors": [ - "Tjerk-Haaye-Henricus" + "sklicek" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp": { - "modified": "2020-08-17T16:16:42.469Z", + "Web/HTML/Global_attributes/is": { + "modified": "2020-10-15T22:23:53.794Z", "contributors": [ - "MoPaMo", - "ModProg", - "D3rT1m", - "wbamberg", - "rmcproductions", - "Wiimm", - "doeck", - "StevenS77", - "Abro", - "Simmarith", - "fscholz", - "powerswitch", - "def00111", - "clone", - "lightspirit" + "LoVo666" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/flags": { - "modified": "2020-10-15T22:08:09.837Z", + "Web/HTML/Global_attributes/contextmenu": { + "modified": "2020-03-26T16:11:41.701Z", "contributors": [ - "vortami" + "MarcusRiemer", + "SphinxKnight", + "ctexxx" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/input": { - "modified": "2019-03-23T22:37:59.302Z", + "Web/HTML/Global_attributes/lang": { + "modified": "2020-10-15T21:51:21.501Z", "contributors": [ - "teoli", - "RewoSiedge", - "jumpball" + "kaljak", + "RmnWtnkmp" ] }, - "Web/JavaScript/Reference/Global_Objects/RegExp/test": { - "modified": "2020-10-15T22:29:51.696Z", + "Web/HTML/Global_attributes/style": { + "modified": "2020-08-18T11:36:01.283Z", "contributors": [ - "MrFootwork", - "jan.kaiser1952" + "FelixSchwarz", + "tairt", + "RmnWtnkmp" ] }, - "Web/JavaScript/Reference/Global_Objects/Set": { - "modified": "2020-11-14T21:15:03.891Z", + "Web/HTML/Global_attributes/tabindex": { + "modified": "2020-10-15T22:17:29.883Z", "contributors": [ - "ottahe", - "MichaelGellings", - "cami", - "AndyLnd", - "mdnde2", - "Flonk", - "schlagi123", - "sspringer82" + "Michael-1", + "vssn" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/add": { - "modified": "2020-11-14T20:25:16.685Z", + "Web/HTML/Global_attributes/title": { + "modified": "2019-03-23T22:32:47.288Z", "contributors": [ - "ottahe" + "alaskaa", + "klausinger", + "eluchsinger" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/delete": { - "modified": "2020-11-14T20:17:34.638Z", + "Web/HTML/Global_attributes/translate": { + "modified": "2019-10-21T21:28:23.890Z", "contributors": [ - "ottahe" + "LoVo666" ] }, - "Web/JavaScript/Reference/Global_Objects/Set/has": { - "modified": "2019-03-23T22:10:20.086Z", + "Web/Guide/HTML/HTML5": { + "modified": "2019-03-23T23:33:45.828Z", "contributors": [ - "mdnde2", - "psychotammi" + "suriyaa", + "teoli", + "timausk", + "thorsten.rinne", + "matze", + "nothine" ] }, - "Web/JavaScript/Reference/Global_Objects/String": { - "modified": "2020-10-15T21:30:10.579Z", + "Web/HTML/Inline_elements": { + "modified": "2019-03-23T23:18:01.940Z", "contributors": [ - "kdex", - "Anonymous", - "schlagi123", - "fscholz" + "Aryx", + "petergloor", + "teoli", + "lukas.oppermann" ] }, - "Web/JavaScript/Reference/Global_Objects/String/Trim": { - "modified": "2020-10-15T21:34:43.401Z", + "Web/HTML/Reference": { + "modified": "2019-09-09T07:16:32.387Z", "contributors": [ - "schlagi123", - "janpawellek", - "Codebryo" + "SphinxKnight", + "mprofitl", + "wbamberg", + "legalbit" ] }, - "Web/JavaScript/Reference/Global_Objects/String/TrimLeft": { - "modified": "2020-10-15T21:48:35.629Z", + "Web/HTTP/Caching": { + "modified": "2019-03-23T23:05:15.113Z", "contributors": [ - "teoli", - "schlagi123" + "jugmac00", + "Johann150", + "VoodooDS" ] }, - "Web/JavaScript/Reference/Global_Objects/String/TrimRight": { - "modified": "2020-10-15T21:47:40.889Z", + "Web/HTTP/CORS/Errors/CORSMissingAllowHeaderFromPreflight": { + "modified": "2020-03-31T09:46:01.871Z", "contributors": [ - "teoli", - "schlagi123", - "Zertrax" + "cradloff" ] }, - "Web/JavaScript/Reference/Global_Objects/String/charAt": { - "modified": "2019-05-13T20:26:27.144Z", + "Web/HTTP/CORS/Errors/CORSMissingAllowOrigin": { + "modified": "2019-07-24T08:48:05.259Z", "contributors": [ - "Huegelkoenig", - "PascalAOMS" + "kai-oswald", + "SAvB" ] }, - "Web/JavaScript/Reference/Global_Objects/String/concat": { - "modified": "2019-03-23T22:36:31.275Z", + "Web/JavaScript/Enumerability_and_ownership_of_properties": { + "modified": "2020-05-27T07:04:55.127Z", "contributors": [ - "schlagi123", - "Saschlong" + "zuzuzu" ] }, - "Web/JavaScript/Reference/Global_Objects/String/endsWith": { - "modified": "2019-03-23T22:28:08.246Z", + "Web/JavaScript/Data_structures": { + "modified": "2020-03-12T19:40:01.103Z", "contributors": [ - "THX138" + "BenjHawk", + "GR_Fuchs", + "fL03", + "schlagi123", + "twarncke", + "yampus", + "ChristianLuxem", + "nodexo", + "fscholz", + "siggi-heltau", + "FabianBeiner", + "spiegelp" ] }, - "Web/JavaScript/Reference/Global_Objects/String/fromCharCode": { - "modified": "2019-03-23T22:22:43.486Z", + "Web/JavaScript/A_re-introduction_to_JavaScript": { + "modified": "2020-05-19T18:28:46.915Z", "contributors": [ - "NielsNet", - "Huargh" + "AlexanderLaska", + "Timbuktu1982", + "Dusty4848", + "Meiqian", + "Nikolai_Kucksdorf", + "kisjoke91", + "Space42", + "Univream", + "tomscholz", + "schlagi123", + "PinheadLarry", + "sigoa", + "acetous", + "martinhoffmann", + "Coke_and_Pepsi", + "ibafluss", + "creitiv", + "fscholz", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/includes": { - "modified": "2020-10-15T21:49:46.614Z", + "Web/XPath/Introduction_to_using_XPath_in_JavaScript": { + "modified": "2019-03-23T22:12:16.123Z", "contributors": [ - "vssn", - "kdex", - "PascalAOMS" + "chrisdavidmills", + "QClonesClan" ] }, - "Web/JavaScript/Reference/Global_Objects/String/indexOf": { - "modified": "2019-03-23T23:04:28.715Z", + "Web/JavaScript/Guide/Expressions_and_Operators": { + "modified": "2020-03-12T19:38:40.241Z", "contributors": [ - "JohannesKuehnel", + "occcy", + "stefboll", + "HaayeHenricus", "schlagi123", - "sroe", - "pascalhofmann", - "c4re" - ] - }, - "Web/JavaScript/Reference/Global_Objects/String/lastIndexOf": { - "modified": "2019-03-23T22:56:44.027Z", - "contributors": [ - "BenB", - "Chips100", - "flottokarotto" + "MelanieVeigl", + "Kevinci", + "fscholz", + "DavidWalsh", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/length": { - "modified": "2020-10-15T21:34:41.966Z", + "Web/JavaScript/Guide/Introduction": { + "modified": "2020-03-12T19:40:52.952Z", "contributors": [ - "Stuhl", + "woiddale", "schlagi123", - "labcode-de", - "flottokarotto" + "aldec-dv", + "NedNisW", + "janjo", + "Chtheile", + "miniemuff", + "fscholz", + "Sir.Codewright" ] }, - "Web/JavaScript/Reference/Global_Objects/String/match": { - "modified": "2020-10-15T21:54:33.157Z", + "Web/JavaScript/Guide/Details_of_the_Object_Model": { + "modified": "2020-10-03T02:52:53.149Z", "contributors": [ - "alberts+", - "d4rkne55", - "Tosch110", - "afoeder", - "tobiasherber" + "c0dewalker", + "wbamberg", + "schlagi123", + "sigoa", + "DoctypeRosenthal", + "Venhaus", + "crasher666", + "IngoB", + "fscholz", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/prototype": { - "modified": "2020-10-15T22:24:44.810Z", + "Web/JavaScript/Guide/Functions": { + "modified": "2020-03-12T19:38:37.078Z", "contributors": [ - "Symtex99" + "dmho", + "cami", + "loicyondjeu", + "stefboll", + "woiddale", + "schlagi123", + "b-lack", + "vetoCode", + "fscholz", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/raw": { - "modified": "2019-03-23T22:34:12.947Z", + "Web/JavaScript/Guide/Grammar_and_types": { + "modified": "2020-09-16T18:03:08.891Z", "contributors": [ - "kdex", - "bfncs", + "FFFutureflo", + "Tionran", "schlagi123", - "cnu301" + "TomasRiker", + "aldec-dv", + "SaschaHeyer", + "yampus", + "FocusCookie", + "Randomfinger", + "NedNisW", + "vetoCode", + "didierCH", + "baxstar", + "fscholz", + "siggi-heltau", + "eminor", + "NickRussler", + "Hans_Mueller" ] }, - "Web/JavaScript/Reference/Global_Objects/String/repeat": { - "modified": "2020-10-15T22:06:26.477Z", + "Web/JavaScript/Guide/Control_flow_and_error_handling": { + "modified": "2020-03-12T19:37:55.717Z", "contributors": [ - "AlexWayhill" + "cami", + "deklesen", + "woiddale", + "schlagi123", + "SaschaHeyer", + "PreCodeEU", + "StevenS77", + "jwhitlock", + "KarolineCat", + "fscholz", + "vsenol", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/replace": { - "modified": "2019-11-20T12:28:26.785Z", + "Web/JavaScript/Guide/Working_with_Objects": { + "modified": "2020-03-12T19:38:32.446Z", "contributors": [ - "fools-mate", - "danieldiekmeier", - "kkoop", - "HdHeiniDev", - "giffeler", - "TobiGe", - "fancyFranci", "schlagi123", - "Saschlong", - "mower", - "tspaeth", + "Dr-Oetker", + "SphinxKnight", + "papper371", + "timosperisen", + "serv-inc", + "fw-zirkusdigitalo", "fscholz", - "powerswitch" + "DavidWalsh", + "stephaniehobson", + "cyclodev", + "eminor" ] }, - "Web/JavaScript/Reference/Global_Objects/String/slice": { - "modified": "2019-03-23T22:18:04.121Z", + "Web/JavaScript/Guide/Loops_and_iteration": { + "modified": "2020-03-12T19:43:05.832Z", "contributors": [ - "napengam", - "didierCH", - "jay-bricksoft" + "schlagi123", + "j0ck", + "moreadrenalin" ] }, - "Web/JavaScript/Reference/Global_Objects/String/split": { - "modified": "2020-10-15T21:34:44.394Z", + "Web/JavaScript/Guide/Text_formatting": { + "modified": "2020-03-12T19:46:53.213Z", "contributors": [ - "SebinNyshkim", - "Ruupatt", - "shaedrich", - "virtusmaior", - "josephinepanda" + "schlagi123", + "patpir", + "SEBv15" ] }, - "Web/JavaScript/Reference/Global_Objects/String/startsWith": { - "modified": "2019-09-27T21:50:55.652Z", + "Web/JavaScript/JavaScript_technologies_overview": { + "modified": "2020-03-12T19:39:42.418Z", "contributors": [ - "daluege", - "MWojt", - "kdex", - "Aaric", - "schlagi123", - "christ2go" + "lesch", + "fl1p", + "spiegelp" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substr": { - "modified": "2019-03-26T09:57:55.345Z", + "Web/JavaScript/Reference/Errors/Already_has_pragma": { + "modified": "2020-03-12T19:47:20.172Z", "contributors": [ - "F4k3rzZ", - "schlagi123", - "jazzpi" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/String/substring": { - "modified": "2019-05-22T10:50:37.923Z", + "Web/JavaScript/Reference/Errors/Array_sort_argument": { + "modified": "2020-03-12T19:47:33.148Z", "contributors": [ - "DragonPerl", - "thebigbla", - "KillerCodeMonkey" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/String/suchen": { - "modified": "2020-10-15T22:11:40.635Z", + "Web/JavaScript/Reference/Errors/Bad_octal": { + "modified": "2020-03-12T19:47:25.600Z", "contributors": [ - "tobipch", - "blackjack4494", - "Cr4zyG4m3rLP" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toLowerCase": { - "modified": "2020-10-15T21:37:54.853Z", + "Web/JavaScript/Reference/Errors/Bad_radix": { + "modified": "2020-03-12T19:47:40.678Z", "contributors": [ - "schlagi123", - "Chips100" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/String/toUpperCase": { - "modified": "2019-03-23T22:31:03.601Z", + "Web/JavaScript/Reference/Errors/Bad_regexp_flag": { + "modified": "2020-03-12T19:47:43.378Z", "contributors": [ - "nextlevelshit", "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError": { - "modified": "2020-10-15T21:46:23.938Z", + "Web/JavaScript/Reference/Errors/Bad_return_or_yield": { + "modified": "2020-03-12T19:47:36.755Z", "contributors": [ - "schlagi123", - "fscholz" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype": { - "modified": "2020-10-15T21:46:29.639Z", + "Web/JavaScript/Reference/Errors/Called_on_incompatible_type": { + "modified": "2020-03-12T19:47:23.087Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError": { - "modified": "2020-10-15T21:51:09.089Z", + "Web/JavaScript/Reference/Errors/Cant_access_lexical_declaration_before_init": { + "modified": "2020-03-12T19:47:39.951Z", "contributors": [ - "schlagi123", - "Sheggy" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/TypeError/prototype": { - "modified": "2020-10-15T21:58:39.373Z", + "Web/JavaScript/Reference/Errors/Cant_access_property": { + "modified": "2020-03-12T19:48:57.195Z", "contributors": [ - "schlagi123", - "Sheggy" + "micschwarz" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly": { - "modified": "2020-10-15T22:14:29.365Z", + "Web/JavaScript/Reference/Errors/Cant_define_property_object_not_extensible": { + "modified": "2020-03-12T19:47:37.913Z", "contributors": [ - "vssn" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compile": { - "modified": "2020-10-15T22:14:53.372Z", + "Web/JavaScript/Reference/Errors/Cant_delete": { + "modified": "2020-03-12T19:47:33.700Z", "contributors": [ - "vssn" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/WebAssembly/compileStreaming": { - "modified": "2020-10-15T22:15:11.252Z", + "Web/JavaScript/Reference/Errors/Cant_redefine_property": { + "modified": "2020-03-12T19:47:33.994Z", "contributors": [ - "vssn" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/decodeURIComponent": { - "modified": "2020-03-12T19:44:41.805Z", + "Web/JavaScript/Reference/Errors/Cyclic_object_value": { + "modified": "2020-03-12T19:47:32.067Z", "contributors": [ - "Saerdn" + "martinr1604", + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURI": { - "modified": "2020-03-12T19:46:14.428Z", + "Web/JavaScript/Reference/Errors/Dead_object": { + "modified": "2020-03-12T19:47:34.842Z", "contributors": [ - "eras0r", - "knurzl" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/encodeURIComponent": { - "modified": "2020-03-12T19:42:09.480Z", - "contributors": [ - "giffeler", - "kaenganxt", - "dbohn", - "ViciousPecan" + "Web/JavaScript/Reference/Errors/Delete_in_strict_mode": { + "modified": "2020-03-12T19:47:47.727Z", + "contributors": [ + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/escape": { - "modified": "2020-03-12T19:44:36.899Z", + "Web/JavaScript/Reference/Errors/Deprecated_caller_or_arguments_usage": { + "modified": "2020-03-12T19:47:44.593Z", "contributors": [ - "gappeh" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/globalThis": { - "modified": "2020-10-15T22:34:14.804Z", + "Web/JavaScript/Reference/Errors/Deprecated_expression_closures": { + "modified": "2020-03-12T19:47:23.525Z", "contributors": [ - "vssn" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/isFinite": { - "modified": "2020-10-15T21:32:05.093Z", + "Web/JavaScript/Reference/Errors/Deprecated_octal": { + "modified": "2020-03-12T19:47:46.456Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/isNaN": { - "modified": "2020-10-15T21:32:07.461Z", + "Web/JavaScript/Reference/Errors/Deprecated_source_map_pragma": { + "modified": "2020-03-12T19:47:46.265Z", "contributors": [ - "Steditor", - "schlagi123", - "SerkanSipahi", - "mazilema", - "zf2timo" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/null": { - "modified": "2020-10-15T21:32:16.691Z", + "Web/JavaScript/Reference/Errors/Deprecated_String_generics": { + "modified": "2020-03-12T19:47:17.153Z", "contributors": [ - "schlagi123", - "HolgerJeromin", - "cuatro" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/parseFloat": { - "modified": "2020-10-15T21:34:09.121Z", + "Web/JavaScript/Reference/Errors/Deprecated_toLocaleFormat": { + "modified": "2020-03-12T19:47:24.103Z", "contributors": [ - "hellerim", - "schlagi123", - "bsotodo", - "crood" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/parseInt": { - "modified": "2020-10-15T21:45:22.117Z", + "Web/JavaScript/Reference/Errors/Equal_as_assign": { + "modified": "2020-03-12T19:47:33.976Z", "contributors": [ - "schlagi123", - "giffeler", - "macahi", - "mazilema" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/undefined": { - "modified": "2020-10-15T21:32:16.777Z", + "Web/JavaScript/Reference/Errors/For-each-in_loops_are_deprecated": { + "modified": "2020-03-12T19:47:22.797Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/unescape": { - "modified": "2020-03-12T19:41:42.907Z", + "Web/JavaScript/Reference/Errors/Getter_only": { + "modified": "2020-03-12T19:47:33.589Z", "contributors": [ - "thusslack" + "schlagi123" ] }, - "Web/JavaScript/Reference/Global_Objects/uneval": { - "modified": "2020-03-12T19:44:53.530Z", + "Web/JavaScript/Reference/Errors/Identifier_after_number": { + "modified": "2020-03-12T19:47:39.577Z", "contributors": [ - "teoli", - "SamBrishes" + "schlagi123" ] }, - "Web/JavaScript/Reference/Iteration_protocols": { - "modified": "2020-03-12T19:47:50.502Z", + "Web/JavaScript/Reference/Errors/Illegal_character": { + "modified": "2020-03-12T19:47:40.583Z", "contributors": [ - "P215W", "schlagi123" ] }, - "Web/JavaScript/Reference/Klassen": { - "modified": "2020-03-12T19:41:32.478Z", + "Web/JavaScript/Reference/Errors/in_operator_no_object": { + "modified": "2020-03-12T19:47:34.037Z", "contributors": [ - "schlagi123", - "Daniel_Sixl", - "Husi012", - "dehenne", - "DPangerl", - "jaller94", - "chiborg", - "akumagamo", - "neutr0nis", - "LevitatingOrange" + "matthias85", + "schlagi123" ] }, - "Web/JavaScript/Reference/Klassen/constructor": { - "modified": "2020-03-12T19:43:34.404Z", + "Web/JavaScript/Reference/Errors": { + "modified": "2020-03-12T19:43:41.868Z", "contributors": [ - "kdex", "schlagi123", "akumagamo" ] }, - "Web/JavaScript/Reference/Klassen/extends": { - "modified": "2020-03-12T19:43:31.080Z", + "Web/JavaScript/Reference/Errors/Invalid_array_length": { + "modified": "2020-03-12T19:43:36.993Z", "contributors": [ - "hporten", - "kdex", - "buboh", "schlagi123", + "yampus", "akumagamo" ] }, - "Web/JavaScript/Reference/Klassen/static": { - "modified": "2020-10-15T21:45:38.442Z", + "Web/JavaScript/Reference/Errors/Invalid_assignment_left-hand_side": { + "modified": "2020-03-12T19:46:39.233Z", "contributors": [ - "kdex", "schlagi123", - "Nimelrian", - "jahe", - "marvhock", - "kannix", - "akumagamo" + "Cripi" ] }, - "Web/JavaScript/Reference/Lexical_grammar": { - "modified": "2020-10-15T22:03:30.555Z", + "Web/JavaScript/Reference/Errors/Invalid_const_assignment": { + "modified": "2020-03-12T19:47:33.651Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Operators": { - "modified": "2020-10-15T21:31:28.975Z", + "Web/JavaScript/Reference/Errors/Invalid_date": { + "modified": "2020-03-12T19:47:16.548Z", "contributors": [ "schlagi123", - "fscholz", - "loki" - ] - }, - "Web/JavaScript/Reference/Operators/Addition": { - "modified": "2020-10-15T22:34:37.156Z", - "contributors": [ - "cs.schueler" + "fire-stone" ] }, - "Web/JavaScript/Reference/Operators/Bitwise_Operatoren": { - "modified": "2020-10-15T21:51:28.246Z", + "Web/JavaScript/Reference/Errors/Invalid_for-in_initializer": { + "modified": "2020-03-12T19:47:50.395Z", "contributors": [ - "fscholz", - "kaljak", - "schlagi123", - "mizhac", - "MemoWalk" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Comma_Operator": { - "modified": "2020-10-15T21:59:30.294Z", + "Web/JavaScript/Reference/Errors/Invalid_for-of_initializer": { + "modified": "2020-03-12T19:47:46.412Z", "contributors": [ - "schlagi123", - "vssn" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Conditional_Operator": { - "modified": "2020-10-15T21:41:29.204Z", + "Web/JavaScript/Reference/Errors/invalid_right_hand_side_instanceof_operand": { + "modified": "2020-03-12T19:47:33.003Z", "contributors": [ - "Coding-Boss", - "nopeJS", - "Binnox", - "schlagi123", - "JWPapi", - "chauthai", - "terrluhr" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Dekrement": { - "modified": "2020-10-15T22:34:53.783Z", + "Web/JavaScript/Reference/Errors/is_not_iterable": { + "modified": "2020-03-12T19:48:02.116Z", "contributors": [ - "Klingohle" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung": { - "modified": "2020-10-15T21:41:28.452Z", + "Web/JavaScript/Reference/Errors/JSON_bad_parse": { + "modified": "2020-03-12T19:47:34.652Z", "contributors": [ - "manner", - "ldtr89", - "Aoke87", - "apguru", "schlagi123", - "himynameissteve", - "kdex", - "yampus", - "chaoran-chen", - "Alexa", - "sbusch" + "Jannik99" ] }, - "Web/JavaScript/Reference/Operators/Grouping": { - "modified": "2020-10-15T22:05:46.615Z", + "Web/JavaScript/Reference/Errors/Malformed_formal_parameter": { + "modified": "2020-03-12T19:43:43.986Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Inkrement": { - "modified": "2020-10-15T22:34:54.059Z", + "Web/JavaScript/Reference/Errors/Malformed_URI": { + "modified": "2020-05-11T08:04:02.475Z", "contributors": [ - "Klingohle" + "Skasi", + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Logische_Operatoren": { - "modified": "2020-10-15T21:43:07.470Z", + "Web/JavaScript/Reference/Errors/Missing_bracket_after_list": { + "modified": "2020-03-12T19:46:42.895Z", "contributors": [ "schlagi123", - "LeisureLarry", - "Webastronaut" + "Stolzenhain" ] }, - "Web/JavaScript/Reference/Operators/Modulo": { - "modified": "2020-10-15T22:34:54.665Z", + "Web/JavaScript/Reference/Errors/Missing_colon_after_property_id": { + "modified": "2020-03-12T19:47:39.916Z", "contributors": [ - "Klingohle" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Objekt_Initialisierer": { - "modified": "2020-10-15T21:32:25.926Z", + "Web/JavaScript/Reference/Errors/Missing_curly_after_function_body": { + "modified": "2020-03-12T19:47:34.109Z", "contributors": [ - "Callirius", - "fmeyertoens", - "schlagi123", - "JohannesDienst", - "nnmrts", - "kdex", - "siggi-heltau" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Operator_Precedence": { - "modified": "2020-03-12T19:43:04.570Z", + "Web/JavaScript/Reference/Errors/Missing_curly_after_property_list": { + "modified": "2020-03-12T19:45:33.319Z", "contributors": [ - "oliver-gramberg", - "Heronils", "schlagi123", - "Karpfador", - "dcodeIO", - "LK-Reichl-F", - "wLikeFish" - ] - }, - "Web/JavaScript/Reference/Operators/Optionale_Verkettung": { - "modified": "2020-10-15T22:26:51.885Z", - "contributors": [ - "TorbenKoehn" + "fire-stone" ] }, - "Web/JavaScript/Reference/Operators/Pipeline_operator": { - "modified": "2020-10-15T22:05:45.089Z", + "Web/JavaScript/Reference/Errors/Missing_formal_parameter": { + "modified": "2020-03-12T19:47:38.482Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Property_Accessors": { - "modified": "2020-10-15T21:55:35.876Z", + "Web/JavaScript/Reference/Errors/Missing_initializer_in_const": { + "modified": "2020-03-12T19:47:35.587Z", "contributors": [ - "schlagi123", - "timosperisen" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Spread_operator": { - "modified": "2020-03-12T19:42:35.849Z", + "Web/JavaScript/Reference/Errors/Missing_name_after_dot_operator": { + "modified": "2020-03-12T19:47:35.523Z", "contributors": [ - "developitz", - "mschleeweiss", - "kdex", - "theRealBaccata", - "schlagi123", - "sbusch", - "olhaar" + "sicLotus", + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Spread_syntax": { - "modified": "2020-10-15T22:05:09.977Z", + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list": { + "modified": "2020-03-12T19:44:04.052Z", "contributors": [ - "mischah", - "shaedrich", "schlagi123", - "mschleeweiss" + "iimog", + "rolandbgd", + "akumagamo" ] }, - "Web/JavaScript/Reference/Operators/Vergleichsoperatoren": { - "modified": "2020-10-15T21:37:40.074Z", + "Web/JavaScript/Reference/Errors/Missing_parenthesis_after_condition": { + "modified": "2020-03-12T19:47:39.363Z", "contributors": [ - "Hocdoc", - "christophfriedrich", - "schlagi123", - "Elyasin", - "loki" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/Zuweisungsoperator": { - "modified": "2020-10-15T21:48:40.239Z", + "Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement": { + "modified": "2020-03-12T19:44:24.631Z", "contributors": [ - "wbamberg", + "flufflepuff91", "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/async_function": { - "modified": "2020-10-15T22:05:47.683Z", + "Web/JavaScript/Reference/Errors/More_arguments_needed": { + "modified": "2020-03-12T19:47:35.019Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/await": { - "modified": "2020-10-15T22:05:59.887Z", + "Web/JavaScript/Reference/Errors/Negative_repetition_count": { + "modified": "2020-03-12T19:47:46.475Z", "contributors": [ - "joebau0815", - "saschbro", - "chrkhl", "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/class": { - "modified": "2020-03-12T19:42:53.976Z", + "Web/JavaScript/Reference/Errors/No_non-null_object": { + "modified": "2020-03-12T19:47:33.684Z", "contributors": [ - "kdex", - "Eiknheimer", - "schlagi123", - "terrluhr" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/delete": { - "modified": "2020-10-15T21:38:04.252Z", + "Web/JavaScript/Reference/Errors/No_properties": { + "modified": "2020-03-12T19:46:21.338Z", "contributors": [ - "kowarschick", "schlagi123", - "pascaliske", - "enexusde", - "CaptainStone", - "olhaar" + "timosperisen" ] }, - "Web/JavaScript/Reference/Operators/function": { - "modified": "2020-10-15T21:56:30.909Z", + "Web/JavaScript/Reference/Errors/No_variable_name": { + "modified": "2020-03-12T19:47:35.139Z", "contributors": [ - "m5yu", - "jakobpack", - "schlagi123", - "christianrhansen", - "vssn", - "amelzer" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/function*": { - "modified": "2020-10-15T22:05:42.272Z", + "Web/JavaScript/Reference/Errors/Non_configurable_array_element": { + "modified": "2020-03-12T19:47:37.860Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/in": { - "modified": "2020-10-15T21:39:06.431Z", + "Web/JavaScript/Reference/Errors/Not_a_codepoint": { + "modified": "2020-03-12T19:44:01.592Z", "contributors": [ - "mfranzke", "schlagi123", - "kdex", - "xergon" + "akumagamo" ] }, - "Web/JavaScript/Reference/Operators/instanceof": { - "modified": "2020-10-15T21:39:26.955Z", + "Web/JavaScript/Reference/Errors/Not_a_constructor": { + "modified": "2020-03-12T19:46:54.349Z", "contributors": [ + "NiklasMerz", "schlagi123", - "HolgerJeromin", - "flipace", - "weedukind" + "klug_mario" ] }, - "Web/JavaScript/Reference/Operators/new": { - "modified": "2020-10-15T21:38:03.135Z", + "Web/JavaScript/Reference/Errors/Not_a_function": { + "modified": "2020-03-12T19:45:23.396Z", "contributors": [ - "FelixSab", + "flufflepuff91", "schlagi123", - "Maugo", - "michiruckstuhl", - "danbru1211" + "fire-stone" ] }, - "Web/JavaScript/Reference/Operators/new.target": { - "modified": "2020-10-15T22:05:44.821Z", + "Web/JavaScript/Reference/Errors/Not_defined": { + "modified": "2020-03-12T19:44:11.129Z", "contributors": [ - "hporten", - "schlagi123" + "flufflepuff91", + "schlagi123", + "BennoKieselstein", + "Bernd_L", + "akumagamo" ] }, - "Web/JavaScript/Reference/Operators/super": { - "modified": "2020-10-15T21:47:20.372Z", + "Web/JavaScript/Reference/Errors/Precision_range": { + "modified": "2020-03-12T19:44:05.096Z", "contributors": [ "schlagi123", - "kdex", - "Skycro" + "akumagamo" ] }, - "Web/JavaScript/Reference/Operators/this": { - "modified": "2020-10-15T21:46:51.232Z", + "Web/JavaScript/Reference/Errors/Property_access_denied": { + "modified": "2020-03-12T19:44:01.071Z", "contributors": [ - "KratosAurion", "schlagi123", - "kelthuzad", - "eluchsinger" + "akumagamo" ] }, - "Web/JavaScript/Reference/Operators/typeof": { - "modified": "2020-11-06T10:38:36.219Z", + "Web/JavaScript/Reference/Errors/Read-only": { + "modified": "2020-03-12T19:47:33.685Z", "contributors": [ - "mschleeweiss", - "schlagi123", - "dmarku" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/void": { - "modified": "2020-10-15T21:34:41.746Z", + "Web/JavaScript/Reference/Errors/Redeclared_parameter": { + "modified": "2020-03-12T19:47:37.067Z", "contributors": [ - "schlagi123", - "amelzer", - "JohannesDienst" + "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/yield": { - "modified": "2020-10-15T22:05:44.303Z", + "Web/JavaScript/Reference/Errors/Reduce_of_empty_array_with_no_initial_value": { + "modified": "2020-03-12T19:47:39.369Z", "contributors": [ - "kevinfoerster", - "ionxenia", "schlagi123" ] }, - "Web/JavaScript/Reference/Operators/yield*": { - "modified": "2020-10-15T22:05:43.798Z", + "Web/JavaScript/Reference/Errors/Reserved_identifier": { + "modified": "2020-03-12T19:47:46.391Z", "contributors": [ - "jborsch", "schlagi123" ] }, - "Web/JavaScript/Reference/Statements": { - "modified": "2020-10-15T21:30:44.678Z", + "Web/JavaScript/Reference/Errors/Resulting_string_too_large": { + "modified": "2020-03-12T19:47:46.172Z", "contributors": [ - "Galajda", - "schlagi123", - "JorisGutjahr", - "fscholz", - "SphinxKnight", - "timbernasley" + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/Empty": { - "modified": "2020-03-12T19:43:34.145Z", + "Web/JavaScript/Reference/Errors/Stmt_after_return": { + "modified": "2020-03-12T19:43:39.489Z", "contributors": [ - "KuhnEDV" + "schlagi123", + "akumagamo" ] }, - "Web/JavaScript/Reference/Statements/async_function": { - "modified": "2020-10-15T22:13:51.356Z", + "Web/JavaScript/Reference/Errors/Strict_Non_Simple_Params": { + "modified": "2020-03-12T19:47:45.620Z", "contributors": [ - "Dodo-the-Coder", - "vssn", - "Galajda" + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/block": { - "modified": "2020-10-15T21:32:12.580Z", + "Web/JavaScript/Reference/Errors/Too_much_recursion": { + "modified": "2020-03-12T19:43:58.453Z", "contributors": [ - "zuzuzu", + "schlagi123", + "olhaar", "yampus", - "mdschweda", + "julmot", + "akumagamo" + ] + }, + "Web/JavaScript/Reference/Errors/Typed_array_invalid_arguments": { + "modified": "2020-03-12T19:47:33.971Z", + "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/break": { - "modified": "2020-03-12T19:40:27.998Z", + "Web/JavaScript/Reference/Errors/Undeclared_var": { + "modified": "2020-03-12T19:47:43.541Z", "contributors": [ "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/class": { - "modified": "2020-03-12T19:43:47.910Z", + "Web/JavaScript/Reference/Errors/Undefined_prop": { + "modified": "2020-03-12T19:44:10.591Z", "contributors": [ - "kdex", - "Idrinth", "schlagi123", - "eluchsinger" + "ThomasFe", + "akumagamo" ] }, - "Web/JavaScript/Reference/Statements/const": { - "modified": "2020-10-15T21:32:07.805Z", + "Web/JavaScript/Reference/Errors/Unexpected_token": { + "modified": "2020-03-12T19:45:02.701Z", "contributors": [ - "zuzuzu", - "evayde", - "timlg07", - "SphinxKnight", - "kdex", - "marcelglaeser", - "andreashofer123", - "fscholz", - "schlagi123" + "schlagi123", + "albasiba" ] }, - "Web/JavaScript/Reference/Statements/continue": { - "modified": "2020-10-15T21:45:50.193Z", + "Web/JavaScript/Reference/Errors/Unexpected_type": { + "modified": "2020-03-12T19:45:54.249Z", "contributors": [ "schlagi123", - "KuhnEDV" + "thegeg", + "SusiHutzler", + "fire-stone", + "netalp" ] }, - "Web/JavaScript/Reference/Statements/debugger": { - "modified": "2020-10-15T22:30:09.075Z", + "Web/JavaScript/Reference/Errors/Unnamed_function_statement": { + "modified": "2020-03-12T19:47:45.907Z", "contributors": [ - "zuzuzu" + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/default": { - "modified": "2020-10-15T21:46:29.118Z", + "Web/JavaScript/Reference/Errors/Unterminated_string_literal": { + "modified": "2020-03-12T19:47:34.534Z", "contributors": [ - "schlagi123", - "eluchsinger" + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/do...while": { - "modified": "2020-03-12T19:42:19.798Z", + "Web/JavaScript/Reference/Errors/Var_hides_argument": { + "modified": "2020-03-12T19:47:33.618Z", + "contributors": [ + "schlagi123" + ] + }, + "Web/JavaScript/Reference/Functions/Method_definitions": { + "modified": "2020-03-12T19:40:25.737Z", "contributors": [ + "kdex", "schlagi123", - "jumpball" + "siggi-heltau" ] }, - "Web/JavaScript/Reference/Statements/export": { - "modified": "2020-10-15T21:41:31.690Z", + "Web/JavaScript/Reference/Functions/Arrow_functions": { + "modified": "2020-10-15T21:50:51.602Z", "contributors": [ - "hoelzlmanuel", - "wheelmaker24", - "xchange11", "schlagi123", - "Snapstromegon", - "thomaskempel", - "yampus", - "rroehrig", - "tuffi111", - "sbusch" + "Sixl-Daniel", + "kdex", + "sja", + "Eiknheimer", + "GuidoSchweizer", + "mhash17" ] }, - "Web/JavaScript/Reference/Statements/for": { - "modified": "2020-03-12T19:42:06.001Z", + "Web/JavaScript/Reference/Functions/rest_parameters": { + "modified": "2020-10-15T21:56:07.951Z", "contributors": [ + "sonicdoe", "schlagi123", - "Elyasin" + "Simmarith" ] }, - "Web/JavaScript/Reference/Statements/for...in": { - "modified": "2020-05-27T10:00:58.351Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/Array/prototype": { + "modified": "2020-10-15T21:52:42.525Z", "contributors": [ - "zuzuzu", - "baasti", - "koedev", - "Vitroxyn", + "Stoeoeoe", "schlagi123", - "KuhnEDV", - "JohannesDienst", - "fscholz", - "lupo72" + "StevenS77" ] }, - "Web/JavaScript/Reference/Statements/for...of": { - "modified": "2020-03-12T19:41:38.990Z", + "orphaned/Web/JavaScript/Reference/Global_Objects/AsyncFunction/prototype": { + "modified": "2020-10-15T22:01:09.829Z", "contributors": [ - "pastparty", - "Xan2063", - "SphinxKnight", - "kdex", - "Narigo" + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/function*": { - "modified": "2020-10-15T21:45:47.005Z", + "Web/JavaScript/Reference/Global_Objects/Atomics/notify": { + "modified": "2020-10-15T22:01:24.441Z", "contributors": [ - "oliver-gramberg", - "arothweiler", - "schlagi123", - "xstable", - "yampus", - "kdex", - "KuhnEDV" + "Cortys", + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/funktion": { - "modified": "2020-03-12T19:42:16.537Z", + "Web/JavaScript/Reference/Global_Objects/Math/random": { + "modified": "2020-10-15T21:36:41.048Z", "contributors": [ - "yampus", - "trillerpfeife", - "neverendingo" + "grumpy-cat", + "schlagi123", + "cami", + "serv-inc", + "Dargmuesli" ] }, - "Web/JavaScript/Reference/Statements/if...else": { - "modified": "2020-10-15T21:32:18.484Z", + "Web/JavaScript/Reference/Global_Objects/String/search": { + "modified": "2020-10-15T22:11:40.635Z", + "contributors": [ + "tobipch", + "blackjack4494", + "Cr4zyG4m3rLP" + ] + }, + "Web/JavaScript/Reference/Global_Objects/String/trimStart": { + "modified": "2020-10-15T21:48:35.629Z", "contributors": [ - "schlagi123", - "yampus" + "teoli", + "schlagi123" ] }, - "Web/JavaScript/Reference/Statements/import": { - "modified": "2020-10-15T21:39:21.688Z", + "Web/JavaScript/Reference/Global_Objects/String/trimEnd": { + "modified": "2020-10-15T21:47:40.889Z", "contributors": [ - "fmeyertoens", - "kdex", - "Snapstromegon", - "Kani1013", - "michaelze", - "yampus", - "yannick_versley", - "BennyAlex", - "Marzelpan", + "teoli", "schlagi123", - "Breaker222", - "Simmarith", - "matbad" + "Zertrax" ] }, - "Web/JavaScript/Reference/Statements/label": { - "modified": "2020-03-12T19:43:50.191Z", + "Web/JavaScript/Reference/Classes/constructor": { + "modified": "2020-03-12T19:43:34.404Z", "contributors": [ + "kdex", "schlagi123", - "eluchsinger" + "akumagamo" ] }, - "Web/JavaScript/Reference/Statements/let": { - "modified": "2020-03-12T19:40:29.227Z", + "Web/JavaScript/Reference/Classes/extends": { + "modified": "2020-03-12T19:43:31.080Z", "contributors": [ - "evayde", - "rs-github", - "cami", - "Flonk", + "hporten", "kdex", - "sigoa", - "TheFaithfulCritic", - "FliegenKLATSCH", - "gtmn", - "rimace", + "buboh", "schlagi123", - "AndreeWille", - "th-we", - "chk1", - "fscholz" + "akumagamo" ] }, - "Web/JavaScript/Reference/Statements/return": { - "modified": "2020-03-12T19:44:07.700Z", + "Web/JavaScript/Reference/Classes": { + "modified": "2020-03-12T19:41:32.478Z", "contributors": [ - "christophfriedrich", - "schlagi123" + "schlagi123", + "Daniel_Sixl", + "Husi012", + "dehenne", + "DPangerl", + "jaller94", + "chiborg", + "akumagamo", + "neutr0nis", + "LevitatingOrange" ] }, - "Web/JavaScript/Reference/Statements/switch": { - "modified": "2020-03-12T19:41:30.012Z", + "Web/JavaScript/Reference/Classes/static": { + "modified": "2020-10-15T21:45:38.442Z", "contributors": [ + "kdex", "schlagi123", - "Elyasin" + "Nimelrian", + "jahe", + "marvhock", + "kannix", + "akumagamo" ] }, - "Web/JavaScript/Reference/Statements/throw": { - "modified": "2020-03-12T19:43:13.297Z", + "Web/JavaScript/Reference/Operators/Decrement": { + "modified": "2020-10-15T22:34:53.783Z", "contributors": [ - "StanE" + "Klingohle" ] }, - "Web/JavaScript/Reference/Statements/try...catch": { - "modified": "2020-03-12T19:45:01.106Z", + "Web/JavaScript/Reference/Operators/Destructuring_assignment": { + "modified": "2020-10-15T21:41:28.452Z", "contributors": [ - "SpikePy", - "timomeh", - "stepdate" + "manner", + "ldtr89", + "Aoke87", + "apguru", + "schlagi123", + "himynameissteve", + "kdex", + "yampus", + "chaoran-chen", + "Alexa", + "sbusch" ] }, - "Web/JavaScript/Reference/Statements/var": { - "modified": "2020-03-12T19:40:22.049Z", + "Web/JavaScript/Reference/Operators/Increment": { + "modified": "2020-10-15T22:34:54.059Z", "contributors": [ - "rs-github", - "trillerpfeife", - "Epiglottis", - "schlagi123", - "rkoch", - "th-we", - "fscholz" + "Klingohle" ] }, - "Web/JavaScript/Reference/Statements/while": { - "modified": "2020-10-15T21:37:40.413Z", + "Web/JavaScript/Reference/Operators/Remainder": { + "modified": "2020-10-15T22:34:54.665Z", "contributors": [ - "dmho", - "schlagi123", - "Jintzo", - "Elyasin" + "Klingohle" ] }, - "Web/JavaScript/Reference/Strict_mode": { - "modified": "2020-05-27T12:41:43.793Z", + "Web/JavaScript/Reference/Operators/Object_initializer": { + "modified": "2020-10-15T21:32:25.926Z", "contributors": [ - "zuzuzu", - "SebinNyshkim", - "fscholz" + "Callirius", + "fmeyertoens", + "schlagi123", + "JohannesDienst", + "nnmrts", + "kdex", + "siggi-heltau" ] }, - "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features": { - "modified": "2020-03-12T19:43:15.969Z", + "Web/JavaScript/Reference/Operators/Optional_chaining": { + "modified": "2020-10-15T22:26:51.885Z", "contributors": [ - "PointedEars", - "jumpball" + "TorbenKoehn" ] }, - "Web/JavaScript/Reference/Veraltete_und_abgeschaffte_Features/The_legacy_Iterator_protocol": { - "modified": "2020-03-12T19:48:53.999Z", + "Web/JavaScript/Reference/Statements/function": { + "modified": "2020-03-12T19:42:16.537Z", "contributors": [ - "ctexxx" + "yampus", + "trillerpfeife", + "neverendingo" ] }, - "Web/JavaScript/Reference/template_strings": { + "Web/JavaScript/Reference/Template_literals": { "modified": "2020-10-15T21:38:21.925Z", "contributors": [ "zuzuzu", @@ -14247,7 +14175,20 @@ "stehefan" ] }, - "Web/JavaScript/Speicherverwaltung": { + "Web/JavaScript/Reference/Deprecated_and_obsolete_features": { + "modified": "2020-03-12T19:43:15.969Z", + "contributors": [ + "PointedEars", + "jumpball" + ] + }, + "Web/JavaScript/Reference/Deprecated_and_obsolete_features/The_legacy_Iterator_protocol": { + "modified": "2020-03-12T19:48:53.999Z", + "contributors": [ + "ctexxx" + ] + }, + "Web/JavaScript/Memory_Management": { "modified": "2020-03-12T19:38:43.251Z", "contributors": [ "FERNman", @@ -14256,19 +14197,7 @@ "eminor" ] }, - "Web/JavaScript/Typed_arrays": { - "modified": "2020-03-12T19:40:57.461Z", - "contributors": [ - "flying-sheep", - "ksm2", - "Adowrath", - "schlagi123", - "sspringer82", - "fscholz", - "rogerraetzel" - ] - }, - "Web/JavaScript/Vergleiche_auf_Gleichheit_und_deren_Verwendung": { + "Web/JavaScript/Equality_comparisons_and_sameness": { "modified": "2020-03-12T19:40:00.637Z", "contributors": [ "schlagi123", @@ -14278,559 +14207,630 @@ "spiegelp" ] }, - "Web/Manifest": { - "modified": "2020-08-31T08:04:51.977Z", + "Web/MathML/Attribute/Values": { + "modified": "2019-03-18T21:17:29.433Z", "contributors": [ - "Zyndoras", - "gpion", - "SphinxKnight", - "tomknig", - "Lanseuo", - "lionralfs", - "hrjhn", - "McSodbrenner", - "fscholz", - "mojoaxel", - "tempelgogo", - "yzanomi" + "Draussenduscher" ] }, - "Web/Manifest/short_name": { - "modified": "2020-10-15T22:31:31.945Z", + "Web/MathML/Examples": { + "modified": "2019-03-23T22:41:30.288Z", "contributors": [ - "kevin98" + "Draussenduscher" ] }, - "Web/MathML": { - "modified": "2019-03-23T22:48:05.789Z", + "Web/MathML/Examples/MathML_Pythagorean_Theorem": { + "modified": "2019-03-18T21:15:50.621Z", "contributors": [ - "Draussenduscher", - "jumpball" + "Draussenduscher" ] }, - "Web/MathML/Attribute": { - "modified": "2020-12-10T08:16:36.851Z", + "Web/MathML/Examples/Deriving_the_Quadratic_Formula": { + "modified": "2019-03-23T22:41:16.866Z", "contributors": [ - "Borgitowner", "Draussenduscher" ] }, - "Web/MathML/Attribute/Werte": { - "modified": "2019-03-18T21:17:29.433Z", + "Web/HTTP/Public_Key_Pinning": { + "modified": "2020-10-15T21:39:59.794Z", "contributors": [ - "Draussenduscher" + "Dschubba", + "GanbaruTobi", + "rugk", + "TheAlxH", + "mozjan" ] }, - "Web/MathML/Beispiele": { - "modified": "2019-03-23T22:41:30.288Z", + "Web/SVG/Tutorial/Introduction": { + "modified": "2019-01-16T14:32:58.426Z", "contributors": [ - "Draussenduscher" + "teoli", + "fscholz", + "Mickiboy" ] }, - "Web/MathML/Beispiele/MathML_Satz_des_Pythagoras": { - "modified": "2019-03-18T21:15:50.621Z", + "Web/SVG/Tutorial/Paths": { + "modified": "2019-11-01T07:41:48.434Z", "contributors": [ - "Draussenduscher" + "michelgotta", + "ringostarr80", + "Wombosvideo" ] }, - "Web/MathML/Beispiele/Quadratische_Gleichung": { - "modified": "2019-03-23T22:41:16.866Z", + "Web/SVG/Tutorial/SVG_fonts": { + "modified": "2019-04-14T13:08:23.758Z", "contributors": [ - "Draussenduscher" + "Heupferdchenritter" ] }, - "Web/MathML/Element": { - "modified": "2019-03-23T22:41:28.276Z", + "Web/API/Geolocation_API": { + "modified": "2019-03-23T22:52:49.349Z", "contributors": [ - "Draussenduscher" + "shaedrich", + "42triangles", + "silend" + ] + }, + "Web/XML/XML_introduction": { + "modified": "2019-05-01T21:51:49.890Z", + "contributors": [ + "ExE-Boss", + "fscholz", + "XxPlay9xX", + "Mowtrains", + "Maxemil", + "Tammo", + "M@d Man" + ] + }, + "Web/API/WebSockets_API": { + "modified": "2019-03-23T22:59:48.670Z", + "contributors": [ + "Johann150", + "mvb1996" + ] + }, + "Web/API/WebSockets_API/Writing_WebSocket_servers": { + "modified": "2020-08-15T02:07:04.944Z", + "contributors": [ + "otde2016" + ] + }, + "Web/API/Document_Object_Model": { + "modified": "2019-03-24T00:03:18.662Z", + "contributors": [ + "TheNT87", + "Barfooz", + "ethertank", + "fscholz", + "Crash", + "Takenbot", + "M@d Man" ] }, - "Web/MathML/Element/maction": { - "modified": "2019-03-23T22:35:35.054Z", + "conflicting/Web/API/Document_Object_Model": { + "modified": "2019-12-23T07:48:22.460Z", "contributors": [ - "Draussenduscher" + "Cerberooo", + "StevenS77", + "Barfooz" ] }, - "Web/MathML/Element/math": { - "modified": "2019-03-18T21:15:50.121Z", + "Web/API/HTML_Drag_and_Drop_API": { + "modified": "2019-03-23T23:26:04.264Z", "contributors": [ - "Draussenduscher" + "drewp" ] }, - "Web/MathML/Element/menclose": { - "modified": "2019-03-23T22:35:37.131Z", + "conflicting/Mozilla/Add-ons": { + "modified": "2019-03-24T00:04:52.753Z", "contributors": [ - "Draussenduscher" + "tregagnon", + "fscholz", + "SeSchneider", + "Yozh88", + "Jules Papillon", + "Alopix", + "Pl4yer", + "Masterdschecker", + "Michael2402", + "Undertaker", + "Thomas147", + "Felix.Schwarz", + "Verruckt", + "Slosd", + "Philipp", + "Indigo", + "Jonny", + "Takenbot", + "Manuel Strehl", + "Ar-sch.de", + "DDSD", + "Dria" ] }, - "Web/MathML/Element/merror": { - "modified": "2019-03-23T22:35:42.535Z", + "conflicting/Glossary/Doctype": { + "modified": "2019-07-04T23:44:01.071Z", "contributors": [ - "Draussenduscher" + "PercyGitarrist" ] }, - "Web/MathML/Element/mfenced": { - "modified": "2019-03-23T22:35:44.635Z", + "conflicting/MDN/Contribute/Getting_started": { + "modified": "2019-01-16T20:30:11.342Z", "contributors": [ - "Draussenduscher" + "wbamberg", + "dario.bloch" ] }, - "Web/MathML/Element/mfrac": { - "modified": "2019-03-23T22:39:13.573Z", + "MDN/Tools": { + "modified": "2019-03-23T22:50:19.741Z", "contributors": [ - "Draussenduscher" + "wbamberg", + "jezdez", + "LeindK" ] }, - "Web/MathML/Element/mi": { - "modified": "2019-03-23T22:39:56.494Z", + "Web/Guide/Mobile": { + "modified": "2019-03-23T23:29:04.325Z", "contributors": [ - "Draussenduscher" + "wbamberg" ] }, - "Web/MathML/Element/mn": { - "modified": "2019-03-23T22:40:17.694Z", + "conflicting/Web/Progressive_web_apps": { + "modified": "2019-03-23T23:29:04.477Z", "contributors": [ - "Draussenduscher" + "HolgerSinn.Com" ] }, - "Web/MathML/Element/mo": { - "modified": "2019-03-23T22:40:19.804Z", + "Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T22:50:32.909Z", "contributors": [ - "Draussenduscher" + "teoli" ] }, - "Web/MathML/Element/mover": { - "modified": "2019-03-23T22:35:41.970Z", + "conflicting/Web/API/WindowOrWorkerGlobalScope": { + "modified": "2019-03-23T23:01:42.969Z", "contributors": [ - "Draussenduscher" + "teoli" ] }, - "Web/MathML/Element/mpadded": { - "modified": "2019-03-23T22:35:41.097Z", + "conflicting/Web/Accessibility": { + "modified": "2019-03-18T20:35:27.144Z", "contributors": [ - "Draussenduscher" + "chrisdavidmills", + "teoli", + "eminor" ] }, - "Web/MathML/Element/mphantom": { - "modified": "2019-03-23T22:35:42.968Z", + "Web/CSS/:placeholder-shown": { + "modified": "2019-03-23T23:11:34.619Z", "contributors": [ - "Draussenduscher" + "teoli", + "Sebastianz" ] }, - "Web/MathML/Element/mroot": { - "modified": "2019-03-23T22:40:25.676Z", + "conflicting/Web/CSS/::placeholder": { + "modified": "2019-03-23T23:08:23.797Z", "contributors": [ - "Draussenduscher", - "jumpball" + "teoli", + "Sebastianz", + "icy" ] }, - "Web/MathML/Element/mrow": { - "modified": "2019-03-23T22:40:55.520Z", + "Web/CSS/box-ordinal-group": { + "modified": "2019-03-23T22:45:29.807Z", "contributors": [ - "Draussenduscher" + "Sebastianz" ] }, - "Web/MathML/Element/ms": { - "modified": "2019-03-23T22:35:40.687Z", + "conflicting/Web/CSS/cursor": { + "modified": "2019-03-23T23:11:42.748Z", "contributors": [ - "Draussenduscher" + "Sebastianz", + "teoli" ] }, - "Web/MathML/Element/mspace": { - "modified": "2019-03-23T22:35:41.572Z", + "Web/CSS/mask-origin": { + "modified": "2019-03-23T22:44:52.161Z", "contributors": [ - "Draussenduscher" + "Sebastianz" ] }, - "Web/MathML/Element/msqrt": { - "modified": "2019-03-23T22:40:04.280Z", + "Web/CSS/mask-repeat": { + "modified": "2019-03-23T22:45:10.485Z", "contributors": [ - "Draussenduscher" + "Sebastianz" ] }, - "Web/MathML/Element/mstyle": { - "modified": "2020-10-15T21:41:26.425Z", + "conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743": { + "modified": "2019-03-23T22:43:38.581Z", "contributors": [ - "bershanskiy", - "Draussenduscher" + "Sebastianz" ] }, - "Web/MathML/Element/msub": { - "modified": "2019-03-18T21:15:46.910Z", + "conflicting/Web/CSS/width": { + "modified": "2019-03-23T23:23:49.598Z", "contributors": [ - "Draussenduscher" + "SJW" ] }, - "Web/MathML/Element/msubsup": { - "modified": "2019-03-23T22:35:33.789Z", + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:44:11.176Z", "contributors": [ - "Draussenduscher" + "teoli" ] }, - "Web/MathML/Element/msup": { - "modified": "2019-03-23T22:35:34.021Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { + "modified": "2019-03-23T23:02:41.693Z", "contributors": [ - "Draussenduscher" + "terwortH", + "benmann", + "teoli", + "Sebastianz", + "srhjg" ] }, - "Web/MathML/Element/mtable": { - "modified": "2019-03-23T22:35:58.744Z", + "Web/CSS/CSS_Color": { + "modified": "2019-03-23T22:45:11.820Z", "contributors": [ - "Draussenduscher" + "Sebastianz", + "teoli" ] }, - "Web/MathML/Element/mtd": { - "modified": "2019-03-23T22:36:01.471Z", + "Web/CSS/Compositing_and_Blending": { + "modified": "2019-03-23T22:41:20.151Z", "contributors": [ - "Draussenduscher" + "Sebastianz" ] }, - "Web/MathML/Element/mtext": { - "modified": "2019-03-23T22:35:39.496Z", + "conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox": { + "modified": "2019-03-18T20:58:13.468Z", "contributors": [ - "Draussenduscher" + "KadirTopal", + "wiegels", + "AccNeeder", + "rroehrig", + "thorsten.rinne", + "fscholz", + "elker", + "thandwerker", + "Honig" ] }, - "Web/MathML/Element/mtr": { - "modified": "2019-03-23T22:36:03.515Z", + "conflicting/Web/CSS/CSS_Basic_User_Interface": { + "modified": "2019-03-23T22:43:34.455Z", "contributors": [ - "Draussenduscher" + "SphinxKnight", + "ExE-Boss", + "Sebastianz" ] }, - "Web/MathML/Element/munder": { - "modified": "2019-03-23T22:35:33.540Z", + "Web/CSS/gap": { + "modified": "2020-10-15T22:00:43.740Z", "contributors": [ - "Draussenduscher" + "AlexWayhill", + "Craeckerffm" ] }, - "Web/MathML/Element/munderover": { - "modified": "2019-03-23T22:35:34.263Z", + "conflicting/Web/CSS/float": { + "modified": "2019-03-23T23:23:49.504Z", "contributors": [ - "Draussenduscher" + "SJW" ] }, - "Web/Performance": { - "modified": "2020-05-22T10:23:33.706Z", + "conflicting/Web/CSS/font-variant": { + "modified": "2019-03-23T23:23:47.885Z", "contributors": [ - "chrisdavidmills" + "dio", + "SJW" ] }, - "Web/Performance/dns-prefetch": { - "modified": "2020-05-22T10:23:34.773Z", + "Web/CSS/url()": { + "modified": "2020-10-15T22:01:29.787Z", "contributors": [ - "chryxf" + "valentinprotiuc" ] }, - "Web/Progressive_web_apps": { - "modified": "2019-08-19T03:49:08.791Z", + "conflicting/Learn/CSS/Building_blocks/Values_and_units": { + "modified": "2019-03-23T23:08:03.393Z", "contributors": [ - "fschaupp", - "chrisdavidmills", - "friedger" + "spiegelp", + "thkoch" ] }, - "Web/Reference": { - "modified": "2020-07-03T18:35:25.162Z", + "conflicting/Learn/CSS/First_steps": { + "modified": "2019-03-24T00:05:49.642Z", "contributors": [ - "duckymirror", - "fhwfzfge", - "Patrick_St.", - "Nickolay" + "teoli", + "fscholz", + "DavidWalsh" ] }, - "Web/Reference/API": { - "modified": "2019-03-23T23:18:19.126Z", + "Learn/CSS/Building_blocks/Cascade_and_inheritance": { + "modified": "2019-03-23T22:49:16.030Z", "contributors": [ - "goligo", - "Hanibal1963", - "AngelSankturio" + "spiegelp" ] }, - "Web/SVG": { - "modified": "2019-03-24T00:13:09.048Z", + "Learn/CSS/First_steps/How_CSS_is_structured": { + "modified": "2019-03-23T22:41:33.439Z", "contributors": [ - "teoli", - "ethertank", - "DavidWalsh", - "nicolasmn", - "fscholz", - "Mickiboy", - "-=Renegade=-", - "Ak120" + "spiegelp" ] }, - "Web/SVG/Attribute": { - "modified": "2019-03-23T22:14:31.297Z", + "Learn/CSS/Building_blocks/Selectors": { + "modified": "2019-03-23T23:11:23.467Z", "contributors": [ - "Sebastianz" + "woiddale", + "spiegelp", + "hpkainz" ] }, - "Web/SVG/Attribute/class": { - "modified": "2019-03-23T22:11:26.719Z", + "Learn/CSS/Styling_text/Fundamentals": { + "modified": "2019-03-23T22:49:16.242Z", "contributors": [ - "grobmeier" + "spiegelp" ] }, - "Web/SVG/Attribute/preserveAspectRatio": { - "modified": "2019-09-30T23:24:10.073Z", + "Learn/CSS/First_steps/How_CSS_works": { + "modified": "2020-05-05T12:04:06.710Z", "contributors": [ - "JackLeEmmerdeur", - "jbvsusj" + "Helge-HH", + "fhwfzfge", + "msc1979", + "fscholz", + "Palmstroem", + "barning" ] }, - "Web/SVG/Element": { - "modified": "2019-03-23T23:33:28.131Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works": { + "modified": "2019-03-23T22:57:29.159Z", "contributors": [ - "Sebastianz", - "teoli", - "ethertank" + "fhwfzfge", + "Palmstroem" ] }, - "Web/SVG/Element/animate": { - "modified": "2020-10-15T21:26:19.629Z", + "conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400": { + "modified": "2019-03-23T22:57:04.436Z", "contributors": [ - "Dschubba", - "Sebastianz", - "fscholz", - "teoli", - "martin_ti" + "Palmstroem" ] }, - "Web/SVG/Element/circle": { - "modified": "2019-03-23T23:02:17.743Z", + "Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images": { + "modified": "2019-03-23T23:06:19.663Z", "contributors": [ - "wbamberg", - "Sebastianz", - "Oliver_Schafeld", - "ppk42" + "sos4nt", + "mrstork", + "webwirbel" ] }, - "Web/SVG/Element/foreignObject": { - "modified": "2019-03-23T23:21:17.052Z", + "conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10": { + "modified": "2019-03-23T23:28:11.671Z", "contributors": [ - "Sebastianz", - "gluecksmelodie", - "teoli", - "powerswitch" + "Sheppy" ] }, - "Web/SVG/Element/path": { - "modified": "2020-10-15T22:17:06.133Z", + "conflicting/Web/HTML/Element": { + "modified": "2019-03-23T23:37:56.525Z", "contributors": [ - "MyLittlePenguin" + "gk-freiheit", + "rawcat", + "teoli", + "AickeSchulz", + "jwl" ] }, - "Web/SVG/Element/polygon": { - "modified": "2019-03-23T22:09:13.846Z", + "conflicting/Learn/JavaScript/Objects": { + "modified": "2020-03-12T19:39:48.552Z", "contributors": [ - "Peremptor" + "ant1d0t", + "nemo182", + "christianhegedues", + "BurnerPat", + "schlagi123", + "neverendingo", + "creitiv", + "DunklesBlut88", + "paesku", + "bricks", + "fabiankreutz", + "spiegelp" ] }, - "Web/SVG/Element/rect": { - "modified": "2019-03-18T21:41:17.238Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer": { + "modified": "2020-10-15T22:01:15.339Z", "contributors": [ - "philSixZero" + "schlagi123" ] }, - "Web/SVG/Element/svg": { - "modified": "2020-10-15T21:43:06.785Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Boolean": { + "modified": "2020-10-15T21:45:26.885Z", "contributors": [ - "Volker-E", - "Dschubba", - "mattenmad" + "schlagi123" ] }, - "Web/SVG/Element/textPath": { - "modified": "2019-03-23T22:46:20.244Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/DataView": { + "modified": "2020-10-15T21:46:53.689Z", "contributors": [ - "Sebastianz", - "modellking" + "schlagi123" ] }, - "Web/SVG/Element/view": { - "modified": "2019-03-18T21:15:30.402Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Date": { + "modified": "2020-10-15T21:45:25.297Z", "contributors": [ - "Crucion" + "schlagi123", + "Schollator" ] }, - "Web/SVG/Namespaces_Crash_Course": { - "modified": "2019-03-23T22:26:27.398Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Error": { + "modified": "2020-10-15T21:46:17.159Z", "contributors": [ - "bgueth", - "Oliver_Schafeld" + "schlagi123" ] }, - "Web/SVG/Tutorial": { - "modified": "2019-01-16T14:32:30.945Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/EvalError": { + "modified": "2020-10-15T22:01:29.746Z", "contributors": [ - "teoli", - "fscholz", - "Mickiboy" + "schlagi123" ] }, - "Web/SVG/Tutorial/Einführung": { - "modified": "2019-01-16T14:32:58.426Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Function": { + "modified": "2020-10-15T22:01:36.587Z", "contributors": [ - "teoli", - "fscholz", - "Mickiboy" + "xdevs23", + "schlagi123" ] }, - "Web/SVG/Tutorial/Fills_and_Strokes": { - "modified": "2019-03-23T22:15:38.417Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction": { + "modified": "2020-10-15T22:02:06.474Z", "contributors": [ - "kevinfoerster", - "sebastianbarfurth" + "schlagi123" ] }, - "Web/SVG/Tutorial/Pfade": { - "modified": "2019-11-01T07:41:48.434Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/InternalError": { + "modified": "2020-10-15T22:02:05.813Z", "contributors": [ - "michelgotta", - "ringostarr80", - "Wombosvideo" + "schlagi123" ] }, - "Web/SVG/Tutorial/SVG_Image_Tag": { - "modified": "2019-04-14T13:23:03.557Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator": { + "modified": "2020-10-15T22:02:09.634Z", "contributors": [ - "Heupferdchenritter", - "RmnWtnkmp" + "fscholz", + "schlagi123" ] }, - "Web/SVG/Tutorial/SVG_Schriftarten": { - "modified": "2019-04-14T13:08:23.758Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat": { + "modified": "2020-10-15T21:46:02.893Z", "contributors": [ - "Heupferdchenritter" + "fscholz", + "schlagi123" ] }, - "Web/SVG/Tutorial/Tools_for_SVG": { - "modified": "2019-04-14T13:43:24.617Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat": { + "modified": "2020-10-15T22:03:24.903Z", "contributors": [ - "Heupferdchenritter" + "fscholz", + "schlagi123" ] }, - "Web/Security": { - "modified": "2019-09-10T16:31:42.422Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Map": { + "modified": "2020-10-15T22:01:26.449Z", "contributors": [ - "SphinxKnight", - "Dschubba", - "marumari" + "Morphbreed", + "schlagi123" ] }, - "Web/Security/Certificate_Transparency": { - "modified": "2020-05-12T09:08:53.446Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Number": { + "modified": "2020-10-15T21:45:14.479Z", "contributors": [ - "dennissterzenbach" + "schlagi123", + "doeck" ] }, - "Web/Security/Public_Key_Pinning": { - "modified": "2020-10-15T21:39:59.794Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/Object": { + "modified": "2019-03-23T22:30:41.741Z", "contributors": [ - "Dschubba", - "GanbaruTobi", - "rugk", - "TheAlxH", - "mozjan" + "peter30mar2017", + "fl1p" ] }, - "Web/WebAPI": { - "modified": "2019-03-23T23:21:31.048Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/RangeError": { + "modified": "2019-03-23T22:12:08.670Z", "contributors": [ - "wbamberg", - "fscholz", - "casarock", - "sbarthel", - "TitanNano" + "ThomasFe" ] }, - "Web/WebAPI/verwenden_von_geolocation": { - "modified": "2019-03-23T22:52:49.349Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/String": { + "modified": "2020-10-15T22:24:44.810Z", "contributors": [ - "shaedrich", - "42triangles", - "silend" + "Symtex99" ] }, - "Web/Web_Components": { - "modified": "2019-03-18T20:58:34.307Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError": { + "modified": "2020-10-15T21:46:29.639Z", "contributors": [ - "SetTrend", - "vssn", - "pkos98", - "dreitzner", - "DomenicDenicola" + "schlagi123" ] }, - "Web/Web_Components/Custom_Elements": { - "modified": "2019-03-23T22:05:53.556Z", + "conflicting/Web/JavaScript/Reference/Global_Objects/TypeError": { + "modified": "2020-10-15T21:58:39.373Z", "contributors": [ - "amelzer" + "schlagi123", + "Sheggy" ] }, - "Web/Web_Components/Using_custom_elements": { - "modified": "2020-03-12T05:58:55.117Z", + "conflicting/Web/JavaScript/Reference/Operators": { + "modified": "2020-10-15T21:51:28.246Z", "contributors": [ - "napengam", - "stekoe", - "hermann77", - "Maik", - "td8" + "fscholz", + "kaljak", + "schlagi123", + "mizhac", + "MemoWalk" ] }, - "Web/XML": { - "modified": "2019-03-24T00:03:04.279Z", + "conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163": { + "modified": "2020-10-15T21:43:07.470Z", "contributors": [ - "ExE-Boss" + "schlagi123", + "LeisureLarry", + "Webastronaut" ] }, - "Web/XML/XML_Einführung": { - "modified": "2019-05-01T21:51:49.890Z", + "conflicting/Web/JavaScript/Reference/Operators/Spread_syntax": { + "modified": "2020-03-12T19:42:35.849Z", "contributors": [ - "ExE-Boss", - "fscholz", - "XxPlay9xX", - "Mowtrains", - "Maxemil", - "Tammo", - "M@d Man" + "developitz", + "mschleeweiss", + "kdex", + "theRealBaccata", + "schlagi123", + "sbusch", + "olhaar" ] }, - "Web/XSLT": { - "modified": "2019-03-24T00:03:43.722Z", + "conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039": { + "modified": "2020-10-15T21:37:40.074Z", "contributors": [ - "ExE-Boss", - "ysi", - "fscholz", - "Joda" + "Hocdoc", + "christophfriedrich", + "schlagi123", + "Elyasin", + "loki" ] }, - "WebSockets": { - "modified": "2019-03-23T22:59:48.670Z", + "conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076": { + "modified": "2020-10-15T21:48:40.239Z", "contributors": [ - "Johann150", - "mvb1996" + "wbamberg", + "schlagi123" ] }, - "WebSockets/Writing_WebSocket_servers": { - "modified": "2020-08-15T02:07:04.944Z", + "conflicting/Web/JavaScript/Reference/Statements/switch": { + "modified": "2020-10-15T21:46:29.118Z", "contributors": [ - "otde2016" + "schlagi123", + "eluchsinger" ] }, - "Web_Development/Mobile": { - "modified": "2019-03-23T23:29:04.325Z", + "conflicting/Web/Web_Components/Using_custom_elements": { + "modified": "2019-03-23T22:05:53.556Z", "contributors": [ - "wbamberg" + "amelzer" ] }, - "Web_Development/Mobile/Responsive_design": { - "modified": "2019-03-23T23:29:04.477Z", + "conflicting/Web/API": { + "modified": "2019-03-23T23:21:31.048Z", "contributors": [ - "HolgerSinn.Com" + "wbamberg", + "fscholz", + "casarock", + "sbarthel", + "TitanNano" ] }, - "Webentwicklung": { + "conflicting/Web/Guide": { "modified": "2019-03-24T00:03:49.652Z", "contributors": [ "TornadoIDS", diff --git a/files/de/conflicting/glossary/doctype/index.html b/files/de/conflicting/glossary/doctype/index.html index 21847d1d09..1e8e143036 100644 --- a/files/de/conflicting/glossary/doctype/index.html +++ b/files/de/conflicting/glossary/doctype/index.html @@ -1,6 +1,6 @@ --- title: DTD -slug: Glossary/DTD +slug: conflicting/Glossary/Doctype tags: - CodingScripting - Document @@ -8,5 +8,6 @@ tags: - HTML translation_of: Glossary/Doctype translation_of_original: Glossary/DTD +original_slug: Glossary/DTD ---

{{page("/de/docs/Glossary/Doctype")}}

diff --git a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html index be9302eb6e..12f194ed66 100644 --- a/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html +++ b/files/de/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -1,8 +1,9 @@ --- title: Color -slug: Web/Guide/CSS/Getting_started/Farbe +slug: conflicting/Learn/CSS/Building_blocks/Values_and_units translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors translation_of_original: Web/Guide/CSS/Getting_started/Color +original_slug: Web/Guide/CSS/Getting_started/Farbe ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html index 01933a9171..a9787ad03f 100644 --- a/files/de/conflicting/learn/css/first_steps/how_css_works/index.html +++ b/files/de/conflicting/learn/css/first_steps/how_css_works/index.html @@ -1,8 +1,9 @@ --- title: Why use CSS? -slug: Web/Guide/CSS/Getting_started/Why_use_CSS +slug: conflicting/Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +original_slug: Web/Guide/CSS/Getting_started/Why_use_CSS ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html index 8e980ce43c..9a5325863a 100644 --- a/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html +++ b/files/de/conflicting/learn/css/first_steps/how_css_works_0e31d13696060558e208fc6c734ae400/index.html @@ -1,8 +1,10 @@ --- title: Wie CSS funktioniert -slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert +slug: >- + conflicting/Learn/CSS/First_steps/How_CSS_works_0e31d13696060558e208fc6c734ae400 translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +original_slug: Web/Guide/CSS/Getting_started/Wie_CSS_funktioniert ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/conflicting/learn/css/first_steps/index.html b/files/de/conflicting/learn/css/first_steps/index.html index 9472041b96..cd2ed7137a 100644 --- a/files/de/conflicting/learn/css/first_steps/index.html +++ b/files/de/conflicting/learn/css/first_steps/index.html @@ -1,11 +1,12 @@ --- title: Einführung -slug: Web/Guide/CSS/Getting_started +slug: conflicting/Learn/CSS/First_steps tags: - CSS - - 'CSS:Einführung' + - CSS:Einführung translation_of: Learn/CSS/First_steps translation_of_original: Web/Guide/CSS/Getting_started +original_slug: Web/Guide/CSS/Getting_started ---

Einleitung

Dieser Artikel stellt eine Einführung in Cascading Style Sheets (CSS) dar.

diff --git a/files/de/conflicting/learn/javascript/objects/index.html b/files/de/conflicting/learn/javascript/objects/index.html index 41d67bc025..d09b4c33bc 100644 --- a/files/de/conflicting/learn/javascript/objects/index.html +++ b/files/de/conflicting/learn/javascript/objects/index.html @@ -1,6 +1,6 @@ --- title: Einführung in objektorientiertes JavaScript -slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +slug: conflicting/Learn/JavaScript/Objects tags: - Constructor - Encapsulation @@ -14,6 +14,7 @@ tags: - Object-Oriented translation_of: Learn/JavaScript/Objects translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +original_slug: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript ---
{{jsSidebar("Introductory")}}
diff --git a/files/de/conflicting/mdn/contribute/getting_started/index.html b/files/de/conflicting/mdn/contribute/getting_started/index.html index 84ae882896..4a36d8078f 100644 --- a/files/de/conflicting/mdn/contribute/getting_started/index.html +++ b/files/de/conflicting/mdn/contribute/getting_started/index.html @@ -1,12 +1,13 @@ --- title: Was alles im MDN zu tun ist -slug: MDN/Contribute/zu_tun_im_MDN +slug: conflicting/MDN/Contribute/Getting_started tags: - Anleitung - Guide - MDN translation_of: MDN/Contribute/Getting_started translation_of_original: MDN/Contribute/Tasks +original_slug: MDN/Contribute/zu_tun_im_MDN ---
{{MDNSidebar}}

Du willst das MDN besser machen? Es gibt viele Wege, wie du helfen kannst: du kannst Tippfehler verbessern, neue Inhalte verfassen, du kannst sogar die Kuma Plattform verbessern, auf welcher diese Seite aufbaut. Der Artikel "Beitragen zu MDN" deckt alle Möglichkeiten ab, wobei und wie du uns helfen könntest. Unten findest du eine etwas spezifischere Liste an Aufgaben die erledigt werden müssen.

diff --git a/files/de/conflicting/mdn/contribute/index.html b/files/de/conflicting/mdn/contribute/index.html index 7fc3bce3fa..07d2219443 100644 --- a/files/de/conflicting/mdn/contribute/index.html +++ b/files/de/conflicting/mdn/contribute/index.html @@ -1,10 +1,11 @@ --- title: Zum MDN beitragen -slug: MDN_at_ten/Zum_MDN_beitragen +slug: conflicting/MDN/Contribute tags: - MDN Meta - Mitmachen translation_of: MDN_at_ten/Contributing_to_MDN +original_slug: MDN_at_ten/Zum_MDN_beitragen ---
diff --git a/files/de/conflicting/mozilla/add-ons/index.html b/files/de/conflicting/mozilla/add-ons/index.html index 7d2d7a72b0..1a3425a085 100644 --- a/files/de/conflicting/mozilla/add-ons/index.html +++ b/files/de/conflicting/mozilla/add-ons/index.html @@ -1,10 +1,11 @@ --- title: Erweiterung erstellen -slug: Erweiterung_erstellen +slug: conflicting/Mozilla/Add-ons tags: - Erweiterungen translation_of: Mozilla/Add-ons translation_of_original: Building_an_Extension +original_slug: Erweiterung_erstellen ---

Schnellstart

diff --git a/files/de/conflicting/web/accessibility/index.html b/files/de/conflicting/web/accessibility/index.html index 363f4646da..05ca68042d 100644 --- a/files/de/conflicting/web/accessibility/index.html +++ b/files/de/conflicting/web/accessibility/index.html @@ -1,8 +1,9 @@ --- title: Webentwicklung -slug: Web/Barrierefreiheit/Webentwicklung +slug: conflicting/Web/Accessibility translation_of: Web/Accessibility translation_of_original: Web/Accessibility/Web_Development +original_slug: Web/Barrierefreiheit/Webentwicklung ---

 

diff --git a/files/de/conflicting/web/api/document_object_model/index.html b/files/de/conflicting/web/api/document_object_model/index.html index 2b8856fa6f..5378702f04 100644 --- a/files/de/conflicting/web/api/document_object_model/index.html +++ b/files/de/conflicting/web/api/document_object_model/index.html @@ -1,10 +1,11 @@ --- title: Über das Document Object Model -slug: DOM/Ueber_das_Document_Object_Model +slug: conflicting/Web/API/Document_Object_Model tags: - DOM translation_of: Web/API/Document_Object_Model translation_of_original: DOM/About_the_Document_Object_Model +original_slug: DOM/Ueber_das_Document_Object_Model ---

Was ist das DOM?

diff --git a/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html index fc26bc0bee..9e3c7c7c46 100644 --- a/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html +++ b/files/de/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -1,6 +1,6 @@ --- title: DOM developer guide -slug: Web/Guide/DOM +slug: conflicting/Web/API/Document_Object_Model_656f0e51418b39c498011268be9b3a10 tags: - API - DOM @@ -9,6 +9,7 @@ tags: - TopicStub translation_of: Web/API/Document_Object_Model translation_of_original: Web/Guide/API/DOM +original_slug: Web/Guide/DOM ---

{{draft}}

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

diff --git a/files/de/conflicting/web/api/index.html b/files/de/conflicting/web/api/index.html index 0726dd787a..cc4ef0187c 100644 --- a/files/de/conflicting/web/api/index.html +++ b/files/de/conflicting/web/api/index.html @@ -1,6 +1,6 @@ --- title: WebAPI -slug: Web/WebAPI +slug: conflicting/Web/API tags: - Apps - DOM @@ -8,6 +8,7 @@ tags: - Mobile translation_of: Web/API translation_of_original: WebAPI +original_slug: Web/WebAPI ---

WebAPI ist ein Begriff, der auf eine Palette von Zugangs APIs verweist, die Web-Anwendungen erlaubt auf Geräte-Hardware (wie z. B. den Batteriestatus oder die Vibrations Hardware) zu zugreifen. Der Zugriff auf Daten (z. B. Kalender oder Kontakte), die auf dem Gerät gespeichert wurden ist ebenso möglich. Durch das Hinzufügen dieser APIs, hoffen wir, dass das Web um Funktionen erweitert wird, die proprietär Plattformen schon länger bereitstellen.

diff --git a/files/de/conflicting/web/api/windoworworkerglobalscope/index.html b/files/de/conflicting/web/api/windoworworkerglobalscope/index.html index 67f9f76863..b6127c730b 100644 --- a/files/de/conflicting/web/api/windoworworkerglobalscope/index.html +++ b/files/de/conflicting/web/api/windoworworkerglobalscope/index.html @@ -1,6 +1,6 @@ --- title: WindowTimers -slug: Web/API/WindowTimers +slug: conflicting/Web/API/WindowOrWorkerGlobalScope tags: - API - HTML-DOM @@ -11,6 +11,7 @@ tags: - Workers translation_of: Web/API/WindowOrWorkerGlobalScope translation_of_original: Web/API/WindowTimers +original_slug: Web/API/WindowTimers ---
{{APIRef("HTML DOM")}}
diff --git a/files/de/conflicting/web/css/_doublecolon_placeholder/index.html b/files/de/conflicting/web/css/_doublecolon_placeholder/index.html index eb6775111e..40df58fe68 100644 --- a/files/de/conflicting/web/css/_doublecolon_placeholder/index.html +++ b/files/de/conflicting/web/css/_doublecolon_placeholder/index.html @@ -1,13 +1,14 @@ --- title: '::-moz-placeholder' -slug: 'Web/CSS/::-moz-placeholder' +slug: conflicting/Web/CSS/::placeholder tags: - CSS - CSS Pseudo-class - CSS Reference - Non-standard -translation_of: 'Web/CSS/::placeholder' -translation_of_original: 'Web/CSS/::-moz-placeholder' +translation_of: Web/CSS/::placeholder +translation_of_original: Web/CSS/::-moz-placeholder +original_slug: Web/CSS/::-moz-placeholder ---
{{Non-standard_header}}{{CSSRef}}
diff --git a/files/de/conflicting/web/css/css_basic_user_interface/index.html b/files/de/conflicting/web/css/css_basic_user_interface/index.html index 7ee80c0eef..0fc6315c11 100644 --- a/files/de/conflicting/web/css/css_basic_user_interface/index.html +++ b/files/de/conflicting/web/css/css_basic_user_interface/index.html @@ -1,6 +1,6 @@ --- title: CSS User Interface -slug: Web/CSS/CSS_User_Interface +slug: conflicting/Web/CSS/CSS_Basic_User_Interface tags: - CSS - CSS Basic User Interface @@ -8,6 +8,7 @@ tags: - Übersicht translation_of: Web/CSS/CSS_Basic_User_Interface translation_of_original: Web/CSS/CSS_User_Interface +original_slug: Web/CSS/CSS_User_Interface ---
{{CSSRef}}
diff --git a/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 38d6da7946..94036aefdd 100644 --- a/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/de/conflicting/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -1,8 +1,9 @@ --- title: Using CSS flexible boxes -slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +slug: conflicting/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes +original_slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes ---
{{CSSRef}}
diff --git a/files/de/conflicting/web/css/cursor/index.html b/files/de/conflicting/web/css/cursor/index.html index 2fbbb81111..a57babd069 100644 --- a/files/de/conflicting/web/css/cursor/index.html +++ b/files/de/conflicting/web/css/cursor/index.html @@ -1,11 +1,12 @@ --- title: '-moz-cell' -slug: Web/CSS/-moz-cell +slug: conflicting/Web/CSS/cursor tags: - CSS - Non-standard translation_of: Web/CSS/cursor translation_of_original: Web/CSS/-moz-cell +original_slug: Web/CSS/-moz-cell ---
{{CSSRef}}{{obsolete_header}}
diff --git a/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html b/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html index abed12bcdf..df2a18e703 100644 --- a/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html +++ b/files/de/conflicting/web/css/cursor_35a62ea3f10b688a3a87ccfe07779743/index.html @@ -1,10 +1,11 @@ --- title: alias -slug: Web/CSS/Alias +slug: conflicting/Web/CSS/cursor_35a62ea3f10b688a3a87ccfe07779743 tags: - CSS translation_of: Web/CSS/cursor translation_of_original: Web/CSS/Alias +original_slug: Web/CSS/Alias ---

Der alias {{cssxref("cursor")}} Wert wird verwendet, um einen Alias oder ein Kürzel zu etwas, das erstellt wird, zu kennzeichnen. Der Aliaszeiger wird als ein Pfeil mit einem kleinen kurvigen Pfeil daneben dargestellt.

diff --git a/files/de/conflicting/web/css/float/index.html b/files/de/conflicting/web/css/float/index.html index 8c17b309fa..fb9978780d 100644 --- a/files/de/conflicting/web/css/float/index.html +++ b/files/de/conflicting/web/css/float/index.html @@ -1,8 +1,9 @@ --- title: none -slug: Web/CSS/none +slug: conflicting/Web/CSS/float translation_of: Web/CSS/float translation_of_original: Web/CSS/none +original_slug: Web/CSS/none ---
{{ CSSRef() }}
diff --git a/files/de/conflicting/web/css/font-variant/index.html b/files/de/conflicting/web/css/font-variant/index.html index 1bf3818e01..b9e03054c7 100644 --- a/files/de/conflicting/web/css/font-variant/index.html +++ b/files/de/conflicting/web/css/font-variant/index.html @@ -1,8 +1,9 @@ --- title: normal -slug: Web/CSS/normal +slug: conflicting/Web/CSS/font-variant translation_of: Web/CSS/font-variant translation_of_original: Web/CSS/normal +original_slug: Web/CSS/normal ---
{{ CSSRef() }}
diff --git a/files/de/conflicting/web/css/width/index.html b/files/de/conflicting/web/css/width/index.html index 9279631046..9afa20932c 100644 --- a/files/de/conflicting/web/css/width/index.html +++ b/files/de/conflicting/web/css/width/index.html @@ -1,8 +1,9 @@ --- title: auto -slug: Web/CSS/auto +slug: conflicting/Web/CSS/width translation_of: Web/CSS/width translation_of_original: Web/CSS/auto +original_slug: Web/CSS/auto ---
{{CSSRef}}
diff --git a/files/de/conflicting/web/guide/index.html b/files/de/conflicting/web/guide/index.html index 0223fdfb7f..758598592d 100644 --- a/files/de/conflicting/web/guide/index.html +++ b/files/de/conflicting/web/guide/index.html @@ -1,10 +1,11 @@ --- title: Webentwicklung -slug: Webentwicklung +slug: conflicting/Web/Guide tags: - Webentwicklung translation_of: Web/Guide translation_of_original: Web_Development +original_slug: Webentwicklung ---

Webentwicklung umfasst alle Aspekte der Entwicklung einer Webseite oder Webanwendung.

Von einer einfachen Webseite bis zu komplexen, interaktiven Webanwendungen finden sich hier Artikel und Referenzen zu den unterschiedlichen Technologien der Webentwicklung.

diff --git a/files/de/conflicting/web/html/element/index.html b/files/de/conflicting/web/html/element/index.html index 4b38e72119..8efe64c807 100644 --- a/files/de/conflicting/web/html/element/index.html +++ b/files/de/conflicting/web/html/element/index.html @@ -1,8 +1,9 @@ --- title: Liste der HTML5-Elemente -slug: Web/HTML/HTML5/HTML5_element_list +slug: conflicting/Web/HTML/Element translation_of: Web/HTML/Element translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +original_slug: Web/HTML/HTML5/HTML5_element_list ---

Auf dieser Seite finden Sie eine Liste aller Standard HTML5-Elemente, beschrieben durch ihr öffnendes Tag, nach Funktion gruppiert. Diese Liste enthält ausschließlich die gültigen HTML5-Elemente. In neuen Websites sollten nur die hier aufgezählten Tags verwendet werden. Eine komplette Liste aller HTML-Elemente finden Sie im Index aller HTML-Elemente. Dieser enthält sämtliche möglichen Tags: standardisierte, nicht-standardkonforme, gültige, obsolete und als veraltet ("deprecated") betrachtete.

diff --git a/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html index ee766c3529..991ad14c76 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -1,12 +1,13 @@ --- title: ArrayBuffer.prototype -slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/ArrayBuffer tags: - ArrayBuffer - JavaScript - Property translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html index 62a430fac2..9d0c5ab3ac 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -1,6 +1,6 @@ --- title: Boolean.prototype -slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Boolean tags: - Boolean - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Boolean translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Boolean/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html index e03aff8a8d..66c7adba5f 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -1,12 +1,13 @@ --- title: DataView.prototype -slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/DataView tags: - DataView - JavaScript - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/DataView translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/DataView/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/date/index.html b/files/de/conflicting/web/javascript/reference/global_objects/date/index.html index ab69ff1528..8170bac635 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/date/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/date/index.html @@ -1,6 +1,6 @@ --- title: Date.prototype -slug: Web/JavaScript/Reference/Global_Objects/Date/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Date tags: - Date - JavaScript @@ -9,6 +9,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/Date translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Date/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/error/index.html b/files/de/conflicting/web/javascript/reference/global_objects/error/index.html index 2a48748822..21605b0596 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/error/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/error/index.html @@ -1,12 +1,13 @@ --- title: Error.prototype -slug: Web/JavaScript/Reference/Global_Objects/Error/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Error tags: - Error - JavaScript - Property translation_of: Web/JavaScript/Reference/Global_Objects/Error translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Error/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html index 7de0a353bc..33c7d7627c 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -1,6 +1,6 @@ --- title: EvalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/EvalError tags: - Error - EvalError @@ -8,6 +8,7 @@ tags: - Property translation_of: Web/JavaScript/Reference/Global_Objects/EvalError translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/EvalError/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/function/index.html b/files/de/conflicting/web/javascript/reference/global_objects/function/index.html index 44598455e8..fab649a648 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/function/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/function/index.html @@ -1,6 +1,6 @@ --- title: Function.prototype -slug: Web/JavaScript/Reference/Global_Objects/Function/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Function tags: - Function - JavaScript @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Function translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Function/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html index e514a8c9d7..a488196f60 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -1,6 +1,6 @@ --- title: GeneratorFunction.prototype -slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/GeneratorFunction tags: - ECMAScript 2015 - GeneratorFunction @@ -11,6 +11,7 @@ tags: - Reference translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html index 8ed0c2de4b..9cb53a54b0 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -1,6 +1,6 @@ --- title: InternalError.prototype -slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/InternalError tags: - Error - InternalError @@ -8,6 +8,7 @@ tags: - Property translation_of: Web/JavaScript/Reference/Global_Objects/InternalError translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/InternalError/prototype ---
{{JSRef}} {{non-standard_header}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html index 2b041c3f26..5cea169d48 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/collator/index.html @@ -1,6 +1,6 @@ --- title: Intl.Collator.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/Collator tags: - Collator - Internationalization @@ -9,6 +9,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html index ab0a86d286..501e95b658 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.DateTimeFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat tags: - DateTimeFormat - Internationalization @@ -9,6 +9,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html index 142aefbfcc..e4bfdeea20 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -1,6 +1,6 @@ --- title: Intl.NumberFormat.prototype -slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat tags: - Internationalization - JavaScript @@ -9,6 +9,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/map/index.html b/files/de/conflicting/web/javascript/reference/global_objects/map/index.html index 35399160b1..2d89c00f91 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/map/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/map/index.html @@ -1,12 +1,13 @@ --- title: Map.prototype -slug: Web/JavaScript/Reference/Global_Objects/Map/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Map tags: - JavaScript - Map - Property translation_of: Web/JavaScript/Reference/Global_Objects/Map translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Map/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/number/index.html b/files/de/conflicting/web/javascript/reference/global_objects/number/index.html index f44a20d90d..ee44ae5fbe 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/number/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/number/index.html @@ -1,6 +1,6 @@ --- title: Number.prototype -slug: Web/JavaScript/Reference/Global_Objects/Number/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Number tags: - JavaScript - Number @@ -8,6 +8,7 @@ tags: - Prototype translation_of: Web/JavaScript/Reference/Global_Objects/Number translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Number/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/object/index.html b/files/de/conflicting/web/javascript/reference/global_objects/object/index.html index d6fdd3de2b..a765011f5e 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/object/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/object/index.html @@ -1,8 +1,9 @@ --- title: Object.prototype -slug: Web/JavaScript/Reference/Global_Objects/Object/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/Object translation_of: Web/JavaScript/Reference/Global_Objects/Object translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/Object/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html index fba99e1e5a..101f9bdb0d 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -1,8 +1,9 @@ --- title: RangeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/RangeError translation_of: Web/JavaScript/Reference/Global_Objects/RangeError translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/RangeError/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/string/index.html b/files/de/conflicting/web/javascript/reference/global_objects/string/index.html index aad1a12ead..f59f666c32 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/string/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/string/index.html @@ -1,6 +1,6 @@ --- title: String.prototype -slug: Web/JavaScript/Reference/Global_Objects/String/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/String tags: - Eigentum - JavaScript @@ -10,6 +10,7 @@ tags: - String translation_of: Web/JavaScript/Reference/Global_Objects/String translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/String/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html index eaa648d375..a8c283fba6 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -1,6 +1,6 @@ --- title: SyntaxError.prototype -slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/SyntaxError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - SyntaxError translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html index 6c7e61d363..bff6dc355f 100644 --- a/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html +++ b/files/de/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -1,6 +1,6 @@ --- title: TypeError.prototype -slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +slug: conflicting/Web/JavaScript/Reference/Global_Objects/TypeError tags: - Error - JavaScript @@ -9,6 +9,7 @@ tags: - TypeError translation_of: Web/JavaScript/Reference/Global_Objects/TypeError translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +original_slug: Web/JavaScript/Reference/Global_Objects/TypeError/prototype ---
{{JSRef}}
diff --git a/files/de/conflicting/web/javascript/reference/operators/index.html b/files/de/conflicting/web/javascript/reference/operators/index.html index 598d43df68..1d540b8f9e 100644 --- a/files/de/conflicting/web/javascript/reference/operators/index.html +++ b/files/de/conflicting/web/javascript/reference/operators/index.html @@ -1,12 +1,13 @@ --- title: Bitweise Operatoren -slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren +slug: conflicting/Web/JavaScript/Reference/Operators tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +original_slug: Web/JavaScript/Reference/Operators/Bitwise_Operatoren ---
{{jsSidebar("Operators")}}
diff --git a/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html index ee125663f4..41317b23e8 100644 --- a/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html +++ b/files/de/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -1,6 +1,6 @@ --- title: Spread-Operator -slug: Web/JavaScript/Reference/Operators/Spread_operator +slug: conflicting/Web/JavaScript/Reference/Operators/Spread_syntax tags: - ECMAScript 2015 - Iterator @@ -8,6 +8,7 @@ tags: - Operator translation_of: Web/JavaScript/Reference/Operators/Spread_syntax translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +original_slug: Web/JavaScript/Reference/Operators/Spread_operator ---
{{jsSidebar("Operators")}}
diff --git a/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html b/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html index ceedd1eb07..01e5b9c0fb 100644 --- a/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html +++ b/files/de/conflicting/web/javascript/reference/operators_5b3986b830cf68059c03079ef10ff039/index.html @@ -1,12 +1,14 @@ --- title: Vergleichsoperatoren -slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren +slug: >- + conflicting/Web/JavaScript/Reference/Operators_5b3986b830cf68059c03079ef10ff039 tags: - JavaScript - Operator - Reference translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +original_slug: Web/JavaScript/Reference/Operators/Vergleichsoperatoren ---
{{jsSidebar("Operators")}}
diff --git a/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html index 6a20e85b79..78a7289ae7 100644 --- a/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html +++ b/files/de/conflicting/web/javascript/reference/operators_8b4515dbed18a24ecb01bfe0755ca163/index.html @@ -1,6 +1,7 @@ --- title: Logische Operatoren -slug: Web/JavaScript/Reference/Operators/Logische_Operatoren +slug: >- + conflicting/Web/JavaScript/Reference/Operators_8b4515dbed18a24ecb01bfe0755ca163 tags: - JavaScript - Logic @@ -12,6 +13,7 @@ tags: - or translation_of: Web/JavaScript/Reference/Operators translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +original_slug: Web/JavaScript/Reference/Operators/Logische_Operatoren ---
{{jsSidebar("Operators")}}
diff --git a/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html b/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html index 5df33bfe62..7bc7141aec 100644 --- a/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html +++ b/files/de/conflicting/web/javascript/reference/operators_bf514126b51a6e9b7591809ecc554076/index.html @@ -1,11 +1,13 @@ --- title: Zuweisungsoperator -slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator +slug: >- + conflicting/Web/JavaScript/Reference/Operators_bf514126b51a6e9b7591809ecc554076 tags: - JavaScript - Operator translation_of: Web/JavaScript/Reference/Operators#Assignment_operators translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +original_slug: Web/JavaScript/Reference/Operators/Zuweisungsoperator ---
{{jsSidebar("Operators")}}
diff --git a/files/de/conflicting/web/javascript/reference/statements/switch/index.html b/files/de/conflicting/web/javascript/reference/statements/switch/index.html index f8845c9591..21d4dea5bc 100644 --- a/files/de/conflicting/web/javascript/reference/statements/switch/index.html +++ b/files/de/conflicting/web/javascript/reference/statements/switch/index.html @@ -1,11 +1,12 @@ --- title: default -slug: Web/JavaScript/Reference/Statements/default +slug: conflicting/Web/JavaScript/Reference/Statements/switch tags: - JavaScript - Keyword translation_of: Web/JavaScript/Reference/Statements/switch translation_of_original: Web/JavaScript/Reference/Statements/default +original_slug: Web/JavaScript/Reference/Statements/default ---
{{jsSidebar("Statements")}}
diff --git a/files/de/conflicting/web/progressive_web_apps/index.html b/files/de/conflicting/web/progressive_web_apps/index.html index 655d513afb..776eb5b45f 100644 --- a/files/de/conflicting/web/progressive_web_apps/index.html +++ b/files/de/conflicting/web/progressive_web_apps/index.html @@ -1,8 +1,9 @@ --- title: Responsive Design -slug: Web_Development/Mobile/Responsive_design +slug: conflicting/Web/Progressive_web_apps translation_of: Web/Progressive_web_apps translation_of_original: Web/Guide/Responsive_design +original_slug: Web_Development/Mobile/Responsive_design ---

Als Reaktion auf die Probleme mit dem getrennten Ansatz zur Entwicklung von Web-Sites für mobile und Desktop, wird eine relativ neue Idee (was ist eigentlich ziemlich alt) immer beliebter: Graben User-Agent-Erkennung, und stattdessen reagieren die Seiten  auf der Client-Seite in den Browser-Funktionen. Dieser Ansatz, der von Ethan Marcotte in seinem Artikel für A List Apart kam, wird als Responsive Web Design bekannt sein. Wie der getrennten Plattform Ansatz hat ansprechende Webdesign positive und negative Aspekte.

The Advantages

diff --git a/files/de/conflicting/web/web_components/using_custom_elements/index.html b/files/de/conflicting/web/web_components/using_custom_elements/index.html index f6b3761646..1d6da3f2c3 100644 --- a/files/de/conflicting/web/web_components/using_custom_elements/index.html +++ b/files/de/conflicting/web/web_components/using_custom_elements/index.html @@ -1,8 +1,9 @@ --- title: Benutzerdefinierte Elemente -slug: Web/Web_Components/Custom_Elements +slug: conflicting/Web/Web_Components/Using_custom_elements translation_of: Web/Web_Components/Using_custom_elements translation_of_original: Web/Web_Components/Custom_Elements +original_slug: Web/Web_Components/Custom_Elements ---

Benutzerdefinierte Elemente sind stellen die Möglichkeit bereit, benutzerdefinierte HTML-Elements zu schaffen. Sie können eigenes durch JavaScript beschriebenes Verhalten und CSS-Styling haben. Sie sind Teil der Web-Components, können aber auch unabhängig von diesen benutzt werden.

diff --git a/files/de/glossary/abstraction/index.html b/files/de/glossary/abstraction/index.html index 29f75adb98..ceb6adfed5 100644 --- a/files/de/glossary/abstraction/index.html +++ b/files/de/glossary/abstraction/index.html @@ -1,12 +1,13 @@ --- title: Abstraktion -slug: Glossary/Abstraktion +slug: Glossary/Abstraction tags: - Abstraktion - Glossar - Programmieren - Programmiersprache translation_of: Glossary/Abstraction +original_slug: Glossary/Abstraktion ---

Die Abstraktion in der {{Glossary("Computerprogrammierung")}} ist eine der Methoden zur Reduzierung der Komplexität von Code und der erleichterten Implementierung effizienterer Designs und Benutzerschnittstellen bei komplizierter Software. Die Abstraktion versteckt die technische Komplexität eines Systems hinter leicht verständlichen {{Glossary("API", "APIs")}}.

diff --git a/files/de/glossary/algorithm/index.html b/files/de/glossary/algorithm/index.html index 0c7109ae1e..9a8f4d44f7 100644 --- a/files/de/glossary/algorithm/index.html +++ b/files/de/glossary/algorithm/index.html @@ -1,10 +1,11 @@ --- title: Algorithmus -slug: Glossary/Algorithmus +slug: Glossary/Algorithm tags: - Algorithmus - Glossary translation_of: Glossary/Algorithm +original_slug: Glossary/Algorithmus ---

Ein Algorithmus ist eine eigenständige Abfolge von Anweisungen, die eine Funktion ausüben.

diff --git a/files/de/glossary/asynchronous/index.html b/files/de/glossary/asynchronous/index.html index 57f052e94f..ccc6281ad9 100644 --- a/files/de/glossary/asynchronous/index.html +++ b/files/de/glossary/asynchronous/index.html @@ -1,7 +1,8 @@ --- title: Asynchron -slug: Glossary/Asynchron +slug: Glossary/Asynchronous translation_of: Glossary/Asynchronous +original_slug: Glossary/Asynchron ---

Der Ausdruck Asynchron bezieht sich auf das Konzept, dass mehrere Dinge zeitgleich passieren oder mehre, verbundene Dinge geschehen ohne aufeinander zu warten. In der Informatik wird das Wort Asynchron meist in zwei Fällen unterschieden.

diff --git a/files/de/glossary/bandwidth/index.html b/files/de/glossary/bandwidth/index.html index b1c856463b..ce8c34138f 100644 --- a/files/de/glossary/bandwidth/index.html +++ b/files/de/glossary/bandwidth/index.html @@ -1,10 +1,11 @@ --- title: Bandbreite -slug: Glossary/Bandbreite +slug: Glossary/Bandwidth tags: - Glossar - Infrastruktur translation_of: Glossary/Bandwidth +original_slug: Glossary/Bandbreite ---

Die Bandbreite  ist der Abstand zwischen Unterfrequenz und Oberfrequenz und gibt z.B. an welche Informationsmenge während einer bestimmten Zeit durch eine Datenverbindung durchgespielt werden kann. Ueblicherweise wird sie in mehrfachen bit-per-seconds (bps) gemessen, z.B. megabits-per-second (Mbps) oder gigabits-per-second (Gbps).

diff --git a/files/de/glossary/class/index.html b/files/de/glossary/class/index.html index 0148e61387..c6179ec792 100644 --- a/files/de/glossary/class/index.html +++ b/files/de/glossary/class/index.html @@ -1,10 +1,11 @@ --- title: Klasse -slug: Glossary/Klasse +slug: Glossary/Class tags: - CodingScripting - Glossary translation_of: Glossary/Class +original_slug: Glossary/Klasse ---

In der {{glossary("OOP","objektorientierten Programmierung")}} definiert eine Klasse die Charakteristiken eines {{glossary("object","Objekts")}}. Eine Klasse ist eine Entwurfsdefinition der {{glossary("property","Eigenschaften")}} und {{glossary("method","Methoden")}} eines Objekts, der "Plan", von dem andere spezifischere Instanzen des Objekts abgeleitet werden.

diff --git a/files/de/glossary/constructor/index.html b/files/de/glossary/constructor/index.html index 7c719b55ea..0d3fdb5482 100644 --- a/files/de/glossary/constructor/index.html +++ b/files/de/glossary/constructor/index.html @@ -1,7 +1,8 @@ --- title: Konstruktor -slug: Glossary/Konstruktor +slug: Glossary/Constructor translation_of: Glossary/Constructor +original_slug: Glossary/Konstruktor ---

Ein Konstruktor gehört zu einer Instanz eines bestimmten Klassen-{{glossary("object","Objekts")}}.

diff --git a/files/de/glossary/cors-safelisted_request_header/index.html b/files/de/glossary/cors-safelisted_request_header/index.html index 97db753e07..b67f7237ed 100644 --- a/files/de/glossary/cors-safelisted_request_header/index.html +++ b/files/de/glossary/cors-safelisted_request_header/index.html @@ -1,9 +1,10 @@ --- title: CORS-zugelassene Anfrage-Header -slug: Glossary/CORS-zugelassener-anfrage-header +slug: Glossary/CORS-safelisted_request_header tags: - CORS translation_of: Glossary/CORS-safelisted_request_header +original_slug: Glossary/CORS-zugelassener-anfrage-header ---

Ein CORS-zugelassener Anfrage-Header ist einer der folgenden HTTP Header:

diff --git a/files/de/glossary/css_preprocessor/index.html b/files/de/glossary/css_preprocessor/index.html index 43cd580206..94064f4571 100644 --- a/files/de/glossary/css_preprocessor/index.html +++ b/files/de/glossary/css_preprocessor/index.html @@ -1,9 +1,10 @@ --- title: CSS-Präprozessor -slug: Glossary/CSS_Praeprozessor +slug: Glossary/CSS_preprocessor tags: - CSS translation_of: Glossary/CSS_preprocessor +original_slug: Glossary/CSS_Praeprozessor ---

Ein CSS-Präprozessor ist ein Programm zur Generierung von {{Glossary("CSS")}} aus der des Präprozessors eigenen {{Glossary("Syntax")}}. Es gibt eine Vielzahl von CSS Präprozessoren aus denen man wählen kann. Die meisten davon stellen Funktionen zur Verfügung, die in reinem CSS nicht verfügbar sind, wie beispielsweise Mixins, Nesting Selectors, Inheritance Selectors und andere. Diese Funktionen verhelfen der Struktur des CSS zu mehr Lesbarkeit und besserer Pflegbarkeit.

diff --git a/files/de/glossary/empty_element/index.html b/files/de/glossary/empty_element/index.html index fd95ef05a6..c050756a2e 100644 --- a/files/de/glossary/empty_element/index.html +++ b/files/de/glossary/empty_element/index.html @@ -1,11 +1,12 @@ --- title: Leeres Element -slug: Glossary/Leeres_Element +slug: Glossary/Empty_element tags: - CodingScripting - Fortgeschritten - Glossar translation_of: Glossary/Empty_element +original_slug: Glossary/Leeres_Element ---

Ein Leeres Element ist ein {{Glossary("Element")}} aus HTML, SVG oder MathML, welches keine untergeordneten Elemente besitzen kann.

diff --git a/files/de/glossary/encapsulation/index.html b/files/de/glossary/encapsulation/index.html index 98e06ad291..25b97e2141 100644 --- a/files/de/glossary/encapsulation/index.html +++ b/files/de/glossary/encapsulation/index.html @@ -1,9 +1,10 @@ --- title: Datenkapselung -slug: Glossary/Datenkapselung +slug: Glossary/Encapsulation tags: - Datenkapselung translation_of: Glossary/Encapsulation +original_slug: Glossary/Datenkapselung ---

Datenkapselung bezeichnet den Vorgang des Verbergens von Daten und {{glossary("function","functions")}} (Funktionen) in eine Komponente, wobei der Zugriff darauf beschränkt wird, es wird eine Art "Blackbox" für das {{glossary("object")}}  (Objekt) erstellt. Auf diese Weise braucht der Anwender solch einer Klasse nur das Interface zu kennen, also die Daten und Funktionen die nach außen hin sichtbar sind, und nicht die verborgene Implementierung.

diff --git a/files/de/glossary/first-class_function/index.html b/files/de/glossary/first-class_function/index.html index 05ac712188..ebb66baaec 100644 --- a/files/de/glossary/first-class_function/index.html +++ b/files/de/glossary/first-class_function/index.html @@ -1,7 +1,8 @@ --- title: Funktion erster Klasse -slug: Glossary/Funktion_erster-Klasse +slug: Glossary/First-class_Function translation_of: Glossary/First-class_Function +original_slug: Glossary/Funktion_erster-Klasse ---

Funktionen, die wie jede andere Variable behandelt werden, bezeichnet man als Funktionen erster Klasse.

diff --git a/files/de/glossary/forbidden_header_name/index.html b/files/de/glossary/forbidden_header_name/index.html index 23bbba81ca..041e2b9220 100644 --- a/files/de/glossary/forbidden_header_name/index.html +++ b/files/de/glossary/forbidden_header_name/index.html @@ -1,6 +1,6 @@ --- title: Verbotener Header-Name -slug: Glossary/verbotener_header_name +slug: Glossary/Forbidden_header_name tags: - Fetch - Glossar @@ -10,6 +10,7 @@ tags: - Verboten - Wörterverzeichnis translation_of: Glossary/Forbidden_header_name +original_slug: Glossary/verbotener_header_name ---

Ein verbotener Header-Name, ist ein HTTP header Name, welcher nicht programmatisch modifiziert werden kann;  that cannot be modified programmatically; speziell, ein HTTP Anfragen-Header Name.

diff --git a/files/de/glossary/information_architecture/index.html b/files/de/glossary/information_architecture/index.html index 33e6cbc130..c85551f66d 100644 --- a/files/de/glossary/information_architecture/index.html +++ b/files/de/glossary/information_architecture/index.html @@ -1,11 +1,12 @@ --- title: Informationsarchitektur -slug: Glossary/Informationsarchitektur +slug: Glossary/Information_architecture tags: - Design - Glossary - User experience translation_of: Glossary/Information_architecture +original_slug: Glossary/Informationsarchitektur ---

Informationsarchitektur (IA) bezeichnet die Organisation, Strukturierung und Gestaltung von Inhalten innerhalb einer Website sowie auf einzelnen Webseiten. Eine gute Informationsarchitektur ermöglicht den Nutzer*innen, die gesuchten Informationen einfach und schnell zu finden und zu nutzen; sie ist somit mitverantwortlich für das {{Glossary("UX", "Nutzungserlebnis (User Experience)")}} einer Website.

diff --git a/files/de/glossary/localization/index.html b/files/de/glossary/localization/index.html index 91b5063380..75cae277a2 100644 --- a/files/de/glossary/localization/index.html +++ b/files/de/glossary/localization/index.html @@ -1,9 +1,10 @@ --- title: Lokalisierung -slug: Lokalisierung +slug: Glossary/Localization tags: - Lokalisierung translation_of: Glossary/Localization +original_slug: Lokalisierung ---

Lokalisierung (L10n) ist der Vorgang zur Übersetzung von Programmbenutzeroberflächen in eine andere Sprache und deren Anpassung an weitere Eigenheiten anderer Kulturen. Auf den folgenden Seiten geht es darum Mozilla-basierte Anwendungen oder Erweiterungen zu lokalisieren. Hier wird auch von Software- bzw. Website-Lokalisierungen gesprochen.

diff --git a/files/de/glossary/object/index.html b/files/de/glossary/object/index.html index 19b2f9f3d9..1acdd7c790 100644 --- a/files/de/glossary/object/index.html +++ b/files/de/glossary/object/index.html @@ -1,11 +1,12 @@ --- title: Objekt -slug: Glossary/Objekt +slug: Glossary/Object tags: - Einführung - Objekt - Objektorientierte Programmierung translation_of: Glossary/Object +original_slug: Glossary/Objekt ---

Ein Objekt bezieht sich auf eine Datenstruktur welche Daten und Anweisungen beinhaltet. Objekte stellen manchmal Gegenstände aus der echten Welt dar, wie zum Beispiel ein Auto oder eine Karte in einem Rennspiel. {{glossary("JavaScript")}}, Java, C++, Python und Ruby sind Beispiele für  {{glossary("OOP","Objektorientierte Programmiersprachen")}}.

diff --git a/files/de/glossary/primitive/index.html b/files/de/glossary/primitive/index.html index 021ca95488..a77c9e8fff 100644 --- a/files/de/glossary/primitive/index.html +++ b/files/de/glossary/primitive/index.html @@ -1,12 +1,13 @@ --- title: Skalare Daten -slug: Glossary/einfache_datenelemente +slug: Glossary/Primitive tags: - Glossary - einfache Datentypen - primitive Datentypen - skalare Datentypen translation_of: Glossary/Primitive +original_slug: Glossary/einfache_datenelemente ---

Ein primitives (skalares) Datenelement (einfacher Wert, einfacher Datentyp) ist ein Datenelement, das kein {{Glossary("object","Objekt")}} ist und keine {{glossary("method","Methoden")}} besitzt.

diff --git a/files/de/glossary/protocol/index.html b/files/de/glossary/protocol/index.html index eb631a6a81..ce222f27a3 100644 --- a/files/de/glossary/protocol/index.html +++ b/files/de/glossary/protocol/index.html @@ -1,11 +1,12 @@ --- title: Protokoll -slug: Glossary/Protokoll +slug: Glossary/Protocol tags: - Glossary - Infrastructure - Protocols translation_of: Glossary/Protocol +original_slug: Glossary/Protokoll ---

Ein Protokoll ist ein System aus Regeln, die festlegen wie Daten in oder zwischen Computern ausgetauscht werden. Die Kommunikation zwischen Geräten erfordert, dass die Geräte im Format der ausgetauschten Daten übereinstimmen. Der Satz an Regeln, aus dem ein Format besteht, wird Protokoll genannt.

diff --git a/files/de/glossary/statement/index.html b/files/de/glossary/statement/index.html index 4913ac8f29..27eab6bf91 100644 --- a/files/de/glossary/statement/index.html +++ b/files/de/glossary/statement/index.html @@ -1,6 +1,6 @@ --- title: Anweisung -slug: Glossary/Anweisung +slug: Glossary/Statement tags: - Anweisung - Glossar @@ -8,6 +8,7 @@ tags: - JavaScript - befehl translation_of: Glossary/Statement +original_slug: Glossary/Anweisung ---

In einer Programmiersprache ist eine Anweisung eine Vorschrift innerhalb des Codes, die zur Laufzeit des Programmes einem Befehl entspricht. Jedes Programm ist zusammengesetzt aus einer Folge von Anweisungen. 

diff --git a/files/de/glossary/type/index.html b/files/de/glossary/type/index.html index 890c06d118..09a772b7d4 100644 --- a/files/de/glossary/type/index.html +++ b/files/de/glossary/type/index.html @@ -1,11 +1,12 @@ --- title: Typ -slug: Glossary/Typ +slug: Glossary/Type tags: - CodingScripting - Glossary - JavaScript translation_of: Glossary/Type +original_slug: Glossary/Typ ---

Typen sind Charakteristiken von {{Glossary("Value", "Werten")}}, die festlegen, welche Art von Daten oder Strukturen ein Wert bzw. eine Variable speichern kann.

diff --git a/files/de/glossary/vendor_prefix/index.html b/files/de/glossary/vendor_prefix/index.html index a97254fc6e..abf99f967d 100644 --- a/files/de/glossary/vendor_prefix/index.html +++ b/files/de/glossary/vendor_prefix/index.html @@ -1,6 +1,6 @@ --- title: Herstellerpräfix -slug: Glossary/Herstellerpräfix +slug: Glossary/Vendor_Prefix tags: - '-moz-' - '-ms-' @@ -14,6 +14,7 @@ tags: - Präfix - scripten translation_of: Glossary/Vendor_Prefix +original_slug: Glossary/Herstellerpräfix ---

Browserhersteller fügen manchmal Präfixe zu experimentellen oder nichtstandardisierten CSS-Eigenschaften hinzu, damit Entwickler mit neuen Ideen experimentieren können, während - in der Theorie - verhindert werden soll, dass sie sich auf diese Experimente verlassen und ihr Code dann während des Standardisierungsprozesses bricht. Entwickler sollten mit der Verwendung der Eigenschaft ohne Präfix warten, bis das Browserverhalten standardisiert ist.

diff --git a/files/de/learn/common_questions/how_does_the_internet_work/index.html b/files/de/learn/common_questions/how_does_the_internet_work/index.html index f780dac8a7..e53bb596f3 100644 --- a/files/de/learn/common_questions/how_does_the_internet_work/index.html +++ b/files/de/learn/common_questions/how_does_the_internet_work/index.html @@ -1,7 +1,8 @@ --- title: Wie das Internet funktioniert -slug: Learn/Common_questions/Wie_das_Internet_funktioniert +slug: Learn/Common_questions/How_does_the_Internet_work translation_of: Learn/Common_questions/How_does_the_Internet_work +original_slug: Learn/Common_questions/Wie_das_Internet_funktioniert ---
{{LearnSidebar}}
diff --git a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html index 79ce577e7f..66491c7d4b 100644 --- a/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html +++ b/files/de/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -1,8 +1,9 @@ --- title: Kaskadierung und Vererbung -slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +original_slug: Web/Guide/CSS/Getting_started/Kaskadierung_und_vererbung ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/learn/css/building_blocks/selectors/index.html b/files/de/learn/css/building_blocks/selectors/index.html index f61b8bb577..e99787c956 100644 --- a/files/de/learn/css/building_blocks/selectors/index.html +++ b/files/de/learn/css/building_blocks/selectors/index.html @@ -1,8 +1,9 @@ --- title: Selektoren -slug: Web/Guide/CSS/Getting_started/Selektoren +slug: Learn/CSS/Building_blocks/Selectors translation_of: Learn/CSS/Building_blocks/Selectors translation_of_original: Web/Guide/CSS/Getting_started/Selectors +original_slug: Web/Guide/CSS/Getting_started/Selektoren ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/learn/css/building_blocks/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html index 8c45b5ba69..7cf48f86f7 100644 --- a/files/de/learn/css/building_blocks/values_and_units/index.html +++ b/files/de/learn/css/building_blocks/values_and_units/index.html @@ -1,6 +1,6 @@ --- title: Werte und Einheiten in CSS -slug: Learn/CSS/Building_blocks/Werten_Einheiten +slug: Learn/CSS/Building_blocks/Values_and_units tags: - CSS - Einheiten @@ -8,6 +8,7 @@ tags: - Lernen - Werte translation_of: Learn/CSS/Building_blocks/Values_and_units +original_slug: Learn/CSS/Building_blocks/Werten_Einheiten ---
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
diff --git a/files/de/learn/css/first_steps/how_css_is_structured/index.html b/files/de/learn/css/first_steps/how_css_is_structured/index.html index 4c16c3e18d..ceaab03cc0 100644 --- a/files/de/learn/css/first_steps/how_css_is_structured/index.html +++ b/files/de/learn/css/first_steps/how_css_is_structured/index.html @@ -1,8 +1,9 @@ --- title: Lesbares CSS -slug: Web/Guide/CSS/Getting_started/Lesbares_CSS +slug: Learn/CSS/First_steps/How_CSS_is_structured translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +original_slug: Web/Guide/CSS/Getting_started/Lesbares_CSS ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/learn/css/first_steps/how_css_works/index.html b/files/de/learn/css/first_steps/how_css_works/index.html index 0641d048e4..a5a0fab8de 100644 --- a/files/de/learn/css/first_steps/how_css_works/index.html +++ b/files/de/learn/css/first_steps/how_css_works/index.html @@ -1,8 +1,9 @@ --- title: Was ist CSS -slug: Web/Guide/CSS/Getting_started/Was_ist_CSS +slug: Learn/CSS/First_steps/How_CSS_works translation_of: Learn/CSS/First_steps/How_CSS_works translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +original_slug: Web/Guide/CSS/Getting_started/Was_ist_CSS ---
{{CSSTutorialTOC}}
diff --git a/files/de/learn/css/styling_text/fundamentals/index.html b/files/de/learn/css/styling_text/fundamentals/index.html index 7a3a40f6e0..f3514793ac 100644 --- a/files/de/learn/css/styling_text/fundamentals/index.html +++ b/files/de/learn/css/styling_text/fundamentals/index.html @@ -1,8 +1,9 @@ --- title: Textstyles -slug: Web/Guide/CSS/Getting_started/Textstyles +slug: Learn/CSS/Styling_text/Fundamentals translation_of: Learn/CSS/Styling_text/Fundamentals translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +original_slug: Web/Guide/CSS/Getting_started/Textstyles ---

{{ CSSTutorialTOC() }}

diff --git a/files/de/learn/forms/index.html b/files/de/learn/forms/index.html index b0d1e8eb58..343876346b 100644 --- a/files/de/learn/forms/index.html +++ b/files/de/learn/forms/index.html @@ -1,6 +1,6 @@ --- title: HTML forms -slug: Learn/HTML/Forms +slug: Learn/Forms tags: - Anleitung - Beginner @@ -9,6 +9,7 @@ tags: - Lernen - Web translation_of: Learn/Forms +original_slug: Learn/HTML/Forms ---
{{LearnSidebar}}
diff --git a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html index 2eaa20a9ea..1b6f1c127a 100644 --- a/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html +++ b/files/de/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -1,6 +1,6 @@ --- title: Dateien nutzen -slug: Learn/Getting_started_with_the_web/dateien_nutzen +slug: Learn/Getting_started_with_the_web/Dealing_with_files tags: - Anfänger - Datei @@ -9,6 +9,7 @@ tags: - Pfad - Webseite translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +original_slug: Learn/Getting_started_with_the_web/dateien_nutzen ---
{{LearnSidebar}}
diff --git a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html index 7b5dfbc541..e368a1ca37 100644 --- a/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html +++ b/files/de/learn/getting_started_with_the_web/how_the_web_works/index.html @@ -1,6 +1,6 @@ --- title: Wie das Internet funktioniert -slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert +slug: Learn/Getting_started_with_the_web/How_the_Web_works tags: - Anfänger - Client @@ -14,6 +14,7 @@ tags: - TCP - Web translation_of: Learn/Getting_started_with_the_web/How_the_Web_works +original_slug: Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert ---
{{LearnSidebar}}
diff --git a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html index 65a31710d3..2f49aa255d 100644 --- a/files/de/learn/getting_started_with_the_web/javascript_basics/index.html +++ b/files/de/learn/getting_started_with_the_web/javascript_basics/index.html @@ -1,6 +1,6 @@ --- title: JavaScript-Grundlagen -slug: Learn/Getting_started_with_the_web/JavaScript_basis +slug: Learn/Getting_started_with_the_web/JavaScript_basics tags: - Anfänger - JavaScript @@ -8,6 +8,7 @@ tags: - Web - Webdesign translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +original_slug: Learn/Getting_started_with_the_web/JavaScript_basis ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html index 1075d63f66..d8c21be264 100644 --- a/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html +++ b/files/de/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -1,6 +1,6 @@ --- title: Fortgeschrittene Textformatierung -slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung +slug: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting tags: - Abkürzungen - Beginner @@ -11,6 +11,7 @@ tags: - Textformatierung - Zitate translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +original_slug: Learn/HTML/Einführung_in_HTML/Fortgeschrittene_Textformatierung ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html index d27bf253a4..6f67a374bb 100644 --- a/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html +++ b/files/de/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -1,6 +1,6 @@ --- title: Erstellen von Hyperlinks -slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks +slug: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks tags: - Beginner - Guide @@ -13,6 +13,7 @@ tags: - relativ - urls translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +original_slug: Learn/HTML/Einführung_in_HTML/Erstellen_von_Hyperlinks ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/debugging_html/index.html b/files/de/learn/html/introduction_to_html/debugging_html/index.html index 3e3223016e..d430537d4e 100644 --- a/files/de/learn/html/introduction_to_html/debugging_html/index.html +++ b/files/de/learn/html/introduction_to_html/debugging_html/index.html @@ -1,6 +1,6 @@ --- title: Fehlersuche in HTML -slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML +slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML tags: - Anfänger - Beginner @@ -10,6 +10,7 @@ tags: - Validation - validator translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +original_slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html index 7b9ce1bae8..f2e53c49d3 100644 --- a/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html +++ b/files/de/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -1,6 +1,6 @@ --- title: Struktur in die Webseite bringen -slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure +slug: Learn/HTML/Introduction_to_HTML/Document_and_website_structure tags: - Beginner - Guide @@ -10,6 +10,7 @@ tags: - Sitemap - Struktur translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +original_slug: Learn/HTML/Einführung_in_HTML/Document_and_website_structure ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/getting_started/index.html b/files/de/learn/html/introduction_to_html/getting_started/index.html index 0f5354d5d2..1ee9d1214e 100644 --- a/files/de/learn/html/introduction_to_html/getting_started/index.html +++ b/files/de/learn/html/introduction_to_html/getting_started/index.html @@ -1,6 +1,6 @@ --- title: Lerne HTML kennen -slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen +slug: Learn/HTML/Introduction_to_HTML/Getting_started tags: - Anfänger - Attribut @@ -14,6 +14,7 @@ tags: - Modul - whitespace translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +original_slug: Learn/HTML/Einführung_in_HTML/Lerne_HTML_kennen ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html index dad40a05a9..7bc567dc92 100644 --- a/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ b/files/de/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -1,6 +1,6 @@ --- title: Einfache Textformatierung in HTML -slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML +slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals tags: - Beginner - Einführung in HTML @@ -12,6 +12,7 @@ tags: - Text formatieren - Überschriften translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +original_slug: Learn/HTML/Einführung_in_HTML/Einfache_Textformatierung_in_HTML ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/index.html b/files/de/learn/html/introduction_to_html/index.html index 73f46a2614..625b9e01f7 100644 --- a/files/de/learn/html/introduction_to_html/index.html +++ b/files/de/learn/html/introduction_to_html/index.html @@ -1,6 +1,6 @@ --- title: Einführung in HTML -slug: Learn/HTML/Einführung_in_HTML +slug: Learn/HTML/Introduction_to_HTML tags: - Einführung in HTML - HTML @@ -12,6 +12,7 @@ tags: - Textformatierung - head translation_of: Learn/HTML/Introduction_to_HTML +original_slug: Learn/HTML/Einführung_in_HTML ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html index e2d3e9d636..ab291c955b 100644 --- a/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html +++ b/files/de/learn/html/introduction_to_html/marking_up_a_letter/index.html @@ -1,6 +1,6 @@ --- title: Marking up a letter -slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter +slug: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter tags: - Anfänger - Brief @@ -9,6 +9,7 @@ tags: - Text - head translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter +original_slug: Learn/HTML/Einführung_in_HTML/Marking_up_a_letter ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html index fc439ad60b..6f3e12ddb2 100644 --- a/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html +++ b/files/de/learn/html/introduction_to_html/structuring_a_page_of_content/index.html @@ -1,7 +1,8 @@ --- title: Structuring a page of content -slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content +slug: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content +original_slug: Learn/HTML/Einführung_in_HTML/Structuring_a_page_of_content ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html index f775774535..a4d67ac514 100644 --- a/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ b/files/de/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -1,6 +1,6 @@ --- title: Was gehört in den Kopf der HTML-Datei? -slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML tags: - Anfänger - Beginner @@ -14,6 +14,7 @@ tags: - head - lang translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +original_slug: Learn/HTML/Einführung_in_HTML/Der_Kopf_Metadaten_in_HTML ---
{{LearnSidebar}}
diff --git a/files/de/learn/html/tables/basics/index.html b/files/de/learn/html/tables/basics/index.html index a10e286570..b162ed291d 100644 --- a/files/de/learn/html/tables/basics/index.html +++ b/files/de/learn/html/tables/basics/index.html @@ -1,7 +1,8 @@ --- title: Grundtabellen in HTML -slug: Learn/HTML/Tables/Grund_tabelle_HTML +slug: Learn/HTML/Tables/Basics translation_of: Learn/HTML/Tables/Basics +original_slug: Learn/HTML/Tables/Grund_tabelle_HTML ---
{{LearnSidebar}}
diff --git a/files/de/learn/javascript/building_blocks/events/index.html b/files/de/learn/javascript/building_blocks/events/index.html index c07922c124..88c8c66afd 100644 --- a/files/de/learn/javascript/building_blocks/events/index.html +++ b/files/de/learn/javascript/building_blocks/events/index.html @@ -1,7 +1,8 @@ --- title: Einleitung der Ereignissen -slug: Learn/JavaScript/Bausteine/Ereignisse +slug: Learn/JavaScript/Building_blocks/Events translation_of: Learn/JavaScript/Building_blocks/Events +original_slug: Learn/JavaScript/Bausteine/Ereignisse ---
{{LearnSidebar}}
diff --git a/files/de/learn/javascript/building_blocks/index.html b/files/de/learn/javascript/building_blocks/index.html index 1c6fb8fc46..842f7f449f 100644 --- a/files/de/learn/javascript/building_blocks/index.html +++ b/files/de/learn/javascript/building_blocks/index.html @@ -1,7 +1,8 @@ --- title: JavaScript Bausteine -slug: Learn/JavaScript/Bausteine +slug: Learn/JavaScript/Building_blocks translation_of: Learn/JavaScript/Building_blocks +original_slug: Learn/JavaScript/Bausteine ---
{{LearnSidebar}}
diff --git a/files/de/learn/javascript/first_steps/a_first_splash/index.html b/files/de/learn/javascript/first_steps/a_first_splash/index.html index e772147cae..6f5418d17b 100644 --- a/files/de/learn/javascript/first_steps/a_first_splash/index.html +++ b/files/de/learn/javascript/first_steps/a_first_splash/index.html @@ -1,7 +1,8 @@ --- title: Ein erster Eindruck von JavaScript -slug: Learn/JavaScript/First_steps/Erster_Blick +slug: Learn/JavaScript/First_steps/A_first_splash translation_of: Learn/JavaScript/First_steps/A_first_splash +original_slug: Learn/JavaScript/First_steps/Erster_Blick ---
{{LearnSidebar}}
diff --git a/files/de/learn/javascript/first_steps/silly_story_generator/index.html b/files/de/learn/javascript/first_steps/silly_story_generator/index.html index 1703f9b6a7..d9d31e7c4f 100644 --- a/files/de/learn/javascript/first_steps/silly_story_generator/index.html +++ b/files/de/learn/javascript/first_steps/silly_story_generator/index.html @@ -1,7 +1,8 @@ --- title: Der Lustige Geschichten Generator -slug: Learn/JavaScript/First_steps/lustige_geschichten_generator +slug: Learn/JavaScript/First_steps/Silly_story_generator translation_of: Learn/JavaScript/First_steps/Silly_story_generator +original_slug: Learn/JavaScript/First_steps/lustige_geschichten_generator ---
{{LearnSidebar}}
diff --git a/files/de/learn/javascript/first_steps/what_is_javascript/index.html b/files/de/learn/javascript/first_steps/what_is_javascript/index.html index 247b4744c5..b3253d448f 100644 --- a/files/de/learn/javascript/first_steps/what_is_javascript/index.html +++ b/files/de/learn/javascript/first_steps/what_is_javascript/index.html @@ -1,7 +1,8 @@ --- title: Was ist JavaScript? -slug: Learn/JavaScript/First_steps/Was_ist_JavaScript +slug: Learn/JavaScript/First_steps/What_is_JavaScript translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +original_slug: Learn/JavaScript/First_steps/Was_ist_JavaScript ---
{{LearnSidebar}}
diff --git a/files/de/learn/server-side/first_steps/index.html b/files/de/learn/server-side/first_steps/index.html index d2a3cc75ca..46d00ed125 100644 --- a/files/de/learn/server-side/first_steps/index.html +++ b/files/de/learn/server-side/first_steps/index.html @@ -1,12 +1,13 @@ --- title: Erste Schritte in serverseitiger Webseiten-Programmierung -slug: Learn/Server-side/Erste_Schritte +slug: Learn/Server-side/First_steps tags: - Anfänger - Einführung - Lernen - Serverseitige Programmierung translation_of: Learn/Server-side/First_steps +original_slug: Learn/Server-side/Erste_Schritte ---

{{LearnSidebar}}
In diesem Modul beantworten wir grundlegende Fragen zur serverseitigen Programmierung - "Was ist das?", "Worin unterscheidet sie sich von der clientseitigen Programmierung?" und "Warum ist sie so nützlich?". Danach geben wir Ihnen einen Überblick über einige der beliebtesten serverseitigen Web-Frameworks und beraten Sie, wie Sie das am besten geeignete Framework für die Erstellung Ihrer ersten Website auswählen können. Schließlich bieten wir auch noch einen Einführungsartikel über Webserver-Sicherheit.

diff --git a/files/de/learn/server-side/first_steps/introduction/index.html b/files/de/learn/server-side/first_steps/introduction/index.html index 2924655941..48ab6570fc 100644 --- a/files/de/learn/server-side/first_steps/introduction/index.html +++ b/files/de/learn/server-side/first_steps/introduction/index.html @@ -1,10 +1,11 @@ --- title: Einführung auf der Serverseite -slug: Learn/Server-side/Erste_Schritte/Introduction +slug: Learn/Server-side/First_steps/Introduction tags: - Anfänger - Einführung translation_of: Learn/Server-side/First_steps/Introduction +original_slug: Learn/Server-side/Erste_Schritte/Introduction ---
{{LearnSidebar}}
diff --git a/files/de/mdn/about/index.html b/files/de/mdn/about/index.html index 745152be79..8cdb9aa58e 100644 --- a/files/de/mdn/about/index.html +++ b/files/de/mdn/about/index.html @@ -1,7 +1,8 @@ --- title: Über MDN -slug: MDN/Über +slug: MDN/About translation_of: MDN/About +original_slug: MDN/Über ---
{{MDNSidebar}}
diff --git a/files/de/mdn/at_ten/history_of_mdn/index.html b/files/de/mdn/at_ten/history_of_mdn/index.html index 3e33c984f3..bf0d54302a 100644 --- a/files/de/mdn/at_ten/history_of_mdn/index.html +++ b/files/de/mdn/at_ten/history_of_mdn/index.html @@ -1,9 +1,10 @@ --- title: MDNs Geschichte -slug: MDN_at_ten/History_of_MDN +slug: MDN/At_ten/History_of_MDN tags: - MDN translation_of: MDN_at_ten/History_of_MDN +original_slug: MDN_at_ten/History_of_MDN ---

In diesem Gespräch schauen mehrere Mitwirkende von MDN auf die vergangenen zehn Jahre von developer.mozilla.org zurück und auf das kommende Jahrzehnt. Du wirst die Geschichte verschiedener Wiki-Software-Migrationen hören, wie eine Gemeinschaft rund ums Dokumentieren entstanden ist und viele weitere Highlights der Geschichte dieser Seite. Anschließend spricht die Gruppe auch über aktuelle Herausforderungen und Projekte, an denen die MDN Gemeinschaft dieses Jahr arbeitet.

diff --git a/files/de/mdn/at_ten/index.html b/files/de/mdn/at_ten/index.html index 91495de944..4be697f063 100644 --- a/files/de/mdn/at_ten/index.html +++ b/files/de/mdn/at_ten/index.html @@ -1,10 +1,11 @@ --- title: 10 Jahre MDN -slug: MDN_at_ten +slug: MDN/At_ten tags: - MDN - TopicStub translation_of: MDN_at_ten +original_slug: MDN_at_ten --- diff --git a/files/de/mdn/guidelines/writing_style_guide/index.html b/files/de/mdn/guidelines/writing_style_guide/index.html index 274d9d4f8c..95beba8e3c 100644 --- a/files/de/mdn/guidelines/writing_style_guide/index.html +++ b/files/de/mdn/guidelines/writing_style_guide/index.html @@ -1,7 +1,8 @@ --- title: MDN style guide -slug: MDN/Guidelines/Style_guide +slug: MDN/Guidelines/Writing_style_guide translation_of: MDN/Guidelines/Writing_style_guide +original_slug: MDN/Guidelines/Style_guide ---
{{MDNSidebar}}
diff --git a/files/de/mdn/structures/compatibility_tables/index.html b/files/de/mdn/structures/compatibility_tables/index.html index 758d450e7c..d235d718a3 100644 --- a/files/de/mdn/structures/compatibility_tables/index.html +++ b/files/de/mdn/structures/compatibility_tables/index.html @@ -1,9 +1,10 @@ --- title: Kompatibilitäts Tabellen -slug: MDN/Structures/Kompatibilitaets_Tabellen +slug: MDN/Structures/Compatibility_tables tags: - Browser Kompatibilität translation_of: MDN/Structures/Compatibility_tables +original_slug: MDN/Structures/Kompatibilitaets_Tabellen ---
{{MDNSidebar}}
diff --git a/files/de/mdn/tools/index.html b/files/de/mdn/tools/index.html index 6aeb6703ed..de677e432e 100644 --- a/files/de/mdn/tools/index.html +++ b/files/de/mdn/tools/index.html @@ -1,8 +1,9 @@ --- title: MDN Benutzerhandbuch -slug: MDN/nutzer_leitfaden +slug: MDN/Tools translation_of: MDN/Tools translation_of_original: MDN/User_guide +original_slug: MDN/nutzer_leitfaden ---
{{MDNSidebar}}

Die Mozilla Developer Network-Website ist ein fortschrittliches System zum suchen, lesen und eine beitragene Dokumentions Hilfe für Web-Entwickler (wie auch für Firefox und Firefox OS-Entwickler). Die MDN Mitglieder liefern detailierte Artikel welche zum benutzen des MDN, für Dokumentionen die du brauchst und wenn du möchtest die dir helfen das Material besser und weiter und zu vervollständigen, hilft. 

diff --git a/files/de/mdn/tools/kumascript/troubleshooting/index.html b/files/de/mdn/tools/kumascript/troubleshooting/index.html index 0255388aa1..a7e9a5ca0a 100644 --- a/files/de/mdn/tools/kumascript/troubleshooting/index.html +++ b/files/de/mdn/tools/kumascript/troubleshooting/index.html @@ -1,7 +1,8 @@ --- title: Beheben von KumaScript Fehlern -slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern +slug: MDN/Tools/KumaScript/Troubleshooting translation_of: MDN/Tools/KumaScript/Troubleshooting +original_slug: MDN/Kuma/Beheben_von_KumaScript_Fehlern ---
{{MDNSidebar}}

KumaScript Fehler plaziert in großen roten Kästen wirken auf die Leser abstossend. Zum Glück kann jedoch jeder mit einem MDN Konto solche Fehler beseitigen. Wenn ein Fehler auf einer Seite auftritt, landet die betreffende Seite in der List der Dokumente mit Fehlern.  Seitenauthoren gehen diese Seiten regelmäßig durch um Fehler zu finden und zu beseitigen. Dieser Artikel erläutert vier Typen von KumaScript Fehlern und beschreibt einige Methoden zu ihrer Beseitigung.

diff --git a/files/de/mdn/yari/index.html b/files/de/mdn/yari/index.html index 06e83f21ee..4a1db717af 100644 --- a/files/de/mdn/yari/index.html +++ b/files/de/mdn/yari/index.html @@ -1,6 +1,6 @@ --- title: 'Kuma: MDN''s wiki platform' -slug: MDN/Kuma +slug: MDN/Yari tags: - Einstieg bei Mozilla - Helfen @@ -8,6 +8,7 @@ tags: - MDN Meta - Mitarbeiten translation_of: MDN/Kuma +original_slug: MDN/Kuma ---
{{MDNSidebar}}
diff --git a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html index 7c43bda2af..835cd62ecb 100644 --- a/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html +++ b/files/de/mozilla/add-ons/webextensions/api/bookmarks/index.html @@ -1,7 +1,8 @@ --- title: Lesezeichen -slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. +slug: Mozilla/Add-ons/WebExtensions/API/bookmarks translation_of: Mozilla/Add-ons/WebExtensions/API/bookmarks +original_slug: Mozilla/Add-ons/WebExtensions/API/Lesezeich. ---
{{AddonSidebar}}
diff --git a/files/de/mozilla/add-ons/webextensions/examples/index.html b/files/de/mozilla/add-ons/webextensions/examples/index.html index 627dbe559d..3994182f13 100644 --- a/files/de/mozilla/add-ons/webextensions/examples/index.html +++ b/files/de/mozilla/add-ons/webextensions/examples/index.html @@ -1,9 +1,10 @@ --- title: Beispiele für Erweiterungen -slug: Mozilla/Add-ons/WebExtensions/Beispiele +slug: Mozilla/Add-ons/WebExtensions/Examples tags: - WebExtensions translation_of: Mozilla/Add-ons/WebExtensions/Examples +original_slug: Mozilla/Add-ons/WebExtensions/Beispiele ---
{{AddonSidebar}}
diff --git a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html index 39498fa606..8064341ca0 100644 --- a/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html +++ b/files/de/mozilla/add-ons/webextensions/working_with_the_tabs_api/index.html @@ -1,9 +1,10 @@ --- title: Arbeiten mit Taps API -slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API +slug: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API tags: - tabs translation_of: Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API +original_slug: Mozilla/Add-ons/WebExtensions/Arbeiten_mit_Taps_API ---

{{AddonSidebar}}

diff --git a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html index b48b805b98..c46aaeffad 100644 --- a/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html +++ b/files/de/mozilla/add-ons/webextensions/your_first_webextension/index.html @@ -1,11 +1,12 @@ --- title: Deine erste Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung +slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension tags: - Anleitung - Erweiterung - Weberweiterung translation_of: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Deine_erste_WebErweiterung ---
{{AddonSidebar}}
diff --git a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html index cc002d0b24..6cfeba72ac 100644 --- a/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html +++ b/files/de/mozilla/add-ons/webextensions/your_second_webextension/index.html @@ -1,7 +1,8 @@ --- title: Deine zweite Erweiterung -slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung +slug: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension translation_of: Mozilla/Add-ons/WebExtensions/Your_second_WebExtension +original_slug: Mozilla/Add-ons/WebExtensions/Deine_zweite_Erweiterung ---

{{AddonSidebar}}

diff --git a/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html index 1734710732..bc9aca7bd7 100644 --- a/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html +++ b/files/de/mozilla/developer_guide/so_you_just_built_firefox/index.html @@ -1,7 +1,8 @@ --- -title: 'So, Du hast Firefox erfolgreich erstellt' -slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt +title: So, Du hast Firefox erfolgreich erstellt +slug: Mozilla/Developer_guide/So_you_just_built_Firefox translation_of: Mozilla/Developer_guide/So_you_just_built_Firefox +original_slug: Mozilla/Developer_guide/firefox_erfolgreich_erstellt ---

Ein Link zu dieser Seite wird nach dem erfolgreichen Erstellen von Firefox angezeigt. Diese Seite sollte nützliche nächste Schritte enthalten, wie Links wie man Test laufen lassen kann, Build packen kann, etc. Der Inhalt hier sollte kurz gehalten werden, genauere Informationen sollten in den verlinkten Seiten hinzugefügt werden. Die Zielgruppe sind Besucher, die gerade Firefox zum ersten mal gebaut haben.

diff --git a/files/de/mozilla/developer_guide/source_code/index.html b/files/de/mozilla/developer_guide/source_code/index.html index b5cc6c79bb..246dc6c1ef 100644 --- a/files/de/mozilla/developer_guide/source_code/index.html +++ b/files/de/mozilla/developer_guide/source_code/index.html @@ -1,7 +1,8 @@ --- title: Mit Mozilla Quellcode arbeiten -slug: Mozilla/Developer_guide/Quelltexte +slug: Mozilla/Developer_guide/Source_Code translation_of: Mozilla/Developer_guide/Source_Code +original_slug: Mozilla/Developer_guide/Quelltexte ---

Die unten aufgeführten Artikel helfen Ihnen dabei mit dem Mozilla Quelltext umgehen zu können, zu lernen wie man durch den Code navigiert und wie Änderungen in Projekte einfließen können.

diff --git a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html index 3bb91c8f5a..04c686899e 100644 --- a/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html +++ b/files/de/mozilla/firefox/releases/1.5/changing_the_priority_of_http_requests/index.html @@ -1,9 +1,10 @@ --- title: Die Priorität von HTTP-Anfragen ändern -slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests +slug: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests tags: - HTTP translation_of: Mozilla/Firefox/Releases/1.5/Changing_the_priority_of_HTTP_requests +original_slug: Firefox_1.5_für_Entwickler/Changing_the_priority_of_HTTP_requests ---
{{FirefoxSidebar}}
diff --git a/files/de/mozilla/firefox/releases/1.5/index.html b/files/de/mozilla/firefox/releases/1.5/index.html index 087bc441aa..c549c60935 100644 --- a/files/de/mozilla/firefox/releases/1.5/index.html +++ b/files/de/mozilla/firefox/releases/1.5/index.html @@ -1,6 +1,6 @@ --- title: Firefox_1.5_für_Entwickler -slug: Firefox_1.5_für_Entwickler +slug: Mozilla/Firefox/Releases/1.5 tags: - CSS - DOM @@ -17,6 +17,7 @@ tags: - XSLT - XUL translation_of: Mozilla/Firefox/Releases/1.5 +original_slug: Firefox_1.5_für_Entwickler ---
{{FirefoxSidebar}}

Basierend auf der Gecko 1.8 Engine, verbessert Firefox 1.5 die Unterstützung von Webstandards und stellt neue Fähigkeiten zur Verfügung, um die nächste Generationen von Webapplikationen zu ermöglichen. Firefox 1.5 verbessert die Unterstützung von CSS2 und CSS3, führt neue APIs für skript- und programmierbare 2D Grafiken durch SVG 1.1 und durch <canvas> ein, lernt XForms und XML Events kennen und wird außerdem viele DHTML, JavaScript und DOM Erweiterungen mit sich bringen.

diff --git a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html index cac83f31ce..b06920e46e 100644 --- a/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html +++ b/files/de/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.html @@ -1,11 +1,12 @@ --- title: Benutzen des Zwischenspeichers in Firefox 1.5 (caching) -slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) +slug: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching tags: - Caching - Firefox 1.5 - JavaScript translation_of: Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching +original_slug: Benutzen_des_Zwischenspeichers_in_Firefox_1.5_(caching) ---
{{FirefoxSidebar}}

Einführung

diff --git a/files/de/mozilla/firefox/releases/3.5/index.html b/files/de/mozilla/firefox/releases/3.5/index.html index 33e6a0c728..62f396aed9 100644 --- a/files/de/mozilla/firefox/releases/3.5/index.html +++ b/files/de/mozilla/firefox/releases/3.5/index.html @@ -1,10 +1,11 @@ --- title: Firefox_3.5_für_Entwickler -slug: Firefox_3.5_für_Entwickler +slug: Mozilla/Firefox/Releases/3.5 tags: - Firefox 3.5 - Gecko 1.9.1 translation_of: Mozilla/Firefox/Releases/3.5 +original_slug: Firefox_3.5_für_Entwickler ---
{{FirefoxSidebar}}

In Firefox 3.5 wurde eine nicht geringe Zahl an neuen Bestandteilen eingeführt, darunter zusätzliche und verbesserte Unterstützung für eine Vielzahl von Webstandards. Dieser Artikel stellt eine umfangreiche Liste mit Links zu anderen Artikeln über die Hauptverbesserungen zur Verfügung.

diff --git a/files/de/mozilla/firefox/releases/3/index.html b/files/de/mozilla/firefox/releases/3/index.html index 3db4c6f4e3..fd28100abc 100644 --- a/files/de/mozilla/firefox/releases/3/index.html +++ b/files/de/mozilla/firefox/releases/3/index.html @@ -1,9 +1,10 @@ --- title: Firefox 3 für Entwickler -slug: Firefox_3_für_Entwickler +slug: Mozilla/Firefox/Releases/3 tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3 +original_slug: Firefox_3_für_Entwickler ---
{{FirefoxSidebar}}

Wenn Sie als Entwickler versuchen mit den neuen Funktionen in Firefox 3 umzugehen, ist dies der perfekte Ort, um zu beginnen. Dieser Seite liefert eine Liste der neuen Artikel, die die in Firefox 3 neu hinzugekommenen Funktionen erläutern. Es wird sicher nicht jede kleine Änderung erfasst werden können, allerdings hilft werden die hauptsächlichen Verbesserungen in Firefox 3 vorgestellt.

diff --git a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html index 409fc00546..8d95c681f7 100644 --- a/files/de/mozilla/firefox/releases/3/updating_extensions/index.html +++ b/files/de/mozilla/firefox/releases/3/updating_extensions/index.html @@ -1,9 +1,10 @@ --- title: Erweiterungen für Firefox 3 aktualisieren -slug: Erweiterungen_für_Firefox_3_aktualisieren +slug: Mozilla/Firefox/Releases/3/Updating_extensions tags: - Firefox 3 translation_of: Mozilla/Firefox/Releases/3/Updating_extensions +original_slug: Erweiterungen_für_Firefox_3_aktualisieren ---