diff options
Diffstat (limited to 'files/de/learn')
62 files changed, 13577 insertions, 0 deletions
diff --git a/files/de/learn/accessibility/accessibility_troubleshooting/index.html b/files/de/learn/accessibility/accessibility_troubleshooting/index.html new file mode 100644 index 0000000000..5a427df730 --- /dev/null +++ b/files/de/learn/accessibility/accessibility_troubleshooting/index.html @@ -0,0 +1,111 @@ +--- +title: 'Aufgabe: Probleme bei der Zugänglichkeit beheben' +slug: Learn/Accessibility/Accessibility_troubleshooting +tags: + - Anfänger + - Aufgabe + - Barrierefreiheit + - CSS + - CodingSc + - HTML + - JavaScript + - Lernen + - WAI-ARIA +translation_of: Learn/Accessibility/Accessibility_troubleshooting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div> + +<p class="summary">In der Aufgabe dieses Moduls müssen Sie Probleme hinsichtlich Barrierefreiheit und Zugänglichkeit einer Beispielwebsite erkennen und beheben.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzung:</th> + <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td> + </tr> + <tr> + <th scope="row">Lernziel:</th> + <td>To test basic knowledge of accessibility fundamentals.</td> + </tr> + </tbody> +</table> + +<h2 id="Ausgangspunkt">Ausgangspunkt</h2> + +<p>Um mit der Aufgabe zu beginnen, laden Sie den <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP-Ordner mit den Beispieldateien</a> herunter. Extrahieren Sie die Inhalte in ein neues Verzeichnis auf Ihrem Computer.</p> + +<p>Die fertige Beispielseite sollte so aussehen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p> + +<p>Sie werden einige Unterschiede / Probleme bei der Anzeige des Ausgangszustands der Aufgabe bemerken - dies ist hauptsächlich auf die Unterschiede im Markup zurückzuführen, die wiederum einige Stilprobleme verursachen, da das CSS nicht ordnungsgemäß angewendet wird. Keine Sorge - Sie werden diese Probleme in den nächsten Abschnitten beheben!</p> + +<h2 id="Projektbeschreibung">Projektbeschreibung</h2> + +<p>Für dieses Projekt wird Ihnen eine fiktive Naturseite präsentiert, die einen "sachlichen" Artikel über Bären enthält. Gegenwärtig gibt es eine Reihe von Problemen mit der Barrierefreiheit. Ihre Aufgabe ist es, die vorhandene Website zu erkunden und sie nach besten Kräften zu beheben, indem Sie die unten stehenden Fragen beantworten.</p> + +<h3 id="Farben">Farben</h3> + +<p>Aufgrund des momentanen Farbschemas ist der Text der Webseite schwierig zu lesen. Können Sie den momentanen Farbkontrast (Text/Hintergrund) testen und die Farben so ändern, um das Problem mit dem Farbkontrast zu lösen?</p> + +<h3 id="Semantisches_HTML">Semantisches HTML</h3> + +<ol> + <li>Der Inhalt der Website ist momentan nicht besonders zugänglich. Probieren Sie aus was passiert, wenn Sie durch die Website navigieren.</li> + <li>Können Sie den Text des Artikels so ändern, um einfacher mit einem Screenreader navigieren zu können?</li> + <li>Das Navigationsmenü der Website (eingebunden in <code><div class="nav"></div></code>) könnte zugänglicher werden, indem man es in das geignete semantische HTML5-Element einbettet.</li> +</ol> + +<div class="note"> +<p><strong>Hinweis: </strong><strong>Sie müssen die CSS-Regelselektoren aktualisieren, die die Tags so formatieren, dass sie den semantischen Überschriften entsprechen. Sobald Sie Absatzelemente hinzufügen, werden Sie feststellen, dass das Styling besser aussieht.</strong></p> +</div> + +<h3 id="Die_Bilder">Die Bilder</h3> + +<p>Die Bilder sind momenten nicht zugänglich für Benutzer von Screenreadern. Können Sie dies beheben?</p> + +<h3 id="Der_Musikplayer">Der Musikplayer</h3> + +<ol> + <li><font>The <code><audio></code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</font></li> + <li><font>The <code><audio></code> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</font></li> +</ol> + +<h3 id="Die_Formulare">Die Formulare</h3> + +<ol> + <li><font>The <code><input></code> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</font></li> + <li><font>The two <code><input></code> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</font></li> +</ol> + +<h3 id="Schaltfläche_zum_Ein-_und_Ausblenden_von_Kommentaren">Schaltfläche zum Ein- und Ausblenden von Kommentaren</h3> + +<p>Die Schaltfläche für das Ein- und Ausblenden der Kommentare ist momentan nicht zugänglich für die Benutzung mit der Tastatur. Können Sie die Schaltfläche so ändern, damit sie für die Benutzung mit der Tastatur zugänglich wird - hinsichtlich Fokussieren mit der Tabulator-Taste und Aktivieren mit der Return-Taste. </p> + +<h3 id="Die_Tabelle">Die Tabelle</h3> + +<p>Im momentanen Zustand ist die Datentabelle nicht sehr zugänglich. Es ist schwer für den Benutzer eines Screenreaders Datenreihen und Datenspalten miteinander zu verknüpen. Außerdem besitzt die Tabelle keine Zusammenfassung. Können Sie das HTML so erweitern, damit das Problem gelöst werden kann?</p> + +<h3 id="Weitere_Überlegungen">Weitere Überlegungen</h3> + +<p>Fallen Ihnen noch 2 weitere Verbesserungen für diese Seite ein um die Zugänglichkeit der Website zu verbessern?</p> + +<h2 id="Einschätzung">Einschätzung</h2> + +<p>Falls Sie diesen Test im Rahmen eines organisierten Kurses absolvieren, sollten Sie Ihre Arbeit Ihrem/r Mentor*in/Lehrkraft zur Bewertung überreichen können.<font> </font>Falls Sie selbstständig lernen, können Sie die Bewertungskriterien sehr einfach erhalten, indem Sie im<font> <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">Diskussionsthread für diese Übung</a>, n</font>achfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p> + +<p><font>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</font></p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">What is accessibility?</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">CSS and JavaScript accessibility best practices</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Multimedia">Accessible multimedia</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile accessibility</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Accessibility troubleshooting</a></li> +</ul> diff --git a/files/de/learn/accessibility/index.html b/files/de/learn/accessibility/index.html new file mode 100644 index 0000000000..ee1a19552e --- /dev/null +++ b/files/de/learn/accessibility/index.html @@ -0,0 +1,62 @@ +--- +title: Barrierefreiheit +slug: Learn/Accessibility +tags: + - ARIA + - Anfänger + - Artikel + - Barrierefreiheit + - CSS + - Code Scripting + - HTML + - JavaScript + - Landing + - Lernen + - Modul +translation_of: Learn/Accessibility +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Das Erlernen von HTML, CSS und JavaScript ist nützlich, wenn Sie ein Webentwickler werden wollen, aber Ihr Wissen muss weiter gehen als nur mit den Technologien - Sie müssen sie verantwortungsvoll nutzen, damit Sie das Publikum für ihre Websites maximieren und niemand daran hindern, sie zu benutzen. Um dies zu erreichen, müssen Sie sich an allgemeine "Best Practices halten (die in allen <a href="https://developer.mozilla.org/de/Learn/CSS">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a> und <a href="https://developer.mozilla.org/de/Learn/JavaScript">JavaScript</a>-Themen demonstriert werden), <a href="https://developer.mozilla.org/de/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Tests</a> durchführen und die Barrierefreiheit von anfang an berücksichtigen. In diesem Modul werden wir uns ausführlich mit Letzterem beschäftigen.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Um das Meiste aus diesem Modul herauszuholen, wäre es eine gute Idee, entweder mindestens die ersten beiden Module der <a href="https://developer.mozilla.org/de/Learn/HTML">HTML</a>-, <a href="https://developer.mozilla.org/de/docs/Learn/CSS">CSS</a>- und <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>-Themen durchzuarbeiten, oder vielleicht sogar noch besser, die relevanten Teile des Barrierefreiheit Moduls durchzuarbeiten, während Sie die entsprechenden Technologiethemen durcharbeiten.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn Sie auf einem Computer/Tablet/anderem Gerät arbeiten, auf dem sie keine eigenen Dateien erstellen können, können Sie die meisten Codebeispiele in einem Online-Codeprogramm wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/de/">Thimble</a> ausprobieren.</p> +</div> + +<h2 id="Leitfäden">Leitfäden</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/What_is_accessibility">Was ist Barrierefreiheit? </a></dt> + <dd>Dieser Artikel beginnt das Modul mit einem Blick auf was Barrierefreiheit eigentlich ist - das schließt ein, welche Personengruppen wir berücksichtigen müssen und warum, welche Werkzeuge verschiedene Leute verwenden, um mit dem Web zu interagieren, und wie wir Barrierefreitheit zu einem Teil unseres Web-Entwicklungs-Workflows machen können</dd> + <dt><a href="https://developer.mozilla.org/de/Learn/Accessibility/HTML" style="font-weight: 700;">HTML: Eine gute Basis für Erreichbarkeit</a></dt> + <dd>Ein großer Teil der Webinhalte kann zugänglich gemacht werden, indem sichergestellt wird, dass immer die richtigen HTML-Elemente für den richtigen Zweck verwendet werden. Dieser Artikel behandelt im Detail, wie HTML verwendet werden kann, um eine maximale Barrierefreiheit zu gewährleisten. </dd> + <dt><a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript">Best Practices für CSS and JavaScript Barrierefreiheit</a></dt> + <dd>CSS und JavaScript haben bei richtiger Anwendung auch das Potenzial, barrierefreie Web-Erlebnisse zu ermöglichen, können aber bei Missbrauch die Barrierefreiheit erheblich einschränken. Dieser Artikel beschreibt einige CSS- und JavaScript-Best-Practices, die berücksichtigt werden sollten, um sicherzustellen, dass auch komplexe Inhalte so barrierefrei wie möglich sind.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA Grundlagen</a></dt> + <dd> + <p>In Anlehnung an den vorangegangenen Artikel kann es manchmal schwierig sein, komplexe UI-Controls zu erstellen, die nicht semantisches HTML und dynamische, mit JavaScript aktualisierte Inhalte beinhalten. WAI-ARIA ist eine Technologie, die bei solchen Problemen helfen kann, indem sie weitere Semantiken hinzufügt, die Browser und unterstützende Technologien erkennen und verwenden können, um den Benutzern mitzuteilen, was vor sich geht. Hier zeigen wir, wie man es grundlegend einsetzt, um die Barrierefreiheit zu verbessern.</p> + </dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Multimedia">Barrierefreies Multimedia</a></dt> + <dd>Eine weitere Kategorie von Inhalten, die Barrierefreiheitsprobleme verursachen können, sind Multimedia - Video-, Audio- und Bildinhalte. Diese müssen mit geeigneten textlichen Alternativen ausgestattet werden, damit sie von unterstützenden Technologien und ihren Nutzern verstanden werden können. Dieser Artikel zeigt wie dies richtig umgesetzt wird.</dd> + <dt><a href="/en-US/docs/Learn/Accessibility/Mobile">Mobile Barrierefreiheit</a></dt> + <dd>Da der Webzugriff auf mobilen Geräten heute so beliebt ist und Plattformen wie iOS und Android über vollwertige Barrierefreiheitswerkzeuge verfügen, ist es wichtig, die Barrierefreiheit Ihrer Webinhalte auf diesen Plattformen zu berücksichtigen. Dieser Artikel befasst sich mit mobilfunkspezifischen Überlegungen zur Barrierefreiheit.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Accessibility/Accessibility_troubleshooting">Troubleshooting für Barrierefreiheit</a></dt> + <dd>In den Aufgaben für dieses Modul geben wir Ihnen eine einfache Seite mit einer Reihe von Problemen in der Barrierefreiheit, die Sie diagnostizieren und beheben müssen.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Start Building Accessible Web Applications Today</a> — an excellent series of video tutorials by Marcy Sutton.</li> + <li><a href="https://dequeuniversity.com/resources/">Deque University resources</a> — includes code examples, screen reader references, and other useful resources.</li> + <li><a href="http://webaim.org/resources/">WebAIM resources</a> — includes guides, checklists, tools, and more.</li> +</ul> diff --git a/files/de/learn/common_questions/index.html b/files/de/learn/common_questions/index.html new file mode 100644 index 0000000000..4aafae4a32 --- /dev/null +++ b/files/de/learn/common_questions/index.html @@ -0,0 +1,135 @@ +--- +title: Common questions +slug: Learn/Common_questions +tags: + - CodingScripting + - Infrastructure + - Learn + - NeedsTranslation + - TopicStub + - Web + - WebMechanics +translation_of: Learn/Common_questions +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This section of the Learning Area is designed to provide answers to common questions that may come up, which are not necessarily part of the structured core learning pathways (e.g. the <a href="/en-US/docs/Learn/HTML">HTML</a> or <a href="/en-US/docs/Learn/CSS">CSS</a> learning articles.) These articles are designed to work on their own.</p> + +<h2 id="How_the_Web_works">How the Web works</h2> + +<p>This section covers web mechanics —questions relating to general knowledge of the Web ecosystem and how it works.</p> + +<dl> + <dt> + <h3 id="How_does_the_Internet_work"><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the Internet work?</a></h3> + </dt> + <dd>The <strong>Internet</strong> is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together. This article discusses how it works, at a basic level.</dd> + <dt> + <h3 id="What_is_the_difference_between_webpage_website_web_server_and_search_engine"><a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">What is the difference between webpage, website, web server, and search engine?</a></h3> + </dt> + <dd>In this article we describe various web-related concepts: webpages, websites, web servers, and search engines. These terms are often confused by newcomers to the Web, or are incorrectly used. Let's learn what they each mean!</dd> + <dt> + <h3 id="What_is_a_URL"><a href="/en-US/docs/Learn/Common_questions/What_is_a_URL">What is a URL?</a></h3> + </dt> + <dd>With {{Glossary("Hypertext")}} and {{Glossary("HTTP")}}, URL is one of the key concepts of the Web. It is the mechanism used by {{Glossary("Browser","browsers")}} to retrieve any published resource on the web.</dd> + <dt> + <h3 id="What_is_a_domain_name"><a href="/en-US/docs/Learn/Common_questions/What_is_a_domain_name">What is a domain name?</a></h3> + </dt> + <dd>Domain names are a key part of the Internet infrastructure. They provide a human-readable address for any web server available on the Internet.</dd> + <dt> + <h3 id="What_is_a_web_server"><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server?</a></h3> + </dt> + <dd>The term "Web server" can refer to the hardware or software that serves web sites to clients across the Web — or both of them working together. In this article we go over how web servers work, and why they're important.</dd> + <dt> + <h3 id="What_are_hyperlinks"><a href="/en-US/docs/Learn/Common_questions/What_are_hyperlinks">What are hyperlinks?</a></h3> + </dt> + <dd>In this article, we'll go over what hyperlinks are and why they matter.</dd> +</dl> + +<h2 id="Tools_and_setup">Tools and setup</h2> + +<p>Questions related to the tools/software you can use to build websites.</p> + +<dl> + <dt> + <h3 id="How_much_does_it_cost_to_do_something_on_the_Web"><a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">How much does it cost to do something on the Web?</a></h3> + </dt> + <dd>When you're launching a website, you may spend nothing or your costs may go through the roof. In this article we discuss how much everything costs and what you get for what you pay (or don't pay).</dd> + <dt> + <h3 id="What_software_do_I_need_to_build_a_website"><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></h3> + </dt> + <dd>In this article we explain which software components you need when you're editing, uploading, or viewing a website.</dd> + <dt> + <h3 id="What_text_editors_are_available"><a href="/en-US/docs/Learn/Common_questions/Available_text_editors">What text editors are available?</a></h3> + </dt> + <dd>In this article we highlight some things to think about when choosing and installing a text editor for web development.</dd> + <dt> + <h3 id="What_are_browser_developer_tools"><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools?</a></h3> + </dt> + <dd>Every browser features a set of devtools for debugging HTML, CSS, and other web code. This article explains how to use the basic functions of your browser's devtools.</dd> + <dt> + <h3 id="How_do_you_make_sure_your_website_works_properly"><a href="/en-US/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">How do you make sure your website works properly?</a></h3> + </dt> + <dd>So you've published your website online — very good! But are you sure it works properly? This article provides some basic troubleshooting steps.</dd> + <dt> + <h3 id="How_do_you_set_up_a_local_testing_server"><a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a></h3> + </dt> + <dd> + <div> + <p>This article explains how to set up a simple local testing server on your machine, and the basics of how to use it.</p> + </div> + </dd> + <dt> + <h3 id="How_do_you_upload_files_to_a_web_server"><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></h3> + </dt> + <dd>This article shows how to publish your site online with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/FTP" title="FTP: FTP (File Transfer Protocol) is the standard network protocol for transferring files from one host to another over the Internet through TCP.">FTP</a> tools — one of the most common ways to get a website online so others can access it from their computers.</dd> + <dt> + <h3 id="How_do_I_use_GitHub_Pages"><a href="/en-US/docs/Learn/Common_questions/Using_GitHub_Pages">How do I use GitHub Pages?</a></h3> + </dt> + <dd>This article provides a basic guide to publishing content using GitHub's gh-pages feature.</dd> + <dt> + <h3 id="How_do_you_host_your_website_on_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></h3> + </dt> + <dd>Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.</dd> + <dt> + <h3 id="What_tools_are_available_to_debug_and_improve_website_performance"><a href="/en-US/docs/Tools/Performance">What tools are available to debug and improve website performance?</a></h3> + </dt> + <dd>This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your website, using the tools to check the memory usage, the JavaScript call tree, the amount of DOM nodes being rendered, and more.</dd> +</dl> + +<h2 id="Design_and_accessibility">Design and accessibility</h2> + +<p>This section lists questions related to aesthetics, page structure, accessibility techniques, etc.</p> + +<dl> + <dt> + <h3 id="How_do_I_start_to_design_my_website"><a href="/en-US/docs/Learn/Common_questions/Thinking_before_coding">How do I start to design my website?</a></h3> + </dt> + <dd>This article covers the all-important first step of every project: define what you want to accomplish with it.</dd> + <dt> + <h3 id="What_do_common_web_layouts_contain"><a href="/en-US/docs/Learn/Common_questions/Common_web_layouts">What do common web layouts contain?</a></h3> + </dt> + <dd>When designing pages for your website, it's good to have an idea of the most common layouts. This article runs thorugh some typical web layouts, looking at the parts that make up each one.</dd> + <dt> + <h3 id="What_is_accessibility"><a href="/en-US/docs/Learn/Common_questions/What_is_accessibility">What is accessibility?</a></h3> + </dt> + <dd>This article introduces the basic concepts behind web accessibility.</dd> + <dt> + <h3 id="How_can_we_design_for_all_types_of_users"><a href="/en-US/docs/Learn/Common_questions/Design_for_all_types_of_users">How can we design for all types of users?</a></h3> + </dt> + <dd>This article provides basic techniques to help you design websites for any kind of user — quick accessibility wins, and other such things.</dd> + <dt> + <h3 id="What_HTML_features_promote_accessibility"><a href="/en-US/docs/Learn/Common_questions/HTML_features_for_accessibility">What HTML features promote accessibility?</a></h3> + </dt> + <dd>This article describes specific features of HTML that can be used to make a web page more accessible to people with different disabilities.</dd> +</dl> + +<h2 id="HTML_CSS_and_JavaScript_questions">HTML, CSS and JavaScript questions</h2> + +<p>For common solutions to HTML/CSS/JavaScript problems, try the following articles:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto">Use HTML to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Howto">Use JavaScript to solve common problems</a></li> +</ul> diff --git a/files/de/learn/common_questions/upload_files_to_a_web_server/index.html b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html new file mode 100644 index 0000000000..39e775db98 --- /dev/null +++ b/files/de/learn/common_questions/upload_files_to_a_web_server/index.html @@ -0,0 +1,170 @@ +--- +title: Wie lädst Du deine Dateien auf einem Webserver hoch? +slug: Learn/Common_questions/Upload_files_to_a_web_server +tags: + - FTP + - GitHub + - Uploading + - rsync + - sftp +translation_of: Learn/Common_questions/Upload_files_to_a_web_server +--- +<div class="summary"> +<p>Dieser Artikel zeigt dir wie Du deine Seite online mithilfe von Dateiübertragungs-Tools veröffentlichen kannst.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorraussetzungen:</th> + <td>Du musst wissen <a href="https://developer.mozilla.org/en-US/Learn/What_is_a_web_server">was ein Webserver ist</a> und <a href="https://developer.mozilla.org/en-US/Learn/Understanding_domain_names">wie Domainnamen funktionieren</a>. Du musst ebenfalls wissen wie man eine <a href="/en-US/Learn/Set_up_a_basic_working_environment">einfache Umgebung einrichtet</a> und wie man <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">eine einfache Webseite schreibt</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lerne wie man Dateien mithilfe von verschiedenen Dateiübertragungs Tools auf einem Server hochlädt.</td> + </tr> + </tbody> +</table> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Falls Du eine einfache Webseite erstellt hast (siehe <a href="/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics">HTML basics</a> für ein Beispiel), willst Du diese wahrscheinlich auf einem Webserver online stellen. In diesem Artikel diskutieren wir darüber wie man dies mit Verwendung verschiedener Optionen wie SFTP-Klienten, Rsync and GitHub macht.</p> + +<h2 id="SFTP">SFTP</h2> + +<p>Es gibt mehrere SFTP-Klienten. Unsere Demo umfasst <a href="https://filezilla-project.org/">FileZilla</a>, da es kostenlos und verfügbar ist für Windows, macOS und Linux. Um FileZilla zu installieren, gehe zur <a href="https://filezilla-project.org/download.php?type=client">FileZilla Download-Seite</a>, klicke auf die große Download-Schaltfläche und installiere dann mithilfe der Installationsdatei auf dem üblichen Weg.</p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Natürlich gibt es eine Menge anderer Möglichkeiten. Siehe <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> für mehr Informationen.</p> +</div> + +<p>Öffne das FileZilla Programm. So sollte es in etwa aussehen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p> + +<h3 id="Einloggen">Einloggen</h3> + +<p>Für dieses Beispiel nehmen wir an, dass unser Hosting-Anbieter (der Service welcher unseren HTTP Web-Server hosten wird) eine fiktive Firma namens "Example Hosting Provider" ist, dessen URLs so aussehen: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p> + +<p>Wir haben soeben einen Account eröffnet und diese Informationen von ihnen erhalten:</p> + +<blockquote> +<p>Gratulation zum Eröffnen eines Accounts bei Example Hosting Provider.</p> + +<p>Ihr Account ist: <code>demozilla</code></p> + +<p>Ihre Webseite wird sichtbar sein unter <code>demozilla.examplehostingprovider.net</code></p> + +<p>Um diesen Account zu veröffentlichen, verbinden Sie sich durch SFTP mit den folgenden Zugangsdaten:</p> + +<ul> + <li>SFTP-Server: <code>sftp://demozilla.examplehostingprovider.net</code></li> + <li>Benutzername: <code>demozilla</code></li> + <li>Passwort: <code>quickbrownfox</code></li> + <li>Port: <code>5548</code></li> + <li>Um etwas im Netz zu veröffentlichen, legen Sie ihre Dateien in den <code>Public/htdocs</code> Ordner.</li> +</ul> +</blockquote> + +<p>Lasse uns zuerst einen Blick auf <code>http://demozilla.examplehostingprovider.net/</code> werfen — wie Du sehen kannst, ist dort bisher nichts:</p> + +<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Abhängig von deinem Hosting-Anbieter wirst Du die meiste Zeit eine Seite sehen die so etwas wie “Diese Website wird gehosted von [Hosting Service].” anzeigt, wenn Du deine Webadresse zum ersten mal besuchst.</p> +</div> + +<p>Um deinen SFTP-Klienten mit dem Remoteserver zu verbinden, folge diesen Schritten:</p> + +<ol> + <li>Wähle <em>File > Site Manager...</em> vom Hauptmenü.</li> + <li>Im <em>Site Manager</em> Fenster, klicke auf die <em>New Site</em> Schaltfläche, dann fülle den Seitennamen als <strong>demozilla</strong> im angegebenen Feld aus.</li> + <li>Fülle den SFTP-Server, welcher dein Host bereitgestellt hat in das <em>Host:</em> Feld.</li> + <li>In dem <em>Logon Type:</em> Drop-down-Menü, wähle <em>Normal</em>, dann fülle deinen angegebenen Nutzernamen und Passwort in die entsprechenden Felder.</li> + <li>Fülle den korrent Port aus und andere Informationen.</li> +</ol> + +<p>Dein Fenster sollte nun in etwa so aussehen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p> + +<p>Klicke jetzt <em>Verbinden</em> um zum SFTP-Server zu verbinden.</p> + +<p>Bemerkung: Stelle sicher, dass dein Hosting-Anbieter eine SFTP (Secure FTP)-Verbindung zu deinem Webspace anbietet. FTP ist grundsätzlich unsicher und Du solltest es nicht verwenden.</p> + +<h3 id="Hier_und_dort_Lokale_und_remote_Ansicht">Hier und dort: Lokale und remote Ansicht</h3> + +<p>Einmal verbunden, sollte dein Bildschirm etwa so aussehen (wir haben uns mit einem eigenen Beispiel verbunden um dir einen Eindruck zu geben):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p> + +<p>Lasse uns prüfen was du siehst:</p> + +<ul> + <li>On the center left pane, you see your local files. Navigate into the directory where you store your website (e.g. <code>mdn</code>).</li> + <li>On the center right pane, you see remote files. We are logged into our distant FTP root (in this case, <code>users/demozilla</code>)</li> + <li>You can ignore the bottom and top panes for now. Respectively, these are a log of messages showing the connection status between your computer and the SFTP server, and a live log of every interaction between your SFTP client and the server.</li> +</ul> + +<h3 id="Uploading_to_the_server">Uploading to the server</h3> + +<p>Our example host instructions told us "To publish on the web, put your files into the <code>Public/htdocs</code> directory." You need to navigate to the specified directory in your right pane. This directory is effectively the root of your website — where your <code>index.html</code> file and other assets will go.</p> + +<p>Once you've found the correct remote directory to put your files in, to upload your files to the server you need to drag-and-drop them from the left pane to the right pane.</p> + +<h3 id="Sind_sie_wirklich_online">Sind sie wirklich online?</h3> + +<p>So far, so good, but are the files really online? You can double-check by going back to your website (e.g. <code>http://demozilla.examplehostingprovider.net/</code>) in your browser:</p> + +<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p> + +<p>Und <em lang="fr">voilà</em>! Unsere Webseite ist live!</p> + +<h2 id="Rsync">Rsync</h2> + +<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p> + +<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p> + +<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre> + +<ul> + <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li> + <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li> + <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li> + <li><code>x.x.x.x</code> is the IP address of the remote server.</li> + <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li> +</ul> + +<p>You'd need to get such details from your hosting provider.</p> + +<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p> + +<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p> + +<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre> + +<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p> + +<h3 id="Rsync_GUI_Tools">Rsync GUI Tools</h3> + +<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p> + +<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p> + +<h2 id="GitHub">GitHub</h2> + +<p>GitHub erlaubt Die Webseiten via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages) zu veröffentlichen.</p> + +<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p> + +<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p> + +<h2 id="Andere_Methoden_um_Dateien_hochzuladen">Andere Methoden um Dateien hochzuladen</h2> + +<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p> + +<ul> + <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li> + <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li> +</ul> 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 new file mode 100644 index 0000000000..f780dac8a7 --- /dev/null +++ b/files/de/learn/common_questions/wie_das_internet_funktioniert/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 +--- +<div>{{LearnSidebar}}</div> + +<div class="summary"> +<p>Dieser Artikel behandelt, was das Internet ist uns wie es funktioniert</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Keine, aber wir empfehlen dir den Artikel <a href="/en-US/docs/Learn/Thinking_before_coding">setting project goals</a> zuerst zu lesen.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>You will learn the basics of the technical infrastructure of the Web and the difference between Internet and the Web.</td> + </tr> + </tbody> +</table> + +<h2 id="Summary">Summary</h2> + +<p>Das <strong>Internet</strong> 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.</p> + +<p><a href="https://en.wikipedia.org/wiki/Internet#History" rel="external">The history of the Internet is somewhat obscure</a>. 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.</p> + +<h2 id="Active_Learning">Active Learning</h2> + +<ul> + <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc" rel="external">How the internet Works in 5 minutes</a>: A 5 minute video to understand the very basics of Internet by Aaron Titus.</li> +</ul> + +<h2 id="Deeper_dive">Deeper dive</h2> + +<h3 id="A_simple_network">A simple network</h3> + +<p>When two computers need to communicate, you have to link them, either physically (usually with an <a href="http://en.wikipedia.org/wiki/Ethernet_crossover_cable" rel="external">Ethernet cable</a>) or wirelessly (for example with <a href="http://en.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> or <a href="http://en.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a> systems). All modern computers can sustain any of those connections.</p> + +<div class="note"> +<p><strong>Note:</strong> For the rest of this article, we will only talk about physical cables, but wireless networks work the same.</p> +</div> + +<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p> + +<p>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!</p> + +<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p> + +<p>To solve this problem, each computer on a network is connected to a special tiny computer called a <em>router</em>. This <em>router</em> 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.</p> + +<p>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.</p> + +<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p> + +<h3 id="A_network_of_networks">A network of networks</h3> + +<p>So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single <em>router</em> can't scale that far, but, if you read carefully, we said that a <em>router</em> is a computer like any other, so what keeps us from connecting two <em>routers</em> together? Nothing, so let's do that.</p> + +<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p> + +<p>By connecting computers to routers, then routers to routers, we are able to scale infinitely.</p> + +<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p> + +<p>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 <em>modem</em>. This <em>modem</em> turns the information from our network into information manageable by the telephone infrastructure and vice versa.</p> + +<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p> + +<p>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 <em>routers</em> 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.</p> + +<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p> + +<h3 id="Finding_computers">Finding computers</h3> + +<p>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 <em>Internet Protocol</em>). It's an address made of a series of four numbers separated by dots, for example: <code>192.168.2.10</code>.</p> + +<p>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 <em>domain name</em>. For example, <code>google.com</code> is the domain name used on top of the IP address <code>173.194.121.32</code>. So using the domain name is the easiest way for us to reach a computer over the Internet.</p> + +<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h3 id="Internet_and_the_web">Internet and the web</h3> + +<p>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 <em>Web servers</em>) can send messages intelligible to web browsers. The <em>Internet</em> is an infrastructure, whereas the <em>Web</em> 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")}}.</p> + +<h2 id="Next_steps">Next steps</h2> + +<ul> + <li><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">How the Web works</a></li> + <li><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></li> + <li><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></li> +</ul> diff --git a/files/de/learn/css/building_blocks/index.html b/files/de/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..0924df55f5 --- /dev/null +++ b/files/de/learn/css/building_blocks/index.html @@ -0,0 +1,87 @@ +--- +title: CSS building blocks +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Dieses Modul betreibt ab <a href="/de/docs/Learn/CSS/First_steps">CSS Ersten Schritte</a> Endung — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p> + +<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should have:</p> + +<ol> + <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li> + <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li> + <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt> + <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt> + <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt> + <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt> + <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt> + <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt> + <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide you will learn what it is and how to manage it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt> + <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson we will take a look at some of the most common values and units in use.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt> + <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt> + <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt> + <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt> + <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt> + <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt> + <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt> + <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt> + <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt> + <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd> +</dl> diff --git a/files/de/learn/css/building_blocks/organizing/index.html b/files/de/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..43362d1617 --- /dev/null +++ b/files/de/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,374 @@ +--- +title: Organizing your CSS +slug: Learn/CSS/Building_blocks/Organizing +tags: + - Anfänger + - CSS + - Formatierung + - Kommentare + - Lernen + - Methoden + - Organisieren + - Stlyeguide + - post-processor + - pre-processor +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>Wenn Sie anfangen an größeren Stylesheets und großen Projekten zu arbeiten, werden Sie herausfinden, dass es eine echte Herausforderung sein kann, eine sehr umfangreiche CSS-Datei instand zu halten. In diesem Artikel werden wir einen kurzen Blick werfen auf einige bewährte Methoden, CSS so zu schreiben, dass es leicht zu pflegen ist. Einige der Lösungen werden Sie auch bei anderen finden, die damit die Wartbarkeit verbessern.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td> + <p>Grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">installierte Basissoftware</a>, Grundkenntnisse im <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">Umgang mit Dateien</a>, HTML-Grundlagen (lesen Sie <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>) und eine Vorstellung davon, wie CSS funktioniert (lesen Sie <a href="/en-US/docs/Learn/CSS/First_steps">erste Schritte mit CSS</a>).</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Hier finden Sie einige Tipps und bewährte Verfahren für die Organisation von Stylesheets sowie einige allgemein gebräuchliche Namenskonventionen und Tools, die bei der Organisation von CSS und der Teamarbeit helfen.</td> + </tr> + </tbody> +</table> + +<h2 id="Tipps_um_Ihr_CSS_übersichtlich_zu_halten">Tipps, um Ihr CSS übersichtlich zu halten</h2> + +<p>Hier finden Sie einige allgemeine Vorschläge, wie Sie Ihre Stylsheet organisiert und übersichtlich halten können.</p> + +<h3 id="Gibt_es_einen_Coding_Style_Guide_in_Ihrem_Projekt">Gibt es einen Coding Style Guide in Ihrem Projekt?</h3> + +<p>Wenn Sie im Team an einem bestehenden Projekt arbeiten, sollten Sie als erstes abklären, ob das Projekt einen Style Guide für CSS hat. Der Style Guide des Teams sollte immer Priorität vor Ihren persönlichen Vorlieben haben. Oft gibt es nicht den einen richtigen Weg etwas umzusetzen, wichtig aber ist Konsistenz.</p> + +<p>Sehen Sie sich beispielsweise die <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS-Richtlinien für MDN Codebeispiele</a> an.</p> + +<h3 id="Bleiben_Sie_konsistent">Bleiben Sie konsistent</h3> + +<p>Wenn Sie die Regeln für das Projekt festlegen oder alleine arbeiten, dann ist es am wichtigsten, die Dinge konsistent zu halten. Konsistenz kann auf alle möglichen Arten angewendet werden, wie z.B. die Verwendung derselben Namenskonventionen für Klassen, die Wahl einer Methode zur Beschreibung von Farbe oder die Beibehaltung einer konsistenten Formatierung (werden Sie z.B. Tabulatoren oder Leerzeichen verwenden, um Ihren Code einzurücken? Wenn Leerzeichen, wie viele Leerzeichen?)</p> + +<p>Ein Regelsystem, das Sie immer befolgen, reduziert den mentalen Aufwand beim Schreiben von CSS, da einige der Entscheidungen bereits getroffen sind.</p> + +<h3 id="CSS_lesbar_formatieren">CSS lesbar formatieren</h3> + +<p>Es gibt unterschiedliche Arten CSS zu formatieren. Einige Entwickler*innen schreiben alle Regeln in eine einzige Zeile, wie hier:</p> + +<pre class="brush: css notranslate">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>Andere Entwickler*innen schreiben lieber jede Regel in eine neue Zeile:</p> + +<pre class="brush: css notranslate">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>Dem CSS ist es egal, welche dieser Arten Sie nutzen. Wir persönlich finden, dass es besser lesbar ist, jede Eigenschaft und jedes Wertepaar in einer neuen Zeile.</p> + +<h3 id="CSS_kommentieren">CSS kommentieren</h3> + +<p>Kommentare in Stylesheets zu schreiben hilft jeder*m künftigen*m Entwickler*in mit Ihrem Stylesheet zu arbeiten. Aber es wird auch Ihnen helfen, wenn Sie nach einer Pause wieder an dem Projekt arbeiten.</p> + +<pre class="brush: css notranslate">/* This is a CSS comment +It can be broken onto multiple lines. */</pre> + +<p>Ein guter Tipp ist es, auch zwischen logischen Abschnitten in Ihrem Stylesheet einen Block von Kommentaren einzufügen, um verschiedene Abschnitte beim Durchsuchen schnell zu finden, oder um Ihnen sogar etwas zum Suchen zu geben, damit Sie direkt in diesen Teil des CSS springen können. Wenn Sie eine Zeichenfolge verwenden, die nicht im Code erscheint, können Sie von Abschnitt zu Abschnitt springen, indem Sie danach suchen - unten haben wir <code>||</code> verwendet.</p> + +<pre class="brush: css notranslate">/* || General styles */ + +... + +/* || Typography */ + +... + +/* || Header and Main Navigation */ + +... + +</pre> + +<p>Sie müssen nicht jede einzelne Regel in Ihrem CSS kommentieren, da vieles davon selbsterklärend sein wird. Was Sie kommentieren sollten, sind die Dinge, bei denen Sie aus einem bestimmten Grund eine bestimmte Entscheidung getroffen haben.</p> + +<p>Möglicherweise haben Sie eine CSS-Eigenschaft auf eine bestimmte Art und Weise verwendet, um z.B. Inkompatibilitäten älterer Browser zu umgehen:</p> + +<pre class="brush: css notranslate">.box { + background-color: red; /* Fallback für ältere Browser, die keine Gradients unterstützen. */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>Vielleicht haben Sie ein Tutorial befolgt, um etwas zu erreichen, und das CSS ist ein nicht selbsterklärend. In diesem Fall könnten Sie die URL des Tutorials zu den Kommentaren hinzufügen. Sie werden sich freuen, wenn Sie in einem Jahr oder so zu diesem Projekt zurückkehren und sich vage daran erinnern können, dass es ein großartiges Tutorial zu diesem Ding gab, aber wo ist es?</p> + +<h3 id="Logische_Abschnitte_im_Stylesheet_schaffen">Logische Abschnitte im Stylesheet schaffen</h3> + +<p>Es ist eine gute Idee, alle häufig verwendeten Stile zuerst im Stylesheet zu haben. Das bedeutet alle Stile, die im Allgemeinen gelten, es sei denn, Sie machen etwas Besonderes mit diesem Element. In der Regel werden Sie Regeln dafür aufgestellt haben:</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> and <code>ol</code></li> + <li>The <code>table</code> properties</li> + <li>Links</li> +</ul> + +<p>In diesem Abschnitt des Stylesheets stellen wir das Standard-Styling für den Schrifttyp auf der Site zur Verfügung, richten ein Standard-Styling für Datentabellen und Listen ein und so weiter.</p> + +<pre class="brush: css notranslate">/* || ALLGEMEINE STYLES */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>Nach diesem Abschnitt könnten wir einige Hilfsklassen definieren, z.B. eine Klasse, die den Standardlistenstil für Listen entfernt, die wir als Flex Items oder auf andere Weise anzeigen wollen. Wenn Sie ein paar Dinge haben, von denen Sie wissen, dass Sie sie auf viele verschiedene Elemente anwenden wollen, können sie in diesem Abschnitt behandelt werden.</p> + +<pre class="brush: css notranslate">/* || HILFSKLASSEN */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>Dann können wir alles hinzufügen, was überall auf der Website verwendet wird. Das können Dinge wie das grundlegende Seitenlayout, die Kopfzeile, die Gestaltung der Navigation und so weiter sein.</p> + +<pre class="brush: css notranslate">/* || STILE, DIE AUF DER GANZEN SEITE VERWENDET WERDEN */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>Schließlich werden wir CSS für bestimmte Dinge aufnehmen, aufgeschlüsselt nach dem Kontext, der Seite oder sogar der Komponente, in der sie verwendet werden.</p> + +<pre class="brush: css notranslate">/* || SHOP SEITEN */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>Indem wir die Dinge auf diese Weise anordnen, haben wir zumindest eine Vorstellung davon, in welchem Teil des Stylesheets wir nach etwas suchen werden, das wir ändern wollen.</p> + +<h3 id="Allzu_spezifische_Selektoren_vermeiden">Allzu spezifische Selektoren vermeiden</h3> + +<p>Wenn Sie sehr spezifische Selektoren erstellen, werden Sie oft feststellen, dass Sie Teile Ihres CSS duplizieren müssen, um die gleichen Regeln auf ein anderes Element anzuwenden. Zum Beispiel könnten Sie etwas wie den unten stehenden Selektor haben, der die Regel auf ein <code><p></code> mit der Klasse <code>box</code> innerhalb eines <code><article></code> mit der Klasse <code>main</code> anwendet.</p> + +<pre class="brush: css notranslate">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>Wenn Sie nun die gleiche Regel außerhalb von <code>main</code> oder bei etwas anderem als <code><p></code> anwenden möchten, müssten Sie einen weiteren Selektor zu dieser Regel hinzufügen oder ein ganz neues Regelset erstellen. Stattdessen sollten Sie den Selektor <code>.box</code> verwenden, damit die Regel auf alle Elemente mit der Klasse <code>box</code> angewendet wird:</p> + +<pre class="brush: css notranslate">.box { + border: 1px solid #ccc; +}</pre> + +<p>In einigen Fällen kann es sinnvoll sein, eine höhere Spezifizität zu verwenden. Das wird aber eher die Ausnahme als die übliche Praxis sein.</p> + +<h3 id="Große_Stylesheets_in_mehrere_kleine_aufteilen">Große Stylesheets in mehrere kleine aufteilen</h3> + +<p>Insbesondere in Fällen, in denen Sie sehr unterschiedliche Stile für verschiedene Teile der Website haben, sollten Sie vielleicht ein Stylesheet haben, das alle globalen Regeln enthält, und dann kleinere, die die spezifischen Regeln enthalten, die für diese Abschnitte benötigt werden. Sie können von einer Seite aus auf mehrere Stylesheets verweisen, und es gelten die normalen Regeln der Kaskade, wobei Regeln in später verknüpften Stylesheets auf Regeln in früher verknüpften Stylesheets folgen.</p> + +<p>Zum Beispiel könnten wir einen Online-Shop als Teil der Website haben, wobei viel CSS nur für das Styling der Produktauflistungen und Formulare verwendet wird, die für den Shop benötigt werden. Es wäre sinnvoll, diese Dinge in einem anderen Stylesheet zu haben, auf das nur auf den Shop-Seiten verwiesen wird.</p> + +<p>Dies kann die Organisation Ihres CSS erleichtern und bedeutet auch, dass Sie weniger Situationen haben werden, in denen zwei Personen gleichzeitig am selben Stylesheet arbeiten müssen, was zu Konflikten bei der Quellcodekontrolle führt, wenn mehrere Personen an dem CSS arbeiten.</p> + +<h2 id="Andere_hilfreiche_Tools">Andere hilfreiche Tools</h2> + +<p>CSS an sich hat nicht viel an eingebauter Struktur zu bieten, daher müssen Sie die Arbeit erledigen, um Konsistenz und Regeln für die Erstellung von CSS zu schaffen. Die Web-Community hat auch verschiedene Tools und Ansätze entwickelt, die Ihnen bei der Verwaltung größerer CSS-Projekte helfen können. Da sie für Sie bei der Untersuchung hilfreich sein können und Sie bei der Arbeit mit anderen Personen wahrscheinlich auf diese Dinge stoßen werden, haben wir einen kurzen Leitfaden zu einigen davon beigefügt.</p> + +<h3 id="CSS_Verfahren">CSS Verfahren</h3> + +<p>Anstatt sich eigene Regeln für die Erstellung von CSS ausdenken zu müssen, können Sie einen der Ansätze zu übernehmen, die bereits von der Community entworfen und in vielen Projekten getestet wurden. Bei diesen Methoden handelt es sich im Wesentlichen um CSS-Codierungsleitfäden, die einen sehr strukturierten Ansatz zum Schreiben und Organisieren von CSS verfolgen. In der Regel führen sie zu einer umfassenderen Verwendung von CSS, als wenn Sie jeden Selektor nach einem eigenen Regelsatz für dieses Projekt schreiben und optimieren würden.</p> + +<p>Da viele dieser Systeme sehr weit verbreitet sind, ist es wahrscheinlicher, dass andere Entwickler*innen den von Ihnen verwendeten Ansatz verstehen und ihr CSS auf die gleiche Art und Weise schreiben können, anstatt Ihre persönliche Methodik von Grund auf neu erarbeiten zu müssen.</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>Die meisten Ansätze, denen Sie begegnen werden, beruhen auf dem Konzept des objektorientierten CSS (Object Oriented CSS, OOCSS), ein Ansatz, der populär wurde durch <a href="https://github.com/stubbornella/oocss/wiki">die Arbeiten von Nicole Sullivan</a>. Die Grundidee von OOCSS besteht darin, Ihr CSS in wiederverwendbare Objekte zu zerlegen, die überall auf Ihrer Website verwendet werden können. Das Standardbeispiel für OOCSS ist das als <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a> beschriebene Modell. Dabei handelt es sich um ein Modell mit einem Bild, einem Video oder einem anderen Element fester Größe auf der einen Seite und flexiblem Inhalt auf der anderen Seite. Es ist ein Modell, das wir überall auf Websites für Kommentare, Auflistungen und so weiter sehen.</p> + +<p>Wenn Sie keinen OOCSS-Ansatz verfolgen, können Sie für die verschiedenen Stellen, an denen dieses Modell verwendet wird, benutzerdefiniertes CSS erstellen, z.B. eine Klasse namens <code>comment</code> mit einem Bündel von Regeln für die Komponententeile, dann eine Klasse namens <code>list-item</code> mit fast denselben Regeln wie die Klasse <code>comment</code>, abgesehen von einigen winzigen Unterschieden. Der Unterschied zwischen diesen beiden Komponenten besteht darin, dass das Listenelement einen unteren Rand hat und Bilder in Kommentaren einen Rand haben, während Bilder von Listenelementen keinen Rand haben.</p> + +<pre class="brush: css notranslate">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>In OOCSS würden Sie ein Schema namens <code>media</code> erstellen, das das gesamte gemeinsame CSS für beide Schemata hat - eine Basisklasse für Dinge, die im Allgemeinen die Form des Medienobjekts darstellen. Dann fügen wir eine zusätzliche Klasse hinzu, die sich mit diesen winzigen Unterschieden befasst und so dieses Styling auf spezifische Weise erweitert.</p> + +<pre class="brush: css notranslate">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + +.list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>In Ihrem HTML-Code müsste für den Kommentar sowohl die Medien- als auch die Kommentarklasse <code>(media</code> und <code>comment</code>) verwendet werden:</p> + +<pre class="brush: html notranslate"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>Auf das Listenelement würde man die Klassen <code>media</code> und <code>list-item</code> anwenden:</p> + +<pre class="brush: html notranslate"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>Die Arbeit, die Nicole Sullivan geleistet hat, um diesen Ansatz zu beschreiben und zu fördern, bedeutet, dass selbst Personen, die heute nicht strikt einem OOCSS-Ansatz folgen, CSS im Allgemeinen auf diese Weise wiederverwenden werden - es hat sich in unserem Verständnis als eine gute Vorgehensweise im Allgemeinen etabliert.</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p> + +<pre class="brush: html notranslate"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p> + +<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p> + +<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p> + +<h4 id="Other_common_systems">Other common systems</h4> + +<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p> + +<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p> + +<h3 id="Build_systems_for_CSS">Build systems for CSS</h3> + +<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p> + +<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p> + +<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features. If you want to learn a lot more about Sass, start with the <a href="https://sass-lang.com/guide">Sass basics</a> article, then move on to their other documentation.</p> + +<h4 id="Defining_variables">Defining variables</h4> + +<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p> + +<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p> + +<pre class="brush: css notranslate"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p> + +<pre class="brush: css notranslate"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4> + +<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass (partials) these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p> + +<p>So for example, with <a href="https://sass-lang.com/documentation/at-rules/use#partials">partials</a>, you could have several style files inside a directory, say <code>foundation/_code.scss</code>, <code>foundation/_lists.scss</code>, <code>foundation/_footer.scss</code>, <code>foundation/_links.scss</code>, etc., then use the Sass <code>@use</code> role to load them into other stylesheets:</p> + +<pre class="brush: css notranslate">// foundation/_index.sass +@use 'code' +@use 'lists' +@use 'footer' +@use 'links'</pre> + +<p>If the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go:</p> + +<pre class="brush: css notranslate">// style.sass +@use 'foundation'</pre> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p> +</div> + +<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4> + +<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unnecessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p> + +<h2 id="Wrapping_up">Wrapping up</h2> + +<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p> + +<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p> + +<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/de/learn/css/building_blocks/werten_einheiten/index.html b/files/de/learn/css/building_blocks/werten_einheiten/index.html new file mode 100644 index 0000000000..8c45b5ba69 --- /dev/null +++ b/files/de/learn/css/building_blocks/werten_einheiten/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 +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To learn about the different types of values and units used in CSS properties.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_CSS_value">What is a CSS value?</h2> + +<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> or <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. When you see the value <code><color></code> as valid for a particular property, that means you can use any valid color as a value for that property, as listed on the <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> reference page.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. 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.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value"><color></a> 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.</p> +</div> + +<p>In the following example we have set the color of our heading using a keyword, and the background using the <code>rgb()</code> function:</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>A value in CSS is a way to define a collection of allowable sub-values. This means that if you see <code><color></code> as valid you don't need to wonder which of the different types of color value can be used — keywords, hex values, <code>rgb()</code> functions, etc. You can use <em>any</em> available <code><color></code> 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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> you will see that the browser compatibility section lists different types of color value and support for them.</p> + +<p>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.</p> + +<h2 id="Numbers_lengths_and_percentages">Numbers, lengths, and percentages</h2> + +<p>There are various numeric data types that you might find yourself using in CSS. The following are all classed as numeric:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Data type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td>An <code><integer></code> is a whole number such as <code>1024</code> or <code>-55</code>.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td>A <code><number></code> represents a decimal number — it may or may not have a decimal point with a fractional component, for example <code>0.255</code>, <code>128</code>, or <code>-1.2</code>.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td>A <code><dimension></code> is a <code><number></code> with a unit attached to it, for example <code>45deg</code>, <code>5s</code>, or <code>10px</code>. <code><dimension></code> is an umbrella category that includes the <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code>, and <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> types<a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td>A <code><percentage></code> represents a fraction of some other value, for example <code>50%</code>. Percentage values are always relative to another quantity, for example an element's length is relative to its parent element's length.</td> + </tr> + </tbody> +</table> + +<h3 id="Lengths">Lengths</h3> + +<p>The numeric type you will come across most frequently is <code><length></code>, for example <code>10px</code> (pixels) or <code>30em</code>. 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.</p> + +<h4 id="Absolute_length_units">Absolute length units</h4> + +<p>The following are all <strong>absolute</strong> length units — they are not relative to anything else and are generally considered to always be the same size.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Name</th> + <th scope="col">Equivalent to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>Centimeters</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>Millimeters</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>Quarter-millimeters</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>Inches</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/6th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>Points</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>Pixels</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>Most of these values are more useful when used for print, rather than screen output. For example we don't typically use <code>cm</code> (centimeters) on screen. The only value that you will commonly use is <code>px</code> (pixels).</p> + +<h4 id="Relative_length_units">Relative length units</h4> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Unit</th> + <th scope="col">Relative to</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>Font size of the element.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>x-height of the element's font.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>The advance measure (width) of the glyph "0" of the element's font.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>Font size of the root element.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>Line height of the element.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>1% of the viewport's width.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>1% of the viewport's height.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>1% of the viewport's smaller dimension.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>1% of the viewport's larger dimension.</td> + </tr> + </tbody> +</table> + +<h4 id="Exploring_an_example">Exploring an example</h4> + +<p>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.</p> + +<p>The second box has a width set in <code>vw</code> (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 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code>, so this won't work. To see this in action you'll have to <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">try the example after opening it in its own browser tab</a>.</p> + +<p>The third box uses <code>em</code> units. These are relative to the font size. I've set a font size of <code>1em</code> on the containing {{htmlelement("div")}}, which has a class of <code>.wrapper</code>. Change this value to <code>1.5em</code> 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.</p> + +<p>After following the instructions above, try playing with the values in other ways, to see what you get.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_and_rems">ems and rems</h4> + +<p><code>Die relativen Maßeneinheiten, <strong>em</strong></code><strong> </strong>und <strong><code>rem</code></strong><code>,</code>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 <a href="/en-US/docs/Learn/CSS/Styling_text">styling text</a> or <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>. The below example provides a demonstration.</p> + +<p>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 <em>ems</em> and the second a class of <em>rems</em>.</p> + +<p>To start with, we set 16px as the font size on the <code><html></code> element.</p> + +<p><strong>To recap, the em unit means "my parent element's font-size"</strong>. The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>ems</code> take their sizing from their parent. So each successive level of nesting gets progressively larger, as each has its font size set to <code>1.3em</code> — 1.3 times its parent's font size.</p> + +<p><strong>To recap, the rem unit means "The root element's font-size"</strong>. (rem standards for "root em".) The {{htmlelement("li")}} elements inside the {{htmlelement("ul")}} with a <code>class</code> of <code>rems</code> take their sizing from the root element (<code><html></code>). This means that each successive level of nesting does not keep getting larger.</p> + +<p>However, if you change the <code><html></code> <code>font-size</code> in the CSS you will see that everything else changes relative to it — both <code>rem</code>- and <code>em</code>-sized text.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="Percentages">Percentages</h3> + +<p>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 <code>font-size</code> as a percentage it will be a percentage of the <code>font-size</code> of the element's parent. If you use a percentage for a <code>width</code> value, it will be a percentage of the <code>width</code> of the parent.</p> + +<p>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.</p> + +<p>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!</p> + +<p><strong>Try changing the width of the wrapper or the percentage value to see how this works.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>The next example has font sizes set in percentages. Each <code><li></code> has a <code>font-size</code> of 80%, therefore the nested list items become progressively smaller as they inherit their sizing from their parent.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>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 <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> then you can use a length or a percentage. If the allowed value only includes <code><length></code>, it is not possible to use a percentage.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>Some values accept numbers, without any unit added to them. An example of a property which accepts a unitless number is the <code>opacity</code> property, which controls the opacity of an element (how transparent it is). This property accepts a number between <code>0</code> (fully transparent) and <code>1</code> (fully opaque).</p> + +<p><strong>In the below example, try changing the value of <code>opacity</code> to various decimal values between <code>0</code> and <code>1</code> and see how the box and its contents become more or less opaque.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: When you use a number in CSS as a value it should not be surrounded in quotes.</p> +</div> + +<h2 id="Color">Color</h2> + +<p>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.</p> + +<p>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.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Color_keywords">Color keywords</h3> + +<p>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 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> value.</p> + +<p><strong>Try playing with different color values in the live examples below, to get more of an idea how they work.</strong></p> + +<h3 id="Hexadecimal_RGB_values">Hexadecimal RGB values</h3> + +<p>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 <code>0123456789abcdef</code>. 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.)</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>Again, try changing the values to see how the colors vary.</strong></p> + +<h3 id="RGB_and_RGBA_values">RGB and RGBA values</h3> + +<p>The third scheme we'll talk about here is RGB. An RGB value is a function — <code>rgb()</code> — 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.</p> + +<p>Let's rewrite our last example to use RGB colors:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>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 <code>0</code> it will make the color fully transparent, whereas <code>1</code> will make it fully opaque. Values in between give you different levels of transparency.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> 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.</p> +</div> + +<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3> + +<p>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 <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p> + +<ul> + <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li> + <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li> + <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li> +</ul> + +<p>We can update the RGB example to use HSL colors like this:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>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!</p> + +<h2 id="Images">Images</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p> + +<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: there are some other possible values for <code><image></code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> data type if you want to read about them.</p> +</div> + +<h2 id="Position">Position</h2> + +<p>The <code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> 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.</p> + +<p>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 <code>center</code>.</p> + +<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>Play around with these values to see how you can push the image around.</strong></p> + +<h2 id="Strings_and_identifiers">Strings and identifiers</h2> + +<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code><color></code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p> + +<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. 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.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="Functions">Functions</h2> + +<p>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 — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p> + +<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> 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.</p> + +<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> 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 <code>calc()</code> to tell the browser to do it for us.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="Summary">Summary</h2> + +<p>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 <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p> + +<p>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.</p> + +<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/de/learn/css/css_layout/flexbox/index.html b/files/de/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..499a21cc4f --- /dev/null +++ b/files/de/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,352 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - Anfänger + - Artikel + - CSS + - CSS layouts + - Flexible Boxen + - Layout + - Layouts + - Leitfaden + - Lernen + - flexbox +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary"><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexbox</a> ist eine Layoutmethode zum Anordnen von Elementen in Zeilen oder Spalten. Elemente werden gestreckt, um zusätzlichen Platz zu füllen, und schrumpfen, um in kleinere Räume zu passen. Dieser Artikel erklärt alle Grundlagen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>HTML Grundlagen (siehe <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), und eine Vorstellung davon, wie CSS funktioniert (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td> + </tr> + <tr> + <th scope="row">Zielsetzung:</th> + <td>Erfahren Sie, wie Sie mit dem Flexbox-Layoutsystem Weblayouts erstellen.</td> + </tr> + </tbody> +</table> + +<h2 id="Warum_Flexbox">Warum Flexbox?</h2> + +<p>Lange Zeit waren die einzigen zuverlässigen browserübergreifenden Tools zum Erstellen von CSS-Layouts Dinge wie Floats und Positionierung. Diese sind in Ordnung und funktionieren, aber in gewisser Weise sind sie auch eher einschränkend und frustrierend.</p> + +<p>Die folgenden einfachen Layoutanforderungen sind mit solchen Werkzeugen auf bequeme und flexible Weise entweder schwierig oder unmöglich zu erreichen:</p> + +<ul> + <li>Vertikales Zentrieren eines Inhaltsblocks in seinem übergeordneten Element.</li> + <li>Alle untergeordneten Elemente eines Containers sollen die gleichen Anteil der Breite / Höhe einnehmen, unabhängig davon, wie viel Breite / Höhe verfügbar ist.</li> + <li>Alle Spalten in einem mehrspaltigen Layout mit einheitlicher Höhe gestalten, auch wenn sie eine andere Menge an Inhalt enthalten.</li> +</ul> + +<p>Wie Sie in den folgenden Abschnitten sehen werden, erleichtert Flexbox viele Layoutaufgaben erheblich. Lass uns eintauchen!</p> + +<h2 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h2> + +<p>In diesem Artikel werden Sie eine Reihe von Übungen durcharbeiten, um zu verstehen, wie Flexbox funktioniert. Zuerst sollten Sie eine lokale Kopie der ersten Startdatei - <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>aus unserem Github-Repo - erstellen, sie in einen modernen Browser (wie Firefox oder Chrome) laden und den Code in Ihrem Code-Editor anzeigen. Sie können es auch <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">hier live sehen</a>.</p> + +<p>Sie werden sehen, dass wir ein {{htmlelement ("header")}} Element mit einer Überschrift der obersten Ebene und ein {{htmlelement ("section")}} Element mit drei {{htmlelement ("article") }} haben. Wir werden damit ein standardmäßiges dreispaltiges Layout erstellen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="Festlegen_der_Elemente_für_flexible_Boxen">Festlegen der Elemente für flexible Boxen </h2> + +<p>Zunächst müssen wir auswählen, welche Elemente als flexible Boxen angeordnet werden sollen. Dazu setzen wir einen speziellen Wert von {{cssxref ("display")}} für das übergeordnete Element der Elemente, die Sie beeinflussen möchten. In diesem Fall möchten wir die {{htmlelement ("article")}} Elemente anordnen, also setzen wir dies auf das {{htmlelement ("section")}}:</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Dies führt dazu, dass das <section> -Element zu einem <strong>Flex-Container</strong> wird und seine untergeordneten Elemente zu <strong>Flex-Elementen</strong> werden. Das Ergebnis sollte ungefähr so sein:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>Diese Deklaration erzeugt alles, was wir brauchen - unglaublich, oder? Wir haben unser mehrspaltiges Layout mit gleich großen Spalten, und die Spalten haben alle die gleiche Höhe. Dies liegt an de Standardwerte für Flex-Elemente (die untergeordneten Elemente des Flex-Containers), die so eingerichtet sind, um solche häufig auftretenden Probleme wie dieses zu lösen.</p> + +<p>Lassen Sie uns noch einmal wiederholen, was hier passiert. Das Element, dem wir einen {{cssxref ("display")}} -Wert <code>flex</code> zugewiesen haben, verhält sich in Bezug auf die Interaktion mit dem Rest der Seite wie ein Element auf Blockebene, aber seine untergeordneten Elemente werden als Flex-Elemente angeordnet - Im nächsten Abschnitt wird detaillierter erläutert, was das bedeutet. Beachten Sie auch, dass Sie den <code>display</code> Wert <code>inline-flex</code> verwenden können, wenn Sie die untergeordneten Elemente eines Elements als Flex-Elemente auslegen möchten, dieses Element sich jedoch wie ein Inline-Element verhält.</p> + +<h2 id="Das_flex_Modell">Das flex Modell</h2> + +<p>Wenn Elemente als flex-Elemente angeordnet sind, werden sie entlang zweier Achsen angeordnet:</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li>Die <strong>Hauptachse (main axis) </strong>ist die Achse, die in der Richtung verläuft, in der die Flex-Elemente angeordnet sind (z. B. als Zeilen auf der Seite oder Spalten auf der Seite). Anfang und Ende dieser Achse werden als main start und main end bezeichnet.</li> + <li>Die <strong>Querachse (cross axis) </strong>verläuft senkrecht dazu. Anfang und Ende dieser Achse werden als cross start und cross end bezeichnet.</li> + <li>Das übergeordnete Element, auf dem <code>display: flex</code> festgelegt ist (in unserem Beispiel das {{htmlelement ("section")}}), wird als <strong>Flex-Container</strong> bezeichnet.</li> + <li>Die als flexible Boxen im Flex-Container angeordnetrn Elemente werden als <strong>Flex-Elemente (flex-items) </strong>bezeichnet (in unserem Beispiel die Elemente {{htmlelement ("article")}}).</li> +</ul> + +<p>Beachten Sie diese Terminologie, wenn Sie die folgenden Abschnitte durchgehen. Sie können jederzeit darauf zurückgreifen, wenn Sie über einen der verwendeten Begriffe verwirrt sind.</p> + +<h2 id="Spalten_oder_Zeilen">Spalten oder Zeilen?</h2> + +<p>Flexbox bietet eine Eigenschaft namens {{cssxref ("flex-direction")}}, die angibt, in welche Richtung die Hauptachse verläuft (in welche Richtung die untergeordneten Flexbox-Elemente angeordnet sind). Standardmäßig ist dies auf row festgelegt, wodurch sie veranlasst werden in einer Reihe in der Richtung angeordnet sein, in der die Standardsprache Ihres Browsers funktioniert (von links nach rechts, im Fall eines englischen Browsers).</p> + +<p>Fügen Sie Ihrer {{htmlelement ("section")}} Regel die folgende Deklaration hinzu:</p> + +<pre class="brush: css notranslate">flex-direction: column;</pre> + +<p>Sie sehen, dass die Elemente dadurch wieder in ein Spaltenlayout versetzt werden, ähnlich wie vor dem Hinzufügen von CSS. Bevor Sie fortfahren, löschen Sie diese Deklaration aus Ihrem Beispiel.</p> + +<div class="note"> +<p><strong>Hinweis: </strong>Sie können Flex-Elemente auch in umgekehrter Richtung auslegen, indem Sie die Werte <code>row-reverse</code> für Zeilenumkehr und <code>column-reverse</code> für Spaltenumkehr verwenden. Experimentieren Sie auch mit diesen Werten!</p> +</div> + +<h2 id="Umbruch">Umbruch</h2> + +<p>Ein Problem, das auftritt, wenn Sie eine feste Breite oder Höhe in Ihrem Layout haben, ist, dass Ihre Flexbox-Kinder möglicherweise ihren Container überlaufen und das Layout beschädigen. Schauen Sie sich unser Beispiel <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> an und versuchen Sie, <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">es live anzuzeigen</a> (erstellen Sie jetzt eine lokale Kopie dieser Datei, wenn Sie diesem Beispiel folgen möchten):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Hier sehen wir die Kind-Elemente tatsächlich aus ihrem Container laufen. Eine Möglichkeit, dies zu beheben, besteht darin, Ihrer {{htmlelement ("section")}} -Regel die folgende Deklaration hinzuzufügen:</p> + +<pre class="brush: css notranslate">flex-wrap: wrap;</pre> + +<p>Fügen Sie Ihrer {{htmlelement ("article")}} Regel außerdem die folgende Deklaration hinzu:</p> + +<pre class="brush: css notranslate">flex: 200px;</pre> + +<p>Sie werden sehen, dass das Layout damit viel besser aussieht:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>Wir haben jetzt mehrere Zeilen - so viele Flexbox-Kinder werden in jede Zeile eingefügt, wie sinnvoll ist, und jeder Überlauf wird in die nächste Zeile verschoben. Die auf den Artikeln festgelegte <code>flex: 200px</code>-Deklaration bedeutet, dass jede mindestens 200px breit ist. Wir werden diese Eigenschaft später genauer besprechen. Möglicherweise stellen Sie auch fest, dass die letzten untergeordneten Elemente in der letzten Zeile jeweils breiter sind, sodass die gesamte Zeile noch gefüllt ist.</p> + +<p>Aber wir können hier noch mehr tun. Versuchen Sie zunächst, den Eigenschaftswert {{cssxref ("flex-direction")}} in <code>row-reverse</code> zu ändern. Jetzt sehen Sie, dass Sie immer noch über ein Layout mit mehreren Zeilen verfügen, das jedoch in der gegenüberliegenden Seite des Browsers beginnt Fenster und in umgekehrter Richtung fließt.</p> + +<h2 id="flex-flow_shorthand">flex-flow shorthand</h2> + +<p>An dieser Stelle ist anzumerken, dass eine Abkürzung für {{cssxref ("Flex-Wrap")}} und {{cssxref ("Flex-Wrap")}} - {{cssxref ("Flex-Flow")}} existiert . So können Sie beispielsweise</p> + +<pre class="brush: css notranslate">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>ersetzen mit</p> + +<pre class="brush: css notranslate">flex-flow: row wrap;</pre> + +<h2 id="Flexible_Dimensionierung_von_flex-Artikeln">Flexible Dimensionierung von flex-Artikeln</h2> + +<p>Kehren wir nun zu unserem ersten Beispiel zurück und schauen wir uns an, wie wir steuern können, welchen Anteil der Space-Flex-Elemente im Vergleich zu den anderen Flex-Elementen einnehmen. Starten Sie Ihre lokale Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html </a>oder nehmen Sie eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> als neuen Ausgangspunkt (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">hier auch live</a>).</p> + +<p>Fügen Sie zunächst die folgende Regel am Ende Ihres CSS hinzu:</p> + +<pre class="brush: css notranslate">article { + flex: 1; +}</pre> + +<p>Dies ist ein einheitloser Proportionswert, der bestimmt, wie viel des verfügbaren Platzes entlang der Hauptachse jedes Flex-Element im Vergleich zu anderen Flex-Elementen einnimmt. In diesem Fall geben wir jedem {{htmlelement ("article")}} Element den gleichen Wert (den Wert 1), was bedeutet, dass alle gleich viel Platz nach dem Auffüllen und dem Rand beanspruchen. Es ist relativ zu anderen Flex-Elementen, was bedeutet, dass ein Wert von 400000 für jedes Flex-Element genau den gleichen Effekt hätte.</p> + +<p>Fügen Sie nun die folgende Regel unter der vorherigen hinzu:</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>Wenn Sie jetzt aktualisieren, werden Sie feststellen, dass das dritte {{htmlelement ("article")}} doppelt so viel der verfügbaren Breite einnimmt wie die beiden anderen - es sind jetzt insgesamt vier Proportionseinheiten verfügbar (1 + 1) + 2 = 4). Die ersten beiden Flex-Elemente haben jeweils eine Einheit, sodass sie jeweils 1/4 des verfügbaren Platzes beanspruchen. Die dritte hat zwei Einheiten, nimmt also 2/4 des verfügbaren Platzes (oder die Hälfte) ein.</p> + +<p>Sie können auch einen Mindestgrößenwert innerhalb des Flex-Werts angeben. Versuchen Sie, Ihre vorhandenen Artikelregeln wie folgt zu aktualisieren:</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>Das heißt im Wesentlichen: "Jedes Flex-Element erhält zuerst 200 Pixel des verfügbaren Speicherplatzes. Danach wird der Rest des verfügbaren Speicherplatzes entsprechend den Proportionseinheiten aufgeteilt." Versuchen Sie es mit einer Aktualisierung, und Sie werden einen Unterschied in der Aufteilung des Speicherplatzes feststellen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>Der wahre Wert von flexbox zeigt sich in seiner Flexibilität / Responsiveness. Wenn Sie die Größe des Browserfensters ändern oder ein weiteres {{htmlelement ("article")}} Element hinzufügen, funktioniert das Layout weiterhin einwandfrei.</p> + +<h2 id="flex_Kurzform_versus_Langform">flex: Kurzform versus Langform</h2> + +<p>{{cssxref ("flex")}} ist eine Kurzform-Eigenschaft, die bis zu drei verschiedene Werte angeben kann:</p> + +<ul> + <li>Der Anteil des Anteils ohne Einheit, den wir oben besprochen haben. Dies kann individuell mit der Langform {{cssxref ("flex-grow")}} angegeben werden.</li> + <li>Ein zweiter uneinheitlicher Proportionswert - {{cssxref ("flex-shrink")}} -, der ins Spiel kommt, wenn die flexiblen Elemente ihren Container überlaufen. Dies gibt an, wie viel der überlaufenden Menge von der Größe jedes Flex-Elements entfernt wird, um zu verhindern, dass sie ihren Behälter überlaufen. Dies ist eine erweiterte Flexbox-Funktion, auf die wir in diesem Artikel nicht weiter eingehen werden.</li> + <li>Der oben diskutierte Mindestgrößenwert. Dies kann individuell mit dem Lang-Wert {{cssxref ("flex-base")}} angegeben werden.</li> +</ul> + +<p>Wir raten davon ab, die lLangform Flex-Eigenschaften zu verwenden, es sei denn, Sie müssen dies wirklich tun (z. B. um etwas zuvor festgelegtes zu überschreiben). Sie führen dazu, dass viel zusätzlicher Code geschrieben wird, und sie können etwas verwirrend sein.</p> + +<h2 id="Horizontale_und_vertikale_Ausrichtung">Horizontale und vertikale Ausrichtung</h2> + +<p>Sie können auch Flexbox-Funktionen verwenden, um Flex-Elemente entlang der Haupt- oder Querachse auszurichten. Schauen wir uns dies anhand eines neuen Beispiels an - f<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">lex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">siehe auch live</a>) - das wir in eine übersichtliche, flexible Schaltfläche / Symbolleiste verwandeln werden. Im Moment sehen Sie eine horizontale Menüleiste mit einigen Schaltflächen in der oberen linken Ecke.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>Nehmen Sie zunächst eine lokale Kopie dieses Beispiels.</p> + +<p>Fügen Sie nun am Ende des CSS des Beispiels Folgendes hinzu:</p> + +<pre class="brush: css notranslate">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17210/flexbox_center_space-around.png" style="height: 209px; width: 1217px;"></p> + +<p>Aktualisieren Sie die Seite und Sie werden sehen, dass die Schaltflächen jetzt horizontal und vertikal gut zentriert sind. Wir haben dies über zwei neue Eigenschaften getan.</p> + +<p>{{cssxref ("align-items")}} steuert, wo sich die Flex-Elemente auf der Querachse befinden.</p> + +<ul> + <li>Standardwert ist <code>stretch</code>, wodurch alle Flex-Elemente gestreckt werden, um das übergeordnete Element in Richtung der Querachse zu füllen. Wenn das übergeordnete Element in Querrichtung keine feste Breite hat, werden alle Flex-Elemente so lang wie die längsten Flex-Elemente. So hat unser erstes Beispiel standardmäßig Spalten gleicher Höhe erhalten.</li> + <li>Der <code>center</code>-wert, den wir in unserem obigen Code verwendet haben, bewirkt, dass die Elemente ihre intrinsischen Abmessungen beibehalten, jedoch entlang der Querachse zentriert werden. Aus diesem Grund sind die Schaltflächen unseres aktuellen Beispiels vertikal zentriert.</li> + <li>Sie können auch Werte wie <code>flex-start</code> und <code>flex-end</code> festlegen, mit denen alle Elemente am Anfang bzw. Ende der Querachse ausgerichtet werden. Ausführliche Informationen finden Sie unter {{cssxref ("align-items")}}.</li> +</ul> + +<p>Sie können das Verhalten {{cssxref ("align-items")}} für einzelne Flex-Elemente überschreiben, indem Sie die Eigenschaft {{cssxref ("align-self")}} auf diese anwenden. Versuchen Sie beispielsweise, Ihrem CSS Folgendes hinzuzufügen:</p> + +<pre class="brush: css notranslate">button:first-child { + align-self: flex-end; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/17211/flexbox_first-child_flex-end.png" style="height: 217px; width: 1219px;"></p> + +<p>Sehen Sie sich an, welchen Effekt dies hat, und entfernen Sie ihn erneut, wenn Sie fertig sind.</p> + +<p>{{cssxref ("Berechtigungsinhalt")}} steuert, wo sich die Flex-Elemente auf der Hauptachse befinden.</p> + +<ul> + <li>Der Standardwert ist <code>flex-start</code>, wodurch alle Elemente am Anfang der Hauptachse sitzen.</li> + <li>Sie können <code>flex-end</code> verwenden, damit sie am Ende sitzen.</li> + <li><code>center</code> ist auch ein Wert für j<code>ustify-content</code> und lässt die flexiblen Elemente in der Mitte der Hauptachse sitzen.</li> + <li>Der oben verwendete Wert <code>space-around</code> ist nützlich - er verteilt alle Elemente gleichmäßig entlang der Hauptachse, wobei an beiden Enden etwas Platz verbleibt.</li> + <li>Es gibt einen anderen Wert, <code>space-between</code>, der dem <code>space-around</code> sehr ähnlich ist, außer dass an beiden Enden kein Leerzeichen verbleibt.</li> +</ul> + +<p>Spielen Sie mit diesen Werten, um zu sehen, wie sie funktionieren, bevor Sie fortfahren.</p> + +<h2 id="Flex-Elemente_ordnen">Flex-Elemente ordnen</h2> + +<p>Flexbox bietet auch eine Funktion zum Ändern der Layoutreihenfolge von Flex-Elementen, ohne die Quellreihenfolge zu beeinflussen. Dies ist eine andere Sache, die mit herkömmlichen Layoutmethoden nicht möglich ist.</p> + +<p>Der Code hierfür ist einfach: Fügen Sie Ihrem Beispielcode für die Schaltflächenleiste das folgende CSS hinzu:</p> + +<pre class="brush: css notranslate">button:first-child { + order: 1; +}</pre> + +<p>Aktualisieren Sie, und Sie werden jetzt sehen, dass die Schaltfläche "Lächeln" an das Ende der Hauptachse verschoben wurde. Lassen Sie uns etwas detaillierter darüber sprechen, wie dies funktioniert:</p> + +<ul> + <li>Standardmäßig haben alle Flex-Elemente den Wert {{cssxref ("order")}} von 0.</li> + <li>Flex-Artikel mit höheren Ordnungswerten werden später in der Anzeigereihenfolge angezeigt als Artikel mit niedrigeren Ordnungswerten.</li> + <li>Flex-Artikel mit demselben Ordnungswert werden in ihrer Quellreihenfolge angezeigt. Wenn Sie also vier Elemente mit den Ordnungswerten 2, 1, 1 und 0 festgelegt haben, lautet die Anzeigereihenfolge 4., 2., 3. und dann 1 ..</li> + <li>Das 3. Element wird nach dem 2. angezeigt, da es denselben Wert hat und sich in der Quelloreihenfolge dahinter befindet.</li> +</ul> + +<p>Sie können negative Werte festlegen, damit Elemente vor Elementen mit 0 angezeigt werden. Sie können beispielsweise die Schaltfläche "Blush" am Anfang der Hauptachse mit der folgenden Regel anzeigen lassen:</p> + +<pre class="brush: css notranslate">button:last-child { + order: -1; +}</pre> + +<h2 id="Verschachtelte_Flexboxen">Verschachtelte Flexboxen</h2> + +<p>Mit der Flexbox können einige recht komplexe Layouts erstellt werden. Es ist vollkommen in Ordnung, ein Flex-Element auch als Flex-Container festzulegen, damit seine untergeordneten Elemente auch wie flexible Boxen angeordnet sind. Schauen Sie sich <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> an (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">Live-Ansicht</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>Das HTML dafür ist ziemlich einfach. Wir haben ein {{htmlelement ("section")}} Element, das drei {{htmlelement ("article")}} enthält. Das dritte {{htmlelement ("article")}} enthält drei {{htmlelement ("div")}}. ::</p> + +<pre class="notranslate">section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>Schauen wir uns den Code an, den wir für das Layout verwendet haben.</p> + +<p>Zunächst legen wir fest, dass die untergeordneten Elemente des {{htmlelement ("section")}} als flexible Boxen angeordnet werden.</p> + +<pre class="brush: css notranslate">section { + display: flex; +}</pre> + +<p>Als nächstes setzen wir einige Flex-Werte für die {{htmlelement ("article")}} selbst. Beachten Sie hier besonders die 2. Regel - wir setzen das dritte {{htmlelement ("article")}} so, dass seine Kindelemente auch wie flexible Elemente angeordnet sind, aber diesmal legen wir sie wie eine Spalte an.</p> + +<pre class="brush: css notranslate">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>Als nächstes wählen wir das erste {{htmlelement ("div")}} aus. Wir verwenden zuerst <code>flex: 1 100px</code>; Um eine effektive Höhe von 100 Pixel zu erreichen, setzen wir die untergeordneten Elemente (die {{htmlelement ("button")}} Elemente) so, dass sie auch wie flexible Elemente angeordnet sind. Hier legen wir sie in einer Umbruchreihe an und richten sie in der Mitte des verfügbaren Platzes aus, wie wir es in dem Beispiel für einzelne Schaltflächen getan haben, das wir zuvor gesehen haben.</p> + +<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>Schließlich haben wir einige Größen für die Schaltfläche festgelegt, aber interessanterweise geben wir ihr einen Flex-Wert von 1 Auto. Dies hat einen sehr interessanten Effekt, den Sie sehen, wenn Sie versuchen, die Breite Ihres Browserfensters zu ändern. Die Schaltflächen nehmen so viel Platz wie möglich ein und sitzen so viele auf derselben Linie wie möglich. Wenn sie jedoch nicht mehr bequem auf dieselbe Linie passen, werden sie nach unten fallen gelassen, um neue Linien zu erstellen.</p> + +<pre class="brush: css notranslate">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="Cross-Browser-Kompatibilität">Cross-Browser-Kompatibilität</h2> + +<p>Die Flexbox-Unterstützung ist in den meisten neuen Browsern verfügbar - Firefox, Chrome, Opera, Microsoft Edge und IE 11, neuere Versionen von Android / iOS usw. Sie sollten sich jedoch bewusst sein, dass noch ältere Browser verwendet werden, die Flexbox nicht unterstützen (oder aber eine veraltete Version davon unterstützen.)</p> + +<p>Während Sie nur lernen und experimentieren, spielt dies keine große Rolle. Wenn Sie jedoch die Verwendung von Flexbox in einer echten Website in Betracht ziehen, müssen Sie Tests durchführen und sicherstellen, dass Ihre Benutzererfahrung in möglichst vielen Browsern noch akzeptabel ist.</p> + +<p>Flexbox ist etwas kniffliger als einige CSS-Funktionen. Wenn einem Browser beispielsweise ein CSS-Schlagschatten fehlt, kann die Site wahrscheinlich weiterhin verwendet werden. Wenn Flexbox-Funktionen nicht unterstützt werden, wird ein Layout wahrscheinlich vollständig beschädigt, wodurch es unbrauchbar wird.</p> + +<p>In unserem <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross-Browser-Testmodul</a> diskutieren wir Strategien zur Überwindung von Problemen mit der Cross-Browser-Unterstützung.</p> + +<h2 id="Testen_Sie_Ihre_Fähigkeiten!">Testen Sie Ihre Fähigkeiten!</h2> + +<p>Wir haben in diesem Artikel viel behandelt, aber können Sie sich an die wichtigsten Informationen erinnern? Sie können einige weitere Tests finden, um zu überprüfen, ob Sie diese Informationen beibehalten haben, bevor Sie fortfahren - siehe Testen Sie Ihre Fähigkeiten: Flexbox.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Damit ist unsere Tour durch die Grundlagen der Flexbox abgeschlossen. Wir hoffen, Sie hatten Spaß und werden ein gutes Stück damit herumspielen, wenn Sie Ihr Lernen vorantreiben. Als nächstes werfen wir einen Blick auf einen weiteren wichtigen Aspekt von CSS-Layouts - CSS-Raster.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Introduction">Einführung in das CSS-Layout</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Positioning">Positionieren</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Mehrspaltiges Layout</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Media_queries">Anfängerleitfaden für media queries</a></li> + <li><a href="/de-DEdocs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy-Layout-Methoden</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Unterstützung älterer Browser</a></li> + <li><a href="/de-DE/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Grundlegende Bewertung des Layoutverständnisses</a></li> +</ul> +</div> diff --git a/files/de/learn/css/css_layout/index.html b/files/de/learn/css/css_layout/index.html new file mode 100644 index 0000000000..4351951f84 --- /dev/null +++ b/files/de/learn/css/css_layout/index.html @@ -0,0 +1,88 @@ +--- +title: CSS layout +slug: Learn/CSS/CSS_layout +tags: + - Beginner + - CSS + - Floating + - Grids + - Guide + - Landing + - Layout + - Learn + - Module + - Multiple column + - NeedsTranslation + - Positioning + - TopicStub + - alignment + - flexbox + - float + - table +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already:</p> + +<ol> + <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li> + <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li> + <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt> + <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></dt> + <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt> + <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt> + <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt> + <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt> + <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></dt> + <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt> + <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt> + <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt> + <dd> + <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Assessment: Fundamental layout comprehension</a></dt> + <dd>An assessment to test your knowledge of different layout methods by laying out a webpage.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt> + <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd> +</dl> diff --git a/files/de/learn/css/first_steps/index.html b/files/de/learn/css/first_steps/index.html new file mode 100644 index 0000000000..a43d3b473b --- /dev/null +++ b/files/de/learn/css/first_steps/index.html @@ -0,0 +1,54 @@ +--- +title: Erste Schritte mit CSS +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary"><font>CSS (Cascading Style Sheets) wird zum Stylen und Layouten von Webseiten verwendet. Sie können beispielsweise die Schriftart, Farbe, Größe und den Abstand von Seiteninhalten ändern, Inhalt in mehrere Spalten aufteilen oder Animationen und andere dekorative Funktionen hinzufügen. Dieses Modul bietet einen sanften Einstieg in CSS, beginnend mit einem Überblick über Funktionsweise, Syntax und wie Sie mit CSS Darstellungsstile zu </font>HTML-Seiten <font>hinzufügen können.</font></p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Bevor Sie mit diesem Lernmodul beginnen, sollten Sie:</p> + +<ol> + <li>grundsätzlich mit Computern umgehen und das Internet passiv nutzen (d.h. im Internet surfen und Inhalte konsumieren) können.</li> + <li>sich bereits eine einfache Arbeitsumgebung eingerichtet haben (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben) und wissen, wie Sie Dateien erstellen und ordnen (wie in <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt).</li> + <li>über grundlegende HTML-Kenntnisse (entsprechend dem Lernmodul <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a>) verfügen.</li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: 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 <a href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p> +</div> + +<h2 id="Lerneinheiten">Lerneinheiten</h2> + +<p>Die Lerneinheiten dieses Moduls werden Ihnen alle grundlegenden Konzepte von CSS vermitteln. Dazu erhalten Sie auch immer wieder Gelegenheit, Ihr neu erworbenes Wissen gleich auszuprobieren.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Was ist CSS?</a></dt> + <dd>Mit <strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) können Sie toll aussehende Webseiten erstellen. Diese Lerneinheit gibt einen Vorgeschmack darauf anhand eines einfachen Code-Beispiels und erklärt einige Schlüsselelemente der Sprache.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS kennenlernen</a></dt> + <dd>In dieser Lerneinheit wenden Sie CSS auf ein einfaches HTML-Dokument an und lernen dabei einige nützliche Dinge über die Sprache.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Wie CSS aufgebaut ist</a></dt> + <dd>Nachdem Sie jetzt eine Vorstellung davon haben, was CSS ist und wie es benutzt wird, befassen wir uns etwas genauer mit dem Aufbau der Sprache. Diese Lerneinheit eignet sich auch gut zum Nachlesen, wenn Sie in späteren Abschnitten auf Verständnisschwierigkeiten stoßen.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Wie CSS funktioniert</a></dt> + <dd>Bis jetzt haben wir uns damit beschäftigt, wie sich CSS nutzen lässt, um einfache <em>stylesheets</em> zu schreiben. In dieser Lerneinheit schauen wir uns, wie ein Browser CSS and HTML verarbeitet und in eine Webseite verwandelt.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Nutzen Sie Ihr neues Wissen</a></dt> + <dd>Die Kenntnisse, die Sie sich in den vorherigen Lerneinheiten angeeignet haben, sollten es Ihnen erlauben, einfache Textseiten mit Hilfe von CSS zu formatieren. Hier erhalten Sie genau dazu Gelegenheit!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt> + <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd> +</dl> diff --git a/files/de/learn/css/index.html b/files/de/learn/css/index.html new file mode 100644 index 0000000000..973569c85e --- /dev/null +++ b/files/de/learn/css/index.html @@ -0,0 +1,59 @@ +--- +title: CSS +slug: Learn/CSS +tags: + - Anfänger + - CSS + - Debuggen + - Einsteiger +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Cascading Stylesheets — oder {{glossary("CSS")}} — ist die zweite Technologie, die Sie nach {{glossary("HTML")}} lernen sollten. Während HTML genutzt wird, um die Struktur und Semantik Ihrer Inhalte zu definieren, dient CSS dazu, deren Erscheinung und Layout zu beeinflussen. So lässt sich CSS beispielsweise nutzen, um die Schriftarten, Farben, Größen und räumliche Abstände Ihrer Inhalte zu verändern, Inhalte in mehreren Spalten anzuordnen oder Animationen und andere dekorative Merkmale hinzuzufügen.</p> + +<h2 id="Lernprozess">Lernprozess</h2> + +<p>Sie sollten sich unbedingt mit den Grundlagen von HTML auseinandersetzen, bevor Sie sich an CSS versuchen. Wir empfehlen Ihnen, zunächst unser "<a href="/de-DE/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>"-Modul durchzuarbeiten — anschließend können Sie folgende Themen angehen:</p> + +<ul> + <li>CSS, beginnend mit diesem Modul "Einführung in CSS"</li> + <li>Fortgeschrittene <a href="/de-DE/Learn/HTML#Modules">HTML Module</a></li> + <li><a href="/de-DE/docs/Learn/JavaScript">JavaScript</a>, und wie man es einsetzt, um Webseiten dynamische Funktionalität hinzuzufügen</li> +</ul> + +<p>Wir empfehlen, HTML und CSS gleichzeitig zu lernen und immer wieder zwischen beiden Themen hin- und her zu springen. Denn HTML ist sehr viel interessanter mit CSS, und CSS lässt sich schwerlich ohne HMTL erlernen.</p> + +<p>Bevor Sie in dieses Thema starten, sollten Sie zumindest ein grundlegendes Verständnis im Umgang mit Computern sowie dem passiven Gebrauch des Internets (also einfach nur Surfen und Inhalte konsumieren) haben. Sie sollten eine einfache Arbeitsumgebung eingerichtet haben, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a>" ausführlich beschrieben, und wissen, wie Sie Dateien erzeugen und verwalten, wie im Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzen</a>" beschrieben — beides Teil unseres Anfängerkurses "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>".</p> + +<p>Es ist empfehlenswert, im Vorfeld den Artikel "<a href="/de-DE/docs/Learn/Getting_started_with_the_web">Das Web für Einsteiger</a>" durchzuarbeiten, bevor Sie sich an diesem Thema versuchen, aber es ist keinesfalls zwingend erforderlich; das Meiste, was im CSS Grundlagenartikel angerissen wird, wird auch in unserem Modul "Einführung in CSS" behandelt, allerdings weit ausführlicher.</p> + +<h2 id="Module">Module</h2> + +<p>Dieses Thema unterteilt sich in die folgenden Module, die Sie in der vorgeschlagenen Reihenfolge abarbeiten sollten. Sie sollten definitiv mit dem Ersten beginnen.</p> + +<dl> + <dt><a href="/de-DE/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a></dt> + <dd>Dieses Modul vermittelt Ihnen, wie CSS grundlegend funktioniert, inklusive Selektoren und Eigenschaften, CSS-Schreibregeln, Anwendung von CSS auf HTML, wie man Maße, Farben und andere Einheiten in CSS spezifiziert, Kaskadierung und Vererbung, Box-Modell Grundlagen, und das Debuggen von CSS.</dd> + <dt><a href="/de-DE/docs/Learn/CSS/Styling_text">Textgestaltung</a></dt> + <dd>Hier lernen wir Grundlagen der Textgestaltung, wie das Setzen der Schriftart, Fett- und Kursivdruck, Zeilen- und Buchstabenabstand, und Schattierung sowie andere Textmerkmale. Abgerundet wird dieses Modul mit der Anwendung von eigenen Schriftarten auf Ihre Webseite und die Gestaltung von Listen und Links.</dd> + <dt><a href="/De-US/docs/Learn/CSS/Styling_boxes">Boxgestaltung</a></dt> + <dd>Als Nächstes befassen wir uns mit der Gestaltung von Boxen, einem der grundlegenden Schritte in Richtung Webseitenlayout. In diesem Modul rekapitulieren wir das Box-Modell, anschließend schauen wir uns an, wie man das Layout einer Box kontrolliert, indem man Polsterung, Rahmen und Randabstände festlegt, Hintergrundfarben, -bilder und andere Eigenschaften einsetzt, und ausgefallene Dinge wie Schattenwurf und Filter einstellt.</dd> + <dt><a href="/de-DE/docs/Learn/CSS/CSS_layout">CSS-Layout</a></dt> + <dd>Jetzt haben wir uns die Grundlagen von CSS angeeignet: Wir wissen wie man Texte formatiert und wie man Boxen gestaltet und manipuliert, die Ihre Inhalte umfassen. Nun wird es Zeit sich anzusehen, wie Sie Ihre Boxen an die richtige Stelle und in richtiger Relation zum Darstellungsfeld setzen, und umgekehrt. Wir haben alle nötigen Voraussetzungen, um tief in's Thema CSS-Layout einzutauchen, uns verschiedene Bildschirm-Einstellungen anzusehen, traditionelle Methoden wie Schweben und Positionierung, und neumodische Layoutwerkzeuge wie Flexboxen.</dd> + <dt>Responsives Design (ausstehend)</dt> + <dd>Mit einer Vielzahl verschiedener Endgeräte kann man heutzutage im Netz surfen, infolge dessen ist <a href="/de-DE/docs/Web/Guide/Responsive_design">Responsives Webdesign</a> (RWD) zu einer Kerndisziplin des Webdesigns geworden. Dieses Modul wird die grundlegenden Prinzipien und Werkzeuge des RWD behandeln, das Anwenden verschiedener CSS auf ein Dokument in Abhängigkeit von Geräteeigenschaften wie Bildschirmgröße, -format und -auflösung erklären, und die verfügbaren Technologien zum Darstellen von Videos und Bildern in Abhängigkeit von jenen Eigenschaften ausloten.</dd> +</dl> + +<h2 id="Lösen_typischer_CSS-Probleme">Lösen typischer CSS-Probleme</h2> + +<p><a href="/de-DE/docs/Learn/CSS/Howto">CSS nutzen, um typische Probleme zu lösen</a> verweist auf Artikelabschnitte, die erklären, wie man mit CSS die häufigsten Problems beim Erstellen einer Webseite behebt.</p> + +<p>Von Anfang an werden sie meist HTML-Elemente und deren Hintergründe einfärben, Größe, Form und Position von Elementen ändern sowie Rahmen definieren und hinzufügen. Aber es gibt nicht viel, was Sie nicht tun können, sobald Sie auch nur ein solides Verständnis der Grundlagen von CSS haben. Das Beste am CSS-Lernprozesses ist, dass man nur mit Grundlagenwissen bereits ein gutes Gefühl dafür entwickelt, was möglich und was nicht möglich ist, selbst wenn Sie noch nicht wirklich wissen, wie diese mögliche Lösung aussieht.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<dl> + <dt><a href="/de-DE/docs/Web/CSS">CSS auf MDN</a></dt> + <dd>Die Hauptübersicht für die CSS-Dokumentation auf MDN, wo Sie ausführliche Referenzdokumente für alle Merkmale der CSS-Sprache finden. Möchten Sie nachschlagen, welche verschieden Werte eine Eigenschaft annehmen kann? Dann ist dies der richtige Ort zum stöbern.</dd> +</dl> diff --git a/files/de/learn/css/styling_text/index.html b/files/de/learn/css/styling_text/index.html new file mode 100644 index 0000000000..0e5279bda2 --- /dev/null +++ b/files/de/learn/css/styling_text/index.html @@ -0,0 +1,65 @@ +--- +title: Styling text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - NeedsTranslation + - Text + - TopicStub + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p> + +<div class="in-page-callout webdev"> +<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3> + +<p>We have put together a course that includes all the essential information you need to work towards your goal.</p> + +<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p> +</div> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p> + +<div class="note"> +<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="https://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> or <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<p>This module contains the following articles, which will teach you all of the essentials behind styling HTML text content.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> + <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt> + <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt> + <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt> + <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt> + <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd> +</dl> diff --git a/files/de/learn/getting_started_with_the_web/css_basics/index.html b/files/de/learn/getting_started_with_the_web/css_basics/index.html new file mode 100644 index 0000000000..42d968d9b2 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/css_basics/index.html @@ -0,0 +1,282 @@ +--- +title: CSS-Grundlagen +slug: Learn/Getting_started_with_the_web/CSS_basics +tags: + - Anfänger + - CSS + - Coding + - Design + - Lernen + - Stylesheets + - Web +translation_of: Learn/Getting_started_with_the_web/CSS_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>CSS (engl.: Cascading Style Sheets = gestufte Gestaltungsbögen) ist die Sprache, die Sie benutzen, um Ihre Webseite zu gestalten. <em>CSS Grundlagen</em> führt Sie durch die Grundlagen dieser Stylesheet-Sprache. Wir beantworten damit solche Fragen wie: »Wie kann ich die Farbe meines Textes ändern? Wie kann ich diesen Inhalt genau an einer bestimmten Stelle anzeigen lassen? Wie kann ich meine Webseite mit Hintergrundbildern und -farben versehen?«</p> +</div> + +<h2 id="Was_ist_CSS_jetzt_wirklich">Was ist CSS jetzt wirklich?</h2> + +<p>Wie HTML ist CSS nicht wirklich eine Programmiersprache. Es ist auch keine Markup-Sprache, sondern eine Stylesheet-Sprache, die es erlaubt für Elemente auf der Seite das Aussehen festzulegen. Zum Beispiel benötigt man folgengen CSS-Code, um alle Absätze (<code><p></code>) auszuwählen und deren Inhalt rot einzufärben:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>Probieren Sie es aus: Kopieren Sie diese drei Zeilen CSS in eine neue Datei in einen Texteditor und speichern Sie die Datei unter dem Namen <code>style.css</code> im Verzeichnis <code>styles</code>.</p> + +<p>Aber wir müssen das CSS noch im HTML-Dokument verknüpfen, sonst würde die CSS-Datei von dem Browser nicht berücksichtigt. (Wenn Sie unserem Projekt nicht von Anfang an gefolgt sind, lesen Sie erst <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> und <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a>, um zu erfahren, was Sie davor tun müssen.)</p> + +<ol> + <li>Öffnen Sie die Datei <code>index.html</code> und fügen die folgende Zeile irgendwo in den Kopf (zwischen die <code><head></code>- und <code></head></code>-Tags) ein: + + <pre class="brush: html"><link href="styles/style.css" rel="stylesheet" type="text/css"></pre> + </li> + <li>Speichern Sie die Datei <code>index.html</code> und öffnen Sie diese in einem Browser. Es sollte wie in diesem Beispiel aussehen:</li> +</ol> + +<p><img alt="Das Mozilla-Logo und ein paar Absätze. Der Text in den Absätzen ist rot gefärbt durch CSS." src="https://mdn.mozillademos.org/files/15471/beginner-css1-de.jpg" style="border: 1px solid grey; display: block; height: 832px; margin: 0px auto; width: 711px;">Wenn der Absatz jetzt rot ist: Herzlichen Glückwunsch! Sie haben nun zum ersten Mal Ihre eigene CSS-Datei geschrieben und eingebunden!</p> + +<h3 id="Aufbau_einer_CSS-Regel">Aufbau einer CSS-Regel</h3> + +<p>Lassen Sie uns nun das CSS von oben etwas genauer anschauen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15467/css-example.png" style="display: block; height: 480px; margin: 0px auto; width: 850px;"></p> + +<p>Die ganze Struktur wird <strong>Regelsatz</strong> (oder oft nur »Regel«) genannt.</p> + +<p>Jetzt zu den Namen der einzelnen Teile:</p> + +<dl> + <dt>Selektor</dt> + <dd>Der HTML-Elementname steht direkt am Anfang der Regel. Er wählt die Elemente, die gestaltet werden sollen (in diesem Beispiel <code>p</code>) aus. Um ein anderes Element zu gestalten, muss man nur den Selektor ändern.</dd> + <dt>Deklaration</dt> + <dd>Eine einzelne Regel wie <code>color: red;</code> gibt an, welche <strong>Eigenschaft</strong> des Elements gestaltet werden soll.</dd> + <dt>Eigenschaft (englisch: property)</dt> + <dd>Art, auf die das ausgewählte HTML-Element gestaltet werden soll. (In diesem Fall ist <code>color</code> eine Eigenschaft des {{htmlelement("p")}} Elements.) In CSS wählen Sie aus, welche Eigenschaften Sie in der Regel setzen wollen.</dd> + <dt>Eigenschafts-Wert (englisch: property value)</dt> + <dd>Rechts neben der Eigenschaft, nach dem Doppelpunk, steht der <strong>Wert</strong> der Eigenschaft. Dieser gibt eine von vielen Möglichkeiten wieder, wie die Eigenschaft das Aussehen eines Elements verändern kann. (Es gibt viele andere Werte für <code>color</code> außer <code>red</code>).</dd> +</dl> + +<p>Beachten Sie die anderen wichtigen Teile der Syntax! Die Syntax ist sozusagen die Grammatik des Codes:</p> + +<ul> + <li>Hinter dem Selektor stehen die zugehörigen Regelsätze innerhalb geschwungener Klammern (<code>{}</code>).</li> + <li>Innerhalb einer Deklaration muss man einen Doppelpunkt (<code>:</code>) nutzen, um Eigenschaft und Wert zu trennen.</li> + <li>Am Ende jeder Deklaration muss ein Semikolon (<code>;</code>) gesetzt werden.</li> +</ul> + +<p>Um mehrere Eigenschaften eines HTML-Elements auf einmal zu verändern, trennt man die Deklarationen innerhalb eines Regelsatzes mit Semikolons, wie folgt:</p> + +<pre class="brush: css">p { + color: red; + width: 500px; + border: 1px solid black; +}</pre> + +<h3 id="Mehrere_Elemente_auswählen">Mehrere Elemente auswählen</h3> + +<p>Sie können auch mehrere Elemente auswählen, um einen einzigen Regelsatz auf diese alle anzuwenden. Schreiben Sie einfach mehrere Selektoren hintereinander, getrennt durch Kommas. So zum Beispiel:</p> + +<pre class="brush: css">p,li,h1 { + color: red; +}</pre> + +<h3 id="Verschiedene_Arten_von_Selektoren">Verschiedene Arten von Selektoren</h3> + +<p>Es gibt viele verschiedene Arten von Selektoren. Bisher haben wir nur <strong>Element-Selektoren</strong> genutzt, welche alle Elemente eines bestimmten Typs innerhalb eines HTML-Dokumentes auswählen. Aber wir können auch eine spezifischere Auswahl nutzen. Hier sind einige weitere Arten von Selektoren, welche häufig genutzt werden:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Selector name</th> + <th scope="col">Was wird ausgewählt?</th> + <th scope="col">Beispiel</th> + </tr> + </thead> + <tbody> + <tr> + <td>Element- Selektor (auch Tag- oder Typ-Selektor genannt)</td> + <td>Alle HTML-Elemente eines bestimmten Typs.</td> + <td> + <p><code>p</code><br> + Wählt alle <code><p>-Elemente aus.</code></p> + </td> + </tr> + <tr> + <td>ID-Selektor</td> + <td>Element mit der entsprechenden ID wird ausgewählt. (Eine ID kann immer nur einem einzigen Element innerhalb eines Dokuments zugeordnet werden)</td> + <td> + <p><code>#my-id</code><br> + Wählt <code><p id="my-id"></code> oder <code><a id="my-id"> aus.</code></p> + </td> + </tr> + <tr> + <td>Klassen-Selektor</td> + <td>Element(e) mit der entprechenden Klasse werden ausgewählt. (Klassen können mehreren Elementen innerhalb eines Dokuments zugeordnet werden)</td> + <td><code>.my-class</code><br> + Wählt <code><p class="my-class"></code> und <code><a class="my-class"> aus.</code></td> + </tr> + <tr> + <td>Attribut-Selektor</td> + <td>Element(e) mit entsprechendem Attribut werden ausgewählt.</td> + <td><code>img[src]</code><br> + Wählt <code><img src="myimage.png"></code> , aber nicht <code><img> aus.</code></td> + </tr> + <tr> + <td>Pseudoklassen-Selektoren</td> + <td>Element(e) eines bestimmten Typs, welche sich in einem bestimmten Zustand befinden (z.B.: Mauszeiger ist über dem Element)</td> + <td><code>a:hover</code><br> + Wählt <code><a> </code>nur dann aus, wenn der Mauszeiger darüber bewegt wird.</td> + </tr> + </tbody> +</table> + +<p>Es gibt viele weitere Selektoren. Sie können alle in folgender Liste finden: <a href="/de/docs/Web/Guide/CSS/Getting_started/Selectors">Selektoren</a>.</p> + +<h2 id="Schriftart_und_Text">Schriftart und Text</h2> + +<p>Jetzt, da wir uns einige CSS-Grundlagen angeschaut haben, lassen Sie uns damit anfangen, mehr Regelsätze und Eigenschaften zu unserer <code>style.css</code>-Datei hinzuzufügen. Zuerst ändern wir die Schrift, damit unser Text besser aussieht<code>.</code></p> + +<ol> + <li> In einem vorherigen Artikel haben Sie schon eine Schriftart von <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like#Schriftart">Google Fonts</a> ausgewählt, den zugehörigen Code sollten Sie schon irgendwo gespeichert haben. Fügen Sie das <code><link ... ></code> Element in den Kopf Ihrer index.html Datei ein (zwischen den <code><head></code> und <code></head></code> Tags). Das <code><link></code> Element sollte wie folgt aussehen: + + <pre class="brush: html"><link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'></pre> + </li> + <li>Löschen Sie die existierende Regel in Ihrer <code>style.css</code>-Datei. Es war ein guter Test, aber roter Text sieht doch nicht so schön aus.</li> + <li>Fügen Sie stattdessen die folgenden Zeilen in die CSS-Datei ein. Ersetzen Sie 'Platzhalter' mit der Schriftart, welche Sie auf Google Fonts ausgewählt haben (<code>font-family</code> bedeutet soviel wie "Schriftfamilie" und deutet auf die Schriftarten, welche Sie benutzen möchten). Diese Regel setzt eine globale Schriftart (<code>font-family</code>) und Schriftgröße(<code>font-size</code>) für die ganze Webseite, da im <code><html></code>-Element alle anderen Elemente enthalten sind. Die Eigenschaften <code>font-family</code> und <code>font-size</code> werden an die Elemente innerhalb eines Elements weiter vererbt: + <pre class="brush: css">html { + font-size: 10px; /* px bedeutet 'pixels': die Schriftgröße wird auf 10 Pixel gesetzt */ + font-family: Platzhalter; /* hier kommt der Name der ausgewählten Schriftfamilie hin */ +}</pre> + + <div class="note"> + <p><strong>Hinweis:</strong> In einem Kommentar wurde hinzugefügt, was "px" bedeutet. Alles in einem CSS-Dokument, was zwischen <code>/*</code> und <code>*/</code> steht, ist ein <strong>CSS-Kommentar</strong>, welchen der Browser ignoriert. Kommentare sind für Sie selbst gedacht, hier können Sie für sich hilfreiche Notizen machen.</p> + </div> + </li> + <li>Nun setzen wir die Schriftgröße für die textbeinhaltenden HTML-Elemente {{htmlelement("h1")}}, {{htmlelement("li")}} und {{htmlelement("p")}} fest. Wir zentrieren auch den Text von unseren Überschriften mit <code>text-align: center;</code> und ändern die Linienhöhe (<code>line-height</code>) und den Buchstabenabstand (<code>letter-spacing</code>), um den Text der <code>p</code> und <code>li</code> Elemente etwas lesbarer zu machen: + <pre class="brush: css">h1 { + font-size: 60px; + text-align: center; +} + +p, li { + font-size: 16px; + line-height: 2; + letter-spacing: 1px; +}</pre> + </li> +</ol> + +<p>Sie können die Schriftgröße über den Wert vor 'px' ändern, wie Sie möchten. Ihre Webseite sollte jetzt ungefähr so aussehen:</p> + +<p><img alt="Mozilla Logo und ein paar Absätze. Eine sans-serif Schrift wurde gesetzt, die Schriftgröße, Linienhöhe und Buchstabenabstand wurden angepasst und die Hauptüberschrift zentriert." src="https://mdn.mozillademos.org/files/15473/beginner-css2-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p> + +<h2 id="Boxen_überall_Boxen_-_das_CSS_Box-Modell">Boxen, überall Boxen - das CSS Box-Modell</h2> + +<p>Eine Sache, welche Sie bemerken werden, wenn Sie CSS-Code schreiben, ist, dass es sich oft um das Gestalten von Boxen dreht - Sie werden die Größe, die Farbe, die Position, usw. von Boxen bestimmen. Die meisten HTML-Elemente auf Ihrer Seite können als Boxen oder Schachteln betrachtet werden, welche übereinander sitzen.</p> + +<p><img alt="a big stack of boxes or crates sat on top of one another" src="https://mdn.mozillademos.org/files/9441/boxes.jpg" style="display: block; height: 463px; margin: 0px auto; width: 640px;"></p> + +<p>Es ist daher nicht überraschend, dass das CSS-Layout auf dem Box-Modell basiert. Jede Box, die einen Raum auf Ihrer Webseite einnimmt, hat folgende Eigenschaften:</p> + +<ul> + <li><code>padding</code>, der Innenabstand: das ist der Raum direkt um den Inhalt des Elements (z.B. direkt um einen Absatz <p> drumherum)</li> + <li><code>border</code>, der Rahmen: eine Linie, welche direkt außerhalb des <code>padding</code> sitzt</li> + <li><code>margin</code>, der Außenabstand: der Raum außerhalb des Rahmens</li> +</ul> + +<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="https://mdn.mozillademos.org/files/9443/box-model.png" style="display: block; height: 450px; margin: 0px auto; width: 574px;"></p> + +<p>Wir werden hier auch die folgenden Eigenschaften benutzen:</p> + +<ul> + <li><code>width</code>, die Breite eines Elements</li> + <li><code>background-color</code>, die Farbe hinter dem Inhalt und <code>padding</code> des Elements</li> + <li><code>color</code>, die Farbe des Inhaltes des Elements (meistens Text)</li> + <li><code>text-shadow</code>, gibt dem Text innerhalb des Elements einen Schatten</li> + <li><code>display</code>, Ändert die Darstellungsweise der Box (diese Eigenschaft werden wir uns später noch genauer anschauen)</li> +</ul> + +<p>Lassen Sie uns nun unserem Beispiel etwas mehr CSS-Code hinzufügen! Fügen Sie die folgenden neuen Regeln am Ende Ihrer CSS-Datei ein. Haben Sie keine Angst mit den Werten zu experimentieren.</p> + +<h3 id="Ändern_der_Hintergrundfarbe_für_die_ganzen_Seite">Ändern der Hintergrundfarbe für die ganzen Seite</h3> + +<pre class="brush: css">html { + background-color: #00539F; +}</pre> + +<p>Dieser Regelsatz ändert die Hintergrundfarbe auf der ganzen Seite. Ändern Sie die Hintergrundfarbe in die, welche Sie sich ausgesucht haben,<a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like#Hauptfarbe"> als Sie Ihre Webseite geplant haben.</a></p> + +<h3 id="Dem_body_Form_geben">Dem body Form geben</h3> + +<pre class="brush: css">body { + width: 600px; + margin: 0 auto; + background-color: #FF9500; + padding: 0 20px 20px 20px; + border: 5px solid black; +}</pre> + +<p>Jetzt widmen wir uns dem <body>-Element. Hier habe wir einige neue Deklarationen, lassen Sie uns diese genauer anschauen:</p> + +<ul> + <li><code>width: 600px;</code> — die Breite (engl.: width) des <code><body></code>-Elements wird auf 600 Pixel festgelegt.</li> + <li><code>margin: 0 auto;</code> — Wenn man bei den Eigenschaften <code>margin</code> oder <code>padding</code> zwei Werte setzt, dann steht der erste Wert für den Abstand nach oben <strong>und</strong> nach unten (welcher in diesem Fall <code>0</code> ist) und der zweite Wert steht für den Abstand links <strong>und</strong> rechts von dem Element (in diesem Fall setzen wir den Wert auf <code>auto</code>, wodurch der vorhandene Platz auf beiden Seiten des Elements gleichmäßig aufgeteilt wird). <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/margin#Values">Man kann auch nur einen, drei oder vier verschiedene Werte benutzen, wie dies das Element beeinflusst können Sie in der Dokumentation nachlesen.</a></li> + <li><code>background-color: #FF9500;</code> — dies setzt die Hintergrundfarbe des <body>-Elements. Hier wurde eine rötliche Farbe ausgewählt, aber Sie können gerne eine andere Farbe nehmen<code>.</code></li> + <li><code>padding: 0 20px 20px 20px;</code> — für den Innenabstand haben wir vier Werte gesetzt, um etwas Raum um unseren Inhalt zu schaffen. Oben setzen wir keinen Abstand, aber auf der linken und rechten Seite, sowie unten setzen wir jeweils 20 Pixel. Die Werte werden in folgender Reihenfolge gesetzt: oben, rechts, unten, links.</li> + <li><code>border: 5px solid black;</code> — dies setzt einen 5 Pixel starken, soliden, schwarzen Rahmen um unser Element. </li> +</ul> + +<h3 id="Positionierung_und_Design_der_Hauptüberschrift">Positionierung und Design der Hauptüberschrift</h3> + +<pre class="brush: css">h1 { + margin: 0; + padding: 20px 0; + color: #00539F; + text-shadow: 3px 3px 1px black; +}</pre> + +<p>Lassen Sie uns das {{htmlelement("h1")}}-Element stylen. Wenn Sie Ihre Webseite im Browser anschauen, werden Sie feststellen, das ein komischer Abstand oberhalb des <code><body></code>-Elements ist. Dies passiert, da <strong>Browser einige Eigenschaften automatisch stylen</strong>, auch wenn Sie selbst überhaupt kein CSS dafür geschrieben haben! Das klingt nach einem schlechten Verhalten seitens des Browsers, aber auch Webseiten, die gar keine Stylesheets haben, sollen lesbar bleiben. Um den automatischen Abstand beim <code><h1></code>-Element los zu werden haben wir das automatische Styling des Browsers überschrieben mit <code>margin: 0;</code> .</p> + +<p>Als nächstes haben wir den oberen und unteren inneren Abstand der Überschrift auf 20 Pixel gesetzt (<code>padding: 20px 0;</code>) und dem Text dieselbe Farbe gegeben wie dem Hintergrund des <code><html></code>-Elements.</p> + +<p>Eine interessante Eigenschaft ist <code>text-shadow</code>. Diese fügt dem Textinhalt eines Elements einen Schatten hinzu. Die vier Werte bedeuten:</p> + +<ul> + <li>Der erste Wert in Pixeln setzt den <strong>horizontalen Versatz</strong> des Schattens vom Text weg nach rechts - so weit fällt der Schatten: ein negativer Wert würde den Schatten nach links fallen lassen.</li> + <li>Der zweite Wert setzt den <strong>vertikalen Versatz</strong> des Schattens in Pixeln. Der Schatten fällt so weit nach unten, ein negativer Wert würde den Schatten nach oben fallen lassen.</li> + <li>Der dritte Wert setzt den Radius in Pixeln für den Bereich, in dem der Schatten verwischt ist. Ein größerer Wert hier bedeutet einen leichteren Schatteneffekt.</li> + <li>Der vierte Wert setzt die <strong>Grundfarbe</strong> des Schattens.</li> +</ul> + +<p>Auch hier können Sie mit den verschiedenen Werten experimentieren, um zu sehen was dabei heraus kommt.</p> + +<h3 id="Das_Bild_zentrieren">Das Bild zentrieren</h3> + +<pre class="brush: css">img { + display: block; + margin: 0 auto; +}</pre> + +<p>Zuletzt werden wir das Bild auf unserer Seite zentrieren. Wir können das wieder mit <code>margin: 0 auto;</code> erreichen, allerdings müssen wir noch etwas anderes tun, damit dies funktioniert. Das <code><body></code>-Element ist ein Block bzw. eine Box, weswegen es ein <code>margin</code> und <code>padding</code> hat. Das <code><img></code>-Element ist ein <strong>Inline-Element</strong>, es wird nicht als Box angezeigt und hat kein <code>margin</code> oder <code>padding</code>. Um das Bild in ein <strong>Block-Element</strong> umzuwandeln, geben wir ihm einfach die folgende Deklaration: <code>display: block;</code>.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn Sie <code>diplay: block;</code> jetzt noch nicht ganz verstehen, ist das nicht schlimm. Wenn Sie CSS mehr studieren, dann werden Sie auch den Unterschied zwischen Inline-Elementen und Block-Elementen verstehen. Mehr zu den Möglichen <code>display</code> Werten können Sie in unserer <a href="/de/docs/Web/CSS/display">Display Referenz</a> lesen.</p> +</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite aussehen, die so aussieht (hier können Sie sich <a href="http://mdn.github.io/beginner-html-site-styled/">unsere Version</a> ansehen) :</p> + +<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="https://mdn.mozillademos.org/files/15475/beginner-css3-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 711px;"></p> + +<p>Falls Ihr Resultat nicht so aussieht, dann gehen Sie den Artikel noch einmal durch und versuchen Sie mögliche Fehler in Ihrem Code zu finden. Wenn Sie wirklich nicht weiter wissen, dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">unseren Code auf Github</a> ansehen.</p> + +<p>Wir haben hier wirklich nur die Grundlagen von CSS gesehen. Um mehr CSS zu lernen gehen Sie zu unserem <a href="https://developer.mozilla.org/de/Learn/CSS">CSS Lernbereich</a>.</p> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div> 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 new file mode 100644 index 0000000000..2eaa20a9ea --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/dateien_nutzen/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{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")}}</div> + +<div class="summary"> +<p>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.</p> +</div> + +<h2 id="Wo_auf_Ihrem_Computer_soll_die_Webseite_liegen">Wo auf Ihrem Computer soll die Webseite liegen?</h2> + +<p>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.</p> + +<ol> + <li>Wählen Sie einen Ort, um Ihre Webprojekte abzuspeichern. Erstellen Sie dort einen Ordner der <em>»webprojekte«</em> heißt. In diesen Ordner können Sie in Zukunft all Ihre Webprojekte (Internetseiten, Scripte, Vorlagen…) speichern.</li> + <li>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<em> »erste-webseite«.</em></li> +</ol> + +<h2 id="Eine_Bemerkung_zu_Großschreibung_und_Leerzeichen">Eine Bemerkung zu Großschreibung und Leerzeichen</h2> + +<p>In diesem Artikel nutzen wir für Ordnernamen und Dateinamen nur Kleinbuchstaben und keine Leerzeichen. Das hat folgende Gründe:</p> + +<ol> + <li>Viele Computer, besonders Webserver, unterscheiden Groß- und Kleinschreibung. Wenn Sie eine Datei namens <code>MeinBild.jpg</code> abspeichern und dann darauf zugreifen möchten, funktoniert <code>meinbild.jpg</code> nicht. Für den Computer sind <code>MeinBild.jpg</code> und <code>meinbild.jpg</code> ganz unterschiedliche Dateien.</li> + <li>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: <code>Mein Bild</code>.jpg würde als eine Datei namens <code>Mein</code> und eine Datei namens <code>Bild.jpg</code> interpretiert. Server ersetzen manchmal Leerzeichen durch die Zeichenfolge <code>"%20"</code> (der Zeichencode für ein Leerzeichen in einer URI) – das kann die Verlinkungen kaputtmachen: <code>Mein Bild.jpg</code> wird nämlich zu <code>Mein%20Bild.jpg</code>.</li> +</ol> + +<p>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.</p> + +<h2 id="In_welcher_Struktur_sollten_Sie_Ihre_Dateien_ablegen">In welcher Struktur sollten Sie Ihre Dateien ablegen?</h2> + +<p>In dem Ordner Ihres Webseiten-Projektes (<a href="#websiteWo">siehe oben</a>) werden Sie meistens eine <code>index.html</code>-Datei haben und Ordner für Bilder, Stildefinitionen und Scripte. Erstellen Sie diese Sachen:</p> + +<ol> + <li><code><strong>index.html</strong></code>: Das ist die erste Datei, die Leute sehen, wenn sie Ihre Webseite besuchen. Per Konvention heißt diese Datei <code>index.html</code>. Öffnen Sie einen Texteditor und speichern eine neue Datei mit dem Namen <code>index.html</code> in Ihrem Projektordner (der mit dem Namen »<em>erste-website«</em>) ab.</li> + <li><code><strong>Bilder-Ordner</strong></code>: Dieser Ordner enthält die Bilder, die Sie auf Ihrer Webseite anzeigen wollen. Erstellen Sie einen Ordner mit dem Namen <code>bilder</code> in dem Projektordner (»<em>erste-website«</em>).</li> + <li><strong><code>Styles-Ordner</code></strong>: Dieser Ordner wird Dateien enthalten, die das Aussehen Ihrer Webseite definieren (Schriftart, Hintergrundfarbe, Layout…), sogenannte CSS-Dateien. Erstellen Sie einen Ordner namens <code>styles</code> in Ihrem Projektordner.</li> + <li><code><strong>Scripts-Ordner</strong></code>: 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 <code>scripts</code> in Ihrem Projektordner.</li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: 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, <strong>Ordner-Optionen</strong> wählt und <strong>Erweiterungen bei bekannten Dateitypen ausblenden</strong> abwählt und dann<strong> OK</strong> drückt.</p> +</div> + +<h2 id="Dateipfade">Dateipfade</h2> + +<p>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 <code>index.html</code>-Datei einfügen und werden damit das Bild, welches Sie im vorhergehenden Artikel (<a href="/de/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Wie soll Ihre Webseite aussehen?"</a>) ausgewählt haben, anzeigen.</p> + +<ol> + <li> + <p>Kopieren Sie Ihr Bild, welches Sie zuvor ausgewählt haben, in den Ordner <code>bilder</code>.</p> + </li> + <li> + <p>Öffnen Sie die Datei <code>index.html</code> 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.)</p> + + <pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Mein Testseite</title> + </head> + <body> + <img src="" alt="Mein Testbild"> + </body> +</html> </pre> + </li> + <li>Die Zeile <code><img src="" alt="Mein Testbild"></code> 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 <code>bilder</code>, welcher in dem selben Ordner wie <code>index.html</code> ist. Um in diesen Unterordner zu gelangen, müssen wir <code>bilder/DeinBildName</code> eingeben. Wenn das Bild z.B. <code>firefox-icon.png</code> genannt ist, müssen wir <code>bilder/firefox-icon.png</code> eintippen.</li> + <li>Fügen Sie Ihren Pfad jetzt in den HTML-Code zwischen die zwei Anführungszeichen bei <code>src=""</code> ein.</li> + <li>Speichern Sie Ihren HTML-Code und öffnen die Datei mit einem Web-Browser. Jetzt sollte die Webseite Ihr Bild anzeigen.</li> +</ol> + +<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p> + +<p>Ein paar Grundregeln für Dateipfade:</p> + +<ul> + <li>Um eine Zieldatei am selben Speicherort zu verlinken, können Sie einfach den Dateinamen eingeben. Beispiel: <code>mein-bild.jpg</code></li> + <li>Um eine Datei in einem Unterordner zu verlinken müssen Sie es so machen wie in dem Beispielprojekt oben. <code>Beispiel: bilder/mein-bild.jpg</code></li> + <li>Wenn Sie ein Bild in dem Ordner <strong>darüber</strong> verlinken wollen, müssen Sie zuerst zwei Punkte machen: <code>../mein-bild.jpg</code></li> + <li>Dies können Sie kombinieren, so viel Sie wollen: <code>../irgendeinordner/einandererordner/usw/mein-bild.jpg</code></li> +</ul> + +<p>Momentan ist das alles, was Sie wissen müssen.</p> + +<div class="note"> +<p><strong>Achtung:</strong> Das Windows-Dateisystem benutzt "backslashes" - also Schrägstriche in die andere Richtung. Z.B. <code>C:\windows</code>. Wenn Sie Ihre Webseite programmieren, sollten Sie immer die "normalen" Schrägstriche (/) verwenden, damit die Seite auf allen Systemen funktioniert.</p> +</div> + +<h2 id="Was_sollte_sonst_noch_getan_werden">Was sollte sonst noch getan werden?</h2> + +<p>Dies ist alles bis jetzt. Ihre Ordnerstruktur sollte ungefähr so aussehen:</p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p> + +<p>{{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")}}</p> diff --git a/files/de/learn/getting_started_with_the_web/html_basics/index.html b/files/de/learn/getting_started_with_the_web/html_basics/index.html new file mode 100644 index 0000000000..ca417d1b4d --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/html_basics/index.html @@ -0,0 +1,226 @@ +--- +title: HTML-Grundlagen +slug: Learn/Getting_started_with_the_web/HTML_basics +tags: + - Anfänger + - Grundlagen + - HTML + - Internet + - Lernen + - Webentwicklung + - Webseiten +translation_of: Learn/Getting_started_with_the_web/HTML_basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>HTML (Hypertext Markup Language) ist der Code, welcher benötigt wird, um den Webinhalt zu strukturieren und ihm eine Bedeutung und einen Zweck zu geben. Zum Beispiel könnte Ihr Inhalt Absätze und Grafiken, aber auch Bilder und Tabellen enthalten. Wie der Titel dieses Artikels verspricht, soll Ihnen hier ein grundsätzliches Verständnis vermittelt werden, wie HTML eingesetzt wird.</p> +</div> + +<h2 id="Was_ist_HTML">Was ist HTML?</h2> + +<p>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:</p> + +<pre class="notranslate">Meine Katze ist sehr frech.</pre> + +<p>Wenn wir möchten, dass der Satz in einem eigenen Absatz steht, können wir mit {{htmlelement("p")}} spezifizieren, dass es sich um einen Absatz handelt: </p> + +<pre class="brush: html notranslate"><p>Meine Katze ist sehr frech.</p></pre> + +<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3> + +<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>(Content=Inhalt, Element=HTML-Element)</p> + +<p>Die Hauptteile unseres Elements sind:</p> + +<ol> + <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> 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.</li> + <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li> + <li><strong>Das schließende Tag:</strong> 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.</li> + <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li> +</ol> + +<p>Elemente können auch Attribute enthalten, das sieht dann so aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Diese Attribute enthalten Zusatzinformationen über das Element, welche nicht als eigentlicher Inhalt angezeigt werden. In diesem Fall erlaubt dieses Attribut, ihm einen Identifizierungsnamen zu geben, welchen man später dazu verwenden kann, um dieses Element mit Informationen wie z. B. Schriftart und -farbe zu versehen.</p> + +<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p> + +<p>Ein Attribut sollte immer haben:</p> + +<ol> + <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li> + <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li> + <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"editor-note"</code>)</li> +</ol> + +<h3 id="Verschachtelte_Elemente">Verschachtelte Elemente</h3> + +<p>Sie können einzelne Elemente ineinander verschachteln. Wenn wir also besonders betonen wollen, dass unsere Katze <strong>sehr</strong> frech ist, können wir dieses einzelne Wort in einem {{htmlelement("strong")}} Element verpacken.</p> + +<pre class="brush: html notranslate"><p>Meine Katze ist <strong>sehr</strong> frech.</p></pre> + +<p>Folgendes Beispiel ist nicht richtig, da die Elemente nicht ineinander verschachtelt sind, sondern ineinander verkettet. Das letzte Element, welches geöffnet wird, muss auch zuerst geschlossen werden.</p> + +<pre class="example-bad brush: html notranslate"><p>Meine Katze ist <strong>sehr frech.</p></strong></pre> + +<p>Dies funktioniert wie mit Schachteln: Wenn die kleine Schachtel in der Großen ist, kann man auch nicht zuerst den großen Deckel schließen, bevor man den kleinen Deckel draufsetzt. Die einzelnen Elemente dürfen sich also nicht überlappen, sie dürfen nur ineinander stehen.</p> + +<h3 id="Leere_Elemente">Leere Elemente</h3> + +<p>Gewisse Elemente haben keinen Inhalt, diese werden <strong>leere Elemente</strong> genannt. Beispielsweise das {{htmlelement("img")}} Element, welches wir schon in unserer HTML-Datei haben:</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Mein Testbild"></pre> + +<p>Dies beinhaltet zwei Attribute, aber es gibt kein schließendes <code></img></code> Tag und keinen Inhalt in dem Element. Das <code><img></code> Tag braucht keinen Inhalt um einen Effekt zu haben. Es bindet ein Bild an der entsprechenden Stelle in der HTML Seite ein.</p> + +<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3> + +<p>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 eine HTML Seite aufzubauen. Schauen wir den Code wieder an, welchen wir vorher in die <code>index.html</code>-Datei eingefügt haben (welche wir im Artikel "<a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a>" erstellt haben):</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Meine Testseite</title> + </head> + <body> + <img src="images/firefox-icon.png" alt="Mein Testbild"> + </body> +</html></pre> + +<p>Hier haben wir:</p> + +<ul> + <li><code><!DOCTYPE html></code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li> + <li><code><html></html></code> — das <code><html></code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li> + <li><code><head></head></code> — das <code><head></code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li> + <li><code><body></body></code> — das <code><body></code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li> + <li><code><meta charset="utf-8"></code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li> + <li><code><title></title></code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li> +</ul> + +<h2 id="Bilder">Bilder</h2> + +<p>Schauen wir jetzt unser Bild-Element nochmals an:</p> + +<pre class="brush: html notranslate"><img src="images/firefox-icon.png" alt="Mein Testbild"></pre> + +<p>Wie wir vorher gesagt haben, ist ein Bild an der Stelle unserer Seite eingebettet, wo es erscheint. Es tut dies mit dem <code>{{htmlattrdef("src")}}</code> (src ist Abkürzung für engl.: "source" = deutsch: "Quelle") Attribut, welches den Pfad unseres Bildes beinhaltet.</p> + +<p>Aber wir haben auch einen <code>{{htmlattrdef("alt")}}</code> (alternative) Befehl, welcher einen Text anzeigt, falls das Bild nicht angezeitg werden kann. Dies ist nützlich für:</p> + +<ol> + <li>Sehbehinderte. Diese haben häufig Programme, welche ihnen den alternativen Text vorlesen.</li> + <li>Wenn es einen Fehler im Code gibt, was bedeutet, dass das Bild nicht angezeigt werden kann. Verändern Sie beispielsweise den Code bei <code>{{htmlattrdef("src")}}</code> und speichern ihn ab. Öffnen Sie das Dokument dann mit dem Browser. Jetzt sollte statt dem Bild folgende Meldung angezeigt werden:</li> +</ol> + +<p><img alt="" src="Ein Kleiner Test"></p> + +<p>Dieser alternative Satz sollte dem Leser eine Informationen geben, damit er sich vorstellen kann, was auf dem Bild angezeigt ist. Dieser Beispielsatz ist also nicht so gut. Viel besser wäre die Beschreibung "Das Firefox-Logo: Ein brennender Fuchs, welcher die Erde umkreist."</p> + +<p><strong>Schreiben Sie jetzt einen besseren Alternativtext für Ihr Bild.</strong></p> + +<div class="note"> +<p><strong>Hinweis</strong>: Finden Sie mehr über Zugänglichkeit unter <a href="/de/docs/Web/Accessibility">MDN's Accessibility landing page</a> heraus.</p> +</div> + +<h2 id="Textdarstellung">Textdarstellung</h2> + +<p>Diese Lektion enthält ein paar HTML Grundlagen, welche man benötigt, um Text darzustellen.</p> + +<h3 id="Überschriften">Überschriften</h3> + +<p>Mit Überschriftelementen können Sie bestimmte Teile des Inhaltes als Überschrift deklarieren. Wie ein Buch einen Hauptitel und Kapitelüberschriften haben kann, können HTML-Dokumente eine Hauptüberschrift" und weitere Überschriften haben.</p> + +<p>HTML besitzt 6 Überschrifttypen, wobei meist nur 3-4 gebraucht werden: {{htmlelement("h1")}}–{{htmlelement("h6")}}</p> + +<pre class="brush: html notranslate"><h1>Meine Hauptüberschrift</h1> +<h2>Meine Top-Level Unterüberschrift</h2> +<h3>Meine Unterüberschrift</h3> +<h4>Meine weitere Unterüberschrift</h4></pre> + +<p>Probieren Sie nun einen geeigneten Titel in Ihre HTML-Seite einzufügen, direkt über dem {{htmlelement("img")}} Element.</p> + +<h3 id="Absätze">Absätze</h3> + +<p>Wie oben erklärt benutzt man {{htmlelement("p")}}, Elemente um Absätze zu erstellen. Sie werden diese oft benutzen, um Texte zu strukturieren.</p> + +<pre class="brush: html notranslate"><p>Dies ist ein Absatz (p ist Abkürzung für engl.:"Paragraph")</p></pre> + +<p><strong>Ergänzen Sie Ihren Beispieltext (Sie sollten sich den Textinhalt beim Planen der Webseite überlegt haben: <a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Wie sollte Ihre Website aussehen?</em></a>) in einem oder mehreren Absätzen direkt unter Ihrem </strong> {{HTMLElement("img")}} <strong> (Bildelement).</strong></p> + +<h3 id="Listen">Listen</h3> + +<p>Viele Webseiten enthalten Listen , deshalb hält HTML dafür Elemente bereit. Die Kennzeichnung von Listen besteht immer aus zwei Elementen. Man unterscheidet geordnete und ungeordnete Listen.</p> + +<ol> + <li><strong>Ungeordnete Listen </strong>sind Listen, bei denen die Reihenfolge der Gegenstände keine Rolle spielt, wie eine Einkaufsliste. Diese werden eingehüllt von einem {{htmlelement("ul")}} Element.</li> + <li><strong>Geordnete Listen </strong>werden verwendet, wenn die Reihenfolge der Bestandteile wichtig ist, wie bei einem Rezept. Diese werden eingehüllt von einem {{htmlelement("ol")}} Element.</li> +</ol> + +<p>Jeder Gegenstand der Liste wird einzeln in ein {{htmlelement("li")}} Listen-Element gepackt.</p> + +<p>Wenn wir zum Beispiel die einzelnen Teile dieses Absatzes in eine geeignete Liste verwandeln wollen:</p> + +<pre class="brush: html notranslate"><p>Hier bei Mozilla sind wir eine globale Gemeinschaft aus Entwicklern, Vorausdenkern, Erschaffern, welche zusammen daran arbeiten...</p></pre> + +<p>Könnten wir das so machen:</p> + +<pre class="brush: html notranslate"><p>Hier bei Mozilla sind wir eine globale Gemeinschaft aus</p> + + +<ul> + <li>Entwicklern</li> + <li>Vorausdenkern</li> + <li>Erschaffern</li> +</ul> + +<p>welche zusammen daran arbeiten ... </p></pre> + +<p><strong>Probieren Sie eine geordnete oder ungeordnete Liste in Ihre Beispielseite einzufügen.</strong></p> + +<h2 id="Links">Links</h2> + +<p>Links sind sehr wichtig — sie sind, was das Internet EIN NETZ macht. Um einen Link zu implementieren, müssen wir ein einfaches Element — {{htmlelement("a")}} — verwenden. Das <em>a</em> ist die Kurzform für "Anker" (engl. "anchor"). Um einen Text innerhalb des Absatzes in einen Link zu verwandeln, führen Sie folgenden Schritte durch:</p> + +<ol> + <li>Suchen Sie einen Text aus. Wir benutzen in unserem Beispiel "Mozilla Manifesto".</li> + <li>Betten Sie den Text in ein <code><a></code>-Element ein: + <pre class="brush: html notranslate"><a>Mozilla Manifesto</a></pre> + </li> + <li>Geben Sie dem <code><a></code>-Element ein <code>href</code>-Attribut: + <pre class="brush: html notranslate"><a href="">Mozilla Manifesto</a></pre> + </li> + <li>Füllen Sie für den Wert des Attributs die Internetadresse ein, auf die Sie verlinken wollen: + <pre class="brush: html notranslate"><a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a></pre> + </li> +</ol> + +<p>Es kann sein, dass Sie komische Ergebnisse bekommen, wenn Sie <code>https://</code> oder <code>http://</code> , genannt <em>Protokoll</em>, vergessen. Überprüfen Sie deshalb immer nachdem Sie den Link gesetzt haben, ob er wie gewünscht funktioniert.</p> + +<div class="note"> +<p><code>{{htmlattrdef("href")}}</code> mag sich etwas komisch für einen Attributnamen anhören. Wenn Sie Probleme haben sich an den Namen zu erinnern, merken Sie sich, dass es die Kurzform von <em><strong>H</strong>ypertext <strong>Ref</strong>erenz (engl. <strong>h</strong>ypertext <strong>ref</strong>erence</em>) ist.</p> +</div> + +<p><strong>Fügen Sie jetzt einen Link Ihrer Seite hinzu, falls Sie es noch nicht getan haben.</strong></p> + +<h2 id="Ergebnis">Ergebnis</h2> + +<p>Wenn Sie allen Anweisungen in diesem Artikel gefolgt sind, sollten Sie als Ergebnis eine Seite erhalten, die ähnlich wie diese aussieht (Sie können unsere Version davon auch <a href="http://mdn.github.io/beginner-html-site/">hier anschauen</a>):<br> + <br> + <img alt="Ein Screenshot einer Webseite, welche das Firefox-Logo enthält, Absätze und eine Liste" src="https://mdn.mozillademos.org/files/15469/beginner-html-site-de.jpg" style="border: 1px solid grey; display: block; height: 838px; margin: 0px auto; width: 716px;"></p> + +<p>Wenn Sie nicht dasselbe Ergebnis haben und nicht wissen, wo das Problem liegt, können Sie Ihren Code mit dem <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">fertigen Code</a> auf Github vergleichen.</p> + +<p>Hier haben wir nur an der Oberfläche von HTML gekratzt. Um mehr über HTML zu lernen, gehen Sie zu der <a href="/de/Learn/HTML">HTML-Lernseite</a>.</p> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div> diff --git a/files/de/learn/getting_started_with_the_web/index.html b/files/de/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..7989c4c59a --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/index.html @@ -0,0 +1,66 @@ +--- +title: Lerne das Internet kennen +slug: Learn/Getting_started_with_the_web +tags: + - Anfänger + - CSS + - Gestaltung + - HTML + - Index + - Leitfaden + - Theorie + - Veröffentlichung +translation_of: Learn/Getting_started_with_the_web +--- +<p>{{LearnSidebar}}</p> + +<p>{{NextMenu("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web")}}</p> + +<p><em>Lerne das Internet kennen </em>ist eine <u>kurze</u> Serie von Artikeln, die in angewandte Webentwicklung einführt. Sie werden die Werkzeuge erlernen, die Sie brauchen, um eine einfache Webseite zu erstellen und eigenen Code zu veröffentlichen.</p> + +<h2 id="Die_Geschichte_Ihrer_ersten_Webseite">Die Geschichte Ihrer ersten Webseite</h2> + +<p>Es ist viel Arbeit, eine professionelle Webseite zu gestalten. Wenn Sie mit der Webentwicklung erst anfangen, ermutigen wie Sie klein zu beginnen. Sie werden nicht sofort das nächste Facebook erstellen, aber es ist nicht schwer eine eigene, einfache Webseite online zu stellen, also beginnen wir damit.</p> + +<p>Wenn Sie sich durch diese Artikelserie der Reihe nach durcharbeiten, können Sie ohne Vorwissen Ihre erste eigene Webseite online erstellen. Lassen Sie uns anfangen!</p> + +<h3 id="Nötige_Software_installieren"><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a></h3> + +<p>Es gibt eine große Auswahl an Werkzeugen für das Erstellen von Webseiten. Wenn Sie gerade erst beginnen, könnten Sie von der Menge an Code-Editoren, Frameworks und Testwerkzeugen erschlagen sein. In unserem Artikel <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Nötige Software installieren</a> zeigen wir Ihnen Schritt für Schritt, wie Sie diese Software installieren.</p> + +<h3 id="Wie_wird_Ihre_erste_Webseite_aussehen"><a href="/de/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Wie wird Ihre erste Webseite aussehen?</a></h3> + +<p>Bevor Sie mit dem Schreiben von Code für die Webseite beginnen, planen Sie Ihre Webseite. Welche Informationen möchten Sie zeigen? Welche Schriftarten und Farben möchten Sie nutzen? <a href="/de/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">Wie wird Ihre erste Webseite aussehen? </a>Wir zeigen Ihnen eine einfache Methode, um Inhalt und Design Ihrer Seite zu planen.</p> + +<h3 id="Dateien_nutzen"><a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a></h3> + +<p>Eine Website besteht aus vielen Dateien: Textinhalt, Code, Stylesheets, Medien und so weiter. Wenn Sie eine Webseite erstellen, müssen Sie die Dateien in eine sinnvolle Struktur bringen und sicherstellen, dass diese voneinander "wissen". <a href="/de/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt, wie Sie von Anfang an eine sinnvolle Dateistruktur erstellen.</p> + +<h3 id="HTML-Grundlagen"><a href="/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen</a></h3> + +<p>Hypertext Markup Language (HTML) ist der Code, den Sie nutzen werden, um eine Webseite zu strukturieren und ihr Bedeutung und einen Zweck zu geben. Zum Beispiel: Ist mein Text ein Listenpunkt oder ein Absatz? Füge ich Bilder auf meine Webseite ein? Stelle ich Daten in Form einer Tabelle übersichtlich dar? Die <a href="/de/Learn/Getting_started_with_the_web/HTML_basics">HTML-Grundlagen </a>geben Ihnen<a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics"> </a>genug Informationen, um sich mit HTML vertraut zu machen.</p> + +<h3 id="CSS-Grundlagen"><a href="/de/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a></h3> + +<p>Cascading Stylesheets (CSS) ist der Code, mit welchem Sie Stil und Aussehen Ihrer Seite bestimmen: Soll der Text lieber rot oder schwarz sein? Wo soll dieser Abschnitt auf dem Bildschirm erscheinen? Welche Bilder und Farben sollen im Hintergrund benutzt werden? <a href="/de/Learn/Getting_started_with_the_web/CSS_basics">CSS-Grundlagen</a> zeigt Ihnen, wie Sie eine Webseite visuell gestalten können.</p> + +<h3 id="JavaScript-Grundlagen"><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis">JavaScript-Grundlagen</a></h3> + +<p>JavaScript ist die Programmiersprache, mit welcher Sie Webinhalte interaktiv machen können. Sie bestimmen damit zum Beispiel Aktionen für einen Button, berechnen Werte oder verarbeiten Eingaben aus Formularen, dynamisieren die Gestaltung, lenken Animationen und vieles mehr. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis">JavaScript-Grundlagen</a> vermittelt Ihnen erste Ideen, was mit dieser fantastischen Programmiersprache möglich ist und wie Sie anfangen können, damit zu programmieren.</p> + +<h3 id="Ihre_Webseite_veröffentlichen"><a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Ihre Webseite veröffentlichen</a></h3> + +<p>Wenn Sie Ihren Code geschrieben haben und die Dateien Ihrer neuen Webseite organisiert haben, dann können Sie Ihre Webseite online stellen, sodass andere Menschen sie finden können. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Ihre Webseite veröffentlichen </a>zeigt, wie Sie diese im Internet zugänglich machen.</p> + +<h3 id="Wie_das_Web_funktioniert"><a href="/en-US/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Web funktioniert </a></h3> + +<p>Wenn Sie auf Ihre Lieblingswebseite zugreifen, passieren eine Menge komplexer Dinge, ohne dass Sie etwas davon mitbekommen. <a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/Wie_das_Internet_funktioniert">Wie das Web funktioniert</a> gibt eine Übersicht über die Vorgänge, die im Hintergrund einer Webseite ablaufen.</p> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a> (das Web entzaubert): Eine großartige Reihe von Videos, die die Web-Grundlagen erklären und sich an absolute Anfänger in der Webentwicklung richten. Erstellt von <a href="https://twitter.com/JeremiePat">Jérémie Patonnier</a>.</li> + <li>Das Web und Web Standards: Dieser Artikel liefert einige nützliche Hintergründe über das Web - wie es entstanden ist, was die wichtigsten Technologien im Web sind, wie sie zusammenarbeiten, warum "Web Designer" ein großartiger Beruf ist und welche Arten der "besten Praxis" Sie in diesem Kurs lernen.</li> +</ul> + +<p>{{Next("Learn/Getting_started_with_the_web/Installing_basic_software")}}</p> diff --git a/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html new file mode 100644 index 0000000000..3800d481c2 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/installing_basic_software/index.html @@ -0,0 +1,61 @@ +--- +title: Notwendige Software installieren +slug: Learn/Getting_started_with_the_web/Installing_basic_software +tags: + - Anfänger + - Beginner + - Browser + - Einrichtung + - Erste Schritte + - Grundlagen + - Lernen + - Setup + - Webentwicklung + - editor +translation_of: Learn/Getting_started_with_the_web/Installing_basic_software +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>In <em>Notwendige Software installieren</em>, zeigen wir Ihnen, welche Werkzeuge Sie für einfache Aufgaben in der Webentwicklung brauchen und wie Sie diese korrekt installieren.</p> +</div> + +<h2 id="Welche_Werkzeuge_nutzen_professionelle_Entwickler">Welche Werkzeuge nutzen professionelle Entwickler?</h2> + +<ul> + <li><strong>Einen eigenen Computer</strong>. Vielleicht scheint das offensichtlich, aber manch einer liest diesen Artikel möglicherweise auf dem Smartphone oder auf einem Computer in der Bibliothek. Für ernsthafte Webentwicklung ist es sinnvoll, in einen eigenen Computer zu investieren.</li> + <li><strong>Ein Texteditor</strong>, um Code zu schreiben. Das kann ein freier Editor sein (z.B. <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++</a>, <a href="https://wiki.gnome.org/Apps/Gedit" rel="noreferrer">gedit</a>, <a href="http://brackets.io/" rel="noreferrer">Brackets</a>, <a href="/de/docs/" rel="noreferrer">Atom</a> oder <a href="https://code.visualstudio.com/" rel="noreferrer">Visual Studio Code</a>), ein kommerzieller Editor (<a href="http://www.sublimetext.com/" rel="noreferrer">Sublime Text</a> oder <a href="https://panic.com/coda/" rel="noreferrer">Coda</a>) oder ein grafischer/hybrider Editor (<a href="http://www.adobe.com/uk/products/dreamweaver.html" rel="noreferrer">Dreamweaver</a> oder <a href="https://www.jetbrains.com/webstorm/" rel="noreferrer">WebStorm</a>).</li> + <li><strong>Web Browser</strong>, um den Code auszuprobieren. Die meistgenutzten Browser sind momentan <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> und <a href="https://www.microsoft.com/en-us/windows/microsoft-edge" rel="noreferrer">Microsoft Edge</a>. Sie sollten auch testen, wie Ihre Seite auf mobilen Geräten aussieht und ob sie auf älteren Browsern funktioniert, die Ihre Zielgruppe vielleicht noch ausgiebig nutzt (wie z.B. IE 7-10)</li> + <li><strong>Ein Bildbearbeitungsprogramm</strong> wie <a href="http://www.gimp.org/" rel="noreferrer">The Gimp</a>, <a href="http://pinta-project.com/" rel="noreferrer">Pinta</a>, <a href="http://www.getpaint.net/" rel="noreferrer">Paint.NET</a> oder <a href="http://www.adobe.com/uk/products/photoshop.html" rel="noreferrer">Photoshop</a>, um Bilder und Grafiken für Ihre Webiste zu erstellen.</li> + <li><strong>Ein Versionierungssystem</strong>, um im Team an einem Projekt zu arbeiten, Code und Inhalte zu teilen und um Editierkonflikte zu vermeiden. Momentan ist <a href="http://git-scm.com/" rel="noreferrer">Git</a> das populärste Versionierungssystem und der <a href="https://github.com/" rel="noreferrer">GitHub</a> Code Hosting Service, welcher auf <a href="http://git-scm.com/" rel="noreferrer">Git</a> basiert, ist ebenso populär.</li> + <li><strong>Ein FTP-Programm</strong>, um Websites auf einen Server zu laden, sodass andere darauf zugreifen können. Es gibt etliche solcher Programme wie <a href="https://cyberduck.io/" rel="noreferrer">Cyberduck</a>, <a href="https://addons.mozilla.org/en-US/firefox/addon/fireftp/" rel="noreferrer">FireFTP</a> und <a href="https://filezilla-project.org/" rel="noreferrer">FileZilla</a>.</li> + <li><strong>Ein Automatisierungssystem</strong>, wie <a href="http://gruntjs.com/" rel="noreferrer">Grunt</a> oder <a href="http://gulpjs.com/" rel="noreferrer">Gulp</a>, um wiederkehrende Aufgaben zu automatisieren, wie z.B. die Komprimierung von Code oder das Testen.</li> + <li>Vorlagen, Bibliotheken und Frameworks, um oft benötigte Funktionen bereitzustellen</li> + <li>Darüber hinaus weitere Anwendungen!</li> +</ul> + +<h2 id="Welche_Werkzeuge_brauche_ich_jetzt_wirklich">Welche Werkzeuge brauche ich jetzt wirklich?</h2> + +<p>Die Liste an möglichen Werkzeugen wirkt einschüchternd, aber glücklicherweise können Sie mit der Webentwicklung anfangen, ohne die meisten dieser Werkzeuge kennen zu müssen. In diesem Artikel werden wir nur eine grundlegendste Ausstattung installieren: Einen Texteditor und einige moderne Webbrowser.</p> + +<h3 id="Einen_Texteditor_installieren">Einen Texteditor installieren</h3> + +<p>Sie haben vermutlich schon einen Texteditor auf Ihrem Computer. Windows hat <a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="noreferrer">Notepad</a>, Mac OS X kommt mit <a href="http://en.wikipedia.org/wiki/TextEdit" rel="noreferrer">TextEdit</a>. Linux-Distributionen haben verschiedene Editoren; Ubuntu hat z.B. <a href="http://en.wikipedia.org/wiki/Gedit" rel="noreferrer">gedit</a> vorinstalliert.</p> + +<p>Für die Webentwicklung gibt es bessere Editoren als Notepad oder TextEdit. Auf Windows ist <a href="http://notepad-plus-plus.org/" rel="noreferrer">Notepad++ </a>sehr beliebt. Unter allen größeren Betriebssystemen laufen <a href="http://brackets.io/" rel="noreferrer">Brackets</a> und <a href="https://atom.io/" rel="noreferrer">Atom</a>. Diese Editoren sind frei verfügbar und helfen Ihnen beim Schreiben von Code besser als die Standard-Texteditoren.</p> + +<h3 id="Installieren_von_modernen_Browsern">Installieren von modernen Browsern</h3> + +<p>Zum Testen von Codes sollten Sie einen oder besser mehrere moderne Browser installieren.</p> + +<ul> + <li>Linux: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, Chromium (via Package-Manager), <a href="http://www.opera.com/" rel="noreferrer">Opera</a>.</li> + <li>Windows: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="http://windows.microsoft.com/en-us/internet-explorer/download-ie" rel="noreferrer">Internet Explorer</a> (wenn Sie Windows 8 haben, können Sie IE 10 oder höher installieren; wenn nicht, installieren Sie einen anderen Browser)</li> + <li>Mac: <a href="https://www.mozilla.org/en-US/firefox/new/" rel="noreferrer">Firefox</a>, <a href="https://www.google.com/chrome/browser/" rel="noreferrer">Chrome</a>, <a href="http://www.opera.com/" rel="noreferrer">Opera</a>, <a href="https://www.apple.com/safari/" rel="noreferrer">Safari</a> (Safari ist bei iOS und OS X der mitgelieferte Standard-Browser)</li> +</ul> + +<p>Bevor Sie weitermachen, sollten Sie mindestens zwei dieser Browser installiert haben, damit Sie Ihren Code testen können.</p> + +<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div> 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 new file mode 100644 index 0000000000..65a31710d3 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/javascript_basis/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>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.</p> +</div> + +<h2 id="Was_ist_JavaScript_wirklich">Was ist JavaScript wirklich?</h2> + +<p>{{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.</p> + +<p>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!</p> + +<p>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:</p> + +<ul> + <li>Programmierschnittstellen ({{Glossary("API","APIs")}}), die in Browsern implementiert wurden, um diese um JS-Funktionen zu erweitern, z.B. das dynamische Erstellen von HTML oder das Einstellen eines CSS-Styles, Abfangen und Manipulieren von Videostreams, Erzeugen von 3D-Grafiken/Audio-Samples und vieles mehr...</li> + <li>Drittanbieter-APIs, die es Entwicklern ermöglichen, Funktionen von anderen Seiten in eigene Seiten einzubinden, z.B. von Twitter oder Facebook.</li> + <li>Drittanbieter-Frameworks und Bibliotheken, die man zu HTML hinzufügen kann, die es ermöglichen, Webseiten und Apps schnell zu erzeugen.</li> +</ul> + +<p>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 <a href="/de/docs/Learn/JavaScript">JavaScript Lernbereich</a>.</p> + +<p>Hier werden wir einige Grundlagen von JavaScript zeigen und Sie werden mit einigen Browser APIs experimentieren können. Viel Spaß!</p> + +<h2 id="Ein_Hallo_Welt!_Beispiel">Ein "Hallo Welt!" Beispiel</h2> + +<p>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.</p> + +<p>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 (<a href="https://de.wikipedia.org/wiki/Hallo-Welt-Programm">der Standard in elementaren Programmierbeispielen</a>).</p> + +<div class="warning"> +<p><strong>WICHTIG</strong>: Wenn Sie dem vorhergehenden Kurs nicht bis hierher gefolgt sind, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">laden Sie dieses Codebeispiel herunter</a> und benutzen es als Einstieg.</p> +</div> + +<ol> + <li>Zuerst gehen Sie zu Ihrer Testseite und erstellen eine neue Datei mit dem Namen <code>main.js</code>. Speichern Sie diese Datei in Ihrem skripts-Ordner.</li> + <li>Dann gehen Sie zur <code>index.html</code> Datei und fügen das folgende Element in einer neuen Zeile vor dem schließenden <code></body>-</code>Tag ein: + <pre class="brush: html"><script src="scripts/main.js"></script></pre> + </li> + <li>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).</li> + <li>Fügen Sie nun den folgenden Code in die <code>main.js-</code>Datei ein: + <pre class="brush: js">var myHeading = document.querySelector('h1'); +myHeading.textContent = 'Hallo Welt!';</pre> + </li> + <li>Gehen Sie sicher, dass die Javascript und HTML-Dateien gespeichert sind, und laden <code>index.html</code> in einen Browser. Die Webseite sollte wie folgt aussehen:<img alt="" src="https://mdn.mozillademos.org/files/15479/beginner-js1-de.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></li> +</ol> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Hinweis</strong></span>: 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.</p> +</div> + +<h3 id="Was_ist_passiert">Was ist passiert?</h3> + +<p>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 <code>myHeading</code> 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.</p> + +<p>Anschließend setzen wir den Wert der Eigenschaft {{domxref("Node.textContent", "textContent")}} der Variablen <code>myHeading</code> (die den Inhalt des Headings repräsentiert) auf "Hallo Welt!". </p> + +<div class="note"> +<p><strong>Hinweis: </strong>Beide Funktionen die Sie genutzt haben<strong> </strong>sind Teile<strong> </strong>des <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">Document Object Model (DOM) API</a></p> +</div> + +<h2 id="Programmier-Crash-Kurs">Programmier-Crash-Kurs</h2> + +<p>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.</p> + +<div class="warning"> +<p><strong>Wichtig</strong>: 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 <a href="/en-US/Learn/Discover_browser_developer_tools">Entdecke Browser Entwickler-Werkzeuge</a>.</p> +</div> + +<h3 id="Variablen">Variablen</h3> + +<p>{{Glossary("Variable", "Variables")}} sind Container, in denen Werte gespeichert werden können. Zunächst wird eine Variable mit dem Schlüsselwort <code>var </code>deklariert, gefolgt von irgendeinem Namen, unter dem diese Variable adressiert werden soll:</p> + +<pre class="brush: js">var myVariable;</pre> + +<div class="note"> +<p><strong>Anmerkung</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: Sie können eine Variable fast beliebig benennen, allerdings gibt es einige Restriktionen zu beachten (siehe <a href="http://www.codelifter.com/main/tips/tip_020.shtml">diesen Artikel über die Regeln von Benennung von Variablen</a>.) Wenn Sie unsicher sind, können Sie <a href="https://mothereff.in/js-variables">den Variablennamen prüfen</a>, um die Gültigkeit zu prüfen.</p> +</div> + +<div class="note"> +<p><strong>Anmerkung</strong>: JavaScript beachtet Groß-/Kleinschrift — <code>myVariable</code> ist unterschiedlich zur Variablen <code>myvariable</code>. Falls Sie in Ihrem Programmcode Probleme bekommen sollten, prüfen Sie zuerst die Groß-/Kleinschreibung! </p> +</div> + +<p>Nachdem eine Variable deklariert wurde, können Sie ihr einen Wert geben:</p> + +<pre class="brush: js">myVariable = 'Bob';</pre> + +<p>Beide Schritte (Variable deklarieren und ihr einen Wert zuweisen) können in einem Schritt zusammengefasst werden: </p> + +<pre class="brush: js">var myVariable = 'Bob';</pre> + +<p>Sie können den Wert der Variablen abrufen, indem der Variablenname aufgerufen wird: </p> + +<pre class="brush: js">myVariable;</pre> + +<p>Nachdem der Variablen ein Wert gegeben wurde, kann dieser später geändert werden:</p> + +<pre>var myVariable = 'Bob'; +myVariable = 'Steve';</pre> + +<p>Beachten Sie, dass Variablen unterschiedliche <a href="/en-US/docs/Web/JavaScript/Data_structures">Datentypen</a> aufweisen:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Variable</th> + <th scope="col">Erklärung</th> + <th scope="col">Beispiel</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">{{Glossary("String")}}</th> + <td>Ein String mit Text. Um zu zeigen, dass es sich hier um einen String handelt, sollten Sie diesen in Anführungszeichen setzen.</td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Number")}}</th> + <td>Eine Nummer. Nummern werden nicht in Anführungszeichen eingebettet.</td> + <td><code>var myVariable = 10;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Boolean")}}</th> + <td>Ein wahr/falsch (true/false) Wert. Die Worte <code>true</code> und <code>false</code> sind spezielle Schlüsselworte in JS und erfordern daher keine Anführungszeichen</td> + <td><code>var myVariable = true;</code></td> + </tr> + <tr> + <th scope="row">{{Glossary("Array")}}</th> + <td> + <p>Eine Struktur, die Ihnen erlaubt, mehrere Werte in einer einzigen Referenz zu speichern.</p> + </td> + <td><code>var myVariable = [1,'Bob','Steve',10];</code><br> + Bezieht sich auf jedes Mitglied des arrays wie dieses:<br> + <code>myVariable[0]</code>, <code>myVariable[1]</code>, etc.</td> + </tr> + <tr> + <th scope="row">{{Glossary("Object")}}</th> + <td> + <p>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.</p> + </td> + <td><code>var myVariable = document.querySelector('h1');</code><br> + Und ebenso alle der obigen Beispiele.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Kommentare">Kommentare</h3> + +<p>Sie können Kommentare in JavaScript-Code genauso einfügen, wie in CSS:</p> + +<pre class="brush: js">/* +Alles hier drin ist ein Kommentar. +*/</pre> + +<p>Enthält der Kommentar keine Zeilenumbrüche, dann ist es oft leichter, ihn hinter zwei Schrägstrichen zu platzieren:</p> + +<pre class="brush: js" style="font-size: 14px;">// Dies ist ein Kommentar +</pre> + +<h3 id="Operatoren">Operatoren</h3> + +<p>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. </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row">Operator</th> + <th scope="col">Erklärung</th> + <th scope="col">Symbol(e)</th> + <th scope="col">Beispiel</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">addieren/verbinden</th> + <td>Wird verwendet, um zwei Zahlen zu addieren, oder zwei Strings zusammenzusetzen.</td> + <td><code>+</code></td> + <td><code>6 + 9;<br> + "Hello " + "world!";</code></td> + </tr> + <tr> + <th scope="row">subtrahieren, multiplizieren, teilen </th> + <td>Verhalten sich so, wie aus der Mathematik bekannt.</td> + <td><code>-</code>, <code>*</code>, <code>/</code></td> + <td><code>9 - 3;<br> + 8 * 2; // in JS ist der Multiplikationsoperator ein Stern<br> + 9 / 3;</code></td> + </tr> + <tr> + <th scope="row">Zuweisungsoperator</th> + <td>Sie haben dies bereits gesehen: Ein Wert wird einer Variablen zugeordnet</td> + <td><code>=</code></td> + <td><code>var myVariable = 'Bob';</code></td> + </tr> + <tr> + <th scope="row">Gleichheitsoperator</th> + <td> + <p>Prüft zwei Werte auf Gleichheit und liefert <code>true</code>/<code>false</code> (Boolean) als Ergebnis</p> + </td> + <td><code>===</code></td> + <td><code>var myVariable = 3;<br> + myVariable === 4;</code></td> + </tr> + <tr> + <th scope="row">Verneinung, ungleich</th> + <td> + <p>Liefert als Ergebnis das logische Gegenteil; dreht ein <code>true</code> in ein <code>false, </code>etc. In Verbindung mit dem Gleichheitsoperator wird geprüft, ob zwei Werte ungleich sind.</p> + </td> + <td><code>!</code>, <code>!==</code></td> + <td> + <p>Der Basis-Ausdruck ist <code>true</code>, aber der Vergleich liefert <code>false</code> weil er negiert wurde:</p> + + <p><code>var myVariable = 3;<br> + !(myVariable === 3);</code></p> + + <p>Hier wird geprüft, ob <code>myVariable</code> ungleich 3 ist. Der Rückgabewert ist <code>false, weil myVariable </code>den Wert 3 aufweist.</p> + + <p><code><code>var myVariable = 3;</code><br> + myVariable !== 3;</code></p> + </td> + </tr> + </tbody> +</table> + +<p>Es gibt noch viele weitere Operatoren zu entdecken, aber es reicht für jetzt. Eine komplette Liste finden Sie in <a href="/en-US/docs/Web/JavaScript/Reference/Operators">Ausdrücke und Operatoren</a>.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: 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.</p> +</div> + +<h3 id="Bedingungen">Bedingungen</h3> + +<p>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 <code>if ... else.</code> Zum Beispiel:</p> + +<pre class="brush: js">var eis = 'Schokolade'; +if (eis === 'Schokolade') { + alert('Yuhu, ich liebe Schokoladeneis!'); +} else { + alert('Awwww, ich mag lieber ein Schokoladeneis...'); +}</pre> + +<p>Der Ausdruck innerhalb des <code>if ( ... ) </code>ist der Test - dieser verwendet den Gleichheitsoperator (wie oben beschrieben), um die Variable <code>eis</code> mit dem String S<code>chokolade</code> zu vergleichen, um zu sehen, ob die Werte identisch sind. Liefert dieser Vergleich <code>true</code>, wird der erste Block des Codes ausgeführt. Wenn nicht, wird dieser Code übersprungen und der zweite Block nach dem <code>else</code> Befehl ausgeführt.</p> + +<h3 id="Funktionen">Funktionen</h3> + +<p>{{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:</p> + +<ol> + <li> + <pre class="brush: js">var myVariable = document.querySelector('h1');</pre> + </li> + <li> + <pre class="brush: js">alert('Hallo!');</pre> + </li> +</ol> + +<p>Die Funktionen <code>document.querySelector</code> and <code>alert</code> sind in den Browser eingebunden, um benutzt zu werden, wann immer es passt.</p> + +<p>Wenn sie etwas sehen, das wie ein Variablenname aussieht, aber von runden Klammern — <code>()</code> — 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.</p> + +<p>Beispielsweise erzeugt die Funktion <code>alert()</code> 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.</p> + +<p>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:</p> + +<pre class="brush: js">function multiply(num1,num2) { + var result = num1 * num2; + return result; +}</pre> + +<p>Versuchen Sie, diese Funktion in der Konsole auszuführen, dann versuchen Sie Ihre neue Funktion mehrmals aufzurufen:</p> + +<pre class="brush: js">multiply(4,7); +multiply(20,20); +multiply(0.5,3);</pre> + +<div class="note"> +<p><strong>Anmerkung</strong>: Das <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> Kommando teilt dem Browser mit, die Variable <code>result</code> 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 <a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Variable_scope">mehr über den Gültigkeitsbereich von Variablen</a>.)</p> +</div> + +<h3 id="Ereignisse_Events">Ereignisse (Events)</h3> + +<p>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 <a href="/en-US/docs/Web/Events/click">Klick-Ereignis</a>, 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:</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() { + alert('Hey! Nicht so viel klicken!'); +}</pre> + +<p>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 <a href="/en-US/docs/Web/API/GlobalEventHandlers.onclick">onclick</a>-Handlers gleich einer anonymen (namenlosen) Funktion, die den Code enthält, den wir ausführen wollen, wenn das Ereignis geschieht.</p> + +<p>Beachten Sie, dass</p> + +<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre> + +<p>gleichbedeutend ist mit</p> + +<pre class="brush: js">var myHTML = document.querySelector('html'); +myHTML.onclick = function() {};</pre> + +<p>Es ist nur kürzer.</p> + +<h2 id="Dynamische_Inhalte_für_unsere_Beispielwebseite">Dynamische Inhalte für unsere Beispielwebseite</h2> + +<p>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.</p> + +<h3 id="Bilder_wechseln">Bilder wechseln</h3> + +<p>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.</p> + +<ol> + <li>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.</li> + <li>Speichern Sie dieses Bild in Ihrem <code>bilder</code>-Ordner.</li> + <li>Ändern Sie den Namen des Bildes in etwas, das Sie sich leicht merken können, wir haben es <code>'firefox2.png'</code> genannt.</li> + <li>Gehen Sie in Ihre <code>main.js</code> Datei und geben den folgenden JavaScript-Code ein: (Löschen Sie das "hello world"-Beispiel von oben) + <pre class="brush: js">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'); + } +}</pre> + </li> + <li>Speichern Sie alle Dateien und laden Sie <code>index.html</code> in Ihrem Browser. Wenn Sie jetzt auf das Bild klicken, sollte es sich ändern!</li> +</ol> + +<p>Wir erstellen die Variable <code>myImage</code> und speichern in dieser eine Referenz zu unserem Bild-Element(<code>img</code>). Als nächstes setzen wir das <code>onclick</code>-Event dieser Variablen gleich mit einer Funktion ohne Namen (einer<em>anonymen</em> Funktion). In dieser Funktion steht, was jedes mal passieren soll, wenn auf das Bild geklickt wird:</p> + +<ol> + <li>Wir holen uns den Wert des <code>src</code> Attributes von unserem Bild.</li> + <li>Wir benutzen eine <code>if</code>-Bedingung, um zu überprüfen ob der <code>src</code>-Wert derselbe ist, wie der Pfad unseres original Bildes: + <ol> + <li>Wenn die Bedingung wahr ist, ändern wir den <code>src</code>-Wert in den Pfad des zweiten Bildes, so das dieses Bild nun in unser {{htmlelement("image")}}-Element geladen wird.</li> + <li>Wenn die Bedingung falsch ist (das Bild also schon angeklickt und geändert wurde), ändern wir den <code>src</code>-Wert wieder in den Pfad des ersten Bildes, so das bei erneutem Klick mit der Maus das Originalbild wieder erscheint.</li> + </ol> + </li> +</ol> + +<h3 id="Ein_persönlicher_Willkommensgruß">Ein persönlicher Willkommensgruß</h3> + +<p>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.</p> + +<ol> + <li>In der <code>index.html</code>-Datei fügen Sie direkt vor dem {{htmlelement("script")}} Element folgende Code-Zeile ein: + + <pre class="brush: html"><button>Name ändern</button></pre> + </li> + <li>In <code>main.js</code> 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: + <pre class="brush: js">var myButton = document.querySelector('button'); +var myHeading = document.querySelector('h1');</pre> + </li> + <li>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: + <pre class="brush: js">function setUserName() { + var myName = prompt('Bitte geben Sie Ihren Namen ein.'); + localStorage.setItem('name', myName); + myHeading.textContent = 'Mozilla ist cool, ' + myName; +}</pre> + Innerhalb der Funktion wird in der ersten Zeile die neue Variable <code>myName</code> erstellt, in welcher der Name des Benutzers gespeichert werden soll. Der Name des Benutzers wird mit der <a href="/de/docs/Web/API/Window.prompt"><code>prompt()</code></a>-Funktion erfragt - es öffnet sich eine Dialogbox, ähnlich wie bei der <code>alert()</code>-Funktion, in welcher der Benutzer seinen Namen eingeben kann und mit einem klick auf <strong>OK</strong> bestätigen kann. Als nächstes Rufen wir eine API namens <code>localStorage</code> auf, mit welcher wir Daten im Browser speichern und später darauf zurückgreifen können. Wir nutzen die s<code>etItem()</code>-Funktion von <code>localStorage</code>, um ein Datenobjekt mit dem Namen <code>'name'</code> zu erstellen und setzen für den Wert die Variable <code>myName</code> ein, welche den Namen enthält, den der Benutzer eingegeben hat. Als letztes ersetzen wir den Textinhalt (<code>textContent</code>) von <code>myHeading</code> mit unserem Gruß welcher den Namen des Benutzers beinhaltet.</li> + <li>Fügen Sie als nächstes diesen <code>if ... else</code> Block hinzu — dies ist der Initialisierungscode, mit welchem wir unsere App aufsetzen, wenn sie das erste mal geladen wird: + <pre class="brush: js">if(!localStorage.getItem('name')) { + setUserName(); +} else { + var storedName = localStorage.getItem('name'); + myHeading.textContent = 'Mozilla ist cool, ' + storedName; +}</pre> + 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 <code>setUserName()</code> 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 <code>getItem()</code>-Funktion geladen, in der Variablen <code>storedName</code> gespeichert und dem String für den Willkommensgruß hinzugefügt.</li> + <li>Als letztes fügen wir unserem Button den unten stehenden <code>onclick</code>-Eventhandler hinzu, welcher die <code>setUserName()</code>-Funktion aufruft. Damit kann der Benutzer den Namen jederzeit ändern, wenn er auf den Button drückt: + <pre class="brush: js">myButton.onclick = function() { + setUserName(); +} +</pre> + </li> +</ol> + +<p>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 <code>localStorage</code>, im Browser, gespeichert wird!</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Wenn Sie der Anleitung in diesem Artikel gefolgt sind, dann sollten Sie jetzt eine Webseite besitzen die ähnlich aussieht, wie diese hier (<a href="https://mdn.github.io/beginner-html-site-scripted/">sehen Sie sich unsere Version an</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15477/beginner-js2-de.jpg"></p> + +<p>Wenn Sie nicht das selbe Resultat haben und keine Lösung finden (probieren Sie es erst selbst hinzubekommen), dann können Sie sich <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">unseren Code auf Github anschauen</a>.</p> + +<p>Hier haben wir nur einige Grundlagen und Beispiele von JavaScript gezeigt. Wenn es Sie interessiert, lernen Sie mehr über JavaScript in unserem <a href="/de/docs/Web/JavaScript/Guide">JavaScript Guide</a>.</p> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> diff --git a/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html new file mode 100644 index 0000000000..897af0bb0f --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/publishing_your_website/index.html @@ -0,0 +1,111 @@ +--- +title: Ihre Webseite veröffentlichen +slug: Learn/Getting_started_with_the_web/Publishing_your_website +tags: + - Anfänger + - FTP + - GitHub + - Lernen + - Web + - WebServer + - Webseite + - veröffentlichen +translation_of: Learn/Getting_started_with_the_web/Publishing_your_website +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p>Wenn Sie Ihre Webseite fertig haben, den ganzen Code geschrieben und die Dateien organisiert haben, dann ist es Zeit Ihre Webseite online zu stellen. In diesem Artikel lernen Sie, wie Sie Ihre neue Webseite, die Sie in den letzten Artikeln erstellt haben, online für alle zugänglich machen.</p> +</div> + +<h2 id="Was_sind_Ihre_Optionen">Was sind Ihre Optionen?</h2> + +<p>Eine Webseite online zu stellen, das ist kein einfaches Thema, hauptsächlich deswegen, da es viele verschiedene Wege gibt dies zu tun. In diesem Artikel werden wir nicht alle Möglichkeiten vorstellen. Wir werden drei Strategien vorstellen und die Vorteile und Nachteile jeder dieser Wege erläutern und für unsere Beispielwebseite einen Weg genau beschreiben, dem jeder Anfänger folgen kann.</p> + +<h3 id="Hosting_und_eine_eigene_Domain">Hosting und eine eigene Domain</h3> + +<p>Wenn Sie die volle Kontrolle über Ihre veröffentlichte Webseite haben wollen, werden Sie ein wenig Geld in die Hand nehmen müssen, um folgendes zu kaufen:</p> + +<ul> + <li>Hosting — man mietet Datenplatz auf dem <a href="/de/Learn/What_is_a_web_server">Webserver</a> einer Hosting-Firma. Sie laden Ihre Dateien auf den Webserver und dieser bringt die Webseite weiter zu den Benutzern, die auf die Webseite zugreifen möchten.</li> + <li>Eine <a href="/de/Learn/Understanding_domain_names">Domain</a> — dies ist die einzigartige Adresse, unter welcher Ihre Webseite findbar ist, wie <code>http://www.mozilla.org</code>, oder <code>http://www.tagesschau.de</code>. Sie mieten die Domain für so und soviel Jahre von einem Domainregister.</li> +</ul> + +<p>Viele professionelle Webseiten nutzen diesen Weg, um online zu gehen.</p> + +<p>Zusätzlich benötigen Sie ein {{Glossary("FTP", "File Transfer Protocol (FTP)")}} Programm, um ihre Dateien von ihrem Rechner auf den Webserver zu übertragen. FTP Programme unterscheiden sich in ihrer Funktionalität, aber normalerweise müssen Sie sich mit den Daten des Webservers einloggen, welche Sie von der Hosting-Firma bekommen (Username, Passwort, Hostname, etc.). Das Programm zeigt ihnen in einem Fenster die Dateien auf ihrem lokalen Computer und in einem zweiten die Dateien auf dem Webserver und Sie können Dateien hin und her schieben:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p> + +<h4 id="Tipps_um_Hosting_und_Domain_zu_finden">Tipps um Hosting und Domain zu finden</h4> + +<ul> + <li>Wir promoten hier keine bestimmten, kommerziellen Hosting-Firmen oder Domainregisterstellen, es gibt sehr zahlreiche Anbieter. Suchen Sie einfach nach "web hosting" und "Domain registrieren". Sie werden immer erst kontrollieren können, ob die gewünschte Domain frei ist oder ob sie schon von jemand anderem registriert wurde.</li> + <li>Es gibt einige kostenlose Angebote, zum Beispiel <a href="https://www.lima-city.de/">lima-city.de</a>, <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogger</a> und <a href="https://wordpress.com/">WordPress</a>. Oft ist es so das kleine Webseiten, mit wenigen Besuchern, kostenlos gehostet werden können, wenn sie aber größere Projekte haben, gibt es Zusatzkosten. Einige dieser Anbieter funktionieren ohne FTP-Programme und sind sehr einsteigerfreundlich.</li> + <li>Oft bieten Hosting-Anbieter auch einen Domain-Service an.</li> +</ul> + +<h3 id="Mit_GitHub_oder_Google_App_Engine">Mit GitHub oder Google App Engine</h3> + +<p>Es gibt Tools mit denen Sie Webseiten veröffentlichen können:</p> + +<ul> + <li><a href="https://github.com/">GitHub </a> ist eine Seite, auf der man zusammen mit anderen an Code arbeiten kann. Es erlaubt das Hochladen von Projektarchiven, um diese in dem <a href="http://git-scm.com/">Git</a> <strong>Versionskontrollsystem</strong> zu speichern. Diese Projektarchive sind online von anderen einsehbar und können bearbeitet werden. Das System ist Open-Source, das heißt, jeder in der Welt kann in Ihre Projektarchive auf GitHub schauen, Ihren Code finden, diesen Benutzen, von Ihrem Code lernen und ihn verbessern. GitHub hat eine Funktion namens <a href="https://pages.github.com/">GitHub Pages</a>, mit der man Webseiten-Code live ins Web schalten kann.</li> + <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web & Mobile Backends in Any Language | Google Cloud Platform">Google App Engine</a> ist eine mächtige Plattform mit Google's Infrastruktur, auf der Sie Apps erstellen und laufen lassen können. Ob Sie eine große Web Applikation aufbauen wollen oder eine statische Webseite hosten möchten. Mehr dazu finden Sie hier auf Englisch: <a href="/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">How do you host your website on Google App Engine?</a></li> +</ul> + +<p>Im Gegensatz zu anderen Anbietern sind diese Tools meist kostenlos, allerdings auch limitierend.</p> + +<h3 id="Nutzen_einer_Online-Entwicklungsumgebung">Nutzen einer Online-Entwicklungsumgebung</h3> + +<p>Es gibt einige Webapplikationen, welche eine Webseiten Entwicklungsumgebung simulieren und Ihnen die Möglichkeit geben HTML, CSS und JavaScript in Ihrem Browser einzugeben und direkt das Resultat anzuzeigen. Das ganze funktioniert in nur einem Browsertab. Diese Werkzeuge sind einfach zu nutzen und super, um damit zu lernen. Sie sind kostenlos in ihrer Basisversion und Ihre dort erstellte Webseite wird direkt unter einer Webadresse gehostet. Allerdings haben diese Online Entwicklungsumgebungen auch ihre Nachteile, so können oft keine zusätzlichen Dateien, wie Bilder oder Videos, gehostet werden.</p> + +<p>Schauen Sie sich einige dieser Beispiele an und finden Sie heraus was für Sie funktioniert:</p> + +<ul> + <li><a href="https://jsfiddle.net/">JSFiddle</a></li> + <li><a href="https://thimble.mozilla.org">Thimble</a></li> + <li><a href="http://jsbin.com/">JS Bin</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p> + +<h2 id="Veröffentlichen_mit_GitHub">Veröffentlichen mit GitHub</h2> + +<p>Wir werden nun gemeinsam Ihre Webseite im Internet veröffentlichen. Hier nutzen wir dafür GitHub Pages.</p> + +<ol> + <li>Als erstes, <a href="https://github.com/">melden Sie sich bei GitHub </a> an und verifizieren Sie Ihe Email Adresse.</li> + <li>Als nächstes erstellen Sie ein<a href="https://github.com/new"> repository</a> (Datenarchiv) in welches Ihre Dateien von der Webseite gehen werden.</li> + <li>Auf dieser Seite geben Sie in die <em>Repository name</em> Box<em> username</em>.github.io ein, wobei <em>username</em> Ihr Username ist. Zum Beispiel würde maxmustermann hier <em>maxmustermann.github.io</em> eingeben.<br> + Aktivieren Sie auch <em>Initialize this repository with a README</em> und klicken dann auf <em>Create repository</em>.<img alt="" src="https://mdn.mozillademos.org/files/9479/github-create-repo.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></li> + <li>Danach können Sie Inhalte einfach mit der Maus in Ihr Datenarchiv ziehen und dann auf <em>Commit changes</em> klicken.<br> + + <div class="note"> + <p><strong>Notiz</strong>: Gehen Sie sicher das Ihr Ordner eine <em>index.html</em> Datei hat.</p> + </div> + </li> + <li> + <p>Jetzt gehen Sie in einem neuen Fenster in Ihrem Browser<em> username</em>.github.io um Ihre Webseite online anzusehen. Als Beispiel können Sie auf folgende GitHub Webseite gehen: <a href="http://chrisdavidmills.github.io/">chrisdavidmills.github.io</a>.</p> + + <div class="note"> + <p><strong>Notiz</strong>: Es dauert eventuell ein paar Minuten bis Ihre Webseite live geschaltet ist. Wenn sie diese nicht sofort sehen, warten Sie ein wenig und probieren es nach einiger Zeit noch einmal.</p> + </div> + </li> +</ol> + +<p>Um mehr zu lernen gehen Sie zu <a href="https://help.github.com/categories/github-pages-basics/">GitHub Pages Help</a>.</p> + +<h2 id="Weiterer_Lesestoff_(in_englisch)">Weiterer Lesestoff (in englisch)</h2> + +<ul> + <li><a href="/en-US/Learn/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/Learn/Understanding_domain_names">Understanding domain names</a></li> + <li><a href="/en-US/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></li> + <li><a href="https://www.codecademy.com/learn/deploy-a-website">Deploy a Website</a>: A nice tutorial from Codecademy that goes a bit further and shows some additional techniques.</li> + <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a> by Scott Murray has some useful ideas on available services.</li> +</ul> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</div> diff --git a/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html new file mode 100644 index 0000000000..065000788d --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html @@ -0,0 +1,119 @@ +--- +title: Wie soll Ihre Webseite aussehen? +slug: Learn/Getting_started_with_the_web/What_will_your_website_look_like +tags: + - Anfänger + - Beginner + - Design + - Fonts + - Inhalte + - Lernen + - Planung + - Schriftarten +translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/dateien_nutzen", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>»Wie soll Ihre Webseite aussehen?</em>« behandelt die Planungs- und Designarbeit, die Sie machen, <em>bevor</em> Sie anfangen Code zu schreiben. Dazu gehören Fragestellungen wie "Welche Informationen soll meine Webseite bereitstellen?", "Welche Schriftarten und Farben will ich nutzen?" und "Was soll meine Seite tun?"</p> +</div> + +<h2 id="Das_wichtigste_zuerst_Planen">Das wichtigste zuerst: Planen</h2> + +<p>Bevor Sie irgendwas machen, brauchen Sie eine Idee. Was soll Ihre Webseite eigentlich machen? Eine Webseite, die Sie schreiben, könnte alles machen, was Sie aus dem Internet kennen, aber für den Anfang sollten Sie es einfach halten. Wir werden eine einfache Webseite erstellen mit einem Bild, einer Überschrift und ein paar Absätzen.</p> + +<p>Am Anfang sollten Sie sich folgende Fragen beantworten:</p> + +<ol> + <li><strong>Worum geht es auf Ihrer Webseite? </strong>Mögen Sie Hunde, Berlin oder Pacman?</li> + <li><strong>Welche Informationen zeigen Sie zu Ihrem Thema? </strong>Schreiben Sie einen Titel und ein paar Absätze dazu und überlegen Sie sich, wie Sie das Thema visualisieren möchten, z.B. mit einer Grafik oder einem Bild.</li> + <li><strong>Wie soll Ihre Webseite aussehen?</strong> (Schlagworte genügen) Welche Farben und Farbkombinationen möchten Sie nutzen? Welche Schriftart ist geeignet: formal, comicartig, plakativ oder subtil?</li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: Komplexe Projekte benötigen detailierte Richtlinien die alle Einzelheiten zu Farbe, Schrift, Abständen, Schreibstil etc. behandeln. Diese Richtlinien werden manchmal »Design Guide« oder »Brand Guide« genannt. Die <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Firefox OS Guidelines </a>sind beispielsweise ein solches Dokument.</p> +</div> + +<h2 id="Skizzieren_Sie_Ihr_Design">Skizzieren Sie Ihr Design</h2> + +<p>Benutzen Sie Stift und Papier, um grob aufzuzeichnen wie Ihre Seite aussehen soll. Wo soll das Bild hin und wo die Textinhalte? Wie groß soll die Überschrift sein?</p> + +<p>Bei Ihrer ersten Webseite gibt es nicht allzu viel zu zeichnen, aber Sie sollten es sich zur Gewohnheit machen, das Design der Webseite auszuarbeiten, bevor Sie anfangen, diese zu entwickeln. Das hilft bei der Planung und Ideenentwicklung – ein Künstler müssen Sie dafür nicht sein!</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p> + +<div class="note"> +<p><strong>Hinweis</strong>: Sogar bei echten, komplexen Webseiten beginnt das Designteam meist mit groben Skizzen auf Papier. Später werden dann digitale Mockups in einem Grafikprogramm oder mit Webtechnologien umgesetzt.</p> + +<p>Web Teams umfassen oft sowohl einen Grafikdesigner, als auch einen User Experience (UX) Designer. Grafikdesigner gestalten das Aussehen der Webseite. UX-Designer haben eine abstraktere Aufgabe: Sie gestalten die Erfahrung und Interaktion der Nutzer.</p> +</div> + +<h2 id="Inhalte_und_Aussehen_bestimmten">Inhalte und Aussehen bestimmten</h2> + +<p>Jetzt können Sie die Inhalte der Webseite zusammenstellen, also die Dinge, welche letztendlich auf Ihrer Webseite zu sehen sein werden.</p> + +<h3 id="Text">Text</h3> + +<p>Sie haben vermutlich immer noch die Überschriften und Absätze, die Sie zuvor geschrieben haben – benutzen Sie diese als erste Textinhalte.</p> + +<h3 id="Hauptfarbe">Hauptfarbe</h3> + +<p>Um eine Farbe auszuwählen, nutzen Sie den <a href="https://www.w3schools.com/colors/colors_picker.asp">Farbwähler</a> und suchen sich eine Farbe aus. Wenn Sie auf eine Farbe klicken, bekommen Sie einen seltsamen Sechs-Zeichen-Code (z.B. #660066). Das ist ein <em>Hex(adezimal)-Code</em> und er repräsentiert eine bestimmte Farbe. Speichern Sie diesen Farbcode ab oder schreiben Sie ihn irgendwo auf. </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p> + +<h3 id="Bilder">Bilder</h3> + +<p>Um ein Bild auszuwählen, gehen Sie auf <a href="https://images.google.com/">Google Images </a>oder <a href="https://www.flickr.com/search/advanced/">Flickr </a>und suche nach einem passenden Bild.</p> + +<div class="note"><strong>Achtung</strong>: Die meisten Bilder im Internet sind urheberrechtlich geschützt. Das heißt, man darf sie nicht einfach nutzen – auch wenn die Bilder im Internet ohne Probleme anzuschauen sind und man die Bilder speichern kann.<br> +<br> +So findet man Bilder, die man nutzen darf:<br> +- Wähle bei <a href="https://images.google.com/">Google Images</a> "Nutzungsrechte"/"Zur Wiederverwendung gekennzeichnet"<br> +- Wähle bei <a href="https://www.flickr.com/search/advanced/">Flickr</a> "<label>Only search within <strong>Creative Commons</strong>-licensed content</label>" aus.<br> +In beiden Fällen muss man den Namen des Urhebers zitieren.<br> +Mehr zum Urheberrecht auf <a href="http://irights.info/kategorie/themen/fotos-grafiken">irights.com</a></div> + +<p>Haben Sie ein Bild gefunden, das Sie nutzen möchten, machen Sie folgendes bei Google Images:</p> + +<ol> + <li>Klicken Sie auf das Bild.</li> + <li>Wählen Sie "Bild ansehen".</li> + <li>Klicken Sie mit der rechten Maustaste auf das Bild und wählen Sie "Grafik speichern unter…" oder kopieren Sie die Internetaddresse des Bildes und speichern diese ab.</li> +</ol> + +<p>Bei Flickr</p> + +<ol> + <li>Klicken Sie auf ein Bild.</li> + <li>Klicken Sie "Download this Photo" und wählen Sie eine passende Größe aus.</li> +</ol> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p> + + + +<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p> + +<h3 id="Schriftart">Schriftart</h3> + +<p>Eine Schrift auswählen:</p> + +<ol> + <li>Gehen Sie auf <a href="http://www.google.com/fonts">Google Fonts</a> und scrollen Sie durch die Liste bis Sie eine Schriftart entdecken, welche Sie mögen. Sie können auch die Filter auf der rechten Seiten nutzen, um die Auswahl zu filtern.</li> + <li>Klicken Sie den "<em>+</em>" Button bei der gewünschten Schriftart.</li> + <li>Es erscheint eine Popup-Box. Klicken Sie auf den <em>"* Family Selected" </em>Button im unteren Bereich der Seite. ("*" abhängig davon wieviele Fonts man ausgewählt hat).</li> + <li>In der Popup-Box stehen jetzt zwei Codes. Diese können Sie kopieren und in einem beliebigen Texteditor für später speichern.</li> +</ol> + +<p><img alt="new version" src="https://mdn.mozillademos.org/files/14577/google_fonts(1).gif" style="height: 328px; width: 670px;"></p> + + + +<p><img alt="picture with 2 codes of google fonts" src="https://mdn.mozillademos.org/files/14579/google_fonts(2).gif" style="height: 325px; width: 668px;"></p> + +<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div> 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 new file mode 100644 index 0000000000..7b5dfbc541 --- /dev/null +++ b/files/de/learn/getting_started_with_the_web/wie_das_internet_funktioniert/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> + +<div class="summary"> +<p><em>Wie das Internet funktioniert</em> gibt eine vereinfachte Übersicht darüber, was passiert, wenn Sie eine Webseite in einem Webbrowser auf Ihrem Computer oder auf Ihrem Smartphone aufrufen.</p> +</div> + +<p>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.</p> + +<h2 id="Client_und_Server">Client und Server</h2> + +<p>Computer welche über das Internet verbunden sind werden als Client oder als Server bezeichnet. Dieses Diagramm veranschaulicht, vereinacht, wie diese beiden Computer miteinander interagieren:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p> + +<ul> + <li>Als Client (engl.: Nutzer oder Kunde) werden die Computer bezeichnet, welche mit dem Internet verbunden sind und typischerweise von einem Benutzer genutzt werden. Zum Beispiel Ihr Computer der via Wi-Fi mit dem Netzwerk verbunden ist, oder ihr Smartphone das über ein mobiles Netzwerk verbunden ist. Auch die Software, welche auf Benutzerseite das Internet veranschaulicht, normalerweise Webbrowser wie Firefox oder Chome, wird als Client bezeichnet.</li> + <li>Server sind Computer, welche Webseiten, Dateien oder Apps speichern. Wenn ein clientseitiger Computer auf eine Webseite zugreifen möchte, wird eine Kopie dieser Webseite von dem Server heruntergeladen, um dann in dem Browser des Benutzers angezeigt zu werden.</li> +</ul> + +<h2 id="Die_anderen_Teile_der_Werkzeugkiste">Die anderen Teile der Werkzeugkiste</h2> + +<p>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.</p> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p> + +<p>Auf dem Weg von Ihrem Haus zum Shop müssen Sie an einigen anderen Stellen vorbei und "Hallo" sagen:</p> + +<ul> + <li><strong>Ihre Internetverbindung</strong>: Erlaubt Ihnen Daten über das Internet zu senden und zu empfangen. Dies ist wie die eigentliche Straße auf der Sie entlang gehen, um von Ihrem Haus zum Laden zu gelangen.</li> + <li><strong>TCP/IP</strong>: Transmission Control Protocol und Internet Protocol sind Kommunikationsprotokolle, welche bestimmen wie Daten über das Internet übertragen werden. Dies ist vergleichbar mit dem Transportvehikel, mit dem Sie zu dem Laden kommen, welches ein Auto oder ein Fahrad oder ein anderes Fahrzeug sein könnte.</li> + <li><strong>DNS</strong>: Domain Name Servers sind wie ein Adressbuch für Internetseiten. Wenn Sie nach einer Internetadresse suchen, dann schaut der Browser auf dem DNS nach, um die wirkliche Adresse dieser Webseite zu finden. Der Browser muss herausfinden, auf welchem Server die Webseite liegt, damit er eine HTTP Anfrage an die richtige Stelle senden kann. Dies ist vergleichbar mit dem heraussuchen der Adresse des Geschäftes, in dem Sie einkaufen gehen wollen, damit Sie dieses auch finden.</li> + <li><strong>HTTP</strong>: Hypertext Transfer Protocol ist ein Applikations {{Glossary("Protocol" , "protocol")}} welches eine Sprache definiert mit welcher Client und Server miteinander kommunizieren können. Dies ist wie die Sprache, mit der Sie im Laden Ihre Bestellung machen.</li> + <li><strong>Zusätzliche Dateien</strong>: Eine Webseite wir aus verschiedenen Dateien zusammengesetzt, ähnlich wie sie aus verschiedenen Teilen aus dem Laden etwas sinnvolles bauen können. Diese Dateien kommen in zwei Haupttypen: + <ul> + <li><strong>Code Dateien</strong>: Webseiten sind hauptsächlich aus HTML, CSS, und JavaScript, aber es gibt noch weitere Möglichkeiten.</li> + <li><strong>Inhalte</strong>: Dies ist alles andere, was auf einer Webeite zu finden ist, wie Bilder, Musik, Videos, Word-Dokumente oder PDFs.</li> + </ul> + </li> +</ul> + +<h2 id="Was_passiert_jetzt_also_genau">Was passiert jetzt also genau?</h2> + +<p>Wenn Sie eine Internetadresse in Ihren Browser eintippen (wie wenn Sie zu dem Laden gehen):</p> + +<ol> + <li>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).</li> + <li>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.</li> + <li>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)</li> + <li>Im Browser werden die kleinen Datenpakete zusammengesetzt und zeigt Ihnen die komplette Webseite. (die Waren kommen bei Ihnen daheim an)</li> +</ol> + +<h2 id="DNS_erklärt">DNS erklärt</h2> + +<p>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.</p> + +<p>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.</p> + +<p>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: <code>63.245.215.20</code></p> + +<p><img alt="A domain name is just another form of an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p> + +<h2 id="Datenpakete_erklärt">Datenpakete erklärt</h2> + +<p>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.</p> + +<h2 id="Lesen_Sie_weiter_(englisch)">Lesen Sie weiter (englisch)</h2> + +<ul> + <li><a href="/en-US/Learn/How_the_Internet_works">How the Internet works</a></li> + <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — an Application-Level Protocol</a></li> + <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Let’s GET It On!</a></li> + <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Response Codes</a></li> +</ul> + +<h2 id="Credit">Credit</h2> + +<p>Street photo: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, by <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p> + +<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div> diff --git a/files/de/learn/html/einführung_in_html/der_kopf_metadaten_in_html/index.html b/files/de/learn/html/einführung_in_html/der_kopf_metadaten_in_html/index.html new file mode 100644 index 0000000000..f775774535 --- /dev/null +++ b/files/de/learn/html/einführung_in_html/der_kopf_metadaten_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>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</td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_der_HTML-Kopf">Was ist der HTML-Kopf?</h2> + +<p>Lassen Sie uns nochmal einen Blick auf das einfache HTML Dokument werfen,<a href="/de/Learn/HTML/Introduction_to_HTML/Lerne_HTML_kennen"> mit welchem wir uns im vorherigen Artikel beschäftigt haben</a>:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Meine Testseite</title> + </head> + <body> + <p>Dies ist meine Webseite.</p> + </body> +</html></pre> + +<p>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ß:</p> + +<pre class="brush: html"><head> + <meta charset="utf-8"> + <title>Meine Testseite</title> +</head></pre> + +<p>Auf großen Webseiten wird der Kopf aber recht voll. Schauen Sie sich mal den Bereich im <code><head></code>-Element bei Ihren Lieblingswebseiten an, indem Sie die Developer Tools nutzen oder einfach <code>view-source:</code> vor der Webadresse in die Adresszeile schreiben (z.B. <code>view-source:http://mozilla.org</code>). 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!</p> + +<h2 id="Einen_Titel_hinzufügen">Einen Titel hinzufügen</h2> + +<p>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 <code><body></code>-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!</p> + +<ul> + <li>Das {{htmlelement("h1")}}-Element erscheint auf der Webseite selbst, wenn diese im Browser geladen wird. Dieses Element sollte nur einmal pro Seite erscheinen, um als Hauptüberschrift für den aktuellen Inhalt zu fungieren.</li> + <li>Das {{htmlelement("title")}}-Element gehört zu den Metadaten und repräsentiert den Titel der gesamten Webseite, nicht nur den Inhalt einer Seite darauf.</li> +</ul> + +<h3 id="Aktives_Lernen_Beispiel_anschauen">Aktives Lernen: Beispiel anschauen</h3> + +<ol> + <li>Als erstes möchten wir das Sie zu unserem GitHub Repositorium gehen und eine Kopie von <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a> herunterladen. Um das zu tun, können Sie entweder + + <ol> + <li>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.</li> + <li>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 <em>Datei > Speichere Seite unter...</em> und speichern die Datei auf Ihrem Computer.</li> + </ol> + </li> + <li>Öffnen Sie diese Datei in Ihrem Browser. Sie sollten folgendes sehen: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Es sollte hier klar werden, wo das <code><h1></code>-Element erscheint und wo das <code><html></code>-Element zu sehen ist!</p> + </li> + <li>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.</li> +</ol> + +<p>Der Inhalt des <code><title></code>-Elements wird auch auf andere Weise genutzt. Wenn Sie zum Beispiel die Seite zu Ihren Lesezeichen hinzufügen (<em>Lesezeichen > Lesezeichen hinzufügen</em> oder die Schaltfläche mit dem Stern in der Adresszeile in Firefox), werden Sie sehen, dass der Inhalt des <code><title></code>-Elements als Name für das Lesezeichen vorgeschlagen wird.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Der Inhalt des <code><title></code>-Elements wird auch von Suchmaschinen genutzt, wie Sie weiter unten sehen werden.</p> + +<h2 id="Metadaten_das_<meta>-Element">Metadaten: das <meta>-Element</h2> + +<p>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 <code><meta></code>-Elemente, welche in das <code><head></code>-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.</p> + +<h3 id="Zeichensatz_einer_Webseite_festlegen">Zeichensatz einer Webseite festlegen</h3> + +<p>In dem obigen Beispiel war diese Zeile enthalten:</p> + +<pre class="brush: html"><meta charset="utf-8"></pre> + +<p>Mit diesem Element wird der genutzte Zeichensatz auf der Webseite bestimmt - es wird das Set an Zeichen festgelegt, welches vom Browser benutzt werden soll. <code>utf-8</code> 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:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Wenn Sie Ihren Zeichensatz zum Beispiel auf <code>ISO-8859-1</code> setzen, der Zeichensatz für das lateinische Alphabet, wird die Webseite nicht so schön aussehen:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<h3 id="Atkives_lernen_Experimentieren_mit_Zeichensätzen">Atkives lernen: Experimentieren mit Zeichensätzen</h3> + +<p>Um dies auszuprobieren, nutzen Sie wieder die einfache HTML-Vorlage, welche Sie in der vorherigen Sektion über das <code><title></code>-Element benutzt haben (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html page</a>). Verändern Sie den Wert von <code>meta-charset</code> in <code>ISO-8859-1</code> und fügen Sie japanische Buchstaben ihrer Seite hinzu. Das ist der Absatz, den wir benutzt haben:</p> + +<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> + +<p>Ändern Sie den Text im Absatz in einen deutschen Text, der Umlaute enthält. Dann löschen Sie das <code><meta charset></code>-Element, um zu sehen, was passiert. Fügen Sie das ursprüngliche <code>meta</code>-Tag danach wieder ein und sehen Sie sich den Unterschied im Webbrowser an.</p> + +<h3 id="Autor_und_Beschreibung_hinzufügen"> Autor und Beschreibung hinzufügen</h3> + +<p>Viele <code><meta></code> -Elemente beinhalten <code>name</code> und <code>content</code> Attribute:</p> + +<ul> + <li><code>name</code> spezifiziert den Typ des meta-Elements; welche Art von Information es enthält.</li> + <li><code>content</code> spezifiziert den eigentlichen Inhalt des meta-Elements.</li> +</ul> + +<p>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:</p> + +<pre class="brush: html"><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."></pre> + +<p>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.</p> + +<p>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 <a href="/de/docs/Glossary/SEO">Suchmaschinenoptimierung</a> (engl.: "Search Engine Optimation", kurz {{glossary("SEO")}} zusammengefasst)</p> + +<h3 id="Aktives_Lernen_Beschreibung_für_Suchmaschinen">Aktives Lernen: Beschreibung für Suchmaschinen</h3> + +<p>Die Beschreibung wird von Suchmaschinen auch auf der Ergebnisseite genutzt. Schauen wir uns das mal genauer an - in einer Übung.</p> + +<ol> + <li>Gehen Sie zu der<a href="https://developer.mozilla.org/"> Startseite von dem Mozilla Developer Network</a>.</li> + <li>Schauen Sie sich den Quellcode der Webseite an (Rechts/<kbd>Ctrl</kbd> + klick auf die Seite, wählen Sie <em>Quellcode anzeigen</em> von dem Kontextmenü oder schreiben Sie <code>view-source:</code> vor die Webadresse in der Adresszeile).</li> + <li>Finden Sie das description <code><meta></code>-Tag. Es sollte so aussehen: + <pre class="brush: html"><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."></pre> + </li> + <li>Suchen Sie nun nach "Mozilla Developer Network" in einer beliebigen Suchmaschine (Wir haben Yahoo benutzt.) Sie werden bemerken das die Inhalte vom description <code><meta></code>-Tag und vom <code><title></code> hier erscheinen - es ist also sehr sinnvoll, diese beiden zu ntuzen! <img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></li> +</ol> + +<div class="note"> +<p><strong>Hinweis</strong>: 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 <a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a> bearbeitet werden.</p> +</div> + +<div class="note"> +<p>Hinweis: Viele <code><meta></code>-Elemente sind nicht mehr so wichtig, wie sie einmal waren. Ein Beispiel ist das keyword <code><meta></code>-Element (<code><meta name="keywords" content="fill, in, your, keywords, here"></code>). Dieses sollte Schlagwörter für Suchmaschinen bereithalten , damit diese anhand der Schlagwörter Suchergebnisse zusammen stellen können. Mittlerweile wird dieses <code><meta></code>-Tag von vielen Suchmaschinen ignoriert, weil Sprammer die Stichwortliste mit hunderten von Stichwörtern gefüllt haben, womit die Suchergebnisse manipuliert werden konnten.</p> +</div> + +<h3 id="Andere_Typen_von_Metadaten">Andere Typen von Metadaten</h3> + +<p>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.</p> + +<p>Zum Beispiel gibt es <a href="http://ogp.me/">Open Graph Data</a>, 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:</p> + +<pre class="brush: html"><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"></pre> + +<p>Dieser Code bewirkt, das ein Link zu MDN von Facebook aus, ein Bild und eine Beschreibung beinhaltet. Das sieht dann so aus:</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">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:</p> + +<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Spezielle_Icons_der_Webseite_hinzufügen">Spezielle Icons der Webseite hinzufügen</h2> + +<p>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.</p> + +<p>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.</p> + +<p>Ein Favicon fügen Sie Ihrer Webseite wie folgt hinzu:</p> + +<ol> + <li>Speichern Sie das Favicon mit der Endung <code>.ico</code> in dem selben Ordner, in dem auch Ihre <code>index.html</code> Datei ist. Die meisten Browser würden auch <code>.gif</code> und <code>.png</code> Format akzeptieren, mit dem ICO Format gehen Sie aber sicher, das auch ältere Browser das Favicon anzeigen.</li> + <li>Fügen Sie die folgende Zeile in den <code><head></code>-Bereich Ihrer HTML-Datei ein, um eine Referenz zu dem Favicon zu erzeugen: + <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Hier ist ein Beispiel, indem ein Favicon in einer Lesezeichen-Liste angezeigt wird:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>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:</p> + +<pre class="brush: html"><!-- 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"></pre> + +<p>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.</p> + +<p>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.</p> + +<h2 id="CSS_und_JavaScript_der_HTML-Datei_hinzufügen">CSS und JavaScript der HTML-Datei hinzufügen</h2> + +<p>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:</p> + +<ul> + <li>Für das Einbinden von CSS-Dateien wird das {{htmlelement("link")}}-Element benutzt. Dieses wird im Kopf der HTML-Datei eingebunden. Das Element nimmt zwei Attribute, einmal <code>rel="stylesheet"</code>, welches Angibt das es sich um ein Stylesheet handelt. Das andere Attribut ist <code>href</code>, welches als Wert den Pfad zu der CSS-Datei beinhaltet: + + <pre class="brush: html"><link rel="stylesheet" href="meine-css-datei.css"></pre> + </li> + <li>Für das Einbinden von JavaScript-Dateien wird das {{htmlelement("script")}}-Element genutzt und es wird meistens am Ende der HTML-Datei, vor dem schließenden <code></body></code>-Tag verwendet. Dadurch wird der HTML-Inhalt zuerst fertig geladen und erst am Ende der JavaScript-Code ausgeführt und auf die fertig gerenderte Webseite angewendet: + <pre class="brush: html"><script src="meine-js-datei.js"></script></pre> + + <p><strong>Hinweis</strong>: Das <code><script></code>-Element sieht aus wie ein leeres Element, aber das ist es nicht, weswegen ein schließendes Tag notwendig ist. Anstatt auf eine externe JavaScript-Datei zu verweisen, könnte man den Code auch direkt in das <code><script></code>-Element hineinschreiben.</p> + </li> +</ul> + +<h3 id="Aktives_Lernen_Binden_Sie_CSS_und_JavaScript_in_eine_Seite_ein">Aktives Lernen: Binden Sie CSS und JavaScript in eine Seite ein</h3> + +<ol> + <li>Holen Sie sich jeweils eine Kopie von unseren <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> und <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a>-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.</li> + <li>Öffnen Sie die HTML-Datei sowohl in Ihrem Browser, als auch in einem Texteditor.</li> + <li>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.</li> +</ol> + +<p>Wenn Sie nun das HTML-Dokument speichern und im Browser neu laden, dann sollten Sie folgende Änderungen an der Webseite sehen:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>Der JavaScript-Code hat der Seite eine leere Liste hinzugefügt. Wenn Sie nun irgendwo auf die Liste klicken, dann öffnet sich eine Dialog-Box, in welcher Sie Text eingeben können, der nach drücken auf "OK" als neuer Listenpunkt erscheint. Wenn Sie auf einen existierenden Listeneintrag klicken können Sie, über die Dialog-Box, diesen Eintrag ändern.</li> + <li>Die eingebundene CSS-Datei hat dafür gesorgt, dass der Hintergrund grün ist und der Text größer ist. Es wurde auch der Inhalt gestylet, welcher durch den JavaScript-Code der Webseite hinzugefügt wurde, nämlich der rote Hintergrund und ein schwarzer Rahmen um die Liste herum.</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong> Falls Sie an dieser Übung hängen bleiben und die externen Dateien nicht korrekt eingebunden bekommen, dann schauen Sie sich unsere <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a> Beispiel Webseite an.</p> +</div> + +<h2 id="Die_genutzte_Sprache_der_Webseite_angeben">Die genutzte Sprache der Webseite angeben</h2> + +<p>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 <a href="/de/docs/Web/HTML/Global_attributes/lang"><code>lang</code>-Attribut</a> dem öffnenden HTML-Tag hinzufügen (wie auf <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> gemacht und es unten gezeigt wird).</p> + +<pre class="brush: html"><html lang="de"></pre> + +<p>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.</p> + +<p>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> + +<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Die Ländercodes werden im <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a> Standard definiert. Sie können hier mehr darüber lesen: <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a> (in Englisch)</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/einführung_in_html/document_and_website_structure/index.html b/files/de/learn/html/einführung_in_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..7b9ce1bae8 --- /dev/null +++ b/files/de/learn/html/einführung_in_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">{{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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>HTML-Grundlagen, wie sie in <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> abgedeckt werden. HTML Textformatierung, wie in <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> abgedeckt wird. Wie Links funktionieren, wie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Links erstellen</a> beschrieben wird.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lernen, wie man eine grundlegende Struktur in einer Webseite mit HTML-Tags festlegt und wie man die Struktur einer einfachen Webseite entwirft.</td> + </tr> + </tbody> +</table> + +<h2 id="Bereiche_einer_Webseite">Bereiche einer Webseite</h2> + +<p>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:</p> + +<dl> + <dt>header - Kopfbereich</dt> + <dd>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.</dd> + <dt>Navigation</dt> + <dd>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.</dd> + <dt>Hauptinhalt</dt> + <dd>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!</dd> + <dt>Sidebar</dt> + <dd>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.</dd> + <dt>footer - Fußbereich</dt> + <dd>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.</dd> +</dl> + +<p>Eine „typische Webseite“ könnte wie folgt strukturiert werden:</p> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Inhalte_strukturieren_mit_HTML">Inhalte strukturieren mit HTML</h2> + +<p>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 <strong>wichtig den semantischen Zusammenhang zwischen den HTML-Tags zu wahren und das richtige Element für den ihm zugeschriebene Job zu nutzen</strong>.</p> + +<p>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?</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Etwa 8% der Menschen weltweit sind farbenblind. Blinde oder fast blinde Menschen machen 4-5% der Menschheit aus. 2012 waren das etwa <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 Millionen Menschen</a>, während die Gesamtpopulation bei 7 Billionen Menschen liegt.</p> +</div> + +<p>Im HTML-Code kann man Sektionen einteilen, je nach dem was Sie beinhalten und welche <em>Funktion</em> 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 <a href="/de/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">einige negative Konsequenzen, wenn nicht das richtige Element und die richtige Semantik für den dafür vorgesehenen Job genutzt werden</a>.</p> + +<p>Um sematisches Markup zu schreiben, stellt HTML einige Tags zur verfügung, die man benutzen kann, zum Beispiel:</p> + +<ul> + <li><strong>Header/Kopfbereich: </strong>{{htmlelement("header")}}.</li> + <li><strong>Navigations Menü: </strong>{{htmlelement("nav")}}.</li> + <li><strong>Hauptinhalt: </strong>{{htmlelement("main")}}, mit einigen verschiedenen Untersektionen, repräsentiert mit {{HTMLElement("article")}}, {{htmlelement("section")}} und {{htmlelement("div")}} Elementen.</li> + <li><strong>Sidebar: </strong>{{htmlelement("aside")}}; wird oft innerhalb {{htmlelement("main")}} platziert.</li> + <li><strong>Footer/Fußbereich: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Aktives_Lernen_Den_Code_aus_dem_Beispiel_verstehen">Aktives Lernen: Den Code aus dem Beispiel verstehen</h3> + +<p>Das Beispiel oben basiert auf dem folgenden Code (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">Man kann dieses Beispiel auch auf GitHub finden</a>). 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.</p> + +<pre class="brush: html"><!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></pre> + +<p>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.</p> + +<h2 id="Die_HTML-Layout-Elemente">Die HTML-Layout-Elemente</h2> + +<p>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 <a href="/de/docs/Web/HTML/Element">HTML Elemente Referenz</a> finden.</p> + +<ul> + <li>{{HTMLElement('main')}} ist für den Hauptbereich der Webseite und stellt gewöhnlich Inhalte dar, die <em>nur auf dieser einen Seite</em> zu sehen sind. <code><main></code> sollte nur <em>einmal</em> pro Webseite genutzt werden und sollte direkt im {{HTMLElement('body')}} stehen und nicht innerhalb anderer Elemente.</li> + <li>{{HTMLElement('article')}} umschließt einen Block von zusammenhängendem Inhalt, der auch ohne den Rest der Webseite stehen könnte (z.B. ein einzelner Blogpost).</li> + <li>{{HTMLElement('section')}} ist ähnlich wie <code><article></code>, aber eher für das Gruppieren von Bereichen mit bestimmter Funktionalität (z.B. eine Minikarte oder einige Artikel-Überschriften und Zusammenfassungen). Es ist gute Praxis, jede section mit einer Überschrift zu starten. Man kann <code><article></code>s in mehrere <code><section></code>s aufteilen und umgekehrt, es geht beides.</li> + <li>{{HTMLElement('aside')}} enthält Inhalte, die nicht direkt mit dem Hauptinhalt zusammenhängen, aber als Zusatzinformationen dienen können (Biografie des Autors, Links zu weiterführenden Informationen)</li> + <li>{{HTMLElement('header')}} stellt eine Gruppe von einführenden Inhaltselementen dar. Wenn es innerhalb des {{HTMLElement('body')}}-Tags steht, definiert es einen globalen Kopfbereich für die Webseite, aber wenn es innerhalb von einem {{HTMLElement('article')}} oder {{HTMLElement('section')}} Element steht, dann stellt es einen Kopfbereich nur für diese Sektion dar. (Achtung! Verwechslungsgefahr mit <a href="/de/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">Titel und Überschriften</a></li> + <li>{{HTMLElement('nav')}} enthält das Hauptnavigationsmenü für die Seite. Zweitrangige Links würden nicht hier hin gehören.</li> + <li>{{HTMLElement('footer')}} stellt eine Gruppe von Inhalten am Ende der Webseite dar.</li> +</ul> + +<h3 id="Nicht-semantische_Container">Nicht-semantische Container</h3> + +<p>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.</p> + +<p>{{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> + +<pre class="brush: html"><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></pre> + +<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.</p> + +<p>{{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:</p> + +<pre class="brush: html"><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></pre> + +<p>Dies ist nicht wirklich Inhalt für <code><aside></code>, da es nicht notwendigerweise mit dem Inhalt der Hauptseite im Zusammenhang steht (man soll es ja überall sehen können). Auch <code><section></code> scheint ungeeignet, da es nicht Teil des Hauptinhaltes ist. Deswegen kann man hier <code><div></code> benutzen. Es wurde eine Überschrift hinzugefügt, so das auch Benutzer mit Screenreadern den Einkaufswagen finden.</p> + +<div class="warning"> +<p><strong>Warnung</strong>: 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.</p> +</div> + +<h3 id="Zeilenumbruch_und_Horizontale_Linien">Zeilenumbruch und Horizontale Linien</h3> + +<p>Zwei Elemente, die man immer mal wieder benutzen wird, sind {{htmlelement("br")}} und {{htmlelement("hr")}}:</p> + +<p><code><br></code> stellt einen Zeilenumbruch innerhalb eines Absatzes(</p> + +<p>) 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> + +<pre class="brush: html"><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></pre> + +<p>Ohne die <code><br></code> Elemente, würde der Absatz in einer einzigen lange Zeile angezeigt werden, denn <a href="/de/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML"> HTML ignoriert Whitespace</a>. Mit den<br> + Elementen im Code wird der Absatz wie folgt dargestellt:</p> + +<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> + +<p><code><hr></code> Elemente erzeugen eine horizontale Linie. Damit kann man einen thematischen Umbruch darstellen. Visuell ist es einfach nur eine Linie. Beispiel:</p> + +<pre><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></pre> + +<p>Würde wie folgt aussehen:</p> + +<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> + +<h2 id="Planung_einer_einfachen_Webseite">Planung einer einfachen Webseite</h2> + +<p>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!</p> + +<ol> + <li>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. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>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. <img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>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. <img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>Als nächstes, versuchen Sie ihre Inhalte in Gruppen aufzuteilen, um eine Ide zu bekommen, was zusammen auf einer Unterseite stehen könnte. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>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. <img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aktives_Lernen_Erstellen_Sie_eine_eigene_Sitemap">Aktives Lernen: Erstellen Sie eine eigene Sitemap</h3> + +<p>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?</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Speichern Sie Ihre Arbeit, eventuell möchten Sie diese später benutzen.</p> +</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Advanced guide to HTML5 semantic elements and the HTML5 outline algorithm.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + + + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/index.html b/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/index.html new file mode 100644 index 0000000000..dad40a05a9 --- /dev/null +++ b/files/de/learn/html/einführung_in_html/einfache_textformatierung_in_html/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlagen von HTML, wie sie im Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Erlernen von grundlegender Textformattierung - Benutzung von Absätzen, Überschriften, Listen, Hervorhebung von Textstellen und Zitate.</td> + </tr> + </tbody> +</table> + +<h2 id="Überschriften_und_Absätze">Überschriften und Absätze</h2> + +<p>Meistens besteht Text aus Überschriften und Absätzen, egal ob Sie nun eine Geschichte, einen Zeitungsartikel, ein Magazin oder auf einer Webseite lesen.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>Gut strukturierter Inhalt macht es sehr viel einfacher und angenehmer diesen zu lesen.</p> + +<p>In HTML wird ein Absatz durch ein {{htmlelement("p")}}-Element dargestellt, so zum Beispiel:</p> + +<pre class="brush: html"><p>Ich bin ein Absatz, ja das bin ich.</p></pre> + +<p>Jede Überschrift wird von Überschriften-Tags als solche gekennzeichnet:</p> + +<pre class="brush: html"><h1>Ich bin der Titel einer Geschichte.</h1></pre> + +<p>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. <code><h1></code> repräsentiert die Hauptüberschrift, <code><h2></code> repräsentiert Unterüberschriften, <code><h3></code> repräsentiert Unter-Überschriften und so weiter.</p> + +<h3 id="Struktur_schaffen">Struktur schaffen</h3> + +<p>Als Beispiel würden in einer Geschichte <code><h1></code> zum ausweisen des Titels genutzt, <code><h2></code> für die Kapitelüberschriften und <code><h3></code> um ein Kapitel in mehrere Sektionen zu unterteilen.</p> + +<pre class="brush: html"><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></pre> + +<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:</p> + +<ul> + <li>Sie sollten möglichst nur eine einzige <code><h1></code>-Überschrift pro Seite haben — dies ist die Hauptüberschrift des Dokuments und alle anderen Überschriften gehören darunter.</li> + <li>Gehen Sie sicher, das Sie die Überschriften in der richtigen Reihenfolge nutzen. Nutzen Sie nicht <code><h3>'</code> , um Kapitelüberschriften zu kennzeichnen und darunter dann <code><h2>'</code>, um Unterüberschriften im Kapitel anzuzeigen, denn das macht keinen Sinn und führt zu merkwürdigen Resultaten.</li> + <li>Von den sechs Überschiftenordnungen die es gibt, sollten Sie möglichst nicht mehr als drei pro Seite benutzen, es sei denn es ist wirklich nötig. Dokumente mit zu viel Hierarchien bringen mehr Aufwand mit sich und sie sind schwieriger zu navigieren. Es wäre sinnvoller den entsprechenden Inhalt auf mehrere Seiten zu verteilen.</li> +</ul> + +<h3 id="Wieso_brauchen_wir_Struktur">Wieso brauchen wir Struktur?</h3> + +<p>Um diese Frage zu beantworten, schauen wir uns folgendes Dokument an: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> 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 <code>body</code> 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).</p> + +<p>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.</p> + +<p><img alt="Eine Webseite, auf welcher ein unformatiertes Hummus-Rezept zu lesen ist. Es gibt keine Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15527/hummus-rezept-unformatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p> + +<p>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:</p> + +<ul> + <li>Neue Benutzer einer Webseite scannen diese als erstes nach relevanten Inhalten durch, lesen oft nur die Überschriften und hervorgehobene Textstellen. Wenn Sie nichts brauchbares innerhalb einiger Sekunden finden, dann werden sie die Webseite wieder verlassen.</li> + <li>Suchmaschinen indexieren Ihre Webseite auch anhand der Überschriften. Ohne Überschriften würde eine Webseite sehr schlecht in den Suchergebnissen abschneiden. Stichwort: {{glossary("SEO")}} (Suchmaschinenoptimierung).</li> + <li>Menschen mit Sehbehinderung können eine Webseite nicht lesen. Anstatt dessen wandeln Bildschirmlesegeräte, so genannte Screenreader, die Webseite in gesprochenen Text um. Diese Screenreader benötigen oft die Überschriften eines Dokuments, um die Navigation durch die Webseite zu ermöglichen. Ansonsten würde immer das ganze Dokument komplett vorgelesen, anstatt den Teilen die wirklich von Interesse sind.</li> + <li>Um den Inhalt mit {{glossary("CSS")}} zu stylen oder mit {{glossary("JavaScript")}} interessante Dinge tun zu lassen, braucht es den Inhalt umschließende Elemente, welche als Ziel genutzt werden können.</li> +</ul> + +<p>Daher müssen wir unserem Text eine sinnvolle Auszeichnung geben.</p> + +<h3 id="Aktives_Lernen_Unserem_Inhalt_Struktur_geben">Aktives Lernen: Unserem Inhalt Struktur geben</h3> + +<p>Lassen Sie uns gleich mit einem interaktiven Beispiel beginnen. Ändern Sie den rohen Text im <em>Input</em>-Feld mittels HTML-Auszeichnungen so, das im <em>Output</em>-Feld eine Überschrift mit zwei Absätzen darunter erscheint.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Meine Kurzgeschichte + +Ich bin eine Polizeifrau und mein Name ist Trish. + +Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch. +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<h1>Meine Kurzgeschichte</h1>\n<p>Ich bin eine Polizeifrau und mein Name ist Trish.</p>\n<p>Meine Beine sind aus Pappkarton und ich bin verheiratet mit einem Fisch.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h3 id="Warum_brauchen_wir_Semantik">Warum brauchen wir Semantik?</h3> + +<p>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).</p> + +<p>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.</p> + +<pre class="brush: html"><h1>Dies ist eine Hauptüberschrift.</h1></pre> + +<p>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).</p> + +<p>Sie können jedes Element so <em>aussehen</em> lassen, wie eine Überschrift. Zum Beispiel wie folgt:</p> + +<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Ist dies eine Top-Level-Überschrift?</span></pre> + +<p>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.</p> + +<h2 id="Listen">Listen</h2> + +<p>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.</p> + +<h3 id="Ungeordnete_Listen">Ungeordnete Listen</h3> + +<p>Ungeordnete Listen werden benutzt, um eine Auflistung von Punkten zu erzeugen, bei der die Reihenfolge keine Rolle spielt - als Beispiel nehmen wir eine Einkaufsliste:</p> + +<pre>Milch +Eier +Brot +Hummus</pre> + +<p>Eine ungeordnete Liste startet mit dem {{htmlelement("ul")}}-Element, welches die einzelnen Listenelemente einhüllt:</p> + +<pre class="brush: html"><ul> +Milch +Eier +Brot +Hummus +</ul></pre> + +<p>Die einzelnen Listenpunkte selbst, werden jeweils von einem {{htmlelement("li")}}-Element umschlossen:</p> + +<pre class="brush: html"><ul> + <li>Milch</li> + <li>Eier</li> + <li>Brot</li> + <li>Hummus</li> +</ul></pre> + +<h4 id="Aktives_Lernen_Eine_ungeordnete_Liste_auszeichnen">Aktives Lernen: Eine ungeordnete Liste auszeichnen</h4> + +<p>Versuchen Sie das Beispiel unten so zu ändern, dass Sie eine eigene ungeordnete Liste bekommen.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Milch +Eier +Brot +Hummus</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 6em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ul>\n<li>Milch</li>\n<li>Eier</li>\n<li>Brot</li>\n<li>Hummus</li>\n</ul>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p> + +<h3 id="Geordnete_Listen">Geordnete Listen</h3> + +<p>Geordnete Listen sind Listen bei denen die Anordnung der Listenelemente wichtig ist - zum Beispiel bei einer Wegbeschreibung:</p> + +<pre>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 +</pre> + +<p>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 <code><ul></code>-Element:</p> + +<pre class="brush: html"><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></pre> + +<h3 id="Aktives_Lernen_Eine_geordnete_Liste_auszeichnen">Aktives Lernen: Eine geordnete Liste auszeichnen</h3> + +<p>Bearbeiten Sie unten das Beispiel in der Codebox, so das Sie eine geordnete Liste bekommen:</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">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</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<ol>\n<li>Fahre bis zum Ende der Straße</li>\n<li>Biege rechts ab</li>\n<li>Fahre geradeaus über die nächsten beiden Verkehrskreisel</li>\n<li>Biege nach dem dritten Kreisel links ab</li>\n<li>Nach 300 Metern ist die Schule auf der rechten Seite</li>\n</ol>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p> + +<h3 id="Aktives_Lernen_Das_Hummus-Rezept_auszeichnen">Aktives Lernen: Das Hummus-Rezept auszeichnen</h3> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">hummus-rezept.html</a> 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.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Schnelles Hummus Rezept + + Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre. + + Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot. + + + Zutaten + + 1 Dose (400g) Kichererbsen + 175g Tahini + 6 getrocknete Tomaten + eine halbe Schote rote Paprika + eine Messerspitze Cayenne Pfeffer + 1 Knoblauchzehe + ein Spritzer Olivenöl + + + Zubereitung + + Schälen Sie den Knoblauch und hacken ihn in grobe Stücke. + Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke. + Tun Sie alle Zutaten zusammen in eine Küchenmaschine. + Pürieren Sie die Zutaten zu einer Paste. + Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange. + Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger. + + Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt. + + + Aufbewahrung + + Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen. + + Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = ' <h1>Schnelles Hummus Rezept</h1>\n\n<p>Mit diesem Rezept können Sie schnell und ganz ohne eine Sauerei in der Küche, ein leckeres Hummus zubereiten. Es basiert auf verschiedenen Rezepten, die ich ausprobiert habe über die Jahre.</p>\n\n<p>Hummus ist eine leckere, dicke Paste, welche vor allem in Gerichten aus Griechenland und dem Mittleren Osten Verwendung findet. Es schmeckt sehr gut zu Salaten, gegrilltem Fleisch und Pita-Brot.</p>\n\n<h2>Zutaten</h2>\n\n<ul>\n<li>1 Dose (400g) Kichererbsen</li>\n<li>175g Tahini</li>\n<li>6 getrocknete Tomaten</li>\n<li>eine halbe Schote rote Paprika</li>\n<li>eine Messerspitze Cayenne Pfeffer</li>\n<li>1 Knoblauchzehe</li>\n<li>ein Spritzer Olivenöl</li>\n</ul>\n\n<h2>Zubereitung</h2>\n\n<ol>\n<li>Schälen Sie den Knoblauch und hacken ihn in grobe Stücke.</li>\n<li>Entfernen Sie den Stiel und die Samen der Paprika, hacken Sie diese dann in grobe Stücke.</li>\n<li>Tun Sie alle Zutaten zusammen in eine Küchenmaschine.</li>\n<li>Pürieren Sie die Zutaten zu einer Paste.</li>\n<li>Wenn Sie einen groben Hummus bevorzugen, pürieren Sie die Zutaten nicht zu lange.</li>\n<li>Wenn Sie einen feinen Hummus haben möchten, pürieren Sie die Zutaten etwas länger.</li>\n</ol>\n\n<p>Für einen etwas anderen Geschmack, probieren Sie kleine Mengen von Zitrone und Koriander, Chilischoten, Limonen und Chipotle-Paprika, Harissa und Minze oder Spinat und Feta-Käse mit hinein zu tun. Experimentieren Sie, um herauszufinden, was Ihnen am besten schmeckt.</p>\n\n<h2>Aufbewahrung</h2>\n\n<p>Bewahren Sie das Hummus in einem geschlossenen Gefäß im Kühlschrank auf. Es sollte sich bis zu einer Woche halten, nachdem Sie es frisch gemacht haben. Wenn es anfängt komisch auszusehen, dann sollten Sie es wegwerfen.</p>\n\n<p>Hummus lässt sich einfrieren. Sie sollten es dann innerhalb einiger Monate wieder auftauen und verbrauchen.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); + +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p> + +<p>Wenn Sie es nicht selber schaffen, dann können Sie mit einem Klick auf <em>Lösung anzeigen</em> sehen, wie es gemacht wird oder unser ausgzeichnetes Beispiel, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a>, auf GitHub anschauen.</p> + +<h3 id="Listen_ineinander_schachteln">Listen ineinander schachteln</h3> + +<p>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:</p> + +<pre class="brush: html"><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> +</pre> + +<p>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:</p> + +<pre class="brush: html"><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> +</pre> + +<p>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:</p> + +<p><img alt="Eine Webseite, auf welcher ein formatiertes Hummus-Rezept zu lesen ist. Es gibt mehrere Elemente die dem Dokument Struktur geben." src="https://mdn.mozillademos.org/files/15529/hummus-rezept-formatiert.jpg" style="border: 1px solid grey; display: block; margin: 0px auto; width: 755px;"></p> + +<h2 id="Betonung_und_Wichtigkeit">Betonung und Wichtigkeit</h2> + +<p>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.</p> + +<h3 id="Betonung">Betonung</h3> + +<p>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 <em>kursiv</em> schreiben. Zum Beispiel haben die folgenden beiden Sätze eine unterschiedliche Bedeutung.</p> + +<p>Ich bin froh, dass du nicht zu spät bist.</p> + +<p>Ich bin <em>froh</em>, dass du nicht <em>zu spät</em> bist.</p> + +<p>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.</p> + +<p>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> + +<pre class="brush: html"><p>Ich bin <em>froh</em> dass du nicht <em>zu spät</em>bist.</p></pre> + +<h3 id="Wichtige_Wörter">Wichtige Wörter</h3> + +<p>Um wichtige Wörter hervorzuheben, betonen wir diese in der gesprochenen Sprache sehr stark und schreiben diese in <strong>Fettschrift</strong> in geschriebener Sprache. Zum Beispiel:</p> + +<p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p> + +<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p> + +<p>In HTML benutzen wir das {{htmlelement("strong")}}-Element (engl.: <em>strong</em> = 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> + +<pre class="brush: html"><p>Diese Flüssigkeit ist <strong>sehr giftig</strong>.</p> + +<p>Ich zähle auf dich. <strong>Sei nicht</strong> zu spät!</p></pre> + +<p>Sie können <code><strong></code>-Elemente und <code><em></code>-Elemente ineinander verschachteln:</p> + +<pre class="brush: html"><p>Diese Flüssigkeit ist <strong>sehr giftig</strong> — +wenn Sie diese trinken, <strong>dann werden Sie <em>sterben</em></strong>.</p></pre> + +<h3 id="Aktives_Lernen_Lassen_Sie_uns_wichtig_sein!">Aktives Lernen: Lassen Sie uns wichtig sein!</h3> + +<p>In diesem Aktives-Lernen-Beispiel, haben wir editierbaren Code. Probieren Sie nun <code><strong></code>-Elemente und <code><em></code>-Elemente einzufügen, um bestimmte Textstellen besonders hervorzuheben. Üben Sie ein wenig, diese HTML-Elemente hinzuzufügen und auch zu verschachteln.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><h1>Wichtige Nachricht</h1> + +<p>Am Sonntag den 9. Januar 2010 wurde eine Gang Goths gesehen, wie sie mehrere Gartenzwerge aus einem Einkaufszentrum, im Stadtzentrum von Milwaukee, geklaut haben. Sie haben alle grüne Anzüge und komische Hüte getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand Informationen zu diesem Vorfall haben, bittet die Polizei darum, kontaktiert zu werden.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 8em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<h1>Wichtige Nachricht</h1>\n<p>Am <strong>Sonntag den 9. Januar 2010</strong>, wurde eine Gang <em>Goths</em> gesehen, wie sie <strong><em>mehrere</em> Gartenzwerge</strong> aus einem Einkaufszentrum, im Stadtzentrum von <strong>Milwaukee</strong> geklaut haben. Sie haben alle <em>grüne Anzüge</em> und <em>komische Hüte</em>, getragen. Sie scheinen sich dabei großartig amüsiert zu haben. Wenn irgendjemand <strong>Informationen</strong> zu diesem Vorfall haben, bittet die Polizei darum, <strong>sofort</strong> kontaktiert zu werden.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p> + +<h3 id="Kursiv_fett_unterstrichen...">Kursiv, fett, unterstrichen...</h3> + +<p>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.:<em><strong>b</strong>old</em>), kursiv (engl.:<em><strong>i</strong>talic</em>) oder unterstrichen (engl.:<em><strong>u</strong>nderlined</em>) 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 <strong>präsentationsbezogenes Element</strong>. 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.</p> + +<p>In HTML5 wurden <code><b></code>, <code><i></code> und <code><u></code> neu definiert, mit einer etwas verwirrenden semantischen Bedeutung.</p> + +<p>Hier ist die beste Faustregel dafür: es ist wahrscheinlich in Ordnung <code><b></code>, <code><i></code> oder <code><u></code> 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.</p> + +<ul> + <li>{{HTMLElement('i')}} wird benutzt, um die traditionelle Rolle von kursivem Text anzuzeigen: Fremdwörter, Taxonomische Begriffe, Fachwörter, Gedanken...</li> + <li>{{HTMLElement('b')}} wird benutzt, um die traditionelle Rolle von fettem Text anzuzeigen: Stichwörter, Produktnamen, wichtige Sätze...</li> + <li>{{HTMLElement('u')}} wird benutzt, um die traditionelle Rolle von unterstrichenem Text anzuzeigen: richtige Namen, Rechtschreibfehler...</li> +</ul> + +<div class="note"> +<p><strong>Hinweis:</strong>Eine Warnung zu unterstrichenem Text: <strong>Unterstrichener Text wird stark mit Hyperlinks assoziiert.</strong> Deswegen ist es auf Webseiten besser, nur Links zu unterstreichen. Benutzen Sie das <code><u></code>-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.</p> +</div> + +<pre class="brush: html"><!-- 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></pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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 <a href="/en-de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Hyperlinks erstellt</a>, das wichtigste Element im Internet.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/einführung_in_html/erstellen_von_hyperlinks/index.html b/files/de/learn/html/einführung_in_html/erstellen_von_hyperlinks/index.html new file mode 100644 index 0000000000..d27bf253a4 --- /dev/null +++ b/files/de/learn/html/einführung_in_html/erstellen_von_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlegende Kenntnisse in HTML und Textformatierung, wie Sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lerne HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformattierung mit HTML</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Lernen wie man sinnvoll Hyperlinks einsetzt.</td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_ein_Hyperlink">Was ist ein Hyperlink?</h2> + +<p>Hyperlinks sind eine der Erfindungen, welche das <em>Internet</em> zu einem einzigen zusammenhängenden Netzwerk machen. Sie sind von Beginn an ein Teil des Netzes (engl. "<em>web</em>") 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.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: 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.</p> +</div> + +<p>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.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Aufbau_eines_Links">Aufbau eines Links</h2> + +<p>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> + +<pre class="brush: html"><p>Ich erstelle einen Link zu der +<a href="https://www.mozilla.org/en-US/"> Mozilla Webseite</a>. +</p></pre> + +<p>Dies gibt das folgende Resultat:</p> + +<p>Ich erstelle einen Link zu der <a class="ignore-external" href="https://www.mozilla.org/en-US/">Mozilla Webseite</a>.</p> + +<h3 id="Das_title-Attribut">Das <code>title</code>-Attribut</h3> + +<p>Ein weiteres Attribut welches Sie ihren Links womöglich hinzufügen möchten ist <code>title</code>. Darin können Sie Zusatzinformationen zu dem Link angeben. Als Beispiel:</p> + +<pre class="brush: html"><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></pre> + +<p>Das gibt das folgende Resultat (der Text aus dem <code>>title<</code>-Attribut wird als Tooltip angezeigt, wenn man mit dem Mauszeiger darüberfährt):</p> + +<p>Ich erstelle einen Link zu der <a class="ignore-external" 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> + +<div class="note"> +<p><strong>Hinweis</strong>: Der Text aus dem <code>>title<</code>-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.</p> +</div> + +<h3 id="Aktives_Lernen_Erstellen_Sie_Ihren_einen_Hyperlink">Aktives Lernen: Erstellen Sie Ihren einen Hyperlink</h3> + +<p>Es ist Zeit das gelernte in die Praxis umzusetzen: Erstellen Sie bitte ein neues HTML-Dokument lokal in Ihrem Code-Editor. (<a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">das Dokument könnte so aussehen</a>)</p> + +<ul> + <li>Erstellen Sie innerhalb des <code>body</code>-Elements ein paar Absätze oder andere Inhalte, so wie Sie es in den vorherigen Artikeln gelernt haben.</li> + <li>Machen Sie aus einigen der Inhalte nun Hyperlinks.</li> + <li>Ergänzen Sie <code>title</code>-Attribute.</li> +</ul> + +<h3 id="Blockelemente_als_Links">Blockelemente als Links</h3> + +<p>Wie oben schon erwähnt, können Sie fast alle Inhalte in Links umwandeln, auch <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML/Lerne_HTML_kennen#Blockelemente_und_Inlineelemente">Blockelemente</a> könne als Verweise fungieren. So könne Sie zum Beispiel ein Bild in einen Link umwandeln indem Sie es in <code><a></a></code> Tags einbetten.</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/de/"> + <img src="mozilla-image.png" alt="Mozilla Logo welches zur Mozilla Webseite verlinkt"></a> +</pre> + +<p class="note"><strong>Hinweis</strong>: Sie werden mehr über das Einbinden von Bildern auf Webseiten in einem späteren Artikel erfahren.</p> + +<h2 id="Kurzer_Exkurs_zu_URLs_und_Linkpfaden">Kurzer Exkurs zu URLs und Linkpfaden</h2> + +<p>Um Linkziele vollständig zu verstehen, müssen Sie zuerst lernen wie URLs und Dateipfade funktionieren.</p> + +<p>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 <code>https://www.mozilla.org/de/</code> zu finden.</p> + +<p>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 <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">Erstellen von Hyperlinks</a> an).</p> + +<p><img alt="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" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>Das <strong>Stammverzeichnis</strong>, englisch <strong>root (=> Wurzel)</strong>, dieses Verzeichnisses wurde <code>creating-hyperlinks</code> 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 <code>index.html</code> und eine <code>contacts.html</code>-Datei. Auf einer echten Webseite wäre <code>index.html</code> die Startseite, also die Einstiegsseite zu unserer Internetpräsenz.</p> + +<p>Es gibt auch zwei Verzeichnisse in unserem Stammverzeichnis, namens <code>pdfs</code> und <code>projects</code>. Diese enthalten jeweils eine einzelne Datei, einmal eine PDF-Datei (<code>project-brief.pdf</code>) und eine <code>index.html</code>-Datei. Sie sehen, man kann mehrere <code>index.html</code>-Dateien in einem Webprojekt haben, so lange diese in unterschiedlichen Verzeichnissen sind. Die zweite <code>index.html</code>-Datei könnte hier als Einstiegsseite zu projektbezogenen Informationen dienen.</p> + +<ul> + <li> + <p><strong>Verlinkung im selben Verzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei einen Link zu der <code>contacts.html</code>-Datei setzen möchten, welche beide im selben Verzeichnis sind, dann müssen Sie nur den Dateinamen angeben. Die URL die Sie zur Verlinkung benutzen ist also <code>contacts.html</code>:</p> + + <pre class="brush: html"><p>Möchten Sie Kontakt mit uns augfnehmen? +Finden Sie unsere Kontaktinformationen auf unserer <a href="contacts.html">Kontakt-Seite</a>.</p></pre> + </li> + <li> + <p><strong>Verlinkung in ein Unterverzeichnis</strong>: Wenn Sie von der <code>index.html</code>-Datei im Stammverzeichnis mit einem Link auf die <code>index.html</code>-Datei verweisen möchten, welche in dem Unterverzeichnis <code>projects</code> liegt, dann schreiben Sie das in der URL folgendermaßen: <code>projects/index.html</code> Die Adresse besteht aus dem Namen des Unterverzeichnis, einem Slash und der Zieldatei in dem Verzeichnis:</p> + + <pre class="brush: html"><p>Besuchen Sie meine <a href="projects/index.html">Projekt Homepage</a>.</p></pre> + </li> + <li> + <p><strong>Verlinkung in ein höheres Verzeichnis</strong>: Wenn Sie einen Hyperlink von der <code>projects/index.html</code>-Datei zu der <code>pdfs/projects-brief.pdf</code>-Datei setzen möchten, dann müssen Sie ein Verzeichnislevel hoch gehen, um von dort in das Verzeichnis <code>pdfs</code> zu gelangen. Sie gehen in der Verzeichnisstruktur hoch, indem Sie zwei Punkte angeben - <code>..</code>. Die vollständige URL würde als wie folgt aussehen: <code>../pdfs/projects-brief.pdf</code></p> + + <pre class="brush: html"><p>Ein Link zu meiner <a href="../pdfs/project-brief.pdf">Projektbeschreibung</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Hinweis</strong>: Sie können mehrere Schritte kombinieren und so komplexe URL-Pfade angeben, zum Beispiel <code>../../../komplexer/pfad/zu/meiner/datei.html</code>.</p> +</div> + +<h3 id="Innerhalb_eines_Dokuments_verlinken">Innerhalb eines Dokuments verlinken</h3> + +<p>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: +</p> + +<pre class="brush: html"><h2 id="postanschrift">Postanschrift</h2></pre> + +<p>Um zu dieser bestimmten <code>id</code> zu verlinken, können Sie diese am Ende der URL angeben. Sie müssen nur ein Hash- bzw. Rautesymbol davorsetzen, zum Beispiel so:</p> + +<pre class="brush: html"><p>Möchten Sie uns einen Brief schicken? Schreiben Sie an unsere <a href="contacts.html#postanschrift">Postanschrift</a>.</p></pre> + +<p>Sie können diese Art der Referenz auch benutzen, um <em>innerhalb des selben Dokumentes zu verlinken</em>:</p> + +<pre class="brush: html"><p>Unsere <a href="#postanschrift">Postanschrift</a> kann am Ende der Webseite gefunden werden. </p></pre> + +<h3 id="Absolute_und_relative_URLs">Absolute und relative URLs</h3> + +<p>Zwei Begriffe denen Sie im Internet begegnen werden sind <strong>absolute URL</strong> und <strong>relative URL:</strong></p> + +<p><strong>Absolute URL</strong>: Leitet zu einer absoluten, festen Adresse im Internet, inklusive {{glossary("protocol")}} und {{glossary("domain name")}}. Wenn zum Beispiel die HTML-Datei <code>index.html</code> in ein Verzeichnis namens <code>projects</code> hochgeladen wird, welches wiederum im Stammverzeichnis eines Webservers liegt und der Domain Name der Webseite <code>http://www.example.com</code> ist, dann lautet die absolute Adresse der Webseite <code>http://www.example.com/projects/index.html</code>.</p> + +<p>Die absolute URL wird immer zu genau der selben Adresse im Internet zeigen, egal wo sie sich befindet.</p> + +<p><strong>Relative URL</strong>: Zeigt zu einem Verzeichnis <em>realtiv</em> 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 <code>http://www.example.com/projects/index.html</code> zu einer PDF-Datei im selben Verzeichnis verlinken möchten, dann brauchen wir nur den Dateinamen angeben (z.B.: <code>project-brief.pdf</code>). Wenn diese PDF-Datei in dem Unterverzeichnis <code>pdfs</code> liegt, welches wiederum in dem Verzeichnis <code>projects</code> zu finden ist, dann würde die relative Adresse wie folgt aussehen: <code>pdfs/project-brief.pdf</code>. Die äquivalente absolute Adresse für die PDF-Datei wäre <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<p>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 <code>index.html</code>-Datei aus dem <code>projects</code> Verzeichnis in das Stammverzeichnis der Webseite verschieben würden, dann würde die relative URL <code>pdfs/project-brief.pdf</code> darin auf <code>http://www.example.com/pdfs/project-brief.pdf</code> verweisen und nicht mehr auf <code>http://www.example.com/projects/pdfs/project-brief.pdf</code> +</p> + +<h2 id="Nutzen_von_Links">Nutzen von Links</h2> + +<p>Wie man Links am besten benutzt und ein angenehmes Nutzererlebnis schafft, werden wir uns nun anschauen.</p> + + +<h3 id="Klare_Benennung_von_Links">Klare Benennung von Links</h3> + +<p>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:</p> + +<ul> + <li>Benutzer von Bilschirmlesegeräten springen von Link zu Link auf der Webseite und diese werden ohne Zusammenhang vorgelesen.</li> + <li>Suchmaschinen benutzen Linktext um die Zieldateien zu indexieren, es ist also gut, wenn der Linktext Schlagwörter enthält die mit dem Inhalt des verlinkten Dokumentes zu tun haben.</li> + <li>Leser der Webseite scannen die Webseite zuerst durch, anstatt sie direkt Wort für Wort zu lesen. Dabei werden die Augen von hervorgehobenem Text, wie zum Beispiel Links angezogen. Beschreibender Linktext ist sinnvoll, zum schnellen Verständnis worum es auf der Webseite geht.</li> +</ul> + +<p>Schauen wir uns ein Beispiel an:</p> + +<p><em><strong>Guter</strong> Linktext:</em> <a href="https://firefox.com">Firefox herunterladen</a></p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Firefox herunterladen +</a></p></pre> + +<p><em><strong>Schlechter</strong> Linktext:</em> <a href="https://firefox.com/">Klicke hier</a> um Firefox herunterzuladen</p> + +<pre class="brush: html"><p><a href="https://firefox.com/"> + Klicke hier +</a> +um Firefox herunterzuladen</p> +</pre> + +<p>Weitere Tipps:</p> + +<ul> + <li>Wiederholen Sie nicht die URL als Teil des Linktextes, URLs sehen nicht schön aus und Bildschirmlesegeräte geben diese Buchstabe für Buchstabe aus.</li> + <li>Schreiben Sie nicht "Link" oder "Link zu" in ihrem Linktext. Bildschirmlesegeräte sagen das es sich um einen Link handelt und der Link ist normalerweise als solcher gut zu erkennen. Denn Links sind normalerweise auf eine Weise gestaltet, die sie von der Umgebung absetzt, in einer anderen Farbe und unterstrichen. Diese Konvention sollte auch beibehalten werden, Links sollten immer als solche auf den ersten Blick zu erkennen sein.</li> + <li>Halten Sie den Linktext so kurz wie möglich - lange Linktexte sind besonders für Benutzer von Bildschirmlesegeräten nervend, denn der Linktext wird immer komplett vorgelesen.</li> + <li>Vermeiden Sie es den selben Linktext für mehrere Links zu benutzen, die auf unterschiedliche Dokumente verweisen. Benutzer von Bildschirmlesegeräten wird die Navigation erschwert, wenn ihnen mehrmals der Linktext "Klicken Sie hier" vorgelesen wird.</li> +</ul> + +<h3 id="Benutzen_Sie_relative_Links">Benutzen Sie relative Links</h3> + +<p>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 <em>selben Webseite</em> verlinken. Um eine <em>andere Webseite</em> zu verlinken müssen Sie natürlich absolute Links benutzen.</p> + +<ul> + <li>Zum einen ist es einfacher den Code später zu lesen und verstehen, denn relative URLs sind meistens viel kürzer als absolute URLs.</li> + <li>Zum anderen ist es effizienter relative URLs zu benutzen und die Webseite wird insgesamt schneller. Wenn Sie eine absolute URL benutzen, dann wird der Browser eine Anfrage an den Domain Name Server ({{glossary("DNS")}} senden, um herauszufinden, wo die Webseite zu finden ist, was Zeit und Ressourcen in anspruch nimmt (lesen Sie <a href="/de/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Wie das Internet funktioniert</a> um mehr darüber zu erfahren). +Bei einer relativen URL schaut der Browser direkt auf dem selben Server nach der Datei, was um einiges schneller geht, als den Umweg über DNS zu gehen.</li> +</ul> + +<h3 id="Klare_Verlinkung_zu_Dateien_die_keine_HTML-Dateien_sind">Klare Verlinkung zu Dateien die keine HTML-Dateien sind</h3> + +<p>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:</p> + +<ul> + <li>Wenn Sie eine langsame Internetverbindung haben, einen Link anklicken und auf einmal eine mehrere Megabyte große Datei heruntergeladen wird.</li> + <li>Wenn Sie keinen Flashplayer installiert haben, auf einen Link klicken und auf einmal auf einer Webseite sind, auf der Flash genutzt wird.</li> +</ul> + +<p>Lassen Sie uns ein paar Beispiele anschauen, was für ein Linktext hier genutzt werden kann:</p> + +<pre class="brush: html"><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></pre> + +<h3 id="Benutzen_Sie_das_download-Attribut_um_auf_herunterladbare_Dateien_zu_verlinken">Benutzen Sie das download-Attribut um auf herunterladbare Dateien zu verlinken</h3> + +<p>Wenn Sie auf eine Datei verlinken, die heruntergeladen werden sollte, anstatt im Browser geöffnet zu werden, können Sie das <code>download</code>-Attribut benutzen, um den Namen der gespeicherten Datei vorzugeben. Hier ist ein Beispiel mit einem Download-Link zu der Windows-Version von Firefox 39:</p> + +<pre class="brush: html"><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></pre> + +<h2 id="Aktives_Lernen_Erstellen_Sie_ein_Navigationsmenu">Aktives Lernen: Erstellen Sie ein Navigationsmenu</h2> + +<p>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.</p> + +<p>Sie müssen sich lokale Kopien der folgenden vier Seiten machen. Speichern Sie alle in dem selben Verzeichnis (auf GitHub finden Sie unter <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a> die Liste der benötigten Dateien im Verzeichnis):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Aufgaben:</p> + +<ol> + <li>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.</li> + <li>Verändern Sie jeden Seitennamen in einen Link.</li> + <li>Kopieren Sie das fertige Navigationsmenü und fügen es auf alle Seiten ein. </li> + <li>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.</li> +</ol> + +<p>Wenn Sie fertig sind, dann sollte die Webseite wie folgt aussehen:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Hinweis</strong>: Falls Sie stecken bleiben und nicht weiter wissen, dann können Sie sich unsere korrekte Lösung anschauen: <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a></p> +</div> + +<h2 id="E-mail_Links">E-mail Links</h2> + +<p>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 <code>mailto:</code> URL Schema benutzt.</p> + +<p>In seiner einfachsten und am meisten genutzten Form, gibt ein <code>mailto:</code> Link einfach nur die E-Mail Adresse des Empfängers an. Beispiel:</p> + +<pre class="brush: html"><a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a> +</pre> + +<p>Damit erstellen Sie einen Link der folgendermaßen aussieht: +<a href="mailto:niemand@mozilla.org">Senden Sie eine E-Mail an Niemand</a>.</p> + +<p>Tatsächlich ist auch die angabe einer E-Mail Adresse optional. Wenn Sie diese weglassen, also nur <code>mailto:</code> schreiben, dann wird eine neue ausgehende E-Mail erstellt, ohne einen vorgegebenen Empfänger. Dies kann genutzt werden, um <em>Teilen</em>-Links zu erstellen, bei denen Benutzer eine E-Mail an Freunde schicken können.</p> + +<h3 id="Details_angeben">Details angeben</h3> + +<p>Ausser der E-Mail Adresse können Sie auch andere Informationen angeben. Alle Standard E-Mail Kopffelder können über <code>mailto</code> vorausgefüllt werden, dazu gehören <em>subject</em> (Betreff), <em>cc</em> und <em>body</em> (Um eine vorgegeben Nachricht anzuzeigen). </p> + +<p>Hier ist ein Beispiel das cc, bcc, subject und body beinhaltet:</p> + +<pre class="brush: html"><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></pre> + +<div class="note"> +<p><strong>Hinweis:</strong> 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 (<code>?</code>), 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.</p> +</div> + +<p>Hier sind noch ein paar Beispiele für <code>mailto</code> URLs:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:niemand@mozilla.org">mailto:niemand@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org,nobody@mozilla.org">mailto:niemand@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org">mailto:niemand@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:niemand@mozilla.org?cc=nobody@mozilla.org&subject=Dies%20ist%20der%20Betreff">mailto:niemand@mozilla.org?cc=nobody@mozilla.org&subject=Dies%20ist%20der%20Betreff</a></li> +</ul> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/einführung_in_html/fehlersuche_in_html/index.html b/files/de/learn/html/einführung_in_html/fehlersuche_in_html/index.html new file mode 100644 index 0000000000..3e3223016e --- /dev/null +++ b/files/de/learn/html/einführung_in_html/fehlersuche_in_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td> + <p>Grundkenntnisse in HTML, wie sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a> abgedeckt werden.</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Keine_Angst_vor_der_Fehlersuche">Keine Angst vor der Fehlersuche</h2> + +<p>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 <a href="https://www.rust-lang.org/">Rust</a>, ausgegeben wurde.</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> "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 <code>println!(Hello, world!");</code> 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.</p> + +<h2 id="Begriffserklärungen_Fehlerbehebung">Begriffserklärungen Fehlerbehebung</h2> + +<p>Im Computerbereich wurden viele <strong>Begriffe aus dem Englischen übernommen</strong>, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch <strong>Debugging</strong> genannt. Der Fehler im Code wird im Englischen als <strong>Bug</strong> bezeichnet, was soviel wie <em>Ungeziefer</em> bedeutet. Das <em>Debugging</em> ist dann das <em>Entfernen des Ungeziefers</em> Als <strong>Debugger</strong> wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.</p> + +<p>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.</p> + +<h2 id="HTML_und_Debugging">HTML und Debugging</h2> + +<p>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 <strong>permissiv</strong>. 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.</p> + +<h3 id="Permissiver_Code">Permissiver Code</h3> + +<p>Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:</p> + +<ul> + <li><strong>Syntaxfehler</strong>: Dies sind Schreibfehler im Code, welche bewirken, dass das Programm nicht läuft, wie das obige Beispiel in Rust. Syntaxfehler sind leicht zu finden und zu beheben, wenn man mit der entsprechenden Programmierprache vertraut ist und man weiß, wie man Fehlermeldungen interpretiert.</li> + <li><strong>Logische Fehler</strong>: Diese Fehler treten auf, wenn die Syntax korrekt ist, der Code aber nicht das tut, was er tun soll. Das Programm läuft, aber nicht so wie erwartet. Logische Fehler sind schwieriger zu beheben, weil es keine Fehlermeldung gibt, die einen zu der Fehlerquelle führt.</li> +</ul> + +<p>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.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: 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.</p> +</div> + +<h3 id="Aktives_Lernen_Permissiven_Code_untersuchen">Aktives Lernen: Permissiven Code untersuchen</h3> + +<p>Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.</p> + +<ol> + <li>Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.</li> + <li>Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: <img alt="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. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an: + <pre class="brush: html"><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></pre> + </li> + <li>Lassen Sie uns die Probleme erläutern: + <ul> + <li>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.</li> + <li>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.</li> + <li>Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.</li> + <li>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.</li> + </ul> + </li> + <li>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: <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Entdecken Sie die Web Developer Tools</a></li> + <li>In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: <img alt="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." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>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 <em>sollten</em> zu dem selben Resultat kommen.): + <ul> + <li>Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.</li> + <li>Es ist nicht klar, wo das erste <code><strong></code>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <code><strong></code>-Tag versehen, bis zum Ende des Dokumentes!</li> + <li>Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst: + <pre class="brush: html"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus: + <pre class="brush: html"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="HTML_Validation">HTML Validation</h3> + +<p>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?</p> + +<p>Die beste Strategie ist es, das HTML-Dokument von dem <a href="https://validator.w3.org/">Markup Validation Service</a> ü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.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen</p> + +<h3 id="Aktives_lernen_Validieren_eines_HTML-Dokumentes">Aktives lernen: Validieren eines HTML-Dokumentes</h3> + +<p>Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">Beispieldokument hier</a>.</p> + +<ol> + <li>Öffnen Sie als Erstes den <a href="https://validator.w3.org/">Markup Validation Service</a> in einem anderen Browser-Tab.</li> + <li>Gehen Sie zu dem <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> Tab. Dort kann man direkt HTML-Code überprüfen.</li> + <li>Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.</li> + <li>Klicken Sie auf <em>Check</em>.</li> +</ol> + +<p>Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Die_Fehlermeldungen_richtig_interpretieren">Die Fehlermeldungen richtig interpretieren</h4> + +<p>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.</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Diese Fehlermeldung zeigt an, dass ein Element offen ist, welches eigentlich geschlossen werden sollte. Die line/column Informationen zeigen auf die erste Zeile, welche nach dem nicht vorhandenen geschlossenen Tag sein sollte. Dies hilft uns zu sehen, was falsch ist.</li> + <li>"Unclosed element <code>strong</code>": Diese Fehlermeldung ist einfach zu verstehen. Ein {{htmlelement("strong")}} Element wurde nicht geschlossen und die Zeilen und Spaltennummern deuten direkt auf den Fehler.</li> + <li>"End tag <code>strong</code> violates nesting rules": An der angegebenen Possition wurden Elemente falsch verschachtelt.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": Diese Fehlermeldung ist etwas kryptisch. Es zeigt auf, das ein Attribut irgendwo nicht richtig geformt wurde, vermutlich eher am Ende des Dokumentes, denn das Ende des Dokumentes ist innerhalb des Attribut-Wertes. Da der Browser den Link gar nicht darstellt, könnte hier der Fehler liegen.</li> + <li>"End of file seen and there were open elements": Diese Fehlermeldung sagt uns einfach nur, das es offene Elemente im Dokument gibt, welche geschlossen werden müssen. Die Zeilennummern deuten auf die letzten paar Zeilen im Dokument und diese Meldung kommt mit einer Zeile Code, die ein Beispiel dafür im Dokument aufzeigt. + <pre>Beispiel: <a href="https://www.mozilla.org/>Link zur Mozilla Homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Hinweis</strong>: Ein Attributwert, bei welchem geschlossene Anführungszeichen fehlen ist ein offenes Element, da der Rest des Dokumentes als der Wert des Attributes gelesen wird.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>": Diese Meldung ist nicht hilfreich, da das {{htmlelement("ul")}}-Element <em>richtig</em> geschlossen wurde. Der Fehler kommt von dem nicht geschlossenen {{htmlelement("a")}}-Element, da dort die schließenden Anführungszeichen, bei einem der Attributwerte fehlen.</li> +</ul> + +<p><span>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. </span></p> + +<p><span>Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner: </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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.</p> + +<p>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: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Aufgabe: Formatieren eines Briefes</a></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> + +<p> </p> diff --git a/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/index.html b/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/index.html new file mode 100644 index 0000000000..1075d63f66 --- /dev/null +++ b/files/de/learn/html/einführung_in_html/fortgeschrittene_textformatierung/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Es gibt viele weitere Elemente in HTML zum formatieren von Text, die wir nicht in unserem Artikel <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Grundlegende HTML Kenntnisse, wie sie in den vorhergehenden Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> abgedeckt werden.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Kennenlernen von weniger bekannten HTML-Elementen, um Text anspruchsvoll zu formatieren.</td> + </tr> + </tbody> +</table> + +<h2 id="<dl>_-_Beschreibungslisten"><dl> - Beschreibungslisten</h2> + +<p>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 <strong>Beschreibungslisten</strong> (engl.: "<strong>d</strong>escription <strong>l</strong>ists"). Mit dem <code>dl</code>-Element lässt sich eine Liste von Begriffen (<strong>l</strong>ist <strong>t</strong>erm) <code>lt</code> erstellen, welchen eine Beschreibung (engl. "<strong>d</strong>escription") <code>dd</code> 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:</p> + +<pre>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.</pre> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>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.</p> + +<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> + +<p>Es ist möglich mehrere Beschreibungen zu einem einzigen Begriff anzugeben:</p> + +<dl> + <dt>Beiseitesprechen</dt> + <dd>Das Beiseitesprechen oder A-part-Sprechen ist ein Stilmittel des Theaters.</dd> + <dd>Eine Bühnenfigur sagt etwas, das ihre Dialogpartner nicht mitbekommen, wohl aber das Publikum.</dd> +</dl> + +<h3 id="Aktives_Lernen_Eine_Beschreibungsliste_erstellen">Aktives Lernen: Eine Beschreibungsliste erstellen</h3> + +<p>Jetzt sind Sie dran: erstellen Sie eine Beschreibungsliste. Fügen Sie zu dem Text im <em>Input</em>-Feld unten die entsprechenden HTML-Elemente ein, so wie Sie es gerade gelernt haben. Im <em>Output</em>-Feld können Sie sehen, wie das Ergebnis im Browser angezeigt wird.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input">Bacon +Das was die Welt im Inneren zusammen hält. +Eier +Das was den Kuchen im Inneren zusammen hält. +Kaffee +Das Getränk welches die Welt am laufen hält. +Eine bräunliche Farbe, desto dunkler umso stärker. +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>Das was die Welt im Inneren zusammen hält.</dd>\n <dt>Eier</dt>\n <dd>Das was den Kuchen im Inneren zusammen hält.</dd>\n <dt>Kaffee</dt>\n <dd>Das Getränk welches die Welt am laufen hält. +</dd>\n <dd>Eine bräunliche Farbe, desto dunkler umso stärker.</dd>\n</dl>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_1', 700, 500) }}</p> + +<h2 id="Zitate">Zitate</h2> + +<p>Mit HTML lassen sich auch Zitate als solche Kennzeichnen. Sie können entweder Blockzitate verwenden oder aber im Fließtext direkt Zitate einbinden.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> 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 <code>blockquote</code> und <code>q</code> und die Abkürzung für "citation" <code>cite</code>.</p> +</div> + +<h3 id="<blockquote>_-_Blockzitate"><blockquote> - Blockzitate</h3> + +<p>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 <code><blockquote></code>-Element:</p> + +<pre class="brush: html"><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></pre> + +<p>Um dies in ein Blockzitat zu verwandeln, machen wir einfach folgendes:</p> + +<pre class="brush: html"><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></pre> + +<p>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:</p> + +<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> + +<h3 id="<q>_-_Inline_Zitate"><q> - Inline Zitate</h3> + +<p>Inline Zitate (Zitat = engl.: "<strong>q</strong>uote") funktionieren ganz ähnlich. Wir benutzen das {{htmlelement("q")}}-Element, um diese zu kennzeichnen. Unser Beispiel unten enthält ein Zitat von der <code><q></code>-Seite:</p> + +<pre class="brush: html"><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></pre> + +<p>Browser werden ein Zitat als normalen Text, welcher in Anführungszeichen eingepackt ist, anzeigen:</p> + +<p>Das Zitat-Element — <code><q></code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">indiziert, dass es sich bei dem eingeschlossenen Text um ein kurzes Zitat handelt.</q></p> + +<h3 id="<cite>_-_Quellenangabe"><cite> - Quellenangabe</h3> + +<p>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 <code>cite</code>-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> + +<pre class="brush: html"><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></pre> + +<p>Die <code>cite</code>-Elemente werden standardmäßig in kursiver Schrift angezeigt. Sie können diesen Code auch auf GitHub als <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a> Beispiel anschauen.</p> + +<h3 id="Aktives_lernen_Wer_hat_das_gesagt">Aktives lernen: Wer hat das gesagt?</h3> + +<p>Es ist Zeit für eine weitere Übung! Bitte lösen Sie die folgenden Aufgaben:</p> + +<ol> + <li>Ändern Sie den mittleren Absatz in ein Blockzitat, weches ein <code>cite</code>-Attribut besitzt.</li> + <li>Ändern Sie einen Teil des dritten Absatzes in ein Inline Zitat, welches ebenfalls ein <code>cite</code>-Attribut besitzt.</li> + <li>Fügen Sie jedem Link ein <code><cite></code>-Element hinzu.</li> +</ol> + +<p>Suchen Sie selbst online nach den richtigen Quellen für diese Zitate.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>Hallo und willkommen zu meiner Motivations-Webseite. Wie Konfuzius einmal sagte:</p> + +<p>It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.</p> + +<p>Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel "The Need To Eliminate Negative Self Talk" in Affirmations for Positive Thinking erklärt wird).</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p>Hallo und willkommen zu meiner Motivations-Webseite. Wie <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Konfuzius</cite></a> einmal gesagt hat:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop. Auf deutsch: Es ist egal wie langsam du gehst, so lange du nicht anhältst.</p>\n</blockquote>\n\n<p>Ich mag auch das Konzept des positiven Denkens und versuche negative Selbstkritik zu vermeiden (wie im Artikel <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a> erklärt wird).</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="<abbr>_-_Abkürzungen"><abbr> - Abkürzungen</h2> + +<p>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> + +<pre><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></pre> + +<p>Dies wird wie folgt im Browser ausgegeben (der volle Text der Abkürzungen wird angezeigt, wenn der Mauszeiger darüber gefahren wird):</p> + +<p>Wir nutzen <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> + +<div class="note"> +<p><strong>Hinweis</strong>: Es gibt ein weiteres Element, {{htmlelement("acronym")}}, welches das selbe tut wie <code><abbr></code>, 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 <code><abbr></code> zu nutzen.</p> +</div> + +<h3 id="Aktives_lernen_Eine_Abkürzung_kennzeichnen">Aktives lernen: Eine Abkürzung kennzeichnen</h3> + +<p>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.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"><p>Die NASA bringt uns den Sternen näher.</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 5em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> bringt uns den Sternen näher.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Kontaktdaten_markieren">Kontaktdaten markieren</h2> + +<p>HTML hat ein Element, um Kontaktdaten zu markieren — {{htmlelement("address")}}. Beispiel:</p> + +<pre class="brush: html"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>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:</p> + +<pre class="brush: html"><address> + <p>Webseite erstellt von <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Hochstellen_und_tiefstellen_von_Text">Hochstellen und tiefstellen von Text</h2> + +<p>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> + +<pre class="brush: html"><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></pre> + +<p>Der Code wird wie folgt gerendert:</p> + +<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> + +<h2 id="Computercode_darstellen">Computercode darstellen</h2> + +<p>Es gibt ein paar Elemente mit denen man Computercode darstellen kann:</p> + +<ul> + <li>{{htmlelement("code")}}: Um normalen Computercode darzustellen.</li> + <li>{{htmlelement("pre")}}: Um Leerzeichen mit darzustellen, welche im Code genutzt werden, um Codeblöcke voneinander abzugrenzen. Normalerweise würde der Browser mehr als 1 Leerzeichen ignorieren und zu einem einzigen zusammen fassen, wenn der Text in <code><pre></pre></code> Tags eingepackt ist, dann bleiben die Leerzeichen erhalten.</li> + <li>{{htmlelement("var")}}: Um Variabelnamen zu markieren.</li> + <li>{{htmlelement("kbd")}}: Um Tastatureingaben darzustellen.</li> + <li>{{htmlelement("samp")}}: Um das Ergebnis eines Computerprogramms zu markieren.</li> +</ul> + +<p>Schauen wir uns ein paar Beispiele an. Hiermit können Sie ein wenig herum experimentieren (sie können auch diese Kopie davon herunterladen <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: 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></pre> + +<p>Der obige Code sollte im Browser folgendermaßen aussehen:</p> + +<p>{{ EmbedLiveSample('Computercode_darstellen','100%',300) }}</p> + +<h2 id="Zeit_und_Datum_markieren">Zeit und Datum markieren</h2> + +<p>HTML stellt auch das {{htmlelement("time")}} zur Verfügung, um Zeit und Datum so darzustellen, das auch Computer diese lesen können. Beispiel:</p> + +<pre class="brush: html"><<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 Januar 2016</<span class="pl-ent">time</span>></pre> + +<p>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:</p> + +<ul> + <li>20 Januar 2016</li> + <li>20th Januar 2016</li> + <li>Jan 20 2016</li> + <li>20/06/16</li> + <li>06/20/16</li> + <li>The 20th of next month</li> + <li><span lang="fr">20e Janvier 2016</span></li> + <li><span lang="ja">2016年1月20日</span></li> + <li>Und so weiter</li> +</ul> + +<p>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.</p> + +<p>Das grundlegende Beispiel oben zeigt ein einfaches, vom Computer lesbares Datum. Aber es gibt mehr verschiedene Optionen, zum Beispiel:</p> + +<pre class="brush: html"><!-- Jahr-Monat-Tag --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20<span class="pl-pds">"</span></span>>20 Januar 2016</<span class="pl-ent">time</span>> +<!-- Nur Jahr und Monat --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01<span class="pl-pds">"</span></span>>January 2016</<span class="pl-ent">time</span>> +<!-- Nur Monat und Tag --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>01-20<span class="pl-pds">"</span></span>>20 January</<span class="pl-ent">time</span>> +<!-- Nur die Zeit, Stunden:Minuten --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>19:30<span class="pl-pds">"</span></span>>19:30</<span class="pl-ent">time</span>> +<!-- Man kann auch Sekunden und Millisekunden angeben! --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span></span>19:30:01.856<span class="pl-s"><span class="pl-pds">"</span></span>>19:30:01.856</<span class="pl-ent">time</span>> +<!-- Datum und Uhrzeit --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">"</span></span>>7.30pm, 20 January 2016</<span class="pl-ent">time</span>> +<!-- Datum und Uhrzeit mit Zeitzone --> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-01-20T19:30<span class="pl-pds">+01:00"</span></span>>7.30pm, 20 Januar 2016 ist 8.30pm in Frankreich</<span class="pl-ent">time</span>> +<!-- Eine bestimmte Wochennummer angeben--> +<<span class="pl-ent">time</span> <span class="pl-e">datetime</span>=<span class="pl-s"><span class="pl-pds">"</span>2016-W04<span class="pl-pds">"</span></span>>Die vierte Woche im Jahr 2016</<span class="pl-ent">time</span>></pre> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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 <a href="/de/docs/Web/HTML/Element">HTML-Element Referenz</a> nach, denn dort sind alle HTML-Elemente aufgelistet.<br> + 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!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/de/learn/html/einführung_in_html/index.html b/files/de/learn/html/einführung_in_html/index.html new file mode 100644 index 0000000000..73f46a2614 --- /dev/null +++ b/files/de/learn/html/einführung_in_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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{glossary("HTML")}} ist eine relativ einfache Sprache, die aus <a href="/de/docs/Glossary/Element">Elementen</a> 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.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>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 <a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Notwendige Software installieren</a> beschrieben; und wissen wie Sie Ihre Dateien erstellen und ordnen, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/dateien_nutzen">Dateien nutzen</a> erklärt. Beide Artikel sind Teil unserer Artikelserie <a href="/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a>, welche das Grundwissen abdeckt, welches in diesem Modul vorrausgesetzt wird.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: 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 <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble </a>ausprobieren.</p> +</div> + +<h2 id="Lerneinheiten">Lerneinheiten</h2> + +<p>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.</p> + +<dl> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a></dt> + <dd>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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf der HTML-Datei?</a></dt> + <dd>Der Kopf (<a href="/en-US/docs/Glossary/Head">Head</a>) eines HTML Dokuments ist der Teil, der <strong>nicht</strong> 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).</dd> + <dt><a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a></dt> + <dd>Eine der Hauptaufgaben von HTML ist es, jedem Textteil Informationen zu seiner Bedeutung im Kontext zukommen zu lassen (auch <a href="/en-US/docs/Glossary/Semantics">Semantics</a> 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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks"> Erstellen von Hyperlinks</a></dt> + <dd>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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a></dt> + <dd>Es gibt, neben den im Artikel <a href="/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML/Einfache_Textformatierung_in_HTML">Einfache Textformatierung in HTML</a> 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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struktur in die Webseite bringen</a></dt> + <dd>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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Fehlersuche in HTML</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<p>Die folgenden Übungsaufgaben überprüfen Ihr Verständnis der in den obigen Lerneinheiten behandelten HTML-Grundlagen.</p> + +<dl> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Formatieren Sie einen Brief</a></dt> + <dd>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.</dd> + <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strukturieren Sie eine Webseite</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Webgrundlagen Basiskurs 1 (Englisch)</a></dt> + <dd>Ein exzellenter Kurs der Mozilla Foundation, der viele Inhalte des <em>Einführung in HTML</em> 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.</dd> +</dl> diff --git a/files/de/learn/html/einführung_in_html/lerne_html_kennen/index.html b/files/de/learn/html/einführung_in_html/lerne_html_kennen/index.html new file mode 100644 index 0000000000..0f5354d5d2 --- /dev/null +++ b/files/de/learn/html/einführung_in_html/lerne_html_kennen/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorbereitungen:</th> + <td>grundlegende Computerkenntnisse, <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Installing_basic_software">notwendige Software installiert</a> und wissen wie man <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzt</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Grundwissen über die HTML Sprache erwerben, etwas Praxis beim Schreiben von HTML Elementen erwerben.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Was_ist_HTML">Was ist HTML?</h2> + +<p>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:</p> + +<pre class="notranslate">Meine Katze ist sehr frech.</pre> + +<p>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> + +<pre class="brush: html notranslate"><p>Meine Katze ist sehr frech.</p></pre> + +<h3 id="Aufbau_eines_HTML-Elements">Aufbau eines HTML-Elements</h3> + +<p>Schauen wir uns den Aufbau unseres Paragraphen-Elements ein wenig genauer an.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15443/katze-element.jpg" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>Die Hauptteile unseres Elements sind:</p> + +<ol> + <li><strong>Das öffnende Tag:</strong> Diese besteht aus dem Namen des Elements (in diesem Fall ein <code>p</code> 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.</li> + <li><strong>Der Inhalt:</strong> Dies ist der Inhalt des Elements, in diesem Fall einfach nur Text.</li> + <li><strong>Das schließende Tag:</strong> 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.</li> + <li><strong>Das Element:</strong> Das öffnende Tag, der Inhalt und das schließende Tag gemeinsam ergeben zusammen das Element.</li> +</ol> + +<h3 id="Aktives_Lernen_Erstellen_Sie_Ihr_erstes_HTML-Element">Aktives Lernen: Erstellen Sie Ihr erstes HTML-Element</h3> + +<p>Editieren Sie den Text unten im <em>Input</em>-Feld. Heben Sie den Text mit dem <code><em></code>-Element hervor. (schreiben sie ein <code><em></code>-Tag vor den Text, um das <em>Element zu öffnen</em> und fügen sie ein <code></em></code>-Tag am Ende des Textes an, um das <em>Element zu schließen</em>) Dies sollte den Text <em>kursiv</em> darstellen. Sie sollten die Änderungen live in dem <em>Output</em>-Feld sehen können.</p> + +<p>Wenn Sie einen Fehler machen, können sie mit dem <em>Reset</em>-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 <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input">Dies ist mein Text.</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 2em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<em>Dies ist mein Text.</em>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> + +<h3 id="Elemente_verschachteln">Elemente verschachteln</h3> + +<p>Sie können auch Elemente innerhalb von anderen Elementen erstellen, dies wird <strong>Verschachteln</strong> genannt. Wenn wir hervorheben wollen, das unsere Katze <strong>sehr</strong> schlecht gelaunt ist, können wir das Wort "sehr" in ein <code><strong></code>-Element einbinden, was bedeutet, das dieses Wort fett hervorgehoben werden soll:</p> + +<pre class="brush: html notranslate"><p>Meine Katze ist <strong>sehr</strong> frech.</p></pre> + +<p>Sie müssen allerdings aufpassen, das Sie die Elemente richtig verschachteln: in dem obigen Beispiel haben wir zuerst das <code><p></code>-Element geöffnet, dann das <code><strong></code>-Element geöffnet. Deswegen müssen wir zuerst wieder das <code><strong></code>-Element schließen, bevor wir das <code><p></code>-Element schließen können. Das folgende Beispiel wäre deswegen falsch:</p> + +<pre class="example-bad brush: html notranslate"><p>Meine Katze ist <strong>sehr frech.</p></strong></pre> + +<p>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.</p> + +<h3 id="Blockelemente_und_Inlineelemente">Blockelemente und Inlineelemente</h3> + +<p>Es gibt zwei wichtige Kategorien von Elementen in HTML - Blockelemente und Inlineelemente.</p> + +<ul> + <li>Blockelemente bilden eine sichtbare Box auf der Webseite - sie erscheinen in einer neuen Zeile, egal was für ein Inhalt vor diesem Element steht und aller Inhalt nach diesem Element wird ebenfalls auf eine neue Zeile geschoben. Blockelemente machen die Struktur der Webseite aus, sie repräsentieren Absätze, Listen, Navigationsmenüs oder die Fußzeile. Ein Blockelement kann nicht innerhalb von einem Inlineelement stehen, es kann aber innerhalb anderer Blockelemente sein.</li> + <li>Inlineelemente sind die Elemente welche immer innerhalb eines Blockelements stehen und nehmen nur den Platz direkt innerhalb einer Zeile (engl.: line) ein. Inlineelemente starten keine neue Zeile, normallerweise erscheinen Sie innerhalb eines Textabsatzes. Zum Beispiel sind die Elemente {{htmlelement("strong")}} und {{htmlelement("em")}} Inlineelemente.</li> +</ul> + +<p>Schauen Sie sich folgendes Beispiel an:</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"><em>Erster</em><em>Zweiter</em><em>Dritter</em><p>Vierter</p><p>Fünfter</p><p>Sechster</p></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input { + width: 90%; + height: 4em; + padding: 10px; + border: 1px solid #0095dd; +} + +.output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400) }}</p> + +<p>{{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.</p> + +<div class="note"> +<p><strong>Notiz</strong>: In HTML5 wurden die Elementkategorien neu definiert: die neuen Definitionen finden sie in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Element content categories</a>, (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.</p> +</div> + +<div class="note"> +<p><strong>Notiz</strong>: Sie können auf MDN hilfreiche Referenzseiten finden - für alle <a href="/de/docs/Web/HTML/Block-level_elements">Blockelemente</a> und <a href="/de/docs/Web/HTML/Inline_elements">Inlineelemente</a>.</p> +</div> + +<h3 id="Leere_Elemente">Leere Elemente</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Der Code würde folgende Webseite im Browser anzeigen:</p> + +<p>{{ EmbedLiveSample('Leere_Elemente', 700, 300) }}</p> + +<h2 id="Attribute">Attribute</h2> + +<p>Elemente können auch Attribute enthalten, dass sieht dann so aus:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15463/katze-attribut.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>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.</p> + +<p>In unserem Beispiel ist der <em>Name</em> des Attributes <code>class</code> und <code>editor-note</code> ist der diesem Attribut zugeordnete <em>Wert</em>.</p> + +<p>Ein Attribut sollte immer haben:</p> + +<ol> + <li>Einen Abstand zwischen ihm und dem Elementnamen (oder dem vorherigen Attribut, wenn es mehrere sind).</li> + <li>Den Attributnamen, gefolgt von Gleichheitszeichen</li> + <li>Anführungs- und Schlusszeichen um den Wert. (bsp. <code>"</code><code>editor-note"</code>)</li> +</ol> + +<h3 id="Aktives_Lernen_Hinzufügen_von_Attributen_zu_einem_Element">Aktives Lernen: Hinzufügen von Attributen zu einem Element</h3> + +<p>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:</p> + +<ul> + <li><code>href</code>: Dieses Attribut bestimmt die Webadresse, zu welcher der Link einen leiten soll, wenn man auf diesen klickt. Zum Beispiel könnte das so aussehen: <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: Das <code>title</code> Attribut bestimmt Extrainformationen über den Link, zum Beispiel zu welcher Seite der Link führt. Dies erscheint als Tooltip, wenn man mit der Maus darüber fährt. Beispiel: <code>title="The Mozilla homepage"</code>.</li> + <li><code>target</code>: Das <code>target</code> Attribut bestimmt wie der Link vom Browser geöffnet werden soll. Zum Beispiel bestimmt <code>target="_blank"</code> das die angegebene Webseite in einem neuen Tab geöffnet werden soll. Wenn die Webseite in dem aktuellen Tab geöffnet werden soll, kann man dieses Attribut einfach weglassen, da Browser dies standardmäßig tun.</li> +</ul> + +<p>Editieren Sie unten im <em>Input</em>-Feld die Zeile so, das es ein Link zu Ihrer Lieblingswebseite wird. Als erstes fügen Sie das <code><a></code>-Element hinzu. Danach fügen sie das <code>href</code>-Attribut und das <code>title</code>-Attribut hinzu. Als letztes sagen Sie dem Browser mit dem <code>target</code>-Attribut, das der Link in einem neuen Tab geöffnet werden soll. Sie werden Ihre Veränderungen live im <em>Output</em>-Feld verfolgen können. Wenn Sie fertig sind, sollten Sie einen Link sehen, welcher den Inhalt des <code>title</code>-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 <code>href</code>-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.</p> + +<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input">&lt;p&gt;Ein Link zu meiner Lieblingswebseite.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 3em; + padding: 10px; + border: 1px solid #0095dd; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Ein Link zu meiner <a href="<code>https://www.mozilla.org/</code>" title="The Mozilla homepage" target="_blank">Lieblingswebseite</a>.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 300) }}</p> + +<h3 id="Boolsche_Attribute">Boolsche Attribute</h3> + +<p>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 <code><input></code>-Element hinzufügen können, um dieses unbenutzbar (engl.: disabled) zu machen, d.h. das <code><input></code>-Feld wird ausgegraut und man kann keine Daten eingeben.</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>Als Kurzform kann man auch den folgenden Code schreiben: (Wir haben auch ein benutzbares Feld dazu getan, damit Sie sehen was hier geschieht.)</p> + +<pre class="brush: html notranslate"><input type="text" disabled> + +<input type="text"> +</pre> + +<p>Beide werden Ihnen das folgende Resultat ausgeben:</p> + +<p>{{ EmbedLiveSample('Boolsche_Attribute', 700, 100) }}</p> + +<h3 id="Anfuehrungszeichen_um_Attributwerte_weglassen">Anfuehrungszeichen um Attributwerte weglassen</h3> + +<p>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 <code>href</code>-Attribut benutzen:</p> + +<pre class="brush: html notranslate"><a href=https://www.mozilla.org/>Lieblingswebseite</a></pre> + +<p>Wenn wir aber das <code>title</code>-Attribut hinzufügen, dann funktioniert es so nicht mehr:</p> + +<pre class="example-bad brush: html notranslate"><a href=https://www.mozilla.org/ title=Die Mozilla Webseite>Lieblingswebseite</a></pre> + +<p>An diesem Punkt wird der Browser diesen Code falsch lesen und in dem <code>title</code>-Attribut drei separate Attribute sehen: ein <code>title</code>-Attribut mit dem Wert <code>"Die"</code> und zwei Boolsche Attribute, <code>Mozilla</code> und <code>Webseite</code>. 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.</p> + +<p>{{ EmbedLiveSample('Anfuehrungszeichen_um_Attributwerte_weglassen', 700, 100) }}</p> + +<p>Unser Rat ist es, immer die Anführungszeichen um Attrbiutwerte zu setzen, damit Sie solche Probleme vermeiden können und besser lesbaren Code schreiben.</p> + +<h3 id="Einfache_oder_doppelte_Anführungszeichen">Einfache oder doppelte Anführungszeichen?</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">Ein Link als Beispiel.</a> + +<a href='http://www.example.com'>Ein Link als Beispiel.</a></pre> + +<p>Sie sollten die Anführungszeichen aber nicht miteinander mischen. Die folgende Zeile ist falsch!</p> + +<pre class="brush: example-bad html notranslate"><a href="http://www.example.com'>Ein Link als Beispiel.</a></pre> + +<p>Wenn Sie eine Sorte Anführungszeichen benutzen, können Sie die andere Sorte innerhalb dieser benutzen:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Ist's nicht lustig?">Ein Link als Beispiel.</a></pre> + +<p>Wenn Sie die selbe Sorte Anführungszeichen innerhalb benutzen wollen, dann müssen Sie<a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started#Entity_references_including_special_characters_in_HTML"> HTML entities</a> nutzen.</p> + +<h3 id="Aufbau_eines_HTML-Dokumentes">Aufbau eines HTML-Dokumentes</h3> + +<p>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:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Meine Testseite</title> + </head> + <body> + <p>Dies ist meine Webseite.</p> + </body> +</html></pre> + +<p>Hier haben wir:</p> + +<ul> + <li><code><!DOCTYPE html></code> — den Dokumenttyp. Früher, als HTML noch jung war (1991/92), war dies dazu gedacht, um dem Browser mitzuteilen, welchen Regeln er zu folgen hatte. Das konnte z. B. sein, dass der Browser automatisch die Fehler überprüft und andere nützliche Dinge. Wie auch immer, heutzutage achtet niemand mehr wirklich darauf, es muss jedoch vorhanden sein, damit alles richtig funktioniert.</li> + <li><code><html></html></code> — das <code><html></code> Element. Dieses Element umhüllt den ganzen Inhalt. Manchmal wird es auch als root-Element bezeichnet</li> + <li><code><head></head></code> — das <code><head></code> Element. In dieses Element ist alles eingeschlossen, was <em>nicht</em> auf der Seite angezeigt wird. Dies enthält Informationen wie Schlüsselwörter, eine Seitenbeschreibung, welche in Suchmaschinen erscheint, CSS um unseren Inhalt zu designen, usw.</li> + <li><code><body></body></code> — das <code><body></code> Element. Dies beinhaltet <em>alles</em>, was die Betrachter sehen, wenn sie die Webseite besuchen, egal ob Text, Bilder, Videos, Audiodateien, usw.</li> + <li><code><meta charset="utf-8"></code> — Dieses Element setzt die Zeichenkodierung deines Dokuments auf <code>utf-8</code>, was die Buchstaben von fast allen menschlichen Sprachen beinhaltet. Umlaute wie Ä und Ü werden sonst nicht richtig angezeigt.</li> + <li><code><title></title></code> — Dies setzt den Titel der Seite, welcher im Tab angezeigt wird. Dieser wird auch gebraucht, wenn jemand ein Lesezeichen erstellt.</li> +</ul> + +<h3 id="Aktives_Lernen_Fügen_Sie_mehr_Inhalte_in_das_HTML_Dokument_ein">Aktives Lernen: Fügen Sie mehr Inhalte in das HTML Dokument ein</h3> + +<p>Wenn Sie lokal, auf Ihrem Computer, das Beispiel ausprobieren möchten, dann tun Sie folgendes:</p> + +<ol> + <li>Kopieren Sie das obige HTML-Dokument.</li> + <li>Erstellen Sie eine neue leere Datei in Ihrem Texteditor.</li> + <li>Fügen Sie den Code in die leere Datei ein.</li> + <li>Speichern Sie die Datei unter dem Namen index.html.</li> +</ol> + +<div class="note"> +<p><strong>Notiz</strong>: Sie können dieses HTML-Grundgerüst auch im <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repository</a> finden.</p> +</div> + +<p>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:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Diese Ü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:</p> + +<ul> + <li>Fügen Sie direkt unter dem öffnenden Tag des {{htmlelement("body")}}-Elements eine Überschrift ein. Dieser sollte ein <code><h1></code>-Tag vorangestellt sein und ein <code></h1></code>-Tag hintenan stehen.</li> + <li>Schreiben Sie in den Absatz (<code><p></code>) etwas Text über etwas, das Sie interessiert.</li> + <li>Lassen Sie wichtige Wörter in fetter Schrift erscheinen, indem Sie das <code><strong></code>-Element benutzen.</li> + <li>Fügen Sie einen Link (<code><a></code>) innerhalb des Absatzes hinzu.</li> + <li>Fügen Sie ein Bild (<code><img></code>) hinzu, direkt unter dem Absatz. Sie bekommen einen Bonuspunkt, wenn Sie es schaffen zu einem anderen Bild zu verlinken (entweder lokal auf ihrem Computer oder irgendwo im Internet.)</li> +</ul> + +<p>Wenn Sie einen Fehler machen können Sie das <em>Input</em>-Feld jederzeit mit dem <em>Reset</em>-Button zurücksetzen. Wenn Sie gar nicht auf die Lösung kommen, können Sie sich die Lösung anzeigen lassen indem Sie auf <em>Lösung anzeigen</em> klicken.</p> + +<div class="hidden"> +<h6 id="Playable_code4">Playable code4</h6> + +<pre class="brush: html notranslate"><h2>Input</h2> +<textarea id="code" class="input"> +&lt;p&gt;Dies ist meine Webseite.&lt;/p&gt;</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Lösung anzeigen" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; +} + +img { + max-width: 100%; +} + +.output { + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { + textarea.value = '<p>Ich spiele gerne <strong>Schlagzeug</strong>. Einer meiner Lieblingsschlagzeugspieler ist Neal Peart, welcher\ + in der Band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a> spielt.\ + Mein Lieblingsalbum von Rush ist zur Zeit <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ +<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code4', 700, 600) }}</p> + +<h3 id="Leerraum_in_HTML">Leerraum in HTML</h3> + +<p>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> + +<pre class="brush: html notranslate"><p>Hunde sind komisch.</p> + +<p>Hunde sind + komisch.</p></pre> + +<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.</p> + +<h2 id="Zeichenreferenzen_für_Sonderzeichen">Zeichenreferenzen für Sonderzeichen</h2> + +<p>In HTML sind die Zeichen <code><</code>, <code>></code>,<code>"</code>,<code>'</code> und <code>&</code> 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?</p> + +<p>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.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Ausgegebener Character</th> + <th scope="col">Zeichenreferenz</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>In dem untenstehenden Beispiel können Sie einen Absatz sehen, in dem über Webtechnologien geschreiben wird:</p> + +<pre class="brush: html notranslate"><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></pre> + +<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.</p> + +<p>{{ EmbedLiveSample('Charakter-Referenz_Spezielle_Charaktere_in_HTML', 700, 200) }}</p> + +<div class="note"> +<p><strong>Notiz</strong>: Eine Tabelle mit allen möglichen HTML Charakter-Referenzen kann auf Wikipedia gefunden werden: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> +</div> + +<h2 id="HTML_Kommentare">HTML Kommentare</h2> + +<p>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.</p> + +<p>Um einen Abschnitt in Ihrem HTML-Dokument zu einem Kommentar zu machen, schließen Sie diesen in die speziellen Marker <code><!--</code> und <code>--></code> ein, zum Beispiel:</p> + +<pre class="brush: html notranslate"><p>Ich bin nicht in einem Kommentar</p> + +<!-- <p>Ich bin in einem Kommentar und werde auf der Webseite nicht angezeigt!</p> --></pre> + +<p>Wie Sie unten erkennen können, wird der erste Absatz dargestellt, der zweite aber nicht.</p> + +<p>{{ EmbedLiveSample('HTML_Kommentare', 700, 100) }}</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>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!</p> + +<div class="note"> +<p><strong>Notiz</strong>: 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 <a href="/de/docs/Learn/CSS">CSS </a>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.</p> +</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/de/learn/html/einführung_in_html/marking_up_a_letter/index.html b/files/de/learn/html/einführung_in_html/marking_up_a_letter/index.html new file mode 100644 index 0000000000..e2d3e9d636 --- /dev/null +++ b/files/de/learn/html/einführung_in_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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 <code><head></code> Inhalten testen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Bevor Sie diese Überprüfung durchführen, sollten Sie bereits <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Was gehört in den Kopf? Metadaten in HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a>, und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Fortgeschrittene Textformatierung</a> durchgearbeitet haben.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Grundlegende und fortgeschrittene HTML-Textformatierung und Hyperlink-Fähigkeiten testen und wissen, was in den HTML <head> gehört.</td> + </tr> + </tbody> +</table> + +<h2 id="Startpunkt">Startpunkt</h2> + +<p>Um diese Aufgaben zu starten, rufen Sie den <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">Rohtext auf, den Sie strukturieren sollen</a>, sowie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS</a>, die Sie in Ihre HTML einbinden müssen. Erstellen Sie die <code>.html</code>-Datei mit Ihrem Texteditor (oder nutzen Sie alternativ eine Seite wie <a class="external external-icon" href="http://jsbin.com/">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>, um die Aufgaben zu bearbeiten.)</p> + +<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2> + +<p>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.</p> + +<p>Block-/Struktursemantik:</p> + +<ul> + <li>Bringen Sie das gesamte Dokument in eine sinnvolle Struktur, einschließlich Dokumententyp, {{htmlelement("html")}}-, {{htmlelement("head")}}- und {{htmlelement("body")}}-Elementen.</li> + <li>The letter in general should be marked up with a structure of paragraphs and headings, with the exception of the below points. There is one top level heading (the "Re:" line) and three second level headings.</li> + <li>Die "semester start dates", "study subjects" und "exotic dances" sollen mit einem angemessenen Listentyp ausgezeichnet werden.</li> + <li>Die zwei Adressen können einfach in Paragraphen eingefügt werden. Das {{htmlelement("address")}}-Element ist hierfür nicht geeignet — überlegen Sie, warum. Zusätzlich soll jede Zeile der Adresse in einer neuen Zeile sein, nicht aber in einem neuen Paragraphen.</li> +</ul> + +<p>Semantik innerhalb des Textes:</p> + +<ul> + <li>Die Namen von Sender und Empfänger (und "Tel" und "Email") sollen mit besonderer Wichtigkeit hervorgehoben werden.</li> + <li>Die vier Daten sollen mit geeigneten Elementen als maschinenlesbares Datum ausgezeichnet werden.</li> + <li>Die erste Adresse und das erste Datum des Briefes sollen ein Klassenattributwert von "sender-column" erhalten; das CSS, das Sie später ergänzen, wird später für die Rechtsbündigkeit sorgen, die sie in einem klassischen Brieflayout haben.</li> + <li>Die fünf Akronyme/Abkürzungen im Hauptteil des Textes sollen so ausgezeichnet werden, dass die ausgeschriebene Version des jeweiligen Akronyms bzw. der Abkürzung hinterlegt ist.</li> + <li>Die sechs Sub- und Superskripte sollen angemessen ausgezeichnet werden — in den chemischen Formeln sowie die Zahlen 103 und 104 (sie sollen am Ende die Zahlen 10 hoch 3 und 10 hoch 4 darstellen).</li> + <li>Das Grad-Symbol und Multiplikationssymbol sollen jeweils an den entsprechenden Stellen ausgezeichnet werden, indem Sie <a href="https://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references">angemessene Entitäts-Referenzen</a> benutzen.</li> + <li>Versuchen Sie, zumindest zwei geeignete Wörter innerhalb des Textes mit besonderer Wichtigkeit hervorzuheben.</li> + <li>An zwei Stellen soll ein Hyperlink ergänzt werden; fügen Sie gültige Links mit Titeln hinzu. Als Linkadresse verwenden Sie einfach http://example.com.</li> + <li>Das Universitätsmotto sowie das Zitat sollen mit geeigneten Elementen ausgezeichnet werden.</li> +</ul> + +<p>Der Kopf (head) des Dokumentes:</p> + +<ul> + <li>Der Zeichensatz des Dokumentes sollte in einem entsprechenden Meta-Tag auf utf8 festgelegt werden.</li> + <li>Der Autor des Briefes sollte in einem entsprechenden Meta-Tag festgehalten werden.</li> + <li>Die bereitgestellte CSS-Datei sollte in einem entsprechenden Tag eingebunden werden.</li> +</ul> + +<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2> + +<ul> + <li>Nutzen Sie den <a href="https://validator.w3.org/">W3C HTML validator</a>, um Ihre HTML zu prüfen; Sie erhalten Bonuspunkte, wenn die Validierung erfolgreich ist.</li> + <li>Sie benötigen keine CSS-Fähigkeiten, um diese Aufgaben zu bewältigen; Sie müssen lediglich die bereitgestellte CSS-Datei in ein HTML-Element einfügen.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Der nachfolgende Screenshot zeigt ein Beispiel dafür, wie der Brief nach der Auszeichnung aussehen könnte.</p> + +<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p> + +<h2 id="Einschätzung">Einschätzung</h2> + +<p>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 <a class="external external-icon" href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678" rel="noopener">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a class="external external-icon" href="https://wiki.mozilla.org/IRC" rel="noopener">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/de/learn/html/einführung_in_html/structuring_a_page_of_content/index.html b/files/de/learn/html/einführung_in_html/structuring_a_page_of_content/index.html new file mode 100644 index 0000000000..fc439ad60b --- /dev/null +++ b/files/de/learn/html/einführung_in_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorbereitungen:</th> + <td>Before attempting this assessment you should have already worked through the rest of the course, with a particular emphasis on <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a>.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td> + <p>Das Testen des eigenen Wissens über Strukturen von Internetseiten und darüber, wie Layout Designs in Markup dargestellt werden.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Startpunkt">Startpunkt</h2> + +<p>Um diese Selbsteinschätzung zu starten, sollten Sie die <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">ZIP-Datei mit allen Startinhalten</a> herunterladen. Die ZIP-Datei enthält:</p> + +<ul> + <li>Den HTML-Code, der mit Markup strukturiert werden soll</li> + <li>CSS, um Ihr Markup zu gestalten</li> + <li>Bilder, die auf der Seite verwendet werden.</li> +</ul> + +<p>Erstellen Sie das Beispiel lokal auf Ihrem Computer oder nutzen Sie alternativ eine Seite wie<a class="external external-icon" href="http://jsbin.com/">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> , um den Test zu absolvieren.</p> + +<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2> + +<p>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:</p> + +<ul> + <li>A header spanning the full width of the site containing the main title for the page, the site logo, and the navigation menu. The title and logo appear side by side once styling is applied, and the navigation appears below those two items.</li> + <li>A main content area containing two columns — a main block to contain the welcome text, and a sidebar to contain image thumbnails.</li> + <li>Ein Footer, der Copyright-Informationen und Credits enthält.</li> +</ul> + +<p>Sie müssen einen passenden Wrapper hinzufügen für:</p> + +<ul> + <li>Den Header</li> + <li>Das Navigationsmenü</li> + <li>Den Main Content</li> + <li>Den Begrüßungstext</li> + <li>Die Bilder-Sidebar</li> + <li>Den Footer</li> +</ul> + +<p>Sie sollten außerdem:</p> + +<ul> + <li>das vorgegebene CSS auf die Seite anwenden, indem Sie ein anderes {{htmlelement("link")}}-Element direkt unter dem bereits existierenden Element am Anfang ergänzen.</li> +</ul> + +<h2 id="Hinweise_und_Tipps">Hinweise und Tipps</h2> + +<ul> + <li>Use the <a href="https://validator.w3.org/nu/">W3C Nu HTML Checker</a> to catch unintended mistakes in your HTML, CSS, and SVG — mistakes you might have otherwise missed — so that you can fix them.</li> + <li>You don't need to know any CSS to do this assessment; you just need to put the provided CSS inside an HTML element.</li> + <li>The provided CSS is designed so that when the correct structural elements are added to the markup, they will appear green in the rendered page.</li> + <li>If you are getting stuck and can't envisage what elements to put where, it often helps to draw out a simple block diagram of the page layout, and write on the elements you think should wrap each block.</li> +</ul> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Der nachfolgende Screenshot zeigt beispielhaft, wie die Homepage nach der Auszeichnung mittels HTML aussehen könnte.</p> + +<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Einschätzung">Einschätzung</h2> + +<p>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 <a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assignment/24678">Disskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Versuchen Sie es zunächst selbst -- mit Mogeleien ist nichts gewonnen!</p> + +<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/de/learn/html/forms/index.html b/files/de/learn/html/forms/index.html new file mode 100644 index 0000000000..b0d1e8eb58 --- /dev/null +++ b/files/de/learn/html/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 +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Vor dem Beginnen dieses Abschnitts, solltest du dich zumindest durch unsere <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> durchgearbeitet haben. Zu diesem Zeitpunkt solltest die Grundleitfäden einfach zu verstehen finden und dazu fähig sein ,Gebrauch von unserer <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Nativen-Formular-Komponenten-Anleitung</a> zu machen.</p> + +<p>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 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> und <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> zu erlernen und danndie anderen Abschnitte durchliest.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Notiz</strong>: 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 <a href="http://jsbin.com/">JSBin</a> oder <a href="https://glitch.com/">Glitch</a> nutzen.</p> +</div> + +<h2 id="Grundlagen">Grundlagen</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form" style="">Dein erstes HTML-Formular</a></dt> +</dl> + +<dl> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Wie man ein HTML-Formular strukturiert</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Die_verschiedenen_Formular-Komponeneten">Die verschiedenen Formular-Komponeneten</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Die nativen Formular-Komponenten</a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/HTML5_input_types">Die HTML5 Eingabetypen</a></dt> + <dd>Hier setzen wir unsere Vertiefung in das <code><input></code>-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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Other_form_controls">Andere Formular-Komponentent</a></dt> + <dd>Next we take a look at all the non-<code><input></code> form controls and associated tools, such as {{htmlelement('select')}}, {{htmlelement('textarea')}}, {{htmlelement('meter')}}, and {{htmlelement('progress')}}.</dd> +</dl> + +<h2 id="Form_styling_guides">Form styling guides</h2> + +<dl> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Styling_web_forms">Stylen von Web-Formularen</a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/Advanced_form_styling">Fortgeschrittenes Stylen von Formularen</a></dt> + <dd>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.</dd> + <dt><a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-Klassen</a></dt> + <dd>Eine Einführung in die UI pseudo-Klassen, die ermöglichen, dass HTML Formular-Komponenten auf Basis ihres aktuellen Status anvisiert werden können.</dd> +</dl> + +<h2 id="Prüfen_und_Abschicken_von_Daten">Prüfen und Abschicken von Daten</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Clientseitige Formulardaten-Validation</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Das Senden von Daten</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Weiterführende_Anleitungen">Weiterführende Anleitungen</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Wie man eigene Formular-Komponenten baut</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Senden von Formularen mit JavaScript</a></dt> + <dd>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.)</dd> + <dt><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-Formulare in veralteten Browsern</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element#Forms">HTML forms element reference</a></li> + <li><a href="/en-US/docs/Web/HTML/Element/input">HTML <input> types reference</a></li> +</ul> diff --git a/files/de/learn/html/index.html b/files/de/learn/html/index.html new file mode 100644 index 0000000000..f3e5139c40 --- /dev/null +++ b/files/de/learn/html/index.html @@ -0,0 +1,75 @@ +--- +title: HTML +slug: Learn/HTML +tags: + - Anfänger + - Beginner + - CodingScripting + - HTML + - Lernen +translation_of: Learn/HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{Glossary('HTML')}} ist die Basistechnologie oder Beschreibungssprache, in der Webseiten im WWW erstellt werden. HTML definiert die <em>Struktur</em> einer Webseite. Falls Sie Webseiten selbst erstellen möchten, sollten Sie sich mit HTML auskennen (oder anderenfalls einen automatischen HTML Generator benutzen). Über den HTML Code wird bestimmt, ob ein bestimmter <em>Inhalt</em> (der konkrete Text, z.B. "hallo www, dies ist meine erste Web Seite!") einer Webseite vom Brower etwa als Absatz, Link, Überschrift, Bild oder Formular erkannt werden soll.</p> + +<h2 id="Ihr_Lernweg">Ihr Lernweg</h2> + +<p>Auf dem Weg in die Webentwicklung sollten Sie als aller erstes HTML lernen, da dies die Grundlage aller Webseiten bildet.<br> + <br> + <a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML">Starten Sie hier unseren HTML-Kurs, indem Sie Einführung in HTML lesen.</a><br> + <br> + Wenn Sie HTML schon können, dann sollten sie nun eine der darauf aufbauenden Technologien lernen:</p> + +<ul> + <li><a href="/de/docs/Learn/CSS">CSS</a>, und wie man dieses nutzt, um HTML zu stilisieren ("stylen")<br> + Zum Beispiel können Sie die Textgröße und Schriftart ändern, Rahmen anzeigen lassen und Animationen hinzufügen.</li> + <li><a href="/de/docs/Learn/JavaScript">Javasscript</a>, und wie man dieses nutzt, um eine dynamische Webseite zu erstellen.<br> + Zum Beispiel könnten Sie damit die Position auf einer Karte finden, sie können Elemente auf der Webseite erscheinen oder verschwinden lassen, sie können Daten des Nutzers lokal speichern usw..</li> +</ul> + +<p>Bevor Sie mit unserem HTML-Kurs anfangen, sollten Sie grundsätzlich mit Ihrem Computer umgehen können und das Internet schon passiv nutzen, d.h. im Internet surfen. Wenn Sie dies lesen, ist das Letzere ja wohl offensichtlich der Fall. Sie sollten schon eine Rechner-Arbeitsumgebung haben, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installieren nötiger Software</a> erklärt wird und wissen wie Sie Ihre Dateien ordnen, wie in <a href="/de/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dateien nutzen</a> erklärt wird. Diese beiden Artikel sind Teil unserer Artikelserie <a href="/de/docs/Learn/Getting_started_with_the_web">Das Internet für Einsteiger</a>.</p> + +<p>Es ist nicht besonders schwer, die Grundlagen zu erlernen. Allerdings handelt es sich bei HTML um eine umfassende Technologie mit vielen Features, es gibt dementsprechend nicht einen einzigen korrekten Weg die Sprache zu lernen. Es wird empfohlen, sich zuerst durch den Artikel <a href="https://developer.mozilla.org/de/Learn/Getting_started_with_the_web">Das Internet für Einsteiger</a> durchzuarbeiten - falls sie über dieses Wissen schon verfügen, dann brauchen Sie das natürlich nicht tun. Auch ist das meiste, was im HTML-Grundlagen Artikel abgedeckt wird, schon bereits in unser Modul <a href="/de/docs/Web/Guide/HTML/Introduction">Einführung in HTML</a> integriert.</p> + +<div class="row topicpage-table"> +<div class="section"> +<h2 id="Module">Module</h2> + +<p>In unserem HTML Lernbereich finden Sie die unten genannten Module. Die Module sind so in Reihenfolge angeordnet, daß Sie diese von oben nach unten durchgehen können, was wir sehr empfehlen. Sie sollten mit dem ersten Modul anfangen.</p> + +<dl> + <dt><a href="/de/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a></dt> + <dd>In diesem Modul üben Sie Grundlegende Fertigkeiten mit HTML ein. Sie könnten hier mit dem Studium starten: Hier könnte Ihre Reise in die Webentwicklung anfangen. Sie lernen, wie Sie das Grundgerüst einer Webseite schreiben, wie Sie Links erstellen und Ihre Webseite strukturieren.</dd> + <dd>Wem das alles viel zu langwierig und aufgebläht erscheint, dem wird auf <strong>https://codepen.io</strong> weitergeholfen, wo man sofort ohne Zeitverschwendung mit Beispielen loslegen und testen kann; einige Beispiele sind auch hier im MDN verlinkt und kommentiert. Die o.g. vorausgesetzte "Rechner-Arbeitsumgebung" ist hier gar nicht nötig: Codepen.io liefert sie prompt & frei auf Bildschirm.</dd> + <dt><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimediainhalte einbinden</a></dt> + <dd>In diesem Modul lernen Sie verschiedene Wege kennen, wie man Bilder, Videos oder gar andere Webseiten in eine eigene Webseite einbinden kann.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables">HTML Tabellen</a></dt> + <dd>Tabellen so auf Webseiten darzustellen, das sie für alle Menschen zugänglich sind, ist nicht so einfach. In diesem Modul lernen Sie, wie man mit HTML eine Tabelle erstellt und wie man komplexere Zusätze hinzufügt, wie eine Zusammenfassung.</dd> +</dl> + +<h2 id="Häufige_Probleme_in_HTML_lösen">Häufige Probleme in HTML lösen</h2> + +<dl> + <dt><a href="/de/Learn/HTML/Howto">Häufige Probleme mit HTML lösen</a></dt> + <dd>Diese Serie von Artikeln existiert, um Ihnen zu helfen häufig auftretende Probleme bei der Erstellung einer Webseite zu lösen: Arbeiten mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Einbinden von Formularen, usw.</dd> +</dl> +</div> + +<div class="section"> +<h2 id="Weiterführende_Artikel">Weiterführende Artikel</h2> + +<dl> + <dt><a href="/de/Learn/HTML/Write_a_simple_page_in_HTML">Eine einfache Seite in HTML schreiben</a></dt> + <dd>In diesem Artikel werden Sie lernen, wie Sie eine einfache Webseite erstellen.</dd> +</dl> + +<hr> +<p>Sollten Sie sich an HTML gewöhnt haben, finden Sie hier genauere Informationen zum Erkunden:</p> + +<dl> + <dt><a href="/de/docs/Web/HTML/Reference">HTML Referenz</a></dt> + <dd>In unserem großen Referenz Leitfaden finden Sie Details über jedes HTML-Element und Attribut.</dd> +</dl> +</div> +</div> diff --git a/files/de/learn/html/multimedia_and_embedding/index.html b/files/de/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..80ad15ca25 --- /dev/null +++ b/files/de/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,77 @@ +--- +title: Multimediainhalte einbinden - Übersicht +slug: Learn/HTML/Multimedia_and_embedding +tags: + - Assessment + - Audio + - Beginner + - CodingScripting + - Embedding + - Flash + - Guide + - HTML + - Images + - Landing + - Learn + - Multimedia + - NeedsTranslation + - SVG + - TopicStub + - Video + - Web + - iframes + - imagemaps + - img + - responsive +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">In diesem Kurs haben wir uns bisher viel zum Thema Text angesehen. Das Internet wäre allerdings ziemlich langweilig, wenn es nur aus reinem Text bestehen würde. Deshalb wollen wir uns nun ansehen, wie wir die Inhalte lebendiger und interessanter gestalten können.</p> + +<p class="summary">Dieses Modul zeigt, wie wir HTML einsetzen können, um Multimediainhalte in unsere Webseiten zu integrieren, egal ob es sich dabei um Bilder, Videos, Tonaufnahmen oder etwa ganze Webseiten handelt.</p> + +<h2 id="Vorwissen">Vorwissen</h2> + +<p>Bevor Sie dieses Modul beginnen, sollten Sie über zuverlässiges HTML-Grundlagenwissen verfügen, wie es zuvor in <a href="https://developer.mozilla.org/de/docs/Learn/HTML/Einf%C3%BChrung_in_HTML">Einführung in HTML</a> behandelt wurde. Falls Sie dieses Modul noch nicht bearbeitet haben (und auch nichts ähnliches), beginnen Sie am besten damit und kommen Sie später wieder!</p> + +<div class="note"> +<p><strong>Anmerkung</strong>:Wenn Sie an einem Computer/Tablet/Gerät arbeiten, auf welchem Sie nicht die Möglichkeit haben, eigene Dateien zu erstellen, können Sie die meisten Code-Beispiele in einem Online-Editor wie <a class="external external-icon" href="http://jsbin.com/" rel="noopener">JSBin</a> oder <a class="external external-icon" href="https://thimble.mozilla.org/" rel="noopener">Thimble </a>ausprobieren.</p> +</div> + +<h2 id="Einführung">Einführung</h2> + +<p>Dieses Modul unterteilt sich in nachfolgende Abschnitte, um Ihnen die Grundlagen zur Einbettung von multimedialen Inhalten in Webseiten zu erläutern.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Bilder in HTML</a></dt> + <dd>Man kann an die verschiedensten Arten von Multimediainhalten denken, die man einbinden könnte, aber wir fangen hier mit dem einfachsten Typ an, nämlich mit einem {{htmlelement("img")}}, mit welchem ein einfaches Bild in die Webseite eingefügt werden kann. In diesem Abschnitt sehen wir uns dies nun genauer an, beginnend bei den Mindestangaben, welche wir dann um eine Beschriftung ergänzen, welches durch den Einsatz eines {{htmlelement("figure")}} geschieht. Wie diese Angaben dann in Bezug zu Hintergrundgrafiken stehen, welche durch CSS Angaben definiert werden, werden wir uns anschliessend ansehen.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video- und Audioinhalte</a></dt> + <dd>Next, we'll look at how to use the HTML5 {{htmlelement("video")}} and {{htmlelement("audio")}} elements to embed video and audio on our pages, including basics, providing access to different file formats to different browsers, adding captions and subtitles, and how to add fallbacks for older browsers.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Von <object> bis <iframe> — andere Einbindungstechniken</a></dt> + <dd>At this point we'd like to take somewhat of a sideways step, looking at a couple of elements that allow you to embed a wide variety of content types into your webpages: the {{htmlelement("iframe")}}, {{htmlelement("embed")}} and {{htmlelement("object")}} elements. <code><iframe></code>s are for embedding other web pages, and the other two allow you to embed PDFs, SVG, and even Flash — a technology on its way out, but which you may still see semi-regularly.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Vektorgrafiken einbinden</a></dt> + <dd>Vector graphics can be very useful in certain situations. Unlike regular formats like PNG/JPG, they don't distort/pixelate when zoomed in — they can remain smooth when scaled. This article introduces you to what vector graphics are and how to include the popular {{glossary("SVG")}} format in web pages.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive Bilder</a></dt> + <dd>With so many different device types now able to browse the web — from mobile phones to desktop computers — an essential concept to master in the modern web world is responsive design. This refers to the creation of webpages that can automatically change their features to suit different screen sizes, resolutions, etc. This will be looked at in much more detail in a CSS module later on, but for now, we'll look at the tools HTML has available to create responsive images, including the {{htmlelement("picture")}} element.</dd> +</dl> + +<h2 id="Assessments">Assessments</h2> + +<p>The following assessments will test your understanding of the HTML basics covered in the guides above:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></dt> + <dd>In this assessment, we'll test your knowledge of some of the techniques discussed in this module's articles, getting you to add some images and video to a funky splash page all about Mozilla!</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Add a hitmap on top of an image</a></dt> + <dd>Image maps provide a mechanism to make different parts of an image link to different places. (Think of a map linking through to further information about each different country you click on.) This technique can sometimes be useful.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in this <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open (meaning that your content is freely available and shareable by others).E</p> + </dd> +</dl> diff --git a/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html new file mode 100644 index 0000000000..5be24777e1 --- /dev/null +++ b/files/de/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html @@ -0,0 +1,126 @@ +--- +title: Mozilla splash page +slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +tags: + - Anfänger + - Aufgabe + - Bilder + - CodingScripting + - Einbinden + - Grafiken + - HTML + - JPG + - PNG + - Video + - img + - responsiv + - src + - srcset + - youtube +translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">Mit dieser Aufgabe testen wir Ihr Wissen über einige der Techniken, die in den Artikeln dieses Moduls angesprochen wurden. Wir lassen Sie einige Bilder und ein Video zu einer funky Mozilla-Startseite hinzufügen!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>Bevor Sie sich dieser Aufgabe stellen, sollten Sie bereits den Rest des <a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Multimediainhalte einbinden</a>-Moduls bearbeitet haben.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Testen des Wissens über das Einbinden von Bildern und Videos in Webseiten, Frames und HTML-Techniken von responsiven Grafiken.</td> + </tr> + </tbody> +</table> + +<h2 id="Startpunkt">Startpunkt</h2> + +<p>Um diese Aufgabe zu beginnen, holen Sie sich die HTML und alle Bilder aus dem <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>--Directory auf Github. Legen Sie auf Ihrer Festplatte ein neues Verzeichnis an und speichern Sie darin die Inhalte von <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> in einer Datei mit dem Namen <code>index.html</code> auf Ihrer Festplatte. Speichern Sie im selben Verzeichnis <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> (mt einem Rechtsklick auf das Bild eröffnet Ihnen das Kontextmenü eine Option, das Bild zu speichern).</p> + +<p>Speichern Sie auf dieselbe Weise, aber zunächst in einem anderen Verzeichnis, auch die anderen Bilder aus dem <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a>-Verzeichnis; Sie werden einige der Bilder noch mit einem Bildbearbeitungsprogramm verändern müssen, bevor sie einsatzbereit sind.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Das HTML-Beispiel beinhaltet ein recht umfangreiches CSS, um die Seite zu stylen. Sie brauchen das CSS nicht zu touchieren, sondern lediglich die HTML innerhalb des {{htmlelement("body")}}-Elementes — solange Sie die korrekten Auszeichnungen verwenden, wird das Styling ebenfalls korrekt aussehen.</p> +</div> + +<h2 id="Projekt_Kurzbeschreibung">Projekt: Kurzbeschreibung</h2> + +<p>In dieser Aufgabe präsentieren wir Ihnen eine fast-fertige Mozilla Startseite, deren Ziel es ist, etwas nettes und interessantes darüber zu kommunizieren, wofür Mozila steht, sowie einige Links zu weiterführenden Quellen bereitzustellen. Leider sind bisher noch keine Bilder oder Videos eingepflegt worden — das ist schließlich Ihr Job! Sie müssen einige Medien hinzufügen, damit die Seite ansprechender aussieht und ihrem Ziel gerecht wird. Die nachfolgenden Abschnitte beschreiben Ihre Aufgabe detaillierter:</p> + +<h3 id="Bilder_vorbereiten">Bilder vorbereiten</h3> + +<p>Erzeugen Sie mit Ihrem bevorzugten Bildbearbeitungsprogramm 400px- und 120px-breite Versionen von:</p> + +<ul> + <li><code>firefox_logo-only_RGB.png</code></li> + <li><code>firefox-addons.jpg</code></li> + <li><code>mozilla-dinosaur-head.png</code></li> +</ul> + +<p>Geben Sie ihnen sprechende Namen, z.B. <code>firefoxlogo400.png</code> und <code>firefoxlogo120.png</code>.</p> + +<p>Gemeinsam mit <code>mdn.svg</code> werden diese Bilder Ihre Icons sein, mit denen Sie auf weiterführende Quellen verlinken, innerhalb des <code>further-info</code>-Bereichs. Sie werden außerdem auf das Firefox-Logo im Seitenheader verlinken. Speichern Sie Kopien all dieser Bilder im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p> + +<p>Haben Sie dies abgeschlossen, erzeugen Sie eine 1200px-breite Landscape-Version von <code>red-panda.jpg</code> und eine 600px-breite Version, die den Panda in einem Close-Up-Shot zeigt. Geben Sie auch diesen Bildern sprechende Namen, damit Sie sie leicht wiederfinden. Speichern Sie eine Kopie davon im selben Verzeichnis, in dem sich <code>index.html</code> befindet.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Sie sollten Ihre JPG- und PNG-Bilder am besten auf eine Weise komprimieren, auf die sie so klein wie möglich sind und dabei dennoch gut aussehen. <a href="https://tinypng.com/">tinypng.com</a> ist ein toller Service, um dies einfach zu erreichen.</p> +</div> + +<h3 id="Dem_Header_ein_Logo_hinzufügen">Dem Header ein Logo hinzufügen</h3> + +<p>Innerhalb des {{htmlelement("header")}}-Elements fügen Sie ein {{htmlelement("img")}}-Element hinzu, das die kleine Version des Firefox-Logos in den Header einbindet.</p> + +<h3 id="Dem_Hauptteil_des_Artikels_ein_Video_hinzufügen">Dem Hauptteil des Artikels ein Video hinzufügen</h3> + +<p>Fügen Sie einfach das {{htmlelement("article")}}-Element hinzu (direkt under dem öffnenden Tag) und binden Sie das YouTube-Video unter dem Link <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a> ein, indem Sie geeignete YouTube-Tools verwenden, um den Code zu generieren. Das Video soll 400px breit sein.</p> + +<h3 id="Responsive_Grafiken_zu_den_further_info-Links">Responsive Grafiken zu den "further info"-Links</h3> + +<p>Innerhalb des {{htmlelement("div")}}-Elements mit der Klasse <code>further-info</code> finden Sie vier {{htmlelement("a")}}-Elemente — jedes davon verlinkt auf eine interessante Mozilla-zugehörige Seite. Um diesen Teil abzuschließen, müssen Sie innerhalb jeden dieser Elemente ein {{htmlelement("img")}}-Element hinzufügen, die geeignete {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}-, {{htmlattrxref("srcset", "img")}}- und {{htmlattrxref("sizes", "img")}}-Attribute enthalten.</p> + +<p>In jedem Fall (außer einem — der von sich aus responsiv ist?) möchten wir, dass der Browser die 120px-breite Version anzeigt, wenn das Anzeigedisplay 480px breit oder kleiner ist, und die 400px-breite Version in allen anderen Fällen.</p> + +<p>Stellen Sie sicher, dass die richtigen Bilder mit den richtigen Links verbunden sind!</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Um die <code>srcset</code>/<code>sizes</code>-Beispiele zu testen, müssen Sie Ihre Seite auf einen Server uploaden (<a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> ist eine einfache und freie Lösung). Von dort aus können Sie testen, ob sie korrekt funktionieren, indem Sie Browser-Entwicklertools verwenden, wie in <a href="/de/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a> beschrieben.</p> +</div> + +<h3 id="Ein_art_directed_Roter_Panda">Ein art directed Roter Panda</h3> + +<p>Innerhalb des {{htmlelement("div")}}-Elementes mit der Klasse <code>red-panda</code> möchten wir ein {{htmlelement("picture")}}-Element einfügen, das das kleine Panda-Portrai zeigt, wenn das Anzeigedisplay 600px breit oder schmaler ist, und das große Landscape-Bild bei breiteren Anzeigedisplays.</p> + +<h2 id="Beispiel">Beispiel</h2> + +<p>Die nachfolgenden Screenshots zeigen, wie die Startseite nach der korrekten Auszeichnung aussehen sollte, auf einem breiten und einem schmalen Bildschirm.</p> + +<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p> + +<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p> + +<h2 id="Einschätzung">Einschätzung</h2> + +<p>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 <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assignment/24679">Diskussionsthread zu dieser Übung</a> nachfragen oder im <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC-Channel auf <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>.Versuchen Sie es zunächst selbst — mit Mogeleien ist nichts gewonnen!</p> + +<div class="blockIndicator note"> +<p><strong>Anmerkung</strong>: Falls Sie ihre Aufgabe mit den Developer-Tools des im Chrome-Browsers überprüfen, kann es sein, dass der Browser nicht die richtigen Bilder lädt, egal, wie klein Sie die Breite unter 'responsive view' auswählen. Es scheint sich hierbei um eine Eigenart von Chrome zu handeln. Der Firefox-Browser sollte das richtige Bild laden (sofern Ihre HTML korrekt ist).</p> +</div> + +<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/de/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/de/learn/html/tables/grund_tabelle_html/index.html b/files/de/learn/html/tables/grund_tabelle_html/index.html new file mode 100644 index 0000000000..a10e286570 --- /dev/null +++ b/files/de/learn/html/tables/grund_tabelle_html/index.html @@ -0,0 +1,555 @@ +--- +title: Grundtabellen in HTML +slug: Learn/HTML/Tables/Grund_tabelle_HTML +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorwissen:</th> + <td>HTML Grundlagen (siehe <a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>).</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>To gain basic familiarity with HTML tables.</td> + </tr> + </tbody> +</table> + +<h2 id="What_is_a_table">What is a table ?</h2> + +<p>A table is a structured set of data made up of rows and columns (<strong>tabular data</strong>). 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.</p> + +<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="A swimming timetable showing a sample data table" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>Tables are very commonly used in human society, and have been for a long time, as evidenced by this US Census document from 1800:</p> + +<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>It is therefore no wonder that the creators of HTML provided a means by which to structure and present tabular data on the web.</p> + +<h3 id="How_does_a_table_work">How does a table work?</h3> + +<p>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.</p> + +<table> + <caption>Data about the planets of our solar system (Planetary facts taken from <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Nasa's Planetary Fact Sheet - Metric</a>.</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Name</th> + <th scope="col">Mass (10<sup>24</sup>kg)</th> + <th scope="col">Diameter (km)</th> + <th scope="col">Density (kg/m<sup>3</sup>)</th> + <th scope="col">Gravity (m/s<sup>2</sup>)</th> + <th scope="col">Length of day (hours)</th> + <th scope="col">Distance from Sun (10<sup>6</sup>km)</th> + <th scope="col">Mean temperature (°C)</th> + <th scope="col">Number of moons</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th> + <th scope="row">Mercury</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>Closest to the Sun</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">Earth</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>Our world</td> + </tr> + <tr> + <th scope="row">Mars</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>The red planet</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Jovian planets</th> + <th rowspan="2" scope="rowgroup">Gas giants</th> + <th scope="row">Jupiter</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>The largest planet</td> + </tr> + <tr> + <th scope="row">Saturn</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Ice giants</th> + <th scope="row">Uranus</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptune</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Dwarf planets</th> + <th scope="row">Pluto</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Table_styling">Table styling</h3> + +<p>You can also have a <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">look at the live example</a> 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.</p> + +<p>Be under no illusion; for tables to be effective on the web, you need to provide some styling information with <a href="/en-US/docs/Learn/CSS">CSS</a>, 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 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> article after you've finished here.</p> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a>, and you can also find an <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.</p> + +<h3 id="When_should_you_NOT_use_HTML_tables">When should you NOT use HTML tables?</h3> + +<p>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 <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> in our <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a>. 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.</p> + +<p>In short, using tables for layout rather than <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> is a bad idea. The main reasons are as follows:</p> + +<ol> + <li><strong>Layout tables reduce accessibility for visually impaired users</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders</a>, 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.</li> + <li><strong>Tables produce tag soup</strong>: 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.</li> + <li><strong>Tables are not automatically responsive</strong>: 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.</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table">Active learning: Creating your first table</h2> + +<p>We've talked table theory enough, so, let's dive into a practical example and build up a simple table.</p> + +<ol> + <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> in a new directory on your local machine.</li> + <li>The content of every table is enclosed by these two tags : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Add these inside the body of your HTML.</li> + <li>The smallest container inside a table is a table cell, which is created by a <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> element ('td' stands for 'table data'). Add the following inside your table tags: + <pre class="brush: html"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>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: + <pre class="brush: html"><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></pre> + </li> +</ol> + +<p>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 <code><td></code> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.</p> + +<p>To stop this row from growing and start placing subsequent cells on a second row, we need to use the <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> element ('tr' stands for 'table row'). Let's investigate this now.</p> + +<ol> + <li>Place the four cells you've already created inside <code><tr></code> tags, like so: + + <pre class="brush: html"><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></pre> + </li> + <li>Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <code><tr></code> element, with each cell contained in a <code><td></code>.</li> +</ol> + +<p>This should result in a table that looks something like the following:</p> + +<table> + <tbody> + <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> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: You can also find this on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements">Adding headers with <th> elements</h2> + +<p>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:</p> + +<pre class="brush: html"><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></pre> + +<p>Now the actual rendered table:</p> + +<table> + <tbody> + <tr> + <td></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> + </tbody> +</table> + +<p>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.</p> + +<h3 id="Active_learning_table_headers">Active learning: table headers</h3> + +<p>Let's have a go at improving this table.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.</li> + <li>To recognize the table headers as headers, both visually and semantically, you can use the <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> element ('th' stands for 'table header'). This works in exactly the same way as a <code><td></code>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <code><td></code> elements surrounding the table headers into <code><th></code> elements.</li> + <li>Save your HTML and load it in a browser, and you should see that the headers now look like headers.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p> +</div> + +<h3 id="Why_are_headers_useful">Why are headers useful?</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>Tables headers also have an added benefit — along with the <code>scope</code> 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.</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns">Allowing cells to span multiple rows and columns</h2> + +<p>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.</p> + +<p>The initial markup looks like this:</p> + +<pre class="brush: html"><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></pre> + +<p>But the output doesn't give us quite what we want:</p> + +<table> + <tbody> + <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> + </tbody> +</table> + +<p>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 <code>colspan</code> and <code>rowspan</code> 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, <code>colspan="2"</code> makes a cell span two columns.</p> + +<p>Let's use <code>colspan</code> and <code>rowspan</code> to improve this table.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same animals example as you saw above.</li> + <li>Next, use <code>colspan</code> to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.</li> + <li>Finally, use <code>rowspan</code> to make "Horse" and "Chicken" span across two rows.</li> + <li>Save and open your code in a browser to see the improvement.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="Providing_common_styling_to_columns">Providing common styling to columns</h2> + +<p>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 <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> 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 <em>every</em> <code><td></code> or <code><th></code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p> + +<p>Take the following simple example:</p> + +<pre class="brush: html"><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></pre> + +<p>Which gives us the following result:</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a <code>class</code> 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 <code><col></code> element. <code><col></code> elements are specified inside a <code><colgroup></code> container just below the opening <code><table></code> tag. We could create the same effect as we see above by specifying our table as follows:</p> + +<pre class="brush: html"><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></pre> + +<p>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 <code><col></code> element — if we didn't, the styling would just be applied to the first column also.</p> + +<p>If we wanted to apply the styling information to both columns, we could just include one <code><col></code> element with a span attribute on it, like this:</p> + +<pre class="brush: html"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>Just like <code>colspan</code> and <code>rowspan</code>, <code>span</code> takes a unitless number value that specifies the number of columns you want the styling to apply to.</p> + +<h3 id="Active_learning_colgroup_and_col">Active learning: colgroup and col</h3> + +<p>Now it's time to have a go yourself.</p> + +<p>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.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>Recreate the table by following the steps below.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.</li> + <li>Add a <code><colgroup></code> element at the top of the table, just underneath the <code><table></code> tag, in which you can add your <code><col></code> elements (see the remaining steps below).</li> + <li>The first two columns need to be left unstyled.</li> + <li>Add a background color to the third column. The value for your <code>style</code> attribute is <code>background-color:#97DB9A;</code></li> + <li>Set a separate width on the fourth column. The value for your <code>style</code> attribute is <code>width: 42px;</code></li> + <li>Add a background color to the fifth column. The value for your <code>style</code> attribute is <code>background-color: #97DB9A;</code></li> + <li>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 <code>style</code> attribute are <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>The last two days are free days, so just set them to no background color but a set width; the value for the <code>style</code> attribute is <code>width: 42px;</code></li> +</ol> + +<p>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 <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">see it live also</a>).</p> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div> + +<div> +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li> +</ul> +</div> diff --git a/files/de/learn/html/tables/index.html b/files/de/learn/html/tables/index.html new file mode 100644 index 0000000000..b9f1b0274f --- /dev/null +++ b/files/de/learn/html/tables/index.html @@ -0,0 +1,45 @@ +--- +title: HTML-Tabellen +slug: Learn/HTML/Tables +tags: + - <td> + - <th> + - <tr> + - Anfänger + - Beginner + - Guide + - HTML + - Landing + - Modul + - Tabellen +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Das Strukturieren tabellarischer Daten ist eine sehr häufige Aufgabe in HTML. Es gibt nur für diesen Zweck eine ganze Reihe von Elementen und Attributen. In Verbindung mit etwas <a href="/de/docs/Learn/CSS">CSS</a> zur Stilisierung können mit HTML sehr einfach tabellarische Informationen dargestellt werden, wie beispielsweise Ihr Stundenplan für die Schule, die Öffnungszeiten der lokalen Schwimmhalle oder statistische Daten über Ihre Lieblings-Dinosaurier oder Ihren Lieblings-Fußballverein. Dieses Modul zeigt Ihnen alles Wissenswerte zur Strukturierung tabellarischer Daten mit HTML.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Bevor Sie dieses Modul beginnen sollten Sie sich mit den Grundlagen von HTML beschäftigt haben – lesen Sie dazu die <a href="/de/docs/Learn/HTML/Einführung_in_HTML">Einführung in HTML</a>.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Wenn Sie auf einem Computer, Tablet oder anderem Gerät arbeiten, auf dem Sie nicht die Möglichkeit haben, eigene Dateien anzulegen, können Sie die (meisten) Codebeispiele auch in einem Online-Editor, wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> ausprobieren.</p> +</div> + +<h2 id="Lerneinheiten">Lerneinheiten</h2> + +<p>Dieses Modul enthält die folgenden Artikel:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt> + <dd>Dieser Artikel gibt Ihnen eine Einführung in HTML-Tabellen. Er behandelt die Grundlagen der Zeilen und Spalten, Kopfzeilen, Zellen, die mehrere Spalten und Zeilen überspannen, sowie das Gruppieren aller Zellen einer Spalte zur Stiländerung.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt> + <dd>Der zweite Artikel dieses Moduls betrachtet fortgeschrittenere Funktionen der HTML-Tabellen, wie Bildunterschriften/Zusammenfassungen, das Gruppieren von Zeilen zum Tabellenkopf, -körper und -fuß; aber auch die Barrierefreiheit von Tabellen für sehbehinderte Nutzer.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt> + <dd>In der Aufgabe zu Tabellen stellen wir Ihnen Daten zum Sonnensystem zur Verfügung, die Sie in einer HTML-Tabelle strukturieren sollen.</dd> +</dl> diff --git a/files/de/learn/index.html b/files/de/learn/index.html new file mode 100644 index 0000000000..d6607b71e5 --- /dev/null +++ b/files/de/learn/index.html @@ -0,0 +1,108 @@ +--- +title: Lerne Webentwicklung +slug: Learn +tags: + - Anfänger + - Beginner + - Index + - Internet + - Landing + - Lernen + - Web +translation_of: Learn +--- +<div class="summary"> +<p><strong>Willkommen im MDN Lernbereich!</strong><br> + Mit dieser Artikelreihe können Sie es vom Anfänger zum Webentwickler schaffen. Alles was sie brauchen, um einfache Webseiten zu coden, finden Sie hier.</p> +</div> + +<p>{{LearnSidebar}}</p> + +<p>Das Ziel dieser Artikelserie ist es, Sie von "Beginner" zum "Könner" Level zu bringen. Ein "Experte" werden Sie erst durch viel Übung an eigenen Projekten, wobei MDN immer eine wertvolle Ressource für Sie sein wird.</p> + +<p>Wenn Sie ein kompletter Anfänger sind, kann Webentwicklung eine schwere Herausforderung sein - wir werden behilflich "Ihre Hand halten" auf dem Weg zum echten Mozilla Webentwickler. Alle können sich hier daheim fühlen, egal ob sie Student sind, der Webentwicklung lernt (autodidaktisch oder innerhalb eines Kurses), ein Lehrer der nach Unterrichtsmaterial sucht, jemand der seinem Hobby nachgeht oder jemand der mehr über die Technologien, welche das Internet zusammenhalten, wissen möchte.</p> + +<div class="warning"> +<p><strong>Wichtig:</strong> Der Lernbereich wird ständig erweitert. Die Deutsche Übersetzung ist noch nicht vollständig, daran wird aber gearbeitet. Wenn Sie Fragen zu den Themen haben, dann {{anch("Kontaktieren Sie uns")}}.</p> +</div> + +<h2 id="Was_gibts_neues">Was gibt's neues?</h2> + +<p>Der Lernbereich wird regelmäßig von uns erweitert. Damit ihr auf dem neusten Stand bleibt, werden alle Neuerungen <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Release_notes">hier</a> erfasst. Guckt also gerne später nochmal vorbei!</p> + +<p>Wenn ihr Fragen zu Themen habt, die hier nicht oder eurer Meinung nach nur unvollständig beschrieben sind, dann schreibt uns eine Nachricht im <a href="https://discourse.mozilla.org/c/mdn/236">Discourse forum</a>.</p> + +<h3 id="Ihr_wollt_ein_Front-end_Web_Entwickler_werden">Ihr wollt ein Front-end Web Entwickler werden?</h3> + +<p>Wir haben alle grundlegenden Informationen in einem weiteren Kurs zusammengefasst, damit du alles hast, um dein Ziel zu erreichen.</p> + +<h2 id="Wo_anfangen">Wo anfangen</h2> + +<p>Wir möchten mit Ihnen auf einen Nenner kommen. Welche Beschreibung trifft am ehesten auf Sie zu?</p> + +<ul class="card-grid"> + <li><span>Ich bin Anfänger</span> + + <p>Herzlich Willkommen! Am besten fangen Sie mit unserer Serie <a href="/de/Learn/Getting_started_with_the_web">"Lerne das Internet kennen" </a>an. Hier erfahren Sie alles über die Grundlagen, welche Sie zum Einstieg in die Webentwicklung brauchen.</p> + </li> + <li><span>Ich kenne das Web</span> + <p>Sehr gut! In dem Fall können Sie sich die wichtigsten Webtechnologien genauer anschauen: <a href="/de/docs/Learn/HTML">HTML</a>, <a href="/de/docs/Learn/CSS">CSS</a> und <a href="/de/docs/Learn/JavaScript">JavaScript</a>.</p> + </li> + <li><span>Ich habe das Web gemeistert.</span> + <p>Großartig! Dann sind Sie möglicherweise an unseren fortgeschrittenen <a href="/en-US/docs/Web/Guide">Guides</a> und <a href="/en-US/docs/Web/Tutorials">Tutorials</a> interessiert. Vielleicht möchten Sie auch selbst <a href="/en-US/Learn/How_to_contribute">zum MDN Lernbereich beitragen</a> ;-)</p> + </li> +</ul> + +<div class="note"> +<p><span id="result_box" lang="en"><span class="hps">Hinweis:</span> <span class="hps">Wir werden immer mehr Lernmaterial veröffentlichen</span><span class="hps">,</span> <span class="hps">beispielsweise</span> <span class="hps">für erfahrene</span> <span class="hps">Programmierer</span> <span class="hps">zu </span><span class="hps">spezifische</span>n <span class="hps">fortgeschrittenen Techniken</span><span>,</span> <span class="hps">native</span> <span class="hps">Entwickler, die</span> <span class="hps">neu auf dem</span> <span class="hps">Web</span> <span class="hps">sind, oder</span> <span class="hps">Menschen, die</span> <span class="hps">Design-Techniken</span> <span class="hps">lernen wollen</span><span>.</span></span></p> +</div> + +<p>{{LearnBox({"title":"Schnell lernen: Vokabular"})}}</p> + +<h2 id="Unsere_Themen">Unsere Themen</h2> + +<p>Hier ist eine Liste mit unseren Artikelreihen.</p> + +<dl> + <dt><a href="/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a></dt> + <dd>Gibt eine grundlegende Einführung in Webentwicklung für Anfänger.</dd> + <dt><a href="/de/docs/Learn/HTML">HTML - Webseiten strukturieren</a></dt> + <dd>Hier wird Ihnen die jeder Webseite zugrunde liegende Sprache beigebracht. HTML ist dazu da Webseiten ein Grundgerüst und Struktur zu geben.</dd> + <dt><a href="/de/docs/Learn/CSS">CSS - Webseiten designen</a></dt> + <dd>CSS ist die Sprache, die wir benutzen, um einer Webseite einen bestimmten Stil zu geben. Farben, Schriftarten und die Position eines Elements auf der Webseite, das alles und mehr kann man mit CSS bestimmen. In diesem Bereich lernen sie grundlegendes CSS.</dd> + <dt><a href="/de/docs/Learn/JavaScript">JavaScript - dynamische, benutzerseitige Skriptsprache</a></dt> + <dd>JavaScript ist die Skriptsprache des Internets. Sie wird benutzt um einer Webseite dynamischen Inhalt hinzuzufügen. In dieser Artikelreihe lernen Sie die Grundlagen von JavaScript.</dd> + <dt><a href="/de/docs/Learn/Accessibility">Barrierefreiheit - Mache das Internet für jeden zugänglich</a></dt> + <dd>Barrierefreiheit - hier geht es darum das Internet für alle Zugänglich zu machen, ob für Menschen mit Behinderungen oder für einen mobilen Zugang oder andere Zugangsmöglichkeiten. Diese Artikel geben Ihnen einiges Wissen an die Hand, wie Sie die Zugänglichkeit Ihrer Webseite erhöhen können.</dd> + <dt><a href="/de/docs/Learn/Tools_and_testing">Werkzeuge und Tests</a></dt> + <dd>Hier werden verschiedene Werkzeuge für Webentwickler vorgestellt, zum Beispiel Werkzeuge, um eine Webseite in verschiedenen Browsern zu testen.</dd> + <dt><a href="/de/docs/Learn/Server-side">Serverseitige Webseitenprogrammierung</a></dt> + <dd>Selbst wenn Sie sich auf die benutzerseitige Webseitenentwicklung spezialisiert haben, ist es sinnvoll ein grundlegendes Verständinis für serverseitige Programmierung zu besitzen. Dieses Thema gibt Ihnen eine Einführung darin, wie serverseitige Programmiersprachen funktionieren. Es gibt detailierte Anleitungen für zwei populäre Frameworks, für Django (Python) und Express (node.js).</dd> +</dl> + +<h2 id="Wie_kommen_Sie_an_unsere_Code-Beispiele">Wie kommen Sie an unsere Code-Beispiele?</h2> + +<p>Die Code-Beispiele, welche sie in unserem Lernbereich finden sind alle über <a href="https://github.com/mdn/learning-area/">Github</a> zugänglich. Sie können diese auf Ihren eigenen Computer kopieren, um mit diesen zu üben.</p> + +<h2 id="Kontaktieren_Sie_uns">Kontaktieren Sie uns</h2> + +<p>Der gesamte Lernbereich wurde von unseren Freiwilligen erstellt. Wir brauchen Sie in unserem Team, egal ob Sie Anfänger, Lehrer oder ein erfahrener Webentwickler sind. Falls Sie Interesse haben am MDN-Projekt mitzuwirken, dann können Sie und über unsere <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">Mailing-Listen</a> oder den <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC Channel</a> erreichen. :)</p> + +<h2 id="Weiteres">Weiteres</h2> + +<dl> + <dt><a href="https://www.mozilla.org/en-US/newsletter/developer/">Mozilla Developer Newsletter</a></dt> + <dd>Unser Newsletter für Webentwickler. (in Englisch)</dd> +</dl> + +<dl> + <dt><a href="https://www.codecademy.com/">Codecademy</a></dt> + <dd>Eine gute, interaktive Webseite, um Programmiersprachen und Webentwicklung zu lernen. (in Englisch)</dd> + <dt><a href="https://code.org/">Code.org</a></dt> + <dd>Für Schüler und Lehrer gedacht.(teilweise in Deutsch)</dd> + <dt><a href="https://www.freecodecamp.com/">freeCodeCamp.com</a></dt> + <dd>Interaktive Seite mit Tutorials und Projekten zum Thema coden. (auf Englisch)</dd> +</dl> + +<p><strong><a href="https://edabit.com/challenges">Edabit</a></strong><br> + Tausende interaktive JavaScript-Herausforderungen.</p> diff --git a/files/de/learn/javascript/bausteine/ereignisse/index.html b/files/de/learn/javascript/bausteine/ereignisse/index.html new file mode 100644 index 0000000000..c07922c124 --- /dev/null +++ b/files/de/learn/javascript/bausteine/ereignisse/index.html @@ -0,0 +1,587 @@ +--- +title: Einleitung der Ereignissen +slug: Learn/JavaScript/Bausteine/Ereignisse +translation_of: Learn/JavaScript/Building_blocks/Events +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div> + +<p class="summary">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.<br> + Ein Beispiel: Ein Benutzer klickt einen Knopf auf der Website, woraufhin eine Box mit Infromationen eingeblendet wird.<br> + 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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To understand the fundamental theory of events, how they work in browsers, and how events may differ in different programming environments.</td> + </tr> + </tbody> +</table> + +<h2 id="A_series_of_fortunate_events">A series of fortunate events</h2> + +<p>As mentioned above, <strong>events</strong> 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p> + +<p>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:</p> + +<ul> + <li>The user clicking the mouse over a certain element or hovering the cursor over a certain element.</li> + <li>The user pressing a key on the keyboard.</li> + <li>The user resizing or closing the browser window.</li> + <li>A web page finishing loading.</li> + <li>A form being submitted.</li> + <li>A video being played, or paused, or finishing play.</li> + <li>An error occurring.</li> +</ul> + +<p>You can gather from this (and from glancing at the MDN <a href="/en-US/docs/Web/Events">Event reference</a>) that there are <strong>a lot</strong> of events that can be responded to.</p> + +<p>Each available event has an <strong>event handler</strong>, 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 <strong>registering an event handler</strong>. Note that event handlers are sometimes called <strong>event listeners</strong> — 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.</p> + +<div class="note"> +<p><strong>Note</strong>: Web events are not part of the core JavaScript language — they are defined as part of the APIs built into the browser.</p> +</div> + +<h3 id="A_simple_example">A simple example</h3> + +<p>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:</p> + +<pre class="brush: html"><button>Change color</button></pre> + +<div class="hidden"> +<pre class="brush: css">button { margin: 10px };</pre> +</div> + +<p>The JavaScript looks like so:</p> + +<pre class="brush: js">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; +}</pre> + +<p>In this code, we store a reference to the button inside a constant called <code>btn</code>, 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 <code>btn</code> constant points to a <code><a href="/en-US/docs/Web/HTML/Element/button"><button></a></code> 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 <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> event firing, by setting the <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> event handler property to equal an anonymous function containing code that generates a random RGB color and sets the <code><a href="/en-US/docs/Web/HTML/Element/body"><body></a></code> <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> equal to it.</p> + +<p>This code is run whenever the click event fires on the <code><button></code> element, that is, whenever a user clicks on it.</p> + +<p>The example output is as follows:</p> + +<p>{{ EmbedLiveSample('A_simple_example', '100%', 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Its_not_just_web_pages">It's not just web pages</h3> + +<p>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.</p> + +<p>For example, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> is a very popular JavaScript runtime that enables developers to use JavaScript to build network and server-side applications. The <a href="https://nodejs.org/docs/latest-v12.x/api/events.html">Node.js event model</a> 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 <code>on()</code> to register an event listener, and <code>once()</code> to register an event listener that unregisters after it has run once. The <a href="https://nodejs.org/docs/latest-v12.x/api/http.html#http_event_connect">HTTP connect event docs</a> provide a good example of use.</p> + +<p>As another example, you can also use JavaScript to build cross-browser add-ons — browser functionality enhancements — using a technology called <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. The event model is similar to the web events model, but a bit different — event listeners properties are camel-cased (such as <code>onMessage</code> rather than <code>onmessage</code>), and need to be combined with the <code>addListener</code> function. See the <a href="/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples"><code>runtime.onMessage</code> page</a> for an example.</p> + +<p>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.</p> + +<h2 id="Ways_of_using_web_events">Ways of using web events</h2> + +<p>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.</p> + +<h3 id="Event_handler_properties">Event handler properties</h3> + +<p>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:</p> + +<pre class="brush: js">const btn = document.querySelector('button'); + +btn.onclick = function() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<p>The <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> 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. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, or <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), 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.</p> + +<p>You could also set the handler property to be equal to a named function name (like we saw in <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a>). The following would work just the same:</p> + +<pre class="brush: js">const btn = document.querySelector('button'); + +function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +} + +btn.onclick = bgChange;</pre> + +<p>There are many different event handler properties available. Let's do an experiment.</p> + +<p>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, 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 <code>btn.onclick</code> to the following different values in turn, and observing the results in the example:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — The color changes when the button is focused and unfocused; try pressing tab to focus on the button and press tab again to focus away from the button. These are often used to display information about how to fill in form fields when they are focused, or display an error message if a form field has just been filled in with an incorrect value.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — The color changes only when the button is double-clicked.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — The color changes when a key is pressed on the keyboard. The <code>keypress</code> event refers to a general press (button down and then up), while <code>keydown</code> and <code>keyup</code> refer to just the key down and key up parts of the keystroke, respectively. Note that it doesn't work if you try to register this event handler on the button itself — we've had to register it on the <a href="/en-US/docs/Web/API/Window">window</a> object, which represents the entire browser window.</li> + <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> and <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — The color changes when the mouse pointer is moved so it begins hovering over the button, or when pointer stops hovering over the button and moves off of it, respectively.</li> +</ul> + +<p>Some events are very general and available nearly anywhere (for example an <code>onclick</code> 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 <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> only on specific elements, such as {{htmlelement("video")}}).</p> + +<h3 id="Inline_event_handlers_—_dont_use_these">Inline event handlers — don't use these</h3> + +<p>You might also see a pattern like this in your code:</p> + +<pre class="brush: html"><button onclick="bgChange()">Press me</button> +</pre> + +<pre class="brush: js">function bgChange() { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">see it running live</a>).</p> +</div> + +<p>The earliest method of registering event handlers found on the Web involved <strong>event handler HTML attributes</strong> (or <strong>inline event handlers</strong>) 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:</p> + +<pre class="brush: html"><button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button></pre> + +<p>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.</p> + +<p>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.</p> + +<p>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:</p> + +<pre class="brush: js">const buttons = document.querySelectorAll('button'); + +for (let i = 0; i < buttons.length; i++) { + buttons[i].onclick = bgChange; +}</pre> + +<p class="brush: js">Note that another option here would be to use the <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code> built-in method available on <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code> objects:</p> + +<pre class="brush: js">buttons.forEach(function(button) { + button.onclick = bgChange; +});</pre> + +<div class="note"> +<p><strong>Note</strong>: Separating your programming logic from your content also makes your site more friendly to search engines.</p> +</div> + +<h3 id="addEventListener_and_removeEventListener">addEventListener() and removeEventListener()</h3> + +<p>The newest type of event mechanism is defined in the <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> Specification, which provides browsers with a new function — <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. 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:</p> + +<pre class="brush: js">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);</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">see it running live</a>).</p> +</div> + +<p>Inside the <code>addEventListener()</code> 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 <code>addEventListener()</code> function, in an anonymous function, like this:</p> + +<pre class="brush: js">btn.addEventListener('click', function() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + document.body.style.backgroundColor = rndCol; +});</pre> + +<p>This mechanism has some advantages over the older mechanisms discussed earlier. For a start, there is a counterpart function, <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, which removes a previously added listener. For example, this would remove the listener set in the first code block in this section:</p> + +<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre> + +<p>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.</p> + +<p>Second, you can also register multiple handlers for the same listener. The following two handlers wouldn't both be applied:</p> + +<pre class="brush: js">myElement.onclick = functionA; +myElement.onclick = functionB;</pre> + +<p>The second line overwrites the value of <code>onclick</code> set by the first line. This would work, however:</p> + +<pre class="brush: js">myElement.addEventListener('click', functionA); +myElement.addEventListener('click', functionB);</pre> + +<p>Both functions would now run when the element is clicked.</p> + +<p>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 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> and <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code> reference pages.</p> + +<h3 id="What_mechanism_should_I_use">What mechanism should I use?</h3> + +<p>Of the three mechanisms, you definitely shouldn't use the HTML event handler attributes — these are outdated, and bad practice, as mentioned above.</p> + +<p>The other two are relatively interchangeable, at least for simple uses:</p> + +<ul> + <li>Event handler properties have less power and options, but better cross-browser compatibility (being supported as far back as Internet Explorer 8). You should probably start with these as you are learning.</li> + <li>DOM Level 2 Events (<code>addEventListener()</code>, etc.) are more powerful, but can also become more complex and are less well supported (supported as far back as Internet Explorer 9). You should also experiment with these, and aim to use them where possible.</li> +</ul> + +<p>The main advantages of the third mechanism are that you can remove event handler code if needed, using <code>removeEventListener()</code>, and you can add multiple listeners of the same type to elements if required. For example, you can call <code>addEventListener('click', function() { ... })</code> 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.:</p> + +<pre class="brush: js">element.onclick = function1; +element.onclick = function2; +etc.</pre> + +<div class="note"> +<p><strong>Note</strong>: 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 <code>jQuery</code>) have built-in functions that abstract away cross-browser differences. Don't worry about this too much at this stage in your learning journey.</p> +</div> + +<h2 id="Other_event_concepts">Other event concepts</h2> + +<p>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.</p> + +<h3 id="Event_objects">Event objects</h3> + +<p>Sometimes inside an event handler function, you might see a parameter specified with a name such as <code>event</code>, <code>evt</code>, or simply <code>e</code>. This is called the <strong>event object</strong>, 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:</p> + +<pre class="brush: js">function bgChange(e) { + const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + e.target.style.backgroundColor = rndCol; + console.log(e); +} + +btn.addEventListener('click', bgChange);</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">full source code</a> for this example on GitHub (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">see it running live</a>).</p> +</div> + +<p>Here you can see that we are including an event object, <strong>e</strong>, in the function, and in the function setting a background color style on <code>e.target</code> — which is the button itself. The <code>target</code> 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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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. <code>e</code>/<code>evt</code>/<code>event</code> 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.</p> +</div> + +<p><code>e.target</code> 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 <code>e.target</code>, rather than having to select it in some more difficult way. In the following example (see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> for the full source code; also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">running live</a> 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 <code>onclick</code> handler to each that makes it so that a random color is applied to each one when clicked:</p> + +<pre class="brush: js">const divs = document.querySelectorAll('div'); + +for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } +}</pre> + +<p>The output is as follows (try clicking around on it — have fun):</p> + +<div class="hidden"> +<h6 id="Hidden_example">Hidden example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Useful event target example</title> + <style> + div { + height: 100px; + width: 25%; + float: left; + } + </style> + </head> + <body> + <script> + for (let i = 1; i <= 16; i++) { + const myDiv = document.createElement('div'); + myDiv.style.backgroundColor = "red"; + document.body.appendChild(myDiv); + } + + function random(number) { + return Math.floor(Math.random()*number); + } + + function bgChange() { + var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; + return rndCol; + } + + const divs = document.querySelectorAll('div'); + + for (let i = 0; i < divs.length; i++) { + divs[i].onclick = function(e) { + e.target.style.backgroundColor = bgChange(); + } + } + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>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 <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, for example, has a <code>dataavailable</code> 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 <a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler's event object has a <code>data</code> property available containing the recorded audio or video data to allow you to access it and do something with it.</p> + +<h3 id="Preventing_default_behavior">Preventing default behavior</h3> + +<p>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.)</p> + +<p>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.</p> + +<p>First, a simple HTML form that requires you to enter your first and last name:</p> + +<pre class="brush: html"><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></pre> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} +</pre> +</div> + +<p>Now some JavaScript — here we implement a very simple check inside an <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a></code> 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 <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> 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:</p> + +<pre class="brush: js">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!'; + } +}</pre> + +<p>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:</p> + +<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: for the full source code, see <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (also see it <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">running live</a> here.)</p> +</div> + +<h3 id="Event_bubbling_and_capture">Event bubbling and capture</h3> + +<p>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 <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> example in a new tab (and the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">source code</a> in another tab.) It is also available live below:</p> + +<div class="hidden"> +<h6 id="Hidden_video_example">Hidden video example</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Show video box example</title> + <style> + div { + position: absolute; + top: 50%; + transform: translate(-50%,-50%); + width: 480px; + height: 380px; + border-radius: 10px; + background-color: #eee; + background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1)); + } + + .hidden { + left: -50%; + } + + .showing { + left: 50%; + } + + div video { + display: block; + width: 400px; + margin: 40px auto; + } + + </style> + </head> + <body> + <button>Display video</button> + + <div class="hidden"> + <video> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"> + <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/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> + + <script> + + const btn = document.querySelector('button'); + const videoBox = document.querySelector('div'); + const video = document.querySelector('video'); + + btn.onclick = function() { + displayVideo(); + } + + function displayVideo() { + if(videoBox.getAttribute('class') === 'hidden') { + videoBox.setAttribute('class','showing'); + } + } + + videoBox.addEventListener('click',function() { + videoBox.setAttribute('class','hidden'); + }); + + video.addEventListener('click',function() { + video.play(); + }); + + </script> + </body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>This is a pretty simple example that shows and hides a {{htmlelement("div")}} with a {{htmlelement("video")}} element inside it:</p> + +<pre class="brush: html"><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></pre> + +<p>When the {{htmlelement("button")}} is clicked, the video is displayed, by changing the class attribute on the <code><div></code> from <code>hidden</code> to <code>showing</code> (the example's CSS contains these two classes, which position the box off the screen and on the screen, respectively):</p> + +<pre class="brush: js">btn.onclick = function() { + videoBox.setAttribute('class', 'showing'); +}</pre> + +<p>We then add a couple more <code>onclick</code> event handlers — the first one to the <code><div></code> and the second one to the <code><video></code>. The idea is that when the area of the <code><div></code> outside the video is clicked, the box should be hidden again; when the video itself is clicked, the video should start to play.</p> + +<pre class="brush: js">videoBox.onclick = function() { + videoBox.setAttribute('class', 'hidden'); +}; + +video.onclick = function() { + video.play(); +};</pre> + +<p>But there's a problem — currently, when you click the video it starts to play, but it causes the <code><div></code> to also be hidden at the same time. This is because the video is inside the <code><div></code> — it is part of it — so clicking on the video actually runs <em>both</em> the above event handlers.</p> + +<h4 id="Bubbling_and_capturing_explained">Bubbling and capturing explained</h4> + +<p>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 <strong>capturing</strong> phase and the <strong>bubbling</strong> phase.</p> + +<p>In the <strong>capturing</strong> phase:</p> + +<ul> + <li>The browser checks to see if the element's outer-most ancestor ({{htmlelement("html")}}) has an <code>onclick</code> event handler registered on it for the capturing phase, and runs it if so.</li> + <li>Then it moves on to the next element inside <code><html></code> and does the same thing, then the next one, and so on until it reaches the element that was actually clicked on.</li> +</ul> + +<p>In the <strong>bubbling</strong> phase, the exact opposite occurs:</p> + +<ul> + <li>The browser checks to see if the element that was actually clicked on has an <code>onclick</code> event handler registered on it for the bubbling phase, and runs it if so.</li> + <li>Then it moves on to the next immediate ancestor element and does the same thing, then the next one, and so on until it reaches the <code><html></code> element.</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p> + +<p>(Click on image for bigger diagram)</p> + +<p>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 <code><video></code> element outwards to the <code><html></code> element. Along the way:</p> + +<ul> + <li>It finds the <code>video.onclick...</code> handler and runs it, so the video first starts playing.</li> + <li>It then finds the <code>videoBox.onclick...</code> handler and runs it, so the video is hidden as well.</li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: In cases where both types of event handlers are present, bubbling and capturing, the capturing phase will run first, followed by the bubbling phase.</p> +</div> + +<h4 id="Fixing_the_problem_with_stopPropagation">Fixing the problem with stopPropagation()</h4> + +<p>This is annoying behavior, but there is a way to fix it! The standard <code><a href="/en-US/docs/Web/API/Event">Event</a></code> object has a function available on it called <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code> 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.</p> + +<p>We can, therefore, fix our current problem by changing the second handler function in the previous code block to this:</p> + +<pre class="brush: js">video.onclick = function(e) { + e.stopPropagation(); + video.play(); +};</pre> + +<p>You can try making a local copy of the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html source code</a> and fixing it yourself, or looking at the fixed result in <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (also see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">source code</a> here).</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: 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 <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, and setting the optional third property to <code>true</code>.</p> +</div> + +<h4 id="Event_delegation">Event delegation</h4> + +<p>Bubbling also allows us to take advantage of <strong>event delegation</strong> — 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.?</p> + +<p>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 <code>click</code> event listener on the parent <code><ul></code>, and events will bubble from the list items to the <code><ul></code>.</p> + +<p>This concept is explained further on David Walsh's blog, with multiple examples — see <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events">Test your skills: Events</a>.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>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.</p> + +<p>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.</p> + +<p>If there is anything you didn't understand, feel free to read through the article again, or <a href="https://discourse.mozilla.org/c/mdn/learn">contact us</a> to ask for help.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion of capturing and bubbling) — an excellently detailed piece by Peter-Paul Koch.</li> + <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion of the event object) — another excellently detailed piece by Peter-Paul Koch.</li> + <li><a href="/en-US/docs/Web/Events">Event reference</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li> +</ul> diff --git a/files/de/learn/javascript/bausteine/index.html b/files/de/learn/javascript/bausteine/index.html new file mode 100644 index 0000000000..1c6fb8fc46 --- /dev/null +++ b/files/de/learn/javascript/bausteine/index.html @@ -0,0 +1,42 @@ +--- +title: JavaScript Bausteine +slug: Learn/JavaScript/Bausteine +translation_of: Learn/JavaScript/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">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.</p> + +<h2 id="Vorraussetzungen">Vorraussetzungen</h2> + +<p>Bevor du mit diesem Modul anfängst, solltest du mit den Grundlagen von <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> und <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a> vertraut sein und das vorherige Modul, <a href="/en-US/docs/Learn/JavaScript/First_steps">Erste Schritte mit JavaScript</a>, abgeschlossen haben.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: 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 <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a>, ausprobieren.</p> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de-DE/docs/Learn/JavaScript/Building_blocks/conditionals">Entscheidungen treffen --- Fallunterscheidungen </a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Code wiederholen</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Funktionen -- Wiederverwendbare Codeblöcke </a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Baue deine eigene Funktion </a></dt> + <dd>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. </dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Rückgabewerte von Funktionen</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Einführung in Events</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Prüfungen">Prüfungen</h2> + +<p>Die folgenden Aufgaben werden dein Verständnis der in diesen Artikeln behandelten JavaScript Grundlagen prüfen. </p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Bildergalerie</a></dt> + <dd>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.</dd> +</dl> diff --git a/files/de/learn/javascript/first_steps/erster_blick/index.html b/files/de/learn/javascript/first_steps/erster_blick/index.html new file mode 100644 index 0000000000..e772147cae --- /dev/null +++ b/files/de/learn/javascript/first_steps/erster_blick/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Grundlegende Computerkenntnisse, einfache Grundkentnisse von HTML und CSS, sowie eine Vorstellung, was JavaScript ist.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>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.</td> + </tr> + </tbody> +</table> + +<p>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!</p> + +<div class="note"> +<p>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.</p> +</div> + +<h2 id="Denken_wie_ein_Programmierer">Denken wie ein Programmierer</h2> + +<p>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.</p> + +<p>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.</p> + +<p>In diesem Sinne betrachten Sie das Beispiel, das wir in diesem Artikel erstellen werden und üben damit den Prozess der Zerlegung in konkrete Einzelschritte.</p> + +<h2 id="Beispiel_—_Rate_die_Zahl">Beispiel — Rate die Zahl</h2> + +<p>In diesem Artikel zeigen wir Ihnen, wie Sie das Ratespiel aufbauen können, das Sie hier sehen können.:</p> + +<div class="hidden"> +<h6 id="Top_hidden_code">Top hidden code</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + +<head> + <meta charset="utf-8"> + <title>Number guessing game</title> + <style> + html { + font-family: sans-serif; + } + + body { + width: 50%; + max-width: 800px; + min-width: 480px; + margin: 0 auto; + } + + .lastResult { + color: white; + padding: 3px; + } + </style> +</head> + +<body> + <h1>Zahlenraten</h1> + <p>Wir haben eine Zufallszahl zwischen 1 und 100 gewählt. Können Sie sie in höchstens 10 Versuchen erraten? Nach jeder Eingabe bekommen Sie einen Hinweis ob ihre Zahl zu gross oder zu klein war</p> + <div class="form"> <label for="guessField">Geben Sie ihre Zahl ein: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Tip absenden" class="guessSubmit"> </div> + <div class="resultParas"> + <p class="guesses"></p> + <p class="lastResult"></p> + <p class="lowOrHi"></p> + </div> +<script> + // Ihr JavaScript Code steht hier + 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; + + function checkGuess() { + let userGuess = Number(guessField.value); + if (guessCount === 1) { + guesses.textContent = 'Vorherige Versuche: '; + } + + guesses.textContent += userGuess + ' '; + + if (userGuess === randomNumber) { + lastResult.textContent = 'Glückwunsch! Richtig geraten!'; + lastResult.style.backgroundColor = 'green'; + lowOrHi.textContent = ''; + setGameOver(); + } else if (guessCount === 10) { + lastResult.textContent = '!!!ENDESPIEL!!!'; + lowOrHi.textContent = ''; + setGameOver(); + } else { + lastResult.textContent = 'Falsch!'; + lastResult.style.backgroundColor = 'red'; + if(userGuess < randomNumber) { + lowOrHi.textContent = 'Ihre Zahl ist zu niedrig!' ; + } else if(userGuess > randomNumber) { + lowOrHi.textContent = 'Ihre Zahl ist zu hoch!'; + } + } + + guessCount++; + guessField.value = ''; + } + + guessSubmit.addEventListener('click', checkGuess); + + function setGameOver() { + guessField.disabled = true; + guessSubmit.disabled = true; + resetButton = document.createElement('button'); + resetButton.textContent = 'Spiel neu starten'; + document.body.appendChild(resetButton); + resetButton.addEventListener('click', resetGame); + } + + 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; + } +</script> + +</body> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Machen Sie sich mit der Funktionsweise des Spiels vertraut, bevor Sie weitermachen.</p> + +<p>Stellen wir uns vor, Ihr Chef hat Ihnen den folgenden Auftrag für die Erstellung dieses Spiels gegeben:</p> + +<blockquote> +<p>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.</p> +</blockquote> + +<p>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:</p> + +<ol> + <li>Generiere eine zufällige Zahl zwischen 1 und 100.</li> + <li>Speichere die Anzahl der getätigten Rateversuche, setze den Wert anfangs auf 1.</li> + <li>Ermögliche dem Spieler, einen Tipp abzugeben.</li> + <li>Sobald ein Tip abgegeben wurde, speichere sie damit der Spieler seine vorherigen Eingaben sehen kann.</li> + <li>Als Nächstes überprüfe, ob es sich um die richtige Zahl handelt.</li> + <li>Wenn sie richtig ist: + <ol> + <li>Zeige Glückwunsch Nachricht.</li> + <li>Verhindere weiter Eingaben, da das Spiel zu Ende ist.</li> + <li>Biete eine Möglichkeit, das Spiel neu zu starten.</li> + </ol> + </li> + <li>Wenn sie falsch ist und noch Versuche übrig sind: + <ol> + <li>Dem Spieler mitteilen, dass die Zahl noch nicht erraten ist.</li> + <li>Die Eingabe einer weiteren Zahl ermöglichen.</li> + <li>Die Anzahl der Rateversuche um 1 erhöhen.</li> + </ol> + </li> + <li>Wenn die Zahl falsch ist und keine Versuche mehr übrig sind: + <ol> + <li>Dem Spieler mitteilen, dass das Spiel zu Ende ist.</li> + <li>Keine weiteren Eingaben mehr zulassen.</li> + <li>Ein Steuerelement zum Neustart des Spiels anzeigen.</li> + </ol> + </li> + <li>Wenn das Spiel neu startet, sicherstellen dass Logik und Benutzeroberfläche zurückgesetzt werden. Danach zurück zum 1. Schritt.</li> +</ol> + +<p>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.</p> + +<h3 id="Vorbereitungen">Vorbereitungen</h3> + +<p>Um dieses Tutorial zu beginnen, möchten wir Sie bitten, eine lokale Kopie der Datei <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">see it live here</a>) 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.</p> + +<p>Unseren gesamten Code werden wir innerhalb des {{htmlelement("script")}} Elements am Ende der HTML-Datei einfügen:</p> + +<pre class="brush: html"><script> + + // Ihr Programm steht hier + +</script> +</pre> + +<h3 id="Variablen_hinzufügen_um_Daten_zu_speichern">Variablen hinzufügen um Daten zu speichern</h3> + +<p>Lassen Sie uns anfangen. Fügen Sie zunächst die folgenden Zeilen nach dem {{htmlelement("script")}} Element ein:</p> + +<pre class="brush: js">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;</pre> + +<p>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 <code>let</code> (oder <code>var</code>) 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.</p> + +<p>Sie können Ihrer Variablen oder Konstanten einen Wert mit einem Gleichheitszeichen (=) zuweisen, gefolgt von dem Wert, den Sie ihr geben möchten.</p> + +<p>In unser Beispiel:</p> + +<ul> + <li>Die erste Variable — <code>randomNumber</code> — ist assigned a random number between 1 and 100, calculated using a mathematical algorithm.</li> + <li>The first three constants are each made to store a reference to the results paragraphs in our HTML, and are used to insert values into the paragraphs later on in the code: + <pre class="brush: html"><p class="guesses"></p> +<p class="lastResult"></p> +<p class="lowOrHi"></p></pre> + </li> + <li>The next two constants store references to the form text input and submit button and are used to control submitting the guess later on. + <pre class="brush: html"><label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> +<input type="submit" value="Submit guess" class="guessSubmit"></pre> + </li> + <li>Our final two variables store a guess count of 1 (used to keep track of how many guesses the player has had), and a reference to a reset button that doesn't exist yet (but will later).</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You'll learn a lot more about variables/constants later on in the course, starting with the <a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/variables">next article</a>.</p> +</div> + +<h3 id="Functions">Functions</h3> + +<p>Next, add the following below your previous JavaScript:</p> + +<pre class="brush: js">function checkGuess() { + alert('I am a placeholder'); +}</pre> + +<p>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 <code>function</code>, followed by a name, with parentheses put after it. After that we put two curly braces (<code>{ }</code>). Inside the curly braces goes all the code that we want to run whenever we call the function.</p> + +<p>When we want to run the code, we type the name of the function followed by the parentheses.</p> + +<p>Let's try that now. Save your code and refresh the page in your browser. Then go into the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>, and enter the following line:</p> + +<pre class="brush: js">checkGuess();</pre> + +<p>After pressing <kbd>Return</kbd>/<kbd>Enter</kbd>, you should see an alert come up that says "<samp>I am a placeholder</samp>"; we have defined a function in our code that creates an alert whenever we call it.</p> + +<div class="note"> +<p><strong>Note</strong>: You'll learn a lot more about functions <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">later in the course</a>.</p> +</div> + +<h3 id="Operators">Operators</h3> + +<p>JavaScript operators allow us to perform tests, do maths, join strings together, and other such things.</p> + +<p>If you haven't already done so, save your code, refresh the page in your browser, and open the <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>. Then we can try typing in the examples shown below — type in each one from the "Example" columns exactly as shown, pressing <kbd>Return</kbd>/<kbd>Enter</kbd> after each one, and see what results they return.</p> + +<p>First let's look at arithmetic operators, for example:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Example</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>+</code></td> + <td>Addition</td> + <td><code>6 + 9</code></td> + </tr> + <tr> + <td><code>-</code></td> + <td>Subtraction</td> + <td><code>20 - 15</code></td> + </tr> + <tr> + <td><code>*</code></td> + <td>Multiplication</td> + <td><code>3 * 7</code></td> + </tr> + <tr> + <td><code>/</code></td> + <td>Division</td> + <td><code>10 / 5</code></td> + </tr> + </tbody> +</table> + +<p>You can also use the <code>+</code> operator to join text strings together (in programming, this is called <em>concatenation</em>). Try entering the following lines, one at a time:</p> + +<pre class="brush: js">let name = 'Bingo'; +name; +let hello = ' says hello!'; +hello; +let greeting = name + hello; +greeting;</pre> + +<p>There are also some shortcut operators available, called augmented <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">assignment operators</a>. For example, if you want to simply add a new text string to an existing one and return the result, you could do this:</p> + +<pre class="brush: js">name += ' says hello!';</pre> + +<p>This is equivalent to</p> + +<pre class="brush: js">name = name + ' says hello!';</pre> + +<p>When we are running true/false tests (for example inside conditionals — see {{anch("Conditionals", "below")}}) we use <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">comparison operators</a>. For example:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Operator</th> + <th scope="col">Name</th> + <th scope="col">Example</th> + </tr> + <tr> + <td><code>===</code></td> + <td>Strict equality (is it exactly the same?)</td> + <td> + <pre class="brush: js"> +5 === 2 + 4 // false +'Chris' === 'Bob' // false +5 === 2 + 3 // true +2 === '2' // false; number versus string +</pre> + </td> + </tr> + <tr> + <td><code>!==</code></td> + <td>Non-equality (is it not the same?)</td> + <td> + <pre class="brush: js"> +5 !== 2 + 4 // true +'Chris' !== 'Bob' // true +5 !== 2 + 3 // false +2 !== '2' // true; number versus string +</pre> + </td> + </tr> + <tr> + <td><code><</code></td> + <td>Less than</td> + <td> + <pre class="brush: js"> +6 < 10 // true +20 < 10 // false</pre> + </td> + </tr> + <tr> + <td><code>></code></td> + <td>Greater than</td> + <td> + <pre class="brush: js"> +6 > 10 // false +20 > 10 // true</pre> + </td> + </tr> + </thead> +</table> + +<h3 id="Conditionals">Conditionals</h3> + +<p>Returning to our <code>checkGuess()</code> 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.</p> + +<p>At this point, replace your current <code>checkGuess()</code> function with this version instead:</p> + +<pre class="brush: js">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(); +}</pre> + +<p>This is a lot of code — phew! Let's go through each section and explain what it does.</p> + +<ul> + <li>The first line (line 2 above) declares a variable called <code>userGuess</code> and sets its value to the current value entered inside the text field. We also run this value through the built-in <code>Number()</code> constructor, just to make sure the value is definitely a number.</li> + <li>Next, we encounter our first conditional code block (lines 3–5 above). A conditional code block allows you to run code selectively, depending on whether a certain condition is true or not. It looks a bit like a function, but it isn't. The simplest form of conditional block starts with the keyword <code>if</code>, then some parentheses, then some curly braces. Inside the parentheses we include a test. If the test returns <code>true</code>, we run the code inside the curly braces. If not, we don't, and move on to the next bit of code. In this case the test is testing whether the <code>guessCount</code> variable is equal to <code>1</code> (i.e. whether this is the player's first go or not): + <pre class="brush: js">guessCount === 1</pre> + If it is, we make the guesses paragraph's text content equal to "<samp>Previous guesses: </samp>". If not, we don't.</li> + <li>Line 6 appends the current <code>userGuess</code> value onto the end of the <code>guesses</code> paragraph, plus a blank space so there will be a space between each guess shown.</li> + <li>The next block (lines 8–24 above) does a few checks: + <ul> + <li>The first <code>if(){ }</code> checks whether the user's guess is equal to the <code>randomNumber</code> set at the top of our JavaScript. If it is, the player has guessed correctly and the game is won, so we show the player a congratulations message with a nice green color, clear the contents of the Low/High guess information box, and run a function called <code>setGameOver()</code>, which we'll discuss later.</li> + <li>Now we've chained another test onto the end of the last one using an <code>else if(){ }</code> structure. This one checks whether this turn is the user's last turn. If it is, the program does the same thing as in the previous block, except with a game over message instead of a congratulations message.</li> + <li>The final block chained onto the end of this code (the <code>else { }</code>) contains code that is only run if neither of the other two tests returns true (i.e. the player didn't guess right, but they have more guesses left). In this case we tell them they are wrong, then we perform another conditional test to check whether the guess was higher or lower than the answer, displaying a further message as appropriate to tell them higher or lower.</li> + </ul> + </li> + <li>The last three lines in the function (lines 26–28 above) get us ready for the next guess to be submitted. We add 1 to the <code>guessCount</code> variable so the player uses up their turn (<code>++</code> is an incrementation operation — increment by 1), and empty the value out of the form text field and focus it again, ready for the next guess to be entered.</li> +</ul> + +<h3 id="Events">Events</h3> + +<p>At this point we have a nicely implemented <code>checkGuess()</code> 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 <strong>event listeners</strong>, and the blocks of code that run in response to the event firing are called <strong>event handlers</strong>.</p> + +<p>Add the following line below your <code>checkGuess()</code> function:</p> + +<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre> + +<p>Here we are adding an event listener to the <code>guessSubmit</code> button. This is a method that takes two input values (called <em>arguments</em>) — the type of event we are listening out for (in this case <code>click</code>) as a string, and the code we want to run when the event occurs (in this case the <code>checkGuess()</code> function). Note that we don't need to specify the parentheses when writing it inside {{domxref("EventTarget.addEventListener", "addEventListener()")}}.</p> + +<p>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 <code>setGameOver()</code> function that is supposed to be run once the game is over. Let's add our missing code now and complete the example functionality.</p> + +<h3 id="Finishing_the_game_functionality">Finishing the game functionality</h3> + +<p>Let's add that <code>setGameOver()</code> function to the bottom of our code and then walk through it. Add this now, below the rest of your JavaScript:</p> + +<pre class="brush: js">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); +}</pre> + +<ul> + <li>The first two lines disable the form text input and button by setting their disabled properties to <code>true</code>. This is necessary, because if we didn't, the user could submit more guesses after the game is over, which would mess things up.</li> + <li>The next three lines generate a new {{htmlelement("button")}} element, set its text label to "Start new game", and add it to the bottom of our existing HTML.</li> + <li>The final line sets an event listener on our new button so that when it is clicked, a function called <code>resetGame()</code> is run.</li> +</ul> + +<p>Now we need to define this function too! Add the following code, again to the bottom of your JavaScript:</p> + +<pre class="brush: js">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; +}</pre> + +<p>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:</p> + +<ul> + <li>Puts the <code>guessCount</code> back down to 1.</li> + <li>Empties all the text out of the information paragraphs.</li> + <li>Removes the reset button from our code.</li> + <li>Enables the form elements, and empties and focuses the text field, ready for a new guess to be entered.</li> + <li>Removes the background color from the <code>lastResult</code> paragraph.</li> + <li>Generates a new random number so that you are not just guessing the same number again!</li> +</ul> + +<p><strong>At this point you should have a fully working (simple) game — congratulations!</strong></p> + +<p>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.</p> + +<h3 id="Loops">Loops</h3> + +<p>One part of the above code that we need to take a more detailed look at is the <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for</a> 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.</p> + +<p>To start with, go to your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools JavaScript console</a> again, and enter the following:</p> + +<pre class="brush: js">for (let i = 1 ; i < 21 ; i++) { console.log(i) }</pre> + +<p>What happened? The numbers <samp>1</samp> to <samp>20</samp> were printed out in your console. This is because of the loop. A <code>for</code> loop takes three input values (arguments):</p> + +<ol> + <li><strong>A starting value</strong>: In this case we are starting a count at 1, but this could be any number you like. You could replace the letter <code>i</code> with any name you like too, but <code>i</code> is used as a convention because it's short and easy to remember.</li> + <li><strong>An exit condition</strong>: Here we have specified <code>i < 21</code> — the loop will keep going until <code>i</code> is no longer less than 21. When <code>i</code> reaches 21, the loop will no longer run.</li> + <li><strong>An incrementor</strong>: We have specified <code>i++</code>, which means "add 1 to i". The loop will run once for every value of <code>i</code>, until <code>i</code> reaches a value of 21 (as discussed above). In this case, we are simply printing the value of <code>i</code> out to the console on every iteration using {{domxref("Console.log", "console.log()")}}.</li> +</ol> + +<p>Now let's look at the loop in our number guessing game — the following can be found inside the <code>resetGame()</code> function:</p> + +<pre class="brush: js">let resetParas = document.querySelectorAll('.resultParas p'); +for (let i = 0 ; i < resetParas.length ; i++) { + resetParas[i].textContent = ''; +}</pre> + +<p>This code creates a variable containing a list of all the paragraphs inside <code><div class="resultParas"></code> using the {{domxref("Document.querySelectorAll", "querySelectorAll()")}} method, then it loops through each one, removing the text content of each.</p> + +<h3 id="A_small_discussion_on_objects">A small discussion on objects</h3> + +<p>Let's add one more final improvement before we get to this discussion. Add the following line just below the <code>let resetButton;</code> line near the top of your JavaScript, then save your file:</p> + +<pre class="brush: js">guessField.focus();</pre> + +<p>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.</p> + +<p>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.</p> + +<p>In this particular case, we first created a <code>guessField</code> 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:</p> + +<pre class="brush: js">const guessField = document.querySelector('.guessField');</pre> + +<p>To get this reference, we used the {{domxref("document.querySelector", "querySelector()")}} method of the {{domxref("document")}} object. <code>querySelector()</code> takes one piece of information — a <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a> that selects the element you want a reference to.</p> + +<p>Because <code>guessField</code> 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 <code>focus()</code>, so we can now use this line to focus the text input:</p> + +<pre class="brush: js">guessField.focus();</pre> + +<p>Variables that don't contain references to form elements won't have <code>focus()</code> available to them. For example, the <code>guesses</code> constant contains a reference to a {{htmlelement("p")}} element, and the <code>guessCount</code> variable contains a number.</p> + +<h3 id="Playing_with_browser_objects">Playing with browser objects</h3> + +<p>Let's play with some browser objects a bit.</p> + +<ol> + <li>First of all, open up your program in a browser.</li> + <li>Next, open your <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, and make sure the JavaScript console tab is open.</li> + <li>Type in <code>guessField</code> 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!</li> + <li>Now type in the following: + <pre class="brush: js">guessField.value = 'Hello';</pre> + The <code>value</code> 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!</li> + <li>Now try typing in <code>guesses</code> and pressing return. The console will show you that the variable contains a {{htmlelement("p")}} element.</li> + <li>Now try entering the following line: + <pre class="brush: js">guesses.value</pre> + The browser will return <code>undefined</code>, because paragraphs don't have the <code>value</code> property.</li> + <li>To change the text inside a paragraph, you need the {{domxref("Node.textContent", "textContent")}} property instead. Try this: + <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre> + </li> + <li>Now for some fun stuff. Try entering the below lines, one by one: + <pre class="brush: js">guesses.style.backgroundColor = 'yellow'; +guesses.style.fontSize = '200%'; +guesses.style.padding = '10px'; +guesses.style.boxShadow = '3px 3px 6px black';</pre> + Every element on a page has a <code>style</code> 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.</li> +</ol> + +<h2 id="Finished_for_now...">Finished for now...</h2> + +<p>So that's it for building the example. You got to the end — well done! Try your final code out, or <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">play with our finished version here</a>. If you can't get the example to work, check it against the <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">source code</a>.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_is_JavaScript", "Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/de/learn/javascript/first_steps/index.html b/files/de/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..092a419e14 --- /dev/null +++ b/files/de/learn/javascript/first_steps/index.html @@ -0,0 +1,67 @@ +--- +title: Erste Schritte mit JavaScript +slug: Learn/JavaScript/First_steps +tags: + - Anleitung + - Arrays + - Artikel + - Aufgaben + - Einsteiger + - Felder + - JavaScript + - Landing + - Lernmodul + - Mathematik + - Operatoren + - Variablen + - Zahlen + - Zeichenketten +translation_of: Learn/JavaScript/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">In unserem ersten Lernmodul zu JavaScript beantworten wir grundlegende Fragen wie »Was ist JavaScript?«, »Wie sieht es aus?« und »Was kann es?«, bevor wir Sie bei Ihren ersten praktischen Erfahrungen mit JavaScript begleiten. Danach erklären wir einige der wichtigsten Bausteine – wie etwa Variablen, Zeichenketten, Zahlen und Felder – im Detail.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Um mit diesem Lernmodul zu beginnen, brauchen Sie keinerlei Vorwissen in Sachen JavaScript – Sie sollten aber bereits ein wenig mit HTML und CSS vertraut sein. Wir raten Ihnen daher dazu, die folgendenen Lektionen durchzuarbeiten, bevor Sie mit JavaScript loslegen:</p> + +<ul> + <li><a href="https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web">Lerne das Internet kennen</a> (inklusive einer wirklich <a href="/de/docs/Learn/Getting_started_with_the_web/JavaScript_basics">grundlegenden Einführung in JavaScript</a>).</li> + <li><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a>.</li> + <li><a href="/de/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a>.</li> +</ul> + +<div class="note"> +<p><strong>Anmerkung</strong>: Falls Sie auf einem Computer, einem Tablet oder sonstigem Gerät arbeiten, auf dem Sie keine eigenen Dateien anlegen können, können Sie die Codebeispiele meist auch in einer Online-Coding-Umgebung wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> ausprobieren.</p> +</div> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Was ist JavaScript?</a></dt> + <dd>Willkommen beim MDN-Einsteigerkurs zu JavaScript! In diesem ersten Artikel betrachten wir JavaScript von außen, beantworten Fragen wie »Was ist das?« und »Was macht es?«, und machen Sie mit dem Zweck von JavaScript vertraut.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/A_first_splash">Ein erster Abstecher zu JavaScript</a></dt> + <dd>Jetzt, da Sie ein wenig Hintergrundwissen über JavaScript und das, was Sie damit anstellen können haben, werden wir Ihnen in einem Crashkurs die wichtigsten Features von JavaScript anhand praktischer Beispiele beibringen.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/What_went_wrong">Was lief verkehrt? JavaScript-Probleme beheben</a></dt> + <dd>Nachdem Sie im vorherigen Artikel das Spiel »Zahlen-Raten« konstruiert hatten, kann es sein, dass Sie feststellen mussten, dass es nicht funktionierte. Keine Angst – dieser Artikel soll Sie davor retten, sich wegen solcher Probleme die Haare zu raufen, indem er Ihnen einige einfache Tipps dazu gibt, wie Sie Fehler in JavaScript-Programmen finden und beheben.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Variables">Informationen, die Sie brauchen, speichern – Variablen</a></dt> + <dd>Nach dem Lesen der letzten paar Artikel sollten Sie nun wissen, was JavaScript ist, was es für Sie tun kann, wie Sie es in Kombination mit anderen Web-Technologien einsetzen, und wie die wichtigsten Features in etwa aussehen. In diesem Artikel werden wir uns anschauen, wie man einen der grundlegendsten Bausteine von JavaScript verwendet – Variablen.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Math">Einfache Mathematik in JavaScript – Zahlen und Operatoren</a></dt> + <dd>An dieser Stelle im Kurs erörtern wir Mathematik in JavaScript – wie wir Operatoren und andere Features verwenden können, um Zahlen erfolgreich dazu zu bringen, zu tun, was wir wollen.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Strings">Text verarbeiten – Zeichenketten in JavaScript</a></dt> + <dd>Als Nächstes richten wir unsere Aufmerksamkeit auf Zeichenketten – so nennt man Textschnippsel in der Programmierung. In diesem Artikel werden wir uns häufig benötigtes Wissen zu Zeichenketten ansehen, etwa wie man sie erstellt, wie man Anführungszeichen in Zeichenketten maskiert und wie man Zeichenketten aneinanderhängt.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Useful_string_methods">Nützliche Zeichenketten-Methoden</a></dt> + <dd>Nachdem wir uns jetzt die Grundlagen von Zeichenketten angeeignet haben, schalten wir einen Gang hoch und überlegen uns, welche nützlichen Operationen wir mit den eingebauten Methoden auf Zeichenketten ausführen können: die Länge einer Zeichenkette festellen, Zeichenketten verknüpfen und aufteilen, ein Zeichen in einer Zeichenkette durch ein anderes ersetzen, und weitere.</dd> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Arrays">Felder</a></dt> + <dd>Im letzten Artikel dieses Lernmoduls betrachten wir Felder – ein sauberer Weg, um eine Liste von Datenelementen unter einem einzigen Variablennamen abzulegen. Wir schauen uns an, warum das nützlich ist, und erforschen dann, wie man ein Feld anlegt, Elemente, die darin gespeichert sind, abruft, hinzufügt und entfernt, und vieles mehr.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<p>Die folgenden Aufgaben werden Ihr Verständnis der JavaScript-Grundlagen aus den vorherigen Anleitungen überprüfen.</p> + +<dl> + <dt><a href="/de/docs/Learn/JavaScript/First_steps/Silly_story_generator">Lustige Geschichten erzeugen</a></dt> + <dd>In dieser Aufgabe sollen Sie einen Teil des Wissens, das Sie erworben haben, einsetzen, um eine spaßige Anwendung zu entwickeln, die zufällige, lustige Geschichten erzeugt. Viel Spaß!</dd> +</dl> 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 new file mode 100644 index 0000000000..1703f9b6a7 --- /dev/null +++ b/files/de/learn/javascript/first_steps/lustige_geschichten_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">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 !</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorraussetzungen:</th> + <td>Bevor du dich an dieser Aufgabe versuchst, solltest du alle anderen Artikel dieses Moduls gelesen und bearbeitet haben.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Verständnis von fundamentalen JavaScript Kenntnissen, wie Variablen, Operatoren und einfachen Datentypen (Zahlen, Zeichenketten, Arrays)</td> + </tr> + </tbody> +</table> + +<h2 id="Start">Start</h2> + +<p>Um mit deiner Aufgabe zu beginnen, solltest du::</p> + +<ul> + <li>Öffne <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">die HTML-Vorlage</a> und speichere eine lokale Kopie davon auf deinem Rechner in einen neuen Ordner als <code>index.html</code>. Die Datei enthält auch einige CSS-Anweisungen für das Styling.</li> + <li>Öffne <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">die Seite, die die Text-Vorlagen enthält</a> und öffne sie in einem seperaten Browserfenster oder -tab. Die brauchst du später noch.</li> +</ul> + +<div class="note"> +<p><strong>Notiz</strong>: Alternativ kannst du auch eine Seite wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://glitch.com/">Glitch</a> 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 <code><script>-Tags</code> in deinem HTML-Code.</p> +</div> + +<h2 id="Projektbeschreibung">Projektbeschreibung</h2> + +<p>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:</p> + +<ul> + <li>es generiert eine lustige Geschichte, wenn der "Generate random story" button gedrückt wird.</li> + <li>es ersetzt den vorgegebenen Namen "Bob" in der Geschichte mit einem individuellen Namen, allerdings nur, wenn eine Eingabe in das "Enter custom name" Text-Feld gemacht worden ist, bevor der Button gedrückt wurde.</li> + <li>es konvertiert US-amerikanische Maßeinheiten, wie Gewicht und Temperatur in die englischen Äquivalente, wenn der Radio-Button entsprechend gesetzt wurde, bevor der Button gedrückt wurde.</li> + <li>es generiert immer wieder eine neue Variante der Geschichte, wenn der Button erneut gedrückt wird.</li> +</ul> + +<p>Der folgende Screenshot zeigt dir ein Beispiel, wie die Ausgabe deines geschriebenen Programmes aussehen wird:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16178/Screen_Shot_2018-09-19_at_10.01.38_AM.png" style="border-style: solid; border-width: 1px; display: block; height: 404px; margin: 0px auto; width: 500px;"></p> + +<p>Um dich noch mehr mit deiner Arbeit vertraut zu machen, <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">schau dir die fertige Lösung an</a> (ohne im Quellcode zu spicken! )</p> + +<h2 id="Schritt-für-Schritt_Anleitung">Schritt-für-Schritt Anleitung</h2> + +<p>In den folgenden Abschnitten wird dir erklärt, was du tun musst.</p> + +<p>Grundaufbau:</p> + +<ol> + <li>Erzeuge eine Datei mit dem Namen <code>main.js</code>, und zwar im selben Verzeichnis, wie deine <code>index.html</code> Datei.</li> + <li>Verbinde deine externe JavaScript Datei <code>main.js </code>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 <code></body></code> tag ein.</li> +</ol> + +<p> Vorgegebene Variablen und Functions:</p> + +<ol> + <li>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 <code>main.js</code> Datei. Im Code wirst du 3 Variablen entdecken, die sich auf verschiedene Teile der Ausgabe beziehen: (<code>customName</code>) bezieht sich auf das "Enter custom name" Text Feld , the "Generate random story" button (<code>randomize</code>), and the {{htmlelement("p")}} element at the bottom of the HTML body that the story will be copied into (<code>story</code>), respectively. In addition you've got a function called <code>randomValueFromArray()</code> that takes an array, and returns one of the items stored inside the array at random.</li> + <li>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 <code>main.js</code>: + <ol> + <li>Store the first, big long, string of text inside a variable called <code>storyText</code>.</li> + <li>Store the first set of three strings inside an array called <code>insertX</code>.</li> + <li>Store the second set of three strings inside an array called <code>insertY</code>.</li> + <li>Store the third set of three strings inside an array called <code>insertZ</code>.</li> + </ol> + </li> +</ol> + +<p>Placing the event handler and incomplete function:</p> + +<ol> + <li>Now return to the raw text file.</li> + <li>Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your <code>main.js</code> file. This: + <ul> + <li>Adds a click event listener to the <code>randomize</code> variable so that when the button it represents is clicked, the <code>result()</code> function is run.</li> + <li>Adds a partially-completed <code>result()</code> 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.</li> + </ul> + </li> +</ol> + +<p>Completing the <code>result()</code> function:</p> + +<ol> + <li>Create a new variable called <code>newStory</code>, and set it's value to equal <code>storyText</code>. 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 <code>storyText</code>, we'd only be able to generate a new story once.</li> + <li>Create three new variables called <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>, and make them equal to the result of calling <code>randomValueFromArray()</code> 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 <code>insertX</code> by writing <code>randomValueFromArray(insertX)</code>.</li> + <li>Next we want to replace the three placeholders in the <code>newStory</code> string — <code>:insertx:</code>, <code>:inserty:</code>, and <code>:insertz:</code> — with the strings stored in <code>xItem</code>, <code>yItem</code>, and <code>zItem</code>. There is a particular string method that will help you here — in each case, make the call to the method equal to <code>newStory</code>, so each time it is called, <code>newStory</code> 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.</li> + <li>Inside the first <code>if</code> block, add another string replacement method call to replace the name 'Bob' found in the <code>newStory</code> string with the <code>name</code> variable. In this block we are saying "If a value has been entered into the <code>customName</code> text input, replace Bob in the story with that custom name."</li> + <li>Inside the second <code>if</code> block, we are checking to see if the <code>uk</code> 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: + <ol> + <li>Look up the formulae for converting pounds to stone, and Fahrenheit to centigrade.</li> + <li>Inside the line that defines the <code>weight</code> variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate <code>' stone'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li> + <li>Inside the line that defines the <code>temperature</code> variable, replace 94 with a calculation that converts 94 Fahrenheit into centigrade. Concatenate <code>' centigrade'</code> onto the end of the result of the overall <code>Math.round()</code> call.</li> + <li>Just under the two variable definitions, add two more string replacement lines that replace '94 fahrenheit' with the contents of the <code>temperature</code> variable, and '300 pounds' with the contents of the <code>weight</code> variable.</li> + </ol> + </li> + <li>Finally, in the second-to-last line of the function, make the <code>textContent</code> property of the <code>story</code> variable (which references the paragraph) equal to <code>newStory</code>.</li> +</ol> + +<h2 id="Hints_and_tips">Hints and tips</h2> + +<ul> + <li>You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.</li> + <li>If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the {{htmlelement("html")}} element red — so the entire browser window should go red if the JavaScript is applied properly: + <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre> + </li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a></code> is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.</li> + <li>There are three instances of strings that need to be replaced. You may repeat the <code>replace()</code> method multiple times, or you can use regular expressions. For instance, <code>let text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> will replace all instances of 'love' to 'like'. Remember, Strings are immutable!</li> +</ul> + +<h2 id="Assessment">Assessment</h2> + +<p>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 <a href="https://discourse.mozilla.org/t/silly-story-generator-assessment/24686">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p> + +<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/de/learn/javascript/first_steps/useful_string_methods/index.html b/files/de/learn/javascript/first_steps/useful_string_methods/index.html new file mode 100644 index 0000000000..e0df907ade --- /dev/null +++ b/files/de/learn/javascript/first_steps/useful_string_methods/index.html @@ -0,0 +1,656 @@ +--- +title: Useful string methods +slug: Learn/JavaScript/First_steps/Useful_string_methods +translation_of: Learn/JavaScript/First_steps/Useful_string_methods +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">Jetzt, da wir die Basics kennengelernt haben, gehen wir einen Schritt weiter und sehen uns hilfreiche Methoden an, die wir im Umgang mit Strings anwenden können. Dazu zählt zum Beispiel die Länge eines Textes, hinzufügen oder splitten von Strings, das Austauschen eines Buchstaben in einem Text-String und mehr...</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, ein Verständnis dafür, was JavaScript ist.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Zu verstehen, dass Zeichenketten Objekte sind, und zu lernen, wie man einige der grundlegenden Methoden, die auf diesen Objekten verfügbar sind, verwendet, um Zeichenketten zu manipulieren.</td> + </tr> + </tbody> +</table> + +<h2 id="Zeichenketten_als_Objekte">Zeichenketten als Objekte</h2> + +<p id="Useful_string_methods">Die meisten Dinge in JavaScript sind Objekte. Wenn Sie einen String erstellen, zum Beispiel durch die Verwendung von</p> + +<pre class="brush: js">let string = 'This is my string';</pre> + +<p>wird Ihre Variable zu einer String-Objektinstanz und hat als Ergebnis eine große Anzahl von Eigenschaften und Methoden zur Verfügung. Sie können dies sehen, wenn Sie auf die {{jsxref("String")}} Objektseite gehen und die Liste auf der Seite nach unten scrollen!</p> + +<p><strong>Sooo, <u>bevor</u> Du jetzt Kopfschmerzen bekommst:</strong> Die meisten der Methoden must du jetzt am Anfang noch nicht wirklich kennen. Allerdings gibt es da ein paar, die Du am Anfang und später ziemlich oft nutzen wirst. Werfen wir also einen Blick darauf:</p> + +<p>Starten wir mit ein paar Beispielen in der <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer console</a>.</p> + +<h3 id="Länge_einer_Zeichenkette">Länge einer Zeichenkette</h3> + +<p>Das ist einfach. Nutze einfach {{jsxref("String.prototype.length", "length")}} . Probiere einfach mal folgenden Code:</p> + +<pre class="brush: js">let browserType = 'mozilla'; +browserType.length;</pre> + +<p>Das sollte Dir eine "7" zurückgeben, denn "mozilla" ist 7 Zeichen lang. Das kann man für verschiedene Dinge nutzen; Zum Beispiel: Du möchtest die Zeichenlänge einer Reihe von Namen herausfinden, um diese in der Reihenfolge ihrer Länge auszugeben. Oder lasse einen Nutzer wissen, das seine gerade getätigte Eingabe des Usernamens viel zu lang ist und nicht den Vorgaben entspricht.</p> + +<h3 id="Retrieving_a_specific_string_character">Retrieving a specific string character</h3> + +<p>On a related note, you can return any character inside a string by using <strong>square bracket notation</strong> — this means you include square brackets (<code>[]</code>) on the end of your variable name. Inside the square brackets you include the number of the character you want to return, so for example to retrieve the first letter you'd do this:</p> + +<pre class="brush: js">browserType[0];</pre> + +<p>Remember: computers count from 0, not 1! You could use this to, for example, find the first letter of a series of strings and order them alphabetically.</p> + +<p>To retrieve the last character of <em>any</em> string, we could use the following line, combining this technique with the <code>length</code> property we looked at above:</p> + +<pre class="brush: js">browserType[browserType.length-1];</pre> + +<p>The length of "mozilla" is 7, but because the count starts at 0, the character position is 6; using <code>length-1</code> gets us the last character.</p> + +<h3 id="Finding_a_substring_inside_a_string_and_extracting_it">Finding a substring inside a string and extracting it</h3> + +<ol> + <li>Sometimes you'll want to find if a smaller string is present inside a larger one (we generally say <em>if a substring is present inside a string</em>). This can be done using the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, which takes a single {{glossary("parameter")}} — the substring you want to search for. Try this: + + <pre class="brush: js">browserType.indexOf('zilla');</pre> + This gives us a result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla". Such code could be used to filter strings. For example, we may have a list of web addresses and only want to print out the ones that contain "mozilla".</li> +</ol> + +<ol start="2"> + <li>This can be done in another way, which is possibly even more effective. Try the following: + <pre class="brush: js">browserType.indexOf('vanilla');</pre> + This should give you a result of <code>-1</code> — this is returned when the substring, in this case 'vanilla', is not found in the main string.<br> + <br> + You could use this to find all instances of strings that <strong>don't</strong> contain the substring 'mozilla', or <strong>do,</strong> if you use the negation operator, as shown below. You could do something like this: + + <pre class="brush: js">if(browserType.indexOf('mozilla') !== -1) { + // do stuff with the string +}</pre> + </li> + <li>When you know where a substring starts inside a string, and you know at which character you want it to end, {{jsxref("String.prototype.slice()", "slice()")}} can be used to extract it. Try the following: + <pre class="brush: js">browserType.slice(0,3);</pre> + This returns "moz" — the first parameter is the character position to start extracting at, and the second parameter is the character position after the last one to be extracted. So the slice happens from the first position, up to, but not including, the last position. In this example, since the starting index is 0, the second parameter is equal to the length of the string being returned.<br> + </li> + <li>Also, if you know that you want to extract all of the remaining characters in a string after a certain character, you don't have to include the second parameter! Instead, you only need to include the character position from where you want to extract the remaining characters in a string. Try the following: + <pre class="brush: js">browserType.slice(2);</pre> + This returns "zilla" — this is because the character position of 2 is the letter z, and because you didn't include a second parameter, the substring that was returned was all of the remaining characters in the string. </li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: The second parameter of <code>slice()</code> is optional: if you don't include it, the slice ends at the end of the original string. There are other options too; study the {{jsxref("String.prototype.slice()", "slice()")}} page to see what else you can find out.</p> +</div> + +<h3 id="Changing_case">Changing case</h3> + +<p>The string methods {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}} and {{jsxref("String.prototype.toUpperCase()", "toUpperCase()")}} take a string and convert all the characters to lower- or uppercase, respectively. This can be useful for example if you want to normalize all user-entered data before storing it in a database.</p> + +<p>Let's try entering the following lines to see what happens:</p> + +<pre class="brush: js">let radData = 'My NaMe Is MuD'; +radData.toLowerCase(); +radData.toUpperCase();</pre> + +<h3 id="Updating_parts_of_a_string">Updating parts of a string</h3> + +<p>You can replace one substring inside a string with another substring using the {{jsxref("String.prototype.replace()", "replace()")}} method. This works very simply at a basic level, although there are some advanced things you can do with it that we won't go into yet.</p> + +<p>It takes two parameters — the string you want to replace, and the string you want to replace it with. Try this example:</p> + +<pre class="brush: js">browserType.replace('moz','van');</pre> + +<p>This returns "vanilla" in the console. But if you check the value of <code>browserType</code>, it is still "mozilla'. To actually update the value of the <code>browserType</code> variable in a real program, you'd have to set the variable value to be the result of the operation; it doesn't just update the substring value automatically. So you'd have to actually write this: <code>browserType = browserType.replace('moz','van');</code></p> + +<h2 id="Active_learning_examples">Active learning examples</h2> + +<p>In this section we'll get you to try your hand at writing some string manipulation code. In each exercise below, we have an array of strings, and a loop that processes each value in the array and displays it in a bulleted list. You don't need to understand arrays or loops right now — these will be explained in future articles. All you need to do in each case is write the code that will output the strings in the format that we want them in.</p> + +<p>Each example comes with a "Reset" button, which you can use to reset the code if you make a mistake and can't get it working again, and a "Show solution" button you can press to see a potential answer if you get really stuck.</p> + +<h3 id="Filtering_greeting_messages">Filtering greeting messages</h3> + +<p>In the first exercise we'll start you off simple — we have an array of greeting card messages, but we want to sort them to list just the Christmas messages. We want you to fill in a conditional test inside the <code>if( ... )</code> structure, to test each string and only print it in the list if it is a Christmas message.</p> + +<ol> + <li>First think about how you could test whether the message in each case is a Christmas message. What string is present in all of those messages, and what method could you use to test whether it is present?</li> + <li>You'll then need to write a conditional test of the form <em>operand1 operator operand2</em>. Is the thing on the left equal to the thing on the right? Or in this case, does the method call on the left return the result on the right?</li> + <li>Hint: In this case it is probably more useful to test whether the method call <em>isn't</em> equal to a certain result.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 290px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let greetings = ['Happy Birthday!', + 'Merry Christmas my love', + 'A happy Christmas to all the family', + 'You\'re all I want for Christmas', + 'Get well soon']; + +for (let i = 0; i < greetings.length; i++) { + let input = greetings[i]; + // Your conditional test needs to go inside the parentheses + // in the line below, replacing what's currently there + if (greetings[i]) { + let listItem = document.createElement('li'); + listItem.textContent = input; + list.appendChild(listItem); + } +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet greetings = [\'Happy Birthday!\',' + +'\n \'Merry Christmas my love\',' + +'\n \'A happy Christmas to all the family\',' + +'\n \'You\\\'re all I want for Christmas\',' + +'\n \'Get well soon\'];' + +'\n' + +'\nfor (let i = 0; i < greetings.length; i++) {' + +'\n let input = greetings[i];' + +'\n if (greetings[i].indexOf(\'Christmas\') !== -1) {' + +'\n let result = input;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n }' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Fixing_capitalization">Fixing capitalization</h3> + +<p>In this exercise we have the names of cities in the United Kingdom, but the capitalization is all messed up. We want you to change them so that they are all lower case, except for a capital first letter. A good way to do this is to:</p> + +<ol> + <li>Convert the whole of the string contained in the <code>input</code> variable to lower case and store it in a new variable.</li> + <li>Grab the first letter of the string in this new variable and store it in another variable.</li> + <li>Using this latest variable as a substring, replace the first letter of the lowercase string with the first letter of the lowercase string changed to upper case. Store the result of this replace procedure in another new variable.</li> + <li>Change the value of the <code>result</code> variable to equal to the final result, not the <code>input</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: A hint — the parameters of the string methods don't have to be string literals; they can also be variables, or even variables with a method being invoked on them.</p> +</div> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 250px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let cities = ['lonDon', 'ManCHESTer', 'BiRmiNGHAM', 'liVERpoOL']; + +for (let i = 0; i < cities.length; i++) { + let input = cities[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet cities = [\'lonDon\', \'ManCHESTer\', \'BiRmiNGHAM\', \'liVERpoOL\'];' + +'\n' + +'\nfor (let i = 0; i < cities.length; i++) {' + +'\n let input = cities[i];' + +'\n let lower = input.toLowerCase();' + +'\n let firstLetter = lower.slice(0,1);' + +'\n let capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());' + +'\n let result = capitalized;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Making_new_strings_from_old_parts">Making new strings from old parts</h3> + +<p>In this last exercise, the array contains a bunch of strings containing information about train stations in the North of England. The strings are data items that contain the three-letter station code, followed by some machine-readable data, followed by a semicolon, followed by the human-readable station name. For example:</p> + +<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre> + +<p>We want to extract the station code and name, and put them together in a string with the following structure:</p> + +<pre>MAN: Manchester Piccadilly</pre> + +<p>We'd recommend doing it like this:</p> + +<ol> + <li>Extract the three-letter station code and store it in a new variable.</li> + <li>Find the character index number of the semicolon.</li> + <li>Extract the human-readable station name using the semicolon character index number as a reference point, and store it in a new variable.</li> + <li>Concatenate the two new variables and a string literal to make the final string.</li> + <li>Change the value of the <code>result</code> variable to equal to the final string, not the <code>input</code>.</li> +</ol> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code 3</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 125px;"> + +<ul> + +</ul> + +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="playable-code" style="height: 285px; width: 95%"> +const list = document.querySelector('.output ul'); +list.innerHTML = ''; +let stations = ['MAN675847583748sjt567654;Manchester Piccadilly', + 'GNF576746573fhdg4737dh4;Greenfield', + 'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street', + 'SYB4f65hf75f736463;Stalybridge', + 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield']; + +for (let i = 0; i < stations.length; i++) { + let input = stations[i]; + // write your code just below here + + let result = input; + let listItem = document.createElement('li'); + listItem.textContent = result; + list.appendChild(listItem); +} +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div> +</pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + eval(textarea.value); +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = jsSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const jsSolution = 'const list = document.querySelector(\'.output ul\');' + +'\nlist.innerHTML = \'\';' + +'\nlet stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',' + +'\n \'GNF576746573fhdg4737dh4;Greenfield\',' + +'\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',' + +'\n \'SYB4f65hf75f736463;Stalybridge\',' + +'\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];' + +'\n' + +'\nfor (let i = 0; i < stations.length; i++) {' + +'\n let input = stations[i];' + +'\n let code = input.slice(0,3);' + +'\n let semiC = input.indexOf(\';\');' + +'\n let name = input.slice(semiC + 1);' + +'\n let result = code + \': \' + name;' + +'\n let listItem = document.createElement(\'li\');' + +'\n listItem.textContent = result;' + +'\n list.appendChild(listItem);' + +'\n}'; + +let solutionEntry = jsSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>You can't escape the fact that being able to handle words and sentences in programming is very important — particularly in JavaScript, as websites are all about communicating with people. This article has given you the basics that you need to know about manipulating strings for now. This should serve you well as you go into more complex topics in the future. Next, we're going to look at the last major type of data we need to focus on in the short term — arrays.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/Strings", "Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> diff --git a/files/de/learn/javascript/first_steps/variables/index.html b/files/de/learn/javascript/first_steps/variables/index.html new file mode 100644 index 0000000000..d8906f7d02 --- /dev/null +++ b/files/de/learn/javascript/first_steps/variables/index.html @@ -0,0 +1,386 @@ +--- +title: Speichern der benötigten Informationen — Variablen +slug: Learn/JavaScript/First_steps/Variables +translation_of: Learn/JavaScript/First_steps/Variables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Math", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article, we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.</p> + +<table class="learn-box"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Basic computer literacy, a basic understanding of HTML and CSS, an understanding of what JavaScript is.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To gain familiarity with the basics of JavaScript variables.</td> + </tr> + </tbody> +</table> + +<h2 id="Tools_you_need">Tools you need</h2> + +<p>Throughout this article, you'll be asked to type in lines of code to test your understanding of the content. If you are using a desktop browser, the best place to type your sample code is your browser's JavaScript console (see <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> for more information on how to access this tool).</p> + +<p>However, we have also provided a simple JavaScript console embedded in the page below for you to enter this code into, in case you are not using a browser with a JavaScript console easily available, or find an in-page console more comfortable.</p> + +<h2 id="Was_ist_eine_Variable">Was ist eine Variable?</h2> + +<p>Eine Variable ist ein Behälter für einen Wert, wie z.B. eine Zahl, welche wir vielleicht für eine Summe benötigen, oder eine Zeichenkette die wir für einen Teil eines Satzes brauchen. Eine Besonderheit von Variablen ist, dass ihr Wert verändert werden kann. Hier ein Beispiel:</p> + +<pre class="brush: html"><button>Press me</button></pre> + +<pre class="brush: js">var button = document.querySelector('button'); + +button.onclick = function() { + var name = prompt('Wie heißt du?'); + alert('Hallo ' + name + ', schön dich zu sehen!'); +}</pre> + +<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>In diesem Beispiel werden beim Drücken des Buttons einige Zeilen Code ausgeführt. Die erste Zeile zeigt eine Box an, welche den Leser nach seinem Namen fragt und den Wert anschließend in einer Variable abspeichert. Die zweite Zeile zeigt eine Willkommensnachricht, die den Namen enthält, welcher dem Wert der Variable entnommen wird.</p> + +<p>Um zu verstehen, warum das so nützlich ist, überlegen wir mal, wie wir das Beispiel ohne eine Variable schreiben würden. Es würde etwa so aussehen:</p> + +<pre class="example-bad">var name = prompt('Wie heißt du?'); + +if (name === 'Adam') { + alert('Hallo Adam, schön dich zu sehen!'); +} else if (name === 'Alan') { + alert('Hallo Alan, schön dich zu sehen!'); +} else if (name === 'Bella') { + alert('Hallo Bella, schön dich zu sehen!'); +} else if (name === 'Bianca') { + alert('Hallo Bianca, schön dich zu sehen!'); +} else if (name === 'Chris') { + alert('Hallo Chris, schön dich zu sehen!'); +} + +// ... und so weiter ...</pre> + +<p>You may not fully understand the syntax we are using (yet!), but you should be able to get the idea — if we didn't have variables available, we'd have to implement a giant code block that checked what the entered name was, and then display the appropriate message for that name. This is obviously really inefficient (the code is a lot bigger, even for only five choices), and it just wouldn't work — you couldn't possibly store all possible choices.</p> + +<p>Variables just make sense, and as you learn more about JavaScript they will start to become second nature.</p> + +<p>Another special thing about variables is that they can contain just about anything — not just strings and numbers. Variables can also contain complex data and even entire functions to do amazing things. You'll learn more about this as you go along.</p> + +<p><u><strong>Note that we say variables contain values. This is an important distinction to make. Variables aren't the values themselves; they are containers for values. You can think of them being like little cardboard boxes that you can store things in.</strong></u></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p> + +<h2 id="Eine_Variable_deklarieren">Eine Variable deklarieren</h2> + +<p>To use a variable you've first got to create it — more accurately, we call this declaring the variable. To do this, we type the keyword var followed by the name you want to call your variable:</p> + +<pre class="brush: js">var myName; +var myAge;</pre> + +<p>Here we're creating two variables called <code>myName</code> and <code>myAge</code>. Try typing these lines in now in your web browser's console, or in the below console (You can <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/variables/index.html">open this console</a> in a separate tab or window if you'd prefer that). After that, try creating a variable (or two) with your own name choices.</p> + +<div class="hidden"> +<h6 id="Hidden_code">Hidden code</h6> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>JavaScript console</title> + <style> + * { + box-sizing: border-box; + } + + html { + background-color: #0C323D; + color: #809089; + font-family: monospace; + } + + body { + max-width: 700px; + } + + p { + margin: 0; + width: 1%; + padding: 0 1%; + font-size: 16px; + line-height: 1.5; + float: left; + } + + .input p { + margin-right: 1%; + } + + .output p { + width: 100%; + } + + .input input { + width: 96%; + float: left; + border: none; + font-size: 16px; + line-height: 1.5; + font-family: monospace; + padding: 0; + background: #0C323D; + color: #809089; + } + + div { + clear: both; + } + + </style> + </head> + <body> + + + </body> + + <script> + var geval = eval; + function createInput() { + var inputDiv = document.createElement('div'); + var inputPara = document.createElement('p'); + var inputForm = document.createElement('input'); + + inputDiv.setAttribute('class','input'); + inputPara.textContent = '>'; + inputDiv.appendChild(inputPara); + inputDiv.appendChild(inputForm); + document.body.appendChild(inputDiv); + + if(document.querySelectorAll('div').length > 1) { + inputForm.focus(); + } + + inputForm.addEventListener('change', executeCode); + } + + function executeCode(e) { + try { + var result = geval(e.target.value); + } catch(e) { + var result = 'error — ' + e.message; + } + + var outputDiv = document.createElement('div'); + var outputPara = document.createElement('p'); + + outputDiv.setAttribute('class','output'); + outputPara.textContent = 'Result: ' + result; + outputDiv.appendChild(outputPara); + document.body.appendChild(outputDiv); + + e.target.disabled = true; + e.target.parentNode.style.opacity = '0.5'; + + createInput() + } + + createInput(); + + </script> +</html></pre> +</div> + +<p>{{ EmbedLiveSample('Hidden_code', '100%', 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Note</strong>: In JavaScript, all code instructions should end with a semi-colon (<code>;</code>) — your code may work correctly for single lines, but probably won't when you are writing multiple lines of code together. Try to get into the habit of including it.</p> +</div> + +<p>You can test whether these values now exist in the execution environment by typing just the variable's name, e.g.</p> + +<pre class="brush: js">myName; +myAge;</pre> + +<p>They currently have no value; they are empty containers. When you enter the variable names, you should get a value of <code>undefined</code> returned. If they don't exist, you'll get an error message — try typing in</p> + +<pre class="brush: js">scoobyDoo;</pre> + +<div class="note"> +<p><strong>Note</strong>: Don't confuse a variable that exists but has no value defined with a variable that doesn't exist at all — they are very different things. In the box analogy you saw above, not existing would mean there's no box (variable) for a value to go in. No value defined would mean that there IS a box, but it has no value inside it.</p> +</div> + +<h2 id="Eine_Variable_initialisieren">Eine Variable initialisieren</h2> + +<p>Once you've declared a variable, you can initialize it with a value. You do this by typing the variable name, followed by an equals sign (<code>=</code>), followed by the value you want to give it. For example:</p> + +<pre class="brush: js">myName = 'Chris'; +myAge = 37;</pre> + +<p>Try going back to the console now and typing in these lines. You should see the value you've assigned to the variable returned in the console to confirm it, in each case. Again, you can return your variable values by simply typing their name into the console — try these again:</p> + +<pre class="brush: js">myName; +myAge;</pre> + +<p>You can declare and initialize a variable at the same time, like this:</p> + +<pre class="brush: js">var myName = 'Chris';</pre> + +<p>This is probably what you'll do most of the time, as it is quicker than doing the two actions on two separate lines.</p> + +<div class="note"> +<p><strong>Note</strong>: If you write a multiline JavaScript program that declares and initializes a variable, you can actually declare it after you initialize it and it will still work. This is because variable declarations are generally done first before the rest of the code is executed. This is called <strong>hoisting</strong> — read <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> for more detail on the subject.</p> +</div> + +<h2 id="Eine_Variable_aktualisieren">Eine Variable aktualisieren</h2> + +<p>Once a variable has been initialized with a value, you can change (or update) that value by simply giving it a different value. Try entering the following lines into your console:</p> + +<pre class="brush: js">myName = 'Bob'; +myAge = 40;</pre> + +<h3 id="An_aside_on_variable_naming_rules">An aside on variable naming rules</h3> + +<p>You can call a variable pretty much anything you like, but there are limitations. Generally, you should stick to just using Latin characters (0-9, a-z, A-Z) and the underscore character.</p> + +<ul> + <li>You shouldn't use other characters because they may cause errors or be hard to understand for an international audience.</li> + <li>Don't use underscores at the start of variable names — this is used in certain JavaScript constructs to mean specific things, so may get confusing.</li> + <li>Don't use numbers at the start of variables. This isn't allowed and will cause an error.</li> + <li>A safe convention to stick to is so-called <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, where you stick together multiple words, using lower case for the whole first word and then capitalize subsequent words. We've been using this for our variable names in the article so far.</li> + <li>Make variable names intuitive, so they describe the data they contain. Don't just use single letters/numbers, or big long phrases.</li> + <li>Variables are case sensitive — so <code>myage</code> is a different variable to <code>myAge</code>.</li> + <li>One last point — you also need to avoid using JavaScript reserved words as your variable names — by this, we mean the words that make up the actual syntax of JavaScript! So you can't use words like <code>var</code>, <code>function</code>, <code>let</code>, and <code>for</code> as variable names. Browsers will recognize them as different code items, and so you'll get errors.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: You can find a fairly complete list of reserved keywords to avoid at <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p> +</div> + +<p>Good name examples:</p> + +<pre class="example-good">age +myAge +init +initialColor +finalOutputValue +audio1 +audio2</pre> + +<p>Bad name examples:</p> + +<pre class="example-bad">1 +a +_12 +myage +MYAGE +var +Document +skjfndskjfnbdskjfb +thisisareallylongstupidvariablenameman</pre> + +<p>Error-prone name examples:</p> + +<pre class="example-invalid">var +Document +</pre> + +<p>Try creating a few more variables now, with the above guidance in mind.</p> + +<h2 id="Typen_von_Variablen">Typen von Variablen</h2> + +<p>There are a few different types of data we can store in variables. In this section we'll describe these in brief, then in future articles, you'll learn about them in more detail.</p> + +<p>So far we've looked at the first two, but there are others.</p> + +<h3 id="Numbers">Numbers</h3> + +<p>You can store numbers in variables, either whole numbers like 30 (also called integers) or decimal numbers like 2.456 (also called floats or floating point numbers). You don't need to declare variable types in JavaScript, unlike some other programming languages. When you give a variable a number value, you don't include quotes:</p> + +<pre class="brush: js">var myAge = 17;</pre> + +<h3 id="Strings">Strings</h3> + +<p>Strings are pieces of text. When you give a variable a string value, you need to wrap it in single or double quote marks, otherwise, JavaScript will try to interpret it as another variable name.</p> + +<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre> + +<h3 id="Booleans">Booleans</h3> + +<p>Booleans are true/false values — they can have two values, <code>true</code> or <code>false</code>. These are generally used to test a condition, after which code is run as appropriate. So for example, a simple case would be:</p> + +<pre class="brush: js">var iAmAlive = true;</pre> + +<p>Whereas in reality it would be used more like this:</p> + +<pre class="brush: js">var test = 6 < 3;</pre> + +<p>This is using the "less than" operator (<code><</code>) to test whether 6 is less than 3. As you might expect, it will return <code>false</code>, because 6 is not less than 3! You will learn a lot more about such operators later on in the course.</p> + +<h3 id="Arrays">Arrays</h3> + +<p>An array is a single object that contains multiple values enclosed in square brackets and separated by commas. Try entering the following lines into your console:</p> + +<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim']; +var myNumberArray = [10,15,40];</pre> + +<p>Once these arrays are defined, you can access each value by their location within the array. Try these lines:</p> + +<pre class="brush: js">myNameArray[0]; // should return 'Chris' +myNumberArray[2]; // should return 40</pre> + +<p>The square brackets specify an index value corresponding to the position of the value you want returned. You might have noticed that arrays in JavaScript are zero-indexed: the first element is at index 0.</p> + +<p>You'll learn a lot more about arrays in a future article.</p> + +<h3 id="Objects">Objects</h3> + +<p>In programming, an object is a structure of the code that models a real-life object. You can have a simple object that represents a car park and contains information about its width and length, or you could have an object that represents a person, and contains data about their name, height, weight, what language they speak, how to say hello to them, and more.</p> + +<p>Try entering the following line into your console:</p> + +<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre> + +<p>To retrieve the information stored in the object, you can use the following syntax:</p> + +<pre class="brush: js">dog.name</pre> + +<p>We won't be looking at objects any more for now — you can learn more about those in a future module.</p> + +<h2 id="Dynamic_typing">Dynamic typing</h2> + +<p>JavaScript is a "dynamically typed language", which means that, unlike some other languages, you don't need to specify what data type a variable will contain (e.g. numbers, strings, arrays, etc).</p> + +<p>For example, if you declare a variable and give it a value encapsulated in quotes, the browser will treat the variable as a string:</p> + +<pre class="brush: js">var myString = 'Hello';</pre> + +<p>It will still be a string, even if it contains numbers, so be careful:</p> + +<pre class="brush: js">var myNumber = '500'; // oops, this is still a string +typeof myNumber; +myNumber = 500; // much better — now this is a number +typeof myNumber;</pre> + +<p>Try entering the four lines above into your console one by one, and see what the results are. You'll notice that we are using a special operator called <code>typeof</code> — this returns the data type of the variable you pass into it. The first time it is called, it should return <code>string</code>, as at that point the <code>myNumber</code> variable contains a string, <code>'500'</code>. Have a look and see what it returns the second time you call it.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>By now you should know a reasonable amount about JavaScript variables and how to create them. In the next article, we'll focus on numbers in more detail, looking at how to do basic math in JavaScript.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/First_steps/What_went_wrong", "Learn/JavaScript/First_steps/Maths", "Learn/JavaScript/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">The first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> 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 new file mode 100644 index 0000000000..247b4744c5 --- /dev/null +++ b/files/de/learn/javascript/first_steps/was_ist_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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</div> + +<p class="summary">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.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Umgang mit einem Computer und ein Grundverständniss von HTML und CSS</td> + </tr> + <tr> + <th scope="row">Thema:</th> + <td>JavaScript kennenlernen, was JavaScript tun kann und wie es in einer Webseite arbeitet.</td> + </tr> + </tbody> +</table> + +<h2 id="Eine_Experten_Definition">Eine Experten Definition</h2> + +<p>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:</p> + +<ul> + <li>Zeitliche Inhalt-Updates ( Liveticker )</li> + <li>interaktive Karten ( Google Maps)</li> + <li>animierte 2D/3D Grafiken ( Spiele )</li> + <li>...)</li> +</ul> + +<p>kannst du dir sicher sein das JavaScript benutzt wurde. Es ist die Dritte der Drei Standard-Technologien im Web, die anderen beiden ( <a href="de/Learn/HTML">HTML </a>und <a href="/de/docs/Learn/CSS">CSS </a>) werden in anderen Bereichen des MDN eingeführt und referenziert.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>{{glossary("HTML")}} ist die Markup-Language, die wir benutzen, um eine Webseite zu strukturieren und unsere Inhalte darzustellen, zum Beispiel durch Paragraphen, Überschriften, Tabellen aber auch um Bilder und Videos in die Webseite einzubinden.</li> + <li>{{glossary("CSS")}} ist die Sprache, um Stil-Regeln für HTML zu definieren, zum Beispiel, indem wir die Hintergrundfarbe und die Schriftart ändern.</li> + <li>{{glossary("JavaScript")}} ist eine Progammiersprache, die es erlaubt dynamische Updates der Inhalte, animierte Bilder und noch sehr viel mehr zu realisieren.</li> +</ul> + +<p>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> + +<pre class="brush: html notranslate"><p>Player 1: Chris</p></pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p> + +<p>Anschließend können wir mit einigen CSS-Regeln denn Satz schön aussehen lassen:</p> + +<pre class="brush: css notranslate">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; +}</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p> + +<p>Und zum Schluss können wir mit etwas JavaScript eine Reaktion auf das Klicken des Benutzers implementieren:</p> + +<pre class="brush: js notranslate">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +} +</pre> + +<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}</p> + +<p>Klick auf das Label und sieh, was passiert (den <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">Code</a> findest du auf GitHub und hier kannst du es in <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">Aktion </a>sehen).</p> + +<h2 id="So_und_was_kann_ich_jetzt_damit_machen">So und was kann ich jetzt damit machen?</h2> + +<p>Der Kern von JavaScript ähnelt dem anderer Programmiersprachen. In JavaScript kannst du:</p> + +<ul> + <li>Nützliche Werte in Variablen speichern. Wie im Beispiel als wir eine Variable verwendet haben um den von dir eingebenen Namen zu speichern.</li> + <li>Operationen auf Texten ( in der Programmierung "Strings" genannt). Im oberen Beispiel hatten wir den String "Player 1:" und die Variable <code>name</code> verbunden und (wenn <code>name</code> "Chris" ist) haben wir den Text "Player 1: Chris" bekommen.</li> + <li>Mit Code auf Events in einer Webseite reagieren. Wir haben ein {{Event("click")}} Event benutzt um darauf zu reagieren wenn man auf das Label drückt.</li> + <li>Und viel mehr. ( siehe jedes größere Webprojekt.)</li> +</ul> + +<p>Aber es gibt noch andere Funktionen die auf dem Kern von JavaScript aufbauen. Die sogenannten <strong>Application Programming Interfaces (APIs) </strong>geben dir noch mehr Funktionen mit denen du deine Projekte aufbessern kann.</p> + +<p>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.</p> + +<p>Die APIs kann man generell in zwei Kategorien einteilen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p> + +<p><strong>Browser APIs </strong>sind vom Webbrowser des Benutzers. Und sie können auf Ressourcen des computers zugreifen, oder erledigen Dinge die sehr komlpex sind. Ein paar Beispiele:</p> + +<ul> + <li>Die {{domxref("Document_Object_Model","DOM (Document Object Model)")}} API</li> + <li>Die <a href="https://developer.mozilla.org/en-US/docs/Web/API/Geolocation">Geolocation API</a> ruft geografische Informationen ab. So ist es für <a href="https://www.google.com/maps">Google Maps</a> möglich dein Standort zu ermitteln um es danach z.B. auf einer Karte anzuzeigen.</li> + <li>The <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">Canvas</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a> APIs ermöglichen es dir, 2D oder 3D animierte Grafiken zu erstellen. Das ermöglicht die Darstellung und den Einsatz von Webtechnologien. Mehr kannst du unter <a href="https://www.chromeexperiments.com/webgl">Chrome Experiments</a> und <a href="http://webglsamples.org/">webglsamples</a> erfahren.</li> + <li><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video APIs</a> beispielsweise {{domxref("HTMLMediaElement")}} und <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> ermöglichen es wirklich spannende Dinge multimedial zu erstellen. Beispielsweise können Audio und Video in eine Webseite integriert werden, Ebenso ist es möglich die Webcam aufzunehmen und sie danach wiederzugeben. (Probiere unser einfaches <a href="http://chrisdavidmills.github.io/snapshot/">Snapshot Beispiel</a> um eine Einblick zu bekommen).</li> +</ul> + +<div class="note"> +<p><strong>Notiz: </strong>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 <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross Browser Testing</a> auseinander zu setzen, wenn es näher an eine Produktionssystem gehen soll(z.B. Echter Code die echte Kunden benutzen sollen).</p> +</div> + +<p><strong>Drittanbieter-APIs</strong>sind nicht standardmäßig im Browser integriert, und du wirst großenteils deren Code und Informationen von wo anders finden müssen. Zum Beispiel</p> + +<ul> + <li>Die <a href="https://dev.twitter.com/overview/documentation">Twitter API</a>erlaubt es dir Dinge, wie die aktuellsten Tweets auf deiner Webseite anzeigen zu lassen.</li> + <li><a href="https://developers.google.com/maps/">Google Maps API</a>erlaubt es dir, eigene Karten auf deiner Webseite anzeigen zu lassen oder andere ähnliche Funktionen zu benutzen</li> +</ul> + +<div class="note"> +<p><strong>Notiz: </strong>Diese APIs sind sehr fortschrittlich und werden in diesem Modul nicht weiter behandelt.Du findest weitere Informationen bei unseren Modul<a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Clientbasierte Web APIs Modul</a>.</p> +</div> + +<p>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!</p> + +<h2 id="Was_genau_macht_JavaScript_auf_deiner_Webseite">Was genau macht JavaScript auf deiner Webseite?</h2> + +<p>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.</p> + +<p>Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">How CSS works</a> 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).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Browser_Sicherheit">Browser Sicherheit</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="JavaScript_running_order">JavaScript running order</h3> + +<p>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:</p> + +<pre class="brush: js notranslate">var para = document.querySelector('p'); + +para.addEventListener('click', updateName); + +function updateName() { + var name = prompt('Enter a new name'); + para.textContent = 'Player 1: ' + name; +}</pre> + +<p>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 <code>updateName()</code> code block (lines 5–8) is run. The <code>updateName()</code> 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.</p> + +<p>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 — <code>TypeError: para is undefined</code>. This means that the <code>para</code> object does not exist yet, so we can't add an event listener to it.</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Interpreted_versus_compiled_code">Interpreted versus compiled code</h3> + +<p>You might hear the terms <strong>interpreted</strong> and <strong>compiled</strong> 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.</p> + +<p>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.</p> + +<p>Both approaches have different advantages, which we won't discuss at this point.</p> + +<h3 id="Server-side_versus_client-side_code">Server-side versus client-side code</h3> + +<p>You might also hear the terms <strong>server-side</strong> and <strong>client-side</strong> 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 <strong>client-side JavaScript</strong>.</p> + +<p>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 <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a> topic.</p> + +<p>The word <strong>dynamic</strong> 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.</p> + +<p>A web page with no dynamically updating content is referred to as <strong>static</strong> — it just shows the same content all the time.</p> + +<h2 id="How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</h2> + +<p>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.</p> + +<h3 id="Internal_JavaScript">Internal JavaScript</h3> + +<ol> + <li>First of all, make a local copy of our example file <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Save it in a directory somewhere sensible.</li> + <li>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.</li> + <li>Next, go to your text editor and add the following just before your closing <code></body></code> tag: + <pre class="brush: html notranslate"><script> + + // JavaScript goes here + +</script></pre> + </li> + <li>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: + <pre class="brush: js notranslate">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); +}</pre> + </li> + <li>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.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: 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 <code>.html</code> file? Did you add your {{htmlelement("script")}} element just before the <code></body></code> tag? Did you enter the JavaScript exactly as shown? <strong>JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.</strong></p> +</div> + +<div class="note"> +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">see it live too</a>).</p> +</div> + +<h3 id="External_JavaScript">External JavaScript</h3> + +<p>This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.</p> + +<ol> + <li>First, create a new file in the same directory as your sample HTML file. Call it <code>script.js</code> — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.</li> + <li>Next, copy all of the script out of your current {{htmlelement("script")}} element and paste it into the .js file. Save that file.</li> + <li>Now replace your current {{htmlelement("script")}} element with the following: + <pre class="brush: html notranslate"><script src="script.js"></script></pre> + </li> + <li>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.</li> +</ol> + +<p><strong>Note</strong>: You can see this version on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">see it live too</a>).</p> + +<h3 id="Inline_JavaScript_handlers">Inline JavaScript handlers</h3> + +<p>Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:</p> + +<pre class="brush: js example-bad notranslate">function createParagraph() { + var para = document.createElement('p'); + para.textContent = 'You clicked the button!'; + document.body.appendChild(para); +}</pre> + +<pre class="brush: html example-bad notranslate"><button onclick="createParagraph()">Click me!</button></pre> + +<p>You can try this version of our demo below.</p> + +<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p> + +<p>This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline <code>onclick</code> handler to make the function run when the button is pressed.</p> + +<p><strong>Please don't do this, however.</strong> It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the <code>onclick="createParagraph()"</code> attribute on every button you wanted the JavaScript to apply to.</p> + +<p>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:</p> + +<pre class="notranslate">var buttons = document.querySelectorAll('button'); + +for (var i = 0; i < buttons.length ; i++) { + buttons[i].addEventListener('click', createParagraph); +}</pre> + +<p>This might look a bit longer than the <code>onclick</code> 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.</p> + +<div class="note"> +<p><strong>Note</strong>: Try editing your version of <code>apply-javascript.html</code> 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?</p> +</div> + +<h2 id="Comments">Comments</h2> + +<p>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:</p> + +<ul> + <li>A single line comment is written after a double forward slash (//), e.g. + <pre class="brush: js notranslate">// I am a comment</pre> + </li> + <li>A multi-line comment is written between the strings /* and */, e.g. + <pre class="brush: js notranslate">/* + I am also + a comment +*/</pre> + </li> +</ul> + +<p>So for example, we could annotate our last demo's JavaScript with comments like so:</p> + +<pre class="brush: js notranslate">// 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); +}</pre> + +<h2 id="Summary">Summary</h2> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Introduction_to_JavaScript_1/A_first_splash">plunge straight into the practical</a>, getting you to jump straight in and build your own JavaScript examples.</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><strong><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></strong></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li> +</ul> + +<p>{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}</p> diff --git a/files/de/learn/javascript/index.html b/files/de/learn/javascript/index.html new file mode 100644 index 0000000000..78991e9102 --- /dev/null +++ b/files/de/learn/javascript/index.html @@ -0,0 +1,47 @@ +--- +title: JavaScript +slug: Learn/JavaScript +tags: + - Anfänger + - JavaScript +translation_of: Learn/JavaScript +--- +<p>{{Glossary('JavaScript')}} ist eine wichtige Webtechnologie, die es erlaubt, Webseiten interaktiv zu gestalten.</p> + +<p><span style="line-height: 1.5;">Wenn Ihr mehr als einfach nur eine Standard-Website erstellen wollt, solltet ihr wenigstens über JavaScript-Grundkenntnisse verfügen. <br> + Es ist nicht schwer, die Grundkenntnisse zu erlangen. Aber JavaScript ist eine sehr mächtige Technologie, die es euch erlaubt, komplexe Features zu verwenden - also gibt es keine Musterlösung, wie man diese Sprache erlernen kann</span>.<br> + Wir empfehlen euch trotzdem, mit den nächsten Seiten anzufangen, um etwas mehr über JavaScript zu erfahren. <br> + Fangt von vorne an und lernt, bis ihr ganz hinten angekommen seid oder sucht euch einfach nur die Seite heraus, die ihr interessant findet. </p> + +<div class="row topicpage-table"> +<div class="section" style="width: 568px;"> +<h2 id="Die_Grundsätze" style="line-height: 30px; font-size: 2.14285714285714rem;">Die Grundsätze</h2> + +<p>Fangt hier an, falls ihr noch keine Erfahrungen mit JavaScript habt.</p> + +<dl> + <dt><a href="/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a></dt> + <dd>JavaScript Basics zeigt euch, wie ihr anfangen könnt und gewährt euch Einblicke in die aufregende Welt von JavaScript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a></dt> + <dd>Falls Javascript noch Neuland für euch ist, wird euch dieser Guide Schritt für Schritt begleiten.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript Technologie-Überblick</a></dt> + <dd>EInführung zur weiten JavaScript-Landschaft.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript">Einführung zur Objekt-Orientierten Programmierung</a></dt> + <dd>Einführung in das Konzept von {{glossary("OOP","object-oriented programming")}} mit JavaScript.</dd> +</dl> +</div> + +<div class="section" style="width: 593px;"> +<h2 id="Weiteres" style="line-height: 30px; font-size: 2.14285714285714rem;">Weiteres</h2> + +<p>Wenn ihr gefallen an JavaScript gefunden habt, gibt es hier einige Details, die euch interessieren könnten:</p> + +<div><a href="/en-US/docs/Web/JavaScript/Reference" style="font-weight: bold; line-height: 1.5;">JavaScript Referenz</a></div> + +<dl> + <dd>In unserer Referenz findet ihr Details zu jedem Aspekt von JavaScript: Event Handler, Operatoren, Statements und Funktionen.</dd> +</dl> +</div> +</div> + +<p> </p> diff --git a/files/de/learn/javascript/objects/basics/index.html b/files/de/learn/javascript/objects/basics/index.html new file mode 100644 index 0000000000..403f869034 --- /dev/null +++ b/files/de/learn/javascript/objects/basics/index.html @@ -0,0 +1,258 @@ +--- +title: JavaScript object basics +slug: Learn/JavaScript/Objects/Basics +translation_of: Learn/JavaScript/Objects/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">In diesem Artikel betrachten wir die fundamentale <strong>JavaScript Objekt Syntax</strong> und betrachten erneut einige JavaScript-Funktionalitäten, die im Kursverlauf bereits betrachtet wurden, immer im Hinblick darauf, dass viele der Merkmale, mit denen Sie bereits zu tun hatten, Objekte sind.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorkenntnisse:</th> + <td>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit JavaScript Grundlagen (siehe <a href="/en-US/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Bausteine</a>).</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Verständnis für die grundlegende Theorie zur objektorientierten Programmierung, wie dies mit JavaScript zusammenhängt ("fast alle Dinge sind Objekte") und wie man mit JavaScript-Objekten zu arbeiten beginnt.</td> + </tr> + </tbody> +</table> + +<h2 id="Objekt_Grundlagen">Objekt Grundlagen</h2> + +<p>Ein Objekt ist eine Sammlung von zusammenhängenden Daten und/oder Funktionalitäten. Diese bestehen üblicherweise aus verschiedenen Variablen und Funktionen, die Eigenschaften und Methoden genannt werden, wenn sie sich innerhalb von Objekten befinden. Arbeiten wir ein Beispiel durch, um besser zu verstehen, wie ein Objekt aussieht.</p> + +<p>Für den Anfang erzeugen wir eine lokale Kopie unserer Datei <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a>. Sie enthält nur sehr wenig - ein {{HTMLElement("script")}} Element, um unseren Quelltext einzufügen. Wir werden diese Datei bzw. dieses Beispiel als Basis nutzen, um die grundlegende Objektsyntax zu erforschen. Während der Arbeit an diesem Beispiel sollten Sie ihre <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools#The_JavaScript_console">developer tools JavaScript console</a> (z.B. Browser-Entwicklerwerkzeuge) geöffnet haben und bereit sein, einige Befehle einzutippen.</p> + +<p>Wie mit vielen Dingen in JavaScript beginnt das Erzeugen eines Objekts häufig mit der Definition und Initialisierung einer Variablen. Versuchen Sie, folgendes unterhalb des bestehenden JavaScript Quelltextes einzugeben, dann abzuspeichern und einen Browser refresh durchzuführen:</p> + +<pre class="brush: js notranslate">var person = {};</pre> + +<p>Wenn Sie <code>person</code> in ihrer JS console eingeben und die Entertaste drücken, sollten Sie folgendes Resultat erhalten:</p> + +<pre class="brush: js notranslate">[object Object]</pre> + +<p>Glückwunsch, Sie haben gerade ihr erstes Objekt erzeugt. Aufgabe erledigt! Aber dies ist ein leeres Objekt, also können wir noch nicht viel damit anfangen. Lassen sie uns unser Objekt erweitern, damit es folgendermaßen aussieht:</p> + +<pre class="brush: js notranslate">var person = { + name: ['Bob', 'Smith'], + age: 32, + gender: 'male', + interests: ['music', 'skiing'], + bio: function() { + alert(this.name[0] + ' ' + this.name[1] + + ' is ' + this.age + ' years old. He likes ' + + this.interests[0] + ' and ' + this.interests[1] + '.'); + }, + greeting: function() { + alert('Hi! I\'m ' + this.name[0] + '.'); + } +}; +</pre> + +<p>Nach dem Abspeichern und Aktualisieren des Browsers versuchen Sie, etwas vom Folgenden in der JavaScript-Konsole ihrer Browser Entwicklerwerkzeuge einzugeben:</p> + +<pre class="brush: js notranslate">person.name +person.name[0] +person.age +person.interests[1] +person.bio() +person.greeting()</pre> + +<p>Sie haben nun einige Daten und Funktionen innerhalb ihres Objekts und sind in der Lage, mit recht einfacher Syntax darauf zuzugreifen!</p> + +<div class="note"> +<p><strong>Notiz</strong>: Wenn Sie Schwierigkeiten damit haben, dies zum Funktionieren zu bringen, versuchen Sie, Ihren Code mit unserer Version zu vergleichen - siehe <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (zzgl. <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Die Live Version wird eine leere Anzeige erzeugen - das ist so in Ordnung - öffnen Sie erneut die Entwicklerwerkzeuge [Mozilla Firefox: F12 -> Konsole] und versuchen Sie, die obigen Befehle einzugeben um die Objektstruktur zu betrachten.</p> +</div> + +<p>Was passiert hier? Ein Objekt besteht aus vielen Elementen (engl. "Members", Anm. d. Übersetzers). Davon hat jedes einen Namen (z.B. <code>name</code> und <code>age</code>, wie oben) und einen Wert ( z.B. <code>['Bob', 'Smith' ]</code> und <code>32</code>). Jedes Name-Wert-Paar muss durch ein Komma getrennt sein und die jeweiligen Namen und Werte werden jeweils durch einen Doppelpunkt aufgeteilt. Die Syntax folgt stets diesem Muster:</p> + +<pre class="brush: js notranslate">var objectName = { + member1Name: member1Value, + member2Name: member2Value, + member3Name: member3Value +};</pre> + +<p>Der Wert eines Objekt-Elements kann so ziemlich alles sein - in unserem <code>person</code>-Objekt haben wir einen String, eine Zahl, zwei Arrays und zwei Funktionen. Die ersten vier Elemente sind Datansätze und werden als Objekteigenschaften bezeichnet. Die letzten beiden Elemente sind Funktionen die es dem Objekt ermöglichen, etwas mit den Daten zu tun und werden als <strong>Methoden</strong> des Objekts bezeichnet.</p> + +<p>Ein Objekt wie dieses bezeichnet man als <strong>Objektliteral</strong> — wir haben die Inhalte des Objekts wortwörtlich aufgeschrieben, als wir es erzeugt haben. Dies steht im Gegensatz zu solchen Objekten, die aus Klassen instanziert werden, welche wir später genauer betrachten werden.</p> + +<p>Es ist durchaus üblich ein Objekt unter Verwendung eines Objektliterals zu erzeugen, wenn man eine Reihe von strukturierten, zusammenhängenden Datensätzen auf gewisse Weise übertragen möchte. Zum Beispiel beim Senden einer Anfrage an einen Server, um diese in einer Datenbank abzuspeichern. Ein einzelnes Objekt zu senden ist viel effizienter, als viele Datensätze einzeln und darüber hinaus ist es einfacher, mit einem Array zu arbeiten, wenn man einzelne Datensätze anhand ihres Namens identifizieren möchte.</p> + +<h2 id="Punktnotation">Punktnotation</h2> + +<p>Oben haben Sie auf die Eigenschaften und Methoden des Objektes mittels Punktnotation zugegriffen.<strong> </strong>Der Objektbezeichner <code>person</code> dient als <strong>Namensraum </strong>- dieser muss zuerst angegeben werden, um auf etwas zuzugreifen, das innerhalb des Objektes <strong>eingekapselt </strong>ist. Als nächstes folgt der Punkt und anschließend der Bestandteil, auf den Sie zugreifen wollen - dies kann der Name einer einfachen Eigenschaft sein, ein Element einer Arrayeigenschaft oder der Aufruf einer der <strong>Objektmethoden</strong>, zum Beispiel:</p> + +<pre class="brush: js notranslate">person.age +person.interests[1] +person.bio()</pre> + +<h3 id="Sub-Namensräume">Sub-Namensräume</h3> + +<p>Es ist sogar möglich, den Wert eines Objekt-Members zu einem anderen Objekt umzuwandeln.</p> + +<p>Versuchen Sie zum Beispiel, den "name" Member von</p> + +<pre class="brush: js notranslate">name: ['Bob', 'Smith'],</pre> + +<p>zu</p> + +<pre class="brush: js notranslate">name : { + first: 'Bob', + last: 'Smith' +},</pre> + +<p>zu ändern. Hier erzeugen wir effektiv einen Sub-Namensraum. Das hört sich kompliziert an, ist es aber nicht - um auf diese Inhalte zuzugreifen, müssen Sie bloß den zusätzlichen Namensraum, getrennt durch einen Punkt, hinzufügen. Versuchen Sie folgendes in der JS Konsole:</p> + +<pre class="brush: js notranslate">person.name.first +person.name.last</pre> + +<p><strong>Wichtig</strong>: An diesem Punkt müssen Sie ihre Methodendeklarationen umarbeiten und Instanzen von</p> + +<pre class="brush: js notranslate">name[0] +name[1]</pre> + +<p>zu</p> + +<pre class="brush: js notranslate">name.first +name.last</pre> + +<p>ändern. Sonst greifen die Methoden ins Leere.</p> + +<h2 id="Klammer-Notation">Klammer-Notation</h2> + +<p>Es gibt einen weiteren Weg, auf Objekteigenschaften zuzugreifen - durch Benutzung der Klammern-Notation. Statt dies zu schreiben:</p> + +<pre class="brush: js notranslate">person.age +person.name.first</pre> + +<p>Schreibt man:</p> + +<pre class="brush: js notranslate">person['age'] +person['name']['first']</pre> + +<p>Dies gleicht der Art wie man auf Arrayelemente zugreift und ist im Grunde der gleiche Vorgang - statt einen Index zu nutzen, um ein Element auszuwählen, benutzt man den den Namen der mit jedem Memberwert assoziiert wird. Es wundert daher nicht, dass Objekte manchmal <strong>assoziative Arrays</strong> genannt werden - sie verknüpfen Zeichenketten mit Werten in der gleichen Weise, wie ein Array Indizes mit Werten verknüpft.</p> + +<h2 id="Wertzuweisungen_an_Objekt-Elemente">Wertzuweisungen an Objekt-Elemente</h2> + +<p>Bisher haben wir nur betrachtet, wie man Objekt-Elemente abruft ( getting ) — man kann den Wert von Objektelementen auch setzen ( updating ), indem man das Element, welches gesetzt werden soll, folgendermaßen deklariert:</p> + +<pre class="brush: js notranslate">person.age = 45; +person['name']['last'] = 'Cratchit';</pre> + +<p>Versuchen Sie, die Zeilen wie oben aufgeführt einzugeben und dann die Elemente wieder abzurufen, etwa so:</p> + +<pre class="brush: js notranslate">person.age +person['name']['last']</pre> + +<p>Zuweisungen hören nicht beim Ändern von Werten existierender Eigenschaften und Methoden auf, man kann auch völlig neue Elemente erzeugen. Versuchen Sie dies in der JS Konsole:</p> + +<pre class="brush: js notranslate">person['eyes'] = 'hazel'; +person.farewell = function() { alert("Bye everybody!"); }</pre> + +<p>Sie können diese neuen Elemente nun ausprobieren:</p> + +<pre class="brush: js notranslate">person['eyes'] +person.farewell()</pre> + +<p>Ein nützlicher Aspekt der Klammer-Notation ist jener, dass man nicht nur Elementwerte dynamisch zuweisen kann, sondern auch Elementnamen. Nehmen wir an, wir wollen es Usern ermöglichen, selbstdefinierte Wertetypen in ihren <code>people</code>-Daten zu speichern, indem sie den Elementnamen und Wert in zwei Textfeldern eingeben. Wir könnten diese Werte so abrufen:</p> + +<pre class="brush: js notranslate">var myDataName = nameInput.value; +var myDataValue = nameValue.value;</pre> + +<p>dann könnten wir diesen neuen Elementnamen und Wert zum <code>person</code>-Objekt so hinzufügen:</p> + +<pre class="brush: js notranslate">person[myDataName] = myDataValue;</pre> + +<p>Um das auszuprobieren, versuchen Sie, folgendes in ihren Quelltext einzufügen, gleich unterhalb der schliessenden, geschweiften Klammer des <code>person</code>-Objekts:</p> + +<pre class="brush: js notranslate">var myDataName = 'height'; +var myDataValue = '1.75m'; +person[myDataName] = myDataValue;</pre> + +<p>Nach dem Abspeichern und einem Browser-Refresh geben Sie folgendes in der Konsole ein:</p> + +<pre class="brush: js notranslate">person.height</pre> + +<p>Eine Eigenschaft zu einem Objekt hinzuzufügen ist mit der Punkt-Notation nicht möglich. Diese akzeptiert nur einen literalen Elementnamen, keine Variable, die auf einen Namen zeigt.</p> + +<h2 id="Was_bedeutet_this">Was bedeutet "this"?</h2> + +<p>Sie haben vielleicht schon etwas seltsames in unseren Methoden bemerkt. Sehen wir uns zum Beispiel folgendes genauer an:</p> + +<pre class="brush: js notranslate">greeting: function() { + alert('Hi! I\'m ' + this.name.first + '.'); +}</pre> + +<p>Sie wundern sich wahrscheinlich, was dieses "this" sein soll. Das Schlüsselwort <code>this</code> referenziert das derzeitige Objekt, in dem der Code hineingeschrieben wurde - in diesem Fall wäre <code>this</code> gleichbedeutend mit <code>person</code>. Also warum nicht einfach stattdessen <code>person</code> schreiben? Wie Sie im Artikel <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> sehen werden, wenn wir damit beginnen, z.B. Konstruktoren zu erzeugen usw.: <code>this</code> ist sehr nützlich - es wird immer sicherstellen, dass die korrekten Werte verwendet werden, wenn sich der Kontext eines Elementes ändert (z.B. zwei unterschiedliche Objektinstanzen von <code>person</code> haben andere Namenswerte und sollten folgerichtig ihren jeweiligen Namenswert verwenden, wenn die greeting Methode aufgerufen wird).</p> + +<p>Lassen Sie uns dies an einem vereinfachten Paar Objekten vom Typ <code>person</code> verdeutlichen:</p> + +<pre class="brush: js notranslate">var person1 = { + name: 'Chris', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +var person2 = { + name: 'Brian', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>In diesem Fall wird <code>person1.greeting()</code> "Hi! I'm Chris." ausgeben; <code>person2.greeting()</code> wiederum wird "Hi! I'm Brian." ausgeben, obwohl der Quelltext in jedem Fall genau gleich lautet. Wie schon gesagt, <code>this</code> ist gleichbedeutend mit dem Objekt, in dem sich der Quelltext befindet - das ist nicht sehr nützlich, wenn man Objektliterale händisch schreibt, aber es ist sehr hilfreich, sobald Objekte dynamisch erzeugt werden (zum Beispiel unter Verwendung von Konstruktoren). Es wird im weiteren Verlauf alles deutlich werden.</p> + +<h2 id="Sie_haben_die_ganze_Zeit_Objekte_verwendet">Sie haben die ganze Zeit Objekte verwendet</h2> + +<p>Als Sie diese Beispiele durchgegangen sind, haben Sie wahrscheinlich gedacht, dass die Punktnotation, die Sie verwendet haben, sehr vertraut scheint. Es liegt daran, dass Sie diese im gesamten Kursverlauf benutzt haben. Jedes Mal, wenn wir ein Beispiel behandelten, welches Teile des built-in Browser API oder JavaScript-Objekte verwendete, haben wir Objekte verwendet, da solche Funktionalitäten genau mit der gleichen Art von Objektstrukturen aufgebaut werden, wie wir sie hier betrachtet haben. Diese sind allerdings etwas komplexer als die unserer eigenen, einfachen Beispiele.</p> + +<p>Wenn Sie String-Methoden wie diese verwenden,</p> + +<pre class="brush: js notranslate">myString.split(',');</pre> + +<p>haben Sie eine Methode verwendet, die eine Instanz der <code>String</code>-Klasse zur Verfügung stellte. Jedes Mal, wenn Sie einen String in ihrem Quelltext erstellen, wir dieser String automatisch als eine Instanz von <code>String</code> erzeugt, dadurch stehen einige allgemeine Methoden und Eigenschaften zur Verfügung.</p> + +<p>Wenn Sie im DOM folgende Zeilen verwenden,</p> + +<pre class="brush: js notranslate">var myDiv = document.createElement('div'); +var myVideo = document.querySelector('video');</pre> + +<p>haben Sie Methoden verwendet, die von einer Instanz der Klasse <code><a href="/en-US/docs/Web/API/Document">Document</a></code> zur Verfügung gestellt wurden. Für jede geladene Webseite wird eine Instanz von <code>Document</code> erzeugt, die <code>document</code> genannt wird, welche die gesamte Struktur, den Inhalt und weitere Merkmale wie die URL repräsentiert. Dies bedeutet wiederum, dass einige allgemeine Methoden und Eigenschaften entsprechend verfügbar gemacht werden.</p> + +<p>Das gleiche gilt für so ziemlich jedes andere built-in Objekt/API, welches Sie benutzt haben — z.B. <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, usw.</p> + +<p>Beachten Sie, dass built-in Objekte/APIs nicht zwangsläufig immer automatisch eine Objektinstanz erzeugen. Ein Beispiel, die <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> — welche es modernen Browsern erlaubt, System Notifikationen zu generieren — benötigt für jede zu sendende Notifikation eine neue Objektinstanz, die Sie durch Verwendung des Konstruktors erzeugen müssen. Versuchen Sie, folgendes in Ihrer JavaScript Konsole einzugeben:</p> + +<pre class="brush: js notranslate">var myNotification = new Notification('Hello!');</pre> + +<p>Konstruktoren werden wir in einem späteren Artikel detaillierter behandeln.</p> + +<div class="note"> +<p><strong>Bemerkung</strong>: Es ist nützlich, sich die Art, wie Objekte kommunizieren, als <strong>Nachrichtenweitergabe</strong> vorzustellen — wenn ein Objekt die Ausführung einer Aktion von einem anderen Objekt benötigt, wird es meist eine Nachricht an dieses Objekt mittels einer seiner Methoden senden und auf eine Antwort warten, welche wir als Rückgabewert bezeichnen.</p> +</div> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Glückwunsch, Sie haben das Ende unseres ersten JS Objekt Artikels erreicht —Sie sollten nun eine gute Vorstellung davon haben, wie man mit Objekten in JavaScript arbeitet — einschließlich der Erzeugung von eigenen, einfachen Objekte. Sie sollten auch zu schätzen wissen, dass Objekte als Daten- und Funktionsspeicherstrukturen sehr nützlich sind — wenn Sie versuchen würden, alle Eigenschaften und Methoden in unserem <code>person</code>-Objekt als einzelne Variablen bzw. Funktionen nachzuverfolgen, wäre das sehr ineffizient und frustrierend und wir würden riskieren, das gleichnamige Variablen kollidieren. Objekte lassen uns Informationen gefahrlos und sicher in ihrem jeweils eigenen Paket verstauen.</p> + +<p>Im nächsten Artikel werden wir damit beginnen, uns die Theorie der objektorientierten Programmierung (OOP) anzusehen und wie solche Techniken in JavaScript umgesetzt werden können.</p> + +<p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li> +</ul> diff --git a/files/de/learn/javascript/objects/index.html b/files/de/learn/javascript/objects/index.html new file mode 100644 index 0000000000..9178a14f6d --- /dev/null +++ b/files/de/learn/javascript/objects/index.html @@ -0,0 +1,53 @@ +--- +title: Introducing JavaScript objects +slug: Learn/JavaScript/Objects +tags: + - Beginner + - Guide + - JavaScript + - Objects + - Objekte + - Programmieren + - Prototypes + - Tutorial +translation_of: Learn/JavaScript/Objects +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">In JavaScript sind die meisten Dinge Objekte die auf dem Grundstein von JavaScript aufgebaut worden sind. Hierzu zählen Strings, Arrays welche mittels der API grundlegend fundamentiert sind. Du kannst auch deine eigenen Objekte definieren um Dinge aus der Realität in Programmcode wiederzuverwenden. Die objektorientierte Programmierung ist wichtig um ein komplettes Verständnis zu bekommen als auch die Sprache wirklich zu verstehen. Aus diesem Grund stellen wir euch einige Lernmodule an um besser in das Thema einsteigen zu können.<br> + <br> + Aber hier wollen wir euch erstmal erklären, was ein Objekt genau ist und wie die Syntax für eine Definition eines Objektes ist.</p> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Bevor du mit diesem Lernmodul beginnst, solltest du dich mit HTML und CSS vertraut gemacht haben. Solltest du noch keine Vorkenntnisse haben, so sehe dir bitte <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Einführung in HTML</a> und <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Einführung in CSS</a> an bevor du mit JavaScript beginnst.</p> + +<p>Auch solltest du dich vorher mit den Grundlagen von JavaScript vertraut gemacht haben, sie dazu bitte in folgenden Modulen nach: <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript: Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript: Elementare Grundlagen</a>.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Solltest du an einem Computer arbeiten, der dir das Erstellen und Bearbeiten von Dateien nicht erlaubt, so kannst du Dienste wie <a href="http://jsbin.com/">JSBin</a> oder <a href="https://thimble.mozilla.org/">Thimble</a> für diesen Kurs nutzen.</p> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></dt> + <dd>In diesem ersten Kaptiel erklären wir euch wie ein Objekt fundamental aufgebaut ist, als auch die Syntax zu diesem. Wir behandeln außerdem einige Gebiete, die wir schon bereits gesehen haben, denn die meisten Dinge in JavaScript mit denen du arbeiten wirst sind Objekte.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></dt> + <dd>Hier zeigen wir euch die objektorientierte Programmierung (OOP/OOJS) - hier gibt es erste Einblicke wie du dein Objekt am besten definierst und dann zeigen wir dir, wie JavaScript dein Objekt zum Leben bringt durch Instanziierung.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypes</a></dt> + <dd>Prototypes ist der Begriff für den Vorgang für die weitergehende Verwendung eines Objektes mit vererbbaren Funktionen. Solltest du bereits eine andere objektorientierte Programmiersprache benutzt haben, wirst du merken, dass JavaScript anders funktioniert. In dem Modul behandeln wir außerdem wie die Verkettung von Prototypen funktioniert und schauen uns die <em>Eigenschaften eines Objektes</em> genauer an, mit denen wir auch die Funktionen definieren werden.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></dt> + <dd>Nachdem du in den vorherigen Lernmodulen einiges über OOJS gelernt hast, zeigen wir dir hier wie du Funktionen und Eigenschaften mit einem anderen Objekt vererbben kannst.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Arbeiten mit JSON Strukturen</a></dt> + <dd>JavaScript Object Notation (JSON) ist eine textbasierte Struktursprache um Daten kompakt und wiederverwendbar zu machen. Diese Struktursprache ist die gängigste in JavaScript um Objekte zu beschreiben, speichern oder für andere Dienste verfügbar zu machen.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekte an einer Übung definieren</a></dt> + <dd>In dieser Übung möchten wir nochmal alle vorherigen Themen aufgreifen und nochmal mit der Syntax von Objekten üben und dabei etwas Spaß mit springenden, bunten Bällen haben.</dd> +</dl> + +<h2 id="Übungen">Übungen</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Erstelle neue Funktionen für springende Bälle</a></dt> + <dd>In dieser Übung greifen wir uns das Demo-Projekt aus dem vorherigen Artikel nochmal auf und werden die springenden Bälle mit neuen Objektfunktionen erweitern.</dd> +</dl> diff --git a/files/de/learn/javascript/objects/inheritance/index.html b/files/de/learn/javascript/objects/inheritance/index.html new file mode 100644 index 0000000000..827dda17f6 --- /dev/null +++ b/files/de/learn/javascript/objects/inheritance/index.html @@ -0,0 +1,440 @@ +--- +title: Inheritance in JavaScript +slug: Learn/JavaScript/Objects/Inheritance +translation_of: Learn/JavaScript/Objects/Inheritance +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Nachdem nun die schmutzigen Details des OOJS erklärt sind, beschäftigt sich dieser Artikel damit, wie "Kinder"-Objektklassen (Konstruktoren) Features von ihren "Eltern"-Klassen vererbt bekommen. Zusätzlich stellen wir Hinweise dazu bereit, wann und wo Du OOJS am besten anwendest und wie mit Klassen im modern ECMAScript Syntax umgegangen wird.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Grundsätzliche EDV-Kenntnisse, ein grundlegendes Verständnis für HTML und CSS, mit JavaScript Grundlagen vertraut sein (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/First_steps">Erste Schritte</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) und Grundlagen zu OOJS (siehe<a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">Lernziel:</th> + <td>Zu verstehen, wie es in JavaScript möglich ist, Vererbung zu implementieren.</td> + </tr> + </tbody> +</table> + +<h2 id="Prototypal_inheritance">Prototypal inheritance</h2> + +<p>So far we have seen some inheritance in action — we have seen how prototype chains work, and how members are inherited going up a chain. But mostly this has involved built-in browser functions. How do we create an object in JavaScript that inherits from another object?</p> + +<p>Let's explore how to do this with a concrete example.</p> + +<h2 id="Getting_started">Getting started</h2> + +<p>First of all, make yourself a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> file (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">running live</a> also). Inside here you'll find the same <code>Person()</code> constructor example that we've been using all the way through the module, with a slight difference — we've defined only the properties inside the constructor:</p> + +<pre class="brush: js notranslate">function Person(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +};</pre> + +<p>The methods are <em>all</em> defined on the constructor's prototype. For example:</p> + +<pre class="brush: js notranslate">Person.prototype.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); +};</pre> + +<div class="note"> +<p><strong>Note</strong>: In the source code, you'll also see <code>bio()</code> and <code>farewell()</code> methods defined. Later you'll see how these can be inherited by other constructors.</p> +</div> + +<p>Say we wanted to create a <code>Teacher</code> class, like the one we described in our initial object-oriented definition, which inherits all the members from <code>Person</code>, but also includes:</p> + +<ol> + <li>A new property, <code>subject</code> — this will contain the subject the teacher teaches.</li> + <li>An updated <code>greeting()</code> method, which sounds a bit more formal than the standard <code>greeting()</code> method — more suitable for a teacher addressing some students at school.</li> +</ol> + +<h2 id="Defining_a_Teacher_constructor_function">Defining a Teacher() constructor function</h2> + +<p>The first thing we need to do is create a <code>Teacher()</code> constructor — add the following below the existing code:</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + Person.call(this, first, last, age, gender, interests); + + this.subject = subject; +}</pre> + +<p>This looks similar to the Person constructor in many ways, but there is something strange here that we've not seen before — the <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code> function. This function basically allows you to call a function defined somewhere else, but in the current context. The first parameter specifies the value of <code>this</code> that you want to use when running the function, and the other parameters are those that should be passed to the function when it is invoked.</p> + +<p>We want the <code>Teacher()</code> constructor to take the same parameters as the <code>Person()</code> constructor it is inheriting from, so we specify them all as parameters in the <code>call()</code> invocation.</p> + +<p>The last line inside the constructor simply defines the new <code>subject</code> property that teachers are going to have, which generic people don't have.</p> + +<p>As a note, we could have simply done this:</p> + +<pre class="brush: js notranslate">function Teacher(first, last, age, gender, interests, subject) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.subject = subject; +}</pre> + +<p>But this is just redefining the properties anew, not inheriting them from <code>Person()</code>, so it defeats the point of what we are trying to do. It also takes more lines of code.</p> + +<h3 id="Inheriting_from_a_constructor_with_no_parameters">Inheriting from a constructor with no parameters</h3> + +<p>Note that if the constructor you are inheriting from doesn't take its property values from parameters, you don't need to specify them as additional arguments in <code>call()</code>. So, for example, if you had something really simple like this:</p> + +<pre class="brush: js notranslate">function Brick() { + this.width = 10; + this.height = 20; +}</pre> + +<p>You could inherit the <code>width</code> and <code>height</code> properties by doing this (as well as the other steps described below, of course):</p> + +<pre class="brush: js notranslate">function BlueGlassBrick() { + Brick.call(this); + + this.opacity = 0.5; + this.color = 'blue'; +}</pre> + +<p>Note that we've only specified <code>this</code> inside <code>call()</code> — no other parameters are required as we are not inheriting any properties from the parent that are set via parameters.</p> + +<h2 id="Setting_Teachers_prototype_and_constructor_reference">Setting Teacher()'s prototype and constructor reference</h2> + +<p>All is good so far, but we have a problem. We have defined a new constructor, and it has a <code>prototype</code> property, which by default just contains an object with a reference to the constructor function itself. It does not contain the methods of the Person constructor's <code>prototype</code> property. To see this, enter <code>Object.getOwnPropertyNames(Teacher.prototype)</code> into either the text input field or your JavaScript console. Then enter it again, replacing <code>Teacher</code> with <code>Person</code>. Nor does the new constructor <em>inherit</em> those methods. To see this, compare the outputs of <code>Person.prototype.greeting</code> and <code>Teacher.prototype.greeting</code>. We need to get <code>Teacher()</code> to inherit the methods defined on <code>Person()</code>'s prototype. So how do we do that?</p> + +<ol> + <li>Add the following line below your previous addition: + <pre class="brush: js notranslate">Teacher.prototype = Object.create(Person.prototype);</pre> + Here our friend <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> comes to the rescue again. In this case we are using it to create a new object and make it the value of <code>Teacher.prototype</code>. The new object has <code>Person.prototype</code> as its prototype and will therefore inherit, if and when needed, all the methods available on <code>Person.prototype</code>.</li> + <li>We need to do one more thing before we move on. After adding the last line, <code>Teacher.</code><code>prototype</code>'s <code>constructor</code> property is now equal to <code>Person()</code>, because we just set <code>Teacher.prototype</code> to reference an object that inherits its properties from <code>Person.prototype</code>! Try saving your code, loading the page in a browser, and entering <code>Teacher.prototype.constructor</code> into the console to verify.</li> + <li>This can become a problem, so we need to set this right. You can do so by going back to your source code and adding the following line at the bottom: + <pre class="brush: js notranslate">Object.defineProperty(Teacher.prototype, 'constructor', { + value: Teacher, + enumerable: false, // so that it does not appear in 'for in' loop + writable: true });</pre> + </li> + <li>Now if you save and refresh, entering <code>Teacher.prototype.constructor</code> should return <code>Teacher()</code>, as desired, plus we are now inheriting from <code>Person()</code>!</li> +</ol> + +<h2 id="Giving_Teacher_a_new_greeting_function">Giving Teacher() a new greeting() function</h2> + +<p>To finish off our code, we need to define a new <code>greeting()</code> function on the <code>Teacher()</code> constructor.</p> + +<p>The easiest way to do this is to define it on <code>Teacher()</code>'s prototype — add the following at the bottom of your code:</p> + +<pre class="brush: js notranslate">Teacher.prototype.greeting = function() { + let prefix; + + if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { + prefix = 'Mr.'; + } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { + prefix = 'Ms.'; + } else { + prefix = 'Mx.'; + } + + alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); +};</pre> + +<p>This alerts the teacher's greeting, which also uses an appropriate name prefix for their gender, worked out using a conditional statement.</p> + +<h2 id="Trying_the_example_out">Trying the example out</h2> + +<p>Now that you've entered all the code, try creating an object instance from <code>Teacher()</code> by putting the following at the bottom of your JavaScript (or something similar of your choosing):</p> + +<pre class="brush: js notranslate">let teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre> + +<p>Now save and refresh, and try accessing the properties and methods of your new <code>teacher1</code> object, for example:</p> + +<pre class="brush: js notranslate">teacher1.name.first; +teacher1.interests[0]; +teacher1.bio(); +teacher1.subject; +teacher1.greeting(); +teacher1.farewell();</pre> + +<p>These should all work just fine. The queries on lines 1, 2, 3, and 6 access members inherited from the generic <code>Person()</code> constructor (class). The query on line 4 accesses a member that is available only on the more specialized <code>Teacher()</code> constructor (class). The query on line 5 would have accessed a member inherited from <code>Person()</code>, except for the fact that <code>Teacher()</code> has its own member with the same name, so the query accesses that member.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, compare your code to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-finished.html">running live</a> also).</p> +</div> + +<p>The technique we covered here is not the only way to create inheriting classes in JavaScript, but it works OK, and it gives you a good idea about how to implement inheritance in JavaScript.</p> + +<p>You might also be interested in checking out some of the new {{glossary("ECMAScript")}} features that allow us to do inheritance more cleanly in JavaScript (see <a href="/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). We didn't cover those here, as they are not yet supported very widely across browsers. All the other code constructs we discussed in this set of articles are supported as far back as IE9 or earlier, and there are ways to achieve earlier support than that.</p> + +<p>A common way is to use a JavaScript library — most of the popular options have an easy set of functionality available for doing inheritance more easily and quickly. <a href="http://coffeescript.org/#classes">CoffeeScript</a> for example provides <code>class</code>, <code>extends</code>, etc.</p> + +<h2 id="A_further_exercise">A further exercise</h2> + +<p>In our <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">OOP theory section</a>, we also included a <code>Student</code> class as a concept, which inherits all the features of <code>Person</code>, and also has a different <code>greeting()</code> method from <code>Person</code> that is much more informal than the <code>Teacher</code>'s greeting. Have a look at what the student's greeting looks like in that section, and try implementing your own <code>Student()</code> constructor that inherits all the features of <code>Person()</code>, and implements the different <code>greeting()</code> function.</p> + +<div class="note"> +<p><strong>Note</strong>: If you have trouble getting this to work, have a look at our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">finished version</a> (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">running live</a> also).</p> +</div> + +<h2 id="Object_member_summary">Object member summary</h2> + +<p>To summarize, you've got four types of property/method to worry about:</p> + +<ol> + <li>Those defined inside a constructor function that are given to object instances. These are fairly easy to spot — in your own custom code, they are the members defined inside a constructor using the <code>this.x = x</code> type lines; in built in browser code, they are the members only available to object instances (usually created by calling a constructor using the <code>new</code> keyword, e.g. <code>let myInstance = new myConstructor()</code>).</li> + <li>Those defined directly on the constructor themselves, that are available only on the constructor. These are commonly only available on built-in browser objects, and are recognized by being chained directly onto a constructor, <em>not</em> an instance. For example, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>. These are also known as <strong>static properties/methods</strong>.</li> + <li>Those defined on a constructor's prototype, which are inherited by all instances and inheriting object classes. These include any member defined on a Constructor's <code>prototype</code> property, e.g. <code>myConstructor.prototype.x()</code>.</li> + <li>Those available on an object instance, which can either be an object created when a constructor is instantiated like we saw above (so for example <code>var teacher1 = new Teacher( name = 'Chris' );</code> and then <code>teacher1.name</code>), or an object literal (<code>let teacher1 = { name = 'Chris' }</code> and then <code>teacher1.name</code>).</li> +</ol> + +<p>If you are not sure which is which, don't worry about it just yet — you are still learning, and familiarity will come with practice.</p> + +<h2 id="ECMAScript_2015_Classes">ECMAScript 2015 Classes</h2> + +<p>ECMAScript 2015 introduces <a href="/en-US/docs/Web/JavaScript/Reference/Classes">class syntax</a> to JavaScript as a way to write reusable classes using easier, cleaner syntax, which is more similar to classes in C++ or Java. In this section we'll convert the Person and Teacher examples from prototypal inheritance to classes, to show you how it's done.</p> + +<div class="note"> +<p><strong>Note</strong>: This modern way of writing classes is supported in all modern browsers, but it is still worth knowing about the underlying prototypal inheritance in case you work on a project that requires supporting a browser that doesn't support this syntax (most notably Internet Explorer).</p> +</div> + +<p>Let's look at a rewritten version of the Person example, class-style:</p> + +<pre class="brush: js notranslate">class Person { + constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + } + + greeting() { + console.log(`Hi! I'm ${this.name.first}`); + }; + + farewell() { + console.log(`${this.name.first} has left the building. Bye for now!`); + }; +} +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a> statement indicates that we are creating a new class. Inside this block, we define all the features of the class:</p> + +<ul> + <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor()</a></code> method defines the constructor function that represents our <code>Person</code> class.</li> + <li><code>greeting()</code> and <code>farewell()</code> are class methods. Any methods you want associated with the class are defined inside it, after the constructor. In this example, we've used <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">template literals</a> rather than string concatenation to make the code easier to read.</li> +</ul> + +<p>We can now instantiate object instances using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a>, in just the same way as we did before:</p> + +<pre class="brush: js notranslate">let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']); +han.greeting(); +// Hi! I'm Han + +let leia = new Person('Leia', 'Organa', 19, 'female', ['Government']); +leia.farewell(); +// Leia has left the building. Bye for now +</pre> + +<div class="note"> +<p><strong>Note</strong>: Under the hood, your classes are being converted into Prototypal Inheritance models — this is just syntactic sugar. But I'm sure you'll agree that it's easier to write.</p> +</div> + +<h3 id="Inheritance_with_class_syntax">Inheritance with class syntax</h3> + +<p>Above we created a class to represent a person. They have a series of attributes that are common to all people; in this section we'll create our specialized <code>Teacher</code> class, making it inherit from <code>Person</code> using modern class syntax. This is called creating a subclass or subclassing.</p> + +<p>To create a subclass we use the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends keyword</a> to tell JavaScript the class we want to base our class on,</p> + +<pre class="brush: js notranslate">class Teacher extends Person { + constructor(subject, grade) { + this.subject = subject; + this.grade = grade; + } +}</pre> + +<p>but there's a little catch.</p> + +<p>Unlike old-school constructor functions where the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new"><code>new</code> operator</a> does the initialization of <code>this</code> to a newly-allocated object, this isn't automatically initialized for a class defined by the <a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a> keyword, i.e the sub-classes.</p> + +<p>Therefore running the above code will give an error:</p> + +<pre class="brush: js notranslate">Uncaught ReferenceError: Must call super constructor in derived class before +accessing 'this' or returning from derived constructor</pre> + +<p>For sub-classes, the <code>this</code> intialization to a newly allocated object is always dependant on the parent class constructor, i.e the constructor function of the class from which you're extending.</p> + +<p>Here we are extending the <code>Person</code> class — the <code>Teacher</code> sub-class is an extension of the <code>Person</code> class. So for <code>Teacher</code>, the <code>this</code> initialization is done by the <code>Person</code> constructor.</p> + +<p>To call the parent constructor we have to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a>, like so:</p> + +<pre class="brush: js notranslate">class Teacher extends Person { + constructor(subject, grade) { + super(); // Now 'this' is initialized by calling the parent constructor. + this.subject = subject; + this.grade = grade; + } +}</pre> + +<p>There is no point having a sub-class if it doesn't inherit properties from the parent class.<br> + It is good then, that the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/super"><code>super()</code> operator</a> also accepts arguments for the parent constructor.</p> + +<p>Looking back to our <code>Person</code> constructor, we can see it has the following block of code in its constructor method:</p> + +<pre class="brush: js notranslate"> constructor(first, last, age, gender, interests) { + this.name = { + first, + last + }; + this.age = age; + this.gender = gender; + this.interests = interests; +} </pre> + +<p>Since the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super()</a></code> operator is actually the parent class constructor, passing it the necessary arguments of the <code>Parent</code> class constructor will also initialize the parent class properties in our sub-class, thereby inheriting it:</p> + +<pre class="brush: js notranslate">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + + // subject and grade are specific to Teacher + this.subject = subject; + this.grade = grade; + } +} +</pre> + +<p>Now when we instantiate <code>Teacher</code> object instances, we can call methods and properties defined on both <code>Teacher</code>and <code>Person</code> as we'd expect:</p> + +<pre class="brush: js notranslate">let snape = new Teacher('Severus', 'Snape', 58, 'male', ['Potions'], 'Dark arts', 5); +snape.greeting(); // Hi! I'm Severus. +snape.farewell(); // Severus has left the building. Bye for now. +snape.age // 58 +snape.subject; // Dark arts +</pre> + +<p>Like we did with Teachers, we could create other subclasses of <code>Person</code> to make them more specialized without modifying the base class.</p> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-class-inheritance.html">es2015-class-inheritance.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-class-inheritance.html">see it live also</a>).</p> +</div> + +<h2 id="Getters_and_Setters">Getters and Setters</h2> + +<p>There may be times when we want to change the values of an attribute in the classes we create or we don't know what the final value of an attribute will be. Using the <code>Teacher</code> example, we may not know what subject the teacher will teach before we create them, or their subject may change between terms.</p> + +<p>We can handle such situations with getters and setters.</p> + +<p>Let's enhance the Teacher class with getters and setters. The class starts the same as it was the last time we looked at it.</p> + +<p>Getters and setters work in pairs. A getter returns the current value of the variable and its corresponding setter changes the value of the variable to the one it defines.</p> + +<p>The modified <code>Teacher</code> class looks like this:</p> + +<pre class="brush: js notranslate">class Teacher extends Person { + constructor(first, last, age, gender, interests, subject, grade) { + super(first, last, age, gender, interests); + // subject and grade are specific to Teacher + this._subject = subject; + this.grade = grade; + } + + get subject() { + return this._subject; + } + + set subject(newSubject) { + this._subject = newSubject; + } +} +</pre> + +<p>In our class above we have a getter and setter for the <code>subject</code> property. We use <strong><code>_</code> </strong> to create a separate value in which to store our name property. Without using this convention, we would get errors every time we called get or set. At this point:</p> + +<ul> + <li>To show the current value of the <code>_subject</code> property of the <code>snape</code> object we can use the <code>snape.subject</code> getter method.</li> + <li>To assign a new value to the <code>_subject</code> property we can use the <code>snape.subject="new value"</code> setter method.</li> +</ul> + +<p>The example below shows the two features in action:</p> + +<pre class="brush: js notranslate">// Check the default value +console.log(snape.subject) // Returns "Dark arts" + +// Change the value +snape.subject = "Balloon animals" // Sets _subject to "Balloon animals" + +// Check it again and see if it matches the new value +console.log(snape.subject) // Returns "Balloon animals" +</pre> + +<div class="note"> +<p><strong>Note</strong>: You can find this example on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/es2015-getters-setters.html">es2015-getters-setters.html</a> (<a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/es2015-getters-setters.html">see it live also</a>).</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Getters and setters can be very useful at times, for example when you want to run some code every time a property is requested or set. For simple cases, however, plain property access without a getter or setter will do just fine.</p> +</div> + +<h2 id="When_would_you_use_inheritance_in_JavaScript">When would you use inheritance in JavaScript?</h2> + +<p>Particularly after this last article, you might be thinking "woo, this is complicated". Well, you are right. Prototypes and inheritance represent some of the most complex aspects of JavaScript, but a lot of JavaScript's power and flexibility comes from its object structure and inheritance, and it is worth understanding how it works.</p> + +<p>In a way, you use inheritance all the time. Whenever you use various features of a Web API , or methods/properties defined on a built-in browser object that you call on your strings, arrays, etc., you are implicitly using inheritance.</p> + +<p>In terms of using inheritance in your own code, you probably won't use it often, especially to begin with, and in small projects. It is a waste of time to use objects and inheritance just for the sake of it when you don't need them. But as your code bases get larger, you are more likely to find a need for it. If you find yourself starting to create a number of objects that have similar features, then creating a generic object type to contain all the shared functionality and inheriting those features in more specialized object types can be convenient and useful.</p> + +<div class="note"> +<p><strong>Note</strong>: Because of the way JavaScript works, with the prototype chain, etc., the sharing of functionality between objects is often called <strong>delegation</strong>. Specialized objects delegate functionality to a generic object type.</p> +</div> + +<p>When using inheritance, you are advised to not have too many levels of inheritance, and to keep careful track of where you define your methods and properties. It is possible to start writing code that temporarily modifies the prototypes of built-in browser objects, but you should not do this unless you have a really good reason. Too much inheritance can lead to endless confusion, and endless pain when you try to debug such code.</p> + +<p>Ultimately, objects are just another form of code reuse, like functions or loops, with their own specific roles and advantages. If you find yourself creating a bunch of related variables and functions and want to track them all together and package them neatly, an object is a good idea. Objects are also very useful when you want to pass a collection of data from one place to another. Both of these things can be achieved without use of constructors or inheritance. If you only need a single instance of an object, then you are probably better off just using an object literal, and you certainly don't need inheritance.</p> + +<h2 id="Alternatives_for_extending_the_prototype_chain">Alternatives for extending the prototype chain</h2> + +<p>In JavaScript, there are several different ways to extend the prototype of an object aside from what we've shown above. To find out more about the other ways, visit our <a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain#Different_ways_to_create_objects_and_the_resulting_prototype_chain">Inheritance and the prototype chain</a> article.</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>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 <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object-oriented_JavaScript">Test your skills: Object-oriented JavaScript</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>This article has covered the remainder of the core OOJS theory and syntax that we think you should know now. At this point you should understand JavaScript object and OOP basics, prototypes and prototypal inheritance, how to create classes (constructors) and object instances, add features to classes, and create subclasses that inherit from other classes.</p> + +<p>In the next article we'll have a look at how to work with JavaScript Object Notation (JSON), a common data exchange format written using JavaScript objects.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li> + <li><a href="https://www.manning.com/books/secrets-of-the-javascript-ninja-second-edition">Secrets of the JavaScript Ninja</a>, Chapter 7 — A good book on advanced JavaScript concepts and techniques, by John Resig, Bear Bibeault, and Josip Maras. Chapter 7 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/this%20%26%20object%20prototypes/README.md">You Don't Know JS: this & Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> diff --git a/files/de/learn/javascript/objects/json/index.html b/files/de/learn/javascript/objects/json/index.html new file mode 100644 index 0000000000..7b01bfbf52 --- /dev/null +++ b/files/de/learn/javascript/objects/json/index.html @@ -0,0 +1,345 @@ +--- +title: Arbeiten mit JSON +slug: Learn/JavaScript/Objects/JSON +translation_of: Learn/JavaScript/Objects/JSON +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Die JavaScript Object Notation (JSON) ist ein standardisiertes, textbasiertes Format, um strukturierte Daten auf Basis eines JavaScript Objekts darzustellen. Es wird häufig für die Übertragung von Daten in Webanwendungen verwendet (z.B. das Senden einiger Daten vom Server zum Client, damit sie auf einer Webseite angezeigt werden können oder umgekehrt). Es wird dir sehr häufig über den Weg laufen, daher geben wir dir in diesem Artikel alles mit, damit du JSON mithilfe von JavaScript nutzen kannst, einschließlich des Umwandelns von JSON, damit du auf die enthaltenen Daten zugreifen und JSON erstellen kannst.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td>Grundlegende Computerkenntnisse, grundlegendes Verständnis von HTML, CSS und JavaScript (siehe <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> und <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) sowie OOJS Grundkenntnisse (siehe <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td> + </tr> + <tr> + <th scope="row">Ziele:</th> + <td>Zu verstehen, wie man mit Daten im JSON-Format arbeitet und eigene JSON-Objekte erstellt.</td> + </tr> + </tbody> +</table> + +<h2 id="Nein_im_ernst_was_ist_JSON">Nein, im ernst, was ist JSON?</h2> + +<p>{{glossary("JSON")}} ist ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax und popularisiert durch <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Douglas Crockford</a>. Auch wenn es der JavaScript Object Syntax ähnelt, ist es dennoch Javascript unabhängig. Heutzutage unterstützen zahlreiche Programmierumgebungen JSON, sowohl lesend (parse) als auch schreibend.</p> + +<p>JSON existiert als eine Zeichenkette (String) — das ist nützlich, um Daten über das Netzwerk zu übermitteln. Es muss in ein natives JavaScript Objekt umgewandelt werden, wenn du auf die Daten zugreifen willst. Das ist kein großes Ding — JavaScript stellt ein globales JSON-Objekt zur Verfügung, das Methoden zur Konvertierung zwischen den beiden zur Verfügung stellt.</p> + +<div class="note"> +<p><strong>Note</strong>: Eine Zeichenkette in ein natives Objekt umzuwandeln nennt man <em>parsing</em>, wohingegen die Umwandlung eines nativen Objekts in eine Zeichenkette, um es im Netzwerk zu übermitteln, <em>stringification</em> genannt wird.</p> +</div> + +<p>Ein JSON Objekt kann als einfache Textdatei mit der Endung <code>.json</code> gespeichert werden oder einen {{glossary("MIME type")}} als <code>application/json</code>.</p> + +<h3 id="JSON_Struktur">JSON Struktur</h3> + +<p>Wie bereits erwähnt, ist JSON ein textbasierendes Datenformat angelehnt an die JavaScript Object Syntax. Es können sowohl in JSON als auch in JavaScript Objekten die gleichen Datentypen verwendet werden — Strings, Zahlen, Arrays, Booleans und andere Objekttypen. Das erlaubt es dir, eine Datenhierarchie zu erstellen. Z.B.:</p> + +<pre class="brush: json">{ + "squadName": "Super hero squad", + "homeTown": "Metro City", + "formed": 2016, + "secretBase": "Super tower", + "active": true, + "members": [ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + }, + { + "name": "Eternal Flame", + "age": 1000000, + "secretIdentity": "Unknown", + "powers": [ + "Immortality", + "Heat Immunity", + "Inferno", + "Teleportation", + "Interdimensional travel" + ] + } + ] +}</pre> + +<p>Würden wir das Objekt in ein JavaScript Programm laden und die Variable <code>superHeroes</code> auslesen, könnten wir die Objektdaten mittels der gleichen <code>dot/bracket notation</code> abrufen, wie in diesem Artikel behandelt: <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Zum Beispiel:</p> + +<pre class="brush: js">superHeroes.homeTown +superHeroes['active']</pre> + +<p>Um Daten in tieferen hierarchischen Ebenen abrufen zu können, müssen die benötigten Eigenschaften und Array-indizes aneinandergereiht werden. Um beispielsweise die dritte <code>superpower</code> des zweiten <code>hero</code> in der <code>members</code> Liste abrufen zu können, würdest du sowas machen:</p> + +<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre> + +<ol> + <li>Zuerst haben wir den Variablennamen — <code>superHeroes</code>.</li> + <li>Darin wollen wir die <code>members</code> Eigenschaft abrufen, also benutzen wir<code>["members"]</code>.</li> + <li><code>members</code> beinhaltet ein Array mit Objekten. Wir wollen das zweite Objekt innerhalb des Arrays abrufen, also benutzen wir <code>[1]</code>.</li> + <li>Innerhalb des Objekts wollen wir die <code>powers</code> Eigenschaft abrufen, demnach benutzen wir <code>["powers"]</code>.</li> + <li>Die <code>powers</code> Eigenschaft ist ein Array, welches die gewählten <code>superpowers</code> der <code>heroe</code>s hält. Wir wollen die dritte <code>superpower</code>, also <code>[2]</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Wir haben euch das zuvor erwähnte JSON in einer Variable in unserem <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> Beispiel (siehe <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">source code</a>) zur Verfügung gestellt. Versuche es hochzuladen und die Daten in der Variable mittels der JavaScript Konsole deines Browser's abzurufen.</p> +</div> + +<h3 id="Arrays_als_JSON">Arrays als JSON</h3> + +<p>Eben haben wir angemerkt, dass JSON Text im Grunde wie ein JavaScript object aussieht, und das ist weitestgehend richtig. "Weitestgehend" da ein Array eben gültiges(valid) JSON darstellt, zum Beispiel:</p> + +<pre class="brush: json">[ + { + "name": "Molecule Man", + "age": 29, + "secretIdentity": "Dan Jukes", + "powers": [ + "Radiation resistance", + "Turning tiny", + "Radiation blast" + ] + }, + { + "name": "Madame Uppercut", + "age": 39, + "secretIdentity": "Jane Wilson", + "powers": [ + "Million tonne punch", + "Damage resistance", + "Superhuman reflexes" + ] + } +]</pre> + +<p>Dieses Arrays ist komplett gültges JSON. Die Array Elemente müssen lediglich beginnend mit des Array's Index - z.B. <code>[0]["powers"][0]</code> - abgerufen werden.</p> + +<h3 id="Anmerkungen"> Anmerkungen</h3> + +<ul> + <li>JSON ist ein reines Datenformat — es beinhaltet nur Eigenschaften, keine Methoden.</li> + <li>JSON benötigt <strong>immer</strong> doppelte Anführungszeichen - also <code>" "</code> - bei Strings und Eigenschaftsnamen. Einfache Anführungszeichen - also <code>' '</code> - sind nicht zulässig (invalid).</li> + <li>Ein einziges deplaziertes Kommata oder ähnliches lässt eine JSON Datei korrupieren und fehlschlagen. Du solltest alle Daten mit denen du arbeitest oder die du verarbeiten möchtest gründlich überprüfen (wobei computer-generiertes JSON bei korrekt funktionierenden JSON generatoren eher nicht fehleranfällig ist). Um dein JSON zu überprüfen, kannst du zum Beispiel eine Anwendung wie <a href="http://jsonlint.com/">JSONLint</a> benutzen.</li> + <li>JSON kann jeden Datentyp der zur Einbindung in JSON geeignet ist annehmen, nicht nur Arrays oder Objekte. So kann zum Beispiel ein einfacher <code>String </code>oder eine <code>number</code> ein gültiges JSON Objekt sein.</li> + <li>Im Gegensatz zu JavaScript Code in dem Objekt Eigenschaften Anführungszeichen nicht zwingend benötigen, dürfen in JSON nur <code>strings </code>in Anführungszeichen als Objekt Eigenschaften genutzt werden. </li> +</ul> + +<h2 id="Aktives_Lernen_Arbeiten_mithilfe_eines_JSON_Beispiels">Aktives Lernen: Arbeiten mithilfe eines JSON Beispiels</h2> + +<p>Lasst uns durch ein Beispiel durcharbeiten um zu veranschaulichen wie wir mit JSON Daten auf einer Webseite arbeiten können.</p> + +<h3 id="Los_Geht's">Los Geht's</h3> + +<p>Anfangs, mache lokale Kopien unserer <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> und <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a> Dateien. Letztere enthält ein paar einfache CSS Elemente um unsere Seite ein wenig zu stylen, während die Erste einen einfachen HTML <code>body </code>enthält:</p> + +<pre class="brush: html"><header> +</header> + +<section> +</section></pre> + +<p>Und ein {{HTMLElement("script")}} Element, welches den JavaScript Code halten wird, den wir etwas später erstellen werden. Momentan existieren nur zwei Zeilen, welche auf das {{HTMLElement("header")}} und {{HTMLElement("section")}} Element referenzieren und sie in Variablen speichern:</p> + +<pre class="brush: js">var header = document.querySelector('header'); +var section = document.querySelector('section');</pre> + +<p>Wir haben unsere JSON Daten auf unserem GitHub Account veröffentlicht: <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p> + +<p>Wir laden es in unsere Seite und benutzen geschickt die DOM Manipulation um es so darzustellen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="JSON_erhalten">JSON erhalten</h3> + +<p>Um JSON zu erhalten, werden wir unsere API, genannt {{domxref("XMLHttpRequest")}} (oft <strong>XHR </strong>genannt), benutzen. Es handelt sich um ein sehr nützliches JavaScript Objekt, das es uns erlaubt, Netzwerkabfragen auszuführen um Ressourcen eines Servers via JavaScript (e.g. Bilder, Text, JSON, sogar HTML snippets) zu erhalten. So können wir kleine Sektionen mit Inhalt aktualisieren ohne die komplette Seite neuzuladen. Das führt zu responsiveren Webseiten und klingt ziemlich spannend. Allerdings fällt es außerhalb des hier behandelten Themas um es ausführlicher zu erklären.</p> + +<ol> + <li>Zuerst werden wir die JSON URL die wir abrufen möchten in einer Variable speichern. Füge Folgendes zum Ende deines JavaScript Codes hinzu: + <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre> + </li> + <li>Um eine Abfrage zu erstellen, müssen wir eine neue Objekt-Abfrage-Instanz des <code>XMLHttpRequest</code> constructors mit dem Keyword <code>new </code>erstellen. Füge Folgenden Code hinzu: + <pre class="brush: js">var request = new XMLHttpRequest();</pre> + </li> + <li>Nun müssen wir eine neue Abfrage mit der <code><a href="/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code> Methode eröffnen. Füge Folgenden Code hinzu: + <pre class="brush: js">request.open('GET', requestURL);</pre> + + <p>Die Methode braucht mindestens zwei Parameter — wobei es weitere optionale Parameter gibt. Für dieses Beispiel werden wir uns jedoch nur den einfachen, zwingend erforderlichen Parametern widmen :</p> + + <ul> + <li>Die HTTP Methode die für die Netzwerkabfrage erforderlich ist. In diesem Fall reicht <code><a href="/en-US/docs/Web/HTTP/Methods/GET">GET</a> </code>aus, da wir ja nur simple Daten erhalten wollen .</li> + <li>Die Ziel-URL — Die JSON URL die wir zuvor in der <code>requestURL</code> Variable gespeichert haben.</li> + </ul> + </li> + <li>Füge als Nächstes folgende Zeilen hinzu — hier setzen wir den <code><a href="/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> auf JSON, sodass XHR weiß, dass der Server JSON zurückgeben und im Hintergrund in ein JavaScript Objekt konvertiert werden soll. Anschließend versenden wir die Abfrage mit der <code><a href="/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code> Methode: + <pre class="brush: js">request.responseType = 'json'; +request.send();</pre> + </li> + <li>Zu guter Letzt müssen wir auf die Antwort des Servers (response) warten und sie anschließend weiterverarbeiten. Füge folgenden Code hinter deinem bisherigen Code hinzu: + <pre class="brush: js">request.onload = function() { + var superHeroes = request.response; + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + </li> +</ol> + +<p>Hier speichern wir die Response zu unserer Abfrage (verfügbar in der <code><a href="/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code> Eigenschaft) in einer Variable namens: <code>superHeroes</code>; Diese Variable enthält nun das JavaScript Objekt basieren auf dem JSON! Nun geben wir das Objekt an zwei Funktionsaufrufe weiter— der erste wird den <<code>header></code> mit korrekte Daten füllen, während der zweite einen Informationssteckbrief eines jeden Helden im Team erstellt und es in die <code><section></code>einfügt.</p> + +<p>Wir packen den Code in einen Eventhandler der ausgeführt wird, sobald das <code>load </code>event auf das Request Objekt angestoßen wird (siehe <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) — das passiert, da das <code>load </code>Event angestoßen wird sobald die <code>response </code>erfolgreich zurückgegeben wurde. Das garantiert, dass <code>request.response</code> definitiv verfügbar sein wird, wenn wir damit etwas machen wollen.</p> + +<h3 id="Populating_the_header">Populating the header</h3> + +<p>Wir haben also die JSON Daten bekommen und in ein JavaScript Objekt konvertiert. Nun arbeiten wir damit und schreiben zwei Funktionen. Als Erstes, füge folgende Funktion unter deinen bisherigen Code:</p> + +<pre class="brush: js">function populateHeader(jsonObj) { + var myH1 = document.createElement('h1'); + myH1.textContent = jsonObj['squadName']; + header.appendChild(myH1); + + var myPara = document.createElement('p'); + myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed']; + header.appendChild(myPara); +}</pre> + +<p>Wir haben den Parameter <code>jsonObj </code>aufgerufen, um uns daran zu erinnern, dass das JavaScript Objekt seinen Ursprung in JSON hat. Wir erstellen zunächst ein {{HTMLElement("h1")}} element with <code><a href="/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, set its <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to equal the <code>squadName</code> property of the object, then append it to the header using <code><a href="/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. We then do a very similar operation with a paragraph: create it, set its text content and append it to the header. The only difference is that its text is set to a concatenated string containing both the <code>homeTown</code> and <code>formed</code> properties of the object.</p> + +<h3 id="Creating_the_hero_information_cards">Creating the hero information cards</h3> + +<p>Next, add the following function at the bottom of the code, which creates and displays the superhero cards:</p> + +<pre class="brush: js">function showHeroes(jsonObj) { + var heroes = jsonObj['members']; + + for (var i = 0; i < heroes.length; i++) { + var myArticle = document.createElement('article'); + var myH2 = document.createElement('h2'); + var myPara1 = document.createElement('p'); + var myPara2 = document.createElement('p'); + var myPara3 = document.createElement('p'); + var myList = document.createElement('ul'); + + myH2.textContent = heroes[i].name; + myPara1.textContent = 'Secret identity: ' + heroes[i].secretIdentity; + myPara2.textContent = 'Age: ' + heroes[i].age; + myPara3.textContent = 'Superpowers:'; + + var superPowers = heroes[i].powers; + for (var j = 0; j < superPowers.length; j++) { + var listItem = document.createElement('li'); + listItem.textContent = superPowers[j]; + myList.appendChild(listItem); + } + + myArticle.appendChild(myH2); + myArticle.appendChild(myPara1); + myArticle.appendChild(myPara2); + myArticle.appendChild(myPara3); + myArticle.appendChild(myList); + + section.appendChild(myArticle); + } +}</pre> + +<p>To start with, we store the <code>members</code> property of the JavaScript object in a new variable. This array contains multiple objects that contain the information for each hero.</p> + +<p>Next, we use a <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> to loop through each object in the array. For each one, we:</p> + +<ol> + <li>Create several new elements: an <code><article></code>, an <code><h2></code>, three <code><p></code>s, and a <code><ul></code>.</li> + <li>Set the <h2> to contain the current hero's <code>name</code>.</li> + <li>Fill the three paragraphs with their <code>secretIdentity</code>, <code>age</code>, and a line saying "Superpowers:" to introduce the information in the list.</li> + <li>Store the <code>powers</code> property in another new variable called <code>superPowers</code> — this contains an array that lists the current hero's superpowers.</li> + <li>Use another <code>for</code> loop to loop through the current hero's superpowers — for each one we create a <code><li></code> element, put the superpower inside it, then put the <code>listItem</code> inside the <code><ul></code> element (<code>myList</code>) using <code>appendChild()</code>.</li> + <li>The very last thing we do is to append the <code><h2></code>, <code><p></code>s, and <code><ul></code> inside the <code><article></code> (<code>myArticle</code>), then append the <code><article></code> inside the <code><section></code>. The order in which things are appended is important, as this is the order they will be displayed inside the HTML.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble getting the example to work, try referring to our <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> source code (see it <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">running live</a> also.)</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: If you are having trouble following the dot/bracket notation we are using to access the JavaScript object, it can help to have the <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> file open in another tab or your text editor, and refer to it as you look at our JavaScript. You should also refer back to our <a href="/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a> article for more information on dot and bracket notation.</p> +</div> + +<h2 id="Converting_between_objects_and_text">Converting between objects and text</h2> + +<p>The above example was simple in terms of accessing the JavaScript object, because we set the XHR request to convert the JSON response directly into a JavaScript object using:</p> + +<pre class="brush: js">request.responseType = 'json';</pre> + +<p>But sometimes we aren't so lucky — sometimes we'll receive a raw JSON string, and we'll need to convert it to an object ourselves. And when we want to send a JavaScript object across the network, we'll need to convert it to JSON (a string) before sending. Luckily, these two problems are so common in web development that a built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> object is available in browsers, which contains the following two methods:</p> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: Accepts a JSON string as a parameter, and returns the corresponding JavaScript object.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: Accepts an object as a parameter, and returns the equivalent JSON string form.</li> +</ul> + +<p>You can see the first one in action in our <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> example (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">source code</a>) — this does exactly the same thing as the example we built up earlier, except that we set the XHR to return the raw JSON text, then used <code>parse()</code> to convert it to an actual JavaScript object. The key snippet of code is here:</p> + +<pre class="brush: js">request.open('GET', requestURL); +request.responseType = 'text'; // now we're getting a string! +request.send(); + +request.onload = function() { + var superHeroesText = request.response; // get the string from the response + var superHeroes = JSON.parse(superHeroesText); // convert it to an object + populateHeader(superHeroes); + showHeroes(superHeroes); +}</pre> + +<p>As you might guess, <code>stringify()</code> works the opposite way. Try entering the following lines into your browser's JavaScript console one by one to see it in action:</p> + +<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" }; +myJSON +var myString = JSON.stringify(myJSON); +myString</pre> + +<p>Here we're creating a JavaScript object, then checking what it contains, then converting it to a JSON string using <code>stringify()</code> — saving the return value in a new variable — then checking it again.</p> + +<h2 id="Summary">Summary</h2> + +<p>In this article, we've given you a simple guide to using JSON in your programs, including how to create and parse JSON, and how to access data locked inside it. In the next article, we'll begin looking at object-oriented JavaScript.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li> + <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li> + <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li> +</ul> + +<p> </p> diff --git a/files/de/learn/javascript/objects/object-oriented_js/index.html b/files/de/learn/javascript/objects/object-oriented_js/index.html new file mode 100644 index 0000000000..b4229a8058 --- /dev/null +++ b/files/de/learn/javascript/objects/object-oriented_js/index.html @@ -0,0 +1,290 @@ +--- +title: Objektorientiertes JavaScript für Beginner +slug: Learn/JavaScript/Objects/Object-oriented_JS +tags: + - Anfänger + - Artikel + - Erstellen + - Erzeugen + - Instanzen + - JavaScript + - Konstruktor + - Lernen + - OOJS + - OOP + - Objekt + - Objektorientiert + - codescripting +translation_of: Learn/JavaScript/Objects/Object-oriented_JS +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Mit den nun bereits erlangten Grundlagen werden wir uns jetzt auf objektorientiertes JavaScript (OOJS) konzentrieren - dieser Artikel vermittelt Grundlagen der Theorie der objektorientierten Programmierung (OOP). Anschließend wird näher betrachtet, wie JavaScript Objektklassen über Konstruktor-Funktionen emuliert und wie Objekt-Instanzen erzeugt werden.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td> + <p>Grundlegende Computerkenntnisse, ein grundlegendes Verständnis von HTML und CSS, Vertrautheit mit den Grundlagen von JavaScript (siehe <a href="/de/docs/Learn/JavaScript/First_steps">erste Schritte</a> und <a href="/de/docs/Learn/JavaScript/Bausteine">Bausteine</a>) und OOJS-Grundlagen (siehe <a href="/de/docs/Learn/JavaScript/Objects/Basics">Einführung in Objekte</a>).</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Die grundlegende Theorie hinter der objektorientierten Programmierung und wie diese in JavaScript umgesetzt ist ("alles ist ein Objekt") zu verstehen, und wie man Konstruktoren und Objektinstanzen erstellt.</td> + </tr> + </tbody> +</table> + +<h2 id="Objektorientierte_Programmierung_-_Grundlagen">Objektorientierte Programmierung - Grundlagen</h2> + +<p>Um zu beginnen möchten wir Ihnen eine vereinfachende und umfangreiche Übersicht darüber geben, was objektorientierte Programmierung (OOP) ist. Wir sagen vereinfachend, weil OOP schnell sehr kompliziert werden kann und an dieser Stelle eine vollständige Einführung sehr wahrscheinlich mehr verwirren als helfen würde. Die Grundidee von OOP ist, dass wir Objekte verwenden, um Dinge aus der realen Welt zu modellieren, die wir in unseren Programmen abbilden wollen und/oder eine einfache Möglichkeit bieten möchten, auf Funktionen zuzugreifen, die sonst nur schwer oder gar nicht genutzt werden könnten.</p> + +<p>Objekte können in Beziehung stehende Daten und Code enthalten, die Informationen über die Sache darstellen, die Sie modellieren möchten, sowie Funktionalitäten bzw. Verhalten, die Sie erhalten bzw. bereitstellen möchten. Objektdaten (und oft auch Funktionen) können geordnet (das Fachwort dafür lautet "gekapselt") innerhalb eines Objektpakets gespeichert werden (dem ein bestimmter Name gegeben werden kann, auf den man sich beziehen kann, der manchmal auch "Namensraum" genannt wird), wodurch es leicht strukturiert und zugänglich wird. Objekte werden auch häufig als Datenspeicher verwendet, die einfach über das Netzwerk gesendet werden können.</p> + +<h3 id="Definieren_einer_Objektvorlage">Definieren einer Objektvorlage</h3> + +<p>Betrachten wir ein einfaches Programm, das Informationen über die Schüler und Lehrer einer Schule anzeigt. Hier betrachten wir die OOP-Theorie im Allgemeinen, nicht im Zusammenhang mit einer bestimmten Programmiersprache.</p> + +<p>Um damit zu beginnen, könnten wir zu unserem <code>person</code>-Objekt aus dem vorhergehenden Kapitel zurückkehren, in dem wir Informationen und Funktionalitäten einer Person definiert hatten. Es gibt viele Dinge, die man über eine Person wissen kann (ihre Adresse, Größe, Schuhgröße, DNA-Profil, Ausweisnummer, signifikante Persönlichkeitsmerkmale ...), aber in diesem Fall sind wir nur daran interessiert, ihren Namen, ihr Alter, ihr Geschlecht und ihre Interessen zu betrachten. Und wir wollen auch in der Lage sein, eine kurze Erläuterung über sie auf der Grundlage dieser Daten zu schreiben und sie dazu zu bringen, "Hallo" zu sagen. Dies wird als "Abstraktion" bezeichnet - ein einfaches Modell einer komplexeren Sache wird erstellt, das die wichtigsten Aspekte in einer Weise darstellt, die für die Zwecke unseres Programms leicht zu bearbeiten sind.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p> + +<h3 id="Erstellen_von_realen_Objekten">Erstellen von realen Objekten</h3> + +<p>Von unserer Klasse können wir Objektinstanzen erstellen - Objekte die Informationen und Funktionalitäten enthalten, die in der Klasse definiert worden. Von unserer Klasse <code>person</code> können wir nun einige tatsächliche Personen erzeugen:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15163/MDN-Graphics-instantiation-2-fixed.png" style="display: block; height: 702px; margin: 0px auto; width: 695px;"></p> + +<p>Wenn eine Objektinstanz aus einer Klasse erzeugt wurde, wird die Konstruktorfunktion der Klasse ausgeführt, um die Objektinstanz zu erzeugen. Dieser Vorgang der Erzeugung einer Objektinstanz aus einer Klasse wird als Instanziierung bezeichnet - die Objektinstanz wird von der Klasse aus instanziiert.</p> + +<h3 id="Spezialisierte_Klassen">Spezialisierte Klassen</h3> + +<p>In diesem Fall wollen wir keine allgemeinen Leute - wir wollen Lehrer und Schüler, die beide spezifischere Typen von Menschen sind. In OOP können wir neue Klassen erstellen, die auf anderen Klassen basieren - diese neuen Unterklassen können die Daten- und Funktionalitäten ihrer Elternklasse erben, so dass Sie die Funktionalitäten, die allen Objekttypen gemeinsam ist, wiederverwenden können, anstatt sie duplizieren zu müssen. Da wo sich Funktionalitäten zwischen den Klassen unterscheiden soll, können bei Bedarf spezialisierte Features direkt in den betroffenen Klassen entsprechend definieren.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>Das ist wirklich sehr nützlich - Lehrer und Schüler haben viele gemeinsame Merkmale wie Name, Geschlecht und Alter, so dass es praktisch ist, diese Merkmale nur einmal zu definieren. Sie können dasselbe Merkmal auch separat in verschiedenen Klassen definieren, da jede Definition dieses Merkmals in einem anderen Namensraum liegt. Die Begrüßung eines Schülers könnte z.B. die Form "Yo, ich bin <code>firstName</code>" haben (z.B. Yo, ich bin Sam), während ein Lehrer etwas formelleres verwenden könnte, wie z.B. "Hallo, mein Name ist <code>prefix</code> <code>lastName</code> und ich unterrichte <code>Subject</code>". (z.B. Hallo, ich heiße Mr. Griffiths und unterrichte Chemie).</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Das Fachwort für die Fähigkeit, mehrere Objekttypen mit der gleichen Funktionalität zu implementieren, nennt man Polymorphismus. Nur für den Fall, dass Sie sich das fragen.</p> +</div> + +<p>Sie können nun Objektinstanzen aus Ihren Unterklassen erzeugen. Beispiel:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p> + +<p>Im weiteren Verlauf dieses Kapitels werden wir uns damit beschäftigen, wie die OOP-Theorie in JavaScript in die Praxis umgesetzt werden kann.</p> + +<h2 id="Konstruktoren_und_Objektinstanzen">Konstruktoren und Objektinstanzen</h2> + +<p>JavaScript verwendet spezielle Funktionen, die "Konstruktor-Funktionen" genannt werden, um Objekte und deren Eigenschaften zu definieren und zu initialisieren. Sie sind nützlich, weil Sie oft auf Situationen stoßen werden, in denen Sie nicht wissen, wie viele Objekte Sie erstellen werden müssen. Konstruktoren bieten die Möglichkeit, so viele Objekte wie nötig auf einfache und effektive Weise zu erstellen, indem sie alle erforderlichen Daten und Funktionen an diese Objekte anhängen.</p> + +<p>Lassen Sie uns nun das Erstellen von Klassen über Konstruktoren und das Erstellen von Objektinstanzen aus ihnen heraus speziell in JavaScript untersuchen. Zuerst möchten wir Sie bitten, eine neue lokale Kopie der oojs.html-Datei zu erstellen, die wir im vorhergehenden Kapitel bereits benutzt haben.</p> + +<h3 id="Ein_einfaches_Beispiel">Ein einfaches Beispiel</h3> + +<ol> + <li>Fangen wir damit an, wie man eine Person mit einer normalen Funktion definieren könnte. Fügen Sie diese Funktion innerhalb des Skript-Elements der oojs.html hinzu: + <pre class="brush: js">function createNewPerson(name) { + var obj = {}; + obj.name = name; + obj.greeting = function() { + alert('Hi! I\'m ' + obj.name + '.'); + }; + return obj; +}</pre> + </li> + <li>Sie können nun eine neue Person erstellen, indem Sie diese Funktion aufrufen - bitte geben Sie die folgenden Zeilen in der JavaScript-Konsole Ihres Browsers ein: + <pre class="brush: js">var salva = createNewPerson('Salva'); +salva.name; +salva.greeting();</pre> + Das funktioniert zwar ganz gut, aber es ist ein bisschen umständlich. Wenn wir wissen, dass wir ein Objekt erstellen wollen, warum müssen wir dann explizit ein neues leeres Objekt erstellen und es zurückgeben? Glücklicherweise bietet uns JavaScript eine praktische Vereinfachung in Form von Konstruktorfunktionen - nutzen wir jetzt eine!</li> + <li>Ersetzen Sie die vorher implementierte Funktion durch folgende: + <pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + </li> +</ol> + +<p>Die Konstruktorfunktion ist die JavaScript-Version einer Klasse. Sie werden feststellen, dass sie alle Eigenschaften hat, die man in einer Funktion erwartet, obwohl sie weder etwas zurückgibt oder explizit ein Objekt erzeugt - sie definiert im Grunde nur Eigenschaften und Methoden. Sie werden sehen, dass dieses Schlüsselwort auch hier verwendet wird - es besagt im Grunde, dass immer dann, wenn eine dieser Objektinstanzen erzeugt wird, die Eigenschaft <code>name</code> des Objekts gleich dem Namenswert ist, der an den Konstruktoraufruf übergeben wird, und die Methode <code>greeting()</code> wird ebenfalls den Namenswert verwenden, der an den Konstruktoraufruf übergeben wird.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Der Name einer Konstruktorfunktion beginnt normalerweise mit einem Großbuchstaben - diese Konvention wird verwendet, um Konstruktorfunktionen im Code leichter erkennbar zu machen.</p> +</div> + +<p>Wie rufen wir also einen Konstruktor auf, um einige Objekte zu erstellen?</p> + +<ol> + <li>Fügen Sie die folgenden Zeilen unterhalb Ihres vorherigen Codezusatzes ein: + <pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + </li> + <li>Speichern Sie Ihren Code, laden Sie ihn im Browser neu und geben Sie die folgenden Zeilen in Ihre JS-Konsole ein: + <pre class="brush: js">person1.name +person1.greeting() +person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Cool! Sie werden nun sehen, dass wir zwei neue Objekte auf der Seite haben, die jeweils unter einem anderen Namespace gespeichert sind - wenn Sie auf ihre Eigenschaften und Methoden zugreifen, müssen Sie Aufrufe mit <code>person1</code> oder <code>person2</code> starten; die darin enthaltene Funktionalität ist sauber verpackt, damit sie nicht mit anderen Funktionen kollidiert. Sie haben jedoch die gleiche Namenseigenschaft und die gleiche Methode <code>greeting()</code> zur Verfügung. Beachten Sie, dass Sie Ihren eigenen Namenswert verwenden, der Ihnen bei der Erstellung zugewiesen wurde. Das ist ein Grund, warum es sehr wichtig ist, diesen zu verwenden, so dass Sie Ihre eigenen Werte verwenden werden, und nicht irgendeinen anderen Wert.</p> + +<p>Sehen wir uns die Konstruktoraufrufe noch einmal genauer an:</p> + +<pre class="brush: js">var person1 = new Person('Bob'); +var person2 = new Person('Sarah');</pre> + +<p>In jedem Fall wird das neue Schlüsselwort verwendet, um dem Browser mitzuteilen, dass wir eine neue Objektinstanz erstellen wollen, gefolgt vom Funktionsnamen mit den erforderlichen Parametern in Klammern. Das Ergebnis wird in einer Variablen gespeichert - sehr ähnlich wie bei dem Aufruf einer Standardfunktion. Jede Instanz wird entsprechend dieser Definition erzeugt:</p> + +<pre class="brush: js">function Person(name) { + this.name = name; + this.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); + }; +}</pre> + +<p>Nach dem Anlegen der neuen Objekte enthalten die Variablen <code>person1</code> und <code>person2</code> die folgenden Objekte:</p> + +<pre class="brush: js">{ + name: 'Bob', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +} + +{ + name: 'Sarah', + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +}</pre> + +<p>Beachten Sie, dass wir beim Aufruf unserer Konstruktor-Funktion jedes Mal <code>greeting()</code> definieren, was nicht ideal ist. Um dies zu vermeiden, können wir stattdessen Funktionen auf dem Prototypen definieren, die wir uns später genauer ansehen werden.</p> + +<h3 id="Erstellen_unseres_finalen_Konstruktors">Erstellen unseres finalen Konstruktors</h3> + +<p>Das Beispiel, das wir oben betrachtet haben, war nur ein einfaches Beispiel, um den Einstieg zu erleichtern. Lassen Sie uns nun weitermachen und unsere finale Konstruktor-Funktion <code>Person()</code> erstellen.</p> + +<ol> + <li>Entfernen Sie den bisher eingefügten Code und fügen Sie nachfolgenden Konstruktor als Ersatz hinzu - dies ist im Prinzip genau dasselbe, wie das einfache Beispiel, nur etwas komplexer: + <pre class="brush: js">function Person(first, last, age, gender, interests) { + this.name = { + first : first, + last : last + }; + this.age = age; + this.gender = gender; + this.interests = interests; + this.bio = function() { + alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.'); + }; + this.greeting = function() { + alert('Hi! I\'m ' + this.name.first + '.'); + }; +}</pre> + </li> + <li>Fügen Sie nun unter dem Code von oben folgende Zeile ein, um eine Objektinstanz zu erzeugen: + <pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + </li> +</ol> + +<p>Sie werden nun sehen, dass Sie auf die Eigenschaften und Methoden zugreifen können, genau wie wir es zuvor getan haben - probieren Sie das in Ihrer JS-Konsole aus:</p> + +<pre class="brush: js">person1['age'] +person1.interests[1] +person1.bio() +// etc.</pre> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn Sie Probleme haben, dies zum Laufen zu bringen, vergleichen Sie Ihren Code mit unserer Version - siehe <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">hier</a> können Sie auch sehen, wie es live läuft).</p> +</div> + +<h3 id="Weitere_Übungen">Weitere Übungen</h3> + +<p>Versuchen Sie zunächst, ein paar weitere eigene Objekte hinzuzufügen, und versuchen Sie, die Eigenschaften bzw. Funktionen der daraus erzeugten Objektinstanzen zu nutzen bzw. zu verändern.</p> + +<p>Außerdem gibt es einige Probleme mit unserer <code>bio()</code>-Methode - die Ausgabe enthält immer das Pronomen "He", egal ob Ihre <code>Person</code> weiblich ist oder einem anderen Geschlecht angehört. Und die <code>bio()</code>-Methode wird nur zwei Interessen enthalten, auch wenn mehr im Interessen-Array aufgelistet sind. Finden Sie heraus, wie man das in der Klassendefinition (Konstruktor) beheben kann? Sie können jeden beliebigen Code in einen Konstruktor einfügen (Sie werden wahrscheinlich ein paar Bedingungen und eine Schleife benötigen). Überlegen Sie sich, wie die Sätze je nach Geschlecht und je nachdem, ob die Anzahl der aufgelisteten Interessen 1, 2 oder mehr als 2 beträgt, unterschiedlich strukturiert werden sollten.</p> + +<div class="note"> +<p><strong>Hinweis:</strong> Wenn Sie nicht weiterkommen, haben wir eine Antwort bzw. Lösung in unserem <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">GitHub-Repo</a> bereitgestellt (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">Sehen Sie es sich hier an</a>) - versuchen Sie bitte aber erst einmal, die Lösung selbst zu schreiben!</p> +</div> + +<h2 id="Andere_Möglichkeiten_Objektinstanzen_zu_erzeugen">Andere Möglichkeiten, Objektinstanzen zu erzeugen</h2> + +<p>Bisher haben wir zwei verschiedene Wege gesehen, um eine Objektinstanz zu erzeugen - die Deklaration eines Objektes als Literal und die Verwendung einer Konstruktorfunktion (siehe oben).</p> + +<p>Diese machen Sinn, aber es gibt auch andere Wege - wir möchten Sie mit diesen vertraut machen, falls Sie auf Ihren Reisen im Web auf sie stoßen sollten.</p> + +<h3 id="Der_Object-Konstruktor">Der Object()-Konstruktor</h3> + +<p>Zuerst können Sie den <code>Object()</code> Konstruktor verwenden, um ein neues Objekt zu erstellen. Ja, sogar generische Objekte haben einen Konstruktor, der ein leeres Objekt erzeugt.</p> + +<ol> + <li>Geben Sie dies in die JavaScript-Konsole Ihres Browsers ein: + <pre class="brush: js">var person1 = new Object();</pre> + </li> + <li>Diese speichert ein leeres Objekt in der Variable <code>person1</code>. Sie können dann diesem Objekt Eigenschaften und Methoden mit Punkt- oder Klammer-Notation hinzufügen, wie gewünscht. Versuchen Sie diese Beispiele in Ihrer Konsole: + <pre class="brush: js">person1.name = 'Chris'; +person1['age'] = 38; +person1.greeting = function() { + alert('Hi! I\'m ' + this.name + '.'); +};</pre> + </li> + <li>Sie können auch ein Objektliteral als Parameter an den <code>Object()</code> Konstruktor übergeben, um es mit Eigenschaften/Methoden vorzufüllen. Versuchen Sie folgendes in Ihrer JS-Konsole: + <pre class="brush: js">var person1 = new Object({ + name: 'Chris', + age: 38, + greeting: function() { + alert('Hi! I\'m ' + this.name + '.'); + } +});</pre> + </li> +</ol> + +<h3 id="Verwendung_der_Methode_create">Verwendung der Methode create()</h3> + +<p>Konstruktoren können Ihnen helfen, Ihren Code zu ordnen - Sie können Konstruktoren an einer Stelle erstellen und dann bei Bedarf Instanzen davon erstellen - und es ist immer nachvollziehbar, woher sie kommen.</p> + +<p>Einige Leute ziehen es jedoch vor, Objektinstanzen zu erstellen, ohne vorher Konstruktoren zu erstellen, insbesondere wenn sie nur wenige Instanzen eines Objekts erstellen müssen. JavaScript hat eine eingebaute Methode namens <code>create()</code>, die es Ihnen einfach ermöglicht, dies zu tun. Mit ihr können Sie ein neues Objekt auf Basis eines beliebigen vorhandenen Objekts erstellen.</p> + +<ol> + <li>Wenn Ihre fertige Übung aus den vorherigen Abschnitten im Browser geladen ist, versuchen Sie folgendes in Ihrer JavaScript-Konsole: + <pre class="brush: js">var person2 = Object.create(person1);</pre> + </li> + <li>Nun geben Sie bitte folgendes in die JavaScript-Konsole ein: + <pre class="brush: js">person2.name +person2.greeting()</pre> + </li> +</ol> + +<p>Sie werden sehen, dass <code>person2</code> auf der Basis von <code>person1</code> erstellt wurde - es hat die gleichen Eigenschaften und die gleiche Methode, die ihm zur Verfügung stehen.</p> + +<p>Eine Einschränkung von <code>create()</code> ist, dass der IE8 es nicht unterstützt. Daher können Konstruktoren effektiver sein, wenn Sie ältere Browser unterstützen wollen.</p> + +<p>Wir werden die Auswirkungen von <code>create()</code> später noch genauer untersuchen.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p>Dieser Artikel hat eine vereinfachte Sicht der objektorientierten Theorie geliefert - das ist noch lange nicht die ganze Geschichte, aber er gibt Ihnen eine Vorstellung davon, womit wir es hier zu tun haben. Darüber hinaus haben wir damit begonnen, verschiedene Möglichkeiten der Erzeugung von Objektinstanzen zu betrachten.</p> + +<p>Im nächsten Artikel werden wir uns mit JavaScript-Objekt-Prototypen beschäftigen.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li> +</ul> diff --git a/files/de/learn/javascript/objects/object_prototypes/index.html b/files/de/learn/javascript/objects/object_prototypes/index.html new file mode 100644 index 0000000000..010c5986e9 --- /dev/null +++ b/files/de/learn/javascript/objects/object_prototypes/index.html @@ -0,0 +1,288 @@ +--- +title: Object prototypes +slug: Learn/JavaScript/Objects/Object_prototypes +tags: + - Anfänger + - Beitrag + - 'I10n:priority' + - JavaScript + - Konstruktor + - Lernen + - OOJS + - OOP + - Objekt + - Prototypen + - Prototypketten + - codescripting + - create() +translation_of: Learn/JavaScript/Objects/Object_prototypes +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div> + +<p class="summary">Prototypen dienen als Mechanismus, durch den JavaScript-Objekte Eigenschaften voneinander erben. In diesem Artikel erklären wir, wie Prototypketten funktionieren und betrachten, wie die Prototypeneigenschaft verwendet werden kann, um Methoden zu bestehenden Konstruktoren hinzuzufügen.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Voraussetzungen:</th> + <td> + <p>Verständnis der Funktionen in JavaScript, sowie Vertrautheit mit den Grundlagen von JavaScript (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/First_steps">erste Schritte</a> und <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/Bausteine">Bausteine</a>) und OOJS-Grundlagen (siehe <a href="https://wiki.developer.mozilla.org/de/docs/Learn/JavaScript/Objects/Basics">Einführung in Objekte</a>).</p> + </td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>JavaScript-Objekt-Prototypen zu verstehen, wie Prototypenketten funktionieren und wie man neue Methoden auf die Prototyp-Eigenschaft hinzufügt.</td> + </tr> + </tbody> +</table> + +<h2 id="Eine_Prototyp-basierte_Sprache">Eine Prototyp-basierte Sprache?</h2> + +<p>JavaScript wird oft als eine <strong>prototypische bzw. Prototyp-basierte Sprache</strong> beschrieben - um Vererbung zu ermöglichen, können Objekte dazu ein <strong>Prototyp-Objekt </strong>haben, das als Vorlageobjekt fungiert, von dem es Methoden und Eigenschaften erbt. Das Prototyp-Objekt eines Objekts kann auch ein Prototyp-Objekt haben, von dem es Methoden und Eigenschaften erbt und so weiter. Dies wird oft als eine <strong>Prototypenkette</strong> bezeichnet und erklärt, warum verschiedene Objekte Eigenschaften und Methoden haben, die auf anderen Objekten definiert sind, die ihnen dadurch zur Verfügung stehen.</p> + +<p>Genau gesagt basieren die Eigenschaften und Methoden auf den Prototyp-Eigenschaften der Konstruktorfunktionen der Objekte, nicht auf den Objektinstanzen selbst.</p> + +<p>In JavaScript wird eine Verbindung zwischen der Objektinstanz und ihrem Prototyp hergestellt (seine <code>__proto__</code>-Eigenschaft, die von der Prototyp-Eigenschaft des Konstruktor abgeleitet ist). Die Eigenschaften und Methoden stammen aus der Kette der Prototypen (aufwärts der Prototypenkette folgend).</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Es ist wichtig zu wissen, dass es einen Unterschied gibt zwischen dem Prototypen eines Objekts (das über <code>Object.getPrototypeOf(obj)</code> oder über die veraltete <code>__proto__</code>-Eigenschaft zur Verfügung gestellt wird) und der Prototyp-Eigenschaft von Konstruktorfunktionen. Erstere ist die Eigenschaft auf jeder Instanz, letztere ist die Eigenschaft auf dem Konstruktor. Das heißt, <code>Object.getPrototypeOf(new Foobar())</code> bezieht sich auf dasselbe Objekt wie <code>Foobar.prototype</code>.</p> +</div> + +<p>Schauen wir uns ein Beispiel an, um dies etwas deutlicher zu machen.</p> + +<h2 id="Verstehen_von_Prototyp-Objekten">Verstehen von Prototyp-Objekten</h2> + +<p>An dieser Stelle gehen wir zu dem Beispiel zurück, an dem wir unsere Konstruktor-Funktion <code>Person()</code> fertig gestellt haben - bitte laden Sie das Beispiel in Ihrem Browser. Sie können dazu gerne auch unsere Beispieldatei <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> nutzen (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">hier finden Sie den Quellcode</a>), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht.</p> + +<p>In diesem Beispiel haben wir eine Konstruktorfunktion wie nachfolgend gezeigt definiert:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // property and method definitions + this.name = { + 'first': first, + 'last' : last + }; + this.age = age; + this.gender = gender; + //...see link in summary above for full definition +}</pre> + +<p>Wir haben dann davon eine Objektinstanz erzeugt, die wie folgt aussieht:</p> + +<pre class="brush: js">let person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre> + +<p>Wenn Sie in Ihre JavaScript-Konsole <code>person1.</code> eingeben, sollten Sie sehen können, das der Browser versucht, die Ausgabe der in dem Objekt verfügbaren Eigenschaften automatisch zu vervollständigen.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p> + +<p>In dieser Liste können Sie die Eigenschaften sehen, die in der Konstruktor-Funktion <code>person()</code> definiert sind - <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code> und <code>greeting</code>. Sie werden jedoch auch einige andere Eigenschaften sehen können - <code>toString</code>, <code>valueOf</code> etc. - diese sind im Prototyp-Objekt der Konstruktor-Funktion <code>person()</code> definiert.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p> + +<p>Was passiert eigentlich, wenn man eine Methode auf <code>person1</code> ausführt, welche aktuell nur im Objekt definiert ist? Zum Beispiel:</p> + +<pre class="brush: js">person1.valueOf()</pre> + +<p>Die Methode <code>Object.valueOf()</code> wird von <code>person1</code> geerbt, weil deren Konstruktor-Funktion <code>person()</code> ist und der Prototyp von <code>person()</code> gleich <code>Object()</code> ist. <code>valueOf()</code> gibt den Wert des Objekts zurück, dass die Methode aufruft - probieren Sie es aus und sehen selber! Was in diesem Fall passiert, sieht wie folgt aus:</p> + +<ul> + <li>Der Browser prüft zunächst, ob für das <code>person1</code>-Objekt eine <code>valueOf()</code>-Methode verfügbar ist, wie sie in seinem Konstruktor <code>Person()</code> definiert ist.</li> + <li>Wenn das nicht der Fall ist, prüft der Browser im Prototyp-Objekt des Konstruktors von <code>Person()</code>, nämlich <code>Object()</code>, ob in diesem eine Methode <code>valueOf()</code> verfügbar ist. Ist dem so, wird die Methode aufgerufen und alles läuft!</li> +</ul> + +<div class="note"> +<p><strong>Hinweis</strong>: Wir möchten nochmals darauf hinweisen, dass die Methoden und Eigenschaften in der Prototypenkette nicht von einem Objekt auf ein anderes kopiert werden, sondern dass der Zugriff auf sie erfolgt, indem man in der Kette wie oben beschrieben nach oben geht.</p> +</div> + +<div class="note"> +<p><strong>Hinweis</strong>: Es gibt keine offizielle Möglichkeit, direkt auf das Prototyp-Objekt eines Objekts zuzugreifen - die "Links" zwischen den Elementen in der Kette sind in einer internen Eigenschaft definiert, die in der Spezifikation für die JavaScript-Sprache als [[prototype]] bezeichnet wird (siehe {{glossary("ECMAScript")}}). Die meisten modernen Browser verfügen jedoch über eine Eigenschaft namens <code>__proto__</code> (mit 2 Unterstrichen auf jeder Seite), die das Prototyp-Objekt des Konstruktors des betroffenen Objekts enthält. Geben Sie zum Beispiel <code>person1.__proto__</code> und <code>person1.__proto__.__proto__</code> in der JavaScript-Konsole ein, um zu sehen, wie die Kette im Code aussieht!</p> + +<p>Seit ECMAScript 2015 können Sie auf das Prototyp-Objekt eines Objekts indirekt über <code>Object.getPrototypeOf(obj)</code> zugreifen.</p> +</div> + +<h2 id="Die_Prototyp-Eigenschaft_Wo_vererbte_Mitglieder_definiert_sind">Die Prototyp-Eigenschaft: Wo vererbte Mitglieder definiert sind</h2> + +<p>Wo sind also die vererbten Eigenschaften und Methoden definiert? Wenn Sie sich die <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object">Referenzseite des Konstruktors object</a> ansehen, sehen Sie auf der linken Seite eine große Anzahl von Eigenschaften und Methoden aufgelistet - viel mehr als die Anzahl der geerbten Eigenschaften, die wir auf dem <code>person1</code>-Objekt gesehen haben. Einige werden vererbt, andere nicht - warum ist das so?</p> + +<p>Wie oben erwähnt sind die geerbten diejenigen, die auf der Prototyp-Eigenschaft (man könnte es einen Unter-Namensraum nennen) definiert sind - damit sind die Eigenschaften gemeint, die mit <code>Object.prototype</code>. beginnen und nicht die, die nur mit Object beginnen. Der Wert der Prototyp-Eigenschaft ist ein Objekt, das im Grunde ein Bereich zum Speichern von Eigenschaften und Methoden ist, die wir an Objekte weiter unten in der Prototyp-Kette vererben wollen.</p> + +<p>Somit stehen <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/toString">Object.prototype.toString()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a> usw. für alle Objekttypen zur Verfügung, die von <code>Object.prototype</code> erben, einschließlich neuer Objektinstanzen, die vom <code>Person()</code>-Konstruktor erstellt werden.</p> + +<p><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a> und andere Eigenschaften, die nicht innerhalb des Prototyp-Bereichs definiert sind, werden nicht von Objektinstanzen oder Objekttypen geerbt, die von <code>Object.prototype</code> erben. Sie sind Methoden/Eigenschaften, die nur auf dem <code>Object()</code>-Konstruktor selbst verfügbar sind.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Das mag ein wenig befremdlich wirken - wie können Sie eine Methode in einem Konstruktor definieren, wenn er selber eine Funktion ist? Eine Funktion ist ebenfalls eine Art Objekt - siehe auch auf der <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Function">Referenzseite des function()-Konstruktors</a>, damit Sie es besser nachvollziehen können.</p> +</div> + +<ol> + <li>Sie können die vorhandenen Prototyp-Eigenschaften selbst überprüfen - gehen Sie zurück zu unserem vorherigen Beispiel und geben Sie folgendes in die JavaScript-Konsole ein: + <pre class="brush: js">Person.prototype</pre> + </li> + <li>Die Ausgabe wird Ihnen nicht sehr viel zeigen, da wir nichts im Prototyp unseres <code>Custom</code>-Konstruktors definiert haben! Standardmäßig startet der Prototyp eines Konstruktors immer leer. Versuchen Sie jetzt Folgendes: + <pre class="brush: js">Object.prototype</pre> + </li> +</ol> + +<p>Sie werden eine große Anzahl von Methoden sehen, die in den Prototyp-Eigenschaften des Objekts (<code>Object</code>) definiert sind, die dann auf Objekten verfügbar sind, die von diesem Objekt (<code>Object)</code> erben, wie bereits gezeigt.</p> + +<p>Sie werden weitere Beispiele für die Vererbung von Prototypenketten sehen, die in JavaScript verfügbar sind - versuchen Sie zum Beispiel, nach den Methoden und Eigenschaften zu suchen, die auf dem Prototyp der globalen Objekte <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String">String</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a> und <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a> definiert sind. Diese haben alle eine Anzahl von Elementen, die auf ihrem Prototyp definiert sind, wie z.B. bei der Erstellung einer Zeichenfolge:</p> + +<pre class="brush: js">let myString = 'This is my string.';</pre> + +<p>myString hat per se eine Reihe nützlicher Methoden zur Verfügung, wie <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a>, <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> usw.</p> + +<div class="note"> +<p><strong>Hinweis</strong>: Es lohnt sich unseren <a href="/de/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">ausführlicheren Leitfaden zur Verwendung von Prototypen in JavaScript</a> zu lesen, sobald Sie diesen Abschnitt verinnerlicht haben und mehr wissen möchten. Dieser Abschnitt ist absichtlich stark vereinfacht, um diese Konzepte bei der ersten Begegnung für Sie etwas leichter verständlich zu machen.</p> +</div> + +<div class="warning"> +<p><strong>Wichtig:</strong> Die Prototyp-Eigenschaft ist einer der Teile von JavaScript, die stark verwirrend benannt worden sind - man könnte meinen, dass <code>this</code> auf das Prototyp-Objekt des aktuellen Objekts zeigt, aber das tut sie nicht. <code>prototype</code> ist ein internes Objekt, auf das mit <code>__proto__</code> zugegriffen werden kann, erinnern Sie sich?</p> +</div> + +<h2 id="Zurück_zu_create">Zurück zu create()</h2> + +<p>Etwas früher im Beitrag haben wir gezeigt, wie die Methode <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a> verwendet werden kann, um eine neue Objektinstanz zu erzeugen.</p> + +<ol> + <li>Geben Sie folgendes in der JavaScript-Konsole Ihres vorherigen Beispiels ein: + <pre class="brush: js">let person2 = Object.create(person1);</pre> + </li> + <li>Was <code>create()</code> tatsächlich tut, ist lediglich ein neues Objekt aus einem spezifizierten Prototyp-Objekt zu erstellen. Hier wird <code>person2</code> erstellt indem <code>person1</code> als Prototyp Objekt verwendet wird. Man kann das überprüfen indem man das folgende in der Konsole eingibt: + <pre class="brush: js">person2.__proto__</pre> + </li> +</ol> + +<p>Dies wird das <code>person1</code>-Objekt zurückgeben.</p> + +<h2 id="Die_Konstruktor-Eigenschaft">Die Konstruktor-Eigenschaft</h2> + +<p>Jede Konstruktorfunktion hat eine Prototyp-Eigenschaft, deren Wert ein Objekt ist, das eine <a href="/de/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a>-Eigenschaft enthält. Diese Konstruktoreigenschaft zeigt auf die ursprüngliche Konstruktorfunktion. Wie Sie im nächsten Abschnitt sehen werden, werden Eigenschaften, die auf der <code>Person.prototype</code>-Eigenschaft (oder im Allgemeinen auf der Prototyp-Eigenschaft einer Konstruktorfunktion, die ein Objekt ist, wie im obigen Abschnitt erwähnt) definiert sind, für alle Instanzobjekte verfügbar, die mit dem <code>Person()</code>-Konstruktor erstellt werden. Daher ist die Konstruktor-Eigenschaft auch für die beiden Objekte <code>Person1</code> und <code>Person2</code> verfügbar.</p> + +<ol> + <li>Probieren Sie zum Beispiel diese Befehle in der Konsole aus: + <pre class="brush: js">person1.constructor +person2.constructor</pre> + + <p>Diese sollten beide den <code>Person()</code>-Konstruktor zurückgeben, da dieser die ursprüngliche Definition dieser Instanzen enthält.</p> + + <p>Ein cleverer Trick ist es, dass Sie am Ende der <code>constructor</code>-Eigenschaft Klammern setzen können (die alle erforderlichen Parameter enthalten), um eine weitere Objektinstanz aus diesem Konstruktor zu erzeugen. Der Konstruktor ist schließlich eine Funktion und kann daher mit Hilfe von Klammern aufgerufen werden; Sie müssen nur das neue Schlüsselwort einfügen, um anzugeben, dass Sie die Funktion als Konstruktor verwenden wollen.</p> + </li> + <li>Geben Sie folgendes in die Konsole ein: + <pre class="brush: js">let person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre> + </li> + <li>Nun können Sie zum Beispiel auf die Funktionen Ihres neuen Objekts zuzugreifen: + <pre class="brush: js">person3.name.first +person3.age +person3.bio()</pre> + </li> +</ol> + +<p>Das funktioniert gut. Sie werden es nicht oft benutzen müssen, aber es kann wirklich nützlich sein, wenn Sie eine neue Instanz erzeugen wollen und aus irgendeinem Grund keine Referenz auf den Originalkonstruktor leicht verfügbar ist.</p> + +<p>Die <code>constructor</code>-Eigenschaft hat andere Verwendungsmöglichkeiten. Wenn Sie z.B. eine Objektinstanz haben und den Namen des Konstruktors zurückgeben wollen, von dem das Objekt eine Instanz ist, können Sie Folgendes verwenden:</p> + +<pre class="brush: js">instanceName.constructor.name</pre> + +<p>Geben Sie zum Beispiel folgendes ein:</p> + +<pre class="brush: js">person1.constructor.name +</pre> + +<div class="note"> +<p>Hinweis: Der Wert von <code>constructor.name</code> kann sich ändern (aufgrund von prototypischer Vererbung, Bindung, Präprozessoren, Transpilern, etc.), so dass Sie für komplexere Beispiele stattdessen den <code>instanceof</code>-Operator verwenden sollten.</p> +</div> + +<ol> +</ol> + +<h2 id="Prototypen_modifizieren">Prototypen modifizieren</h2> + +<p>Schauen wir uns ein Beispiel für die Veränderung der Prototyp-Eigenschaft einer Konstruktor-Funktion näher an - Methoden, die dem Prototyp hinzugefügt werden, sind dann auf allen Objektinstanzen verfügbar, die aus dem Konstruktor heraus erzeugt werden. An diesem Punkt werden wir schließlich etwas zum Prototyp unseres Konstruktors <code>Person()</code> hinzufügen.</p> + +<ol> + <li>Gehen Sie zurück zu unserem Beispiel <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> und erstellen Sie eine lokale Kopie des <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">Quellcodes</a>. Fügen Sie unter dem vorhandenen JavaScript den folgenden Code hinzu, der eine neue Methode zur Prototyp-Eigenschaft des Konstruktors hinzufügt: + + <pre class="brush: js">Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + </li> + <li>Speichern Sie bitte den Code, laden den Browser neu und geben bitte folgendes in die Konsole ein: + <pre class="brush: js">person1.farewell();</pre> + </li> +</ol> + +<p>Sie sollten eine Warnmeldung erhalten, die den Namen der Person, wie er im Konstruktor definiert ist, anzeigt. Das ist wirklich nützlich, aber noch nützlicher ist, dass die gesamte Vererbungskette dynamisch aktualisiert wurde, wodurch diese neue Methode automatisch auf allen vom Konstruktor abgeleiteten Objektinstanzen verfügbar ist.</p> + +<p>Denken Sie einen Moment in Ruhe darüber nach. In unserem Code definieren wir den Konstruktor, dann erzeugen wir ein Instanzobjekt aus dem Konstruktor, dann fügen wir dem Prototypen des Konstruktors eine neue Methode hinzu:</p> + +<pre class="brush: js">function Person(first, last, age, gender, interests) { + + // Definition der Eigenschaften und methoden + +} + +let person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'kickboxing']); + +Person.prototype.farewell = function() { + alert(this.name.first + ' has left the building. Bye for now!'); +};</pre> + +<p>Aber die Methode <code>farewell()</code> ist immer noch auf der <code>person1</code>-Objektinstanz verfügbar - ihre Mitglieder wurden automatisch aktualisiert, um die neu definierte Methode <code>farewell()</code> aufzunehmen.</p> + +<div class="note"> +<p>Hinweis: Sie können dazu gerne auch unsere Beispieldatei <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> nutzen (<a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">hier finden Sie den Quellcode</a>), falls Ihnen der Quellcode aus dem vorangegangenen Artikel nicht mehr zur Verfügung steht bzw. Ihr Quellcode nicht funktioniert.</p> +</div> + +<p>Sie werden nur selten Eigenschaften sehen, die auf der Prototyp-Eigenschaft definiert sind, weil sie nicht sehr flexibel sind, wenn sie so definiert worden. Sie könnten zum Beispiel eine solche Eigenschaft hinzufügen:</p> + +<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre> + +<p>Das ist nicht sehr flexibel, da die Person vielleicht nicht so genannt wird. Es wäre viel besser, den vollen Namen aus <code>name.first</code> und <code>name.last</code> zu bilden:</p> + +<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre> + +<p>Dies funktioniert jedoch nicht, da sich <code>this</code> in diesem Fall auf den globalen Bereich bezieht, nicht auf den Funktionsbereich. Der Aufruf dieser Eigenschaft würde <code>undefined</code> zurückgeben. Dies funktionierte gut auf die Methode, die wir früher im Prototyp definiert haben, weil sie innerhalb eines Funktionsbereichs sitzt, der erfolgreich in den Objektinstanzbereich übertragen wird. Sie können also konstante Eigenschaften auf dem Prototyp definieren (d.h. solche, die sich nie ändern müssen), aber im allgemeinen funktioniert es besser, Eigenschaften innerhalb des Konstruktors zu definieren.</p> + +<p>In der Tat ist es üblich, für weitere Objektdefinitionen die Eigenschaften innerhalb des Konstruktors und die Methoden auf dem Prototyp zu definieren. Dies macht den Code leichter lesbar, da der Konstruktor nur die Eigenschaftsdefinitionen enthält und die Methoden in separate Blöcke aufgeteilt sind. Zum Beispiel:</p> + +<pre class="brush: js">// Konstruktor mit der Definition der Eigenschaften + +function Test(a, b, c, d) { + // property definitions +} + +// eine erste Methode wird definiert + +Test.prototype.x = function() { ... }; + +// eine zweite Methode wird definiert + +Test.prototype.y = function() { ... }; + +// etc.</pre> + +<p>Dieses Muster kann in Aktion im Beispiel der <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">Schulplan-App von Piotr Zalewa</a> gesehen werden.</p> + +<h2 id="Zusammenfassung">Zusammenfassung</h2> + +<p><br> + Dieser Beitrag hat Objekt-Prototypen in JavaScript behandelt, einschließlich wie Prototyp-Objektketten es ermöglichen, das Objekte voneinander Funktionen (ver)erben können, sowie Prototyp-Eigenschaften und wie diese verwendet werden können, um neue Methoden zu Konstruktoren hinzuzufügen. Darüber hinaus andere mit den Themen verwandte Themen.</p> + +<p>Im nächsten Artikel sehen wir uns an, wie Sie die Vererbung von Funktionalität zwischen zwei Ihrer eigenen benutzerdefinierten Objekte implementieren können.</p> + +<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p> + +<h2 id="In_diesem_Modul">In diesem Modul</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Objekt Grundlagen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Objektorientiertes JavaScript für Anfänger</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Objekt Prototypen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Vererbung in JavaScript</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Mit JSON Daten arbeiten</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Objekterstellungsübungen</a></li> + <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Funktionalität zu unserer Hüpfball Demo hinzufügen</a></li> +</ul> diff --git a/files/de/learn/mitarbeiten/index.html b/files/de/learn/mitarbeiten/index.html new file mode 100644 index 0000000000..02405b9280 --- /dev/null +++ b/files/de/learn/mitarbeiten/index.html @@ -0,0 +1,82 @@ +--- +title: Zum MDN Lern-Bereich beitragen +slug: Learn/Mitarbeiten +tags: + - Anfänger + - Anleitung + - Dokumentation + - Lernen + - MDN Meta + - Mitmachen +translation_of: Learn/How_to_contribute +--- +<p>{{LearnSidebar}}</p> + +<p>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!</p> + +<p><span class="seoSummary">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 <a href="#Anfänger">Anfänger</a>, <a href="#Webentwickler">Webentwickler</a> oder <a href="/en-US/Learn/How_to_contribute#I'm_a_teacher">Lehrer</a> - je nachdem, wie viel Zeit und Erfahrung Du hast.</span></p> + +<div class="note"> +<p><strong>Hinweis:</strong> Falls Du bereits im MDN mitwirkst prüfe am besten noch einmal die <a href="/en-US/docs/MDN/Doc_status/Learn">documentation status page</a>. Dort kannst Du sehen was bereits gemacht wurde und was als nächstes in Angriff genommen werden sollte.</p> +</div> + +<div class="note"> +<p><strong>Hinweis:</strong> Mitwirkende verwenden ein<a href="https://trello.com/b/LDggrYSV"> Trello board</a> um ihre Aufgaben zu organisieren. Falls Du das auch tun willst erstelle einen<a href="https://trello.com/signup"> Trello account</a> und schreibe <a href="/en-US/docs/MDN/Contribute/Drivers_and_curators">Jeremie</a> an, damit er Dir Schreibrechte für das Board gewährt.</p> +</div> + +<h2 id="Ich_bin_Anfänger"><a id="Anfänger" name="Anfänger"></a>Ich bin Anfänger</h2> + +<p>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.</p> + +<p>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">unsere Mailingliste</a> oder in unserem <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a> (mehr Informationen am Ende dieser Seite) erreichen.</p> + +<p>Hier ein paar Vorschläge wie Du mithelfen kannst:</p> + +<dl> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Tag">Füge Tags zu unseren Artikeln hinzu</a> (<em>5 min</em>)</dt> + <dd>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 <a href="/en-US/docs/MDN/Doc_status/Glossary#No_tags">glossary entries</a> und <a href="/en-US/docs/MDN/Doc_status/Learn#No_tags">learning articles</a> ohne Tags an.</dd> + <dt><a href="/en-US/docs/Glossary">Lese und bewerte einen Glossar-Eintrag</a> (<em>15 min</em>)</dt> + <dd>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<a href="/en-US/docs/MDN/Community#Join_our_mailing_lists"> mailing list </a>Bescheid.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 Stunde</em>)</dt> + <dd>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.</dd> + <dt><a href="/en-US/Learn/Index">Lese und bewerte einen Lern-Artikel</a> (<em>2 Stunden</em>)</dt> + <dd>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.</dd> +</dl> + +<h2 id="Ich_bin_Webentwickler"><a id="Webentwickler" name="Webentwickler"></a>Ich bin Webentwickler</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Lies und bewerte einen Glossar-Eintrag</a> (<em>15 min</em>)</dt> + <dd>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">Mailing Liste</a> oder den <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 Stunde</em>)</dt> + <dd>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 <a href="/en-US/docs/Glossary#Contribute">many undefined terms</a>, die der Klärung bedürfen. Wähle einen davon aus und fang einfach an.</dd> + <dt><a href="/en-US/Learn/Index">Lies und bewerte einen Lern-Artikel</a> (<em>2 Stunden</em>)</dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Schreibe einen neuen Lern-Artikel</a> (<em>4 Stunden</em>)</dt> + <dd>MDN möchte nicht einfach nur neue Artikel über Web-Technologien (<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a>, 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.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Füge Übungen, Code-Beispiele oder interaktive Lernmittel hinzu</a> (<em>? hours</em>)</dt> + <dd>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 <a href="http://jsfiddle.net" rel="external">JSFiddle</a> oder ähnlichen Tools bis hin zum Aufbau komplett änderbaren interaktiven Contents mit <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Entfessele Deine Kreativität!</dd> +</dl> + +<h2 id="Ich_bin_Lehrer">Ich bin Lehrer</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Glossary">Lese und überprüfe einen Glossar-Eintrag</a> (<em>15 min</em>)</dt> + <dd>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 <a href="/en-US/docs/MDN/Community#Join_our_mailing_lists">unsere Mailing-Liste</a> oder unseren <a href="/en-US/docs/MDN/Community#Get_into_IRC">IRC channel</a>.</dd> + <dt><a href="/docs/MDN/Contribute/Howto/Write_a_new_entry_in_the_Glossary">Schreibe einen neuen Glossar-Eintrag</a> (<em>1 hour</em>)</dt> + <dd>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 <a href="/en-US/docs/Glossary#Contribute">viele undefinierte Begriffe</a>, die Deine Aufmerksamkeit benötigen. Such Dir einen heraus und los geht's.</dd> + <dt><a href="/en-US/docs/tag/needsSchema">Füge Illustrationen und/oder Schemata zu Artikel hinzu</a> (<em>1 hour</em>)</dt> + <dd>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 <a href="/en-US/docs/tag/needsSchema">Artikel mit zu wenig Illustrationen</a> und suche Dir einen heraus, für den Du eine Illustration anlegen möchtest.</dd> + <dt><a href="/en-US/Learn/Index">Lese und überprüfe einen Lern-Artikel</a> (<em>2 hours</em>)</dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Write_an_article_to_help_learn_about_the_Web">Schreibe einen neuen Lern-Artikel</a> (<em>4 hours</em>)</dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">Füge Übungen, Ratespiele oder interaktive Lernmittel hinzu</a> (<em>? hours</em>)</dt> + <dd>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 <a href="https://thimble.webmaker.org/" rel="external">Thimble</a>. Entfessele Deine Kreativität!</dd> + <dt><a href="/en-US/docs/MDN/Contribute/Howto/Create_learning_pathways">Füge Lern-Pfade hinzu</a> (<em>? hours</em>)</dt> + <dd>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.</dd> +</dl> diff --git a/files/de/learn/server-side/erste_schritte/index.html b/files/de/learn/server-side/erste_schritte/index.html new file mode 100644 index 0000000000..d2a3cc75ca --- /dev/null +++ b/files/de/learn/server-side/erste_schritte/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 +--- +<p>{{LearnSidebar}}<br> + 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.</p> + +<p> </p> + +<h2 id="Vorraussetzungen">Vorraussetzungen</h2> + +<p>Wenn Sie mit diesem Modul starten, müssen Sie keine Kenntnisse in der serverseitigen Website-Programmierung oder in irgendeiner anderen Art von Programmierung haben. </p> + +<p>Allerdings müssen Sie verstehen, "Wie das Web funktioniert". Wir empfehlen Ihnen, zuerst die folgenden Themen zu lesen:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server" rel="noreferrer">Was ist ein Web-Server?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need" rel="noreferrer">Welche Software benötige ich zum Erstellen einer Webseite?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server" rel="noreferrer">Wie lädt man Seiten auf einen Webserver hoch?</a></li> +</ul> + +<p>Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die einzelnen Module in diesem Abschnitt zu arbeiten. </p> + +<h2 id="Anleitungen">Anleitungen</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction" rel="noreferrer">Einführung auf der Serverseite</a></dt> + <dd> + <p>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.</p> + </dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview" rel="noreferrer">Überblick über den Client-Server</a></dt> + <dd> + <p>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.</p> + </dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks" rel="noreferrer">Serverseitige Webframeworks</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security" rel="noreferrer">Webseitensicherheit</a></dt> + <dd>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.</dd> +</dl> + +<h2 id="Aufgaben">Aufgaben</h2> + +<p>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.</p> diff --git a/files/de/learn/server-side/erste_schritte/introduction/index.html b/files/de/learn/server-side/erste_schritte/introduction/index.html new file mode 100644 index 0000000000..2924655941 --- /dev/null +++ b/files/de/learn/server-side/erste_schritte/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 +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div> + +<p class="summary"><span class="seoSummary">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.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Vorraussetzungen:</th> + <td>Grundlegende Computerkenntnisse. Ein grundlegendes Verständnis davon, was ein Webserver ist.</td> + </tr> + <tr> + <th scope="row">Ziel:</th> + <td>Sich damit vertraut machen, was serverseitige Programmierung ist, was sie kann und wie sie sich von der clientseitigen Programmierung unterscheidet.</td> + </tr> + </tbody> +</table> + +<p>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.</p> + +<p>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.</p> + +<p>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.</p> + +<p>In der heutigen Zeit des Webdevelopments wird es deshalb empfohlen sich auch mit der serverseitigen Programmierung von Websites auseinanderzusetzen.</p> + +<h2 id="What_is_server-side_website_programming">What is server-side website programming?</h2> + +<p>Web browsers communicate with <a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server" rel="noreferrer">web servers</a> using the <strong>H</strong>yper<strong>T</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol ({{glossary("HTTP")}}). When you click a link on a web page, submit a form, or run a search, an <strong>HTTP request</strong> is sent from your browser to the target server.</p> + +<p>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 <a href="https://en.wikipedia.org/wiki/Query_string" rel="noreferrer">query string</a>), as POST data (data sent by the <a href="/en-US/docs/Web/HTTP/Methods/POST" rel="noreferrer">HTTP POST method</a>), or in associated {{glossary("Cookie", "cookies")}}.</p> + +<p>Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an <strong>HTTP response</strong> message. The response contains a status line indicating whether or not the request succeeded (e.g. "HTTP/1.1 200 OK" for success). </p> + +<p>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.</p> + +<h3 id="Static_sites">Static sites</h3> + +<p>The diagram below shows a basic web server architecture for a <em>static site</em> (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.</p> + +<p>The server retrieves the requested document from its file system and returns an HTTP response containing the document and a <a href="/en-US/docs/Web/HTTP/Status#Successful_responses" rel="noreferrer">success status</a> (usually 200 OK). If the file cannot be retrieved for some reason, an error status is returned (see <a href="/en-US/docs/Web/HTTP/Status#Client_error_responses" rel="noreferrer">client error responses</a> and <a href="/en-US/docs/Web/HTTP/Status#Server_error_responses" rel="noreferrer">server error responses</a>).</p> + +<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p> + +<h3 id="Dynamic_sites">Dynamic sites</h3> + +<p>A dynamic website is one where some of the response content is generated <em>dynamically </em>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). </p> + +<p>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).</p> + +<p>Most of the code to support a dynamic website must run on the server. Creating this code is known as "<strong>server-side programming</strong>" (or sometimes "<strong>back-end scripting</strong>").</p> + +<p>The diagram below shows a simple architecture for a <em>dynamic website</em>. As in the previous diagram, browsers send HTTP requests to the server, then the server processes the requests and returns appropriate HTTP responses.</p> + +<p>Requests for <em>static </em>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). </p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p> + +<p>Requests for dynamic resources are instead forwarded (2) to server-side code (shown in the diagram as a <em>Web Application</em>). 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). </p> + +<div> +<h2 id="Are_server-side_and_client-side_programming_the_same">Are server-side and client-side programming the same?</h2> +</div> + +<p>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:</p> + +<ul> + <li>They have different purposes and concerns.</li> + <li>They generally don't use the same programming languages (the exception being JavaScript, which can be used on the server- and client-side).</li> + <li>They run inside different operating system environments.</li> +</ul> + +<p>Code running in the browser is known as <strong>client-side code </strong>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 <em>which content</em> 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.</p> + +<p>Client-side code is written using <a href="/en-US/docs/Learn/HTML" rel="noreferrer">HTML</a>, <a href="/en-US/docs/Learn/CSS" rel="noreferrer">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript" rel="noreferrer">JavaScript</a> — 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).</p> + +<p>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.</p> + +<p>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.</p> + +<p>Developers typically write their code using <strong>web frameworks</strong>. 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.</p> + +<p>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.).</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> + +<p>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.</p> +</div> + +<div> +<h2 id="What_can_you_do_on_the_server-side">What can you do on the server-side?</h2> + +<p>Server-side programming is very useful because it allows us to <em>efficiently</em> deliver information tailored for individual users and thereby create a much better user experience.</p> +</div> + +<p>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.</p> + +<p>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.</p> + +<p>Some of the common uses and benefits of server-side programming are listed below. You'll note that there is some overlap!</p> + +<h3 id="Efficient_storage_and_delivery_of_information">Efficient storage and delivery of information</h3> + +<p>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.</p> + +<p>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).</p> + +<p>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.</p> + +<p>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).</p> + +<div class="note"> +<p><strong>Note</strong>: Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:</p> + +<ol> + <li>Go to <a href="https://www.amazon.com" rel="noreferrer">Amazon</a> or some other e-commerce site.</li> + <li>Search for a number of keywords and note how the page structure doesn't change, even though the results do. </li> + <li>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.</li> +</ol> + +<p>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.</p> +</div> + +<h3 id="Customised_user_experience">Customised user experience</h3> + +<p>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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Note: </strong><a href="https://maps.google.com/" rel="noreferrer">Google Maps</a> saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.</p> + +<p>Google search results are optimized based on previous searches.</p> + +<ol> + <li> Go to <a href="https:\\google.com" rel="noreferrer">Google search</a>.</li> + <li> Search for "football".</li> + <li> Now try typing "favourite" in the search box and observe the autocomplete search predictions.</li> +</ol> + +<p>Coincidence? Nada!</p> +</div> + +<h3 id="Controlled_access_to_content">Controlled access to content</h3> + +<p>Server-side programming allows sites to restrict access to authorized users and serve only the information that a user is permitted to see.</p> + +<p>Real world examples include:</p> + +<ul> + <li>Social networks like Facebook allow users to fully control their own data but only allow their friends to view or comment on it. The user determines who can see their data, and by extension, whose data appears in their feed — authorization is a central part of the user experience!</li> + <li> + <p>The site you are on right now controls access to content: articles are visible to everyone, but only users who have logged in can edit the content. To try this, click on the <strong>Edit </strong>button at the top of this page — if you are logged in you will be shown the edit view; if you are not logged in you will be taken to the sign-up page.</p> + </li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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?</p> +</div> + +<h3 id="Store_sessionstate_information">Store session/state information</h3> + +<p>Server-side programming allows developers to make use of <strong>sessions</strong> — 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.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Note</strong>: Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. <a href="http://www.theage.com.au/" rel="noreferrer">The Age</a>). 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.</p> +</div> + +<h3 id="Notifications_and_communication">Notifications and communication</h3> + +<p>Servers can send general or user-specific notifications through the website itself or via email, SMS, instant messaging, video conversations, or other communications services.</p> + +<p>A few examples include:</p> + +<ul> + <li>Facebook and Twitter send emails and SMS messages to notify you of new communications.</li> + <li>Amazon regularly sends product e-mails that suggest products similar to those already bought or viewed that you might be interested in.</li> + <li>A web server might send warning messages to site administrators alerting them to low memory on the server, or suspicious user activity.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<h3 id="Data_analysis">Data analysis</h3> + +<p>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.</p> + +<p>For example, Amazon and Google both advertise products based on previous searches (and purchases).</p> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> + +<p>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!</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>Congratulations, you've reached the end of the first article about server-side programming. </p> + +<p>You've now learned that server-side code is run on a web server and that its main role is to control <em>what</em> information is sent to the user (while client-side code mainly handles the structure and presentation of that data to the user).</p> + +<p>You should also understand that it is useful because it allows us to create websites that <em>efficiently</em> 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.</p> + +<p>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. </p> + +<p>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.</p> + +<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction" rel="noreferrer">Introduction to the server side</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview" rel="noreferrer">Client-Server overview</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks" rel="noreferrer">Server-side web frameworks</a></li> + <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security" rel="noreferrer">Website security</a></li> +</ul> diff --git a/files/de/learn/server-side/express_nodejs/index.html b/files/de/learn/server-side/express_nodejs/index.html new file mode 100644 index 0000000000..7462f8c23f --- /dev/null +++ b/files/de/learn/server-side/express_nodejs/index.html @@ -0,0 +1,65 @@ +--- +title: Express Web Anwendungsrahmen (Node.js/JavaScript) +slug: Learn/Server-side/Express_Nodejs +translation_of: Learn/Server-side/Express_Nodejs +--- +<div>{{LearnSidebar}}<br> +Express ist ein beliebter, weitgehend vorgabefreier Anwendungsbausatz (Framework) für das Web, das in Javascript geschrieben und in der Node.js Laufzeitumgebung beheimatet ist. Das Modul beschreibt einige Schlüsselvorteile dieses Anwendungsrahmens, wie eine Anwendungsumgebung aufzusetzen ist und wie allgemeine Entwicklungs- und Bereitstellungsaufgaben durchzuführen sind.</div> + +<h2 id="Voraussetzungen">Voraussetzungen</h2> + +<p>Bevor Sie dies Modul beginnen sollten Sie verstehen, was serverseitige Web-Anwendungsentwicklung und Web Frameworks sind – idealerweise durch Studium unseres Moduls <a href="/en-US/docs/Learn/Server-side/First_steps">Erste Schritte Server-side Website Programmierung</a>.<br> + Allgemeine Kenntnisse in Programmierung und Javascript werden vorausgesetzt, sind aber zum Verständnis der grundlegenden Konzepte nicht ausschlaggebend.</p> + +<div class="note"> +<p><strong>Anmerkung</strong>: Diese Website bietet zahlreiche Quellen zum Lernen von Javascript <em>im Kontext Client-seitiger Entwicklung</em>: <a href="/en-US/docs/Web/JavaScript">Javascript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">Javascript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Javascript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">Javascript</a> (Lernen). Der Kern von Javascript und seine Konzepte sind identisch für Server-seitige Entwicklung mit Node.js und dieses Material ist daher relevant.<br> + Node.js bietet <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">Schnittstellen/APIs</a> zur Unterstützung von Funktionalitäten, die in einer Umgebung <em>ohne</em> Browser nützlich sind, z.B. um HTTP Server zu bauen oder auf das Dateisystem zuzugreifen, aber es unterstützt keine Javascript APIs zur Interaktion mit Browser oder DOM.</p> + +<p>Dieser Leitfaden bietet Informationen zum Umgang mit Node.js und Express. Darüber hinaus gibt es ausgezeichnete Informationsquellen im Internet und in Form von Fachbüchern – Links sind u.a. hier zu finden: <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) und <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p> +</div> + +<h2 id="Leitfaden">Leitfaden</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node Einführung</a></dt> + <dd>Im ersten Artikel zum Thema Express werden die Fragen beantwortet "Was ist Node?" und "Was ist Express?", außerdem beleuchtet er die Besonderheiten des Express Web Frameworks. Wir werden die wichtigsten Eigenschaften sowie die Grundbausteine einer Express Anwendung kennen lernen (auch wenn wir hier noch keine Entwicklungsumgebung zum Testen aufsetzen werden).</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Aufsetzen einer Node (Express) Entwicklungsumgebung</a></dt> + <dd>Now that you know what Express is for, we'll show you how to set up and test a Node/Express development environment on Windows, Linux (Ubuntu), and Mac OS X. Whatever common operating system you are using, this article should give you what you need to be able to start developing Express apps.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></dt> + <dd>The first article in our practical tutorial series explains what you'll learn and provides an overview of the "local library" example website we'll be working through and evolving in subsequent articles.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></dt> + <dd>This article shows how you can create a "skeleton" website project, which you can then go on to populate with site-specific routes, templates/views, and databases.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></dt> + <dd>This article briefly introduces databases for Node/Express. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <em>LocalLibrary</em> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways you can access model data.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></dt> + <dd>In this tutorial we'll set up routes (URL handling code) with "dummy" handler functions for all the resource endpoints that we'll eventually need in the <em>LocalLibrary</em> website. On completion, we'll have a modular structure for our route handling code, that we can extend with real handler functions in the following articles. We'll also have a really good understanding of how to create modular routes using Express.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></dt> + <dd>We're now ready to add the pages that display the <em>LocalLibrary</em> website books and other data. The pages will include a home page that shows how many records we have of each model type and list and detail pages for all of our models. Along the way, we'll gain practical experience in getting records from the database and using templates.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></dt> + <dd>In this tutorial we'll show you how to work with <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> in Express, using Pug, and in particular how to write forms to create, update, and delete documents from the database.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></dt> + <dd>Now you've created an awesome <em>LocalLibrary</em> website, you're going to want to install it on a public web server so that it can be accessed by library staff and members over the Internet. This article provides an overview of how you might go about finding a host to deploy your website, and what you need to do in order to get your site ready for production.</dd> +</dl> + +<h2 id="See_also">See also</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Installing LocalLibrary on PWS/Cloud Foundry</a></dt> + <dd>This article provides a practical demonstration of how to install <em>LocalLibrary</em> on the <a href="http://run.pivotal.io">Pivotal Web Services PaaS cloud</a> — this is a full-featured, open source alternative to Heroku, the PaaS cloud service used in Part 7 of the tutorial, listed above. PWS/Cloud Foundry is definitely worth checking out if you are looking for an alternative to Heroku (or another PaaS cloud service), or simply feel like trying something different.</dd> +</dl> + +<h2 id="Adding_more_tutorials">Adding more tutorials</h2> + +<div> +<p>That's the end of the tutorial articles (for now). If you would like to extend it, other interesting topics to cover are:</p> + +<ul> + <li>Using sessions.</li> + <li>User authentication.</li> + <li>User authorization and permissions.</li> + <li>Testing an Express web application.</li> + <li>Web security for Express web applications.</li> +</ul> + +<p>And of course, it would be excellent to have an assessment task!</p> +</div> diff --git a/files/de/learn/server-side/express_nodejs/mongoose/index.html b/files/de/learn/server-side/express_nodejs/mongoose/index.html new file mode 100644 index 0000000000..525764221c --- /dev/null +++ b/files/de/learn/server-side/express_nodejs/mongoose/index.html @@ -0,0 +1,843 @@ +--- +title: 'Express Tutorial Part 3: Nutzung einer Datenbank (Mit Mongoose)' +slug: Learn/Server-side/Express_Nodejs/mongoose +translation_of: Learn/Server-side/Express_Nodejs/mongoose +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div> + +<p class="summary">This article briefly introduces databases, and how to use them with Node/Express apps. It then goes on to show how we can use <a href="http://mongoosejs.com/">Mongoose</a> to provide database access for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> website. It explains how object schema and models are declared, the main field types, and basic validation. It also briefly shows a few of the main ways in which you can access model data.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To be able to design and create your own models using Mongoose.</td> + </tr> + </tbody> +</table> + +<h2 id="Overview">Overview</h2> + +<p>Library staff will use the Local Library website to store information about books and borrowers, while library members will use it to browse and search for books, find out whether there are any copies available, and then reserve or borrow them. In order to store and retrieve information efficiently, we will store it in a <em>database</em>.</p> + +<p>Express apps can use many different databases, and there are several approaches you can use for performing <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (CRUD) operations. This tutorial provides a brief overview of some of the available options and then goes on to show in detail the particular mechanisms selected.</p> + +<h3 id="What_databases_can_I_use">What databases can I use?</h3> + +<p><em>Express</em> apps can use any database supported by <em>Node</em> (<em>Express</em> itself doesn't define any specific additional behavior/requirements for database management). There are <a href="https://expressjs.com/en/guide/database-integration.html">many popular options</a>, including PostgreSQL, MySQL, Redis, SQLite, and MongoDB.</p> + +<p>When choosing a database, you should consider things like time-to-productivity/learning curve, performance, ease of replication/backup, cost, community support, etc. While there is no single "best" database, almost any of the popular solutions should be more than acceptable for a small-to-medium-sized site like our Local Library.</p> + +<p>For more information on the options see <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p> + +<h3 id="What_is_the_best_way_to_interact_with_a_database">What is the best way to interact with a database?</h3> + +<p>There are two common approaches for interacting with a database: </p> + +<ul> + <li>Using the databases' native query language (e.g. SQL)</li> + <li>Using an Object Data Model ("ODM") or an Object Relational Model ("ORM"). An ODM/ORM represents the website's data as JavaScript objects, which are then mapped to the underlying database. Some ORMs are tied to a specific database, while others provide a database-agnostic backend.</li> +</ul> + +<p>The very best <em>performance</em> can be gained by using SQL, or whatever query language is supported by the database. ODM's are often slower because they use translation code to map between objects and the database format, which may not use the most efficient database queries (this is particularly true if the ODM supports different database backends, and must make greater compromises in terms of what database features are supported).</p> + +<p>The benefit of using an ORM is that programmers can continue to think in terms of JavaScript objects rather than database semantics — this is particularly true if you need to work with different databases (on either the same or different websites). They also provide an obvious place to perform data validation.</p> + +<div class="note"> +<p><strong>Tip:</strong> Using ODM/ORMs often results in lower costs for development and maintenance! Unless you're very familiar with the native query language or performance is paramount, you should strongly consider using an ODM.</p> +</div> + +<h3 id="What_ORMODM_should_I_use">What ORM/ODM should I use?</h3> + +<p>There are many ODM/ORM solutions available on the NPM package manager site (check out the <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> and <a href="https://www.npmjs.com/browse/keyword/orm">orm</a> tags for a subset!).</p> + +<p>A few solutions that were popular at the time of writing are:</p> + +<ul> + <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: Mongoose is a <a href="https://www.mongodb.org/">MongoDB</a> object modeling tool designed to work in an asynchronous environment.</li> + <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: An ORM extracted from the Express-based <a href="http://sailsjs.com/">Sails</a> web framework. It provides a uniform API for accessing numerous different databases, including Redis, MySQL, LDAP, MongoDB, and Postgres.</li> + <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: Features both promise-based and traditional callback interfaces, providing transaction support, eager/nested-eager relation loading, polymorphic associations, and support for one-to-one, one-to-many, and many-to-many relations. Works with PostgreSQL, MySQL, and SQLite3.</li> + <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Makes it as easy as possible to use the full power of SQL and the underlying database engine (supports SQLite3, Postgres, and MySQL).</li> + <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a> is a promise-based ORM for Node.js and io.js. It supports the dialects PostgreSQL, MySQL, MariaDB, SQLite, and MSSQL and features solid transaction support, relations, read replication and more.</li> + <li><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> is an Object Relationship Manager for NodeJS. It supports MySQL, SQLite, and Progress, helping to work with the database using an object-oriented approach.</li> + <li><a href="https://graphql.org/">GraphQL</a>: Primarily a query language for restful APIs, GraphQL is very popular, and has features available for reading data from databases.</li> +</ul> + +<p>As a general rule, you should consider both the features provided and the "community activity" (downloads, contributions, bug reports, quality of documentation, etc.) when selecting a solution. At the time of writing Mongoose is by far the most popular ODM, and is a reasonable choice if you're using MongoDB for your database.</p> + +<h3 id="Using_Mongoose_and_MongoDb_for_the_LocalLibrary">Using Mongoose and MongoDb for the LocalLibrary</h3> + +<p>For the <em>Local Library</em> example (and the rest of this topic) we're going to use the <a href="https://www.npmjs.com/package/mongoose">Mongoose ODM</a> to access our library data. Mongoose acts as a front end to <a href="https://www.mongodb.com/what-is-mongodb">MongoDB</a>, an open source <a href="https://en.wikipedia.org/wiki/NoSQL">NoSQL</a> database that uses a document-oriented data model. A “collection” of “documents” in a MongoDB database <a href="https://docs.mongodb.com/manual/core/databases-and-collections/#collections">is analogous to</a> a “table” of “rows” in a relational database.</p> + +<p>This ODM and database combination is extremely popular in the Node community, partially because the document storage and query system looks very much like JSON, and is hence familiar to JavaScript developers.</p> + +<div class="note"> +<p><strong>Tip:</strong> You don't need to know MongoDB in order to use Mongoose, although parts of the <a href="http://mongoosejs.com/docs/guide.html">Mongoose documentation</a> <em>are</em> easier to use and understand if you are already familiar with MongoDB.</p> +</div> + +<p>The rest of this tutorial shows how to define and access the Mongoose schema and models for the <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary website</a> example.</p> + +<h2 id="Designing_the_LocalLibrary_models">Designing the LocalLibrary models</h2> + +<p>Before you jump in and start coding the models, it's worth taking a few minutes to think about what data we need to store and the relationships between the different objects.</p> + +<p>We know that we need to store information about books (title, summary, author, genre, ISBN) and that we might have multiple copies available (with globally unique ids, availability statuses, etc.). We might need to store more information about the author than just their name, and there might be multiple authors with the same or similar names. We want to be able to sort information based on the book title, author, genre, and category.</p> + +<p>When designing your models it makes sense to have separate models for every "object" (a group of related information). In this case some obvious candidates for these models are books, book instances, and authors.</p> + +<p>You might also want to use models to represent selection-list options (e.g. like a drop-down list of choices), rather than hard-coding the choices into the website itself — this is recommended when all the options aren't known up front or may change. A good example is a genre (e.g. fantasy, science fiction, etc.).</p> + +<p>Once we've decided on our models and fields, we need to think about the relationships between them.</p> + +<p>With that in mind, the UML association diagram below shows the models we'll define in this case (as boxes). As discussed above, we've created models for the book (the generic details of the book), book instance (status of specific physical copies of the book available in the system), and author. We have also decided to have a model for the genre so that values can be created dynamically. We've decided not to have a model for the <code>BookInstance:status</code> — we will hard code the acceptable values because we don't expect these to change. Within each of the boxes, you can see the model name, the field names and types, and also the methods and their return types.</p> + +<p>The diagram also shows the relationships between the models, including their <em>multiplicities</em>. The multiplicities are the numbers on the diagram showing the numbers (maximum and minimum) of each model that may be present in the relationship. For example, the connecting line between the boxes shows that <code>Book</code> and a <code>Genre</code> are related. The numbers close to the <code>Book</code> model show that a <code>Genre</code> must have zero or more <code>Book</code>s (as many as you like), while the numbers on the other end of the line next to the <code>Genre</code> show that a book can have zero or more associated <code>Genre</code>s.</p> + +<div class="note"> +<p><strong>Note</strong>: As discussed in our <a href="#related_documents">Mongoose primer</a> below it is often better to have the field that defines the relationship between the documents/models in just <em>one</em> model (you can still find the reverse relationship by searching for the associated <code>_id</code> in the other model). Below we have chosen to define the relationship between Book/Genre and Book/Author in the Book schema, and the relationship between the Book/BookInstance in the BookInstance Schema. This choice was somewhat arbitrary — we could equally well have had the field in the other schema.</p> +</div> + +<p><img alt="Mongoose Library Model with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The next section provides a basic primer explaining how models are defined and used. As you read it, consider how we will construct each of the models in the diagram above.</p> +</div> + +<h2 id="Mongoose_primer">Mongoose primer</h2> + +<p>This section provides an overview of how to connect Mongoose to a MongoDB database, how to define a schema and a model, and how to make basic queries. </p> + +<div class="note"> +<p><strong>Note:</strong> This primer is heavily influenced by the <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> on <em>npm</em> and the <a href="http://mongoosejs.com/docs/guide.html">official documentation</a>.</p> +</div> + +<h3 id="Installing_Mongoose_and_MongoDB">Installing Mongoose and MongoDB</h3> + +<p>Mongoose is installed in your project (<strong>package.json</strong>) like any other dependency — using NPM. To install it, use the following command inside your project folder:</p> + +<pre class="brush: bash">npm install mongoose +</pre> + +<p>Installing <em>Mongoose</em> adds all its dependencies, including the MongoDB database driver, but it does not install MongoDB itself. If you want to install a MongoDB server then you can <a href="https://www.mongodb.com/download-center">download installers from here</a> for various operating systems and install it locally. You can also use cloud-based MongoDB instances.</p> + +<div class="note"> +<p><strong>Note:</strong> For this tutorial, we'll be using the <a href="https://www.mongodb.com/">MongoDB Atlas</a> cloud-based <em>database as a service</em> free tier to provide the database. This is suitable for development and makes sense for the tutorial because it makes "installation" operating system independent (database-as-a-service is also one approach you might use for your production database).</p> +</div> + +<h3 id="Connecting_to_MongoDB">Connecting to MongoDB</h3> + +<p><em>Mongoose</em> requires a connection to a MongoDB database. You can <code>require()</code> and connect to a locally hosted database with <code>mongoose.connect()</code>, as shown below.</p> + +<pre class="brush: js">//Import the mongoose module +var mongoose = require('mongoose'); + +//Set up default mongoose connection +var mongoDB = 'mongodb://127.0.0.1/my_database'; +mongoose.connect(mongoDB, { useNewUrlParser: true }); + +//Get the default connection +var db = mongoose.connection; + +//Bind connection to error event (to get notification of connection errors) +db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> + +<p>You can get the default <code>Connection</code> object with <code>mongoose.connection</code>. Once connected, the open event is fired on the <code>Connection</code> instance.</p> + +<div class="note"> +<p><strong>Tip:</strong> If you need to create additional connections you can use <code>mongoose.createConnection()</code>. This takes the same form of database URI (with host, database, port, options etc.) as <code>connect()</code> and returns a <code>Connection</code> object).</p> +</div> + +<h3 id="Defining_and_creating_models">Defining and creating models</h3> + +<p>Models are <em>defined </em>using the <code>Schema</code> interface. The Schema allows you to define the fields stored in each document along with their validation requirements and default values. In addition, you can define static and instance helper methods to make it easier to work with your data types, and also virtual properties that you can use like any other field, but which aren't actually stored in the database (we'll discuss a bit further below).</p> + +<p>Schemas are then "compiled" into models using the <code>mongoose.model()</code> method. Once you have a model you can use it to find, create, update, and delete objects of the given type.</p> + +<div class="note"> +<p><strong>Note:</strong> Each model maps to a <em>collection</em> of <em>documents</em> in the MongoDB database. The documents will contain the fields/schema types defined in the model <code>Schema</code>.</p> +</div> + +<h4 id="Defining_schemas">Defining schemas</h4> + +<p>The code fragment below shows how you might define a simple schema. First you <code>require()</code> mongoose, then use the Schema constructor to create a new schema instance, defining the various fields inside it in the constructor's object parameter.</p> + +<pre class="brush: js">//Require Mongoose +var mongoose = require('mongoose'); + +//Define a schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string: String, + a_date: Date +}); +</pre> + +<p>In the case above we just have two fields, a string and a date. In the next sections, we will show some of the other field types, validation, and other methods.</p> + +<h4 id="Creating_a_model">Creating a model</h4> + +<p>Models are created from schemas using the <code>mongoose.model()</code> method:</p> + +<pre class="brush: js">// Define schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string: String, + a_date: Date +}); + +<strong>// Compile model from schema +var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> + +<p>The first argument is the singular name of the collection that will be created for your model (Mongoose will create the database collection for the above model <em>SomeModel</em> above), and the second argument is the schema you want to use in creating the model.</p> + +<div class="note"> +<p><strong>Note:</strong> Once you've defined your model classes you can use them to create, update, or delete records, and run queries to get all records or particular subsets of records. We'll show you how to do this in the <a href="#Using_models">Using models</a> section, and when we create our views.</p> +</div> + +<h4 id="Schema_types_fields">Schema types (fields)</h4> + +<p>A schema can have an arbitrary number of fields — each one represents a field in the documents stored in <em>MongoDB</em>. An example schema showing many of the common field types and how they are declared is shown below.</p> + +<pre class="brush: js">var schema = new Schema( +{ + name: <strong>String</strong>, + binary: <strong>Buffer</strong>, + living: <strong>Boolean</strong>, + updated: { type: <strong>Date</strong>, default: Date.now() }, + age: { type: <strong>Number</strong>, min: 18, max: 65, required: true }, + mixed: <strong>Schema.Types.Mixed</strong>, + _someId: <strong>Schema.Types.ObjectId</strong>, + array: <strong>[]</strong>, + ofString: [<strong>String</strong>], // You can also have an array of each of the other types too. + nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } } +})</pre> + +<p>Most of the <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (the descriptors after “type:” or after field names) are self-explanatory. The exceptions are:</p> + +<ul> + <li><code>ObjectId</code>: Represents specific instances of a model in the database. For example, a book might use this to represent its author object. This will actually contain the unique ID (<code>_id</code>) for the specified object. We can use the <code>populate()</code> method to pull in the associated information when needed.</li> + <li><code><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a></code>: An arbitrary schema type.</li> + <li><code>[]</code>: An array of items. You can perform JavaScript array operations on these models (push, pop, unshift, etc.). The examples above show an array of objects without a specified type and an array of <code>String</code> objects, but you can have an array of any type of object.</li> +</ul> + +<p>The code also shows both ways of declaring a field:</p> + +<ul> + <li>Field <em>name</em> and <em>type</em> as a key-value pair (i.e. as done with fields <code>name</code>, <code>binary </code>and <code>living</code>).</li> + <li>Field <em>name</em> followed by an object defining the <code>type</code>, and any other <em>options</em> for the field. Options include things like: + <ul> + <li>default values.</li> + <li>built-in validators (e.g. max/min values) and custom validation functions.</li> + <li>Whether the field is required</li> + <li>Whether <code>String</code> fields should automatically be set to lowercase, uppercase, or trimmed (e.g. <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li> + </ul> + </li> +</ul> + +<p>For more information about options see <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (Mongoose docs).</p> + +<h4 id="Validation">Validation</h4> + +<p>Mongoose provides built-in and custom validators, and synchronous and asynchronous validators. It allows you to specify both the acceptable range of values and the error message for validation failure in all cases.</p> + +<p>The built-in validators include:</p> + +<ul> + <li>All <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> have the built-in <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a> validator. This is used to specify whether the field must be supplied in order to save a document.</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Numbers</a> have <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> and <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a> validators.</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Strings</a> have: + <ul> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a>: specifies the set of allowed values for the field.</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a>: specifies a regular expression that the string must match.</li> + <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a> and <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> for the string.</li> + </ul> + </li> +</ul> + +<p>The example below (slightly modified from the Mongoose documents) shows how you can specify some of the validator types and error messages:</p> + +<pre class="brush: js">var breakfastSchema = new Schema({ + eggs: { + type: Number, + min: [6, 'Too few eggs'], + max: 12, + required: [true, 'Why no eggs?'] + }, + drink: { + type: String, + enum: ['Coffee', 'Tea', 'Water',] + } +}); +</pre> + +<p>For complete information on field validation see <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs).</p> + +<h4 id="Virtual_properties">Virtual properties</h4> + +<p>Virtual properties are document properties that you can get and set but that do not get persisted to MongoDB. The getters are useful for formatting or combining fields, while setters are useful for de-composing a single value into multiple values for storage. The example in the documentation constructs (and deconstructs) a full name virtual property from a first and last name field, which is easier and cleaner than constructing a full name every time one is used in a template.</p> + +<div class="note"> +<p><strong>Note:</strong> We will use a virtual property in the library to define a unique URL for each model record using a path and the record's <code>_id</code> value.</p> +</div> + +<p>For more information see <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (Mongoose documentation).</p> + +<h4 id="Methods_and_query_helpers">Methods and query helpers</h4> + +<p>A schema can also have <a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>, <a href="http://mongoosejs.com/docs/guide.html#statics">static methods</a>, and <a href="http://mongoosejs.com/docs/guide.html#query-helpers">query helpers</a>. The instance and static methods are similar, but with the obvious difference that an instance method is associated with a particular record and has access to the current object. Query helpers allow you to extend mongoose's <a href="http://mongoosejs.com/docs/queries.html">chainable query builder API</a> (for example, allowing you to add a query "byName" in addition to the <code>find()</code>, <code>findOne()</code> and <code>findById()</code> methods).</p> + +<h3 id="Using_models">Using models</h3> + +<p>Once you've created a schema you can use it to create models. The model represents a collection of documents in the database that you can search, while the model's instances represent individual documents that you can save and retrieve.</p> + +<p>We provide a brief overview below. For more information see: <a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs).</p> + +<h4 id="Creating_and_modifying_documents">Creating and modifying documents</h4> + +<p>To create a record you can define an instance of the model and then call <code>save()</code>. The examples below assume SomeModel is a model (with a single field "name") that we have created from our schema.</p> + +<pre class="brush: js">// Create an instance of model SomeModel +var awesome_instance = new SomeModel({ name: 'awesome' }); + +// Save the new model instance, passing a callback +awesome_instance.save(function (err) { + if (err) return handleError(err); + // saved! +}); +</pre> + +<p>Creation of records (along with updates, deletes, and queries) are asynchronous operations — you supply a callback that is called when the operation completes. The API uses the error-first argument convention, so the first argument for the callback will always be an error value (or null). If the API returns some result, this will be provided as the second argument.</p> + +<p>You can also use <code>create()</code> to define the model instance at the same time as you save it. The callback will return an error for the first argument and the newly-created model instance for the second argument.</p> + +<pre class="brush: js">SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) { + if (err) return handleError(err); + // saved! +});</pre> + +<p>Every model has an associated connection (this will be the default connection when you use <code>mongoose.model()</code>). You create a new connection and call <code>.model()</code> on it to create the documents on a different database.</p> + +<p>You can access the fields in this new record using the dot syntax, and change the values. You have to call <code>save()</code> or <code>update()</code> to store modified values back to the database.</p> + +<pre class="brush: js">// Access model field values using dot notation +console.log(awesome_instance.name); //should log 'also_awesome' + +// Change record by modifying the fields, then calling save(). +awesome_instance.name="New cool name"; +awesome_instance.save(function (err) { + if (err) return handleError(err); // saved! +}); +</pre> + +<h4 id="Searching_for_records">Searching for records</h4> + +<p>You can search for records using query methods, specifying the query conditions as a JSON document. The code fragment below shows how you might find all athletes in a database that play tennis, returning just the fields for athlete <em>name</em> and <em>age</em>. Here we just specify one matching field (sport) but you can add more criteria, specify regular expression criteria, or remove the conditions altogether to return all athletes.</p> + +<pre class="brush: js">var Athlete = mongoose.model('Athlete', yourSchema); + +// find all athletes who play tennis, selecting the 'name' and 'age' fields +Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) { + if (err) return handleError(err); + // 'athletes' contains the list of athletes that match the criteria. +})</pre> + +<p>If you specify a callback, as shown above, the query will execute immediately. The callback will be invoked when the search completes.</p> + +<div class="note"> +<p><strong>Note:</strong> All callbacks in Mongoose use the pattern <code>callback(error, result)</code>. If an error occurs executing the query, the <code>error</code> parameter will contain an error document and <code>result</code> will be null. If the query is successful, the <code>error</code> parameter will be null, and the <code>result</code> will be populated with the results of the query.</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> It is important to remember that not finding any results is <strong>not an error</strong> for a search —but it may be a fail-case in the context of your application. If your application expects a search to find a value you can either check the result in the callback (<code>results==null</code>) or daisy chain the <a href="https://mongoosejs.com/docs/api.html#query_Query-orFail">orFail()</a> method on the query. </p> +</div> + +<p>If you don't specify a callback then the API will return a variable of type <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. You can use this query object to build up your query and then execute it (with a callback) later using the <code>exec()</code> method.</p> + +<pre class="brush: js">// find all athletes that play tennis +var query = Athlete.find({ 'sport': 'Tennis' }); + +// selecting the 'name' and 'age' fields +query.select('name age'); + +// limit our results to 5 items +query.limit(5); + +// sort by age +query.sort({ age: -1 }); + +// execute the query at a later time +query.exec(function (err, athletes) { + if (err) return handleError(err); + // athletes contains an ordered list of 5 athletes who play Tennis +})</pre> + +<p>Above we've defined the query conditions in the <code>find()</code> method. We can also do this using a <code>where()</code> function, and we can chain all the parts of our query together using the dot operator (.) rather than adding them separately. The code fragment below is the same as our query above, with an additional condition for the age.</p> + +<pre class="brush: js">Athlete. + find(). + where('sport').equals('Tennis'). + where('age').gt(17).lt(50). //Additional where query + limit(5). + sort({ age: -1 }). + select('name age'). + exec(callback); // where callback is the name of our callback function.</pre> + +<p>The <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> method gets all matching records, but often you just want to get one match. The following methods query for a single record:</p> + +<ul> + <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Finds the document with the specified <code>id</code> (every document has a unique <code>id</code>).</li> + <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Finds a single document that matches the specified criteria.</li> + <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Finds a single document by <code>id</code> or criteria and either updates or removes it. These are useful convenience functions for updating and removing records.</li> +</ul> + +<div class="note"> +<p><strong>Note:</strong> There is also a <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code> method that you can use to get the number of items that match conditions. This is useful if you want to perform a count without actually fetching the records.</p> +</div> + +<p>There is a lot more you can do with queries. For more information see: <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs).</p> + +<h4 id="Working_with_related_documents_—_population">Working with related documents — population</h4> + +<p>You can create references from one document/model instance to another using the <code>ObjectId</code> schema field, or from one document to many using an array of <code>ObjectIds</code>. The field stores the id of the related model. If you need the actual content of the associated document, you can use the <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code> method in a query to replace the id with the actual data.</p> + +<p>For example, the following schema defines authors and stories. Each author can have multiple stories, which we represent as an array of <code>ObjectId</code>. Each story can have a single author. The "ref" (highlighted in bold below) tells the schema which model can be assigned to this field.</p> + +<pre class="brush: js">var mongoose = require('mongoose') + , Schema = mongoose.Schema + +var authorSchema = Schema({ + name : String, + stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }] +}); + +var storySchema = Schema({ + author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' }, + title : String +}); + +var Story = mongoose.model('Story', storySchema); +var Author = mongoose.model('Author', authorSchema);</pre> + +<p>We can save our references to the related document by assigning the <code>_id</code> value. Below we create an author, then a story, and assign the author id to our story's author field.</p> + +<pre class="brush: js">var bob = new Author({ name: 'Bob Smith' }); + +bob.save(function (err) { + if (err) return handleError(err); + + //Bob now exists, so lets create a story + var story = new Story({ + title: "Bob goes sledding", + author: bob._id // assign the _id from the our author Bob. This ID is created by default! + }); + + story.save(function (err) { + if (err) return handleError(err); + // Bob now has his story + }); +});</pre> + +<p>Our story document now has an author referenced by the author document's ID. In order to get the author information in the story results we use <code>populate()</code>, as shown below.</p> + +<pre class="brush: js">Story +.findOne({ title: 'Bob goes sledding' }) +.populate('author') //This populates the author id with actual author information! +.exec(function (err, story) { + if (err) return handleError(err); + console.log('The author is %s', story.author.name); + // prints "The author is Bob Smith" +});</pre> + +<div class="note"> +<p><strong>Note:</strong> Astute readers will have noted that we added an author to our story, but we didn't do anything to add our story to our author's <code>stories</code> array. How then can we get all stories by a particular author? One way would be to add our story to the stories array, but this would result in us having two places where the information relating authors and stories needs to be maintained.</p> + +<p>A better way is to get the <code>_id</code> of our <em>author</em>, then use <code>find()</code> to search for this in the author field across all stories.</p> + +<pre class="brush: js">Story +.find({ author : bob._id }) +.exec(function (err, stories) { + if (err) return handleError(err); + // returns all stories that have Bob's id as their author. +}); +</pre> +</div> + +<p>This is almost everything you need to know about working with related items<em> for this tutorial</em>. For more detailed information see <a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs).</p> + +<h3 id="One_schemamodel_per_file">One schema/model per file</h3> + +<p>While you can create schemas and models using any file structure you like, we highly recommend defining each model schema in its own module (file), then exporting the method to create the model. This is shown below:</p> + +<pre class="brush: js">// File: ./models/somemodel.js + +//Require Mongoose +var mongoose = require('mongoose'); + +//Define a schema +var Schema = mongoose.Schema; + +var SomeModelSchema = new Schema({ + a_string : String, + a_date : Date, +}); + +<strong>//Export function to create "SomeModel" model class +module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></pre> + +<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p> + +<pre class="brush: js">//Create a SomeModel model just by requiring the module +var SomeModel = require('../models/somemodel') + +// Use the SomeModel object (model) to find all SomeModel records +SomeModel.find(callback_function);</pre> + +<h2 id="Setting_up_the_MongoDB_database">Setting up the MongoDB database</h2> + +<p>Now that we understand something of what Mongoose can do and how we want to design our models, it's time to start work on the <em>LocalLibrary</em> website. The very first thing we want to do is set up a MongoDb database that we can use to store our library data.</p> + +<p>For this tutorial, we're going to use the <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a> free cloud-hosted <a href="https://www.mongodb.com/cloud/atlas/pricing">sandbox</a> database. This database tier is not considered suitable for production websites because it has no redundancy, but it is great for development and prototyping. We're using it here because it is free and easy to set up, and because MongoDB Atlas is a popular <em>database as a service</em> vendor that you might reasonably choose for your production database (other popular choices at the time of writing include <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> and <a href="https://www.objectrocket.com/">ObjectRocket</a>).</p> + +<div class="note"> +<p><strong>Note:</strong> If you prefer you can set up a MongoDb database locally by downloading and installing the <a href="https://www.mongodb.com/download-center/community">appropriate binaries for your system</a>. The rest of the instructions in this article would be similar, except for the database URL you would specify when connecting. Note, however, that the <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to Production</a> tutorial requires some form of remote database, since the free tier of the <a href="https://www.heroku.com/">Heroku</a> service does not provide persistent storage. It is therefore highly recommended to use <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>.</p> +</div> + +<p>You will first need to <a href="https://www.mongodb.com/cloud/atlas/register">create an account</a> with MongoDB Atlas (this is free, and just requires that you enter basic contact details and acknowledge their terms of service). </p> + +<p>After logging in, you'll be taken to the <a href="https://cloud.mongodb.com/v2">home</a> screen:</p> + +<ol> + <li>Click <strong>Build a Cluster</strong> button in the Clusters Overview section.<br> + <img alt="Create a cluster on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16516/MongoDB_Atlas_-_CreateCluster.jpg" style="border-style: solid; border-width: 1px; height: 549px; width: 742px;"></li> + <li>This will open the <em>Create New Cluster</em> screen.<br> + <img alt="Choose a cloud provider when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16511/MongoDB_Atlas_-_ChooseProviderRegion.jpg" style="border-style: solid; border-width: 1px; height: 656px; width: 742px;"> + <ul> + <li>Select any provider from the <em>Cloud Provider & Region </em>section. Different providers offer different regions.</li> + <li>Select any region marked "FREE TIER AVAILABLE".</li> + <li>Click the <strong>Create Cluster</strong> button (creation of the cluster will take some minutes).</li> + </ul> + </li> + <li> + <p>You will return to the <em>Cluster Overview</em> screen.<br> + <img alt="Setup a collection on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16517/MongoDB_Atlas_-_CreateCollection.jpg" style="border-style: solid; border-width: 1px; height: 399px; width: 742px;"></p> + + <ul> + <li> + <p>Click the <strong>Collections</strong> button.</p> + </li> + </ul> + </li> + <li>This will open the <em>Collections</em> section.<br> + <img alt="Create a database on MongoDB Atlas." src="https://mdn.mozillademos.org/files/17151/MongoDB_Atlas_-_CreateDatabase2.PNG" style="border-style: solid; border-width: 1px; height: 519px; width: 1130px;"> + <ul> + <li>Click the <strong>Add My Own Data</strong> button.</li> + </ul> + </li> + <li>This will open the <em>Create Database</em> screen.<br> + <img alt="Details during database creation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16520/MongoDB_Atlas_-_DatabaseDetails.jpg" style="border-style: solid; border-width: 1px; height: 441px; width: 416px;"> + <ul> + <li>Enter the name for the new database as <code>local_library</code>.</li> + <li>Enter the name of the collection as <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">Collection0</span></font>.</li> + <li>Click the <strong>Create</strong> button to create the database.</li> + </ul> + </li> + <li>You will return to the Collection screen with your database created.<br> + <img alt="Database creation confirmation on MongoDB Atlas." src="https://mdn.mozillademos.org/files/16519/MongoDB_Atlas_-_DatabaseCreated.jpg" style="border-style: solid; border-width: 1px; height: 305px; width: 742px;"> + <ul> + <li>Click the <em>Overview</em> tab to return the cluster overview.</li> + </ul> + </li> + <li>From the Cluster0 Overview screen click the <strong>Connect</strong> button.<br> + <img alt="Configure a connection when after setting up a cluster in MongoDB Atlas." src="https://mdn.mozillademos.org/files/16512/MongoDB_Atlas_-_Connectbutton.jpg" style="border-style: solid; border-width: 1px; height: 308px; width: 742px;"></li> + <li>This will open the Connect to Cluster screen.<br> + <img alt="Setup a connection when using MongoDB Atlas." src="https://mdn.mozillademos.org/files/16513/MongoDB_Atlas_-_ConnectCluster.jpg" style="border-style: solid; border-width: 1px; height: 771px; width: 690px;"> + <ul> + <li>Click the <strong>Add a Different IP Address</strong> button, enter <code>0.0.0.0/0</code> for the IP Address and click <strong>Add IP Address</strong> button. + <div class="blockIndicator note"> + <p><strong>Note:</strong> It is a best practice to limit the IP addresses that can connect to your database and other resources. Here we allow a connection from anywhere because we don't know where the request will come from after deployment.</p> + </div> + </li> + <li>Enter a username and password and click <strong>Create MongoDB User</strong> button. + <div class="blockIndicator note"> + <p><strong>Note:</strong> Avoid using special characters in your MongoDB user password as mongoose may not parse the connection string properly.</p> + </div> + </li> + <li>If you have completed the 2 previous steps, the button <strong>Choose a connection method </strong>will turn green.</li> + <li>Click the <strong>Choose a connection method</strong> button.</li> + </ul> + </li> + <li>You should now be able to access the <em>Choose a connection</em> method tab.<br> + <img alt="Choose a connection type when connecting with MongoDB Atlas." src="https://mdn.mozillademos.org/files/16510/MongoDB_Atlas_-_ChooseAConnectionMethod.jpg" style="border-style: solid; border-width: 1px; height: 606px; width: 691px;"> + <ul> + <li>Click the <strong>Connect Your Application</strong> option.</li> + </ul> + </li> + <li>This will open the <em>Connect</em> screen.<br> + <img alt="Choose the Short SRV connection when settinup a connection on MongoDB Atalas." src="https://mdn.mozillademos.org/files/17153/MongoDB_Atlas_-_ConnectForShortSRV_2020-03.PNG" style="border-style: solid; border-width: 1px; height: 649px; width: 666px;"> + <ul> + <li>Click the <strong>Copy</strong> button to copy the connection string.</li> + <li>Save this string somewhere safe.</li> + <li>Update the password with your users password.</li> + <li>Replace test with <code>local_library</code>.</li> + </ul> + </li> +</ol> + +<p>You have now created the database, and have a URL (with username and password) that can be used to access it. This will look something like: <code>mongodb+srv://your_user_name:your_password@cluster0-mbdj7.mongodb.net/local_library?retryWrites=true</code></p> + +<h2 id="Install_Mongoose">Install Mongoose</h2> + +<p>Open a command prompt and navigate to the directory where you created your <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">skeleton Local Library website</a>. Enter the following command to install Mongoose (and its dependencies) and add it to your <strong>package.json</strong> file, unless you have already done so when reading the <a href="#Installing_Mongoose_and_MongoDB">Mongoose Primer</a> above.</p> + +<pre class="brush: bash">npm install mongoose +</pre> + +<h2 id="Connect_to_MongoDB">Connect to MongoDB</h2> + +<p>Open <strong>/app.js</strong> (in the root of your project) and copy the following text below where you declare the <em>Express application object</em> (after the line <code>var app = express();</code>). Replace the database url string ('<em>insert_your_database_url_here</em>') with the location URL representing your own database (i.e. using the information from <em>mongoDB Atlas</em>).</p> + +<pre class="brush: js">//Set up mongoose connection +var mongoose = require('mongoose'); +var mongoDB = '<em>insert_your_database_url_here</em>'; +mongoose.connect(mongoDB, { useNewUrlParser: true }); +var db = mongoose.connection; +db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre> + +<p>As discussed <a href="#Connecting_to_MongoDB">in the Mongoose primer above</a>, this code creates the default connection to the database and binds to the error event (so that errors will be printed to the console). </p> + +<h2 id="Defining_the_LocalLibrary_Schema">Defining the LocalLibrary Schema</h2> + +<p>We will define a separate module for each model, as <a href="#One_schemamodel_per_file">discussed above</a>. Start by creating a folder for our models in the project root (<strong>/models</strong>) and then create separate files for each of the models:</p> + +<pre>/express-locallibrary-tutorial //the project root + <strong>/models</strong> + <strong>author.js</strong> + <strong>book.js</strong> + <strong>bookinstance.js</strong> + <strong>genre.js</strong> +</pre> + +<h3 id="Author_model">Author model</h3> + +<p>Copy the <code>Author</code> schema code shown below and paste it into your <strong>./models/author.js</strong> file. The schema defines an author as having <code>String</code> SchemaTypes for the first and family names (required, with a maximum of 100 characters), and <code>Date</code> fields for the dates of birth and death.</p> + +<pre class="brush: js">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var AuthorSchema = new Schema( + { + first_name: {type: String, required: true, max: 100}, + family_name: {type: String, required: true, max: 100}, + date_of_birth: {type: Date}, + date_of_death: {type: Date}, + } +); + +<strong>// Virtual for author's full name +AuthorSchema +.virtual('name') +.get(function () { + +// To avoid errors in cases where an author does not have either a family name or first name +// We want to make sure we handle the exception by returning an empty string for that case + + var fullname = ''; + if (this.first_name && this.family_name) { + fullname = this.family_name + ', ' + this.first_name + } + if (!this.first_name || !this.family_name) { + fullname = ''; + } + + return fullname; +}); + +// Virtual for author's lifespan +AuthorSchema +</strong>.virtual('lifespan') +.get(function () { + return (this.date_of_death.getYear() - this.date_of_birth.getYear()).toString(); +}); + +// Virtual for author's URL +AuthorSchema +.virtual('url') +.get(function () { + return '/catalog/author/' + this._id; +}); + +//Export model +module.exports = mongoose.model('Author', AuthorSchema); + +</pre> + +<p>We've also declared a <a href="#Virtual_properties">virtual</a> for the AuthorSchema named "url" that returns the absolute URL required to get a particular instance of the model — we'll use the property in our templates whenever we need to get a link to a particular author.</p> + +<div class="note"> +<p><strong>Note:</strong> Declaring our URLs as a virtual in the schema is a good idea because then the URL for an item only ever needs to be changed in one place.<br> + At this point, a link using this URL wouldn't work, because we haven't got any routes handling code for individual model instances. We'll set those up in a later article!</p> +</div> + +<p>At the end of the module, we export the model.</p> + +<h3 id="Book_model">Book model</h3> + +<p>Copy the <code>Book</code> schema code shown below and paste it into your <strong>./models/book.js</strong> file. Most of this is similar to the author model — we've declared a schema with a number of string fields and a virtual for getting the URL of specific book records, and we've exported the model.</p> + +<pre class="brush: js">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var BookSchema = new Schema( + { + title: {type: String, required: true}, + <strong> author: {type: Schema.Types.ObjectId, ref: 'Author', required: true},</strong> + summary: {type: String, required: true}, + isbn: {type: String, required: true}, + <strong> genre: [{type: Schema.Types.ObjectId, ref: 'Genre'}]</strong> + } +); + +// Virtual for book's URL +BookSchema +.virtual('url') +.get(function () { + return '/catalog/book/' + this._id; +}); + +//Export model +module.exports = mongoose.model('Book', BookSchema); +</pre> + +<p>The main difference here is that we've created two references to other models:</p> + +<ul> + <li>author is a reference to a single <code>Author</code> model object, and is required.</li> + <li>genre is a reference to an array of <code>Genre</code> model objects. We haven't declared this object yet!</li> +</ul> + +<h3 id="BookInstance_model">BookInstance model</h3> + +<p>Finally, copy the <code>BookInstance</code> schema code shown below and paste it into your <strong>./models/bookinstance.js</strong> file. The <code>BookInstance</code> represents a specific copy of a book that someone might borrow and includes information about whether the copy is available, on what date it is expected back, and "imprint" (or version) details.</p> + +<pre class="brush: js">var mongoose = require('mongoose'); + +var Schema = mongoose.Schema; + +var BookInstanceSchema = new Schema( + { + book: { type: Schema.Types.ObjectId, ref: 'Book', required: true }, //reference to the associated book + imprint: {type: String, required: true}, + status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>}, + due_back: {type: Date, <strong>default: Date.now</strong>} + } +); + +// Virtual for bookinstance's URL +BookInstanceSchema +.virtual('url') +.get(function () { + return '/catalog/bookinstance/' + this._id; +}); + +//Export model +module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre> + +<p>The new things we show here are the field options:</p> + +<ul> + <li><code>enum</code>: This allows us to set the allowed values of a string. In this case, we use it to specify the availability status of our books (using an enum means that we can prevent mis-spellings and arbitrary values for our status).</li> + <li><code>default</code>: We use default to set the default status for newly created bookinstances to maintenance and the default <code>due_back</code> date to <code>now</code> (note how you can call the Date function when setting the date!).</li> +</ul> + +<p>Everything else should be familiar from our previous schema.</p> + +<h3 id="Genre_model_-_challenge!">Genre model - challenge!</h3> + +<p>Open your <strong>./models/genre.js</strong> file and create a schema for storing genres (the category of book, e.g. whether it is fiction or non-fiction, romance or military history, etc).</p> + +<p>The definition will be very similar to the other models:</p> + +<ul> + <li>The model should have a <code>String</code> SchemaType called <code>name</code> to describe the genre.</li> + <li>This name should be required and have between 3 and 100 characters.</li> + <li>Declare a <a href="#Virtual_properties">virtual</a> for the genre's URL, named <code>url</code>.</li> + <li>Export the model.</li> +</ul> + +<h2 id="Testing_—_create_some_items">Testing — create some items</h2> + +<p>That's it. We now have all models for the site set up!</p> + +<p>In order to test the models (and to create some example books and other items that we can use in our next articles) we'll now run an <em>independent</em> script to create items of each type:</p> + +<ol> + <li>Download (or otherwise create) the file <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> inside your <em>express-locallibrary-tutorial</em> directory (in the same level as <code>package.json</code>). + + <div class="note"> + <p><strong>Note:</strong> You don't need to know how <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> works; it just adds sample data into the database.</p> + </div> + </li> + <li>Enter the following commands in the project root to install the <em>async</em> module that is required by the script (we'll discuss this in later tutorials, ) + <pre class="brush: bash">npm install async</pre> + </li> + <li>Run the script using node in your command prompt, passing in the URL of your <em>MongoDB</em> database (the same one you replaced the <em>insert_your_database_url_here </em>placeholder with, inside <code>app.js</code> earlier): Be sure to pass it as a string by wrapping it with <code>''</code>. + <pre class="brush: bash">node populatedb <your mongodb url></pre> + </li> + <li> + <div class="blockIndicator note"> + <p><strong>Note for Windows operating system users</strong>: If the above command results in the error <code>DeprecationWarning: current URL string parser is deprecated</code>, change the <code>mongoose.connect(mongoDB);</code> line in <code>populatedb.js</code> file with <code>mongoose.connect(mongoDB, { useNewUrlParser:true });</code></p> + + <p>Also, if you encounter problem with your MongoDb connection(e.g. <strong>MongoDb connection error: TypeError: Cannot read property 'split' of null</strong>) you should try the command above, only WITHOUT wrapping mongodb url as a string with ' ';</p> + </div> + </li> + <li>The script should run through to completion, displaying items as it creates them in the terminal.</li> +</ol> + +<div class="note"> +<p><strong>Tip:</strong> Go to your database on mongoDB Atlas (in the <em>Collections</em> tab). You should now be able to drill down into individual collections of Books, Authors, Genres and BookInstances, and check out individual documents.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>In this article, we've learned a bit about databases and ORMs on Node/Express, and a lot about how Mongoose schema and models are defined. We then used this information to design and implement <code>Book</code>, <code>BookInstance</code>, <code>Author</code> and <code>Genre</code> models for the <em>LocalLibrary</em> website.</p> + +<p>Last of all, we tested our models by creating a number of instances (using a standalone script). In the next article we'll look at creating some pages to display these objects.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li> + <li><a href="http://mongoosejs.com/">Mongoose website</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/models.html">Models</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> (Mongoose docs)</li> + <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> (Mongoose docs)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li> + <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li> +</ul> diff --git a/files/de/learn/server-side/index.html b/files/de/learn/server-side/index.html new file mode 100644 index 0000000000..49ab06f262 --- /dev/null +++ b/files/de/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Serverseitige Webseitenprogrammierung +slug: Learn/Server-side +tags: + - Anfänger + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - Server + - Server-side programming + - Topic + - serverseitiges Programmieren +translation_of: Learn/Server-side +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Der Themenbereich <strong><em>Dynamische Webseiten </em></strong>–<em><strong> Serverseitige Programmierung</strong></em> beinhaltet eine Reihe von Modulen, die erläutern, wie man dynamische Webseiten erstellt. Dynamische Webseiten sind Seiten, die individualisierte Inhalte als Antwort auf HTTP-Anfragen ausliefern. Die Module bieten eine allgemeine Einführung in die serverseitige Programmierung, wie auch spezifische Anfänger-Leitfäden zur Benutzung der Django (Python) und Express (Node.js/JavaScript) Web-Frameworks zum Erstellen von einfachen Anwendungen.</p> + +<p>Die meisten großen Webseiten nutzten irgendeine Art serverseitiger Technologie zur dynamischen Anzeige von verschiedenen Daten, je nach Bedarf. Stellen Sie sich zum Beispiel einmal vor, wie viele Produkte es auf Amazon gibt und wie viele Posts auf Facebook geschrieben wurden. All diese darzustellen, indem man komplett statische Seiten nutzt, wäre völlig ineffizient. Deshalb laden solche Seiten stattdessen erst statische Vorlagen (erstellt mit <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a> und <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>), dann aktualisieren sie die Daten in diesen Vorlagen dynamisch, wenn sie benötigt werden, z.B. wenn Sie sich ein anderes Produkt auf Amazon ansehen wollen.</p> + +<p>In der modernen Welt der Webentwicklung ist es sehr empfehlenswert, etwas über serverseitige Entwicklung zu lernen.</p> + +<h2 id="Ihr_Lernweg">Ihr Lernweg</h2> + +<p>Mit dem serverseitigen Programmieren zu beginnen, ist in der Regel leichter als mit der clientseitigen, weil dynamische Webseiten dazu neigen, viele ähnliche Arbeitsabläufe auszuführen (Daten aus einer Datenbank laden und auf der Webseite darstellen, Benutzereingaben validieren und in einer Datenbank speichern, Berechtigungen von Nutzern prüfen und einloggen von Benutzern, etc.) und mit Web-Frameworks konstruiert werden, die diese und andere häufige Webserver-Aufgaben erleichtern.</p> + +<p>Grundlegende Kenntnisse von Konzepten der Programmierung (oder einer bestimmten Programmiersprache) sind hilfreich, aber nicht unbedingt notwendig. Genauso sind Kenntnisse in der clientseitigen Programmierung keine Vorraussetzung, aber ein grundlegendes Verständnis wird Ihnen helfen, besser mit den Entwicklern zusammen zu arbeiten, die Ihre Webseite clientseitig im "Front-end" entwickeln.</p> + +<p>Sie werden verstehen müssen, "wie das Internet funktioniert". Wir empfehlen, dass Sie zuerst die folgenden Themen lesen:</p> + +<ul> + <li><a href="/en-US/docs/Learn/Common_questions/What_is_a_web_server">What is a web server</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">What software do I need to build a website?</a></li> + <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">How do you upload files to a web server?</a></li> +</ul> + +<p>Mit diesem grundlegenden Verständnis sind Sie bereit, sich durch die Module in diesem Abschnitt zu arbeiten. </p> + +<h2 id="Module">Module</h2> + +<p>Dieses Thema enthält die folgenden Module. Sie sollten mit dem ersten Modul beginnen, dann eines der nachfolgenden Module auswählen, die Ihnen zeigen, wie man mit zwei sehr verbreiteten serverseitigen Sprachen arbeitet, indem man das entsprechende Web-Framework verwendet.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a></dt> + <dd>Dieses Modul bietet Server-Technologie-agnostische Informationen über serverseitiges Programmieren von Webseiten, einschließlich der Antworten auf die fundamentalen Fragen des serverseitigen Programmierens — "Was ist es?", "Wie unterscheidet es sich vom clientseitigen Programmieren?" und "Warum ist es so nützlich", einen Überblick über einige der verbreiteteren serverseitigen Web-Frameworks und einen Ratgeber darüber, wie Sie das am besten für Ihre Seite passende auswählen. Zuletzt geben wir noch eine Einführung in die Sicherheit von Webservern.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a></dt> + <dd>Django ist ein extrem beliebtes und vollwertiges Web-Framework, geschrieben in Python. Das Modul erklärt, warum Django so ein gutes Server-Framework ist, wie man eine Entwicklnugsumgebung einrichtet und wie man häufige Aufgaben damit erledigt.</dd> + <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a></dt> + <dd>Express ist ein beliebtes Web-Framework, geschrieben in JavaScript und gehostet in der node.js Laufzeitumgebung. Das Modul erklärt einige der Hauptvorteile dieses Frameworks, wie Sie Ihre Entwicklungsumgebung einrichten und wie man damit häufige Entwicklungs- und Bereitstellungsaufgaben umsetzt.</dd> +</dl> + +<h2 id="Siehe_auch">Siehe auch</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Server-side/Node_server_without_framework">Node server without framework</a></dt> + <dd>Dieser Artikel liefert einen einfachen statischen Dateiserver, der mit Node.js erstellt wurde, für diejenigen, die das Framework nicht verwenden möchten.</dd> +</dl> diff --git a/files/de/learn/tools_and_testing/cross_browser_testing/index.html b/files/de/learn/tools_and_testing/cross_browser_testing/index.html new file mode 100644 index 0000000000..c92e094d0a --- /dev/null +++ b/files/de/learn/tools_and_testing/cross_browser_testing/index.html @@ -0,0 +1,49 @@ +--- +title: Cross browser testing +slug: Learn/Tools_and_testing/Cross_browser_testing +tags: + - Accessibility + - Automation + - Beginner + - CSS + - CodingScripting + - HTML + - JavaScript + - Landing + - Learn + - Module + - NeedsTranslation + - Testing + - Tools + - TopicStub + - cross browser +translation_of: Learn/Tools_and_testing/Cross_browser_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">This module focuses on testing web projects across different browsers. We look at identifying your target audience (e.g. what users, browsers, and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to mitigate them, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here.</p> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></dt> + <dd>This article starts the module off by providing an overview of the topic of cross browser testing, answering questions such as "what is cross browser testing?", "what are the most common types of problems you'll encounter?", and "what are the main approaches for testing, identifying, and fixing problems?"</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></dt> + <dd>Next, we drill down into carrying out testing, looking at identifying a target audience (e.g. what browsers, devices, and other segments should you make sure are tested), low fi testing strategies (get yourself a range of devices and some virtual machines and do adhoc tests when needed), higher tech strategies (automation, using dedicated testing apps), and testing with user groups.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></dt> + <dd>With the scene set, we'll now look specifically at the common cross browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handing CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></dt> + <dd>Now we'll look at common cross browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></dt> + <dd>Next we turn our attention to accessibility, providing information on common problems, how to do simple testing, and how to make use of auditing/automation tools for finding accessibility issues.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></dt> + <dd>Feature detection involves working out whether a browser supports a certain block of code, and running different code dependent on whether it does (or doesn't), so that the browser can always provide a working experience rather crashing/erroring in some browsers. This article details how to write your own simple feature detection, how to use a library to speed up implementation, and native features for feature detection such as <code>@supports</code>.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></dt> + <dd>Manually running tests on several browsers and devices, several times per day, can get tedious and time consuming. To handle this efficiently, you should become familiar with automation tools. In this article we look at what is available, how to use task runners, and the basics of how to use commercial browser test automation apps such as Sauce Labs and Browser Stack.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></dt> + <dd>In this article, we will teach you how to install your own automation environment and run your own tests using Selenium/WebDriver and a testing library such as selenium-webdriver for Node. We will also look at how to integrate your local testing environment with commercial apps like the ones discussed in the previous article.</dd> +</dl> diff --git a/files/de/learn/tools_and_testing/index.html b/files/de/learn/tools_and_testing/index.html new file mode 100644 index 0000000000..0099fb70c6 --- /dev/null +++ b/files/de/learn/tools_and_testing/index.html @@ -0,0 +1,46 @@ +--- +title: Tools and testing +slug: Learn/Tools_and_testing +tags: + - Anfänger + - Automation + - Barrierefreiheit + - CSS + - CodingScripting + - HTML + - JavaScript + - Landen + - Lernen + - Nutzer testen + - Testen + - Thema + - Werkzeuge + - browserübergreifend +translation_of: Learn/Tools_and_testing +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Wenn du dich mit den Grundlegenden Web-Technologien (wie HTML, CSS und JavaScript) vertraut gemacht, und du begonnen hast mehr Erfahrung zu sammeln, mehr Quellen zu lesen und mehr Tipps und Tricks zu lernen, wirst du auf verschiedenste Werkzeuge stoßen mit denen du arbeiten kannst. Von JavaScript über Test- und Automatisierungsapps hin zu vielen Anderen. Du wirst beginnen den Nutzen solcher Werkzeuge zu schätzen, sobald dein Webprojekt wächst und komplexer wird und damit zuverlässige Test Pläne für deinen Code erarbeiten. Dieser Teil des Lernbereichs soll dir geben was du brauchst, um anzufangen und eine bewusste Auswahl zu treffen.</p> + +<p>Die Interenet Industrie ist ein spannender Arbeitsbereich, aber er hat auch seine Schwierigkeiten. Die Kern-Technologien die wir nutzen, um Webseiten zu erstellen sind heute weitgehend stabil, aber es werden ständig neue Features hinzugefügt und neue Werkzeuge - die die Arbeit damit ermöglichen und die auf diesen Technologien aufbauen - erscheinen die ganze Zeit. Zusätzlich müssen wir vordergründig immer noch Browser-übergreifende Unterstützung und kompatibilität bedenken, um sicherzustellen, dass unser Code gängigen Best-Practices folgt. Durch diese wird gewährleistet, dass unser Projekt auf den verschiedenen Browsern und Geräten, die unsere Nutzer verwenden um im Internet zu surfen und auch von Menschen mit Einschränkungen, genutzt werden können.</p> + +<p>Es kann schwierig sein, herauszufinden mit welchen Werkzeugen du arbeiten solltest. Darum haben wir diese Artikel-Serie geschrieben: Um dich zu informieren welche Tools es gibt, was sie für dich machen können und wie du die aktuellen Industry Favorites benutzen kannst.</p> + +<div class="note"> +<p><strong>Wichtig:</strong> Weil ständig neue Tools erscheinen und alte aus der Mode kommen, haben wir darauf geachtet, die Inhalte so bedacht und Neutral wie möglich zu schreiben - wir wollen den Fokus in erster Linie auf die generellen Arten von Aufgaben legen und wie Werkzeuge dir helfen diese zu lösen, und beschreiben spezifische Tools so wenig wie möglich. Klarerweise müssen wir anhand diverser Tools bestimmte Techniken vorzeigen, aber sei dir bewusst, dass wir diese Tools nicht als die besten empfehlen oder das der einzige Weg ist wie du die Dinge tun kannst - in den meisten Fällen gibt es andere Wge, aber wir wollen dir eine klare Methode vorzeigen die funktioniert.</p> +</div> + +<h2 id="Lerne_in_der_Reihenfolge">Lerne in der Reihenfolge</h2> + +<p>Du solltest wirklich die Basics der Kernsprachen <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML">HTML</a>, <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS">CSS</a> und <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript">JavaScript</a> zuerst lernen, bevor du anfängst die hier beschriebenen Tools zu benutzen. Du musst die Grundlagen dieser Sprachen kennen, bevor du ein Problem in komplexem Webcode debuggen, JavaScript Bibliotheken effektiv nutzen, oder Tests schreiben und gegen deinen Code mit Testrunners laufen lassen kannst. Usw.</p> + +<p>Du brauchst zuerst ein solides Fundament.</p> + +<h2 id="Module">Module</h2> + +<dl> + <dt>Real world web development tools (TBD)</dt> + <dd>In diesem Modul erforschen wir die unterschiedlichen Arten von Web-Entwicklungs Werkzeugen die es gibt. Das beeinhaltet die Betrachtung der üblichsten Arten von Aufgaben die du zu lösen hast, wie diese in einem Arbeitsablauf zusammengelegt werden können, und die besten Werkzeuge die derzeit erhältlich sind, um diese Aufgaben durchzuführen.</dd> + <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Browser-übergreifendes Testen</a></dt> + <dd>Dieses Modul behandelt speziell das Testen von Web-Projekten auf den unterschiedlichen Browsern. Hier identifizieren wir deine Zielgruppe (z.B. um welche Nutzer, Browser und Geräte musst du dich am meisten kümmern?), Vorgehensweise bei Tests, die Hauptprobleme die dich mit den unterschiedlichen Typen von Code konfrontieren und wie du diese löst/minderst, welche Werkzeuge die hilfreichsten fürs Testen und Lösen von Problemen sind, und wie du Automatisierung nutzt, um Test zu beschleunigen.</dd> +</dl> |