diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2021-07-15 12:58:54 -0400 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-07-15 12:58:54 -0400 |
| commit | 9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd (patch) | |
| tree | 6fd33b1d14bd8f53a73291e4afa6f9d6400f1964 /files/de/learn | |
| parent | fe0831846de29cce74db723e625c90b1ef966d9d (diff) | |
| download | translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.gz translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.tar.bz2 translated-content-9ace67d06f2369e3c770e3a11e06e1c8cc9f66fd.zip | |
delete pages that were never translated from en-US (de, part 1) (#1548)
Diffstat (limited to 'files/de/learn')
9 files changed, 0 insertions, 3584 deletions
diff --git a/files/de/learn/common_questions/how_does_the_internet_work/index.html b/files/de/learn/common_questions/how_does_the_internet_work/index.html deleted file mode 100644 index e53bb596f3..0000000000 --- a/files/de/learn/common_questions/how_does_the_internet_work/index.html +++ /dev/null @@ -1,96 +0,0 @@ ---- -title: Wie das Internet funktioniert -slug: Learn/Common_questions/How_does_the_Internet_work -translation_of: Learn/Common_questions/How_does_the_Internet_work -original_slug: Learn/Common_questions/Wie_das_Internet_funktioniert ---- -<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/values_and_units/index.html b/files/de/learn/css/building_blocks/values_and_units/index.html deleted file mode 100644 index 7cf48f86f7..0000000000 --- a/files/de/learn/css/building_blocks/values_and_units/index.html +++ /dev/null @@ -1,395 +0,0 @@ ---- -title: Werte und Einheiten in CSS -slug: Learn/CSS/Building_blocks/Values_and_units -tags: - - CSS - - Einheiten - - Farbe - - Lernen - - Werte -translation_of: Learn/CSS/Building_blocks/Values_and_units -original_slug: Learn/CSS/Building_blocks/Werten_Einheiten ---- -<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/html/tables/basics/index.html b/files/de/learn/html/tables/basics/index.html deleted file mode 100644 index b162ed291d..0000000000 --- a/files/de/learn/html/tables/basics/index.html +++ /dev/null @@ -1,556 +0,0 @@ ---- -title: Grundtabellen in HTML -slug: Learn/HTML/Tables/Basics -translation_of: Learn/HTML/Tables/Basics -original_slug: Learn/HTML/Tables/Grund_tabelle_HTML ---- -<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/javascript/building_blocks/events/index.html b/files/de/learn/javascript/building_blocks/events/index.html deleted file mode 100644 index 88c8c66afd..0000000000 --- a/files/de/learn/javascript/building_blocks/events/index.html +++ /dev/null @@ -1,588 +0,0 @@ ---- -title: Einleitung der Ereignissen -slug: Learn/JavaScript/Building_blocks/Events -translation_of: Learn/JavaScript/Building_blocks/Events -original_slug: Learn/JavaScript/Bausteine/Ereignisse ---- -<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/first_steps/variables/index.html b/files/de/learn/javascript/first_steps/variables/index.html deleted file mode 100644 index d8906f7d02..0000000000 --- a/files/de/learn/javascript/first_steps/variables/index.html +++ /dev/null @@ -1,386 +0,0 @@ ---- -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/objects/inheritance/index.html b/files/de/learn/javascript/objects/inheritance/index.html deleted file mode 100644 index 8eacfbcbfd..0000000000 --- a/files/de/learn/javascript/objects/inheritance/index.html +++ /dev/null @@ -1,440 +0,0 @@ ---- -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="/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/server-side/express_nodejs/mongoose/index.html b/files/de/learn/server-side/express_nodejs/mongoose/index.html deleted file mode 100644 index 7fb3b69ebe..0000000000 --- a/files/de/learn/server-side/express_nodejs/mongoose/index.html +++ /dev/null @@ -1,843 +0,0 @@ ---- -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="/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/first_steps/introduction/index.html b/files/de/learn/server-side/first_steps/introduction/index.html deleted file mode 100644 index 48ab6570fc..0000000000 --- a/files/de/learn/server-side/first_steps/introduction/index.html +++ /dev/null @@ -1,231 +0,0 @@ ---- -title: Einführung auf der Serverseite -slug: Learn/Server-side/First_steps/Introduction -tags: - - Anfänger - - Einführung -translation_of: Learn/Server-side/First_steps/Introduction -original_slug: Learn/Server-side/Erste_Schritte/Introduction ---- -<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/tools_and_testing/cross_browser_testing/index.html b/files/de/learn/tools_and_testing/cross_browser_testing/index.html deleted file mode 100644 index c92e094d0a..0000000000 --- a/files/de/learn/tools_and_testing/cross_browser_testing/index.html +++ /dev/null @@ -1,49 +0,0 @@ ---- -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> |